brunch

The UI&UX tips collection (2)

by 김준범

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

1*ojGp5mTLEQwTBRs3ZweGUg.jpeg

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

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

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


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





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

1*hNmN6qhDgl-i9FRq5S6Vnw.png


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




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

1*je83CPH_7IXTpW6TLX6rIA.png

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




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

1*SXjJJo5QiFre3SNTNdOunw.jpeg

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

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




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

1*AirFdyyReLFKMy1_BI7QQw.png

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




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

1*CvcX6kISDDXJwTDDV9L4vA.png

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




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


1*nAJtSetQOrvzz4GFwEcEOg.png


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




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

1*LAfXRBuxCUYfFWKSoaiYFA.png

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




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

1*yKgqY6TqRQWpARS43jm9yw.png


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

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

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

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

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




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

1*_xXE-qKP4TZFSa7ViJEHiw.png

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




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


keyword
작가의 이전글The UI&UX tips collection (1)