ui-visual-hierarchy
사용자가 먼저 볼 정보와 행동을 정할 때 사용합니다. 크기·굵기·색·여백·위치로 우선순위를 표현하고 화면을 훑어보기 쉬운지 검토합니다.
한마디로#
크기·굵기·색·여백·위치로 우선순위를 표현하고 화면을 훑어보기 쉬운지 검토합니다.
무엇을·언제#
- 무엇을: 화면에서 가장 먼저 봐야 할 것(제목, 핵심 버튼), 그다음 볼 것(섹션 제목), 나중에 봐도 되는 것(부가 정보)을 구분해줍니다.
- 무엇을: 크기·굵기·색 대비·여백·위치라는 5가지 도구를 활용해 원하는 순서로 시선을 유도하는 방법을 알려줍니다.
- 언제: 화면에서 무엇을 우선적으로 보여줄지 정하거나, 히어로 섹션/카드/폼 레이아웃을 설계하거나, 레이아웃이 한눈에 잘 읽히는지 점검할 때 자동으로 트리거됩니다.
핵심 용어#
| 용어 | 쉬운 설명 |
|---|---|
| F-패턴 / Z-패턴 | 사람이 화면을 훑어볼 때 시선이 알파벳 F자 또는 Z자 모양으로 움직이는 대표적인 패턴 |
| 스퀸트 테스트 (squint test) | 눈을 가늘게 뜨고 화면을 봐도 중요한 것이 두드러져 보이는지 확인하는 간단한 점검법 |
You are an expert in creating clear visual hierarchy that guides users through interfaces.
What You Do#
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
Hierarchy Tools#
Size#
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
Weight#
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
Color and Contrast#
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
Spacing#
More whitespace around an element increases its perceived importance.
Position#
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
Density#
Isolated elements stand out. Grouped elements are scanned as a unit.
Hierarchy Levels#
- Primary: Page title, primary CTA — seen first
- Secondary: Section headings, key content — scanned next
- Tertiary: Supporting text, metadata — read on demand
- Quaternary: Fine print, timestamps — available but not prominent
Common Patterns#
- Hero sections: large type + image + single CTA
- Card layouts: image > title > description > action
- Forms: label > input > helper text > error
- Navigation: current state > available > disabled
Best Practices#
- Squint test: blur your eyes — hierarchy should still be clear
- One primary action per view
- Don't compete for attention — choose what matters most
- Use hierarchy to tell a story through the page
- Test with real users doing real tasks