1. 레이아웃을 고르기 전에 페이지의 목적을 정하세요
서비스 페이지, 제품 페이지, 리드 폼, 예약, 계정 입력, 장바구니, 도움말 등 고객 또는 비즈니스 작업을 수행하는 페이지부터 시작하세요. 각 페이지에 대해 “초보 방문자가 이 서비스를 이해하고 관련 증거를 보고 전화 요청을 할 수 있다”와 같은 완수 문장을 하나 작성하세요. 페이지에 둘 이상의 목적이 있으면 어떤 것이 먼저 보일지 결정하세요.
콘텐츠를 본질적(essential), 보조(supporting), 선택적(optional)으로 분류하세요. 본질적이라는 것이 짧아야 함을 의미하지는 않습니다; 방문자는 가격 맥락, 자격 요건, 배송 세부, 비교 정보가 필요할 수 있습니다. 그런 자료는 좁은 레이아웃에서 명확한 경로를 제공하세요. Google은 모바일과 데스크톱에서 주요 콘텐츠의 등가성을 권장하되 탭이나 아코디언과 같은 다른 표현은 허용합니다.
좁은 너비에서 동료가 페이지가 무엇을 제공하는지, 누구에게 도움이 되는지, 다음 의미 있는 행동이 무엇인지 말할 수 있어야 합니다.
2. 좁은 기준선을 완전하게 만드세요
데스크톱 레이아웃을 축소하는 대신 작동하는 단일 컬럼 경로부터 시작하세요. 유연한 컨테이너를 사용하고 텍스트 줄바꿈을 허용하며 브라우저가 장치 너비에 레이아웃을 맞추도록 하는 뷰포트 설정(viewport)을 포함하세요. 줌을 금지하지 마세요. 메뉴, 공지, 이미지, 임베드, 폼 오류가 뷰포트 안에 머무르는지 확인하세요; 의도치 않은 페이지 수준의 수평 스크롤은 일반적으로 결함입니다.
일반적인 읽기와 작업 콘텐츠에 대한 까다로운 리플로우 검사로 320 CSS 픽셀을 사용하세요. WCAG 2.2는 해당 너비에서 정보나 기능의 손실이나 2차원 스크롤 없이 수직 콘텐츠를 제시할 것을 설명합니다. 지도, 차트, 데이터 테이블은 자체 스크롤 영역이 필요할 수 있지만, 그렇다고 해서 주변 페이지가 옆으로 스크롤되도록 만드는 것을 정당화하지는 않습니다.
이미지를 컨테이너에 맞추고 브라우저가 로드 전에 공간을 예약할 수 있도록 치수(dimensions)를 제공하세요.
3. 기준 경로를 취약하게 만들지 않고 향상을 추가하세요
진보적 향상(progressive enhancement)은 본질적 콘텐츠와 기능이 기준선에서 작동하는 반면, 역량이 있는 브라우저와 더 큰 화면에는 추가 기능을 제공한다는 뜻입니다. 주소, 제품 세부, 폼 레이블, 가격 설명, 제출 경로가 애니메이션, 호버, 또는 늦게 로드되는 스크립트에 의존해서는 안 됩니다. 넓은 레이아웃은 비교 패널, 고정 내비게이션, 더 풍부한 필터링을 추가하되 기준선을 불완전하게 만들어서는 안 됩니다.
구현자에게 특정 기기 이름이 등장해서가 아니라 콘텐츠가 비좁아지거나 낭비될 때 브레이크포인트를 추가하도록 요청하세요. 브레이크포인트는 단순히 레이아웃 규칙이 바뀌는 지점입니다. 좁은 레이아웃을 사용해 도움말 텍스트, 정책 문구, 리뷰, 메타데이터 또는 중요한 구조화 상세를 조용히 제거하지 마세요.
기본 갤러리 이미지와 설명을 먼저 보여주고, 스크립트가 사용 가능해지면 확대(zoom)나 스와이프 컨트롤을 추가하세요.
4. 터치, 명확성, 복구를 고려해 컨트롤을 설계하세요
터치 인체공학은 정밀한 마우스 포인터가 아니라 손을 염두에 두고 설계하는 것을 의미합니다. 버튼, 체크박스, 닫기 아이콘, 수량 선택기, 폼 선택지에 잘못된 탭을 줄이기 위해 충분한 크기와 간격을 주세요. 의미가 명확하지 않은 아이콘에는 레이블을 달아주세요. 가격, 서브메뉴, 설명, 액션을 표시하기 위해 호버만을 유일한 방법으로 사용하지 마세요.
WCAG 2.2는 포인터 대상(pointer targets)에 대해 최소 24×24 CSS 픽셀의 Level AA 목표 크기(target-size) 기준을 포함하며, 간격과 인라인 링크 등 예외를 명시합니다. 이를 최소 참조값으로 취급하되 편안함을 보장하는 규칙으로 보지는 마세요. 중요한 행동은 명확한 레이블, 넉넉한 간격, 되돌릴 수 있는 확인 단계가 필요합니다. 고위험 여정이나 형식적 적합성 주장을 위해서는 자격을 갖춘 접근성 검토를 받으세요.
레이블을 가시적으로 유지하고, 사용 가능한 검증 피드백을 표시하며, 오류 발생 시 입력한 값을 유지하세요.
5. 미디어와 임베드를 방문자 여정의 일부로 취급하세요
각 이미지를 정보제공(informative), 설득(persuasive), 장식(decorative) 중 무엇인지 결정하세요. 정보제공 이미지에는 적절한 텍스트 대체(text alternative)와 좁은 레이아웃에서 필요한 세부를 보존하는 크롭이 필요합니다. 반응형 이미지 옵션을 사용해 브라우저가 모든 방문자에게 가장 큰 데스크톱 자원을 다운로드하게 하지 않고 적절한 리소스를 선택하게 하세요. 히어로 이미지나 비디오가 페이지 목적과 주요 액션을 가리지 않도록 하세요.
지도, 채팅, 비디오, 결제, 예약, 동의, 리뷰 위젯을 목록화하세요. 좁은 화면에서 이들의 로딩 상태, 컨트롤 크기, 경계된 레이아웃, 실용적인 대체 경로를 점검하세요. 결제, 신원, 또는 규제된 데이터 흐름의 경우에는 자격 있는 보안, 개인정보, 준수 검토 담당자를 참여시키세요; 시각적 테스트는 보안 평가를 대신하지 않습니다.
각 외부 컴포넌트, 소유자, 비즈니스 기능, 그리고 느리거나 고장 났을 때 승인된 대체 수단을 기록하세요.
6. 릴리스 전에 작업 경로를 테스트하고 수정 계획을 세우세요
브라우저의 반응형 모드를 초기 단계에서 사용해 좁음·중간·넓음 너비를 검사하세요. Chrome Device Mode는 뷰포트, 터치, 방향, 네트워크, CPU 조건을 근사할 수 있지만 Chrome은 이를 실기기 실행의 근사치로 문서화합니다. 가능할 때는 실제 휴대폰과 관련 브라우저에서 핵심 경로를 완료하세요.
스크린샷만이 아니라 작업을 테스트하세요: 콜드 로드(cold load), 내비게이션, 잘못된 및 올바른 폼 제출, 방향 전환, 줌, 제3자 화면에서의 복귀를 확인하세요. URL, 브라우저 또는 기기, 작업, 기대 결과, 소유자, 롤백 결정을 기록하세요. 주요 템플릿, 체크아웃, CMS, 또는 의존성 변경의 경우 릴리스를 단계적으로 배포(staging)하고 즉흥적으로 대처하기보다 이전 경로를 복원할 준비를 하세요.
핵심 작업이 작동하고, 컨트롤이 사용 가능하며, 페이지 수준의 수평 스크롤이 없고, 주요 의존성에 대체 수단이 있을 때만 승인하세요.