UI가 어색할 때 먼저 고칠 16가지 디자인 규칙

UI가 어색할 때 먼저 고칠 16가지 디자인 규칙

UI 디자인 규칙 썸네일

화면이 어색해 보일 때 색상이나 장식을 먼저 바꾸면 수정 기준이 쉽게 흔들려요. 여백, 위계, 명암비, 글꼴처럼 반복해서 적용할 수 있는 규칙부터 점검하면 더 빠르게 문제를 찾을 수 있어요. 제품 디자이너 Adham Dannaway가 숙소 상세 화면을 고치는 과정을 통해 16가지 기준을 보여줬어요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
구조	관련 정보는 여백과 정렬로 묶어요	컨테이너와 테두리를 늘리지 않고도 정보 덩어리가 또렷해져요
상호작용	같은 기능은 같은 모양으로 표현해요	버튼처럼 보이지만 눌리지 않는 요소에서 생기는 혼란을 줄여요
접근성	UI 요소는 3:1, 작은 글자는 4.5:1 명암비를 확보해요	저시력이나 색각 이상이 있어도 상태와 내용을 구분하기 쉬워져요
타이포그래피	서체와 굵기 종류를 줄이고 본문 줄 높이를 1.5 이상으로 잡아요	작은 화면에서도 문장 흐름을 놓치지 않고 읽을 수 있어요

1. 감각보다 규칙으로 UI를 다듬는 법

원문은 복잡한 숙소 상세 화면을 한 번에 새로 그리지 않아요. 사용자가 정보를 어떻게 묶어 보고, 무엇을 누를 수 있다고 예상하며, 어떤 순서로 화면을 읽는지부터 확인해요. 수정 전후 화면을 나란히 보여줘서 작은 선택이 전체 인상과 사용성에 어떤 차이를 만드는지도 확인할 수 있어요. 2

여백과 정렬로 정보 덩어리를 만들어요

관련 항목 사이의 간격은 좁게 두고, 다른 정보 그룹과는 더 넓게 띄워요. 이 규칙만 지켜도 제목, 가격, 평점, 설명이 각각 어느 범위에 속하는지 빠르게 파악할 수 있어요. 모든 그룹을 카드나 테두리로 감싸면 화면이 무거워질 수 있어요. 먼저 여백과 정렬로 묶고, 경계가 꼭 필요할 때만 컨테이너를 쓰는 편이 나아요.

728x90

아이콘 스타일도 같은 원리로 맞춰요. 채워진 아이콘과 선 아이콘을 섞으면 선택 상태인지 단순한 모양 차이인지 알기 어려워요. 모서리, 선 굵기, 시각적 무게를 통일하고 의미가 모호한 아이콘에는 텍스트 레이블을 붙여요. 같은 모양은 같은 동작을 기대하게 하므로, 눌리지 않는 정보 아이콘을 버튼처럼 꾸미지 않는 것도 중요해요.

시각적 위계는 한눈에 검사해요

중요한 요소는 크기, 대비, 위치, 간격 가운데 필요한 수단을 골라 더 먼저 보이게 해요. 원문이 소개한 스퀸트 테스트는 화면을 흐리게 보거나 눈을 가늘게 떴을 때도 주요 행동과 화면 목적이 남는지 확인하는 방법이에요. 여러 요소가 비슷한 강도로 튀면 시선이 분산돼요. 예약 버튼 같은 핵심 행동은 대비와 굵기를 높이고, 긴 설명처럼 우선순위가 낮은 정보는 채도와 크기를 낮춰요.

테두리, 배경색, 그림자, 애니메이션은 정보 구조나 상태를 설명할 때만 남겨요. 장식이 많을수록 각 요소가 차지하는 시각적 무게가 커져요. 화면을 흑백으로 먼저 구성한 뒤 링크와 버튼처럼 상호작용을 알려야 하는 곳에 색을 더하면 색상의 역할도 분명해져요. 클릭할 수 없는 제목이나 별점에 브랜드 색을 쓰면 링크로 오해할 수 있어요.

접근성 수치는 마지막 검사가 아니에요

WCAG 2.1 AA 기준에서 폼 필드, 아이콘, 버튼 같은 UI 요소는 주변 색과 최소 3:1의 명암비가 필요해요. 작은 본문은 4.5:1 이상을 확보해야 해요. 큰 글자에는 조건에 따라 3:1 기준을 적용할 수 있지만, 글꼴이 지나치게 가늘면 수치만 통과해도 읽기 어려울 수 있어요. 명암비와 굵기를 함께 봐야 하는 이유예요. 2

상태를 색상 하나로만 표시하지 않는 규칙도 바로 적용할 수 있어요. 링크에는 밑줄을 더하고, 오류에는 아이콘과 문구를 함께 보여줘요. 사진 위 버튼은 배경 이미지가 바뀌어도 윤곽이 유지되도록 불투명한 배경을 둘 수 있어요. 이렇게 하면 색을 구분하기 어렵거나 화면 밝기가 낮은 상황에서도 기능을 찾을 수 있어요.

글꼴 선택지를 줄이면 화면이 안정돼요

인터페이스에는 읽기 쉬운 산세리프 서체 하나부터 적용해요. 작은 크기에서도 소문자 형태가 잘 보이는 큰 x-height 서체가 유리해요. 굵기는 regular와 bold를 중심으로 두고, 필요한 경우 semi-bold만 보조로 써요. 여러 굵기를 섞는 대신 크기와 간격으로 정보 단계를 나누면 유지보수도 쉬워져요.

긴 본문은 왼쪽으로 정렬하고 줄 높이는 1.5 이상으로 잡아요. 전체 대문자는 짧은 라벨처럼 꼭 필요한 곳으로 제한해요. 흰 배경 위의 순수한 검정은 대비가 지나치게 강할 수 있으니 충분한 명암비를 유지하는 짙은 회색도 검토할 수 있어요. 다만 회색을 옅게 만드는 과정에서 4.5:1 기준을 놓치지 않아야 해요.

실제 화면에서는 이 순서로 확인해요

1. 콘텐츠를 관련 정보끼리 묶고 그룹 사이 간격을 벌려요.
2. 같은 기능의 아이콘, 버튼, 링크가 같은 모양과 동작을 갖는지 확인해요.
3. 화면을 흐리게 봐도 핵심 행동이 먼저 보이는지 검사해요.
4. 의미 없는 테두리, 배경, 색상, 그림자를 덜어내요.
5. UI 요소와 텍스트의 명암비를 측정해요.
6. 색상을 지웠을 때도 링크와 상태를 알아볼 수 있는지 확인해요.
7. 서체, 굵기, 정렬, 줄 높이를 한 체계로 정리해요.

이 순서는 새 화면을 만들 때뿐 아니라 기존 제품을 점검할 때도 쓸 수 있어요. 팀이 같은 기준을 공유하면 “조금 더 예쁘게” 같은 모호한 피드백이 줄어요. 어떤 규칙을 어겼고 무엇을 고쳐야 하는지 구체적으로 이야기할 수 있어요.

왜 중요한가요

UI 품질은 시안 한 장의 완성도보다 제품 전체에서 같은 판단을 반복할 수 있는지에 달려 있어요. 여백, 상호작용 표현, 명암비, 글꼴 규칙을 디자인 시스템에 넣으면 새 화면을 만들 때마다 기준을 다시 정할 필요가 없어요. 개발자도 간격 토큰, 색상 역할, 텍스트 스타일을 코드로 옮기기 쉬워져요. 2

접근성 기준은 출시 직전 검사 항목으로 미루기보다 컴포넌트를 설계할 때 반영하는 편이 비용이 적게 들어요. 버튼과 링크의 기본 상태에서 명암비와 비색상 단서를 갖추면 여러 화면을 한꺼번에 다시 고치는 일을 피할 수 있어요. 원문의 16가지 팁은 거창한 개편 없이도 현재 화면에서 바로 확인할 수 있다는 점에서 실용적이에요.

참고 자료

1. 큰 효과를 만드는 작은 UI 디자인 팁들 — GeekNews
2. 16 little UI design tips that make a big impact — Adham Dannaway