390px 첫 화면에서 제안·근거·행동이 보이는 순서

첫 화면 검수는 무엇이 예쁜지가 아니라 무엇을 먼저 판단하게 하는지 묻습니다

상세페이지 첫 화면을 검수할 때 가장 먼저 고정할 것은 평가 질문입니다. 이 글의 질문은 한 가지입니다. 처음 들어온 사람이 스크롤하기 전 또는 첫 번째 짧은 스크롤 안에서 대상, 해결하려는 과업, 확인 가능한 근거의 종류, 다음 행동을 구분할 수 있는가입니다. 색상 선호나 분위기 평가는 이 질문 뒤로 미룹니다. 화면을 만든 사람이 이미 알고 있는 제품 배경을 독자도 안다고 가정하지 않으며, 제품명만으로 용도와 차이를 이해할 수 있다고 보지 않습니다. 따라서 첫 화면의 각 문장은 내부 기획 용어가 아니라 공개된 제품 사실과 구매자가 확인해야 할 조건으로 작성해야 합니다.참고: U.S. Web Design System · Landing page

미국 웹디자인 시스템의 랜딩페이지 지침은 첫 방문자가 맥락 없이 도착할 수 있으므로 페이지가 명확하고 맥락을 제공해야 하며, 템플릿을 채우기 위해 불필요한 요소를 추가하지 말라고 설명합니다. 이 원칙을 상품 상세페이지에 그대로 법칙처럼 적용하는 것은 적절하지 않지만, 첫 화면에서 필요 정보와 장식을 분리하는 검수 기준으로는 사용할 수 있습니다. 여기서는 그 기준을 제품명, 한 줄 설명, 근거 예고, 행동 링크 네 묶음으로 제한합니다. ‘신뢰가 오른다’거나 ‘전환이 좋아진다’는 결과를 단정하지 않고, 사용자가 화면에서 실제로 찾을 수 있는 정보만 판정합니다.참고: U.S. Web Design System · Landing page

자체 예제는 먼저 공개 가능한 사실 목록을 고정한 뒤 만듭니다

재구성 예제의 가상 상품은 ‘선반 정리 트레이’로 정합니다. 실제 브랜드, 고객, 후기, 시험 결과와 연결하지 않습니다. 사용할 수 있는 입력값은 예제 안에서 정의한 물리 정보뿐입니다. 폭 24센티미터, 깊이 10센티미터, 미끄럼 방지 받침 4개, 물세척 가능, 구성품은 트레이 1개라는 다섯 항목입니다. ‘정리가 쉬워진다’, ‘공간이 넓어진다’, ‘가장 안정적이다’처럼 측정하지 않은 결과 문장은 입력 목록에서 제외합니다. 이 제한을 두면 카피를 멋있게 만드는 작업과 사실을 새로 만드는 작업을 분리할 수 있습니다.

첫 화면 문장은 이 표의 왼쪽 두 열에서만 조립합니다. 예를 들어 제목은 ‘폭 24cm 선반에 놓는 물세척 트레이’, 요약은 ‘트레이 1개와 미끄럼 방지 받침 4개 구성’, 근거 예고는 ‘치수와 구성품을 아래에서 확인’으로 쓸 수 있습니다. 버튼처럼 보이는 링크는 ‘치수표 확인’으로 정하고 실제로 치수표가 있는 구간을 가리켜야 합니다. 이 예제는 표현 구조를 설명하기 위한 것이므로 가격, 배송, 후기, 인증을 임의로 추가하지 않습니다. 실제 상품에 적용할 때는 판매자가 보유한 사양서와 정책 문서를 기준으로 입력표를 새로 작성해야 합니다.

제목·요약·근거·행동을 서로 다른 역할로 배치합니다

첫 화면 안의 문장들이 같은 말을 반복하면 정보량은 늘지 않습니다. 제목은 페이지의 주제와 제품의 식별 가능한 역할을 말하고, 요약은 구성 또는 사용 조건을 보충하며, 근거 예고는 아래에서 확인할 자료의 종류를 알려주고, 행동 링크는 그 자료로 이동시킵니다. W3C의 제목과 레이블 해설은 제목과 레이블이 주제 또는 목적을 설명해야 한다고 밝힙니다. 이 기준에 따라 ‘프리미엄’, ‘새로운 경험’, ‘특별한 선택’처럼 목적을 설명하지 못하는 문구를 제목 자리에 두지 않습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

이 표는 카피 공식이 아니라 역할 충돌을 찾는 검사표입니다. 실제 상품에서 배송 조건이 가장 중요한 판단 자료라면 근거 예고와 행동 링크는 치수 대신 배송 조건을 가리킬 수 있습니다. 반대로 첫 화면에 가격, 할인 배지, 리뷰 수, 인증 아이콘, 배송 문구를 모두 올려놓으면 각각이 필요한 정보여도 읽기 우선순위는 흐려질 수 있습니다. 어떤 요소를 뺄지는 업종의 정답으로 결정하지 않고, 사용자가 첫 과업을 수행하는 데 필요한지와 링크 목적이 분명한지로 결정합니다.참고: U.S. Web Design System · Landing page · W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

1440px에서 나란히 보이던 정보가 390px에서는 어떤 순서로 쌓이는지 기록합니다

데스크톱 시안만 보고 첫 화면을 승인하면 좌우 열이 세로 한 열로 바뀔 때의 순서를 놓치기 쉽습니다. 이 글의 검증에서는 동일한 HTML을 사용하고 CSS 화면 폭만 1440, 390, 320픽셀로 바꿉니다. 1440픽셀에서는 텍스트와 이미지가 나란히 있어도, 390픽셀에서는 제목, 요약, 이미지, 근거 예고, 행동 링크 가운데 무엇이 먼저 오는지 DOM 순서와 CSS order 값을 함께 기록합니다. 화면에 보이는 순서와 보조기술이 읽는 순서를 불필요하게 다르게 만들지 않는지도 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

1. 자체 예제 HTML을 하나만 만들고 제목, 요약, 근거 예고, 행동 링크에 고유한 data-check 값을 붙입니다.
2. 뷰포트를 1440×900, 390×844, 320×800으로 바꾸되 문장과 이미지 파일은 바꾸지 않습니다.
3. 각 폭에서 스크롤 전 보이는 요소, 첫 번째 짧은 스크롤 뒤 보이는 요소, DOM 순서를 별도 열에 기록합니다.
4. 대표 이미지를 숨긴 상태와 텍스트를 숨긴 상태를 각각 캡처해 어느 한쪽이 없을 때 잘못된 의미가 생기는지 확인합니다.
5. 행동 링크를 키보드로 이동해 초점 표시와 도착 구간의 제목을 확인하고 결과표에 통과·수정 필요를 적습니다.

이미지 가림 테스트와 문장 가림 테스트로 서로의 빈칸을 찾습니다

이미지 가림 테스트에서는 대표 이미지를 CSS로 숨긴 뒤 제목과 요약만 읽습니다. 이때 제품 종류, 핵심 치수, 아래에서 확인할 자료가 남아 있어야 합니다. 문장 가림 테스트에서는 제목과 요약을 시각적으로 숨기되 접근성 트리에 영향을 주지 않는 임시 검사 환경을 사용하고, 이미지의 대체텍스트가 장면의 분위기만 말하는지 아니면 이미지가 전달하는 정보를 설명하는지 확인합니다. 두 테스트 모두 실제 페이지의 영구 설정이 아니라 정보 의존도를 찾기 위한 로컬 검사입니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

대표 이미지가 단순 장식이라면 대체텍스트를 길게 써서 카피를 대신하게 만들지 않습니다. 반대로 치수나 구성처럼 본문 이해에 필요한 정보를 포함한 도식이라면 같은 정보를 본문 텍스트에도 제공하고, 대체텍스트에는 도식의 핵심 관계를 적습니다. 이 글의 대표 삽화는 트레이와 첫 화면의 식별·정보·조건·행동 관계를 보여주고, 본문 도식은 같은 정보 역할을 연결합니다. 수정 전후 문구 자체는 위의 HTML 비교 예제에서 확인합니다. 대체텍스트에도 각 그림이 실제로 보여 주는 관계를 적습니다. ‘세련된 화면’ 같은 감상은 대체텍스트에서 제외합니다.

• 제품명이나 로고를 가려도 제품의 역할을 설명하는 문장이 남는가
• 대표 이미지를 가려도 구성과 조건을 오해하지 않는가
• 문장을 가렸을 때 이미지가 실제보다 넓은 기능을 암시하지 않는가
• 근거 예고가 존재하지 않는 후기·인증·시험을 약속하지 않는가
• 행동 링크가 페이지 안의 실제 제목이 있는 구간으로 이동하는가
• 모바일 순서가 CSS 장식 때문에 DOM 읽기 순서와 뒤집히지 않는가

검수 결과는 느낌이 아니라 조건·관찰·판정을 한 줄씩 남깁니다

검수 기록에는 ‘좋아졌다’ 대신 재현할 수 있는 관찰을 씁니다. 예를 들어 ‘390×844, 브라우저 확대 100퍼센트에서 H1 전문과 요약 두 줄이 보였고 행동 링크는 첫 스크롤 뒤에 나타남’처럼 조건과 관찰을 함께 적습니다. 수정 전후를 비교할 때도 전환이나 이해도를 추정하지 않고, 제목 줄 수, 가로 넘침, 링크 도착점, 숨겨진 요소 유무처럼 다시 확인 가능한 항목만 기록합니다. 사람이 실제로 더 빨리 이해했는지를 말하려면 별도의 사용자 조사 설계와 동의, 표본, 과업, 결과가 필요하며 이 글에는 그런 자료가 없습니다.

수정일은 실제 본문, 도식, 출처 또는 검증 결과가 바뀐 날에만 갱신합니다. 단순한 저작권 연도 변경이나 색상 조정만으로 본문 검증 결과가 달라진 것처럼 표시하지 않습니다. 검사 화면과 결과표를 다시 만들 수 있도록 예제 입력값, viewport, 확대율, 확인한 브라우저를 함께 보관합니다. 이 기록은 성공 사례를 꾸미기 위한 재료가 아니라 다음 수정자가 같은 조건을 재현하기 위한 작업 문서입니다.

첫 화면을 공개하기 전 통과해야 할 마지막 조건을 정합니다

공개 판정은 장식 완성도가 아니라 정보와 링크의 무결성으로 내립니다. 제목이 주제를 설명하고, 요약이 중복 없이 조건을 보충하고, 근거 예고가 실제 자료를 가리키고, 행동 링크가 정확한 구간으로 이동해야 합니다. 세 화면 폭에서 가로 스크롤과 텍스트 잘림이 없어야 하며, 이미지의 설명과 본문 사실이 충돌해서도 안 됩니다. 하나라도 확인할 수 없으면 해당 문장을 제거하거나 검증 예정으로 표시하고 공개 완료라고 부르지 않습니다.참고: U.S. Web Design System · Landing page · W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.6: Headings and Labels

1. 입력 사실표와 첫 화면 문장의 모든 명사·수치를 대조합니다.
2. H1이 하나인지, 제목과 레이블이 각 구간의 목적을 설명하는지 확인합니다.
3. 영웅 이미지와 본문 도식이 다른 글에서 재사용되지 않은 고유 파일인지 확인합니다.
4. 320·390·1440픽셀 캡처와 DOM 순서표를 저장합니다.
5. 행동 링크의 href, 도착 제목, 키보드 초점 표시를 확인합니다.
6. 실제 사용자나 전환 자료가 없다는 한계를 본문과 방법론에 남깁니다.

390px 첫 화면의 정보 순서을 확인한 순서

1. 수정 전후를 비교해 폭 24cm·깊이 10cm·트레이 1개·받침 4개가 각각 어떤 질문에 답하는지 읽습니다.
2. 치수와 구성 링크를 실행해 본문 자료로 이어지는지 봅니다. 사양만으로 설치 여유·사용 적합성을 확정하지 않습니다.
3. 390px에서 정보·다음 행동의 잘림을 확인합니다. 가격·후기·인증을 무조건 더하기보다 첫 질문에 필요한 정보를 남깁니다.

390px 첫 화면의 정보 순서 판단에서 제외한 범위

• 자체 예제는 실제 상품, 고객, 판매 화면 또는 운영 성과를 나타내지 않습니다.
• 세 가지 CSS viewport 검사는 모든 기기, 글꼴 확대, 브라우저 도구막대 조합을 대표하지 않습니다.
• 정보의 존재와 순서는 확인할 수 있지만 실제 사용자의 이해도나 구매 행동은 별도 사용자 연구 없이는 판단할 수 없습니다.
• 업종별 표시 의무와 상품 정책은 다르므로 실제 적용 전 해당 사업자의 자료와 관련 규정을 별도로 확인해야 합니다.

390px 첫 화면의 정보 순서에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. Landing pageU.S. Web Design System · 확인 2026-08-20

   첫 방문자에게 맥락을 제공하고 불필요한 요소를 줄이며, 페이지를 만들기 전에 사용자에게 필요한 정보를 조사하라는 공식 지침을 참고했습니다.

2. Understanding Success Criterion 2.4.6: Headings and LabelsW3C Web Accessibility Initiative · 확인 2026-08-20

   제목과 레이블이 해당 내용의 주제 또는 목적을 설명해야 한다는 기준을 정보 역할 판정에 사용했습니다.