🖥️ Day 3: 첫 화면 완성 — 자음·모음 퀴즈 프로토타입 공개

*"완벽한 계획보다 불완전한 실행이 낫다."*
오늘은 머릿속의 게임이 처음으로 화면에 등장하는 날이다.

드디어 코드를 열었다

Day 2에서 나는 종이 위에 게임의 뼈대를 그렸다. 화면 구성, 문제 유형, 점수 시스템. 방향은 잡혔다.

그리고 오늘, 처음으로 코드 에디터를 열었다.

솔직히 말하면 망설였다. '조금 더 준비하고 시작할까?' 하는 생각이 들었다. 하지만 Day 1의 선언을 떠올렸다. 더 이상 기다리지 않는다. 불완전해도 일단 만든다. 그것이 이 여정의 규칙이다.

오늘 목표는 딱 하나였다. 자음·모음 퀴즈 첫 화면을 작동하는 상태로 만든다.

앱도 아니고, 특별한 설치도 필요 없다. 링크 하나를 클릭하면 브라우저에서 바로 실행되는 웹 페이지. 전 세계 누구나 접근할 수 있는 형태로 만드는 것이 목표였다.

첫 버전에 넣은 기능:

화면 중앙에 한글 자음 하나가 크게 뜬다. ㄱ, ㄴ, ㄷ… 플레이어는 그 아래에 있는 4개의 보기 중 발음을 골라야 한다. 정답이면 초록색 피드백과 함께 다음 문제로 넘어가고, 오답이면 빨간색으로 표시되며 정답을 알려준다.

10문제를 풀면 점수가 나온다. 10점 만점 중 몇 점인지. 그리고 점수 화면 아래에 딱 한 줄이 뜬다.

"한국인 친구에게 직접 물어보고 싶은 게 있나요? → 여기를 클릭하세요"

이것이 HangulQuest가 다른 학습 앱과 구별되는 순간이다. 게임을 끝낸 플레이어가 나에게 직접 연결될 수 있는 통로를 처음부터 심어두었다.

개발 과정이 순탄하지만은 않았다. 오늘 마주친 문제들을 솔직하게 기록한다.

문제 1 — 한글 폰트 깨짐
처음 화면을 열었을 때 한글이 이상하게 표시됐다. Google Fonts에서 'Noto Sans KR'을 불러오는 코드 한 줄을 추가하니 바로 해결됐다. 별것 아니었지만, 처음엔 당황했다.

문제 2 — 보기 버튼 배치
4개의 보기를 2×2 격자로 배치하려 했는데 모바일에서 깨졌다. CSS 그리드 대신 Flexbox로 바꾸니 PC와 모바일 모두 깔끔하게 됐다.

문제 3 — 정답 판정 속도
정답을 클릭했을 때 피드백이 너무 빨리 사라졌다. 0.8초 딜레이를 넣었더니 훨씬 자연스러워졌다. 작은 디테일이지만 플레이 경험이 완전히 달라졌다.

막힐 때마다 검색하고, 물어보고, 시도했다. 완벽하지 않다. 하지만 작동한다. 그것으로 충분하다.

자음 퀴즈는 오늘 완성했다. 모음 퀴즈는 내일 마무리한다. 그러면 진짜 첫 버전이 세상에 나올 준비가 된다.

오늘 처음으로 만든 화면을 스마트폰으로 열어봤다. 내가 만든 게임이 화면에 떠 있었다. 한글 'ㄱ'이 크게 표시되고, 아래에 보기 4개가 깔끔하게 놓여있었다.

아무것도 아닌 것 같지만, 어제까지는 존재하지 않았던 것이다.

존재하지 않던 것을 존재하게 만드는 것. 그것이 창작의 본질이고, 경제적 자유로 가는 길이라고 믿는다.

내일 모음 퀴즈를 완성하면, 처음으로 링크를 외부에 공개할 것이다. Reddit r/learnkorean에 첫 포스팅을 올리는 날이 다가온다.

두렵고 설렌다. 하지만 이것이 살아있다는 증거다.

HangulQuest, 한 걸음씩 나아간다.

다음 포스팅: 첫 공개 — Reddit에 링크를 올린 날