혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch3

AI가 뚝딱 만들어준 손글씨 인식  웹페이지 1장: 클로드 코드로 구현하기

Chapter 03이 되어서야 드디어 클로드 코드(Claude Code)를 사용하여 학습을 진행합니다. 주제는 바로 손글씨 숫자 인식 웹페이지입니다. 다 만들어진 결과물을 살펴보니 CNN 모델을 갖다 쓰고, 그걸 Tkinter 기반의 GUI 앱으로 만드는 작업입니다.

"이거 만들어줘!" 한마디에 시작된 마법

저는 클로드 코드에게 아주 간단하지만 명확한 프롬프트를 던졌습니다.

손글씨 숫자를 입력하면 이것을 인식하는 앱을 만들어서 실행해주세요. 모든 코드와 주석을 영어와 한글로 작성해 주세요.

이 한 문장으로 환경 설정부터 모델 학습, GUI 개발까지 다 해줄 수 있을까? 그런데 클로드 코드는 차근차근 작업을 시작합니다.

1. 환경 점검: 먼저 제 시스템에 PyTorch나 TensorFlow 같은 딥러닝 프레임워크가 설치되어 있는지 확인하더라고요. 역시 기본이 중요하죠!
2. 코드 생성: train_model.py 파일로 CNN 모델 학습 스크립트를, digit_app.py 파일로 Tkinter GUI 앱 코드를 뚝딱 작성했습니다. 무려 300라인이 넘는 코드들을 몇 분 만에 써 내려가는데, 저 정말 입이 떡 벌어졌습니다.
3. 모델 학습 및 실행: MNIST 데이터셋을 자동으로 다운로드하고, CNN 모델을 5 에포크 학습시킨 후, digit_app.py를 실행해서 GUI 앱을 띄웠습니다.

 

결과는?

앱이 실행된 후 클로드 코드가 요약해준 내용은 더 놀라웠습니다.

• 모델: CNN (Conv x2 + FC x2)
• 학습 데이터: MNIST (60,000장)
• 테스트 정확도: 무려 99.06%!
• 학습 에포크: 5회

"생각보다 훨씬 잘 하는데?!" 솔직히 말하면 직접 코드를 짜도 99% 넘기기가 쉽지 않은데, 클로드 코드가 알아서 뚝딱 해내니 기분이 묘하더라고요. GUI 앱도 깔끔하게 잘 동작하고, 제가 마우스로 숫자(0~9)를 그리면 실시간으로 인식해서 확률을 보여주는 모습이 정말 인상 깊었습니다. 이건 단순한 코딩 도구를 넘어, 아이디어를 현실로 만들어주는 강력한 파트너라는 확신이 들었어요.

이래서 계속 공부하게 되네요. 개발은 정말 끝이 없는 매력이 있는 것 같습니다!

그리고 생성된 구조에 대해서도 설명을 해주기 때문에 실제로 구현된 산출물을 잘 이해하는데 큰 도움이 됩니다.

```
Study-01/
├── CLAUDE.md
├── desktop_version
├── web_version
│   ├── CLAUDE.md
└── digit_recognition/
```

 

클로드 코드에 어떤 기능이 있는지 궁금하다면 그냥 물어봐도 됩니다.