UX 탐험기

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

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은 숫자) 로 표기하는데, 숫..

오늘의집 이사를 계획하던 무렵 카카오톡보다 자주 들어갔던 앱 오늘의집 ! 특히 다른 사람들이 멋지게 꾸민 집을 공개하는 '집들이' 탭을 가장 좋아한다 각기 다른 사람들의 취향을 보는 것도, 탁월한 공간 활용 사례를 보면서 내 방에 대한 청사진을 그려나가는 것도 재미있다 그래서 이번에는 오늘의집을 선택하게 되었다 더보기 여담...'집들이'를 제일 좋아한다면서 막상 클론은 '마이페이지'로 한 이유 코로나에 걸려서 컨디션이 몹시 엉망인 와중에, 디자인 연습은 해야겠으니 구조가 제일 간단해보이는 걸로 하기로 결정했다 코로나 저리 가 훠이훠이 오늘의집 -> https://ohou.se/ 인테리어 집꾸미기는 오늘의집 오늘의집에서 다양한 인테리어 이야기를 함께해요. ohou.se 디자인 작업물 좌 : Original..

클론 디자인을 새로운 습관으로 UI 디자인을 배우기 시작하면서, Figma와 같은 '툴을 다루는 법'은 쉽게 익힐 수 있다는 것을 깨달았다 정말 어려운 건 아래와 같은 것들이었다 여백은 어느 정도 주는 게 좋지? 아이콘 크기는 어느 정도로 해야 터치 경험을 방해하지 않을 수 있지? Radius 는 어느 정도로 설정해야 적당히 둥글게 보이지? 그럴 때 다른 훌륭한 UI 디자인을 많이 참고해보았지만, 보는 것만으로는 내 것으로 만들 수 없었다 (+Udemy나 Youtube에서 강의 위주로 배우고, 하라는 것만 따라하는 것도 졸리고 재미 없고...) 그래서 두둥탁, 기본적인 디자인, 배우고 싶은 디자인을 참고해 비슷하게 구현해보는 클론 디자인을 새로운 습관으로 만들어보기로 결심! 원칙은 이렇게 정해 보았다 주..