바이브코딩(Vibe Coding) 교육용 개발 요약서: 웹 기반 타자 연습 프로그램

Gihyun Park
코딩
2026년 5월 1일

Table Of Contents

🚀 바이브코딩(Vibe Coding) 교육용 개발 요약서: 웹 기반 타자 연습 프로그램

본 문서는 사용자의 요구사항(프롬프트)과 AI의 분석 및 구현 과정을 정리한 문서입니다. 어떻게 사용자의 의도가 AI를 통해 실제 동작하는 소프트웨어로 발전해 나가는지 파악할 수 있는 훌륭한 교육 자료입니다.

화면을 녹화하며 작업을 하여 캡쳐 화면을 추가하고자 했지만, 윈도우즈의 캡쳐 프로그램이 중간에 멈춰버려 캡쳐 화면을 추가하지 못해 아쉬움이 남습니다.
타자연습 프로그램 제작은 윈도우즈 10 PC에서 Google Antigravity를 이용해 Python 환경으로 작업하였습니다.
참고로 저는 프로그래밍에 대해 문외한이고, 바이브 코딩으로 조금씩 배워가고 있습니다.

1단계: 기획 및 초기 데스크탑 애플리케이션(Tkinter) 완성

[!NOTE] 사용자 최초 요청: “TypingMaster 폴더에 Python 환경으로 타자연습 프로그램을 만들어줘.”

AI의 반응 및 작업 내용 (기획과 피드백의 선순환):

초기 기획서(Implementation Plan) 작성: 무작정 코딩을 시작하지 않고, 먼저 타자 연습 프로그램의 방향성과 구조를 담은 구현 계획서(기획서) 를 작성하여 사용자에게 리뷰를 요청했습니다.
사용자 피드백 반영 (기획 고도화): 사용자가 기획서를 검토한 후, “자소 연습도 포함해줘. 기본자리 연습부터 단자음, 단모음, 쌍자음, 겹모음 등을 연습할 수 있게 해줘. 실제 키보드 배열 그림과 손의 위치가 표시되도록 해줘.” 라는 구체적인 코멘트를 달아 피드백을 제공했습니다.
파이썬 기반 앱 완성: 피드백을 수용하여 기획서를 고도화하고, 파이썬 내장 GUI 라이브러리인 tkinter를 사용하여 윈도우 환경에서 독립적으로 실행되는 타자 연습 프로그램(자리 연습, 단어/문장 연습, 산성비 게임 포함)을 완전히 구현해 냈습니다.

2단계: 중대한 피벗(Pivot) 결정 및 웹 기반 전면 개편

[!WARNING] 사용자 추가 요청: “한국어 연습이 좀 매끄럽지 않아. 한글 입력 형식을 확인하고 연습 화면에 정확히 바로 입력되도록 수정해줘. 디자인이 너무 단순해 보여. 글래스모피즘 스타일로 예쁘게 표현해줘.”

AI의 반응 및 작업 내용 (과감한 아키텍처 변경):

한계점 인식: 완성된 Tkinter 앱은 윈도우의 한글 조합(IME) 처리 한계로 인해 타이핑이 씹히는 현상이 있었으며, 최신 트렌드인 화려한 글래스모피즘(Glassmorphism) UI를 구현하는 데 기술적인 제약이 컸습니다.
웹 기반 전환(Migration) 제안 및 실행: 이를 극복하기 위해 AI는 단순 코드 수정이 아닌, 파이썬은 로컬 웹 서버로만 사용하고 실제 구동 화면은 HTML/CSS/JS의 웹 기반으로 완전히 뜯어고치는 과감한 피벗(Pivot) 을 제안했습니다.
결과: 사용자의 승인(Approve) 후 기존 파이썬 UI 코드를 삭제하고, 브라우저의 강력한 렌더링을 활용해 한글 입력 지연을 완벽히 해결하고 아름다운 글래스모피즘 디자인을 성공적으로 적용했습니다.

3단계: UX/UI 개선 및 학습 편의성 증대

[!IMPORTANT] 사용자 요청:
화면 공간 확보를 위해 좌측 메뉴를 상단으로 이동해 주세요.
자소 연습이 초보자에게 어려우므로 ‘기본자소, 쌍자음, 겹모음, 모두’ 4단계로 나누어 주세요.
오타 발생 시 텍스트 메시지 대신 화면의 가상 키보드에서 해당 키가 빨간색으로 깜빡이게(하이라이트) 해주세요.

AI의 반응 및 작업 내용:

메뉴 레이아웃 변경: 기존의 좌측 사이드바 메뉴를 제거하고, 상단 가로 형태의 네비게이션 바로 변경하여 타이핑 및 게임 영역의 가로 공간을 크게 확보했습니다.
데이터 구조 개편: JavaScript의 배열 데이터를 수정하여 한글 자소를 카테고리별로 분리하고, 화면에 난이도 선택 버튼을 추가했습니다.
시각적 피드백 강화: 오타 메시지를 출력하던 로직을 수정하여, 사용자가 잘못 누른 물리적 키의 코드를 추적하고 해당 가상 키보드 요소에 붉은색 오류 CSS 애니메이션 클래스를 추가하는 방식으로 직관성을 극대화했습니다.

4단계: 로컬 환경에서의 테스트 및 실행

[!TIP] 사용자 요청: “실행해줘.”

AI의 반응 및 작업 내용:

실행 환경 파악 및 백그라운드 실행: 작업 디렉토리에 내장된 main.py 파일이 로컬 웹 서버를 구동하고 브라우저를 띄우는 역할을 한다는 것을 파악하고, 백그라운드 터미널 명령어를 통해 사용자의 개입 없이 자동으로 브라우저에 타자 연습 프로그램이 띄워지도록 조치했습니다.

5단계: 와이드 해상도(1920x1080) 맞춤형 최적화

[!CAUTION] 사용자 요청:
상단 메뉴를 ‘한/영 전환’ 버튼 바로 옆으로 배치해 주세요.
자소 연습의 서브 메뉴(난이도 선택)를 다시 왼쪽 사이드바로 빼주세요.
1920x1080 해상도 모니터에서 화면이 잘리지 않도록 꽉 차게 배치해 주세요.

AI의 반응 및 작업 내용:

헤더 및 사이드바 재배치: 네비게이션 바를 최상단 헤더(Header) 영역 안으로 이동시켰고, 자소 연습 뷰의 레이아웃을 다시 가로 분할(Row)로 변경하여 좌측에 난이도 선택 사이드바를 분리 배치했습니다.
반응형 컨테이너 확장: 기존 1200px로 제한되어 있던 최대 너비를 1600px로 대폭 확장하여 1920x1080 해상도의 쾌적함을 살리면서도 콘텐츠가 잘리거나 어색해지지 않도록 비율을 재조정했습니다.

💡 바이브코딩(Vibe Coding) 인사이트

이 과정을 통해 알 수 있는 것은, 사용자가 복잡한 코드를 몰라도 “목적(What)” 과 “느낌/형태(How it looks/feels)” 만 명확히 지시하면, AI가 기술적 한계를 극복하기 위해 아키텍처 변경(Pivot)까지 스스로 제안하고 수행한다는 점입니다.