모바일 위키 반응형 E2E¶
SFH 위키는 기획자가 현재 결정과 진행 상태를 찾는 화면이자 개발자가 구현 계약과 검증 근거를 확인하는 화면입니다. 콘텐츠가 존재하는지만 확인하지 않고, 작은 화면에서도 목적 문서를 발견하고 내용을 읽고 다음 문서로 이동할 수 있어야 통과합니다.
사용자별 핵심 동선¶
| 사용자 | 시작점 | 성공 조건 |
|---|---|---|
| 기획자 | 홈 PLAN |
진행률·확정 근거·다음 작업을 두 번 이하의 선택으로 확인 |
| 개발자 | 홈 DEV |
모듈 규칙과 기능 문서의 표·코드 계약을 확대 없이 읽거나 가로 스크롤로 확인 |
| 공동 검수자 | 홈 QA |
위키·게임 E2E 범위와 마지막 검증 결과를 구분해 확인 |
| 모든 사용자 | 검색 또는 DOCS |
검색 허브와 4단계 전체 문서 맵에서 원하는 문서로 이동 |
필수 뷰포트¶
| 등급 | CSS 뷰포트 | 확인 목적 |
|---|---|---|
| 소형 휴대폰 | 320x568 | 최소 지원 폭, 헤더·버튼·2열 요약의 경계 |
| 일반 휴대폰 | 390x844 | 기본 모바일 읽기와 전체 화면 검색 |
| 태블릿 세로 | 768x1024 | 2열 문서 맵과 표 스크롤 |
| 데스크톱 | 1440x900 | 4열 문서 맵과 홈 대시보드 밀도 |
브라우저 E2E 계약¶
1. 홈 인지¶
- 문서 폭이 뷰포트를 넘지 않습니다.
- 핵심 문구, 현재 빌드, 브라우저 플레이,
PLAN · DEV · QA · DOCS가 소스 순서와 시각 순서 모두 일치합니다. - 휴대폰에서 핵심 행동은 전체 폭 1개와 보조 행동 2개로 배치됩니다.
- 홈 DOM에는 최신 날짜 하루만 존재하고, 전체 과거 이력은 개발 현황 문서에서 확인합니다.
2. 검색¶
- 모바일 검색 출력은
100dvh에서 헤더를 제외한 높이를 사용합니다. - 입력 전 기획 우선순위와 빠른 검색 묶음이 즉시 보이며 내부 스크롤이 가능합니다.
- 입력 후 추천 화면이 사라지고 실시간 문서 결과와 현재 검색어가 표시됩니다.
- 검색 닫기 뒤 본문 스크롤과 링크 입력이 복구됩니다.
3. 문서 읽기¶
- 본문은 16px 수준의 기본 글자와 충분한 행간을 유지합니다.
- 네 열 이상 표는 본문을 찌그러뜨리지 않고 표 컨테이너 안에서만 가로 스크롤합니다.
- 코드 블록과 긴 경로는 페이지 전체가 아니라 해당 블록 내부에서만 스크롤합니다.
- 키보드 포커스와 고대비 모드에서 활성 요소 경계가 사라지지 않습니다.
- 장식 연결선은 클릭·터치를 가로채지 않고, 노드 선택으로 DOM이 갱신돼도 선택한 항목의 포커스가 유지됩니다.
4. 전체 문서 맵과 배포 경로¶
- 데스크톱 4열, 태블릿 2열, 휴대폰 1열로 재배치됩니다.
- 현재 문서의
YOU표시와 대→중→소→세부 경로가 유지됩니다. - 즉시 페이지 이동 후에도 검색 데이터, 브라우저 플레이, 58개 문서 링크는 현재 호스트의 배포 루트를 유지합니다.
- 홈 대시보드는 검색 색인에서 제외하며, 검색 첫 결과는 홈 회귀 링크가 아니라 실제 상세 문서여야 합니다.
- 모든 노드의 배포 URL이 HTTP 200을 반환해야 합니다.
자동·실브라우저 검증 분리¶
scripts/check-wiki-responsive.ps1은 다음 회귀를 모든 위키 빌드에서 차단합니다.
- 역할별 빠른 이동과 E2E 문서 누락
dvh, safe-area, coarse pointer, 4·2·1열 반응형 계약 누락- 모바일 검색 전체 높이와 표·코드 내부 스크롤 누락
- 검색·플레이 링크의 현재 페이지 상대 경로 회귀
- 44px 터치 범위, 비차단 장식, ARIA 제어 관계, 홈 최신 하루 계약 누락
실제 브라우저 검수는 네 뷰포트에서 DOM 폭, 요소 크기, 검색 열기·입력·닫기, 역할 링크, 문서 맵 링크, 콘솔 오류를 확인합니다. CSS 문자열 검사만으로 통과 처리하지 않습니다. 자동 계약에는 REAL_BROWSER_REQUIRED 표식을 유지합니다.
검증 결과¶
2026-09-01 실제 Chromium 검수 결과입니다. 모든 크기에서 documentElement.clientWidth와 scrollWidth가 같아 페이지 전체 가로 넘침이 없었습니다.
접근성 재검수에서는 데스크톱 전체 문서 맵의 상호작용 노드 교차가 0쌍이었고, 닫힌 검색 결과 레이어는 pointer-events:none, 검색 활성 시에는 auto로 전환됐습니다. 카테고리 선택 뒤 활성 요소가 새로 렌더링된 동일 버튼에 복원됐으며 aria-controls로 다음 열을 가리켰습니다. 390x844에서는 가시 상호작용 요소 22개의 최소 높이가 55px, 44px 미만 0개, 가로 넘침 0px, 문서 맵 1열, 홈 일자 카드 1개로 측정됐습니다. 브라우저 경고·오류 로그는 0건입니다.
| 뷰포트 | 실제 판정 | 핵심 측정 |
|---|---|---|
| 320x568 | 통과 | 본문 15.2px, 역할 카드 2열, 문서 맵 1열, 플레이 링크 루트 유지 |
| 390x844 | 통과 | 본문 16px, 검색 출력 795px·내부 스크롤 796px, 실시간 결과 22건 표시·첫 결과 이동·닫기 복구 |
| 768x1024 | 통과 | 문서 맵 2열, 넓은 표가 724px 컨테이너 안에서 992px 콘텐츠만 독립 스크롤 |
| 1440x900 | 통과 | 역할·상태·문서 맵 4열, 브라우저 플레이를 포함한 헤더와 본문 가로 넘침 0 |
추가로 모듈 규칙 문서 맵 검색→결과 클릭, 홈 DEV→모듈 규칙, 중첩 문서에서 브라우저 플레이를 실제 클릭했습니다. 모두 루트 경로로 이동했고 브라우저 콘솔 오류는 0건이었습니다. 정적 검사는 58개 Markdown·내비게이션·노드 데이터 경로와 네 뷰포트 계약을 strict 빌드 전에 판정합니다.
실패 항목은 배포 전에 수정하며, 일자별 요약은 개발 현황과 업데이트에 압축합니다.
검색 별칭¶
모바일 위키 E2E, 반응형 위키, 휴대폰 위키, 기획 개발 연결, 검색 전체 화면, 위키 가독성, 위키 터치 영역, 320px, 390px, 768px, 1440px