✨ 프로젝트 소개
일본 여행을 앞두고 히라가나와 가타카나를 빠르게 읽는 연습용 웹페이지가 필요했다.
특히 아래 2가지 목표를 달성하고자 했다.
- 히라가나/가타카나를 행(あ-お / カ-コ …) 단위로 익히기
- 실제 여행 현장에서 쓰는 단어를 랜덤 테스트로 풀어보기
이를 위해 HTML/CSS/Vanilla JavaScript 기반의 경량 웹 앱을 만들고 GitHub Pages로 배포했다.
🚀 Live Demo
👉 https://eyedicamp.github.io/lets_read_japanese/
⚙ 개발 도구 & 소요 시간
- 기술 스택: HTML, CSS, JavaScript
- 배포: GitHub Pages (Repository를 통해 project pages)
- 개발 시간
- GPT-Codex와 대화로 코드를 생성한 초안: 30분
- 디자인/UX 완성 포함 최종본: 약 2시간
GPT-Codex에게 구조, 기능, UI 모두를 물어보며 진행했다.
🧠 제작 과정 — GPT-Codex와의 대화 흐름
1) 기본 레이아웃 설계
먼저 아래와 같은 화면이 필요하다고 설명하며 대화를 시작했다:
- 홈 화면
- 히라가나 행별 학습
- 히라가나 글자 퀴즈
- 가타카나 여행 단어 연습
GPT-Codex에게 HTML 뼈대를 요청했고, 메인 구조를 section 단위로 잡는 현재의 형태가 만들어졌다.
2) 화면 전환 로직
페이지를 별도 HTML 파일로 분리하지 않고 한 파일에서 전환되도록 했다.
각 화면은 <section id="…">으로 구분되고, JavaScript에서 클래스 토글로 화면 전환을 구현했다.
GPT-Codex에 아래 키워드로 질문을 던졌다.
“한 페이지에서 여러 화면을 전환하는 가장 간단한 방법을 알려줘.”
이에 따라 .active 클래스를 붙였다 떼는 방식으로 전환했다.
3) 히라가나/가타카나 데이터 구조
히라가나와 가타카나 각각 행별 배열로 데이터를 만들었다.
[ ["あ", "い", "う", …], [ … ], … ]- 각 글자마다 발음, 연상법을 추가한 객체 구조
이 데이터는 JS에서 랜덤 로직, 보기 생성 로직 등에 활용했다.
4) 퀴즈 로직
행별 확인하기 모드에서는 아래 로직이 사용됐다.
- 학습 화면에서 “확인하기” 버튼 클릭
- 해당 행의 글자를 랜덤으로 섞는다
- 한 글자를 화면에 표시 → 보기 4개 생성
- 사용자가 선택 → 정답 여부 표시
이러한 랜덤 추출 & 보기 섞기 로직도 GPT-Codex에게 물어보고 구현했다.
5) 여행 단어 테스트
가타카나 여행 단어 연습에서는,
- 배열에 일본어 단어 + 한국어 발음 + 답안 비교 로직
- 입력 폼에 사용자가 넣는 발음을 비교
맞추면 카운트가 올라가고, 틀리면 다음으로 넘어간다.
🧪 UI 상태 예시
🔗 Live Demo 바로가기
👉 https://eyedicamp.github.io/lets_read_japanese/
아래 스크린샷은 제작 과정에서 캡처해둔 화면이다.
📌 다음 확장 아이디어
- 정답과 유사한 오답 정답처리 매커니즘
- 오답 노트: 틀린 글자/단어만 다시 보기
- 히라/가타카나 헷갈리는 글자 전용 모드