코딩 없이 30분 만에 나만의 포트폴리오 페이지 만들기 (Claude 바이브코딩)
코딩을 몰라도 됩니다.
Claude에게 말만 하면 바이브코딩으로 나만의 포트폴리오 페이지가 30분 안에 완성됩니다.
🧩 바이브코딩이란 무엇인가
바이브코딩(Vibe Coding)은 코드를 직접 작성하는 대신 AI에게 원하는 것을 말로 설명해서 결과물을 만드는 방식입니다. 2025년부터 급속도로 확산된 개념으로, 지금은 코딩 경험이 전혀 없는 사람도 AI와 대화만으로 웹페이지·자동화 도구·간단한 앱을 만들 수 있습니다.
핵심은 단 하나입니다. “내가 원하는 것을 구체적으로 설명하는 능력”입니다. 코딩 문법이 아니라 커뮤니케이션 능력이 핵심 기술입니다.
💡 닥터플랜 한 줄 정의: 바이브코딩 = AI를 개발자로 고용해서 내가 기획자·디자이너로 일하는 것
AI를 처음 접하신다면 [AI 완전 입문 가이드]를 먼저 읽어보시는 것을 추천합니다.
👀 오늘 만들 것 — 미리보기
오늘 완성할 포트폴리오 페이지에는 이런 내용이 들어갑니다.
✅ 이름 + 한 줄 소개
✅ 내가 하는 일 (경력·전문 분야)
✅ 주요 프로젝트 또는 작업물 링크
✅ SNS·블로그·연락처 링크
✅ 깔끔한 디자인 (색상·폰트 커스터마이징)Linktree 같은 서비스를 쓰지 않고 완전히 내 것으로 만드는 페이지입니다. 광고도 없고 브랜딩 제약도 없습니다.
🆓 준비물 — 이것만 있으면 됩니다
① Claude 무료 계정 claude.ai 접속 → 구글 계정으로 로그인. 무료 버전으로 충분합니다.
② 올릴 내용 메모 (5분) 시작 전에 아래 내용을 메모장에 미리 적어두세요. 준비할수록 결과물이 좋아집니다.
이름:
직책 또는 하는 일:
한 줄 소개:
전문 분야 3가지:
프로젝트 또는 작업물 (제목 + URL):
SNS 링크:
이메일:
원하는 색상 또는 분위기:③ GitHub 계정 (무료 배포용) github.com에서 무료 가입. 완성된 페이지를 온라인에 올릴 때 사용합니다. 지금 당장 없어도 실습은 가능합니다.
✅ Step by Step 실습
Step 1 — Claude에게 첫 요청하기
claude.ai 접속 후 아래 프롬프트를 그대로 복사해서 붙여넣으세요. 대괄호 안의 내용만 본인 것으로 바꾸시면 됩니다.
나는 포트폴리오 웹페이지를 만들고 싶어.
코딩을 전혀 모르니까 완성된 HTML 파일 하나로 만들어줘.
아래 내용을 넣어줘:
- 이름: [이름]
- 직책: [직책]
- 한 줄 소개: [소개 문구]
- 전문 분야: [분야1], [분야2], [분야3]
- 프로젝트: [프로젝트명] - [URL]
- SNS: [플랫폼] - [URL]
- 이메일: [이메일]
디자인 요구사항:
- 색상: 딥 네이비(#1B4F8A)와 화이트 중심
- 폰트: 깔끔하고 현대적인 느낌
- 모바일에서도 잘 보이게
- 심플하고 전문적인 느낌으로Claude가 HTML 코드를 통째로 만들어 줍니다. 처음 결과물이 완벽하지 않아도 괜찮습니다. 다음 단계에서 수정합니다.
Step 2 — 결과물 확인 및 수정 요청
Claude가 만들어준 코드를 확인하는 방법입니다.
① Claude 답변에서 코드 전체 복사
② 메모장(Notepad) 열기
③ 붙여넣기 후 파일명을 portfolio.html로 저장
④ 저장된 파일을 브라우저로 열기
(파일 더블클릭 또는 브라우저에 드래그)화면에 포트폴리오 페이지가 나타납니다. 마음에 안 드는 부분이 있으면 Claude에게 바로 수정을 요청하세요.
수정 요청 예시:
헤더 부분을 더 크게 만들어줘프로젝트 섹션을 카드 형태로 바꿔줘전체적으로 여백을 더 넓게 조정해줘모바일에서 글씨가 너무 작아. 폰트 크기 키워줘수정 → 저장 → 브라우저 새로고침을 반복하면서 원하는 디자인으로 다듬어 나갑니다.
Step 3 — 디자인 조정
기본 틀이 완성되면 세부 디자인을 다듬습니다.
배경색 바꾸기:
"배경색을 #F8F9FA 연한 회색으로 바꿔줘"
버튼 스타일 바꾸기:
"링크 버튼을 둥근 모서리에 네이비 색상으로 바꿔줘"
섹션 추가:
"'현재 관심사' 섹션을 추가해줘.
내용은 AI 트렌드, 바이브코딩, 기획 컨설팅이야"
애니메이션 추가:
"페이지 로딩 시 요소들이 부드럽게 나타나는
페이드인 효과 추가해줘"💡 팁: 한 번에 너무 많은 수정을 요청하지 마세요. 한 가지씩 요청하고 확인하는 것이 훨씬 빠릅니다.
Step 4 — 완성된 코드 저장하기
디자인이 마음에 들면 최종 코드를 깔끔하게 저장합니다.
Claude에게 마지막으로 요청:
"지금까지 수정된 내용을 모두 반영한
최종 완성본 HTML 코드 전체를 다시 출력해줘"
→ 코드 전체 복사
→ portfolio.html 파일에 덮어쓰기 저장Step 5 — 무료로 온라인에 올리기
완성된 파일을 인터넷에 올려 실제 URL을 만드는 방법입니다. GitHub Pages를 이용하면 완전 무료입니다.
① github.com 접속 → 로그인
② 오른쪽 상단 + 클릭 → "New repository"
③ Repository name: [내이름].github.io 입력
예: drplan26.github.io
④ Public 선택 → "Create repository" 클릭
⑤ "uploading an existing file" 클릭
⑥ portfolio.html 파일 업로드
⑦ 파일명을 index.html로 변경
⑧ "Commit changes" 클릭1~2분 후 아래 주소로 접속하면 내 포트폴리오가 온라인에 올라갑니다.
https://[내이름].github.io완전 무료이고 별도 호스팅 비용이 없습니다.
📋 실제 프롬프트 전문 공개
처음부터 끝까지 사용한 프롬프트 흐름입니다. 그대로 복사해서 쓰셔도 됩니다.
첫 요청:
나는 포트폴리오 웹페이지를 만들고 싶어.
HTML 파일 하나로 완성해줘.
[내용 입력]디자인 수정:
[수정할 부분] 을 [원하는 방향]으로 바꿔줘최종 완성본 요청:
지금까지 모든 수정사항이 반영된
최종 완성본 HTML 전체 코드를 출력해줘응용 팁 — 이런 것도 추가할 수 있습니다:
"방문자가 이메일을 보낼 수 있는
연락처 폼을 추가해줘"
"다크모드/라이트모드 전환 버튼을 넣어줘"
"한국어·영어 전환 버튼을 추가해줘"마치며 — 바이브코딩으로 다음에 만들 수 있는 것들
오늘 포트폴리오 페이지를 만든 것처럼, 같은 방식으로 이런 것들도 만들 수 있습니다.
📌 가격 계산기 웹앱
📌 예약 신청 폼
📌 설문 페이지
📌 제품·서비스 소개 랜딩페이지
📌 링크 모음 페이지 (Linktree 대체)코딩을 배우는 게 목표가 아닙니다. AI를 활용해서 내가 원하는 것을 빠르게 만드는 것이 바이브코딩의 핵심입니다. 오늘 만든 포트폴리오가 그 시작입니다.
📝 다음 글 예고
다음 편에서는 “2026년 꼭 알아야 할 AI 트렌드 5가지“ 를 다룹니다. 직장인·1인 사업자 실무 관점의 Ai 트렌드 이야기 입니다.
닥터플랜 뉴스레터를 구독하시면 새 글이 발행될 때마다 바로 받아보실 수 있습니다.
