|

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

🚀 바이브코딩(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]사용자 요청:

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

AI의 반응 및 작업 내용:

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

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

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

AI의 반응 및 작업 내용:

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

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

[!CAUTION]사용자 요청:

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

AI의 반응 및 작업 내용:

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

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

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

  • 기획과 피드백의 선순환: 코딩 전 구체화된 기획을 통해 초기 목표(Tkinter 버전 완성)를 100% 달성.
  • 과감한 구조 변경: 완성된 프로그램일지라도 사용자의 UX/디자인 요구를 완벽히 충족시키기 위해 플랫폼 자체를 웹 기반으로 변경.
  • 지속적 통합: 기능 추가, 디버깅, 레이아웃 확장이 하나의 끊김 없는 맥락 안에서 이루어짐.

사용자의 지속적이고 구체적인 피드백이 AI의 문제 해결 능력과 맞물려 어떻게 완성도 높은 애플리케이션으로 진화하는지를 보여주는 훌륭한 협업 모델입니다.

Similar Posts