brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Nov 28. 2020

The UI&UX tips collection (1)


아름다우면서도 사용성이 좋은 UI를 디자인하기 위해서는 여러 가지 시도를 통한 오랜 시간이 필요하다. 그러나 지난 몇 년 간 디자인에 간단하면서도 빠른 조정만으로 결과물을 크게 발전시킬 수 있는 몇 가지 방법을 발견했다.

이 가이드에 적은 노력으로 디자인과 전체적인 사용자 경험을 발전시킬 수 있는 방법들을 모아 놓았다.



1. 미묘한 테두리로 요소를 돋보이게 하라.

그림자 효과를 여러 개 사용하거나 미묘한 테두리(그림자보다 약간 어두운)는 요소들을 뿌옇게 보이는 그림자로부터 좀 더 날카롭고 또렷하게 만들어 준다.



2. 제목 텍스트는 자간을 줄여서 시각적인 균형을 주어라.

길이가 긴 본문은 자간을 줄이면 안 되지만 제목은 줄이는 것이 좋다.


제목은 본문보다 더 크고 무거워 보이기 쉽다. 그래서 글자 간의 간격이 시각적으로 더 커 보여서 미적으로 좋아 보이지 않게 된다.

자간을 약간 줄임으로써 제목을 시각적으로 균형 잡히고 읽기 쉽고 보기 좋게 만들 수 있다.



3. 일관성을 위해, 아이콘에 시각적 스타일을 동일하게 적용하라.

UI에 아이콘을 적용할 때, 일관성을 유지하라.

아이콘들이 굵기, 채워진 형태, 아웃라인 형태 등에서 시각적으로 동일한 스타일을 공유해야 한다.

스타일들을 섞어서 적용하지 말아라.



4. 디자인에 한 가지 폰트만 적용하라.

디자인에 한 가지 폰트만 적용하는 것이 가장 좋다. 한 가지 폰트만 적용된 디자인은 매우 강하고 일관적인 느낌을 전달한다.

'최소한 2가지 폰트를 사용해야 한다'라는 말은 무시하라. 굵기, 크기, 색상을 달리하여 적용하면 한 가지 폰트로도 완벽한 디자인을 만들 수 있다.



5. 여백은 UI 디자인의 친구이다. 충분히, 잘 사용하여라.


미묘한 여백이 차이가 디자인을 숨 쉬게 만들고 좀 더 세련되게 보이게 한다. 디자인을 개선할 수 있는 가장 빠르고 간단한 방법 중 하나이다.



6. 길이가 긴 콘텐츠를 만들 때는 20pt크기로 하라.

길이가 긴 콘텐츠에서는(블로그나 프로젝트 설명 등) 본문 텍스트의 크기를 20pt로 하라. 물론 이것은 폰트의 종류에 따라 달라지지만 대부분의 본문 폰트는 20pt가 가장 좋고 사용자가 텍스트를 볼 때 가장 편하게 읽을 수 있는 경험을 제공한다.



7. 균형 잡힌 폰트 크기를 위해 Type Scale을 사용하라.


Type Scale을 사용하면 폰트 크기의 세트를 쉽고 실용적으로 만들 수 있다.

Type Scale은 scale factor(1.25배)를 기반으로 해서 만든 것이다. 기본 사이즈를 시작으로 해서 scale factor를 기본으로 하여 폰트 크기를 키우거나(H1, H2 등) 작게 하여(Caption, Button 등) 계층 구조를 만든다.

Type Scale은 고정된 비율로 크기를 늘이거나 줄인 것이기 때문에 텍스트를 조화롭게 보이게 만들어 준다.


httpsL//type-scale.com에서 쉽게 만들 수 있다.




8. 기본 색상을 정하여 tint와 shade를 일관적으로 적용하라.

기본 색상을 선택 후 제한된 색상 팔레트를 사용하라. 그리고 선택한 기본 색상으로 Tint와 Shade를 적용하면 손쉬운 방법으로 디자인을 일관성 있게 보이게 할 수 있다.



9. 엄지의 법칙을 사용하여 사용자의 온보딩 경험을 개선하라.


엄지손가락이 닿는 곳에 Skip버튼을 위치하여 사용자가 모바일 앱의 온보딩 과정을 언제라도 건너뛸 수 있도록 하라. 이러한 간단한 조작이 사용자에게 앱을 처음 사용할 때부터 훨씬 좋은 경험을 제공할 수 있다.



10. 그림자가 하나의 광원으로부터 생성되게 하라.


그림자가 하나의 광원으로부터 생성되게 하라. 그렇게 하지 않는 것은 흔히 범하는 실수이지만 디자인을 덜 세련되게 보이게 한다.





원문 출처 : https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17


작가의 이전글 큰 사이드바의 메뉴를 읽기 쉽게 하는 방법

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari