우선순위는 콘텐츠 회의에서 먼저 정합니다
화면을 만들기 전에 가장 중요한 정보가 무엇인지 정하지 않으면 디자인 단계에서 모든 요소가 싸우게 됩니다. 제목, 이미지, 가격, 일정, 버튼이 모두 1순위가 될 수는 없습니다.
페이지마다 하나의 대표 메시지를 정하고, 그 다음에 보조 설명, 증거, 행동을 배치합니다. 이 순서가 잡히면 크기와 대비를 결정하기가 훨씬 쉬워집니다.
크기는 가장 단순한 위계 장치입니다
큰 요소는 먼저 보입니다. 하지만 모든 것을 크게 만들면 위계는 사라집니다. 제목이 크면 본문은 상대적으로 작아야 하고, 버튼이 강하면 주변 장식은 약해야 합니다.
크기를 정할 때는 절대값보다 비율을 봐야 합니다. 제목과 본문, 카드 제목과 설명, 라벨과 숫자의 차이가 명확하면 화면은 설명 없이도 읽힙니다.
대비는 행동을 끌어내는 데만 강하게 씁니다
대비는 색뿐 아니라 굵기, 배경, 여백, 이미지 밝기에서도 생깁니다. 대비가 높은 요소는 자동으로 시선을 가져가므로 어디에 쓸지 신중해야 합니다.
특히 정보형 사이트에서는 본문을 방해하는 장식 대비를 줄이고, 중요한 링크와 다음 글, 문의 버튼처럼 사용자가 실제로 이동할 지점에 대비를 모으는 편이 좋습니다.
반복은 사이트의 성숙도를 만듭니다
좋은 사이트는 각 페이지가 완전히 다르게 보이지 않습니다. 라벨, 카드, 버튼, 목차, 작성자 박스가 일정한 규칙으로 반복되면 사용자는 다음 페이지에서도 구조를 빠르게 이해합니다.
반복이 지루해 보일 때는 작은 애니메이션, 이미지, 섹션 구성으로 변화를 만들고, 기본 UI 규칙은 유지하는 것이 좋습니다.
실습 예시: 학원 과정 카드의 시선 순서 바꾸기
예를 들어 국비지원 과정 카드가 있다고 가정하면, 처음 화면에는 과정명, 기간, 수강료, 취업률, 버튼이 한꺼번에 올라오기 쉽습니다. 이때 먼저 정할 것은 장식이 아니라 독자가 첫 3초 안에 확인해야 할 정보입니다.
수정 전 화면은 모든 요소가 같은 무게로 배치되어 스캔이 느렸고, 수정 후 화면은 과정명, 대상자, 결과물, 신청 버튼의 흐름으로 정리되어 다음 행동이 분명해졌습니다.
시각 위계 검수 기준
| 첫 시선 | 가장 큰 제목이 페이지 목적을 한 문장으로 말하는지 확인합니다. |
|---|---|
| 보조 정보 | 기간, 비용, 준비물은 제목보다 작지만 같은 카드 안에서 찾기 쉬워야 합니다. |
| 행동 지점 | 버튼은 하나의 대표 행동에만 강한 대비를 사용합니다. |
| 반복 규칙 | 목록 카드마다 라벨 위치와 숫자 표기 방식을 맞춥니다. |
작업 기록으로 남길 내용
포트폴리오에 넣을 때는 “크기를 키웠다”가 아니라 “상담 신청보다 과정 이해가 먼저라 제목과 결과물 설명을 위로 올렸다”처럼 판단 이유를 기록합니다.
- 페이지에서 가장 먼저 보이는 정보가 하나로 좁혀졌는가?
- 제목, 설명, 버튼의 크기 차이가 역할 차이를 설명하는가?
- 강한 색이 장식이 아니라 실제 행동 지점에 쓰였는가?
- 모바일에서 제목이 의미 단위로 줄바꿈되는가?
작성자 검수 메모
시각 위계는 예쁜 화면을 만드는 기술보다 읽는 순서를 설계하는 일에 가깝습니다. 화면을 고칠 때마다 독자가 어디서 시작하고 어디로 이동하는지 말로 설명해보면 과한 장식을 줄이기 쉽습니다.
이 글은 디자인 입문자가 자신의 화면을 스스로 점검할 수 있도록 우선순위, 크기, 대비, 반복이라는 네 가지 기준으로 정리했습니다.
현장 적용 노트
실제 화면을 검수할 때는 히어로, 카드 목록, 문의 버튼을 따로 보지 않고 한 흐름으로 연결해 봅니다. 히어로에서 약속한 주제가 카드 목록에서 다시 확인되고, 마지막 행동 버튼이 같은 언어를 유지하면 사용자는 페이지의 목적을 더 빨리 이해합니다.
학원 과정 소개 화면이라면 강의명보다 먼저 취업 보장 같은 과장 문구를 키우는 방식은 피하는 편이 좋습니다. 대신 수업 대상, 배우는 결과물, 준비물처럼 확인 가능한 정보를 위계에 맞춰 배치해야 신뢰가 유지됩니다.
포트폴리오 기록 포인트
포트폴리오 기록에는 첫 시안의 문제, 수정한 우선순위, 최종 화면에서 달라진 읽기 순서를 함께 남기면 좋습니다. 이 세 가지가 보이면 단순한 시각 수정이 아니라 정보 설계 개선으로 설명할 수 있습니다.
검수 장면: 같은 카드가 여러 개 있을 때
목록형 화면에서는 첫 번째 카드만 보고 판단하면 위계가 틀어지기 쉽습니다. 실제 검수에서는 세 번째, 네 번째 카드까지 제목 길이를 바꿔 넣고 버튼 위치가 흔들리는지 확인합니다. 긴 과정명, 짧은 과정명, 숫자가 들어간 과정명을 번갈아 넣었을 때도 시작점이 유지되면 구조가 안정적인 편입니다.
- 긴 제목이 두 줄이 되어도 가격이나 버튼을 밀어내지 않는지 확인합니다.
- 대표 정보와 보조 정보의 대비가 카드마다 같은 규칙으로 반복되는지 봅니다.
- 강한 색이 두 개 이상 경쟁하면 실제 행동 버튼 하나만 남깁니다.
팀 리뷰에서 위계를 설명하는 방식
시각 위계는 주관적으로 보일 수 있기 때문에 팀 리뷰에서는 기준을 말로 설명해야 합니다. “이게 더 예뻐서”가 아니라 “첫 시선에서 과정명이 읽히고, 두 번째로 기간이 보이며, 마지막에 신청 버튼이 남는다”처럼 순서를 설명하면 피드백도 구체적으로 바뀝니다.
리뷰 전에 화면을 흑백으로 바꿔보는 것도 도움이 됩니다. 색의 힘을 걷어내면 크기, 간격, 위치만으로 정보 순서가 유지되는지 더 분명하게 보입니다.