관리 메뉴

애독자's 공부방

[혼공바] 3주차 _ 혼자 공부하는 바이브 코딩 with 클로드 코드 본문

바이브코딩/혼공학습단 챌린지

[혼공바] 3주차 _ 혼자 공부하는 바이브 코딩 with 클로드 코드

애독자 2026. 1. 24. 04:13
728x90

■ 3주 차 미션

주차별 진도에 따라 주어진 숙제와 한 주간 공부한 내용을 정리하여 블로그에 기록 (전체 공개)


 3주 차 : Ch 03. 효과적인 프롬프트로 AI 200% 활용하기

 

  • 📘공부한 내용
    • 손글씨 인식: 사람이 쓴 글자나 숫자를 컴퓨터가 자동으로 판독해 디지털 데이터로 변환하는 AI 기술
    • MNIST: 0부터 9까지 손으로 쓴 숫자 이미지 7만 장으로 구성된 데이터세트로, 딥러닝과 컴퓨터 비전 분야에서 가장 널리 쓰이는 학습용 자료
    • 배치 파일: 윈도우 운영체제에서 여러 명령어를 순서대로 기록해 두었다가 실행 시 자동으로 처리하는 텍스트 파일
    • 클로드 코드: 터미널에서 실행되는 AI 기반 코딩 도구로 파일을 직접 생성하고 수정하며 프로젝트를 관리할 수 있는 강력한 개발 파트너
      • 터미널: 명령어를 입력하여 컴퓨터와 직접 소통하는 텍스트 기반 인터페이스로, 클로드 코드가 실행되는 환경
      • 명령 프롬프트: 윈도우의 기본 터미널 환경
    • /init: 현재 폴더를 분석해 CLAUDE.md 파일을 자동 생성하는 초기화 명령어
      • 자동 생성 명령어 대신, Gemini에게 현재 폴더를 읽어서 가이드 파일을 만들라고 지시
        • "현재 폴더의 파일 구조와 코드를 분석해서, 앞으로 우리가 협업할 때 지켜야 할 규칙과 프로젝트 정보를 담은 GEMINI.md 파일을 작성해줘."
    • CLAUDE.md: 프로젝트의 구조, 규칙, 명령어 등을 기록해 클로드 코드가 실행 시 자동으로 읽는 설정 파일
      • 프로젝트 루트에 GEMINI.md 파일을 만들고, 프로젝트 구조, 코딩 스타일, 주로 쓰는 라이브러리 정보 기록
        • Gemini CLI를 실행할 때 이 파일을 먼저 읽게 하거나, 대화 시작 시 "이 프로젝트의 규칙은 GEMINI.md를 참고해"라고 입력
    • #키: 대화 중 입력하면 현재 작업의 맥락이나 규칙을 CLAUDE.md 파일에 빠르게 추가하는 지시어 
      • Gemini CLI에서 "방금 말한 내용을 앞으로의 코딩 규칙에 추가해줘"라고 자연어로 말해도, 이해하고 다음 코드 생성부터 바로 반영
    • 계층적 구조: 루트에 공통 규칙을 두고, 하위 폴더마다 특화 규칙을 나눠 적용하는 관리 방식

 

 

  • 🚶기본 미션(필수)
    • PROJECT 3. 손글씨 인식 프로그램 만들고 캡처하기

 

□ 이번 미션은 Gemini CLI를 활용: 왜 Gemini인가?

  - CLI 접근성: Claude의 CLI는 유료 플랜 위주로 운영되지만, Gemini는 무료 티어에서도 제공됩니다.

  - 구글 생태계의 장점: 이번 실습에서 사용한 TensorFlow는 구글의 오픈소스로, 같은 구글 계열인 Gemini에서 오류 해결이나 성능 개선에 있어서 정확하고 최적화된 가이드를 제공해 주었습니다.

  - 학습 연속성: 할당량 내에서 각각 로컬 및 웹 코드 생성이 가능했습니다. 클로드와의 차이점은 학습한 내용에 추가했습니다.

    . 환경: Windows 11, Python 3.11, Gemini CLI

    . 사용 프레임워크: TensorFlow / Keras

필요 모듈이 없어 오류가 발생하니, 스스로 설치하여 해결

 

 

  • 🏃추가 미션(선택)
    • PROJECT 4. 손글씨 인식 프로그램 웹 버전으로 확장하고 캡처하기

예상치 표시 개선 버전

 

 

□ 웹 버전의 핵심 기능: 바이브 코딩 with Gemini CLI

  - 브라우저 독립 실행: 별도의 파이썬 설치 없이 웹 브라우저(localhost)만으로 인공지능이 구동됩니다.

  - 확률 시각화: 처음에는 단순히 예상값만 출력했지만, 기능을 개선하여 각 숫자별 예상치를 실시간 막대그래프로 표시했습니다.

  - 인식률이 좋지는 않지만 빠르게 잘 동작했습니다.

    . 언어: HTML5, CSS, JavaScript

    . 엔진: TensorFlow.js (브라우저 기반 딥러닝 라이브러리)

 

초기 버전

 


 

728x90