# 큰 효과를 만드는 작은 UI 디자인 팁들 > Clean Markdown view of GeekNews topic #31746. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=31746](https://news.hada.io/topic?id=31746) - GeekNews Markdown: [https://news.hada.io/topic/31746.md](https://news.hada.io/topic/31746.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-07-24T09:39:02+09:00 - Updated: 2026-07-24T09:39:02+09:00 - Original source: [adhamdannaway.com](https://www.adhamdannaway.com/blog/ui-design/ui-design-tips) - Points: 20 - Comments: 0 ## Topic Body - 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](https://webaim.org/resources/contrastchecker/)나 [Contrast Figma plugin](https://www.figma.com/community/plugin/748533339900865323/contrast)으로 측정할 수 있음 ### 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를 더 빠르게 설계할 수 있음 - 반복 적용한 규칙은 점차 디자인 작업 흐름의 자연스러운 기반이 되며, 그 위에서 새로운 표현 방식과 장식을 실험할 수 있음 ## Comments _No public comments on this page._