잘 됐는지 확인하기
1. 눈으로 보는 확인 — 이것만으로 대부분 판별됩니다
콘솔을 열 필요가 없습니다. 아래 네 화면과 내 앱을 비교하세요.
✅ 세 가지가 다 맞으면 정상입니다
- 주버튼이 먹색이다 (파랑 아님)
- 글꼴이 둥근 고딕이다 (각진 돋움·굴림 아님)
- 브라우저 창을 좁혀도 좌우로 밀리지 않는다
2. AI에게 대신 점검시키기
직접 보는 것보다 빠릅니다. 그대로 붙여넣으세요.
AI에게 점검시키기
지금 화면을 아래 4가지로 점검하고, 문제가 있으면 어디인지 알려줘. 아직 고치지는 마.
1. 다크 모드 — document.documentElement.dataset.theme='dark' 로 바꿨을 때
글자가 안 보이는 곳이 있는지
2. 모바일 — 폭 390px 에서 가로 스크롤이 생기는 곳이 있는지
3. 글자 팽창 — 버튼 글자를 3배 길게 넣었을 때 깨지는 곳이 있는지 (번역 대비)
4. 판정·상태를 색만으로 표시한 곳이 있는지 (글자가 함께 있어야 함)3. 콘솔로 확인 (선택 · 3초)
정확히 확인하고 싶을 때만 쓰면 됩니다. 브라우저에서 F12 → Console 탭 → 아래를 붙여넣고 엔터.
getComputedStyle(document.documentElement).getPropertyValue('--jt-ds-version')| 결과 | 뜻 |
|---|---|
"5.0" | ✅ 정상 |
빈 문자열 "" | ❌ CSS가 안 실렸습니다 — 링크 경로·오타를 확인하세요 |
폰트가 실렸는지도 확인하고 싶다면
F12 → Network 탭 → 새로고침 → 검색창에 pretendard 입력.
| 결과 | 뜻 |
|---|---|
| 200 | ✅ 정상 |
| 아무것도 없음 | @import가 CSS 파일 최상단에 없거나, 다른 CSS가 위에 있습니다 |
| 빨간 실패 | 사내망에서 CDN이 막혀 있습니다 → 폰트를 자체 호스팅해야 합니다 |
폰트가 안 떠도 글자는 보입니다. Mac이면 Apple SD Gothic Neo, Windows면 맑은 고딕으로 떨어집니다. 설계대로 작동하는 안전장치이고, 위 “실패 2”와 같은 모습이 됩니다.
4. 하드코딩이 남아 있나
AI가 만든 코드에는 거의 항상 남아 있습니다. 터미널을 쓰지 않고 AI에게 시키세요.
AI 대화창에 그대로 붙여넣기
이 프로젝트에서 직접 박아 넣은 색(hex, rgb)과 크기(대괄호 px)를
전부 찾아서 파일 이름·줄 번호와 함께 표로 보여줘. 아직 고치지는 마.잡힌 줄을 보고 “이걸 JDS 토큰으로 바꿔줘” 라고 하면 됩니다.
터미널을 쓰는 개발자라면
# 하드코딩된 색
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}여기서 걸리는 게 없으면 배포 전 체크리스트 16항목으로 넘어가세요.