이모지 아이콘을 SVG로 바꾸다가, 더 큰 원인을 발견해 함께 고쳤다.
■ 폰트: 이름만 부르고 파일은 안 받아오고 있었다
global.css에 font-family: "Pretendard"가 적혀 있었지만 @font-face도 CDN
링크도 없었다. 그래서 이 글꼴이 따로 깔린 사람 외에는 전원 맑은 고딕으로
보고 있었다 — 앱과 학습 문서 19개 전부. 에러가 안 나서 조용히 넘어간 케이스.
- PretendardStdVariable.woff2(285KB)를 public/fonts에 self-host
· CDN 의존 없음 → 외부 서비스가 죽어도, 오프라인에서도 안 깨진다
· variable font → 파일 하나가 굵기 45~920을 전부 담는다
· font-display: swap → 받는 동안 흰 화면(FOIT) 방지
- 전체판(2MB) 대신 Std판(상용 한글 2,350자)을 골랐다. 앱이 쓰는 한글
1,276자가 Std에 전부 있는지 브라우저에서 실측 확인했다(폴백 0자).
- 학습 문서 19개에도 같은 @font-face 적용
■ 아이콘: 이모지 95종 → Lucide 132개
이모지는 OS마다 다른 그림으로 렌더링되고, 굵기·색을 통제할 수 없고,
스크린리더가 "bust in silhouette"처럼 읽는다.
- 카탈로그의 icon: '📜'(문자) → Icon: ScrollText(컴포넌트)로 전환
- strokeWidth={1.5}로 굵기 통일, aria-hidden으로 장식임을 명시
- 개별 import만 사용(트리셰이킹) → gzip +14KB
- slug: null인 '개발 환경 설치 가이드' 항목이 일괄 변환에서 누락돼
Icon이 undefined가 될 뻔한 것을 정합성 검사(항목 수 vs Icon 수)로 잡았다
■ 토큰: 여백·글자 크기·굵기를 :root로 승격
--space-1~7(4의 배수), --text-xs~2xl, --weight-*, --radius-sm/lg/full.
값을 직접 박으면 다크 모드에서 깨지고 화면마다 미묘하게 어긋난다.
CSS 프레임워크는 도입하지 않았다 — 손으로 쓴 global.css와 충돌하고,
교재로서 "왜 이렇게 썼는지"가 사라지기 때문이다.
■ /design: 재료를 고르는 화면
색·글자·여백·모서리를 실제 CSS 변수로 렌더링(다크 모드 자동 반영) +
Lucide 아이콘 1,993개 검색·복사. lucide-react는 아이콘 하나를 이름 3개로
내보내(Rocket/RocketIcon/LucideRocket) 5,981개처럼 보이므로 별칭을 걸렀다.
아이콘 전체를 훑어야 해 무거운 화면이라 lazy로 분리했다
→ 첫 화면 번들은 1.9KB만 증가(575.57 → 577.44KB).
검증: ESLint 통과, Vitest 30개 통과, 프로덕션 빌드 성공, 콘솔 에러 0.
브라우저에서 수습 7카테고리 + 초급~특급 4과정 = 11개 화면 전수 확인
(각 12카드/12아이콘/이모지 0).
문서: DESIGN.md(폰트·토큰·비용), ICONS.md(규약·대응표 132행)
단위(순수함수)와 E2E(전체 흐름) 사이 '부품 렌더링' 층을 메운다(jsdom).
- Badge(3): 코드값→한국어 라벨/색 매핑, 미지값 폴백(방어적 기본값)
- ProgressBar(4): 백분율 계산·반올림, 0 나눗셈 방어(NaN 방지), 막대 너비
- CodeEditor(6): 제어 입력 왕복, 줄번호 minRows 보장/증가, Tab 공백2칸 삽입,
텍스트 선택 후 Tab 커서 위치(selectionStart+2 회귀 방지 — 과거 버그 못 박기)
세팅: @testing-library/react+jest-dom+user-event+jsdom, 파일별 @vitest-environment,
매 테스트 후 cleanup(globals 미사용 시 DOM 누적 방지).
프론트 테스트 9→22. coverage 게이트·lint·build 통과.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
실제 브라우저로 '다 조립된 앱'(프론트+백엔드+DB)을 태우는 통합 테스트 6개:
- 인증 가드(비로그인→로그인), 로그인 실패 안내, 학생 로그인→대시보드
- 학습 센터→강좌 열기, 퀴즈 풀기→제출→서버 채점 결과
- 멘토 로그인→멘토 화면+개인정보 접근 기록(SEC-02 감사로그까지 검증)
운영 무오염 설계:
- deploy/docker-compose.e2e.yml — 별도 프로젝트(mirime2e)·네트워크·휘발성 DB(tmpfs)
- deploy/Caddyfile.e2e — 평문 HTTP로 SPA+/api 프록시(운영과 동일 구조)
- deploy/e2e.sh — 스택 기동→테스트 학생 API 생성→퀴즈 slug 자동조회→
Playwright(브라우저 내장 이미지) 실행→down -v(정리)
- 백엔드 힙 256MB 제한(작은 인스턴스에서 운영과 공존)
EC2에서 6/6 통과 확인. 러너가 운영과 같은 인스턴스라 push마다가 아닌
온디맨드(릴리스 전)로 운영 — 전용 러너 확보 시 CI 게이트로 승격.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1) 브랜치 보호(main): CI 두 개 초록불 + 승인 1 없이는 merge 불가,
학생 직접 push 차단(PR 워크플로), 관리자만 운영·배포용 직접 push (Gitea 설정)
2) 커버리지 측정:
- 백엔드 JaCoCo — 현재 라인 36.7%, 바닥 30% ratchet(테스트 지우며 후퇴하면 빌드 실패)
- 프론트 vitest 커버리지 — 채점 로직 runSql.js 라인 40% 바닥
3) 린트/포맷 CI 강제:
- 프론트 ESLint 9(flat) 신규 — 버그류 에러, 훅 오용 검출 (현재 위반 0)
- 백엔드 Spotless — 안 쓰는 import·줄끝 공백·파일끝 개행 (기존 코드 이미 clean, 재정렬 없음)
- ci.yml에 포맷검사·린트·커버리지 단계 추가
백엔드 37개 테스트 + 커버리지 게이트 통과, 프론트 ESLint·커버리지 통과 확인.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 문제 5개 시드: SELECT* → WHERE → ORDER BY+LIMIT → GROUP BY → JOIN
(직원·부서 연습 데이터, SQL 입문 강좌 진도 순서와 일치)
- 실행 방식: sql.js(SQLite WASM)로 학생 브라우저 안 1회용 메모리 DB에서 실행
→ 서버 DB 무접촉. DROP/DELETE도 자유롭게 실험 가능 (runJs.js와 같은 격리 철학)
- 채점: 값만 비교(컬럼 별칭 허용), ORDER BY 문제만 행 순서 채점(orderMatters)
- 화면: 데이터 살펴보기(테이블+데이터), 실행 결과 표 vs 기대 결과 표 나란히 비교
- CodingProblem: setupSql 컬럼, isAutoGraded에 SQL 포함(JAVA만 수동)
- CodingServiceTest 3개 추가: SQL 채점값 저장·PASSED, JAVA 채점값 폐기(조작 방지), 빈 코드 400
→ 전체 17개 테스트 통과
운영 검증(브라우저 E2E): 정답 실행 '통과', 오답 시 기대 결과 비교 표시,
제출 시 서버에 PASSED 1/1 저장 확인. 문제 수 20→25 재시드.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 로그인/회원가입/아이디찾기/비밀번호재설정 (세션 기반)
- 대시보드(주차별 진도 체크리스트), 학습 문서 뷰어(17종), 과제 제출/멘토 피드백
- 코딩 기초·개발 환경 설치 가이드 학습 페이지
- 전 소스 한국어 학습 주석 — 수습생 교육용 저장소
- Docker 배포 구성 (Caddy + Spring Boot + PG + Gitea)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
