Claude Code 확장 입문: 설치와 로그인, 네 단계 prompt로 첫 앱 만들기

AI 챗봇에게 코드를 부탁하면 그럴듯한 코드는 금방 나옵니다. 문제는 그다음입니다. 여러 파일에 코드를 나눠 붙여 넣고, 폴더 구조를 만들고, 터미널에서 명령어를 실행하고, 알 수 없는 오류를 해결하는 일이 모두 사용자 몫으로 남습니다. 초보자가 AI 코딩에서 막히는 지점은 코드 생성 자체보다 이 손으로 옮기는 과정에 있습니다. Anthropic의 Claude Code는 이 간극을 메우기 위해 만들어진 코딩 agent입니다. 이 글에서는 터미널이 낯선 사람도 따라 할 수 있도록 Visual Studio Code(이하 VS Code)에 Claude Code를 연결하고, 빈 폴더에서 실제로 동작하는 웹앱을 완성하기까지의 흐름을 단계별로 정리합니다.

브라우저 채팅과 Claude Code는 무엇이 다른가

브라우저 채팅 창에서 AI를 쓰면 사용자가 직접 복사하고 붙여 넣는 실행자 역할을 맡게 됩니다. 채팅 창의 AI는 내 컴퓨터의 파일이나 터미널(명령어를 입력해 컴퓨터를 조작하는 창)에 직접 손댈 수 없기 때문입니다.

Claude Code는 agent(스스로 판단해 여러 작업을 이어서 수행하는 AI)로서 개발 환경 안에서 직접 움직입니다. 할 수 있는 일은 다음과 같습니다.

• 코드 파일 생성과 수정, 폴더 관리
• 셸 명령어 실행
• 패키지 의존성(앱이 돌아가는 데 필요한 외부 부품) 설치
• 변경 내용 비교(diff, 수정 전후 차이) 확인
• 빌드가 제대로 되는지 자동 점검

말하자면 저장소 안에서 함께 일하는 동료에 가깝습니다. 사용자는 무엇을 만들지 자연어로 설명하고, 결과를 확인하는 역할에 집중하면 됩니다.

사용 방식 세 가지와 요금제

Claude Code를 쓰는 방법은 세 가지입니다. 독립 실행형 데스크톱 앱, 명령줄 인터페이스(CLI, 터미널에서 글자로만 조작하는 방식), 그리고 VS Code 확장입니다. 초보자에게는 VS Code 확장이 가장 실용적인 선택으로 보입니다. AI agent, 코드 편집기, 파일 목록, 터미널이 한 화면에 나란히 놓여 있어 무슨 일이 일어나는지 눈으로 따라갈 수 있기 때문입니다.

주의할 점은 무료 계정으로는 Claude Code를 쓸 수 없다는 것입니다. 유료 구독이 필요합니다.

처음 배우는 단계라면 Pro 요금제로 이 글의 예제 정도는 충분히 만들 수 있습니다.

1단계: VS Code 설치하고 화면 익히기

VS Code는 Microsoft가 만든 무료 코드 편집기로 Windows, macOS, Linux에서 모두 쓸 수 있습니다. 공식 사이트(code.visualstudio.com)에 접속하면 운영체제를 자동으로 인식해 맞는 설치 파일을 보여 줍니다. 설치 마법사에서는 약관에 동의하고 기본 경로를 그대로 둔 채 진행하면 됩니다. 별도의 복잡한 설정은 필요 없습니다.

처음 실행하면 낯설 수 있지만, 기억할 구역은 세 곳뿐입니다.

• 왼쪽 사이드바: 파일 탐색기와 확장 마켓플레이스가 있는 곳
• 가운데 편집 영역: 코드 파일을 열어 보고 고치는 곳
• 아래쪽 통합 터미널: 명령어가 실행되는 곳

Claude Code가 이 옆에 자리 잡으면 코드가 만들어지는 모습, 파일 목록이 바뀌는 모습, 터미널에서 명령이 실행되는 모습을 창을 오가지 않고 실시간으로 볼 수 있습니다.

2단계: 공식 확장 설치와 로그인

왼쪽 사이드바의 확장 아이콘을 누르거나 단축키(Windows와 Linux는 Ctrl+Shift+X, macOS는 Cmd+Shift+X)로 확장 패널을 엽니다. 검색창에 Claude Code를 입력하면 여러 결과가 나옵니다. 여기서 가장 중요한 것은 게시자가 Anthropic으로 표시된 공식 확장을 고르는 것입니다. 호환성과 안전한 인증을 위해서라도 비슷한 이름의 다른 확장은 설치하지 않는 편이 좋습니다.

설치를 누르면 사이드바에 Claude Code 전용 아이콘이 생깁니다. 이 패널을 열면 Claude 계정 연결을 요구하는 로그인 화면이 나옵니다. 평소 claude.ai에서 쓰는 계정으로 로그인하면 Pro나 Max 구독 여부가 확인되고 사용량 한도가 확장과 동기화됩니다. 브라우저에서 인증을 마치고 편집기로 돌아와 확인하면 사이드바에 prompt 입력창이 나타나며, 추가 설정 없이 바로 지시를 내릴 수 있습니다. 참고로 이 글의 과정은 Claude Code v2.1.72 기준입니다.

▲ 확장 설치와 계정 연결

3단계: 프로젝트 폴더와 터미널 경로 맞추기

초보자가 가장 많이 놓치는 단계입니다. prompt를 보내기 전에 작업 전용 빈 폴더부터 만들어야 합니다. 그래야 생성된 파일이 엉뚱한 곳에 흩어지지 않습니다.

1. 컴퓨터에 새 빈 폴더를 만듭니다. 예를 들어 ClaudeProject처럼 이름을 붙입니다.
2. VS Code에서 File 메뉴의 Open Folder를 눌러 방금 만든 폴더를 엽니다. 이 폴더가 작업 공간의 기준점(루트)이 됩니다.
3. 상단 메뉴나 단축키(Ctrl과 백틱 키 조합, macOS는 Cmd와 백틱 키 조합)로 통합 터미널을 엽니다.
4. 터미널에 표시된 현재 경로가 방금 연 프로젝트 폴더 경로와 정확히 같은지 확인합니다.

4번이 핵심입니다. 터미널이 다른 폴더를 가리키고 있으면 Claude Code가 실행하는 패키지 설치나 파일 생성이 엉뚱한 위치에서 일어나고, 결국 앱이 제대로 빌드되지 않습니다. 오류가 났을 때 코드부터 의심하기 전에 경로부터 확인하는 습관을 들이는 것이 좋겠습니다.

4단계: prompt 네 번으로 앱 완성하기

여기서부터가 실제 활용입니다. 예제로 만들 앱은 매일 쓰는 개인 일기장과 할 일 목록을 합친 웹앱입니다. 두 기능은 각각의 탭으로 나뉘지만 디자인과 글꼴을 공유하고, 데이터는 브라우저 안에 저장됩니다.

핵심 원칙은 거대한 prompt 하나로 완성된 앱을 한 번에 요구하지 않는 것입니다. 한 번에 모든 것을 요구하면 AI가 없는 내용을 지어내거나(환각), 중요한 기능을 빠뜨리거나, 의존성 설치 단계에서 실패하는 일이 잦습니다. 대신 한 번에 한 가지에만 집중하는 prompt를 순서대로 보냅니다.

첫 번째 prompt: 뼈대 세우기

첫 요청은 앱의 기본 구조를 만드는 스캐폴딩(프로젝트의 골격을 세우는 작업)입니다. 요청 내용을 우리말로 옮기면 다음과 같습니다.

• 일기와 할 일 목록 웹앱의 뼈대를 만들어 줘. 프로젝트 구조를 잡고 의존성을 설치한 뒤, 깔끔하고 미니멀한 디자인에 일기 섹션과 할 일 섹션을 오가는 내비게이션을 갖춘 기본 앱을 브라우저에서 실행해 줘.

요청을 보내면 Claude Code가 스스로 터미널 명령을 실행하기 시작합니다. npm(JavaScript 패키지 관리 도구) 초기화, React와 Vite 기반 설정, 프런트엔드 패키지 설치가 이어지고, 컴포넌트 폴더와 설정 파일이 파일 탐색기에 실시간으로 나타납니다. 작업이 끝나면 로컬 개발 서버(내 컴퓨터 안에서만 앱을 띄워 보는 임시 서버)를 실행하고 보통 localhost:5173 같은 주소를 알려 줍니다. 브라우저로 열면 상단 탭으로 비어 있는 일기 화면과 할 일 화면을 오갈 수 있는 기본 페이지가 보입니다.

복잡한 기능을 붙이기 전에 이 뼈대가 제대로 도는지 확인하는 것 자체가 튼튼한 기반이 됩니다.

두 번째 prompt: 일기 기능 완성

뼈대가 동작하면 내비게이션은 건드리지 않고 일기 기능만 확장합니다.

• 일기 기능을 확장해 줘. 앱 전반의 사용성과 디자인, 느낌을 개선하고, 사용자가 글을 기록하고 기분과 관련 정보를 남길 수 있게 해 줘.

Claude Code는 기존 파일을 읽고 일기 담당 컴포넌트를 찾아 직접 수정합니다. 결과로 제목 입력칸, 여러 줄 본문 입력칸, 이모지로 기분을 고르는 기분 선택기, 선택형 태그를 갖춘 작성 양식이 생기고, 그 아래로 작성 시각과 기분 표시가 붙은 지난 기록 목록이 시간순으로 나열됩니다. 데이터는 LocalStorage(브라우저 안에 데이터를 저장하는 기능)에 저장되어 새로고침하거나 탭을 닫았다가 열어도 남아 있습니다.

브라우저에서 직접 확인해 봅니다. 예를 들어 제목을 ’나의 첫 기록’으로, 본문을 ’지금 만들고 있는 앱의 첫 기록’으로 적은 뒤, 기분 선택기에서 이모지로 기분을 고르고 감사라는 태그를 붙여 저장하면 목록에 바로 나타나야 합니다. 삭제도 깔끔하게 되는지 함께 확인합니다.

세 번째 prompt: 할 일 기능 완성

이번에는 이미 잘 돌아가는 일기 기능과 분리해 할 일 기능을 키웁니다.

• 할 일 목록도 확장해 줘. 적절한 필터를 추가하고, 완료한 일은 진행 중인 일과 확연히 다르게 보이게 하고, 전체 디자인도 개선해 줘.

그 결과 새 할 일 추가, 우선순위(낮음, 보통, 높음), 마감일, 완료 체크 기능이 생깁니다. 전체, 진행 중, 완료로 나눠 보는 필터 탭과 우선순위 표시도 붙습니다. 완료한 항목은 취소선과 흐린 색으로 구분되고, 완료 항목을 한 번에 지우는 버튼도 추가됩니다.

‘개 밥 주기’ 같은 할 일을 보통 우선순위로 추가하고, 완료 처리하고, 필터를 바꿔 보며 확인합니다. 여기서 놓치지 말아야 할 점이 있습니다. 반드시 일기 탭으로 돌아가 기존 기록이 그대로 있는지, 내비게이션이 멀쩡한지 확인해야 합니다. 새 기능이 기존 기능을 망가뜨리지 않았는지 점검하는 습관이 단계별 작업의 핵심입니다.

네 번째 prompt: 디자인 전면 개편

기능이 모두 갖춰진 뒤에야 디자인을 손봅니다. 기능을 하나 추가할 때마다 디자인을 다시 고치는 반복을 피할 수 있기 때문입니다.

• 앱 디자인 전체를 다시 해 줘. Evernote와 비슷한 느낌으로 만들고 다크 모드와 라이트 모드를 전환할 수 있게 해 줘. 더 현대적인 모습으로 글꼴, 여백, 시각적 일관성을 개선하고, 완전한 반응형으로 만들어 줘.

반응형이란 화면 크기에 맞춰 레이아웃이 자동으로 바뀌는 방식을 말합니다. Claude Code는 CSS(웹 페이지의 모양을 정하는 코드)를 대대적으로 고쳐 초록색 포인트 색상, 다듬어진 글꼴, 모서리가 둥근 카드형 배치를 적용합니다. 전체 테마를 바꾸는 전환 버튼이 생기고, 모바일 화면에서는 여러 칸으로 나뉜 입력 영역이 한 줄 배치로 바뀝니다. 테마를 바꿔 보고, Chrome 개발자 도구로 모바일 화면 폭에서 가로로 넘치는 부분 없이 입력이 잘 되는지 확인하면 됩니다.

▲ 반응형 디자인과 테마 전환

파일 수정 결과는 이렇게 확인합니다

Claude Code는 요청을 받을 때마다 파일을 만들고 고치며, 수정 전후 차이를 살펴볼 수 있게 해 줍니다. 초보자 입장에서 코드 한 줄 한 줄을 이해하기는 어렵습니다. 그래서 실질적인 승인 절차는 두 가지로 보는 것이 현실적일 수 있습니다. 첫째, 파일 탐색기에서 어떤 파일이 새로 생기거나 바뀌었는지 훑어봅니다. 둘째, 브라우저에서 방금 요청한 기능이 실제로 동작하는지, 이전 기능이 멀쩡한지 직접 눌러 봅니다. 이 확인을 통과한 뒤에 다음 prompt로 넘어가는 것이 안정적인 흐름입니다. 코드에 익숙해지면 수정 전후 차이에서 주요 변경 내용도 함께 살펴보는 것이 좋습니다.

완성된 결과물은 온전히 내 코드입니다

완성 후 프로젝트 폴더를 열어 보면 package.json, 컴포넌트 소스 파일, CSS 파일, 각종 에셋 등 표준적인 웹 코드 파일이 그대로 들어 있습니다. Wix나 Bubble 같은 폐쇄형 no-code 빌더는 해당 플랫폼에 묶여 앱을 계속 띄워 두려면 매달 구독료를 내야 합니다. 반면 Claude Code로 만든 결과물은 내 컴퓨터에 있는 원본 소스 코드이므로, Vercel, Netlify, AWS 같은 어떤 클라우드 호스팅에도 올릴 수 있고 다른 개발자에게 넘겨줄 수도 있습니다. 특정 플랫폼에 종속되지 않는다는 점이 이 방식의 가장 큰 장점으로 보입니다.

막히기 쉬운 지점 한눈에 보기

정리: 오늘 바로 해 볼 일

VS Code 안의 Claude Code는 AI가 만든 코드를 실제로 돌아가는 앱으로 옮기는 과정, 즉 파일 정리와 의존성 설치, 명령어 실행을 대신 맡아 줍니다. agent와 편집기, 파일 목록, 터미널이 한 화면에 모여 있어 터미널이 낯선 초보자에게도 진입 장벽이 낮습니다. 성패를 가르는 것은 도구보다 작업 방식으로 보입니다. 뼈대, 기능 하나, 또 다른 기능 하나, 마지막 디자인 순서로 나누고, 단계마다 브라우저에서 확인한 뒤 넘어가면 됩니다.

지금 바로 시작하려면 다음 순서를 따라 해 보시기 바랍니다.

1. 유료 Claude 구독 상태를 확인하고 VS Code를 설치합니다.
2. Anthropic이 게시한 공식 Claude Code 확장을 설치하고 claude.ai 계정으로 로그인합니다.
3. 새 빈 폴더를 만들어 VS Code로 열고, 터미널 경로가 그 폴더와 같은지 확인합니다.
4. 간단한 앱 아이디어 하나를 정해 뼈대부터 요청하고, 기능은 하나씩, 디자인은 맨 마지막에 요청합니다.

작은 앱 하나를 끝까지 완성해 보는 경험이 쌓이면, 같은 틀을 더 큰 프로젝트에도 그대로 적용할 수 있을 것입니다.