- UI 디자인은 예술적 감각보다 일관된 논리 규칙을 적용해 배치/간격/서체/색상 결정을 내릴 때 더 빠르고 예측 가능하게 개선할 수 있음
- 관련 요소를 여백으로 묶고, 같은 기능에는 같은 형태를 사용하며, 크기/색상/대비/위치로 명확한 시각적 위계를 만드는 것이 기본임
- 장식용 색상과 불필요한 테두리를 줄이고, 색상은 링크와 버튼처럼 상호작용 가능 여부를 전달하는 데 선택적으로 사용해야 함
- WCAG 2.1 AA 기준에 따라 UI 요소는 3:1, 작은 텍스트는 4.5:1 이상의 명암비를 확보하고, 색상 외에도 밑줄이나 형태 같은 단서를 제공해야 함
- 하나의 산세리프 서체와 regular/bold 굵기를 중심으로 구성하고, 큰 x-height/문장형 대소문자/왼쪽 정렬/1.5 이상의 줄 높이를 적용하면 가독성과 일관성이 높아짐
논리적 규칙으로 UI를 개선하는 방법
- UI 디자인은 레이아웃/간격/타이포그래피/색상뿐 아니라 사용성/접근성/심리까지 함께 고려해야 해 선택이 복잡해지기 쉬움
- 직감으로 요소를 옮기며 보기 좋은 상태를 찾는 대신, 재사용 가능한 규칙 체계를 적용하면 더 빠르게 근거 있는 결정을 내릴 수 있음
- 단기 임대 숙소 상세 화면을 예제로 삼아 복잡하고 사용하기 어려운 초기 화면을 단계별로 수정함
- 목표는 브랜드 장식을 추가하는 것이 아니라 직관성/접근성/기본적인 시각적 완성도를 우선 확보하는 것임
1. 여백으로 관련 요소 묶기
- 정보를 작은 관련 그룹으로 나누면 화면 구조를 더 빠르게 이해하고 기억할 수 있음
- 요소를 그룹화하는 방법은 네 가지임
- 같은 컨테이너 안에 배치함
- 관련 요소 사이의 간격을 좁힘
- 비슷한 모양으로 표현함
- 연속된 선을 따라 정렬함
- 컨테이너는 가장 강한 그룹화 단서지만 화면에 불필요한 장식을 늘릴 수 있음
- 여백과 정렬은 더 미묘하면서도 화면을 단순하게 유지할 수 있는 방법임
- 예제에서는 콘텐츠 사이의 간격을 늘려 서로 다른 정보 그룹을 명확하게 구분함
2. 일관된 형태와 동작 유지하기
- 비슷한 요소는 제품 내부뿐 아니라 익숙한 다른 제품과 비교해도 비슷하게 보이고 작동해야 함
- 예측 가능한 동작은 사용자가 매번 사용법을 다시 배울 필요를 줄이고 오류 가능성을 낮춤
- 예제의 아이콘은 채워진 형태와 외곽선 형태가 섞여 있어, 채워진 아이콘이 선택 상태라고 오해될 수 있었음
- 모든 아이콘을 둥근 모서리와 2pt 외곽선으로 통일해 시각적 무게를 맞춤
- 아이콘만으로 의미를 이해하기 어려운 사용자와 화면 낭독기 사용자를 위해 텍스트 레이블을 추가함
- 같은 모양의 요소는 같은 방식으로 작동할 것이라고 예상되므로, 기능이 다르면 시각적 처리도 달라야 함
- 예제에서는 비상호작용 아이콘 컨테이너가
Book now버튼처럼 보여 파란색과 버튼 스타일을 제거함
3. 명확한 시각적 위계 만들기
- 모든 정보가 같은 중요도를 갖지 않으므로 중요한 요소일수록 더 눈에 띄게 표현해야 함
- 크기/색상/명암비/간격/위치/깊이를 조절하면 사용자가 화면을 빠르게 훑고 관심 영역을 찾을 수 있음
- Squint Test는 눈을 가늘게 뜨거나 화면을 흐리게 본 뒤에도 중요한 요소와 화면의 용도가 드러나는지 확인하는 방법임
- 초기 화면에서는 여러 요소가 비슷한 강도로 경쟁하고 있었지만 왼쪽 아래의 주요 행동 버튼은 거의 눈에 띄지 않았음
- 주요 버튼에 대비가 높은 배경색과 굵은 글꼴을 적용해 화면에서 가장 두드러지는 요소로 변경함
- 본문 설명은 중요도에 비해 지나치게 강조되어 있어 이후 색상과 타이포그래피를 조정해 위계를 낮춤
4. 불필요한 장식 제거하기
- 의미를 전달하거나 요소를 그룹화하지 않는 선/색상/배경/애니메이션은 주의를 분산시키고 인지 부하를 높일 수 있음
- 예제 이미지 주변의 흰색 여백과 테두리는 정보 전달에 필요하지 않아 제거함
- 장식 요소를 줄이면 화면이 단순해지고 핵심 정보와 행동에 집중하기 쉬워짐
5. 색상에 명확한 역할 부여하기
- 색상은 장식보다 의미 전달을 위해 제한적으로 사용하는 것이 안전함
- 흑백 상태에서 시작한 뒤 필요한 곳에만 색상을 추가하는 접근이 효과적임
- 브랜드 색상을 텍스트 링크와 버튼 같은 상호작용 요소에 적용하면 무엇을 클릭할 수 있는지 학습시키기 쉬움
- 카드처럼 형태 자체가 상호작용 가능성을 보여주는 요소에는 반드시 색상을 추가할 필요가 없음
- 예제의 파란색 제목과 별점은 비상호작용 요소인데도 클릭할 수 있는 것처럼 보여 색상을 제거함
- 그 결과 상호작용 요소와 일반 정보의 구분이 더 명확해짐
6. UI 요소에 3:1 이상의 명암비 적용하기
- 명암비는 두 색상의 지각되는 밝기 차이를
1:1부터21:1까지의 비율로 표현함 - WCAG 2.1 AA 기준에서 폼 필드/아이콘/버튼 같은 UI 요소는 최소 3:1의 명암비가 필요함
- 예제의 사진 위 화살표는 배경 이미지에 따라 잘 보이지 않을 수 있었음
- 회색 아이콘과 불투명한 흰색 배경을 적용해 사진과 무관하게 명암비를 확보함
- 배경 컨테이너를 추가하면서 누를 수 있는 영역도 더 크고 명확해짐
- 초기 주요 버튼도 배경과의 대비가 부족해 저시력 사용자가 버튼 형태를 구분하기 어려웠음
- 버튼의 명암비를 3:1 이상으로 높여 접근성과 시각적 위계를 함께 개선함
- 명암비는 WebAIM Contrast Checker나 Contrast Figma plugin으로 측정할 수 있음
7. 텍스트에 충분한 명암비 적용하기
- WCAG 2.1 AA 기준은 텍스트 크기와 굵기에 따라 다른 명암비를 요구함
- 18px 이하의 작은 텍스트는 최소 4.5:1이 필요함
- 18px 초과의 굵은 텍스트 또는 24px 초과의 regular 텍스트는 최소 3:1이 필요함
- 사진 개수 표시는 배경과의 대비가 부족해 회색 컨테이너의 불투명도를 높이고 텍스트 그림자를 추가함
- 위치 텍스트는 색상이 너무 밝고 글꼴도 가늘어 더 진한 회색으로 변경함
- 명암비 기준을 충족하더라도 지나치게 가는 글꼴은 읽기 어려울 수 있어 굵기 역시 별도로 조정해야 함
8. 색상만으로 상태를 구분하지 않기
- 색각 이상 사용자는 특정 색상 조합을 구분하기 어렵거나 색상 자체를 인식하지 못할 수 있음
- 의미/상태/상호작용 가능 여부를 색상만으로 전달해서는 안 됨
- 예제의
Reviews링크는 파란색을 제거하면 일반 텍스트와 구분되지 않았음 - 밑줄을 추가해 색상이 보이지 않아도 링크라는 사실을 식별할 수 있도록 변경함
9. 하나의 산세리프 서체 사용하기
- 서체(typeface)는 Helvetica 같은 공통 스타일의 글꼴 집합이며, bold/regular 같은 크기와 굵기 변형이 개별 폰트에 해당함
- 인터페이스에서는 일반적으로 읽기 쉽고 중립적이며 단순한 산세리프 서체 하나를 사용하는 것이 안전함
- 예제 제목의 장식적인 세리프 서체는 읽기 어렵고 숙소 사진이나 서비스 분위기와 어울리지 않을 수 있었음
- 본문과 같은 산세리프 서체로 통일해 사용성과 시각적 일관성을 높임
10. 소문자 높이가 큰 서체 선택하기
- 소문자의 높이를 나타내는 x-height가 크고 글자 사이 간격이 충분한 서체는 작은 크기에서도 읽기 쉬운 편임
- 예제의 League Spartan은 x-height가 비교적 낮았음
- x-height가 더 큰 Inter로 변경해 작은 본문 텍스트의 가독성을 높임
11. 대문자 사용 제한하기
- 사람은 개별 글자보다 단어 전체의 형태를 인식해 빠르게 읽는 경향이 있음
- 대문자로만 작성된 단어는 모두 비슷한 직사각형 형태가 되어 글자를 하나씩 확인해야 하므로 읽기 어려워짐
- 위치 정보를 전체 대문자에서 sentence case로 변경해 첫 단어와 고유명사만 대문자로 표시함
- 전체 대문자는 강조가 반드시 필요한 짧은 표현 외에는 제한적으로 사용해야 함
12. regular와 bold 굵기만 사용하기
- 한 서체가 여러 굵기를 제공하더라도 모두 사용하면 화면에 시각적 소음이 늘고 일관되게 관리하기 어려워짐
- 디자인 시스템은 regular와 bold를 중심으로 단순하게 유지하는 것이 좋음
- 제목과 강조 텍스트에는 bold를 사용함
- 작은 일반 텍스트에는 regular를 사용함
- bold가 지나치게 무거우면 semi-bold로 대체할 수 있음
- 매우 가늘거나 두꺼운 굵기는 작은 텍스트가 아니라 큰 제목에만 제한적으로 사용함
- 예제의 위치 텍스트는 light 굵기여서 명암비를 높인 뒤에도 읽기 어려울 수 있었음
- regular로 변경해 가독성을 높이고 사용되는 굵기의 종류를 줄임
13. 순수한 검은색 텍스트 피하기
- 순수한 검은색은 흰색 배경과 매우 높은 대비를 만들어 장시간 읽을 때 눈의 피로를 높일 수 있음
- 흰색 배경에서는 순수한 검은색 대신 짙은 회색을 사용하는 것이 안전함
- 예제의 여러 검은색 요소를 짙은 회색으로 변경해 가독성을 조정함
- 중요도에 비해 지나치게 눈에 띄던 숙소 설명문에는 더 밝은 회색을 적용해 시각적 위계를 낮춤
14. 긴 텍스트는 왼쪽 정렬하기
- 영어는 왼쪽에서 오른쪽으로 읽으며 화면을 F자 형태로 훑는 경향이 있어 왼쪽 정렬이 가장 안정적임
- 제목이나 짧은 문장은 가운데 정렬해도 빠르게 읽을 수 있음
- 긴 본문을 가운데 정렬하면 줄마다 시작 위치가 달라져 다음 줄을 찾기 어려워짐
- 양쪽 정렬과 가운데 정렬은 특히 인지 장애가 있는 사용자에게 긴 글을 읽기 어렵게 만들 수 있음
- 예제의 숙소 설명문을 가운데 정렬에서 왼쪽 정렬로 변경해 위쪽 텍스트와의 일관성도 확보함
15. 본문 줄 높이를 1.5 이상으로 설정하기
- 줄 높이는 두 텍스트 줄 사이의 수직 거리임
- 적절한 줄 간격은 같은 줄을 다시 읽는 일을 줄이고 긴 텍스트를 더 편안하게 읽도록 도움
- 본문 텍스트의 줄 높이는 최소 1.5(150%) 가 필요하며, 일반적으로 1.5~2 범위가 적절함
- 예제에서는 줄 높이를 1(100%)에서 1.5(150%)로 늘려 가독성을 높임
수정 결과와 적용 원칙
- 16가지 규칙을 순차적으로 적용하면서 복잡했던 화면을 더 단순하고 읽기 쉬우며 접근 가능한 형태로 변경함
- 브랜드 성격에 맞는 장식은 이후 추가할 수 있지만, 먼저 정보 구조/상호작용 구분/명암비/타이포그래피 같은 기본을 바로잡아야 함
- 주관적 취향보다 객관적인 규칙을 사용하면 직관적이고 접근 가능한 UI를 더 빠르게 설계할 수 있음
- 반복 적용한 규칙은 점차 디자인 작업 흐름의 자연스러운 기반이 되며, 그 위에서 새로운 표현 방식과 장식을 실험할 수 있음