3주차. - 손글씨 인식 프로그램 만들고 캡처하기

Claude-cli는 유료계정을 사용해서... 어렵게 Gemini-Pro 1년 결재한 사람은 추가로 Claude 결재를 못하겠군요..

Claude가 개발용도로 많이 쓰이는 것은 알겠지만,, 돈 앞에서는 갈등과 포기하게 되는 요인이기도 하네요

 

이번주는 gemini-cli로 실습을 완료... 마지막 6주까지 버틸수 있을까??? .... 있겠죠!!!!

(gemini-cli로 사용되는 프롬프트는 도서의 claude-cli에서 사용되었는 프롬프트와 동일합니다.)

gemini-cli나 claude-cli나 설치나 사용법은 똑같네요... 하기 건강관리 AI를 GPT가 출시하자 앤트로픽, 구글도 출시하네

• 1/8 오픈AI, '챗GPT 건강'  https://www.techm.kr/news/articleView.html?idxno=148386
• 1/12 앤트로픽, 챗GPT 이어 건강 관리 AI 서비스 https://www.techm.kr/news/articleView.html?idxno=148386
• 1/15 구글, CT·MRI 읽는 AI 의사 공개, https://zdnet.co.kr/view/?no=20260114213716
• 1/15,바이브 코딩 확산, 보안에는 주의 https://www.cio.com/article/4117131

 

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

 

실습 2.  손글씨 인식 프로그램을 웹 버전과 데스크톱 버전으로 나누어 개발하고 싶어. web_version과 desktop_version 폴더를 만들고, 각 폴더에 해당하는 CLAUDE.md 파일도 생성해 줘.

 

--> 웹 버전이 잘 안되어서... web_version 디렉토리에서 재시작후 다음 프롬프트를 사용

손글씨 인식 프로그램을 웹버전으로 만들고 싶어

 

gemini-cli와 claude-cli를 비교하고, clude-cli는 혼공 동영상으로 사용법을 확인했으니,.. gemini-cli 사용법을 확인해보자

https://hoyokin.tistory.com/70

gemini-cli 기초

 

gemini는 gemini이고,,, 이번주 claude 정리

 

[초급] 개발 환경 설정 및 첫 AI 프로그램 실행

이 단계에서는 클로드 코드(Claude Code)를 설치하고, 딥러닝의 기본 예제인 MNIST 데이터를 활용해 기본적인 손글씨 인식 프로그램을 생성하고 실행하는 것을 목표로 합니다.

• 레슨 (Lesson)

    ◦ 개발 도구 설치: 윈도우 환경에서 노드(Node.js)와 깃(Git)을 설치하여 클로드 코드가 작동할 기반을 마련합니다.

    ◦ 터미널 기초: 명령 프롬프트(CMD)를 열고 폴더 생성(mkdir), 이동(cd), 목록 확인(dir) 등의 기본 명령어를 익힙니다.

    ◦ 클로드 코드 시작: npm install -g ... 명령어로 클로드 코드를 설치하고, 계정 연동(라이트/다크 모드, 과금 방식 선택) 및 실행 방법을 학습합니다.

    ◦ 손글씨 인식 원리: 0부터 9까지의 숫자를 예측하는 '엠니스트(MNIST)' 데이터셋과 딥러닝 학습 모델의 개념을 이해합니다.

• 실습 (Practice)

    ◦ 바탕화면에 '바이브 코딩' 및 'Study01' 폴더를 생성하고 터미널에서 해당 위치로 이동합니다.

    ◦ 터미널에서 claude 명령어를 입력하여 클로드 코드를 실행하고 로그인을 완료합니다.

• 프로젝트 (Project): "내 컴퓨터가 숫자를 읽다"

    ◦ 프롬프트를 입력하여 엠니스트 데이터를 다운로드하고 학습시킨 뒤, 마우스로 쓴 숫자를 인식하는 파이썬 코드를 생성합니다.

    ◦ 생성된 handwritten_digit_recognition.py 파일을 실행하여 실제 숫자를 쓰고 인식률(%)을 확인합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 터미널에서 npm 명령어로 클로드 코드 설치가 완료되었는가?

    ◦ [ ] 클로드 코드가 실행되어 대화형 인터페이스가 열리는가?

    ◦ [ ] 파이썬 실행 창에 숫자를 썼을 때 올바르게 인식(예: 3을 쓰면 3으로 예측)하는가?

--------------------------------------------------------------------------------

[중급] 자동화 및 프로젝트 체계화 (CLAUDE.md)

매번 터미널 명령어를 입력하는 번거로움을 없애고, CLAUDE.md 파일을 통해 프로젝트의 규칙과 맥락을 관리하는 방법을 배웁니다.

• 레슨 (Lesson)

    ◦ 배치 파일(Batch File)의 이해: 윈도우에서 여러 명령어를 한 번에 실행하는 .bat 파일의 개념과 자동화 원리를 배웁니다.

    ◦ CLAUDE.md 활용: 프로젝트의 구조, 코딩 스타일, 핵심 명령어를 문서화하여 클로드 코드가 자동으로 맥락을 이해하도록 하는 설정 파일의 중요성을 학습합니다.

    ◦ 메모리 관리: /init 명령어로 파일을 생성하고, # 명령어를 사용해 사용자 메모리(User Memory)와 프로젝트 메모리(Project Memory)에 규칙을 추가하는 법을 익힙니다.

• 실습 (Practice)

    ◦ 클로드 코드에 요청하여 프로그램을 더블 클릭만으로 실행할 수 있는 .bat 파일을 생성합니다.

    ◦ /init 명령어를 사용해 CLAUDE.md 파일을 생성하고, "모든 파일에 날짜와 시간을 주석으로 표시해 줘"와 같은 규칙을 # 명령어로 추가해 봅니다.

• 프로젝트 (Project): "클릭 한 번으로 실행되는 앱 만들기"

    ◦ 터미널을 거치지 않고 윈도우 탐색기에서 아이콘을 더블 클릭하여 바로 손글씨 인식 프로그램을 실행할 수 있는 환경을 구축합니다.

    ◦ 프로젝트 진행 상황과 아키텍처 정보가 CLAUDE.md에 자동 저장되어 연속성 있게 작업합니다.

• 체크리스트 (Checklist)

    ◦ [ ] .bat 파일을 더블 클릭했을 때 프로그램이 정상적으로 실행되는가?

    ◦ [ ] CLAUDE.md 파일이 생성되었으며, 프로젝트의 개요(Overview)와 사용된 명령어(Commands)가 기록되어 있는가?

    ◦ [ ] 새로 생성되는 코드 파일에 설정한 규칙(예: 날짜 주석)이 적용되었는가?

--------------------------------------------------------------------------------

[고급] 웹 버전 확장 및 계층적 구조 관리

데스크톱 애플리케이션을 웹 브라우저 기반으로 확장하고, 폴더별로 독립적인 환경을 구축하여 관리하는 고급 기술을 다룹니다.

• 레슨 (Lesson)

    ◦ 웹 아키텍처 확장: 로컬 컴퓨터(내 컴퓨터)에서만 도는 프로그램을 웹 서버와 브라우저 환경으로 옮기는 과정을 이해합니다.

    ◦ 계층적 프로젝트 관리: '데스크톱 버전'과 '웹 버전'으로 폴더를 분리하고, 각 폴더마다 별도의 CLAUDE.md를 두어 관리하는 방법을 배웁니다.

    ◦ 로컬 호스트와 포트: localhost(내 컴퓨터)와 8000번 포트 등의 네트워크 주소 개념을 익힙니다.

• 실습 (Practice)

    ◦ "웹 버전과 데스크톱 버전으로 나누어 개발하고 싶어"라고 요청하여 폴더 구조를 자동으로 재편합니다.

    ◦ 웹 버전 폴더로 이동하여 웹 서버를 실행하고, 브라우저 주소창에 localhost:8000을 입력하여 접속합니다.

• 프로젝트 (Project): "브라우저에서 동작하는 AI 서비스"

    ◦ 웹 브라우저 상에서 마우스로 숫자를 입력하고 결과를 확인하는 웹 애플리케이션을 완성합니다.

    ◦ 데스크톱 버전과 웹 버전이 각각 다른 CLAUDE.md 설정에 따라 독립적으로 관리되도록 구조화합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 프로젝트 폴더가 'Web Version'과 'Desktop Version'으로 분리되었는가?

    ◦ [ ] 웹 브라우저가 열리고 손글씨 입력 UI가 나타나는가?

    ◦ [ ] 웹 상에서 입력한 숫자가 정확히 인식되는가?

    ◦ [ ] 각 폴더 내부에 서로 다른 내용을 담은 CLAUDE.md 파일이 각각 존재하는가?