한글 워들 - 한글 단어 게임

개요

• https://www.nytimes.com/games/wordle/index.html 영문 Wordle을 한국어로 만들어본 프로젝트
• 매일 새로운 5음절 단어가 주어지고 플레이어는 6번의 기회에서 정답을 맞히는 게임
• 2022년 초에 유행했던 Wordle을 만들어보며 React를 익히기 위해 시작한 사이드 프로젝트

주요 기능

• 정답, 힌트에 대한 정보 보드와 키보드에서 색상으로 표시
• 승리 시 폭죽 애니메이션 구현
• 사용자 플레이 내역 저장 (로컬 스토리지)
  • 플레이 횟수, 성공률, 현재 연승, 최대 연승에 대한 정보 제공
  • 오늘 플레이 내역 복사하기 기능
  • 승리 분포에 대한 Bar Chart 구현
  • 최근 보름 전적 시각화
  • 로컬 스토리지 암호화
• 다음 단어까지 남은 시간 타이머 기능
  • 자정이 지나면 새로고침
• 다크 모드 적용
• OpenGraph 이미지 적용

• 유저의 행동 별 Google 애널리틱스로 이벤트 전송

• PWA 적용
  • manifest.json 추가
  • IOS 홈 화면 추가 시 상태 바 다크모드와 라이트모드에서 테마색상 변경 기능 적용
  • safe-area-inset-bottom 적용하여 full-screen에서 홈바와 겹치지 않도록 적용

배포

• Cloudflare Pages
• Cloudflare Workers