시각적 위계: 가장 큰 것이 가장 중요한가

보고서를 열었는데 무엇부터 읽어야 할까요

온라인 매장을 운영하는 민지는 아침 회의 전에 어제의 실적을 확인합니다. 보고서를 열었더니 화면에서 가장 큰 영역은 월간 보고서를 살펴보라는 안내입니다. 매출 숫자도 보이지만, 언제의 실적인지와 언제 갱신됐는지는 다른 곳에서 찾아야 합니다.

먼저 필요한 답과 더 크게 보이는 정보

큰 상품 이미지와 작은 실적 영역을 먼저 비교해 보세요. 두드러짐은 면적과 대비로 만들 수 있지만, 민지에게 먼저 필요한 답은 어제 실적입니다. 이 장면의 화면은 개념을 보여 주는 모형이므로 정확한 기간·금액·갱신 시각은 아래 가상 보고서에서 읽습니다. 손가락의 위치를 실제 시선이나 이해도 측정으로 해석하지 않습니다.

지금은 2026년 6월 18일 오전 9시 10분, 한국 표준시라고 해 봅시다. 아래의 가상 보고서를 보고 두 질문에 답해 보세요. 어제 온라인 매출은 얼마였나요? 이 화면으로 오늘 매출도 말할 수 있나요? 먼저 자료를 읽고 자기 말로 설명한 뒤 다음 해설과 비교해 보세요.

숫자를 한 문장으로 설명해 보세요

자료를 연결하면 이렇게 말할 수 있습니다. “6월 17일 하루의 온라인 매출은 2,480,000원입니다. 6월 18일 오전 8시에 갱신됐고, 선택 기간의 집계는 완료됐습니다.” 이 문장은 숫자의 이름과 단위, 그 숫자가 다루는 기간, 자료의 상태를 함께 담습니다.

실적 기간과 갱신 시각은 다른 뜻입니다. 6월 17일은 매출이 발생한 날이고, 6월 18일 08:00은 그 자료를 화면에 갱신한 시각입니다. 오늘 갱신됐다는 이유만으로 오늘 매출까지 포함됐다고 볼 수는 없습니다. 이 화면으로 설명할 수 있는 것은 6월 17일의 실적이며, 6월 18일 매출은 알 수 없습니다.

A안에는 필요한 정보가 모두 있습니다. 2,480,000원이라는 값은 읽을 수 있어도, 어느 기간의 값이고 언제 갱신됐는지는 떨어진 설명을 연결해야 합니다. 이때 값과 설명의 관계를 찾는 일이 독자에게 남습니다. 반대로 조건을 전부 같은 크기로 늘어놓아도 어떤 설명이 어느 값에 속하는지 저절로 분명해지는 것은 아닙니다.

여기서 먼저 정할 것은 글자의 크기가 아니라 사용자가 해결하려는 질문입니다. 민지는 어제 실적을 확인하러 왔습니다. 따라서 어제의 매출과 그 해석에 필요한 정보가 월간 보고서 안내보다 앞서 읽히도록 설계할 이유가 있습니다. 다른 업무를 하러 온 사람이라면 우선순위도 달라질 수 있습니다.

같은 자료를 질문에 맞춰 묶기

이번에는 같은 자료를 B안처럼 배치해 봅니다. 숫자와 날짜, 집계 상태, 월간 보고서 안내 문구는 A안과 같습니다. 필요한 정보를 더 넣어 만든 비교가 아니라, 이미 있는 정보의 순서와 표현을 바꾼 제안입니다.

크기뿐 아니라 무엇이 함께 읽히는가

달력 단서와 그래프를 한 묶음으로 보는 이유를 설명해 보세요. 숫자를 크게 만드는 것과 어느 기간의 숫자인지 함께 이해하게 만드는 것은 서로 다른 변경입니다. B안에서는 기간·단위·상태와 값의 관계를 읽을 수 있도록 배치합니다. 이미지의 막대 길이는 본문 매출 수치를 재현하지 않으며, 이 변경이 업무 속도를 높였다는 결과도 아닙니다.

B안은 보고서의 기간을 먼저 알려 주고, 그 기간의 매출과 주문을 한 구역에 둡니다. ‘원’과 ‘건’은 각각의 숫자에 붙이고, 갱신 시각과 집계 완료 상태는 그 보고서를 설명하는 위치에 남깁니다. 월간 보고서 안내는 따로 묶어 현재 실적을 읽는 일과 구별합니다.

값을 강조한다고 해서 날짜와 상태를 읽기 어렵게 줄일 필요는 없습니다. 민지가 말해야 할 문장을 완성하는 데 필요한 정보이기 때문입니다. 매출만 보았을 때와 기간·단위·상태까지 함께 보았을 때, 자신이 설명할 수 있는 내용이 어떻게 달라지는지 확인해 보세요.

이 비교에서는 순서, 글자 크기와 굵기, 묶음, 여백, 홍보 영역의 비중을 함께 바꿨습니다. B안을 더 빨리 읽었다고 느끼더라도 그 차이를 글자 크기 하나의 효과라고 결론 내릴 수는 없습니다. 이 자료의 목적은 무엇을 바꾸었고 왜 바꾸었는지 검토하는 것입니다. 실제 사용자의 이해나 업무 속도가 좋아졌는지는 별도로 확인해야 합니다.

시각적 위계는 우선순위와 관계를 드러냅니다

시각적 위계(visual hierarchy)는 표현의 차이로 정보의 우선순위와 관계를 드러내는 방법입니다. B안에서는 보고서와 월간 안내를 구별하고, 보고서 안에서는 기간과 수치가 어떻게 연결되는지 보여 줍니다. 위계를 살필 때에는 무엇이 두드러지는지와 그 정보가 먼저 필요할 이유를 함께 봅니다.

시각적 무게(visual weight)는 어떤 요소가 주변 요소에 비해 얼마나 두드러져 보이는지를 가리킵니다. 큰 글자, 굵은 획, 넓은 면적, 주변과 다른 색 등이 그 무게를 바꿀 수 있습니다. 작은 문구도 주위가 비어 있으면 눈에 띌 수 있으므로 글자 크기만으로 설명할 수는 없습니다.

대비는 밝기나 색처럼 표현이 서로 다른 정도입니다. 묶음은 함께 해석할 정보를 가까이 두거나 같은 구역 안에 넣어 관계를 보여 주는 방식입니다. 이 보고서에서는 진한 매출 숫자를 연한 배경과 구별하는 일이 대비를, 기간과 그 기간의 수치를 같은 구역에 두는 일이 묶음을 활용한 예입니다. 보조 설명을 희미하게 만드는 것은 묶음을 만드는 방법과 다릅니다.

Luke Wroblewski의 2007년 웹 애플리케이션 위계 발표는 시각적 무게를 조절하고, 내용과 행동의 우선순위를 정해 화면을 조직하는 방법을 설명합니다. 다음 문장은 그 발표의 요약 슬라이드에 나옵니다. 여기서는 전문가의 설계 지침으로 읽습니다. 시선 추적이나 성과를 측정한 실험 결과로 인용하는 것은 아닙니다.

Visual Hierarchy is a deliberate prioritization of Visual Weight

· PDF 실제 31쪽, 인쇄 슬라이드 29, To Summarize

이를 이 글의 말로 풀면, 시각적 위계는 어떤 요소에 더 큰 시각적 무게를 줄지 의도적으로 정하는 일입니다. 민지의 보고서에서는 매출을 무조건 가장 크게 만드는 데서 끝나지 않습니다. 어제 실적이라는 답과 그 답의 범위를 함께 파악하게 하는 것이 설계의 이유입니다.

그 이유를 설명하기 위해 디자인 파일에 읽기 순서 화살표를 그릴 수는 있습니다. 다만 그것은 설계자가 의도한 순서입니다. 사용자가 실제로 그 순서대로 보았다는 증거는 아닙니다. 이미 익숙한 사람은 필요한 숫자로 곧바로 이동하고, 다른 사람은 먼저 날짜를 확인할 수도 있습니다.

큰 제목과 진짜 제목을 함께 만들기

눈에 크게 보이는 제목과 문서 안에서 제목으로 표시된 문구를 함께 살펴야 합니다. 문서의 의미 구조는 무엇이 제목이고 어느 내용이 그 아래에 속하는지를 나타냅니다. GOV.UK Design System의 Headings 문서는 제목 단계를 나타내는 HTML 태그와 화면에서의 크기·모양을 정하는 스타일을 구분합니다. 따라서 큰 글씨를 만들었다고 제목 구조까지 만들어진 것은 아닙니다.

HTML은 웹 문서의 구조를 표시하는 언어입니다. h1, h2, h3 같은 제목 태그는 제목의 단계를 나타냅니다. 아래는 B안을 웹 문서로 만들 때 사용할 수 있는 한 가지 구조입니다. h1을 문서의 제목, h2를 그 안의 큰 구역, h3를 해당 구역의 세부 제목으로 읽어 보세요.

이 구조에서 온라인 매출과 주문 수는 같은 실적 구역에 속하는 두 항목입니다. 월간 보고서 안내는 그와 구별되는 큰 구역입니다. h2라는 이름이 언제나 특정 픽셀 크기를 뜻하지는 않습니다. 같은 제목 단계의 모습을 일관되게 정하되, 화면의 크기와 콘텐츠에 맞춰 글자 크기를 조절할 수 있습니다.

제목의 문구도 구조만큼 중요합니다. ‘정보’보다는 ‘6월 17일 실적’이 그 구역에서 다루는 내용을 더 구체적으로 알려 줍니다. WCAG 2.2의 2.4.6은 제공되는 제목과 라벨이 주제나 목적을 설명하도록 요구합니다. 제목을 몇 개 넣으라는 규칙이나 글자 크기 지침은 아닙니다.

제목이라는 역할과 구조가 프로그램으로 파악되도록 하는 문제는 1.3.1의 정보와 관계 기준과 연결됩니다. 화면 낭독기는 화면 내용을 음성 등으로 전달하는 보조기술입니다. 올바르게 표시된 제목 구조는 제목 목록을 읽거나 제목 사이를 이동하는 데 쓰일 수 있습니다. 글자를 굵게 보이게만 하면 이런 제목 관계가 함께 전달된다고 보장할 수 없습니다.

따라서 두 질문을 나누어 확인해 보세요. 제목만 읽어도 구역의 내용을 알 수 있나요? 구현에서도 그 문구가 적절한 단계의 제목으로 표시되어 있나요? 이 두 항목을 확인했다고 해서 화면 전체의 접근성 검사가 끝나는 것은 아닙니다.

내 화면에서는 무엇을 바꿀까요

자신의 화면을 하나 골라 사용자가 이 화면을 연 이유를 한 문장으로 적어 보세요. ‘보고서를 본다’보다 ‘어제 온라인 매출을 확인해 회의에서 설명한다’처럼 어떤 답이 필요한지 적으면 우선순위를 정하기 쉽습니다. 그 답이 월간 추세를 비교하는 일이라면, 앞의 B안과는 다른 정보가 먼저 필요할 것입니다.

다음으로 그 답을 만들 때 읽어야 하는 항목에 표시해 보세요. 매출 보고서라면 값, 단위, 기간, 갱신 시각, 집계 상태가 연결됩니다. 전체 매출과 특정 채널 매출이 함께 있다면 각각의 범위도 적습니다. 값이 같은 종류처럼 보여도 범위가 다르면 그대로 비교할 수 없기 때문입니다.

그 표시를 바탕으로 실제 화면을 바꿉니다. 단위가 떨어져 있다면 값에 붙이고, 기간이 어느 카드에 적용되는지 모호하다면 구역 제목이나 가까운 설명으로 범위를 밝힙니다. 갱신 상태가 다른 카드에 흩어져 있다면 어느 자료의 상태인지 연결합니다. 현재 질문과 관계가 적은 안내는 별도 구역으로 옮기되, 여전히 읽고 찾아갈 수 있게 둡니다.

작은 화면에서 카드가 세로로 쌓일 때도 같은 관계가 남는지 확인하세요. 날짜가 앞 화면에만 남고 숫자가 다음 화면으로 떨어지는지, 단위가 줄바꿈 때문에 다른 값에 붙어 보이는지 살핍니다. 글자 크기를 키워도 조건이 사라지지 않아야 합니다. 색으로만 ‘집계 완료’나 ‘지연’을 구별하지 말고 상태를 문구로도 알려 주세요.

시각적 배치와 문서의 읽기 순서도 함께 확인합니다. 화면에서는 기간 다음에 매출이 있는데, 보조기술로 읽을 때는 홍보와 무관한 설명이 길게 끼어들지 않는지 살펴볼 수 있습니다. 원래 순서를 바꾸지 않고 겉모습만 이동시킨 경우에는 이런 차이가 생길 수 있습니다. 조작 요소가 있는 화면이라면 키보드로 이동하는 순서까지 별도로 확인해야 합니다.

보조 정보라는 이유로 판단에 중요한 조건을 아주 작게 밀어내지는 마세요. 취소 수수료나 반복 결제, 수치의 불확실성은 화면에 따라 결정을 바꾸는 정보입니다. 무엇을 덜 강조할지는 현재 과제에서 상대적인 우선순위를 정하는 일이지, 불리한 조건을 찾기 어렵게 만드는 근거가 아닙니다.

다른 화면에서 같은 판단을 해보기

이번에는 도서관에서 지금 앉을 자리를 찾습니다. 현재 시각은 오전 10시 30분입니다. 아래 자료를 읽고, “지금 사용할 수 있는 좌석이 18석 있다”고 말해도 될지 생각해 보세요. 화면을 고친다면 무엇을 먼저 읽게 하겠습니까?

눈에 잘 보이는 좌석 정보도 시점을 확인한다

좌석 격자와 그 옆 시계 단서를 함께 보세요. 본문의 마지막 갱신은 오전 9시이고 확인하는 시각은 10시 30분입니다. 18석을 크게 보여 줘도 그 값이 현재 상태인지까지 알 수는 없습니다. 뒤의 열람실 모습이나 이 이미지의 좌석 수는 본문 수치를 검증하는 자료가 아닙니다. 필요한 개선은 수치 강조뿐 아니라 갱신 시점과 확인되지 않은 현재 상태를 알리는 일입니다.

이 화면은 사용 가능한 좌석을 18석으로 표시하고, 마지막 갱신 시각을 오전 9시로 밝히고 있습니다. 오전 10시 30분에도 18석이 비어 있는지는 알 수 없습니다. 새 책 수보다 좌석 정보가 먼저 필요한 상황이지만, 18이라는 숫자만 크게 만들면 현재 상태로 받아들이기 쉽습니다. 좌석 수와 마지막 갱신 시각을 연결하고, 현재 빈자리는 다시 확인해야 함을 알려 주는 쪽으로 수정할 수 있습니다.

오래된 수치를 눈에 잘 띄게 표시해도 현재값이 되지는 않습니다. 시각적 위계는 이미 가진 정보를 해석하도록 도울 수 있지만, 없는 최신 자료를 만들어 주지는 못합니다.

이처럼 정보의 중요도는 상태에 따라 달라집니다. 정상적으로 집계된 어제 실적을 설명할 때와, 지금의 좌석을 묻는데 갱신이 오래된 때는 먼저 알려야 할 내용이 다릅니다. 상태가 달라졌다고 주요 구역을 매번 크게 옮기기보다, 익숙한 위치를 유지하면서 필요한 상태 설명을 분명히 보여 주는 방법부터 검토해 보세요.

확인해볼 질문

• 화면에서 가장 두드러지는 정보가 사용자가 지금 해결하려는 질문과 맞나요?
• 핵심 수치의 단위, 대상 기간, 마지막 갱신 시각을 서로 연결해 설명할 수 있나요?
• 덜 강조한 설명도 읽을 수 있고, 판단을 바꾸는 조건이 숨겨지지 않았나요?
• 제목만 읽어도 구역의 내용을 알 수 있으며, 구현된 제목 단계와 읽기 순서도 그 관계를 전달하나요?
• 다른 사람이 숫자를 읽은 뒤 그 숫자가 알려 주지 않는 것까지 자기 말로 설명할 수 있나요?

실제로 확인할 때는 “큰 숫자가 잘 보이나요?”보다 과제를 먼저 주세요. 예를 들어 어제 실적을 설명해 달라고 한 뒤, 말한 값과 기간, 갱신 상태, 빠뜨린 조건을 기록합니다. 의도한 시선 화살표를 그리거나 혼자 두 안을 읽은 경험을 전체 사용자의 결과로 바꾸지는 않습니다. 실제로 시선을 측정하더라도 오래 본 이유가 이해인지 혼란인지는 그 기록만으로 알 수 없으므로, 설명한 내용과 함께 확인합니다. 여러 표현을 함께 바꿨다면 그 변경 묶음과 관찰 결과를 함께 남겨야 합니다.

오늘은 자신의 화면에서 큰 숫자 하나를 골라 보세요. 그 숫자가 답하는 질문과, 오해 없이 설명하는 데 필요한 조건을 옆에 적어 보세요. 먼저 바꿀 것은 숫자의 크기일 수도 있고, 떨어져 있는 날짜의 위치나 빠진 단위일 수도 있습니다.

근거의 범위

이 글은 저자의 설계 발표, GOV.UK의 공식 구현 지침, W3C의 접근성 기준과 해설을 연결한 학습 글입니다. 매출과 좌석 화면은 이 글에서 만든 가상 예시입니다. 특정 크기 차이의 효과나 모든 사람의 읽기 순서를 검증한 자료로 제시하지 않습니다.

Wroblewski 발표는 PDF 실제 31쪽의 요약과 39쪽의 위계 구성 절차를 참고했습니다. 인쇄된 슬라이드 번호로는 각각 29와 37입니다. GOV.UK는 제목 태그와 스타일의 구분, W3C는 2.4.6과 1.3.1의 역할 구분을 확인하는 데 사용했습니다.