들어가며

이 글은 Adham Dannaway의 The Ultimate Guide to UI Design을 읽고 요약한 내용이다. 감이 아니라 논리로 설명할 수 있는 UI 디자인 규칙 16가지를, 부동산 앱 화면을 개선해 나가는 사례로 정리한 글이다.

원문은 아래처럼 정돈되지 않은 화면에서 출발해, 팁을 하나씩 적용하며 화면을 다듬어 간다.

디자이너가 아니어도 왜 어떤 화면이 더 읽기 편한지 언어로 설명할 수 있게 된다는 점이 좋았다. 개발자로서 컴포넌트를 만들 때 바로 적용할 수 있는 기준들이라 정리해 둔다.

레이아웃과 시각적 구조

1. 공간으로 관련 요소를 묶기

정보를 작은 그룹으로 나누면 이해하고 기억하기 쉬워진다. 관련된 요소끼리는 가깝게 배치하고, 관계없는 요소와는 간격을 벌린다. 컨테이너나 정렬로도 묶을 수 있지만, 여백만으로 그룹을 나누는 것이 가장 깔끔하다.

2. 일관성 지키기

같은 성격의 요소는 제품 전체에서 똑같이 생기고 똑같이 동작해야 한다. 일관성이 없으면 사용자는 매번 새로 학습해야 하고 혼란을 느낀다. 또한 우리 제품 안에서의 일관성뿐 아니라, 다른 서비스에서 이미 굳어진 관습과도 맞추는 것이 좋다.

3. 비슷하게 생긴 요소는 비슷하게 동작하게

생김새가 비슷하면 사용자는 기능도 비슷할 거라고 기대한다. 같은 목적의 요소는 같은 스타일로, 다른 기능은 시각적으로 확실히 다르게 만든다.

4. 명확한 시각적 위계 만들기

중요도 순으로 정보를 보여주면 사용자가 화면을 빠르게 훑을 수 있다. 크기, 색, 대비, 여백, 위치, 깊이를 조절해 위계를 만든다. 눈을 가늘게 뜨고 화면을 봤을 때(Squint Test) 가장 중요한 요소가 여전히 눈에 띄면 위계가 잘 잡힌 것이다.

5. 불필요한 스타일 제거하기

정보가 많을수록 인지 부하가 커지고 정작 중요한 것이 묻힌다. 굳이 없어도 되는 선, 색, 배경, 애니메이션을 걷어내면 화면이 단순해지고 초점이 분명해진다.

색상과 대비

6. 색은 목적을 가지고 쓰기

색은 장식이 아니라 의미를 전달하는 도구다. 먼저 흑백으로 디자인한 뒤 꼭 필요한 곳에만 색을 넣는다. 브랜드 색은 주로 링크나 버튼 같은 상호작용 요소에 쓰면 색이 곧 눌러볼 수 있다는 신호가 된다.

7. 인터페이스 요소는 대비 3:1 이상

버튼, 아이콘, 입력 필드 같은 요소는 시력이 약한 사용자에게도 보여야 한다. WCAG 2.1 AA 기준으로 최소 3:1 대비가 필요하다. 대비 체크 도구를 쓰고, 아이콘 뒤에 흰 배경을 깔면 대비를 확보하기 쉽다.

8. 텍스트는 대비 4.5:1 이상

읽어야 하는 텍스트는 인터페이스 요소보다 높은 대비가 필요하다. 작은 텍스트(18px 이하)는 최소 4.5:1, 큰 텍스트(굵은 18px 초과 또는 일반 24px 초과)는 최소 3:1 대비를 지킨다.

9. 색 하나에만 의존하지 않기

색각 이상이 있는 사용자에게 색만으로 구분한 정보는 전달되지 않는다. 색과 함께 다른 시각적 단서를 준다. 예를 들어 링크는 파란색에만 의존하지 말고 밑줄을 함께 넣는다.

타이포그래피

10. 산세리프 한 종류만 쓰기

산세리프는 가장 읽기 쉽고 중립적이며 단순하다. 여러 서체를 섞기보다 깔끔한 산세리프 하나를 골라 쓰면 통일감이 유지된다.

11. 소문자 높이(x-height)가 큰 서체 쓰기

소문자 높이가 큰 서체는 작은 크기에서도 잘 읽힌다. x-height가 크고 글자 간격이 넉넉한 서체를 고르면 UI 환경에서 가독성이 좋아진다.

12. 대문자 사용은 최소한으로

전부 대문자로 쓴 글은 읽기 어렵고 강압적으로 느껴진다. 사람은 단어의 전체 모양으로 글을 읽는데, 대문자는 글자를 하나씩 인식하게 만든다. 문장은 일반 문장부호 표기(Sentence case)를 기본으로 한다.

13. 폰트 굵기는 Regular와 Bold만

굵기 종류가 많으면 화면이 산만해진다. Regular와 Bold(또는 Semibold) 두 가지만 쓴다. 제목은 Bold, 본문은 Regular처럼 역할을 나누면 충분하다.

14. 순수한 검정 텍스트 피하기

순수한 검정(#000)은 흰 배경과 대비가 너무 강해 눈이 피로해진다. 대신 짙은 회색을 쓰면 밝기 차이가 완화돼 읽기 편해진다.

15. 텍스트는 왼쪽 정렬

영문은 왼쪽에서 오른쪽으로 읽으므로 왼쪽 정렬이 자연스러운 읽기 흐름을 돕는다. 본문에는 가운데 정렬이나 양쪽 정렬을 피한다. 가운데 정렬은 짧은 제목 정도에만 어울린다.

16. 본문 줄 높이는 1.5 이상

줄 사이 간격이 좁으면 같은 줄을 다시 읽게 되고 피로해진다. 본문은 줄 높이를 1.5(150%)에서 2 사이로 유지하는 것이 가독성과 접근성에 좋다.

정리하며

16가지 팁은 결국 세 가지로 묶인다.

• 관련된 것끼리 묶고 중요한 것을 눈에 띄게 만드는 구조
• 의미를 담아 절제해서 쓰는 색과, 누구나 볼 수 있게 하는 대비
• 하나의 서체를 단순하게 쓰고 읽기 편하게 다듬는 타이포그래피

공통점은 화면을 예쁘게 꾸미는 규칙이 아니라, 사용자가 덜 생각하고도 이해할 수 있게 만드는 규칙이라는 점이다.

참고

• Adham Dannaway, The Ultimate Guide to UI Design
• 본문의 이미지는 위 원문에서 가져왔다.