클로드 코드 설치하기 : 개발 환경 구축부터 첫 실행까지
실습 환경 준비를 위해 두 가지 필수 도구가 필요합니다.
첫째, 노드JS(Node.js)입니다. 노드JS는 자바스크립트 실행 환경으로, 클로드 코드가 실제로 동작할 수 있는 기반을 제공합니다. 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 핵심 엔진 역할을 합니다.
둘째, 깃(Git)입니다. 깃은 버전 관리 도구로, 소스 코드의 변경 이력을 기록하고 관리하는 데 사용됩니다. 실습 과정에서 코드 수정, 되돌리기, 협업을 체계적으로 관리할 수 있게 해줍니다.
정리하면, 노드JS가 클로드 코드를 실행하는 엔진이라면, 깃은 프로젝트 전체를 관리하는 도구 상자라고 이해하면 됩니다.
클로드 코드는 터미널(Terminal)에서 실행됩니다. 여기서 터미널이란, 텍스트 명령어를 통해 컴퓨터와 상호작용하는 인터페이스 전체를 통칭하는 개념입니다. 명령프롬프트(cmd), PowerShell, Git Bash, macOS 터미널 등이 모두 여기에 포함됩니다.
명령프롬프트(cmd)는 윈도우 운영체제에서 기본으로 제공되는 터미널 중 하나입니다. 따라서 터미널이라고 해서 반드시 별도의 프로그램을 의미하는 것은 아니며, cmd 역시 터미널의 한 형태라고 이해하면 됩니다.
이 때문에 클로드 코드를 실행할 때 윈도우 환경이라면 cmd를 사용해도 되고, PowerShell이나 Git Bash를 사용해도 문제없습니다. 어떤 터미널을 선택하느냐보다 중요한 점은 Node.js가 정상적으로 설치되어 있고, 터미널에서 명령어를 실행할 수 있는 환경인지 여부입니다.
실습 기준으로 보면, 터미널 사용이 익숙하지 않은 초보자라면 cmd나 PowerShell을 사용하는 것이 가장 간단합니다. 반면, Git을 함께 활용해 버전 관리를 병행할 계획이라면 Git Bash를 사용하는 것이 이후 작업 흐름에서 더 자연스럽습니다.
명령프롬프트(cmd)에서 기본적으로 자주 사용하는 디렉터리 관련 명령어는 다음과 같습니다.
dir
mkdir temp
cd temp
cd ../dir: 현재 위치한 디렉터리의 파일과 폴더 목록을 확인합니다.mkdir temp:temp라는 이름의 새 폴더(디렉터리)를 생성합니다.cd temp: 생성한temp폴더로 이동합니다.cd ../: 현재 폴더에서 한 단계 상위 디렉터리로 이동합니다.
이러한 명령어들은 실습 환경을 구성하고 폴더 구조를 직접 관리할 때 기본적으로 사용됩니다.
클로드 코드 설치
클로드 코드는 npm(Node Package Manager)을 통해 설치합니다. npm은 Node.js 환경에서 다양한 패키지를 설치하고 관리하기 위한 패키지 관리자입니다.
설치는 터미널에서 다음 명령어로 진행합니다.
npm install -g @anthropic-ai/claude-code각 요소의 의미는 다음과 같습니다.
- npm : Node.js 패키지를 관리하는 도구
- install : 패키지를 설치하라는 명령
- -g : global 옵션으로, 시스템 전체에서 명령어를 사용할 수 있도록 설치
- @anthropic-ai/claude-code : 설치할 클로드 코드 패키지 이름
설치가 완료되면 터미널에서 claude 명령어를 입력해 클로드 코드를 실행할 수 있습니다.
아니 이럴수가! 명령프롬프트 주제에 이렇게 귀여워도 되나요?
명령어들이 굉장히 생소하기는 하지만, 화면도 다크화면으로 설정해 놓으니까 뭔가 있어보이는 느낌.
영어로 치면 더 있어보이겠지만, 능력밖이니 한글로 칩니다.
웹에서 클로드를 사용하는 것과 비교했을 때, 터미널에 설치해 사용하는 클로드 코드의 가장 큰 장점은 ‘개발 환경과의 밀착도’입니다.
터미널에서 실행되는 클로드 코드는 현재 프로젝트 폴더와 파일 구조를 그대로 인식합니다. 그래서 코드 파일을 열어보거나, 수정 제안을 바로 적용하고, 프로젝트 맥락을 유지한 채 작업을 이어갈 수 있습니다. 웹 환경처럼 파일을 하나씩 복사해서 붙여넣을 필요가 없습니다.
또한 터미널 명령과 자연스럽게 연결됩니다. Git 명령어로 현재 변경 사항을 확인한 뒤, 클로드에게 코드 리뷰나 수정 방향을 요청하는 식의 흐름이 가능합니다. 코드 작성, 수정, 버전 관리가 한 공간에서 이어지기 때문에 작업 속도가 빨라집니다.
로컬 환경에서 동작한다는 점도 장점입니다. 웹 브라우저에 의존하지 않고, Node.js 기반의 개발 환경 안에서 실행되기 때문에 스크립트 실행, 패키지 구조 이해, 설정 파일 분석 같은 작업에 특히 유리합니다.
정리하면, 웹에서의 클로드가 질문과 답변 중심의 도구라면, 터미널에서 사용하는 클로드 코드는 실제 개발 흐름 안에 들어와 함께 작업하는 도구에 가깝다고 볼 수 있습니다.
손글씨 인식 프로그램 만들기 : MNIST 데이터세트와 딥러닝 실습
MNIST 데이터 세트는 Modified National Institute of Standards and Technology의 약자로, 손글씨 숫자 인식 문제를 위해 만들어진 대표적인 공개 데이터세트입니다.
전체 이미지 수는 70,000장으로 구성되어 있으며, 이 중 훈련 데이터 60,000장, 테스트 데이터 10,000장으로 나뉩니다. 각 이미지는 28×28 픽셀 크기의 흑백 이미지로, 픽셀 하나하나가 숫자의 형태 정보를 담고 있습니다. 데이터에 포함된 숫자는 0부터 9까지의 손글씨 숫자이며, 다양한 필체와 굵기, 왜곡이 포함되어 있어 기본적인 이미지 분류 문제를 학습하기에 적합합니다. MNIST 데이터세트는 1998년에 공개되었습니다.
이 데이터세트는 오랫동안 컴퓨터 비전과 머신러닝 분야의 표준 데이터세트로 사용되어 왔으며, 특히 신경망과 딥러닝 구조를 처음 학습할 때 가장 많이 활용됩니다. 그래서 MNIST는 딥러닝 입문자들이 가장 먼저 접하는 데이터세트로 자리 잡고 있습니다.
터미널은 여러 가지 방법으로 특정 폴더 경로에서 바로 실행할 수 있습니다. 실습에서는 아래 방법 중 편한 방식을 사용하면 됩니다.
첫 번째 방법은 명령프롬프트에서 직접 경로 이동하는 방식입니다.
명령프롬프트(cmd)를 실행한 뒤 cd 명령어를 사용해 작업할 폴더로 이동하고, 그 상태에서 명령어를 실행합니다. 예를 들어 프로젝트 폴더로 이동한 후 claude 명령어를 입력하면 해당 경로 기준으로 클로드 코드가 실행됩니다.
두 번째 방법은 폴더에서 마우스 우클릭 → 터미널 실행 방식입니다.
작업하려는 폴더에서 마우스 오른쪽 버튼을 클릭한 뒤, “터미널에서 열기” 또는 “여기서 PowerShell 열기”와 같은 메뉴를 선택하면 해당 경로가 바로 터미널의 기준 위치가 됩니다. 경로 이동 과정이 필요 없어 가장 직관적인 방법입니다.
세 번째 방법은 폴더 경로창에 cmd 입력 방식입니다.
탐색기에서 원하는 폴더로 이동한 후, 상단 경로 표시줄을 클릭하고 cmd를 입력하면 해당 폴더 위치에서 명령프롬프트가 바로 실행됩니다.
이처럼 터미널은 반드시 한 가지 방식으로만 접근해야 하는 것이 아니라, 작업 흐름에 맞게 가장 편한 방법을 선택해 사용하면 됩니다.
BAT 파일은 윈도우에서 사용하는 배치 파일(Batch File)로, 여러 개의 명령프롬프트(cmd) 명령어를 한 번에 순서대로 실행하기 위해 만든 스크립트 파일입니다. 확장자는 .bat입니다.
BAT 파일 안에는 평소 cmd에서 직접 입력하던 명령어들을 그대로 작성할 수 있습니다. 이 파일을 실행하면, 작성된 명령어들이 위에서 아래 순서대로 자동 실행됩니다. 반복적으로 수행해야 하는 작업을 한 번에 처리할 때 주로 사용됩니다.
숫자 인식 프로그램을 윈도우 탐색기에서 클릭해서 실행할 수 있게 해 줘.
해당 프롬프트를 실행하니 작업중인 폴더에 프로그램일 생성되었습니다. 그러고 나니 자동으로 프롬프트가 생성되어 있더군요.
바탕화면에 바로가기 만들어 줘
내친김에 실행해봤는데 토큰 겁나 잡아먹은 것 같지만은, 어쨌든 성공입니다.
CLAUDE.md로 프로그램 확장하기 : 프로젝트 설정과 계층적 관리
CLAUDE.md 파일의 역할
CLAUDE.md 파일은 프로젝트의 구조, 코딩 스타일, 핵심 명령어 등을 정리해 둔 설정용 문서 파일입니다. 클로드 코드를 실행하면 자동으로 읽어 프로젝트 맥락으로 사용됩니다.
주요 역할은 다음과 같습니다.
- 맥락 유지
세션이 끊기더라도 프로젝트의 목적과 구조를 빠르게 복원할 수 있습니다. - 규칙 저장
코딩 스타일, 네이밍 규칙, 프로젝트 공통 규칙을 기록해 일관성을 유지합니다. - 자동 로드
클로드 코드 시작 시 별도 지시 없이 자동으로 읽어들입니다.
불필요한 설명은 토큰 낭비가 되므로, 간결하고 명확하게 작성하는 것이 중요합니다.
/init/init는 현재 프로젝트 기준으로 CLAUDE.md 파일을 생성(초기화)하는 명령어입니다.
이 명령을 실행하면 클로드 코드가
- 프로젝트 폴더 구조를 파악하고
- 기본적인 작업 맥락을 정리한
- 초기
CLAUDE.md파일을 자동으로 생성합니다.
즉, /init는 클로드 코드에게 “이 프로젝트의 기준 문서를 만들어라”라고 지시하는 시작 명령어라고 이해하면 됩니다. 이후에는 생성된 CLAUDE.md를 프로젝트 성격에 맞게 간결하게 수정·보완하며 사용하면 됩니다.
# 앞으로 만드는 모든 파일은 날짜와 시간을 주석으로 표시해 줘.
이 문장은 클로드에게 적용할 작업 규칙을 #으로 선언한 것입니다. 즉, 명령 실행이 아니라 맥락·규칙 지시로 인식됩니다.
→ 앞으로 생성하는 모든 파일의 상단에 날짜와 시간을 주석 형태로 포함하라는 규칙입니다.
손글씨 인식 프로그램을 웹 버전과 데스크톱 버전으로 나누어 개발하고 싶어. web_version과 desktop_version 폴더를
만들고, 각 폴더에 해당하는 CLAUDE.md 파일도 생성해 줘.
벌써 많이 어려워진 느낌입니다.
AI가 발전할수록 프로그래밍 언어를 몰라도 개발을 할 수 있다, 노코딩 어쩌고 많이 나오는데,
기본 프로그래밍 지식 없이는 너무 낯설어서 쉽게 도전하기가 어려운 것 같습니다.
이렇게 AI의 도움을 받아서 구현한다고 하더라도 수정하고 발전시키려면 어느정도의 지식은 필요한 것 아닌가 싶구요.
비전공자인 제가 이런 개발관련 기초지식들을 쌓는 이유가 이런 사회에 뒤쳐지지 않기 위함이거든요.
아무튼 이런 사담을 하는 와중에 클로드는 열심히 일해서 웹 버전까지 구현했습니다.
스벅에서 작업중이라서 네트워크 접속관련된 창이 떴고 보안이 불안해져서 챗GPT에게 물어봤습니다.
먼저 공용 네트워크 관련 위험성부터 보면, localhost는 내 PC 자기 자신만을 의미하는 주소입니다. 외부 네트워크나 다른 사람이 접근할 수 있는 주소가 아니기 때문에, 카페·회사 같은 공용 네트워크에 연결되어 있어도 외부에서 해당 서비스에 접속할 수는 없습니다. 즉, 별도로 포트를 외부에 열지 않는 이상 보안 문제는 거의 없습니다.
그렇다면 왜 http://localhost:8000에 접속해야 할까요?
이는 현재 내 컴퓨터에서 웹 서버가 8000번 포트로 실행 중이라는 의미입니다. 브라우저로 해당 주소에 접속하면, 서버가 정상적으로 실행되고 있는지 확인하고 웹 UI, 결과 화면, 대시보드, 테스트 페이지 등을 브라우저 환경에서 직접 확인할 수 있습니다.
정리하면,
localhost:8000은 내 PC 내부 전용 주소- 공용 네트워크 사용 여부와는 직접적인 보안 연관 없음
- 접속 목적은 로컬에서 실행 중인 프로그램을 브라우저로 확인하기 위함
핵심 키워드 정리
- 클로드 코드 : 터미널에서 AI와 대화하며 파일 생성/수정하는 도구
- 노드JS/깃 : 실행 환경(노트JS)과 버전 관리 도구(깃)
- MNIST : 손글씨 숫자 7만 장의 표준 데이터세트
- 배치 파일 : 윈도우 명령어를 모아 실행하는 .bat 파일
- CLAUDE.md : 프로젝트 설정 파일, 시작 시 자동 로드
- /init : CLAUDE.md 자동 생성 초기화 명령어
- # 키 : CLAUDE.md에 규칙 빠르게 추가하는 단축키
- 계층적 구조 : 루트에 공통, 하위에 특화 규칙 분리 관리
🚶기본 미션(필수)
PROJECT 3. 손글씨 인식 프로그램 만들고 캡처하기
⠀
🏃추가 미션(선택)
PROJECT 4. 손글씨 인식 프로그램 웹 버전으로 확장하고 캡처하기
웹버전 손글씨 인식프로그램이 작동을 안해서 F12를 눌러 개발자모드로 접속했습니다.
오류가 떴으나 저는 이걸 해결할 방법이 없으므로 클로드 프롬프트에 고대로 복사 붙여넣기 했더니 수정을 해줍니다!
그래도 너무 느리고 대기상태가 지속되어서 컴퓨터 사양 문제인가 했더니 실시간 훈련방식이 문제라고 합니다.
오늘의 토큰은 전부 수정하더라도 이 문제를 꼭 해결하리라!
pre-trained 모델을 로드하는 방식으로 수정해줘
이런! 토큰 다써버렸습니다… 4시 지나고 다시 시도해보기로 하죠…
“Model loaded! Ready to recognize digits.” 메세지가 잘 표시되는군요!
만족만족 대만족!
성공하고 나니까 앓던 이가 쑥 빠진 느낌입니다!
AI 안쓰고 직접 코딩을 깎는 개발자 분들은 대체 어떻게 계속 하실 수 있는거죠? 홧병날 것 같은데…
아무튼 뭔가 성장한 것 같으면서도 아직 아무것도 할 줄 모르는 그런 상태되겠습니다.
