AI 에이전트와 첫 웹앱

학습목표

• Claude의 네 가지 형태(Chat·Code·Cowork·API)와 "에이전트" 개념을 이해한다.
• Claude Code 실습을 위한 개발환경(터미널·Git·VS Code)을 스스로 구축할 수 있다.
• 자연어 설명만으로 실제 동작하는 웹앱을 완성하는 바이브코딩 습관을 익힌다.

1. 클로드 소개

클로드(Claude)는 Anthropic이 만든 AI 어시스턴트다. 대화형 챗봇으로 시작했지만, 지금은 목적에 따라 여러 형태로 쓸 수 있다.

• Chat (claude.ai): 질문하고 답을 받는 기본적인 대화형 인터페이스
• Claude Code: 터미널·IDE에서 코드를 직접 읽고 쓰는 개발자용 에이전트 도구
• Claude Cowork: 데스크톱 앱에서 파일 정리, 문서 작성 등 코딩 외 업무를 자동으로 처리하는 도구(비개발자 대상)
• API / Claude Platform: 개발자가 자신의 서비스에 클로드를 연동할 때 사용

클로드의 핵심 특징은 단순히 텍스트를 생성하는 게 아니라, 파일을 읽고 쓰고 명령을 실행하는 "에이전트"로 동작할 수 있다는 점이다. 이 과정(AI 에이전트 크리에이터 & 마케팅 실무 과정) 전체가 바로 이 에이전트형 기능을 마케팅·콘텐츠·업무 자동화에 활용하는 법을 다룬다.

2. 클로드 필수 프로그램 설치

클로드 코드를 원활히 쓰려면 아래 프로그램들을 먼저 준비해두면 좋다.

2-1. 터미널

Windows는 PowerShell 또는 명령 프롬프트(CMD)를 기본 제공한다. 시작 메뉴에서 "PowerShell"을 검색해 실행하면 된다.

2-2. Git (Git for Windows)

Windows에서 클로드 코드가 Bash 도구를 쓸 수 있게 해주는 프로그램이다. Windows에서 필요한 셸과 Git Bash 또는 WSL 구성은 현재 공식 설치 문서의 요구사항에 맞춘다. 설치 방식에 따라 전제 조건이 다르므로 PowerShell이 모든 기능을 대체한다고 가정하지 않는다.

• 다운로드: https://git-scm.com/downloads/win
• 설치 후 기본 옵션으로 진행하면 된다.

2-3. Visual Studio Code (VS Code)

코드를 눈으로 보고 편집하기 편한 무료 에디터다. 클로드 코드 확장 프로그램을 설치하면 에디터 안에서 바로 클로드를 사용할 수 있다.

• 다운로드: https://code.visualstudio.com/
• 설치 후 확장(Extensions) 탭에서 "Claude Code" 검색 → 설치

2-4. Node.js (선택)

npm으로 클로드 코드를 설치하고 싶은 경우에만 필요하다(Node.js 22 이상 권장). 기본 설치 방법(아래 3번)을 쓸 경우 Node.js는 필요 없다.

• 다운로드: https://nodejs.org/en/download

3. 클로드 코드 설치 방법

3-1. 설치(기본, 권장 방법)

Windows PowerShell을 열고 아래 명령어를 입력한다.

irm https://claude.ai/install.ps1 | iex

Windows CMD를 쓰는 경우:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

PowerShell 프롬프트는 PS C:\, CMD 프롬프트는 C:\로 표시된다. 명령어가 안 맞으면 터미널 종류를 확인하자.

3-2. 설치 확인

claude --version

버전이 정상적으로 출력되면 설치 성공이다. 문제가 있으면 아래로 더 자세히 진단할 수 있다.

claude doctor

3-3. 로그인

터미널에서 claude를 입력해 실행하면 브라우저가 열리며 로그인 절차가 진행된다. Pro, Max, Team, Enterprise 요금제 또는 Console 계정이 있어야 하며, 무료 Claude.ai 플랜으로는 클로드 코드를 쓸 수 없다.

claude

4. 클로드 바이브코딩 실습

"바이브 코딩(Vibe Coding)"은 코드를 한 줄도 몰라도, 원하는 결과를 자연어로 설명하면 클로드가 실제로 동작하는 코드를 만들어주는 방식이다. 오늘은 두 가지를 직접 만들어본다.

실습 진행 순서(공통)

1. 바탕화면이나 원하는 위치에 프로젝트 폴더를 하나 만든다(예: 가계부앱)
2. 터미널에서 그 폴더로 이동한다: cd 가계부앱
3. claude 명령으로 클로드 코드를 실행한다
4. 아래 예시 프롬프트를 참고해 원하는 내용을 설명한다
5. 결과물을 브라우저로 열어 확인하고, 마음에 안 드는 부분은 이어서 요청한다

실습 1. 가계부 앱

목표: 수입과 지출을 입력하면 자동으로 잔액과 카테고리별 합계를 보여주는 웹앱

예시 프롬프트:

수입과 지출 내역을 입력할 수 있는 간단한 가계부 웹앱을 HTML/CSS/JavaScript로 만들어줘.
- 날짜, 항목명, 카테고리(식비/교통/쇼핑/기타), 금액, 수입/지출 구분을 입력받아
- 목록으로 보여주고
- 현재 잔액과 카테고리별 지출 합계를 자동으로 계산해서 보여줘
- 디자인은 깔끔하고 모바일에서도 보기 좋게 만들어줘

추가로 요청해볼 수 있는 것:

• "이번 달 지출을 원그래프로 보여줘"
• "항목을 삭제하거나 수정할 수 있게 해줘"
• "데이터가 새로고침해도 사라지지 않게 저장해줘"

실습 2. MBTI 운세 / 궁합 앱

목표: MBTI 유형을 입력하면 오늘의 운세를, 두 사람의 MBTI를 입력하면 궁합 결과를 보여주는 웹앱

예시 프롬프트:

MBTI 관련 재미로 보는 웹페이지를 만들어줘.
1. 16가지 MBTI 유형 중 하나를 선택하면 오늘의 운세 메시지를 랜덤으로 보여주는 기능
2. 두 사람의 MBTI를 각각 선택하면 궁합 점수(0~100점)와 짧은 설명을 보여주는 기능
디자인은 재미있고 화사한 느낌으로, 버튼 클릭만으로 결과를 볼 수 있게 만들어줘.

추가로 요청해볼 수 있는 것:

• "결과를 카카오톡 공유하기 버튼도 추가해줘"
• "운세 문구를 더 다양하게 늘려줘"
• "궁합 결과에 어울리는 이모지를 추가해줘"

바이브 코딩 실습 팁

• 처음부터 완벽하게 요청하지 않아도 된다. 일단 간단한 버전을 만들고, 결과를 보면서 하나씩 기능을 추가하면 된다.
• "어떻게 만들어줘"보다 "무엇이 되었으면 좋겠는지" 결과 중심으로 설명하는 게 더 좋은 결과로 이어진다.
• 실행 중 에러가 나면 에러 메시지를 그대로 복사해서 클로드에게 붙여넣고 고쳐달라고 하면 된다.
• 결과물이 저장된 파일 위치를 모르겠으면 "결과 파일을 어디에 저장했는지 알려줘"라고 물어보면 된다.

오늘의 실습 산출물

• 실습용 프로젝트 폴더 2개(가계부 앱, MBTI 앱)

관련 노트

• 2일차 강의노트

실습 검증과 문제 해결

가계부의 합계 검증

• 직접 해볼 일: 수입 50,000원과 지출 12,000원·8,000원을 입력한다.
• 예상 결과와 판정 기준: 잔액은 30,000원이어야 한다. 지출 한 건을 지우고 합계가 즉시 바뀌는지 확인한다.
• 오류를 좁히는 방법: 숫자를 문자열로 더하거나 지출 부호를 반대로 처리하면 합계가 틀린다. 빈 입력·음수·문자 입력도 각각 확인한다.

이 항목은 교육용 검증 시나리오이며 실제 실행 성공·수익·플랫폼 승인을 보고하는 사례가 아니다. 결과 화면과 수정 내용을 기록하면 다음 실습에서 같은 오류를 줄일 수 있다.

자료 업데이트 안내

2026-10-12 주요 설명 보완. 설치 명령·계정별 기능·요금과 심사 규정은 실행 시점의 공식 문서를 다시 확인한다.

• Claude Code 설치 문서
• 강의 내용 문의 및 오류 신고: 라인블록