이 글은 단기 숙소 대여 앱의 부동산 상세 페이지를 예로 들어, 논리적인 UI 디자인 원칙만으로 복잡하고 사용하기 어려운 화면을 개선하는 과정을 설명합니다. 핵심은 감각이나 직관에만 의존하지 않고, 일관성·시각적 위계·접근성·가독성을 기준으로 디자인을 판단하는 것입니다. 공간 배치부터 색상, 대비, 글꼴, 정렬, 줄 간격까지 16가지 원칙을 순서대로 적용해 최종적으로 더 직관적이고 접근성 높은 UI를 완성합니다.
1. UI 디자인은 감각보다 논리적인 기준이 중요하다
UI 디자인은 레이아웃, 간격, 글꼴, 색상처럼 선택해야 할 요소가 많고, 여기에 사용성·접근성·심리학까지 고려해야 하기 때문에 어렵게 느껴질 수 있습니다.
하지만 글쓴이는 20년 넘게 프로덕트 디자이너로 일하면서, 좋은 UI 디자인의 많은 결정이 특별한 예술적 감각이나 마법 같은 직관이 아니라 간단하고 논리적인 가이드라인에 의해 이루어진다는 점을 깨달았다고 말합니다.
"예술적 재능이 도움이 되기는 하지만, 직관적이고 접근성이 높으며 아름다운 인터페이스를 만드는 방법은 대부분 배울 수 있습니다."
이런 기준이 없으면 화면 요소를 그저 이리저리 움직이며 "예뻐 보일 때까지" 수정하게 됩니다. 반대로 논리적인 디자인 시스템이 있으면 왜 특정 요소의 위치·색상·크기·스타일을 바꿔야 하는지 설명할 수 있고, 더 빠르게 합리적인 결정을 내릴 수 있습니다.
글에서는 직접 해보는 것이 가장 빠른 학습 방법이라고 강조하며, 자신의 UI 디자인 책과 Figma 디자인 시스템을 바탕으로 만든 예시 화면을 사용해 문제를 하나씩 고쳐 나갑니다.
2. 예시 화면의 문제와 개선 방향
예시로 사용된 화면은 단기 숙소 대여 앱의 숙소 상세 페이지입니다. 처음 화면은 정보와 스타일이 한꺼번에 섞여 있어 복잡하고 정돈되지 않은 인상을 줍니다. 사용자는 무엇을 먼저 봐야 하는지, 어떤 요소를 눌러야 하는지 빠르게 파악하기 어렵습니다.
"원래 디자인은 지저분하고 복잡하며 사용하기 어려워 보입니다."
글에서는 이 문제를 한 번에 모두 수정하지 않고, 다음 16가지 원칙을 차례로 적용합니다.
- 관련된 요소를 공간으로 묶기
- 일관성 유지하기
- 비슷하게 보이는 요소는 비슷하게 작동하게 만들기
- 명확한 시각적 위계 만들기
- 불필요한 스타일 제거하기
- 색상을 목적에 맞게 사용하기
- 인터페이스 요소의 대비율을 3:1 이상으로 유지하기
- 텍스트의 대비율을 4.5:1 이상으로 유지하기
- 색상만으로 의미를 전달하지 않기
- 하나의 산세리프 서체 사용하기
- 소문자 높이가 큰 서체 사용하기
- 대문자 사용 제한하기
- 보통 굵기와 굵은 굵기만 사용하기
- 순수한 검은색 텍스트 피하기
- 텍스트 왼쪽 정렬하기
- 본문 줄 간격을 최소 1.5로 설정하기
3. 공간과 일관성으로 정보 구조 정리하기
3-1. 관련된 요소를 공간으로 묶기
정보를 작은 단위의 관련 그룹으로 나누면 사용자가 화면의 구조를 더 빠르게 이해하고 내용을 기억하기 쉬워집니다.
관련 요소를 묶는 방법은 다음과 같습니다.
- 같은 컨테이너 안에 배치하기
- 관련 요소끼리 가깝게 배치하기
- 관련 요소를 비슷하게 보이도록 만들기
- 관련 요소를 하나의 연속된 선에 맞춰 정렬하기
컨테이너는 요소 사이의 관계를 가장 강하게 보여주는 방법이지만, 지나치게 사용하면 화면이 복잡해질 수 있습니다. 따라서 테두리나 박스를 무조건 추가하기보다는 적절한 여백을 활용하는 것이 더 간결한 해결책이 될 수 있습니다.
예시 화면은 콘텐츠 사이의 간격이 부족해 모든 정보가 서로 붙어 보였습니다. 요소 사이에 충분한 여백을 추가하자 관련된 내용끼리 자연스럽게 묶이고, 전체 화면도 훨씬 정돈되었습니다.
3-2. 일관성 유지하기
UI에서 일관성이란 비슷한 요소가 비슷하게 보이고, 비슷한 방식으로 작동하는 것을 의미합니다. 이는 같은 제품 안에서뿐만 아니라 사용자가 이미 익숙한 다른 서비스와 비교했을 때도 어느 정도 유지되어야 합니다.
일관된 디자인은 사용자가 매번 새로운 작동 방식을 배울 필요를 줄여 주고, 예측 가능성을 높여 사용성 향상과 오류 감소에 도움을 줍니다.
예시 화면에서는 어떤 아이콘은 채워져 있고, 어떤 아이콘은 윤곽선으로 되어 있어 스타일이 서로 달랐습니다. 채워진 아이콘은 선택된 상태를 의미하는 것처럼 보일 수 있기 때문에 사용자에게 혼란을 줄 수 있습니다. 이를 해결하기 위해 모든 아이콘을 2pt 굵기의 둥근 윤곽선으로 통일했습니다.
또한 아이콘에 텍스트 라벨을 추가했습니다. 라벨은 아이콘의 의미를 더 쉽게 이해하게 해 줄 뿐 아니라, 화면을 보지 못하는 사용자가 스크린 리더를 사용할 때도 도움이 됩니다.
3-3. 비슷하게 보이는 요소는 비슷하게 작동하게 만들기
요소의 외형이 비슷하면 사용자는 그 요소들이 비슷한 방식으로 작동할 것이라고 기대합니다. 따라서 같은 기능을 가진 요소에는 일관된 시각적 표현을 사용하고, 서로 다른 기능을 가진 요소는 다르게 보여야 합니다.
원래 화면에서는 아이콘을 담은 컨테이너가 파란색 버튼인 "예약하기" 버튼과 비슷하게 보였습니다. 실제로는 아이콘 컨테이너를 누를 수 없는데도 버튼처럼 보이면서 상호작용이 가능한 요소로 오해될 수 있었습니다.
아이콘에서 파란색과 버튼 형태의 스타일을 제거하자, 사용자가 실제로 누를 수 있는 요소와 단순히 정보를 보여주는 요소를 더 쉽게 구분할 수 있게 되었습니다.
4. 시각적 위계와 불필요한 장식 정리하기
4-1. 명확한 시각적 위계 만들기
인터페이스 안의 모든 정보가 똑같이 중요한 것은 아닙니다. 중요한 요소는 더 크고 뚜렷하게, 덜 중요한 요소는 상대적으로 약하게 표현해 사용자가 정보의 우선순위를 빠르게 파악하도록 해야 합니다.
이러한 시각적 위계는 다음과 같은 차이를 통해 만들 수 있습니다.
- 크기
- 색상
- 대비
- 여백
- 위치
- 깊이감 또는 그림자
시각적 위계가 명확하면 사용자가 화면을 훑어보는 것만으로도 중요한 내용을 찾을 수 있고, 화면 전체도 더 질서 있고 아름답게 보입니다.
글에서는 시각적 위계를 확인하는 간단한 방법으로 곁눈질 테스트, 즉 Squint Test를 소개합니다. 눈을 가늘게 뜨고 화면을 보거나, 화면에서 멀리 떨어지거나, 디자인을 흐리게 처리했을 때도 가장 중요한 요소가 무엇인지 보여야 합니다.
원래 예시 화면에는 여러 요소가 비슷한 정도로 강하게 보여 서로 주목을 끌고 있었습니다. 반면 화면 왼쪽 아래의 핵심 행동인 예약 버튼은 눈에 잘 띄지 않았습니다.
이를 해결하기 위해 예약 버튼에 대비가 높은 배경색과 굵은 글꼴을 적용했습니다. 그 결과 주요 행동이 화면에서 가장 눈에 띄는 요소가 되었고, 버튼의 낮은 색상 대비 문제도 함께 해결되었습니다.
"주요 행동 요소는 일반적으로 인터페이스에서 가장 눈에 띄는 요소여야 합니다."
수정된 화면에 다시 곁눈질 테스트를 적용하자 예약 버튼이 분명하게 가장 두드러졌습니다. 다만 본문 텍스트가 중요도에 비해 아직 너무 강하게 보였기 때문에, 이후 타이포그래피 조정을 통해 추가로 개선합니다.
4-2. 불필요한 스타일 제거하기
필요하지 않은 선, 색상, 배경, 애니메이션, 장식은 사용자의 시선을 분산시키고 인지 부하를 높입니다. 인지 부하는 사용자가 인터페이스를 이용하기 위해 들여야 하는 정신적 노력의 양을 뜻합니다.
예시 화면에서는 이미지 주변의 과도한 여백과 테두리가 정보를 전달하거나 요소를 그룹화하는 데 필요하지 않았습니다. 이 장식들을 제거하자 화면이 단순해지고 이미지와 핵심 콘텐츠에 더 집중할 수 있게 되었습니다.
5. 색상과 대비로 의미와 접근성 강화하기
5-1. 색상을 목적에 맞게 사용하기
색상은 장식적으로 무작정 많이 사용하기보다 의미를 전달할 때만 제한적으로 사용하는 것이 좋습니다. 처음에는 흑백으로 화면을 구성한 뒤, 색상이 실제로 정보를 전달하는 부분에만 적용하는 방식이 효과적입니다.
특히 브랜드 색상은 링크나 버튼처럼 상호작용 가능한 요소에 사용하는 것이 좋습니다. 그러면 사용자는 제품을 사용하면서 어떤 요소를 누를 수 있고 어떤 요소가 단순한 텍스트인지 자연스럽게 학습할 수 있습니다.
반대로 상호작용하지 않는 요소에 브랜드 색상을 사용하면 사용자가 클릭 가능한 요소로 오해할 수 있습니다. 예시 화면에서는 파란색 제목이 보기에는 매력적이지만, 링크처럼 보이는 문제가 있었습니다. 또한 별점에도 파란색이 사용되어 상호작용 요소와 비상호작용 요소를 구분하기 어려웠습니다.
파란색을 제목과 별점에서 제거하자 색상이 실제 상호작용 요소를 강조하는 데 집중되었습니다.
5-2. 인터페이스 요소의 대비율을 3:1 이상으로 유지하기
색상 대비는 두 색상이 밝기 측면에서 얼마나 다르게 보이는지를 나타내는 값입니다. 대비율은 1:1부터 21:1까지 표현되며, 검은색 배경 위의 검은색은 1:1, 흰색 배경 위의 검은색은 21:1입니다.
WCAG 2.1 AA 기준에 따르면 아이콘, 버튼, 입력 필드 같은 UI 요소는 최소 3:1의 대비율을 확보해야 합니다. 이를 확인할 때는 WebAIM 대비 검사 도구나 Figma 플러그인 등을 사용할 수 있습니다.
원래 화면에서는 사진 위에 놓인 화살표 아이콘의 대비가 낮아 잘 보이지 않았습니다. 아이콘 색상을 회색으로 바꾸고 흰색 배경을 추가하자 사진 배경이 무엇이든 충분한 대비가 확보되었습니다. 동시에 아이콘이 들어가는 터치 영역도 커져 모바일에서 누르기 쉬워졌습니다.
주요 버튼 역시 원래는 대비가 충분하지 않았습니다. 앞서 시각적 위계를 개선하는 과정에서 대비를 높였지만, 이는 접근성 측면에서도 중요한 수정이었습니다.
대비가 낮으면 시력이 낮은 사용자가 버튼의 형태를 알아보지 못해 버튼 자체를 인식하지 못할 수 있습니다. 대비율을 3:1 이상으로 높이면 버튼의 접근성과 시각적 우선순위를 동시에 개선할 수 있습니다.
5-3. 텍스트의 대비율을 4.5:1 이상으로 유지하기
텍스트는 UI 요소보다 더 높은 대비가 필요합니다. WCAG 2.1 AA 기준은 다음과 같습니다.
- 작은 텍스트: 최소 4.5:1
- 큰 텍스트: 최소 3:1
- 굵은 글꼴 기준 18px 초과
- 일반 글꼴 기준 24px 초과
예시 화면의 사진 개수 표시 텍스트는 대비가 부족했습니다. 회색 컨테이너의 불투명도를 높이고 텍스트 그림자를 추가해 4.5:1 이상의 대비를 확보했습니다.
위치 텍스트 역시 대비가 낮았고, 글꼴 굵기가 너무 얇아 읽기 더 어려웠습니다. 더 짙은 회색을 사용해 대비를 높인 뒤, 이후 글꼴 굵기도 조정했습니다.
5-4. 색상만으로 의미를 전달하지 않기
색맹에는 여러 유형이 있으며, 특히 빨간색과 초록색을 구분하기 어려운 경우가 흔합니다. 일부 사용자는 색상을 거의 인식하지 못할 수도 있으므로, 색상만으로 링크·오류·선택 상태 같은 의미를 전달해서는 안 됩니다.
원래 화면에서는 "리뷰" 텍스트를 파란색으로 표시해 링크임을 나타냈습니다. 그러나 색상을 제거하면 일반 텍스트와 구분되지 않았습니다. 여기에 밑줄을 추가하면 색상을 볼 수 없는 사용자도 링크임을 알아볼 수 있습니다.
6. 읽기 쉬운 글꼴 체계 만들기
6-1. 하나의 산세리프 서체 사용하기
서체는 비슷한 스타일을 공유하는 글꼴들의 묶음이며, 글꼴은 그 서체 안에서 굵기나 크기 등이 달라진 변형을 뜻합니다. 예를 들어 Helvetica라는 서체 안에 Helvetica Regular와 Helvetica Bold 같은 글꼴이 포함됩니다.
UI 디자인에서는 일반적으로 하나의 산세리프 서체를 사용하는 것이 안전합니다. 산세리프 서체는 대체로 단순하고 중립적이며 작은 크기에서도 읽기 쉽기 때문입니다.
예시 화면의 제목은 장식적인 세리프 서체를 사용하고 있었습니다. 이 서체는 읽기 어려울 수 있고, 숙소 사진마다 다른 분위기와 어울리지 않을 가능성도 있었습니다. 본문에 사용된 것과 같은 단순한 산세리프 서체로 바꾸자 사용성과 시각적 통일성이 좋아졌습니다.
6-2. 소문자 높이가 큰 서체 사용하기
작은 크기의 텍스트를 잘 읽게 하려면 소문자 높이가 크고 글자 사이 간격이 적절한 서체를 선택하는 것이 좋습니다. 서체에서 소문자의 높이를 x-height라고 합니다.
x-height가 큰 서체는 같은 글자 크기에서도 소문자가 더 크게 보여 가독성이 높습니다. 예시 화면에서는 x-height가 비교적 낮은 League Spartan을 사용하고 있었지만, 이를 x-height가 더 큰 Inter로 변경했습니다.
6-3. 대문자 사용 제한하기
대문자를 지나치게 사용하면 텍스트가 크고 강하게 느껴지며 읽기 어려워집니다.
"대문자는 소리 지르는 것처럼 보이고 읽기도 어렵습니다."
사람은 글을 읽을 때 각각의 글자를 하나씩 읽기보다 단어 전체의 형태를 인식하는 경향이 있습니다. 하지만 대문자로만 작성된 단어는 대부분 비슷한 직사각형 형태로 보이기 때문에, 단어의 모양을 빠르게 파악하기 어렵고 글자를 하나씩 읽게 됩니다.
예시 화면의 위치 텍스트는 모두 대문자로 표시되어 있었습니다. 이를 첫 단어와 고유명사만 대문자로 쓰는 문장형 표기(sentence case)로 바꾸자 훨씬 자연스럽고 읽기 쉬워졌습니다.
6-4. 일반 굵기와 굵은 굵기만 사용하기
하나의 서체에 여러 굵기가 제공된다고 해서 모두 사용할 필요는 없습니다. 너무 많은 굵기를 사용하면 화면이 복잡해지고, 각 굵기를 일관되게 적용하기도 어려워집니다.
간결한 디자인 시스템을 만들려면 기본적으로 Regular와 Bold 두 가지 굵기만 사용하는 것이 좋습니다. Bold가 지나치게 무겁다면 Semi-bold를 대신 사용할 수 있습니다.
- 제목과 강조가 필요한 부분에는 굵은 글꼴 사용
- 작은 본문과 보조 텍스트에는 일반 굵기 사용
- 지나치게 얇거나 두꺼운 굵기는 큰 제목에 한정해 사용
예시의 위치 텍스트는 Light 굵기여서 대비를 높인 뒤에도 읽기 어려울 수 있었습니다. 이를 Regular 굵기로 바꾸자 가독성이 좋아지고 글꼴 체계도 단순해졌습니다.
7. 색상, 정렬, 줄 간격으로 본문 가독성 높이기
7-1. 순수한 검은색 텍스트 피하기
흰색 배경 위의 순수한 검은색은 대비가 매우 높아 눈의 피로를 유발할 수 있습니다. 검은색은 밝기가 0%, 흰색은 100%이므로 두 색상의 차이가 너무 크기 때문입니다.
따라서 본문에는 순수한 검은색보다 짙은 회색을 사용하는 것이 일반적으로 더 편안합니다. 예시 화면에서도 여러 요소에 사용된 순수한 검은색을 어두운 회색으로 바꾸었습니다.
또한 모든 텍스트를 같은 강도로 표시하지 않고 중요도에 따라 회색의 밝기를 다르게 적용했습니다. 숙소 설명처럼 상대적으로 중요도가 낮은 본문은 더 밝은 회색으로 표현해 주요 정보가 묻히지 않도록 했습니다.
7-2. 텍스트 왼쪽 정렬하기
영어처럼 왼쪽에서 오른쪽으로 읽는 언어는 보통 왼쪽 정렬이 가장 읽기 쉽습니다. 사람은 화면을 대체로 F자 형태로 훑어보기 때문에, 긴 본문은 왼쪽 정렬을 사용하는 것이 안전합니다.
가운데 정렬은 짧은 제목이나 짧은 문장에는 사용할 수 있지만, 긴 본문에서는 각 줄의 시작점이 계속 달라집니다. 그러면 사용자가 다음 줄의 시작 위치를 찾기 위해 눈을 더 많이 움직여야 하고, 특히 인지 장애가 있는 사용자에게 더 큰 부담이 될 수 있습니다.
예시 화면의 숙소 설명은 가운데 정렬되어 있었습니다. 이를 왼쪽 정렬로 변경하자 읽기 쉬워졌고, 위쪽에 있는 다른 텍스트와도 정렬이 일치했습니다.
7-3. 본문 줄 간격을 최소 1.5로 설정하기
줄 간격은 텍스트의 각 줄 사이에 있는 세로 간격입니다. 줄 사이에 충분한 공간이 있으면 사용자가 같은 줄을 다시 읽는 실수를 줄일 수 있고, 긴 본문도 더 편안하게 읽을 수 있습니다.
접근성과 가독성을 위해 긴 본문은 최소 1.5, 즉 150%의 줄 간격을 사용하는 것이 좋습니다. 일반적으로 1.5에서 2 사이의 값이 적절합니다.
예시 화면의 본문 줄 간격은 1, 즉 100%로 너무 좁았습니다. 이를 1.5로 늘리자 줄들이 서로 분리되어 읽기 편해졌고, 시각적으로도 더 안정적인 인상을 주었습니다.
8. 16가지 원칙을 적용한 최종 결과
공간 배치, 아이콘 일관성, 상호작용 요소의 표현, 시각적 위계, 장식 제거, 색상 사용, 대비율, 타이포그래피를 차례로 수정하면서 처음의 복잡한 화면이 훨씬 명확하고 사용하기 쉬운 화면으로 바뀌었습니다.
이번 예시에서는 브랜드 분위기에 맞는 장식 스타일을 추가로 조정할 수도 있지만, 우선순위는 기본적인 사용성과 접근성을 바로잡는 것이었습니다.
"UI 디자인은 마법 같은 예술 형식일 수 있지만, 실제로는 우리가 방금 배운 것과 같은 논리적인 가이드라인으로 이루어진 부분이 많습니다."
글쓴이는 주관적인 취향보다 객관적인 논리를 기준으로 디자인하면 직관적이고 접근성이 높으며 아름다운 인터페이스를 더 빠르고 쉽게 만들 수 있다고 설명합니다. 처음에는 각각의 원칙을 의식적으로 적용해야 하지만, 반복해서 사용하다 보면 자연스럽게 디자인 작업 과정의 일부가 됩니다.
결론
이 글의 핵심은 UI 디자인을 막연한 감각의 영역으로만 보지 말고, 검증 가능한 원칙과 기준을 활용하라는 것입니다. 충분한 여백으로 정보를 묶고, 요소의 스타일과 기능을 일치시키며, 중요한 행동을 시각적으로 강조하고, 색상 대비와 글꼴을 접근성에 맞게 조정하면 작은 수정만으로도 큰 개선을 만들 수 있습니다.
결국 좋은 UI는 화려한 장식보다 명확한 구조, 예측 가능한 상호작용, 편안한 가독성, 다양한 사용자를 배려하는 접근성에서 출발합니다.