--- type: knowledge domain: design status: active last-reviewed: 2026-07-24 source-method: web-article source: Adham Dannaway — Small UI design tips (adhamdannaway.com) --- # 큰 효과를 만드는 작은 UI 디자인 팁 > 한 줄 정의 > UI 디자인은 예술적 감각이 아니라 **재사용 가능한 논리 규칙**으로 배치·간격·서체·색상을 결정할 때 더 빠르고 예측 가능하게 좋아진다. 규칙은 직감으로 요소를 옮기며 "보기 좋은 상태"를 찾는 시행착오를 줄이고, 각 결정에 근거를 부여한다. > [!IMPORTANT] 결론 > 브랜드 장식은 **나중에** 얹는다. 먼저 정보 구조·상호작용 구분·명암비·타이포그래피 같은 기본을 규칙으로 바로잡는다. 주관적 취향보다 객관적 규칙이 직관적이고 접근 가능한 UI를 더 빨리 만든다. 반복 적용한 규칙은 점차 작업 흐름의 자연스러운 기반이 되고, 그 위에서 표현과 장식을 실험할 수 있다. > [!NOTE] 원문 맥락 > 단기 임대 숙소 상세 화면 하나를 예제로, 복잡하고 쓰기 어려운 초기 화면을 16개 규칙을 순차 적용하며 단계별로 개선한 과정에서 도출된 팁이다. 목표는 브랜드 꾸미기가 아니라 직관성·접근성·기본 완성도 확보다. ## 15가지 규칙 한눈에 | # | 규칙 | 영역 | 핵심 | |---|------|------|------| | 1 | 여백으로 관련 요소 묶기 | 레이아웃 | 근접·정렬로 그룹화, 컨테이너 남용 금지 | | 2 | 일관된 형태와 동작 | 일관성 | 같은 기능=같은 형태, 다른 기능=다른 처리 | | 3 | 명확한 시각적 위계 | 위계 | 중요할수록 눈에 띄게, Squint Test | | 4 | 불필요한 장식 제거 | 단순화 | 의미·그룹화 없는 선/색/배경 제거 | | 5 | 색상에 역할 부여 | 색상 | 흑백에서 시작, 상호작용에만 색 | | 6 | UI 요소 명암비 3:1↑ | 접근성 | 폼·아이콘·버튼 최소 3:1 | | 7 | 텍스트 명암비 충분히 | 접근성 | 작은 텍스트 4.5:1, 큰/굵은 텍스트 3:1 | | 8 | 색상만으로 구분 금지 | 접근성 | 밑줄·형태 등 색 외 단서 병행 | | 9 | 산세리프 하나 사용 | 타이포 | 읽기 쉽고 중립적인 산세리프 1종 | | 10 | x-height 큰 서체 | 타이포 | 작은 크기에서도 가독성 확보 (예: Inter) | | 11 | 대문자 사용 제한 | 타이포 | sentence case로, 전체 대문자는 짧은 강조만 | | 12 | regular·bold만 사용 | 타이포 | 굵기 종류를 줄여 시각적 소음 억제 | | 13 | 순수 검은색 피하기 | 타이포 | 흰 배경엔 짙은 회색으로 눈 피로 완화 | | 14 | 긴 텍스트 왼쪽 정렬 | 타이포 | 본문 가운데·양쪽 정렬 회피 | | 15 | 본문 줄 높이 1.5↑ | 타이포 | 1.5~2 범위, 같은 줄 재독 방지 | ## 레이아웃 · 간격 · 위계 ### 1. 여백으로 관련 요소 묶기 정보를 작은 관련 그룹으로 나누면 화면 구조를 더 빨리 이해하고 기억한다. 그룹화 단서는 네 가지 — ① 같은 컨테이너, ② 요소 간 간격 좁히기, ③ 비슷한 모양, ④ 연속된 선 정렬. > [!TIP] 컨테이너보다 여백 > 컨테이너는 가장 강한 그룹화 단서지만 화면에 장식을 늘린다. 여백과 정렬은 더 미묘하면서 화면을 단순하게 유지한다. 예제에서는 콘텐츠 사이 간격을 넓혀 서로 다른 정보 그룹을 구분했다. ### 2. 일관된 형태와 동작 유지하기 비슷한 요소는 제품 내부뿐 아니라 익숙한 다른 제품과 비교해도 비슷하게 보이고 작동해야 한다. 예측 가능한 동작은 매번 사용법을 다시 배울 필요를 줄인다. - 채워진 아이콘과 외곽선 아이콘이 섞이면 채워진 쪽이 선택 상태로 오해된다 → 모든 아이콘을 둥근 모서리 + 2pt 외곽선으로 통일. - 아이콘만으로 의미가 어려운 사용자·스크린리더 사용자를 위해 텍스트 레이블 추가. - **같은 모양은 같은 동작을 예상하게 한다.** 기능이 다르면 시각 처리도 달라야 한다 — 비상호작용 아이콘 컨테이너가 `Book now` 버튼처럼 보여 파란색·버튼 스타일을 제거. ### 3. 명확한 시각적 위계 만들기 모든 정보가 같은 중요도는 아니다. 크기·색상·명암비·간격·위치·깊이로 훑기(scan)를 돕는다. > [!NOTE] Squint Test > 눈을 가늘게 뜨거나 화면을 흐리게 본 뒤에도 **중요한 요소와 화면의 용도가 드러나는지** 확인하는 방법. 초기 화면에선 요소들이 비슷한 강도로 경쟁하고 주요 행동 버튼이 거의 안 보였다 → 주요 버튼에 고대비 배경 + 굵은 글꼴, 본문 설명은 색·타이포로 위계를 낮춤. ### 4. 불필요한 장식 제거하기 의미를 전달하거나 그룹화하지 않는 선·색·배경·애니메이션은 주의를 분산시키고 인지 부하를 높인다. 예제 이미지 주변의 흰 여백과 테두리는 정보 전달에 불필요해 제거 → 핵심 정보·행동에 집중하기 쉬워짐. ## 색상 — 장식보다 의미 ### 5. 색상에 명확한 역할 부여하기 색상은 장식보다 의미 전달에 제한적으로 쓰는 게 안전하다. **흑백에서 시작해 필요한 곳에만 색을 추가**하는 접근이 효과적이다. | 색을 쓸 곳 | 색을 안 써도 되는 곳 | |-----------|---------------------| | 텍스트 링크, 버튼 등 상호작용 요소 | 카드처럼 형태 자체가 상호작용을 암시하는 요소 | | "무엇을 클릭할 수 있는지" 학습시킬 때 | 비상호작용 제목·별점 (파란색은 클릭 오해 유발 → 제거) | 브랜드 색을 상호작용 요소에만 적용하면 상호작용 요소와 일반 정보의 구분이 명확해진다. ## 접근성 — WCAG 2.1 AA 명암비 ### 6. UI 요소에 3:1 이상의 명암비 명암비는 두 색의 지각 밝기 차이를 1:1~21:1로 표현한다. **폼 필드·아이콘·버튼 같은 UI 요소는 최소 3:1**이 필요하다. - 사진 위 화살표는 배경 이미지에 따라 안 보일 수 있음 → 회색 아이콘 + 불투명 흰 배경 컨테이너로 사진과 무관하게 명암비 확보. 덤으로 누를 수 있는 영역도 커짐. - 주요 버튼도 배경 대비 부족으로 저시력 사용자가 형태를 구분하기 어려움 → 3:1 이상으로 높여 접근성과 위계를 함께 개선. ### 7. 텍스트에 충분한 명암비 | 텍스트 조건 | 최소 명암비 | |------------|------------| | 18px 이하 작은 텍스트 | **4.5:1** | | 18px 초과 굵은 텍스트 / 24px 초과 regular | **3:1** | - 사진 개수 표시: 회색 컨테이너 불투명도↑ + 텍스트 그림자 추가. - 위치 텍스트: 색이 너무 밝고 글꼴이 가늘어 더 진한 회색으로. > [!WARNING] 명암비만으론 부족 > 기준을 충족해도 지나치게 가는 글꼴은 읽기 어렵다. **굵기도 별도로 조정**해야 한다. ### 8. 색상만으로 상태를 구분하지 않기 색각 이상 사용자는 특정 색 조합을 구분하기 어렵거나 색 자체를 인식하지 못한다. 의미·상태·상호작용 가능 여부를 색상만으로 전달하면 안 된다. - `Reviews` 링크는 파란색을 제거하면 일반 텍스트와 구분 불가 → **밑줄을 추가**해 색이 안 보여도 링크임을 식별. ## 타이포그래피 ### 9. 하나의 산세리프 서체 사용하기 서체(typeface)는 Helvetica 같은 공통 스타일의 글꼴 집합, bold/regular는 개별 폰트다. 인터페이스에는 **읽기 쉽고 중립적이며 단순한 산세리프 하나**가 안전하다. 장식적 세리프 제목은 읽기 어렵고 서비스 분위기와 어긋날 수 있어 본문과 같은 산세리프로 통일. ### 10. 소문자 높이(x-height)가 큰 서체 선택하기 x-height가 크고 글자 간격이 충분한 서체는 작은 크기에서도 잘 읽힌다. 예제의 League Spartan은 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로 늘림. ## 실무 적용 > [!SUCCESS] 워크플로 요약 > ① 정보 구조를 여백·근접으로 잡고 → ② 같은 기능은 같은 형태로 통일 → ③ 위계를 크기·대비로 만들고 → ④ 불필요한 장식 삭제 → ⑤ 색은 상호작용에만 → ⑥⑦⑧ 명암비·색 외 단서로 접근성 확보 → ⑨~⑮ 타이포(산세리프 1종, 큰 x-height, sentence case, regular/bold, 짙은 회색, 왼쪽 정렬, 줄 높이 1.5). 브랜드 장식은 이 기본 위에 얹는다. ### 측정 도구 - WebAIM Contrast Checker — 명암비 측정 - Contrast (Figma plugin) — 디자인 중 실시간 명암비 확인 ## 출처 | 출처 | 활용한 근거 | 수준 | |------|-------------|------| | Adham Dannaway — Small UI design tips (adhamdannaway.com) | 15개 논리 규칙과 숙소 상세 화면 개선 예제 | 실무자 가이드 | | WCAG 2.1 AA | UI 요소 3:1, 작은 텍스트 4.5:1, 큰/굵은 텍스트 3:1 명암비 | 공식 접근성 기준 | > [!NOTE] 근거 해석 > 명암비 수치(3:1, 4.5:1)와 색 외 단서 병행은 WCAG 2.1 AA에 근거한 표준이다. 나머지 배치·타이포·색상 규칙은 저자의 실무 휴리스틱으로, 참고 원칙이지 검증된 척도는 아니다. 우리 하네스의 [[00_취향 프로필]]·[[디자인-체크리스트]]와 상충하면 프로필이 우선. ## 관련 문서 - [[AI 티 없는 웹디자인 원칙]] · [[디자인 프로세스와 평가]] · [[디자인-체크리스트]] · [[00_취향 프로필]] · [[디자인 스타일 카탈로그]]