[무료] 코딩 몰라도 시작하는 '클로드 코드' 입문 가이드

코딩 몰라도 괜찮아, 클로드 코드로 AI 비서 들이는 법

내 컴퓨터에 클로드 코드 설치하기

클로드 코드란?

클로드 코드는 앤트로픽(Anthropic)에서 만든 에이전트형 인공지능 도구로, 사용자의 터미널 환경에서 직접 작동한다는 특징이 있습니다. 사용자 터미널에 접근할 수 있다는 것은 각종 인증 정보를 얻을 수 있다는 것이며, 이러한 특징 외에도 사용자 고유의 개발 환경과 도구를 함께 이용할 수도 있습니다.

따라서 웹에서 이용할 수 있는 ChatGPT와는 다르게 물어보고 대답하는 과정을 연결하여 코드 편집, 오류 수정, 명령 실행, 커밋 생성, 테스트 실행 등의 전체 개발 워크플로를 완전히 자동화할 수 있습니다.

지금까지 사용되었던 ChatGPT나 커서 AI는 보조적인 역할에 머물러 있었습니다. 하지만 클로드 코드는 터미널이라는 작업 도구에 직접 통합됨으로써, 단순한 보조자가 아니라 주도적인 역할을 담당하는 인공지능 에이전트로 활용할 수 있는 길을 열었습니다.

1️⃣ 설치 전 확인할 것들

클로드 코드를 설치하기 위해서는 먼저 다음 조건을 확인해야 합니다.

클로드 코드는 macOS와 윈도우에서 모두 사용 가능하지만, 개인적으로는 macOS 사용을 추천합니다. 윈도우 같은 경우에는 WSL2를 사용해서 새로운 환경을 구성해야 하고, 디렉터리에 접근하는 구조가 유닉스/리눅스와 다르기 때문입니다. 따라서 이 책은 macOS를 기준으로 하며, 윈도우 사용을 희망하는 독자분들을 위해 윈도우에서 설치하는 방법도 함께 소개합니다.

2️⃣ 요금제 선택하기

클로드 코드는 유료 서비스이기 때문에 필요한 요금제를 선택해서 구매해야 합니다. 요금제는 크게 다음과 같이 구분됩니다.

우리는 클로드 코드를 사용할 것이므로 '구독 플랜 요금제' 또는 'API 사용량 기반 요금제'를 선택해야 하는데, API 사용량 기반은 폭넓은 모델을 자유롭게 쓸 수 있고, 쓰는 만큼 낸다는 장점이 있으나 총 금액을 예측하기 어렵고 초반에는 절약하며 쓰는 법을 알기 어렵기 때문에 구독 플랜 요금제를 선택하겠습니다.

구독 플랜 요금제로는 Pro와 Max가 있는데, 4주차까지의 전체 실습 과정은 Pro 수준의 구독 플랜으로도 충분히 진행이 가능하므로 굳이 더 비싼 Max를 구독하진 않겠습니다. 또한, 마지막 선택으로 월간으로 할 것인지 연간으로 할 것인지를 선택할 수 있는데, 책의 진행만을 위해서는 월간만으로도 충분합니다. 다만 이 책을 통해 클로드 코드를 사용하게 되면, 다시 클로드 코드를 사용하기 전으로 돌아가기 어려울 것이므로, 가능하다면 Pro 연간 플랜으로 결제하는 것을 추천드립니다.

3️⃣ macOS에 클로드 코드 설치하기

자 그러면 이제 클로드 코드를 설치해 보겠습니다. macOS와 윈도우 각각에 대해 설명하므로 독자 여러분의 환경에 맞춰 진행해주세요.

① 호스트 운영 체제에 Node.js를 설치하기 위해 Node.js 내려받기 화면에 접속한 후 macOS와 nvm을 선택하고 클립보드에 복사(Copy to clipboard)를누릅니다.

② 복사한 Node.js의 설치 및 확인 스크립트를 호스트 터미널에 붙여넣습니다. 마지막에 [npm -v]로 실행되는 부분이 에러 없이 정상적으로 출력되는지 확인합니다.

* 설치 및 확인 스크립트는 위 링크 내 1번 슬라이드에서도 확인할 수 있습니다.

③ Node.js 패키지 관리자를 통해서 클로드 코드를 설치합니다.

④ 클로드 코드가 정상적으로 설치된 것을 확인하기 위해 [ claude -v ]를 실행합니다. 다음과 같이 나오면 문제없이 설치된 것입니다.

4️⃣ 클로드 코드 처음 실행하기

이제 모든 준비가 끝났습니다. 앞으로 이어질 실습 예제 파일들을 내 컴퓨터에 내려받고 클로드 코드를 실행해 보겠습니다. 

클로드 코드를 실행하면 현재 디렉터리에 접근해도 되는지 확인하고, 그곳을 작업 공간으로 삼습니다. 첫날에는 디렉터리를 따로 만들지 않고 클로드 코드를 위해 준비된 깃허브 저장소를 내려받은 후에 해당 저장소에서 작업을 진행하겠습니다.

아래 명령어를 터미널에 입력해 예제 파일을 내려받고 클로드 코드를 실행합니다. week1 폴더가 지금부터 실습할 공간입니다.

① 클로드 코드를 처음 실행하면 터미널의 테마(theme)를 선택하게 됩니다. 1. Dark mode가 기본값입니다. 특별히 변경할 내용이 없다면 기본값을 유지하고 진행합니다.

② 로그인 방법을 선택하라고 적혀 있지만, 실제로는 어떤 요금제로 진행할지를 선택하는 부분입니다. 1. Claude account with subscription으로 진행할 것이며, 이를 선택하면 계정 연동이 진행됩니다.

1을 선택하면 다음과 같은 웹 브라우저 창이 뜨고, 일반적으로 Google로 계속하기를 눌러서 계정 연

동을 진행합니다.

③ 이미 구독이 되어 있다면 계정이 연동된 후에 로그인 성공(Login successful) 메시지가 터미널에 나옵니다. Enter를 눌러 계속 진행합니다. 

만약 계정에 구독 정보가 없다면 결제 화면이 나타납니다. 앞서 선택한 요금제로 결제를 진행한 후 다시 로그인하면 됩니다.

④ 계정에 등록된 구독 정보를 모두 확인하였다면, 이제 클로드 코드에 대한 몇 가지 설정을 진행하게 됩니다. 가장 처음으로 "클로드 코드는 실수할 수 있고, 보안적으로 의심되는 코드는 실행하지 말라"는 일종의 나는 책임지지 않을꺼야 같은 말로 시작합니다. Enter를 눌러 계속 진행합니다.

⑤ 그 다음으로 클로드 코드가 실행될 터미널 설정을 진행합니다. 세세한 설정을 할 수 있지만, 일반적으로 기본값이 제일 편합니다. 따라서 Yes, use recommended settings를 누릅니다.

⑥ 네, 저희가 클로드 코드의 시작 위치를 변경한 이유 중 하나인 부분이 나왔습니다. 현재 폴더(디렉터리)를 신뢰할 수 있는지 사용자에게 확인을 요청합니다. Yes, proceed를 눌러 계속 진행합니다.

⑦ 이제 모든 기본 설정을 마쳤고, 클로드 코드를 사용할 수 있습니다.

⑧ 현재 상태에서 [ /doctor ] 라는 명령으로 클로드 코드를 점검합니다. 

다음과 같이 나온다면 문제가 없는 상태입니다. 점검을 마쳤다면 Enter 를 눌러서 다시 입력창으로 돌

아옵니다. 

⑨ [ /exit ] 명령을 입력해 나온 후에 다시 claude를 입력하고 설정 과정이 반복되지 않는 것을 확인합니다.

내 컴퓨터에만 있는 정보 분석하기

이제 클로드 코드를 직접 써볼 차례입니다. 막히는 부분이 생겨도 걱정할 필요 없어요. 고민되면 입력창에 물어볼 것. 이것이 클로드 코드의 가장 기본적인 사용법입니다. 자, 그럼 본격적으로 시작해 봅시다. 터미널에서 Wed 디렉터리로 이동하고 클로드 코드를 실행합니다.

* 영어로 나와도 입력창에 한국어로 물어보면 바로 답해줍니다.

1️⃣ 내가 사용하는 데스크탑/랩탑의 정보를 알아내기

현재 내가 사용하는 데스크탑/랩탑의 가장 중요한 정보는 하드웨어와 운영 체제일 것입니다. 해당 부분을 클로드 코드에 물어보고, 그 외에 추가로 알면 좋을 정보가 있을지도 함께 물어보겠습니다.

① [현재 클로드 코드가 동작하는 하드웨어 정보를 알려줘] 라는 프롬프트를 입력합니다. 그리고 클로드 코드가 생성한 배시 명령어를 확인하고 Yes를 누릅니다.

* 한 번에 실행될 수 있지만 경우에 따라 배시 명령을 수행하기 위해 여러 번 Yes를 눌러야 할 수 있습니다.

② 배시 명령 결과가 다음과 같이 하드웨어에 대한 정보가 상세하게 출력되는 것을 확인하고 틀린 게 없는지 검증합니다. 인공지능이 생성한 내용은 항상 사용자가 확인하는 것이 중요합니다.

③ 다음으로 [현재 클로드 코드가 동작하는 운영 체제 정보를 알려줘] 라는 프롬프트를 입력합니다. 그리고 클로드 코드가 생성한 배시 명령어를 확인하고 Yes를 누릅니다.

마찬가지로 한 번에 실행될 수 있지만 경우에 따라 배시 명령을 수행하기 위해 여러 번 Yes를 눌러야 할 수 있습니다.

④ 배시 명령 결과 다음과 같이 운영 체제에 대한 정보가 상세하게 출력되는 것을 확인하고 틀린 부분이없는지 확인합니다.

⑤ 마지막으로 [그 외에 추가로 알면 좋을 정보를 알려줘] 라는 프롬프트를 입력합니다. 그리고 클로드 코드가 생성한 배시 명령어를 확인하고 Yes를 누릅니다.

다음과 같이 개발 환경과 클라우드 서비스 설치 현황까지 출력됩니다.

이렇게 단순한 질의로 현재 데스크탑/랩탑에 대한 파악이 완료되었습니다. 이렇듯 인공지능 에이전트는 짧은 시간에 사람이 하는 것보다 훨씬 더 많은 일을 할 수 있어 생산성이 단순 곱셈이 아니라 몇십 배 늘어나기도 합니다. 현재 정보뿐만 아니라 파일을 읽고 해석하는 능력은 어떤지도 함께 파악해 보겠습니다.

2️⃣ 로컬 파일들의 정보를 읽고 계산하기

클로드 코드는 현재 시스템의 환경 정보를 가지고 올 뿐만 아니라, 많은 파일을 읽고 계산할 수 있습니다. 현재 Wed 디렉터리에는 굉장히 많은 파일이 있습니다. 각 파일에는 고유의 숫자 값이 이미 입력되어 있습니다. 해당 파일을 읽고 계산하는 작업을 클로드 코드를 통해서 진행해 보겠습니다.

① 먼저 현재 디렉터리에 어떤 파일들이 있는지 확인합니다. [ ! ]을 입력해 입력 모드를 변경한 후에 [ ls ]를 입력합니다. 많은 파일이 Wed 디렉터리에 있는 것을확인할 수 있습니다. 

② 많은 파일이 존재하는 것을 확인했으니, [현재 wed 디렉터리에 있는 파일 중에 빈 파일의 개수를 알려줘] 라는 프롬프트를 입력합니다. 50개의 빈 파일들이 있다는 것을 알아냈습니다.

③ 이번에는 파일을 읽고 계산하는 능력이 어떤지 확인해 보겠습니다. [빈 파일이 아닌 파일의 내용을 읽고 숫자라면 더해서 총합을 알려줘] 라는 프롬프트를 입력합니다. 그리고 클로드 코드가 생성한 배시

명령어를 확인하고 Yes를 누릅니다.

계산 결과 12048인 것을 확인할 수 있습니다. 실습을 마쳤다면 [ /quit ]를 입력해서 클로드 코드를 종료합니다.

실습을 통해 확인한 것처럼 클로드 코드와 같은 인공지능 에이전트를 이용하면, 로컬에 있는 파일들을 정말 손쉽게 분석하고 계산할 수 있습니다. 

말 한마디로 웹 페이지 뚝딱 만들고 공개하기

이번에는 분석을 넘어 직접 무언가를 만들어 보겠습니다. 코딩을 전혀 몰라도 괜찮습니다. 클로드 코드에게 말 한마디만 하면 됩니다. 터미널에서 Fri 디렉터리로 이동하고 클로드 코드를 실행합니다.

1️⃣ 고양이가 나오는 웹 페이지 생성

우선 우리는 웹 페이지 제작 방법을 전혀 모르는 사용자라고 가정합시다. 그래서 아주 단순하게 고양이가 나오는 웹 페이지를 만들고 싶다고 합시다. 그래서 큰 기대를 가지지 않고, 웹 페이지를 클로드 코드로 만들어 보겠습니다.

① [고양이가 나오는 웹 페이지 만들어줘] 라는 프롬프트를 입력합니다. 7단계로 나누어 리액트 웹 페이지를 만들 거라는 메시지를 확인합니다. Yes를 누릅니다.

② 진행되는 2번째 단계를 확인하고, 프로젝트 및 기본 파일들을 만들기 위한 단계에 Yes를 여러 번 누릅니다. Yes를 여러 번 누르지 않고, 옵션 2번을 선택할 수도 있으나, 시작하는 단계에서는 내용을 하나하나 살펴보는 것이 좋으므로 처음에는 모두 확인하고 Yes를 누르겠습니다.

③ 3번째부터 7번째 단계까지 각 단계의 내용을 확인하고 Yes를 누르며 진행합니다. 클로드 코드가 알아서 고양이 웹 페이지에 필요한 모든 파일을 만들어 줍니다.

④ 이제 만들어진 웹 페이지가 동작할 수 있는 개발 서버를 실행합니다. Yes를 눌러 계속 진행합니다. 이후 만들어진 개발 서버 주소 값(http://localhost:5173/)을 확인합니다.

⑤ 웹 브라우저에 로컬 주소 값을 입력해 고양이 댄싱 페이지가 잘 생성되었는지 확인합니다. 브라우저에서 만들어진 웹 페이지를 확인했다면, 터미널에서 esc를 눌러 개발 서버를 종료합니다.

이렇게 만든 웹 페이지를 로컬에서만 동작시킬 수는 없겠죠? 인터넷에 올리고 확인하겠습니다

2️⃣ 만든 웹 페이지를 인터넷에 올리고 확인하기

웹 페이지를 인터넷에 올리고 확인하는 방법은 매우 많습니다. 하지만 시작할 때의 가정과 마찬가지로 어디에 올리고 어떻게 해야 하는지는 모른다고 가정하겠습니다.

① [작성된 웹 페이지를 인터넷에 공개하려면 어떻게 해야 돼?] 라는 프롬프트를 입력합니다. 3단계로 진행 가이드를 작성해줍니다. 계속 진행할 것인지를 사용자에게 물어봅니다.

② 당연히 계속 진행할 것이므로, [네]라고 입력합니다. 처음 단계인 깃허브 저장소를 생성하는 방법에 대해서 안내해줍니다. 그리고 깃허브 저장소 생성이 완료되면 2단계를 진행할테니 알려달라고 합니다. 

 깃허브 저장소를 생성하기 위해 https://github.com/<계정>에 접속합니다. 그리고 오른쪽 상단의 [ + ]를 누른 후 New repository를 누릅니다.

④ 새로운 저장소의 이름은 생성된 웹 페이지의 이름과 동일하게 cat-dancing-page로 하고, 하단에 Create repository 버튼을 누릅니다.

⑤ 새롭게 만들어진 저장소를 확인하고 주소를 복사합니다. 

⑥ 저장소 주소와 함께 2단계를 진행해 달라고 입력합니다. 저장소 주소는 독자 여러분의 깃허브 주소로 변경해서 진행하세요. 2단계에서는 코드 업로드와 깃허브 페이지 배포가 자동으로 진행됩니다. 각 단계에서 내용을 확인하고 Yes를 누르면 클로드 코드가 알아서 처리합니다.

⑦번부터 ⑭번까지 클로드 코드가 자동으로 여러 단계를 진행합니다. 각 단계에서 내용을 확인하고 Yes를 누르며 따라가면 됩니다.

⑮ 3단계는 따로 물어보지 않고 진행되었으며, 몇 분 후에 생성된 웹 페이지를 확인할 수 있습니다. 깃허브 저장소 Settings → Pages에서 다음과 같이 설정합니다. 

⑯ 웹 브라우저에서 깃허브 페이지 주소 값을 입력해 고양이 댄싱 페이지가 잘 보이는지 확인합니다. 실습을 마쳤다면 [ /quit ]를 입력해 클로드 코드를 종료합니다

만약 웹 페이지에 접속되지 않거나 진행 중에 문제가 생긴다면 클로드 코드에 [ 웹 사이트 접속 안 됨 ] 등을 물어보면, 로컬의 파일과 원격 깃허브 저장소를 비교하면서 문제를 자체적으로 수정합니다. 

클로드 코드를 통해 리액트, CSS, 깃허브 페이지 등에 대한 지식이 없이도 웹 페이지를 만들고 이를 인터넷에 공개할 수 있었습니다. 물론 클로드 코드가 만능이라 이러한 지식이 쓸데없다는 것이 아닙니다. 중간중간 나오는 내용과 방향성을 가지고 확인하고 수정해야 하기 때문입니다. 하지만 분명한 것은 클로드 코드를 이용하면 모르는 것에 대해서 조언을 구할 수 있고, 이미 아는 것에 대해서는 빠르게 확인하고 진행할 수 있다는 것입니다.

여기까지 따라오셨다면, 당신은 이미 클로드 코드를 시작한 사람입니다. 설치하고, 내 컴퓨터를 분석하고, 웹 페이지를 만들어 인터넷에 올렸습니다. 코딩을 몰라도, 터미널이 낯설어도 해냈습니다. 이제 클로드 코드는 여러분의 동료입니다. 막히는 순간마다 입력창에 물어보면서, 조금씩 더 많은 것을 해나가 보세요.