brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Dec 01. 2020

The UI&UX tips collection (2)

11. 뛰어난 폰트 조합을 빠르게 찾고 싶다면 슈퍼 패밀리(Superfamilies)를 사용하라.

폰트를 조합하는 스킬을 높이고 싶은데 수많은 폰트들 사이에서 막막함을 느끼고 있다면 슈퍼 패밀리를 사용하라.

슈퍼 패밀리는 조합했을 때 시각적으로 잘 어울리는 세리프와 산세리프체를 모두 가지고 있는 폰트 모음이다.

가장 추천하는 폰트는 구글 폰트에서 찾을 수 있는 Merriweather & Merriweather Sans와 Roboto & Roboto Slab폰트이다.


못생긴 폰트 조합을 피하면서 폰트를 효과적으로 조합하고 시다면 슈퍼 패밀리 폰트를 고르면 된다.





12. 미묘한 오버레이를 이용하여 텍스트와 이미지의 대비를 개선하라.


텍스트가 이미지의 어느 부분에 위치하느냐에 따라 텍스트와 이미지에 대비를 주기 위해 전체 이미지에 오버레이를 줘야 할 수도 있고 미묘한 그러데이션 오버버레이를 적용해야 할 수도 있다. 텍스트와 이미지 사이의 적절한 대비를 만드는 것은 그리 어려운 일이 아니다.




13. 중앙 정렬된 텍스트는 적당히 사용하라. 과도하게 적용하면 사용성을 떨어뜨린다.

가능하면 제목과 짧은 길이의 본문에만 중앙 정렬을 적용하라. 그 외의 경우에는 좌측 정렬된 텍스트를 적용하라.




14. 폰트를 다양한 용도로 적용한다면, 여러 가지 두께를 가지고 있는 폰트를 선택해라.

찾고 있는 폰트가 여러 가지 두께나 스타일을 가지고 있는가? 한 가지 두께나 스타일을 가지고 있는 폰트는 피하라.

물론 어떤 프로젝트는 정교하게 만들어진 한 가지 스타일만 가진 폰트가 필요할 수도 있다. 그러나 대부분의 프로젝트에서는 선택의 여지가 많은 폰트가 필요할 것이다.




15. 밝은 배경에는 어두운 색상의 텍스트를 사용하라.

밝은 배경에서는 텍스트를 너무 밝게 적용하지 말아라. 멋져 보일 수는 있지만, 접근성이 좋은 디자인을 위해서는 그렇게 하지 말아야 한다.




16. 텍스트가 다소 무거워 보인다면 텍스트의 색상을 밝게 적용하라.

길이가 긴 본문에서 Regular 두께의 폰트는 다소 무거워 보일 수 있다. 어두운 회색(#4f4f4f 같은)을 적용하여 텍스트의 톤을 낮추면 보기에 좀 더 편하게 만들 수 있다.




17. 'Call to Action'버튼은 화면에서 가장 잘 보이게 하라.



'Call to Action'버튼은 색상 대비, 크기, 레이블을 이용하여 가능한 한 가장 눈에 띄게 만들어라. 아이콘만으로 만들지 말아라. 텍스트 레이블을 적용하면 훨씬 더 이해하기 쉽게 만들 수 있다.




18. 폰트 크기가 작을수록 행간은 더 충분하게 넓어져야 한다.

폰트의 크기가 작아질수록, 가독성을 위해 행간을 더 늘여라. 폰트 크기를 크게 할 때도 마찬가지이다. 폰트 크기가 커지면 행간을 줄여야 한다.




19. x-height나 Il1 테스트를 통해 선택한 폰트의 가독성을 테스트하라.


기본적으로, x-height는  소문자 'x'의 높이를 말한다. 서체의 x-height가 높으면 특히 긴 길이의 본문에 적용되었을 때 가독성이 훨씬 좋다.

몇 개의 서체 사이에서 서체를 선택할 수 없다면 Il1테스트를 통해 서체의 가독성을 테스트해 보아라.

대문자 i(I)와 소문자 L(l), 그리고 숫자 1의 형태를 비교하는 것이다.

특히 산세리프 서체에서 세 가지 글자의 형태가 서로 얼마나 다르냐에 따라 가독성이 정해진다.

본문 서체를 고를 때는 x-height나 Il1테스트를 통해 가독성이 좋은 서체를 선택하라.




20. 메뉴에서 가장 많이 사용되는 액션은 돋보이게 표현하라.

애플리케이션에서 메뉴를 디자인할 때에는, 가장 많이 사용되는 액션을 화면에서 가장 잘 보이게 하라.




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


작가의 이전글 The UI&UX tips collection (1)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari