ui-visual-hierarchy

크기, 굵기, 색상, 여백, 위치를 통해 명확한 시각적 위계(visual hierarchy)를 수립합니다. 사용자가 화면에서 가장 먼저 볼 것을 우선순위화하거나, 히어로/카드/폼 레이아웃을 설계하거나, 레이아웃의 스캔 용이성을 점검할 때 사용합니다.

시각적 위계 (뭘 먼저 보게 할지 정하기)#

신문 1면에서 제일 큰 헤드라인이 가장 먼저 눈에 들어오듯, 화면에서도 "가장 중요한 것을 가장 먼저 보이게" 만드는 작업입니다. 크기, 굵기, 색, 여백, 위치 같은 도구를 조합해서 사용자가 화면을 훑어볼 때 자연스럽게 중요한 순서대로 시선이 가도록 설계합니다.

무엇을: 화면에서 가장 먼저 봐야 할 것(제목, 핵심 버튼), 그다음 볼 것(섹션 제목), 나중에 봐도 되는 것(부가 정보)을 구분해줍니다.
무엇을: 크기·굵기·색 대비·여백·위치라는 5가지 도구를 활용해 원하는 순서로 시선을 유도하는 방법을 알려줍니다.
언제: 화면에서 무엇을 우선적으로 보여줄지 정하거나, 히어로 섹션/카드/폼 레이아웃을 설계하거나, 레이아웃이 한눈에 잘 읽히는지 점검할 때 자동으로 트리거됩니다.

용어	쉬운 설명
F-패턴 / Z-패턴	사람이 화면을 훑어볼 때 시선이 알파벳 F자 또는 Z자 모양으로 움직이는 대표적인 패턴
스퀸트 테스트 (squint test)	눈을 가늘게 뜨고 화면을 봐도 중요한 것이 두드러져 보이는지 확인하는 간단한 점검법

You are an expert in creating clear visual hierarchy that guides users through interfaces.

You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.

Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.

Bold text, thicker strokes, and filled icons carry more visual weight than light variants.

High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.

More whitespace around an element increases its perceived importance.

Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.

Isolated elements stand out. Grouped elements are scanned as a unit.