UX 탐험기

State layers state layer란, UI 요소의 상태를 나타내는 반투명 막과 같은 개념이다. 투명도를 조절하며 요소의 상태를 보여준다는 맥락으로 이해하면 된다. state layer는 각 상태에 따라 정해져 있는 투명도를 적용시키며, 콘텐츠의 색상과 동일한 색상을 사용한다. 예를 들어, 활성화 상태의 스타일이 컨테이너 색상으로 A를 쓰고 콘텐츠 색상으로 A' 를 쓴다고 하면, state layer의 색상은 A'가 된다. "On" colors 어떤 UI 요소의 State layer 색상은 콘텐츠 색상으로 인해 결정된다. "On color"는 콘텐츠에 사용되는 색상을 의미한다. State layer tokens & values state layer는 각 상태에 따라 고정된 투명도 값을 갖고 있으..

What's a design token? 디자인 토큰이란, 디자인 시스템의 시각적인 스타일을 완성시키는 "작게 반복되는 디자인 결정" 단위를 의미한다. 토큰으로써 해당 요소의 디자인 속성을 설명함에 따라 컬러를 의미하는 헥스 코드와 같은 정적인 값을 대체할 수 있다. Material Design Token은 2가지의 부분으로 구성되어 있다. 1) md.ref.palette.secondary90와 같이 코드처럼 생긴 이름 2) #E8DER8과 같이 연관되어 설명하고 있는 이름 토큰의 값은 컬러, 타이포, 측정치, 또는 다른 토큰의 값 중 하나가 될 수 있다. 디자인 토큰을 사용함에 따라 서로 명확환 관계성을 잃을 수도 있었던 스타일 요소들이 의미있게 연결될 수 있다. 예를 들어, 디자이너의 시안과 개발자의..

Canonical Layout이란? (말 그대로 표준적인/전형적인 레이아웃을 의미한다) Material Design 3에서는 3개의 표준 레이아웃을 가이드로써 제시한다. 각각의 레이아웃은, 화면 크기 및 중단점 별로 유저의 기대와 니즈를 맞추기 위해 앱이 어떻게 반응해야 하는가를 고려해서 제작되었다 List-detail view 화면이 가로로 긴 Landscape 방향의 화면에서만 적용 가능한 레이아웃으로, 화면 왼쪽에는 리스트를, 오른쪽에는 해당 리스트의 자세한 내용을 보여주는 방식이다 (1) 주 사용처 텍스트 메시지 + 대화 파일 브라우저 + 선택되어 열린 파일 (음악 서비스에서) 아티스트 + 앨범 상세 내용 (2) 사용하는 상황 콘텐츠를 둘러보면서 각 콘텐츠의 상세 내용을 빠르게 훑어보는 상황에 용..

Component Adaptation 기기의 크기 및 사용처에 따라 시각적인 표현 (패딩, 사이즈, 레이아웃, 정렬 등) 을 달리 하는 것을 Component Adaptation이라고 한다. UI 요소나 레이아웃 컨테이너의 크기를 조정할 때, 위치나 정렬은 어떻게 바뀌어야 하는지도 고려해야 한다. 해당 UI 요소 및 컨테이너 '내부'에 있는 요소를 어느 기준으로 정렬할 것인지도 살펴봐야 한다. 왼쪽 / 오른쪽 / 중앙에 붙일 수도 있고 내비게이션 바 요소처럼 위치를 고정시킬 수도 있다. 컴포넌트의 내부 구조를 어떻게 조정할지 고려할 때에는, 인체공학적인 측면 역시 고려해야 한다. 예를 들어 화면의 크기가 커질수록, 가로 방향 카드 요소의 테두리는 더 각진 사각형의 형태가 될 수 있다. 이렇게 조정해야, ..

Adaptive Design 반응형 레이아웃이란 사용자가 입력한 인풋, 디바이스 종류, 스크린의 요소에 반응하는 것이다 자연스럽게 반응하는 것, 다양한 크기의 디바이스에 반응하는 것이 중요하다 Design for large screens (1) Responsive layout grid Grid는 Column (기둥), Gutter(기둥 간의 여백), Margin (기둥과 프레임 간의 여백) 으로 구성된다 텍스트, 이미지 등 다양한 UI 요소를 Grid에 맞춰 배치함으로써 일관적이고 논리적인 사용자 경험을 만들어낼 수 있다 프레임의 크기가 변하면 프레임 내의 Column 의 갯수도 그에 맞춰 변한다 (2) Breakpoints 아래 가이드라인은 스크린 사이즈 별로 어떤 레이아웃이 반응형 디자인을 하기에 가..

Color & Contrast 색상과 대비는 사용자로 하여금 앱 내의 콘텐츠를 보고 해석하며, 적절한 요소를 작용시키고 앱 내의 액션을 이해할 수 있도록 돕는 장치이다 색상은 분위기, 톤, 중요한 정보를 식별하는 데에 효과적이다 주요 색상, 부차적 색상, 강조 색상을 적절히 사용하면 사용성을 증진시킬 수 있다 요소 간에 충분한 색상 대비를 줌에 따라 시력이 낮은 사용자도 앱 내 콘텐츠를 적절하게 보고 사용할 수 있다 Contrast ratios 사용자가 어려움 없이 다양한 요소를 구분하기 위해 중요하게 활용되는 장치가 색상 대비이다 색상 대비가 높으면 요소 간의 구분이 한결 수월해진다 색상 대비란, 하나의 색상이 다른 색상과 얼마나 다른지를 값으로 표시한 지표이다 n:n (n은 숫자) 로 표기하는데, 숫..

사이드 프로젝트 일정이 다소 변경되는 바람에, 클론이 아닌 창작이 필요한 시점이 생각보다 일찍 도래했다 그래서 당분간은 클론 디자인 대신, 창작에 필요한 지식을 습득하는 시간을 가지려고 한다 Google Material Design 3 문서를 번역/공부하면서 이 과정을 기록할 생각이다 단순 직역이 아니라, 가이드를 읽어보면서 드는 생각이나 나만의 해석도 덧붙일 예정이다 Foundations > Components > Styles 순으로 내용을 살펴봐야겠다 @이 글을 읽어보시는 분들 : 이 글은 Google Material Design 3 문서를 공부한 기록이며, 해당 문서를 모두 번역하거나 직역한 글이 아닙니다 핵심 정보라고 판단한 문장 번역 및 개인적인 해석(괄호 안에 기술)이 더해진 글이니 참고 부탁..