시선은 순서를 원한다
고든(2021)은 시각적 위계를 색과 대비, 크기, 그룹으로 중요도를 전달하는 방식이라고 정의해요. 트레이스먼과 겔라드(1980)의 특징 통합 이론에 따르면 색이나 크기처럼 하나만 다른 요소는 주의를 기울이기 전에 이미 튀어 보여요. 울프(1994)는 이런 특징이 시각 탐색을 안내한다고 설명해요. 그러니 화면에 강조가 다섯 개면 사실 강조가 없는 것과 같아요. 사용자가 먼저 봐야 할 하나를 정하는 것이 위계의 시작이에요.
여백과 그룹이 만드는 구조
바게만스와 동료들(2012)이 정리한 게슈탈트 원리 중 근접성은 가까운 것끼리 한 덩어리로 본다는 원리예요. 제목과 본문 사이 간격보다 섹션 사이 간격을 크게 두면 선을 긋지 않아도 구조가 보여요. 라이네케와 동료들(2013)은 시각적 복잡도가 높을수록 첫인상이 나빠진다고 보고했어요. 부셔와 동료들(2009)의 시선 추적 연구는 사용자가 페이지의 일부 영역에 집중한다는 걸 보여줘요. 텍스트가 많은 페이지에서는 F-패턴을 고려해 왼쪽 위에 핵심을 두세요.
모바일: 한 화면 한 주인공
모바일은 화면이 좁아 위계가 더 중요해요. 한 화면에 주요 행동은 하나만 채워진 버튼으로, 보조 행동은 테두리나 텍스트 버튼으로 표현하세요. 제목은 본문보다 확실히 크게(1.5~2배), 보조 정보는 회색으로 낮추되 색채 대비 기준은 지켜야 해요. 위계가 잘 잡힌 화면은 심미적 사용성 효과로 더 쓰기 쉬워 보이기도 해요(Lidwell et al., 2010).
자주 묻는 질문
- 시각적 위계를 빠르게 점검하는 법은?
- 화면을 흐리게 보거나 멀리서 봤을 때 가장 먼저 눈에 띄는 요소가 의도한 핵심인지 확인하세요.
- 강조 색은 몇 개가 적당한가요?
- 보통 주요 행동용 강조 색 하나에 상태 색(오류·성공) 정도로 제한하는 것이 좋아요.
출처 검토일: 2026-10-27
참고문헌
- Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. 색·대비·크기·그룹으로 위계를 만드는 법을 정의한 글이라, 기본 도구를 정리할 때 참고하면 도움이 돼요.
- Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. 색·크기 같은 단일 특징은 즉시 튀어 보인다는 이론이라, 강조 요소를 설계할 때 참고하면 도움이 돼요.
- Wolfe, J. M. (1994). Guided Search 2.0: A revised model of visual search. Psychonomic Bulletin & Review, 1(2), 202–238. 시각 탐색이 특징에 의해 안내된다는 모델이라, 사용자가 원하는 요소를 찾는 과정을 볼 때 참고하면 도움이 돼요.
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. 근접·유사 같은 게슈탈트 그룹 원리를 정리한 리뷰라, 여백으로 묶음을 만들 때 참고하면 도움이 돼요.
- Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., & Gajos, K. Z. (2013). Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 2049–2058). ACM. 시각적 복잡도가 첫인상을 떨어뜨린다는 대규모 연구라, 강조 요소 수를 줄일 때 참고하면 도움이 돼요.
- Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 21–30). ACM. 시선 추적으로 웹 페이지의 눈에 띄는 영역을 예측한 연구라, 위계가 실제 시선과 맞는지 볼 때 참고하면 도움이 돼요.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. 위계·정렬·근접 원칙을 짧게 정리해, 레이아웃 리뷰에서 근거로 참고하면 도움이 돼요.