예제로 비교하기

트레이의 첫 화면을 정보 네 줄로 바꾸기

첫 화면에 모든 장점을 넣기보다 사용자가 확인할 조건과 다음 자료를 연결했는지 비교하세요.

설명용으로 만든 예제입니다. 수치와 조건은 실제 판매 상품의 정보가 아닙니다.

수정 후 문장

  • 폭 24cm · 깊이 10cm 선반 정리 트레이
  • 구성: 트레이 1개, 받침 4개
  • 놓을 면의 사용 가능 폭·깊이와 여유를 먼저 확인
  • 치수와 구성 확인

390px 첫 화면의 정보 순서 예제에서 나눈 판단

수정 전 문장에는 치수와 구성품이 없습니다. 수정 후에는 폭·깊이·구성·확인 행동이 각각 다른 줄에 놓입니다. 폭 24cm인 트레이를 놓으려면 사용 가능한 폭이 적어도 24cm이고 깊이도 10cm 이상이어야 하며, 벽·테두리와 사용할 여유는 따로 확인해야 합니다.

첫 화면에서 끝낼 질문을 하나 고릅니다

트레이의 표면 무늬를 크게 보여줄지, 선반에 들어가는 크기부터 말할지 먼저 정해야 합니다. 위 예제의 독자는 놓을 공간에 맞는 수납용품을 찾는 사람입니다. 그래서 첫 화면의 중심 정보는 분위기보다 폭·깊이·구성입니다. 이 질문이 정해져야 제목, 그림, 링크의 순서를 고를 수 있습니다.

반대로 이미 같은 제품을 쓰는 사람이 추가 구매하러 온 화면이라면 색상과 수량 선택이 더 가까워야 할 수 있습니다. 첫 방문자의 규격 확인과 재구매자의 빠른 선택을 같은 화면 한 장에 모두 크게 넣으면 무엇부터 읽어야 할지 흐려집니다. 방문 목적이 다른 경우에는 주 행동과 보조 경로를 구분합니다.

제목·요약·그림·링크가 같은 말을 하지 않게 나눕니다

폭과 구성이 중요한 트레이의 첫 화면
요소남길 정보이 예제에서 덜어낼 것
제목폭 24cm · 깊이 10cm 선반 정리 트레이프리미엄·특별한 같은 평가어
요약트레이 1개, 받침 4개 구성제목의 제품명을 다시 설명하는 문장
그림외형과 받침 위치본문과 다른 치수나 구성품
확인 링크치수와 구성 확인도착 자료가 불분명한 더 알아보기

제목에 폭과 깊이가 들어갔다면 요약은 같은 숫자를 한 번 더 크게 쓰기보다 무엇이 포함되는지 보충합니다. 그림은 외형을 보여주고, 링크는 자세한 치수표로 이어집니다. 네 요소가 각자 다른 질문에 답하면 첫 화면의 문장이 많지 않아도 판단을 시작할 수 있습니다.

W3C의 제목·레이블 기준은 주제와 목적을 설명하는 이름을 다룹니다. 상품 페이지에 적용할 때도 제목은 식별할 대상을, 링크는 확인할 자료를 말하도록 읽어 볼 수 있습니다.

390px에서는 그림 앞뒤의 문장을 다시 읽습니다

넓은 화면에서는 제목 왼쪽, 그림 오른쪽에 놓인 정보가 함께 보입니다. 한 열로 바뀌면 어느 쪽이 먼저 나오는지가 읽기 순서가 됩니다. 예제에서는 제목과 구성 요약을 먼저, 외형 그림을 그다음, 자세한 치수로 가는 링크를 그 아래에 두는 구성을 검토할 수 있습니다. 그림이 아주 길다면 링크를 그림 앞에 두어 규격부터 볼 길을 남깁니다.

<header class="product-intro">
  <h1>폭 24cm · 깊이 10cm 선반 정리 트레이</h1>
  <p>트레이 1개와 받침 4개 구성</p>
  <a href="#size-table">치수와 구성 확인</a>
</header>

이 코드는 문장과 이동 관계를 보여주는 부분 예제입니다. 실제 페이지에서는 이미지가 들어갈 자리와 본문의 치수표가 이어져야 합니다. CSS order로 화면만 뒤집었다면 DOM 순서도 살펴보세요. 눈으로 읽는 순서와 키보드로 만나는 링크 순서가 크게 어긋나지 않아야 합니다.

390px에서 제목이 네 줄이라는 이유만으로 실패로 보지는 않습니다. 수량·단위가 떨어져 오해를 만들거나, 고정 높이 때문에 문장 끝이 잘리거나, 확인 링크가 다른 요소에 가리는지를 봅니다. 좁은 폭의 문장 손실은 모바일 가독성 예제에서 따로 다룹니다.

그림을 가렸을 때 남는 정보로 빈칸을 찾습니다

그림을 잠시 보지 않고 제목과 요약만 읽으면 제품 종류, 치수, 구성품을 알 수 있습니다. 반대로 본문의 치수표가 없다면 사진만으로 깊이 10cm를 정확히 알아내기는 어렵습니다. 이미지가 전달하는 정보와 텍스트가 제공해야 할 값을 분리하면 장식에 기대고 있는 부분을 찾을 수 있습니다.

다만 모든 이미지 설명을 길게 만들 필요는 없습니다. 외형을 보여주는 사진과 수치를 담은 도해는 역할이 다릅니다. 도해의 값은 본문 표에도 두고, 설명에는 측정 방향이나 관계를 남깁니다. 이미지 역할에 따른 설명을 함께 보면 같은 그림에도 문맥에 따라 다른 문장이 필요한 이유를 확인할 수 있습니다.

첫 화면을 고친 뒤에는 세 가지를 다시 확인합니다

  • 제목과 요약에서 새 정보가 하나씩 추가되는가.
  • 치수·구성 링크가 그 이름에 맞는 실제 자료로 이동하는가.
  • 작은 화면과 글자 확대에서 같은 문장과 다음 행동이 남는가.

설명을 더 넣고 싶을 때는 이 세 질문 중 어느 빈칸을 채우는지 먼저 적습니다. 가격·배송이 선택의 핵심이라면 그 정보가 우선할 수 있고, 이미 아래에서 충분히 설명한 장점은 첫 화면에서 반복하지 않아도 됩니다. 정보의 순서를 바꾸는 일과 구매 효과를 측정하는 일은 다른 작업입니다. 이 예제는 전자의 선택을 설명합니다.

참고 자료