목차
바이브 코딩이란 무엇인가
2026년 현재, 코딩을 배우는 방식이 근본적으로 바뀌었습니다. 과거에는 변수 선언법부터 시작해서 수백 시간의 학습 끝에 겨우 간단한 웹 페이지 하나를 만들 수 있었습니다. 하지만 바이브 코딩(Vibe Coding)은 완전히 다른 접근법을 취합니다.
바이브 코딩이란 AI와 대화하듯 소통하며 코드를 만들어 가는 방식입니다. 여러분이 원하는 것을 말로 설명하면, AI가 실제 코드를 작성해 줍니다. 여러분은 코드의 세부 문법을 외울 필요 없이, 어떤 결과물을 원하는지 명확히 전달하는 능력만 있으면 됩니다.
이 개념을 가장 잘 구현한 도구가 바로 Claude Code입니다. Anthropic이 만든 Claude Code는 터미널에서 실행되는 AI 코딩 에이전트로, 단순히 코드를 제안하는 것을 넘어 파일을 직접 생성하고, 명령어를 실행하고, 오류를 스스로 수정하는 자율적인 작업 능력을 갖추고 있습니다.
오늘 우리는 Claude Code를 활용하여 나만의 포트폴리오 웹사이트를 처음부터 완성까지 만들어 보겠습니다. 코딩 경험이 전혀 없어도 따라할 수 있도록 모든 단계를 구체적으로 안내합니다.
Claude Code 설치와 첫 실행
Claude Code를 사용하려면 먼저 Node.js와 npm이 필요합니다. 아직 설치하지 않았다면 nodejs.org에서 LTS 버전을 내려받아 설치하세요. 설치 후 터미널에서 다음 명령어로 확인합니다.
node --version
npm --version버전 번호가 출력되면 정상입니다. 이제 Claude Code를 전역 설치합니다.
npm install -g @anthropic-ai/claude-code설치가 완료되면 API 키를 설정해야 합니다. Anthropic Console에서 계정을 만들고 API 키를 발급받으세요. 그 다음 터미널에서 다음을 실행합니다.
export ANTHROPIC_API_KEY="sk-ant-여기에-발급받은-키-입력"매번 이 명령어를 입력하지 않으려면 홈 디렉토리의 .bashrc 또는 .zshrc 파일에 위 줄을 추가하세요. macOS를 사용한다면 보통 .zshrc입니다.
echo 'export ANTHROPIC_API_KEY="sk-ant-여기에-발급받은-키-입력"' >> ~/.zshrc
source ~/.zshrc이제 작업할 폴더를 만들고 Claude Code를 실행해 봅니다.
mkdir my-portfolio
cd my-portfolio
claude터미널에 Claude Code 프롬프트가 나타나면 준비 완료입니다. 처음 실행하면 몇 가지 초기 설정을 물어볼 수 있는데, 기본값으로 진행해도 됩니다.
포트폴리오 사이트 구조 설계하기
코딩을 시작하기 전에 무엇을 만들지 명확히 정해야 합니다. 이것이 바이브 코딩에서 가장 중요한 단계입니다. AI는 여러분이 원하는 것을 정확히 이해할 때 훨씬 좋은 결과물을 만들어 냅니다.
포트폴리오 사이트에 포함할 내용을 미리 정리해 두세요.
- 자기소개 섹션 (이름, 직함, 한 줄 소개)
- 기술 스택 목록
- 프로젝트 카드 3개 이상
- 연락처 정보
- 다크모드 지원 여부
- 반응형 디자인 (모바일 대응)
이 정보를 메모장에 간단히 정리해 두면 Claude Code에 지시할 때 훨씬 명확하게 전달할 수 있습니다.
기술 스택 선택
비전공자에게 권장하는 스택은 다음과 같습니다. 설치나 빌드 설정 없이 바로 브라우저에서 확인할 수 있는 구조입니다.
- HTML5 + CSS3 (기본 구조)
- Vanilla JavaScript (간단한 인터랙션)
- CSS 변수를 활용한 다크모드
- CSS Grid / Flexbox로 레이아웃
React나 Next.js 같은 프레임워크는 처음에는 불필요합니다. 순수 HTML/CSS/JS로도 충분히 훌륭한 포트폴리오를 만들 수 있고, 나중에 기초가 잡히면 프레임워크로 넘어가는 것이 훨씬 자연스럽습니다.
단계별 실습: 대화로 코드 만들기
이제 실제로 Claude Code와 대화하며 포트폴리오를 만들어 보겠습니다. Claude Code가 실행된 상태에서 다음 지시들을 차례로 입력하세요.
1단계: 기본 HTML 뼈대 생성
Claude Code 프롬프트에 다음을 입력합니다.
index.html 파일을 만들어줘. 포트폴리오 웹사이트 기본 구조로,
상단 네비게이션, 히어로 섹션, 소개, 기술스택, 프로젝트, 연락처
섹션을 포함해줘. CSS는 style.css에 분리하고, 다크모드를 지원해야 해.Claude Code가 파일을 생성하는 과정을 실시간으로 보여주면서 작업합니다. 완료되면 해당 폴더에 index.html과 style.css가 생성되어 있을 것입니다.
2단계: 내 정보 입력하기
index.html에서 히어로 섹션의 이름을 "홍길동"으로,
직함은 "프리랜서 디자이너"로 변경해줘.
한 줄 소개는 "사용자 경험을 중심으로 디자인을 생각합니다"로 넣어줘.이렇게 구체적으로 요청할수록 원하는 결과에 가까워집니다. AI는 맥락을 기억하고 있으므로, 이전 대화를 기반으로 계속 수정해 나갈 수 있습니다.
3단계: 프로젝트 카드 추가
프로젝트 섹션에 카드 3개를 추가해줘.
- 카드1: 제목 "브랜드 리뉴얼 프로젝트", 설명 "스타트업 브랜드 아이덴티티 전면 개편", 태그: Figma, Illustrator
- 카드2: 제목 "쇼핑몰 UX 개선", 설명 "전환율 23% 향상을 이끈 UX 리디자인", 태그: Figma, UserResearch
- 카드3: 제목 "모바일 앱 UI 설계", 설명 "헬스케어 스타트업 iOS 앱 UI 0에서 1까지", 태그: Figma, Prototyping
각 카드에 호버 시 살짝 올라오는 애니메이션 효과를 넣어줘.4단계: 실시간 결과 확인
파일이 수정될 때마다 브라우저에서 바로 확인하세요. 터미널을 새로 열고 다음 명령어로 간단한 로컬 서버를 띄울 수 있습니다.
npx serve .또는 Python이 설치되어 있다면
python3 -m http.server 3000브라우저에서 http://localhost:3000으로 접속하면 결과물을 확인할 수 있습니다. 마음에 들지 않는 부분이 있으면 Claude Code에 다시 설명하면 됩니다.
5단계: 세부 스타일 조정
색상 테마를 보라색 계열로 바꿔줘. 주요 컬러는 #7c3aed로 하고,
버튼 호버 시 조금 더 밝은 보라색으로 변하게 해줘.
폰트는 Google Fonts의 Noto Sans KR을 적용해줘.이런 식으로 디자인 세부 사항도 자연어로 요청할 수 있습니다. CSS 속성 이름을 몰라도 됩니다. “더 여백을 늘려줘”, “텍스트가 너무 작아”, “버튼이 각져 보여 — 둥글게 해줘” 같은 표현으로도 충분합니다.
완성된 사이트 배포하기
사이트가 완성되면 인터넷에 공개해야 의미가 있습니다. 비전공자에게 가장 쉬운 배포 방법은 GitHub Pages를 활용하는 것입니다.
GitHub 저장소 생성 및 업로드
git init
git add .
git commit -m "first commit: portfolio site"
git branch -M main
git remote add origin https://github.com/사용자명/portfolio.git
git push -u origin mainGitHub에 코드를 올린 후, 저장소 Settings에서 Pages 메뉴로 이동합니다. Branch를 main으로 선택하고 Save를 누르면 몇 분 내에 https://사용자명.github.io/portfolio 주소로 사이트가 공개됩니다.
Netlify로 더 빠르게 배포하기
Netlify를 사용하면 더 쉽고 빠릅니다. netlify.com에서 무료 계정을 만들고, 만들어 놓은 폴더를 드래그앤드롭으로 업로드하면 즉시 URL이 생성됩니다. 도메인 연결도 무료로 제공됩니다.
npm install -g netlify-cli
netlify deploy --prod --dir .CLI로도 간단히 배포할 수 있습니다. Claude Code에 “Netlify로 배포하는 방법을 알려줘”라고 물어보면 그 자리에서 가이드해 줍니다.
자주 묻는 질문 Q&A
Q. API 키 요금이 많이 나오지 않나요?
A. Claude Code는 사용한 토큰에 따라 비용이 발생합니다. 포트폴리오 하나를 만드는 데 드는 비용은 보통 $1 미만입니다. Anthropic 콘솔에서 실시간 사용량을 확인할 수 있고, 월 한도를 설정할 수도 있습니다. 처음에는 $5~10 정도 충전해 두고 시작하면 충분합니다.
Q. Claude Code가 만든 코드가 마음에 들지 않으면 어떻게 하나요?
A. 그냥 다시 말하면 됩니다. “이 부분이 마음에 안 들어, 다시 해줘” 또는 “좀 더 미니멀하게 바꿔줘”처럼 구체적으로 피드백을 주세요. Claude Code는 대화 맥락을 기억하므로 지속적으로 개선해 나갈 수 있습니다. 완전히 처음부터 다시 하고 싶다면 “처음부터 새로 만들어줘”라고 해도 됩니다.
Q. HTML을 전혀 모르는데 내용을 수정할 수 있을까요?
A. 수정도 Claude Code에게 부탁하면 됩니다. “연락처 섹션에 이메일 주소를 abc@naver.com으로 바꿔줘”처럼 자연어로 요청하면 됩니다. 다만 HTML의 기본 구조(태그, 속성 개념)를 조금이라도 알아두면 원하는 것을 더 정확히 전달하는 데 도움이 됩니다.
Q. 나중에 React나 Next.js로 업그레이드하고 싶은데 어떻게 해야 하나요?
A. Claude Code에게 직접 부탁하면 됩니다. “지금 있는 index.html을 Next.js 프로젝트로 변환해줘”라고 하면 단계적으로 안내해 줍니다. 하지만 서두를 필요 없습니다. 순수 HTML/CSS로 만든 사이트도 충분히 빠르고 검색엔진 최적화(SEO)에도 유리합니다.
Q. 바이브 코딩으로 만든 코드, 직접 유지보수할 수 있나요?
A. 처음에는 AI에 의존하더라도, 반복적으로 수정 요청을 하다 보면 자연스럽게 코드 구조가 눈에 익힙니다. 이것이 바이브 코딩의 학습 효과입니다. AI가 생성한 코드에 주석을 요청해서 각 부분이 무슨 역할인지 설명을 달게 하면 이해 속도가 빨라집니다.
오늘 5분 실습
지금 바로 해보세요
- 터미널을 열고
mkdir my-portfolio && cd my-portfolio입력 claude명령어로 Claude Code 실행- “간단한 포트폴리오 index.html 하나 만들어줘. 내 이름은 [본인 이름]이야”라고 입력
- 생성된 index.html을 브라우저로 열기
- 마음에 들지 않는 부분 하나를 골라 수정 요청해보기
5분이면 첫 번째 포트폴리오 페이지 초안이 완성됩니다. 처음 결과물이 완벽할 필요는 없습니다. 중요한 것은 AI와 대화하며 코드를 수정해 나가는 감각을 익히는 것입니다.
미래이음연구소 바이브 코딩 교육
이신우 소장이 이끄는 미래이음연구소에서 Claude Code, AntiGravity 등 최신 바이브 코딩 도구 실전 강의를 진행합니다.
강의 문의: 010-3343-4000 | lab.duonedu.net
마무리
바이브 코딩은 단순한 유행이 아닙니다. 코딩의 진입 장벽을 낮추어 더 많은 사람이 디지털 창작에 참여할 수 있도록 하는 패러다임 전환입니다. Claude Code는 그 변화의 중심에 있는 도구입니다.
오늘 실습한 것처럼, 여러분은 이제 아이디어를 말로 표현하는 것만으로 실제 작동하는 웹사이트를 만들 수 있습니다. 이 능력이 쌓이면 포트폴리오 사이트를 넘어 실제 사업 도구, 개인 프로젝트, 업무 자동화까지 범위가 넓어집니다.
더 심화된 바이브 코딩 실습이 필요하다면 두온교육(main.duonedu.net)의 관련 교재를 참고하세요. 미래이음연구소(lab.duonedu.net)에서는 현장 중심의 바이브 코딩 강의를 진행하며, Claude Code와 AntiGravity를 활용한 실전 프로젝트 교육도 운영합니다. 코딩이 두렵게 느껴졌던 분들께 가장 먼저 권하고 싶은 과정입니다.
