프리미엄 완성도를 높이는 7가지 UI 디테일

 

 

 

1. 여백을 줄이세요. 그리고 한 번 더 줄이세요.

 

 

대부분 저렴해보이는 인터페이지의 이유는 색이나 폰트 때문이 아닙니다.

문제는 요소 간 간격이 너무 좁거나, 뜬금없이 멀거나, 마치 반쯤 졸린 상태에서 대충 눈대중으로 배치한 것처럼 보이기 때문입니다.

프리미엄한 제품은 시각적으로 여유롭습니다.
보는 사람이 숨을 편하게 쉴 수 있어요. 반대로 간격이 엉망이면 화면이 소리치고 있는 것처럼 느껴집니다.

해결 방법은 간단합니다.
일관된 간격 규칙을 정하고 끝까지 지키세요. 예를 들어 4, 8, 12, 16처럼 예측 가능한 스케일을 사용하세요. 어떤 스케일이든 상관없습니다. 중요한 건 일관성입니다.

만약 화면 곳곳의 간격이 7, 13, 19, 22, 9px처럼 제멋대로라면 시각적 혼란을 창조한거나 다름없죠.

이 간격만 정리해도 UI는 학교 과제에서 진짜 회사 제품으로 순간 업그레이드됩니다.

 

 

 

2. 폰트 크기는 과감하게 줄이세요.

 

 

한 페이지에 아홉 개가 넘는 폰트 크기를 쓰고 있다면 그건 프리미엄하게 보일 수 없습니다. 마치 회사 모든 팀이 자기 마음대로 크기를 정한 것처럼 보이죠.

 

프리미엄 앱들은 극도로 제한된 크기만 사용합니다. 단 3~4개의 기본 크기만으로도 굵기, 간격, 계층 구조만 잘 활용하면 충분히 다양한 화면을 만들 수 있어요.

해결 방법은 간단합니다.
손가락으로 셀 수 있을 만큼만 폰트를 줄이세요.

이것만으로도 제품이 놀랄 만큼 정돈돼 보입니다.
UI가 마치 깔끔하게 머리를 다듬은 것처럼요.
갑자기 실험작 느낌에서 완성도 있는 제품이 됩니다.

 

 

3. 색상은 많이 쓰는 게 아니라, 줄이는 게 포인트입니다.

 

 

프리미엄 디자인은 깔끔하고 통제될 뿐아니라 집중되어 있습니다.
그래서 대표 색상 하나만 선택하세요.
보조로 쓸 색상은 2~3개 정도로 진행하고 나머지는 그레이스케일로 처리하는 것이 효율적입니다.

색이 화려하지 않아도 메시지는 충분히 전달됩니다.
오히려 색을 줄이면 제품은 더 고급스럽고 자신감 있어 보입니다.

 

 

 

4. 모서리 라운드를 일관되게 사용하세요.

 

 

제품의 모서리 라운드가 제각각이면 짝짝이 양말과도 같습니다.
기능적으로는 아무 문제가 없지만 구멍난 옷을 입고 나온 느낌을 받을 수 있어요.

어떤 버튼은 4px로 진행하고 라운드 입력창은 10px로 진행하며 드롭다운은 완전 동그랗게 진행한다는지 등 
이러면 인터페이스는 정체성을 잃고 혼란스러워 보입니다.
그래서 일관된 디자인을 보여주기 위해 하나의 스타일을 선택하세요.

브랜드에 맞는 스타일이면 됩니다. 그리고 전면 적용합니다.
일관된 스타일은 UI가 훨씬 의도된 디자인처럼 정리된 분위기로 확 달라집니다.

 

 

 

5. 아이콘을 하나의 세트처럼 보이게 단순화하세요.

 

 

하나는 꽉찬 아이콘, 다른 하나는 아웃라인 아이콘, 또 다른 하나는 두꺼운 선을 가진 아이콘 등 다양한 스타일의 아이콘을 너무 많이 사용하게 된다면 UI를 망치는 조합이 될 수 있습니다.

앱 전체가 어색해 보일 수 있습니다.

 

프리미엄 디자인은 통일성에 기반합니다.
같은 아이콘 세트에서 같은 스타일을 사용하세요.

아이콘만 정리해도 인터페이스 전체가 한층 깨끗하고 고급스럽게 바뀝니다.

 

 

 

 

6. 테두리는 줄이고, 대신 대비와 여백으로 구분하세요.

 

 

테두리를 많이 사용하는 것도 디자인이 퀄리티를 저렴하게 보일 수 있는 요인이 될 수 있습니다.

프리미엄 제품은 모든 요소를 박스로 구겨 넣지 않습니다.

여백, 은은한 그림자, 부드러운 대비, 얇은 디바이더 등 테두리 뿐 아니라 이런 요소들은 화면을 여유 있고 현대적으로 보이게 합니다. 반면 테두리로 꽉 막아두면 답답하고 묵직해보일 수 있습니다.

테두리를 절반만 없애보세요. 그 순간 UI가 세련되어 보여집니다.

 

 

 

7. 텍스트 정렬만 바로잡아도 완성도가 확 달라집니다.

 

 

텍스트 정렬이 엉망이라면 UI의 허술함을 그대로 드러내는 상황을 마주하게 됩니다.

 

텍스트 정렬을 먼저 잡고 모든 요소가 그 정렬을 따르도록 해야 합니다.
라벨 정렬, 컴포넌트 정렬, 아이콘 정렬, 버튼 정렬 등 뭔가 어색해 보이면 정말로 어색한 겁니다.
프리미엄 제품은 균형감이 느껴집니다. 왜 그런지 의식하지 못해도 말이에요.

그리드 시스템을 사용하세요.
왼쪽, 가운데, 오른쪽 등 어느 정렬이든 일관성이 핵심입니다. 패딩도 전체적으로 통일합니다.
이것만 지켜도 UI가 신뢰감을 줄 수 있습니다.

 

 

 

 

프리미엄 UI는 결국 디테일을 지키는 태도에서 나옵니다.
사람들은 프리미엄 디자인이란 화려한 비주얼 및 애니메이션 혹은 특별한 생삭조합에서 온다고 생각합니다.

하지만 본질은 다릅니다. 
작은 부분만 바로잡아도 모든 요소가 갑자기 멋져 보입니다. 

사용자는 집중할 수 있게 되고 UI는 더 성숙해 보이며 제품은 더 믿음직스럽게 느껴집니다.

 

 

출처:
https://medium.com/@ryan.almeida86/7-tiny-ui-fixes-that-can-make-any-product-look-premium-94a7c71c2aae