프로그래밍 기술이 전혀 없는 내가 Claude Code로 '실시간 대전이 가능한 일본어 타이핑 게임'을 만든 이야기 | 카케루 타이핑

프로그래밍 실무 경험이 전혀 없는 제가, Claude Code를 파트너로 삼아,

실시간으로 대전할 수 있는 일본어 타이핑 연습 사이트를 실제 서비스로 공개했습니다.

그것이 바로 이 카케루 타이핑 (https://kakeru-typing.com)입니다.

"AI로 ToDo 앱을 만들어 보았다"와 같은 이야기가 아니라,

• 여러 명이 동시에 같은 문장을 입력하며 경쟁하는 실시간 대전
• 한자에 **후리가나 (Furigana)**를 달아 입력할 수 있는 일본어 엔진
• 혼자서 끝없이 연습할 수 있는 엔들리스 모드 (Endless Mode) + 스코어 기록
• Google 로그인 & 플레이 기록 저장
• 기사를 게시할 수 있는 관리 화면 (예약 게시 기능이 포함된 자체 제작 CMS)
• Google Analytics의 수치를 관리 화면에 표시하는 대시보드
• sitemap / Search Console / OGP까지 포함한 SEO 대응

——이 모든 것을 코딩 지식이 전혀 없는 상태에서 만들었습니다.

이 기사는 "어떻게 만들었는가"와 "미경험자가 AI와 개발할 때의 요령"을 정리한 것입니다.

완벽을 목표로 하지 말 것: 우선 작동하는 것을 공개하고, 나중에 하나씩 개선한다.

작게 나누기: 큰 주문보다는 작은 주문의 연속.

보여주고 고치기: 스크린샷과 에러 로그는 말보다 더雄弁하다.

전적으로 맡기지 말 것: 무엇을 만들고 싶은지, 무엇이 싫은지는 인간(자신)만이 결정할 수 있다. 이 부분만큼은 놓지 않는다.

가장 큰 발견은, 직접 손을 움직이는 것이 아니라 Claude Code가 손을 움직이게 하는 개발 방법이었습니다. 저의 역할은,

• 무엇을 만들고 싶은지 일본어로 전달하기
• 나온 화면을 보고 "이 부분을 이렇게 고쳐줘"라고 피드백하기
• 에러가 나면 그대로 붙여넣기 (스크린샷도 OK)

이 세 가지뿐입니다. 설계, 구현, 디버깅 (Debugging), 배포 (Deploy), DB 설계, SEO 설정까지 실제 작업은 AI가 진행해 주었습니다. 축구로 치면 저는 감독이고, Claude Code가 선수입니다.

"전부 알아서 잘 만들어줘"라고 하면 길을 잃습니다.

"엔들리스 모드의 결과창에 WPM을 추가해줘"
"대전 대기 화면의 문구를 한 줄로 만들어줘"

이와 같이, 화면 → 다음 1개 액션의 입도로 부탁하면 확실하게 쌓여갑니다.

말로 설명하기 어려운 UI의 어긋남은 스크린샷을 찍어서 전달하는 것이 압도적으로 빠릅니다.

"헤더 높이가 홈 화면과 달라", "실수했을 때의 표시가 캐릭터와 겹쳐"와 같은 지적은 이미지 한 장으로 단번에 전달되었습니다.

PERMISSION_DENIED라든가 commit author email is not valid라든가, 처음에는 의미를 알 수 없었습니다. (지금도 이해는 못 하고 있습니다... ㅎㅎ)

하지만 전문을 복사해서 붙여넣기만 하면, 원인 파악부터 수정 방법까지 알아서 챙겨줍니다. "모르는 상태 그대로, 모르는 것을 그대로 전달하는 것"이 정답이었습니다.

관리 화면을 만들었을 때, "로그인한 나 이외의 사람이 기사를 삭제할 수 있으면 곤란하다"라는 불안함이 있었습니다.

그래서 보안 관점에서 리뷰해달라고 요청했더니,

"서버 측에서 관리자 이메일을 반드시 검증할 것"
"비관리자에게는 404를 반환하여 존재를 숨길 것"

과 같은 대책까지 포함하여 위험한 부분을 해결해 주었습니다.

미경험자에게 이 "벽치기(아이디어 검증) 상대"가 주는 안심감은 매우 큽니다.

솔직히 말하면 몇 번이나 막혔습니다.
하지만 전부 붙여넣고, 물어보고, 고쳐달라고 함으로써 극복할 수 있었습니다.

배포가 왠지 멈춤: 원인은 "커밋 작성자 이메일 형식"과 "결제 주소 미등록". 에러 문구를 붙여넣었더니 특정해 주었습니다.

대전 서버가 가끔 멈춤: 무료 플랜은 15분이면 잠드는 사양. 사활 감시 (Health Check)를 통해 5분마다 깨우는 정석적인 방법으로 해결.

접속 분석 연동 권한 에러: Google 설정이 반영될 때까지 몇 분 기다릴 필요가 있었다는 구분 작업까지 함께 해주었습니다.

한자 후리가나가 어긋남: 읽기와 표기의 대응을 자동 체크하는 메커니즘을 넣어, 데이터를 추가할 때마다 전수 검증하도록 했습니다.

"에러 = 끝"이 아니라 "에러 = 다음 힌트"가 된 것이 계속할 수 있었던 이유입니다.

기술력 그 자체보다, "만들고 싶은 것을 언어화하는 능력"과 "마음에 걸리는 부분을 타협하지 않고 지적하는 능력"이 효과적이었습니다. 이것은 아마 프로그래밍 미경험자라도 가지고 있는 능력일 것입니다.

"내용이 궁금하다"는 분들을 위해 구현 상세 내용은 별도의 기사로 나누어 작성할 예정입니다.

이번에는 우선 완성했다!라는 결과 보고였습니다.

기술적인 면이 궁금하신 분들은 꼭 팔로우하고 기다려 주시면 감사하겠습니다.

프로그래밍 기술이 전혀 없더라도, Claude Code와 협력한다면,

실시간 대전·일본어 대응·관리 화면·SEO까지 갖춘 제대로 된 서비스를 무료로 공개할 수 있었습니다.

"해보고 싶지만 할 수 있을까?"라고 생각하는 분일수록 꼭 한 번 시도해 보셨으면 합니다.

완성된 게임은 여기서 플레이할 수 있습니다 → 카케루 타이핑 (https://kakeru-typing.com).

저와 마찬가지로 "만들고 싶은 것은 있지만 기술이 없는" 분들에게 첫걸음이 된다면 기쁘겠습니다.

X(구 Twitter)에서도 정보 등을 발신하고 있습니다!

꼭 팔로우해 주시면 감사하겠습니다!