페이지 디자인 검토은(는) 무엇을 하나요?

개요

'좋아 보인다'고 보고하는 디자인 리뷰는 가치가 없습니다. 유용한 리뷰는 요소 이름, 측정값, 그리고 그래야 하는 값을 명시합니다.

핵심 원칙: 모든 발견 사항에는 숫자나 선택자가 따라와야 합니다. 증거 없는 형용사는 금지이며, 확인할 수 없었던 것은 명확히 말합니다.

패스 순서

다음 순서로 실행합니다. 이전 패스가 실패하면 이후 패스는 무의미합니다.

구조: 모든 섹션이 의도된 순서대로 존재하며, 콘텐츠가 바인딩되어 있는가
리듬: 섹션 접합부 간격, 그리드 정렬, 카드 높이, 섹션 시스템
반응형: 아래 창 행렬, 모바일 및 데스크톱
타이포그래피와 색상: 대비, 계층 구조, 고아 텍스트, 오버플로, 디자인 대비 텍스트 너비
모션: animating-web-pages 및 choreographing-scroll-stories 참조
주장과 콘텐츠: writing-claims-that-hold 참조
접근성과 성능: 포커스, 대체 텍스트, LCP, 레이아웃 시프트

창 행렬

대표적인 너비가 아니라 페이지가 견뎌야 하는 모든 너비를 테스트합니다. 실제 출시에서 유효했던 세트: 데스크톱 1024, 1280, 1440, 1920, 2560, 휴대폰 320, 360, 390, 430.

너비	확인 사항
1440	~75자 이상의 줄 길이, 중앙에 배치되어서는 안 되는 섹션
992	2열이어야 할 3열 그리드, 이동할 공간이 없는 고정 요소
768	아무도 작성하지 않은 태블릿 블록으로, 데스크톱 값이 절반 너비에 적용됨
390	피사체를 더 이상 포함하지 않는 전체 너비 미디어, 어두운 띠 위의 어두운 텍스트, 가로 오버플로
320	가장 작은 휴대폰: 줄바꿈된 제목, 잘린 버튼
2560	레티나 화면에서 흐릿한 이미지, 넓은 캔버스 중앙에서 사라진 콘텐츠

명명할 가치가 있는 모바일 실패: 전체 높이 히어로의 미디어가 섹션의 약 55%만 차지할 경우 나머지 공간에 섹션 배경이 드러납니다. 섹션 배경이 어둡고 복사본이 밝은 테마로 전환된 경우 텍스트와 버튼이 보이지 않게 됩니다. 390에서 두 테마 상태를 모두 확인하세요.

측정하세요, 눈짐작하지 마세요

스크린샷으로 판단하지 말고 실제 페이지에서 값을 읽으세요. 이 방법이 더 빠르고, 눈에 놓치는 것을 잡아내며, 렌더링이 불가능할 때도 작동합니다.

// 섹션 리듬: 중요한 간격은 각 접합부의 SUM입니다
[...document.querySelectorAll('section')].map(s => {
  const c = getComputedStyle(s);
  return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
           padT: c.paddingTop, padB: c.paddingBottom };
});

// 오버플로, 가장 흔한 보이지 않는 버그
[...document.querySelectorAll('*')]
  .filter(e => e.scrollWidth > e.clientWidth + 1)
  .map(e => e.className);

// 페이지 가로 오버플로
document.documentElement.scrollWidth > document.documentElement.clientWidth;

// 그리드 내 카드 균일성
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));

이 저장소의 tools/page-measure.js는 위 항목과 아래 점검 사항을 하나의 스니펫으로 묶습니다.

추가로 검증된 측정 점검 사항:

섹션 시스템: 모든 콘텐츠 섹션 제목의 계산된 글꼴 크기가 동일함; 모든 왼쪽 가장자리가 네비게이션 로고 가장자리와 일치함.
텍스트 크기 하한: 10px 미만의 텍스트가 없음.
h1 하나만. 제목 수준이 건너뛰지 않고 내려감.
이미지: 모든 이미지가 디코딩됨; 모든 스크롤 위치 및 장치 픽셀 비율에서 유효 픽셀 비율이 1.0 이하.
장면별 대비: 고정된 장면 내 모든 텍스트 노드가 장면의 완성된 상태에서 첫 번째 단색 배경에 대해 최소 3:1(큰 텍스트) 또는 4.5:1(본문) 대비.
히어로: 8초 동안 샘플 프레임 캡처. 중복 이미지, 히어로 사각형 밖의 타일, 겹침, 복사본 아래 타일, 또는 인트로가 안정된 후 변경 사항이 있으면 실패.
스크롤 느낌: 실제 휠 입력, choreographing-scroll-stories 참조.
콘솔이 깨끗함. 스크립트 시작, 인트로 실행, 보류 중인 오류 없음.

스크린샷을 찍을 수 없는 경우

헤드리스 및 숨겨진 브라우저 창은 렌더링을 일시 중지하므로 DOM은 완전히 정상이지만 스크린샷이 빈 상태로 반환됩니다. 이것이 검토를 건너뛰거나 사용자에게 확인을 요청하는 이유가 되어서는 안 됩니다.

대신 수치로 확인하세요: 계산된 스타일, 경계 상자, scrollWidth, 에셋 가져오기 상태 및 콘텐츠 유형. 보고서에서 어떤 결과가 측정되었고 어떤 결과가 시각적으로 확인되었는지 명확히 밝히세요.

콘텐츠 및 주장

디자인 검토에는 페이지가 말하는 내용도 포함됩니다.

모든 통계는 출처가 명시되어야 하며, 해당 출처는 마케팅 사용이 승인되어야 함
고객 로고는 승인된 목록에 있어야 하며, 단순히 '보유한 로고'가 아니어야 함
대체 텍스트는 이미지를 설명해야 하며, 파일명이어서는 안 되고, 의미 있는 이미지에서 비어 있으면 안 됨
CMS 목록에 플레이스홀더 텍스트가 없어야 함; 애니메이션 뒤에 빈 카드가 없어야 함
금지된 단어가 없어야 함; 하우스 스타일에서 금지하는 경우 엠 대시를 사용하지 않아야 함

접근성 하한선

모든 상호작용 요소에 포커스 링이 보여야 함 (:focus-visible, outline: none이 아님)
본문 텍스트 대비 최소 4.5:1, 큰 텍스트 3:1
터치 상호작용 대상 최소 44x44
움직임 감소 옵션 존중: 페이지가 완전하고 정적임
No-script: 모든 것이 보여야 함

성능 하한선

LCP 이미지는 eager, 나머지는 lazy
히어로 이미지는 CSS 너비의 약 2배, 4배가 아님
이미지에 크기 또는 aspect-ratio 래퍼가 없어 레이아웃 시프트가 발생하지 않아야 함
동영상은 휴대폰에서 1x 또는 lite 파일이며, 포스터가 있어야 함

실행 범위

마일스톤은 전체 제품군을 실행합니다. 작은 수정은 변경 사항을 포함하는 한 가지 검사, 스테이징 게시 및 보고서만 실행합니다. 모든 수정 후 전체 제품군을 실행하면 한 줄 수정이 한 시간이 됩니다. 누군가 '전체 QA'를 요청하면 모든 것을 실행하세요.

수정 후에는 로컬 빌드가 아닌 스테이징에 게시하고 QA하세요. 실제로 배송되는 것이 확인이 필요한 대상입니다.

실행 결과가 아닌 실행 자체를 확인하세요

숫자를 보고하기 전에 해당 실행이 완료되었는지 확인하세요: 상태 파일이 오늘 날짜이고, 로그가 깔끔하게 종료되었으며, 창이 의도한 창인지 확인하세요. 이전 실행에서 남은 오래된 로그 블록은 새로운 로그 블록과 똑같이 보입니다.

냉정한 검토자 관문

자체 QA는 당신의 맹점을 공유합니다. 마일스톤의 경우, 작업을 한 번도 본 적 없는 새로운 검토자에게 매트릭스 너비의 전체 페이지 스크린샷, 390 시트, 모션 캡처 및 주장 원장만 제공하세요. 기준: 계층 구조, 리듬, 모션, 이미지 및 카피 각각에 대해 10점 만점에 8점. 최대 3라운드, 각 라운드마다 새로운 검토자. 완성된 동영상에 대한 이 파일럿 테스트는 전체 7점을 기록했으며, 우리의 모든 자동화된 검사가 통과했던 정적 후크와 늦게 나타난 브랜드 이름을 발견했습니다.

보고 형식

하나의 표. 심각도, 위치, 측정값, 수정 사항. 가장 심각한 순으로 정렬.

심각도	위치	측정값	수정 사항
높음	`.hero` at 390	미디어 500px, 812px 섹션 내; 복사 영역은 `#0c0c0c`	테마별 섹션 배경 설정
중간	증명에서 정보 접합부	120 + 120 = 240px 빈 흰색	80으로 줄이거나, CTA 배치

마지막으로 확인했지만 문제를 찾지 못한 항목과 확인할 수 없었던 항목 목록(예: '오디오를 들을 수 없음', '초안을 프로덕션 도메인에서 미리볼 수 없음')을 기재하세요. 깔끔한 항목이 없는 리뷰는 철저함보다는 미완성으로 읽힙니다.

위험 신호

너비를 언급하지 않고 '모바일에서 좋아 보임'이라고 말함
재측정 없이 수정이 완료되었다고 보고함
이전 패스가 깨끗했다는 이유로 패스를 건너뜀
측정할 수 있는 것을 사용자에게 확인하도록 요청함
실행 완료를 확인하지 않은 실행의 숫자를 보고함
한 줄 수정에 전체 제품군을 실행함

페이지 디자인 검토