배포 전 체크리스트

설치

• 뷰포트 메타 + viewport-fit=cover
• 콘솔에서 --jt-ds-version → "5.0" 확인
• 폰트 링크를 중복으로 넣지 않았는지 (토큰 파일에 이미 내장)

반응형

• 모바일(≤639) / 태블릿 / 데스크탑 3폭 확인 — 가로 스크롤 없음
• 표는 overflow-x:auto로 감쌈
• 하단 탭바를 쓴다면 env(safe-area-inset-bottom) 적용 확인

접근성

• ★ --color-text-tertiary를 글자에 쓰지 않았는지 — 대비 3.04:1로 기준 미달
• 텍스트 대비 4.5:1 이상 (라이트·다크 양쪽) · 폼 테두리 3:1 이상
• 터치 타깃 44px
• 포커스 링이 키보드 탐색 시 보임 (:focus-visible)
• 아이콘·이미지 대체 텍스트 → 대체 텍스트 7케이스
• ★ 판정·상태를 색만으로 전달하지 않음 — 글자 병기
• 증감을 색만으로 표시하지 않음 — ▲▼ 병기
• prefers-reduced-motion 대응 (토큰 파일이 자동 처리)

다국어

• ★ +40% 텍스트 팽창 테스트 — 버튼·탭·표 헤더를 영→불·독 수준으로 늘려도 잘림 없음
• 태국어 등 무공백 언어 샘플 문장을 카드·표에 넣어도 가로 스크롤 없음
• 한글·영문·中文(简·繁) 실제 렌더 확인 (웹폰트 실패 시 폴백 포함)

아이콘

• ★ 아이콘 폰트를 display=block으로 로드 — swap이면 settings 같은 리가처 원문이 노출되고 레이아웃이 무너집니다
• 하단 탭바·주요 내비는 SVG 방식(.jt-ico-mask) 사용 — CDN이 막혀도 보입니다

코드 위생

• 하드코딩된 hex·px 검사

grep -rnE '#[0-9a-fA-F]{3,8}' src/ --include=*.{jsx,tsx,html,css}
grep -rnE '\[[0-9]+px\]|: ?[0-9]+px' src/ --include=*.{jsx,tsx,html,css}

• z-index 숫자 직접 사용 없음 (--z-* 토큰만)
• jt-utilities.css를 수정하지 않음 → 컴포넌트 계약

Tailwind를 쓴다면

• ★ 버전 확인 — v4에서 tailwind.config.js는 에러 없이 조용히 무시됩니다
• ★ content / @source 경로 누락 확인 — 개발서버는 정상, 프로덕션 빌드에서만 스타일이 사라집니다. 배포 전 반드시 프로덕션 빌드로 확인

브라우저

• Chrome · Safari · Edge · 모바일 Safari · 삼성인터넷

배포 후

• 홈의 적용 현황 표에 앱 이름·채택 레벨·DS 버전 기록