큰 효과를 만드는 작은 UI 디자인 팁들

UI 디자인은 예술적 감각보다 일관된 논리 규칙을 적용해 배치/간격/서체/색상 결정을 내릴 때 더 빠르고 예측 가능하게 개선할 수 있음 관련 요소를 여백으로 묶고, 같은 기능에는 같은 형태를 사용하며, 크기/색상/대비/위치로 명확한 시각적 위계를 만드는 것이 기본임 장식용 색상과 불필요한 테두리를 줄이고, 색상은 링크와 버튼처럼 상호작용 가능 여부를 전달하는 데 선택적으로 사용해야 함 WCAG 2.1 AA 기준에 따라 UI 요소는 3:1, 작은 텍스트는 4.5:1 이상의 명암비를 확보하고, 색상 외에도 밑줄이나 형태 같은 단서를 제공해야 함 하나의 산세리프 서체와 regular/bold 굵기를 중심으로 구성하고, 큰 x-height/문장형 대소문자/왼쪽 정렬/1.5 이상의 줄 높이를 적용하면 가독성과 일관성이 높아짐 논리적 규칙으로 UI를 개선하는 방법 UI 디자인은 레이아웃/간격/타이포그래피/색상뿐 아니라 사용성/접근성/심리까지 함께 고려해야 해 선택이 복잡해지기 쉬움 직감으로 요소를 옮기며 보기 좋은 상태를 찾는 대신, 재사용 가능한 규칙 체계를 적용하면 더 빠르게 근거 있는 결정을 내릴 수 있음 단기 임대 숙소 상세 화면을 예제로 삼아 복잡하고 사용하기 어려운 초기 화면을 단계별로 수정함 목표는 브랜드 장식을 추가하는 것이 아니라 직관성/접근성/기본적인 시각적 완성도를 우선 확보하는 것임 1. 여백으로 관련 요소 묶기 정보를 작은 관련 그룹으로 나누면 화면 구조를 더 빠르게 이해하고 기억할 수 있음 요소를 그룹화하는 방법은 네 가지임 같은 컨테이너 안에 배치함 관련 요소 사이의 간격을 좁힘 비슷한 모양으로 표현함 연속된 선을 따라 정렬함 컨테이너는 가장 강한 그룹화 단서지만 화면에 불필요한 장식을 늘릴 수 있음 여백과 정렬은 더 미묘하면서도 화면을 단순하게 유지할 수 있는 방법임 예제에서는 콘텐츠 사이의 간격을 늘려 서로 다른 정보 그룹을 명확하게 구분함 2. 일관된 형태와 동작 유지하기 비슷한 요소는 제품 내부뿐 아니라 익숙한 다른 제품과 비교해도 비슷하게 보이고 작동해야 함 예측 가능한 동작은 사용자가 매번 사용법을 다시 배울 필요를 줄이고 오류 가능성을 낮춤 예제의 아이콘은 채워진 형태와 외곽선 형태가 섞여 있어, 채워진 아이콘이 선택 상태라고 오해될 수 있었음 모든 아이콘을 둥근 모서리와 2pt 외곽선으로 통일해 시각적 무게를 맞춤 아이콘만으로 의미를 이해하기 어려운 사용자와 화면 낭독기 사용자를 ...