ABsolutelyNORMAL

Color & Contrast 색상과 대비 색상 및 대비를 사용하여 사용자가 어플리케이션의 내용을 보고 해석하고 올바른 요소와 상호작용하며 작업을 이해하는 것을 도울 수 있다. 색상은 분위기, 색조 및 중요한 정보를 전달하는 데 도움을 줄 수 있다. 기본 색상과 보조색상 및 강조 색상은 사용성을 지원하도록 선택할 수 있다. 요소 간의 충분한 색상 대비는 저시력 사용자가 어플리케이션을 보면서 사용하는데 도움을 줄 수 있다. 1. Contrast ratios 대비 비율 색상 대비는 사용자들이 다양한 텍스트 요소와 비텍스트 요소를 구분하는데 중요한 역할을 한다. 낮은 대비의 이미지는 어떤 사용자들에게는 해가 쨍쨍한 밝은 날이나 밤이라 어두운 환경 조건 아래에서 구분하기 어려워 보이는 반면 더 강한 대비는 알아..

Foundations 기본 매터리얼 기본에서는 접근성 표준부터 레이아웃 및 상호 작용을 위한 필수 패턴에 이르기까지 모든 훌륭한 사용자 인터페이스의 기초에 대해 안내한다. 1. Accessibility 접근성 접근 가능한 디자인으로 다양한 능력을 가진 사용자들 모두가 UI를 탐색하고 이해하고 즐길 수 있게 한다. 제품에 대한 이해를 높이기 위한 계층 구조의 단순화 WCAG(Web Content Accessibility Guidelines)의 사용으로 최소 요구 사항의 충족화 구조, 흐름 및 화면 요소의 정의 1. 1. Overview Accessibility & Material Design 접근성과 매터리얼 디자인 기본적으로 매터리얼 디자인의 기본적인 디자인 가치는 접근성의 충족이다. 다양한 능력을 가진..

Icons are small symbols for actions or other items. 아이콘은 동작이나 다른 항목에 대한 작은 상징이다. 매터리얼 심볼 아이콘은 다음 URL에서 받을 수 있다. fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 매터리얼의 다양한 심볼 아이콘 폰트를 사용하여 제품을 역동적으로 스타일링할 수 있다. 아이콘의 두께와 면 채우기, 시각적 크기와 아이..

Color Roles 색상 역할 Tones are assined to color roles : 색상 역할에 할당되는 톤 주요 색상들은 톤 팔레트의 기본이 되고, UI에서는 각 톤 팔레트에서 13가지의 색상만 선택적으로 사용하게 된다. 컬러 시스템 구성표(도식 Scheme)는 각각의 컴포넌트에 매핑된 특정 역할에 할당된 톤의 그룹이라고 보면 된다. 예를 들면 주조색의 톤 팔레트에서 컴포넌트 중 가장 위에 올라가는 글자와 아이콘에 사용할 색상처럼 연관성 있는 역할에 적용하는 톤 그룹을 정의할 수 있다. 색상 역할에서의 연결된 색조는 기본적으로 접근성 기준을 충족하는 대비를 제공하고 추가적인 사용자 정의 색상이 기존 컬러 시스템의 도식과 어울리도록 색조를 조정할 수 있게 해 준다. Roles in a sche..

Color System UI 컴포넌트에 맞게 26가지 이상의 역할로 구성되어 있는 컬러 시스템 컬러 시스템에서는 사용자의 입력에 따라 동적으로 변경되는 색상 구성을 가변적으로 처리하고 있다. 색조의 관계(배색에 있어서의) 논리와 색조 및 채도의 변경은 색상을 유연하게 적용하기 위한 기본을 제시한다. 컬러 시스템 구성표는 고정된 상수로 결정된 값의 그룹이 아닌 상대적으로 결합된 색조로 간주될 수 있다. Key Colors 주요 색상 컬러 시스템의 기본은 13개의 색조로 구성된 개별적인 톤 팔레트와 각각 연결되는 5개의 주요 색상이 세트로 구성된다. 각 톤 팔레트에서의 특정 톤은 UI 전체에서 색상 역할을 할당받는다. 주요색상(Key Colors 주조색이라고 하기에는 주조색과 보조색, 강조색이 어우러진 그룹..

색상은 스타일을 표현하고 의미를 전달하는데 사용된다. 매터리얼에서는 동적으로 색상을 적용하여 개인의 선호와 요구를 반영할 수 있도록 컬러 시스템을 체계적으로 적용하는 것을 초석으로 한다. 색상은 의미를 만들고 상태를 표현하거나 계층 구조 및 브랜드를 전달하는데 사용된다. UI 테마를 실시간으로 변경할 수 있는 동적 색상 Dynamic Color UI 고정 디자인 토큰에 설정된 기본 컬러 시스템 Basic Color System 기본적으로 접근성에 부합하도록 대비값이 설정된 매터리얼 컬러 시스템 제품 특성에 맞게 확장 적용할 수 있는 26가지 이상의 색상 역할 Color Roles 매터리얼 새소식 What's New 톤(색조) 기반 배색 Tone-based surface colors 톤 기반 배색은 이전에..

매터리얼 디자인이 무엇인가 원문 매터리얼 디자인은 구글 디자이너 및 개발자가 개발하고 지원하는 디자인 시스템이다. Material.io는 안드로이드와 플러터(무엇인지 모르는 그 무엇인 운영체제?) 및 Web을 위한 심층 UX 가이드 및 UI 구성 요소의 구현을 포함하고 있다. 최신 버전인 Material 3은 역동적인 색상과 향상된 접근성부터 대형 화면 레이아웃 및 디자인 토큰을 위한 기반에 이르기까지 표현과 개별 조정이 가능한 개인화 경험을 제공한다. (personal, adaptive, expressive experiences 한글로 표현하기 너무 어색한 경험들) UX foundations 사용자 경험 - 기본 색상, 글꼴 및 형태 등 시스템을 개인화하는 기초 매터리얼 더보기 일스럽지만 일이니까 정리..

지난 겨울 디자인 교과 교사 모집 요강에 영상 편집 경력을 요구하는 것을 보니 이제 정말 미디어 컨텐츠 제작 능력이 주요 관심 영역인 시대가 되었나 보다. 유투브를 해 보겠다며 20년만에 프리미어를 열었다가 알 수 없는 옵션들에 너무 놀라서 정신이 나갈 뻔 했다. 유투브 하면서, 어차피 영상디자인 공부도 해야 하니까 내친 김에 교과서를 탈탈 털어 공부를 하고 있는데, 하다 보니 그 동안 갑갑했던 마음이 조금씩 풀리고 있는 부분이 있어 내심 기쁘기도 하다. 2019/05/07 - [WRITING] - 디자인공예 임용 : 영상디자인 디자인공예 임용 : 영상디자인 NCS교과서에 있는 영상 관련 교과에서 다루고 있는 기본 개념은 알아 두어야 할 것 같아서 우선은 교과서를 차근차근 읽어가며 필요한 내용을 정리하려..

NCS교과서에 있는 영상 관련 교과에서 다루고 있는 기본 개념은 알아 두어야 할 것 같아서 우선은 교과서를 차근차근 읽어가며 필요한 내용을 정리하려고 했다. 첫 번 째 교과서에서도 앞에서 나온 개념이 뒤에서 또 나오고 다른 교과서에서 같은 내용이 또 튀어 나오고 중복되는 부분이 상당히 많아서 더 혼란스러웠고 그 중에는 간단하게만 설명하고 넘어가는 교과서도 있고 좀 더 깊게 설명하는 부분도 있고 때로는 어디서 그냥 짜깁기해왔다 싶게 붙어 있는 내용도 있어서 정리를 하기로 마음 먹었다. 전체 교과를 크로스체크해서 여러 번 나오는 개념은 아무래도 중요한 개념들일테니까 우선순위로 뽑아 볼 수 있을 것 같기도 하고, 건성으로 기본 개념만으로 넘어가기 보다는 확실히 다양한 지문과 배경지식을 확인하기 위해서는 알아 ..

작년 기출을 보면 교육과정 중에서 광고 콘텐츠 제작 교과를 찍어서 능력단위 요소와 학습 모듈을 물어 본데다가 영상 관련 내용을 묻는 빈도가 점점 더 늘어나고 있는 것 같기도 하고, 서울시에서는 웹디자인이며 가상현실 디자인 교과를 새로 편성하노라고 발표까지 한 마당에 아니 볼 수 없겠다 싶어서 일단 영상 관련 교과와 콘텐츠 쪽 NCS교과서를 훑고 있는 중인데, 줄긋기를 먼저 하고 수기로 정리할 생각으로 시작했는데 영상 교과서는 보아도 보아도 끝이 없고 읽어도 읽어도 비슷한 내용이 계속 나오는데 추리고 추린 것이 900페이지가 넘어서 기함을 토하다가 수기는 나중이고 일단 중간 과정을 한 번 더 거쳐야겠다는 생각에 필요한 부분이라고 생각되는 내용만 일단 PPT로 정리를 하고 있다. 다행인 것은 NCS 교과서에..