<aside> 📎

참고 출처

1. 5 Principles of Visual Design in UX — Nielsen Norman Group — 이 레슨에서 다루는 스케일·시각 위계·균형·대비·게슈탈트 다섯 가지 시각 디자인 원칙의 근거 자료입니다.
2. Visual Hierarchy in UX: Definition — Nielsen Norman Group — 시각 위계를 만드는 구체적 기법과 흔한 실수(대비 과다, 색 의존)에 대한 근거입니다. </aside>

앞선 프로덕트 기획 단원에서 우리는 서비스가 어떤 기능을 갖고 화면이 어떻게 흘러갈지를 정의했습니다. 그런데 같은 기능, 같은 정보라도 어떤 화면은 한눈에 이해되고 어떤 화면은 어수선하게 느껴집니다. 이 차이를 '감'이 아니라 '원칙'으로 설명할 수 있어야 디자인을 의도적으로 다룰 수 있습니다. 이번 레슨에서는 좋은 UI를 판단하는 기준이 되는 시각 디자인 원칙과 시각 위계를 익힙니다.

UI 디자인 원칙과 시각 위계

• UI 디자인은 '예쁘게'가 아니라 '이해하기 쉽게' 만드는 일입니다. 시각적 완성도는 사용성과 신뢰를 함께 높입니다.
• 사람은 화면을 글자 하나하나 읽기보다 먼저 훑어봅니다(scan). 따라서 무엇이 먼저 보이고 무엇이 나중에 보이는지를 디자이너가 설계해야 합니다.
• 이번 레슨의 목표는 좋은 화면과 그렇지 않은 화면의 차이를 언어로 설명하고, 직접 통제할 수 있게 되는 것입니다.

시각 디자인 5원칙

• Nielsen Norman Group은 사용성에 영향을 주는 시각 디자인 원칙으로 다섯 가지를 제시합니다.
  • 스케일(Scale): 중요한 요소를 더 크게 만들어 시선을 먼저 끕니다. 크기는 곧 중요도의 신호입니다.
  • 시각 위계(Visual Hierarchy): 요소들을 중요도 순서대로 시선이 이동하도록 배치합니다.
  • 균형(Balance): 화면의 시각적 무게가 한쪽으로 쏠리지 않도록 배치합니다.
  • 대비(Contrast): 색·명도·형태의 차이로 특정 요소를 두드러지게 합니다.
  • 게슈탈트(Gestalt): 사람이 개별 요소를 그룹으로 묶어 인식하는 경향을 활용합니다.
• 이 다섯 가지는 따로 노는 규칙이 아니라, 하나의 화면 안에서 함께 작동하며 서로를 보완합니다.

시각 위계를 만드는 도구

• 시각 위계는 다음 도구들을 조합해 만듭니다.
  • 크기: 큰 제목, 작은 본문처럼 크기 차이로 읽는 순서를 만듭니다.
  • 색과 대비: 가장 중요한 행동 버튼(예: '결제하기')에 가장 강한 대비를 주어 눈에 띄게 합니다.
  • 위치: 화면 상단과 좌측이 먼저 인지됩니다. 사용자는 흔히 F 패턴(텍스트 많은 화면)이나 Z 패턴(랜딩·광고성 화면)으로 시선을 옮깁니다.
  • 여백: 요소 주위에 공간을 두면 그 요소가 더 강조되고, 정보 그룹이 구분됩니다.
• 핵심은 '무엇을 가장 먼저 보게 할 것인가'를 한 화면당 한두 개로 정하는 것입니다. 모든 것을 강조하면 아무것도 강조되지 않습니다.

게슈탈트 원칙 활용

• 게슈탈트는 "부분의 합보다 전체를 먼저 본다"는 인지 원리로, UI에서 정보를 묶어 보여 줄 때 유용합니다.
  • 근접성(Proximity): 가까이 둔 요소는 한 그룹으로 인식됩니다. 라벨과 입력창을 붙여 두는 이유입니다.
  • 유사성(Similarity): 모양·색이 비슷한 요소는 같은 종류로 인식됩니다. 같은 기능의 버튼은 같은 스타일로 통일합니다.
  • 공동 영역(Common Region): 같은 테두리나 배경 안에 있으면 한 묶음으로 보입니다. 카드 UI가 대표적입니다.
• 예를 들어 결제 화면에서 'Express 결제' 버튼들을 하나의 박스로 묶으면, 아래의 카드 입력 폼과 별개의 선택지임을 별도 설명 없이 전달할 수 있습니다.