HSKPass

HSK 단어를 체계적으로 학습하고 반복 복습을 통해 합격으로 이끌어주는 웹 기반 학습 플랫폼입니다.

주요 기능

단어 학습 시스템

• HSK 1급부터 6급까지 급수별 단어 리스트 제공 (총 5,000+ 단어 예정, 현재 3급 까지 제공)
• 한자, 병음, 뜻, 예문, 동의어/유의어로 구성된 단어 정보
• HanziWriter를 활용한 한자 획순 애니메이션을 통한 시각적 학습 가능
• 병음 발음 재생 기능으로 청각적 학습 지원
• 단어 북마크를 통한 단어 관리

퀴즈 시스템

• 급수별 랜덤 문제 출제 및 개인화된 학습 경험 제공
• 실시간 정답/오답 피드백 및 학습 효과 극대화
• 타이머를 통한 집중력 향상
• 퀴즈 결과 자동 저장 및 개인별 학습 통계 제공 (예정)

개인화 기능

• Google OAuth를 통한 간편 로그인 및 사용자 인증
• 퀴즈 히스토리 및 상세 학습 통계 분석 (예정)
• 개인별 북마크 관리 시스템
• 사용자 맞춤 설정 및 학습 환경 최적화 (예정)

기술 스택

Frontend

• Next.js 15.3.3 (App Router, React 19) - SSR/CSR 하이브리드 렌더링으로 SEO 최적화
• TypeScript - 타입 안정성 확보를 통한 런타임 에러 방지 및 개발 생산성 향상
• TailwindCSS 4.1.8 - 일관된 디자인 시스템 구축
• shadcn/ui - 재사용 가능한 컴포넌트 라이브러리 설계

Backend & Database

• Supabase - 실시간 데이터베이스 및 확장성을 고려한 스키마 설계
• Google OAuth 연동 - 안전한 사용자 인증 시스템

상태 관리 & 최적화

• Zustand - 클라이언트 상태 관리
• TanStack Query - 서버 상태 관리 및 API 호출 최적화, 캐싱 전략 구현
• HanziWriter - 한자 애니메이션 라이브러리
• Dynamic Import - 코드 스플리팅을 통한 초기 번들 크기 최적화

아키텍처 설계

프로젝트 구조

src/
├── app/
│   ├── api/              # API 엔드포인트
│   ├── level/            # 급수별 단어 목록
│   ├── word/             # 단어 상세 페이지
│   ├── quiz/             # 퀴즈 기능
│   └── mypage/           # 개인 페이지
├── components/
│   ├── ui/               # 재사용 UI 컴포넌트
│   ├── quiz/             # 퀴즈 관련 컴포넌트
│   ├── word/             # 단어 관련 컴포넌트
│   └── mypage/           # 마이페이지 컴포넌트
└── lib/
    └── supabase/         # 데이터베이스 연결

핵심 기술 특징

• 모듈화된 컴포넌트 아키텍처: 신규 기능 추가 시 기존 코드 영향도 최소화
• 상태 관리 분리: Zustand(클라이언트) + TanStack Query(서버) 조합으로 성능 최적화
• 반응형 디자인: Mobile-First 접근법으로 다양한 디바이스에서 일관된 학습 경험
• 확장성 고려: 향후 JLPT, TOPIK 등 다른 언어 시험 대응 가능한 구조 설계

Dababase

주요 테이블

• words: HSK 단어 데이터
• word_characters: 한자별 상세 정보
• quiz_attempts: 퀴즈 시도 기록
• quiz_responses: 퀴즈 문항별 응답 데이터
• bookmarks: 북마크한 단어

배포 및 운영

개발 환경 설정

npm install
npm run dev

배포 자동화

• Vercel CI/CD 파이프라인을 통한 Git 기반 자동 배포 환경 구축
• 성능 모니터링 및 웹 성능 최적화 지속 적용