UX 탐험기

최근 사이드 프로젝트를 하면서, 다른 역할을 맡은 구성원 간 서로의 업무에 대한 이해도가 높은 것이 정말 중요하다는 것을 느꼈다. 결정적으로 중요성을 체감한 부분은 바로 이다. 일단 서로 어떤 일을 하는지, 그 일을 하려면 대강 리소스가 얼마나 들 것 같은지, 그 일이 그 사람에게 핵심 업무인지 아닌지를 알고 있다보니 협업을 요청할 때 편리하다. 요청사항을 좀 더 현실적으로 작성할 수 있고, 서로의 고생(?)이 한 눈에 보이다보니 더 배려하는 소통 방식을 취하는 데에도 큰 영향을 받은 듯 하다. 나는 아무래도 개발자와 협업하는 일이 잦으니까, 평소 애매하게&감으로만 알고 있었던 협업에 필요한 개발 용어/개념을 정리해보면 좋겠다는 생각이 들었다. 그래서 시작합니다 ! . (용어의 목록은 도서 를 참고해 추..

UI 컴포넌트의 큰 그림을 그리고 가는 파트! 사이드 프로젝트 회의 중 프론트엔드 개발자 팀원과 이야기를 하는데, 서로 어떤 컴포넌트를 가리키는지 알면서도 그 컴포넌트의 이름을 둘 다 기억하지 못해 애먹었던 경험이 있다. ('kebab'이었다는 후문..) 그래서 통용되는 컴포넌트 이름을 한번 정리하면 좋겠다 싶었는데 마침 Material Design 3에 주요 UI 컴포넌트를 사전 식으로 정리해본다. 01. Banner 중요한 메시지 및 그에 관련된 액셩을 표시 02. Button 사용자로 하여금 어떤 액션을 시작할 수 있도록 도움 03. Button App Bar 모바일 화면 하단에 주요 내비게이션 아이콘 또는 액션을 표시 04. Bottom Sheet 화면 하단에 걸리는 콘텐츠로, 보충적인 내용을 담..

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 아래 가이드라인은 스크린 사이즈 별로 어떤 레이아웃이 반응형 디자인을 하기에 가..