🎯 포트폴리오가 필요한데 코딩을 모른다면

취업 준비, 프리랜서 영업, 사이드 프로젝트 정리 등 포트폴리오 사이트가 필요한 상황은 많습니다. 하지만 웹 개발을 배운 적 없는 분에게 "포트폴리오 사이트를 직접 만들어라"는 말은 막막하게 들릴 수 있습니다. 템플릿 서비스를 쓰면 비용이 들거나 디자인 자유도가 떨어지고, 워드프레스는 세팅이 복잡합니다.

바이브코딩을 활용하면 이 문제를 해결할 수 있습니다. AI에게 자연어로 "이런 포트폴리오를 만들어줘"라고 요청하면, 코드를 직접 작성하지 않아도 멋진 포트폴리오 사이트를 완성할 수 있습니다. 이 글에서는 Cursor와 Next.js를 사용해 1시간 안에 포트폴리오를 만들고 Vercel에 배포하는 전체 과정을 안내합니다.

📋 시작 전 준비물

포트폴리오 제작을 시작하기 전에 아래 항목이 준비되어야 합니다. 하나라도 빠지면 중간에 멈추게 되므로 먼저 확인하세요.

Node.js 18 이상: 터미널에서 node --version 입력 시 v18 이상 출력
Git: git --version 입력 시 버전 번호 출력
Cursor 또는 VS Code: AI 코딩 도구가 설치된 에디터
GitHub 계정: Vercel 배포 시 필요
포트폴리오에 넣을 내용: 자기소개, 프로젝트 설명 2~3개, 연락처

아직 개발 환경이 세팅되지 않았다면 VibeStart 온보딩에서 운영체제별 설치를 먼저 진행하세요. 모든 도구가 준비된 뒤에 이 가이드를 따라하면 1시간 안에 충분히 끝낼 수 있습니다.

🏗️ 포트폴리오에 들어갈 섹션 구성

AI에게 요청하기 전에 어떤 섹션을 넣을지 미리 정하면 결과물의 완성도가 훨씬 높아집니다. 무작정 "포트폴리오 만들어줘"라고 하면 AI가 일반적인 템플릿을 생성하는데, 내 상황에 맞지 않을 수 있기 때문입니다.

📌 권장 섹션 목록

섹션	포함 내용	필수 여부
Hero (메인 배너)	이름, 한 줄 소개, 프로필 이미지	필수
About (소개)	배경, 관심 분야, 핵심 역량	필수
Projects (프로젝트)	프로젝트 이름, 설명, 기술 스택, 링크	필수
Skills (기술 스택)	사용 가능한 도구/언어 아이콘 또는 목록	선택
Contact (연락처)	이메일, GitHub, LinkedIn 링크	필수
Footer (하단)	저작권 표시, 소셜 링크	선택

프로젝트 섹션에는 최소 2개 이상의 프로젝트를 넣으세요. 1개만 있으면 경험이 부족해 보일 수 있고, 5개 이상은 관리가 어려워집니다. 각 프로젝트에 스크린샷이나 데모 링크가 있으면 신뢰도가 크게 올라갑니다.

⏱️ 1시간 타임라인

전체 과정을 시간대별로 나누면 다음과 같습니다. 각 단계에 배분된 시간을 의식하면서 진행하면 1시간 안에 완성할 수 있습니다.

시간	단계	작업 내용
0~5분	프로젝트 생성	Next.js 프로젝트 초기화
5~15분	Hero + About	메인 배너와 소개 섹션
15~30분	Projects	프로젝트 카드 섹션
30~40분	Skills + Contact	기술 스택과 연락처
40~50분	스타일 다듬기	색상, 폰트, 반응형 조정
50~60분	배포	GitHub 푸시 + Vercel 배포

🚀 1단계: Next.js 프로젝트 생성 (0~5분)

터미널을 열고 프로젝트를 만들 폴더로 이동한 뒤 다음 명령어를 실행합니다.

npx create-next-app@latest my-portfolio --typescript --app --tailwind --eslint
cd my-portfolio

Tailwind CSS를 함께 설치하는 이유는 AI가 스타일 코드를 생성할 때 Tailwind 클래스를 사용하면 별도 CSS 파일 없이 빠르게 디자인을 입힐 수 있기 때문입니다. 설치가 완료되면 npm run dev로 개발 서버를 실행하고 http://localhost:3000에 기본 페이지가 뜨는지 확인하세요.

🎨 2단계: Hero와 About 섹션 (5~15분)

Cursor에서 프로젝트 폴더를 열고 Cmd+L(Windows: Ctrl+L)로 채팅을 엽니다. 아래 프롬프트를 입력하세요.

app/page.tsx를 포트폴리오 메인 페이지로 바꿔줘.

Hero 섹션:
- 이름: 홍길동
- 한 줄 소개: "AI와 함께 만드는 웹 서비스 개발자"
- 배경: 그라데이션 (진한 남색 → 보라)
- CTA 버튼: "프로젝트 보기" (Projects 섹션으로 스크롤)

About 섹션:
- 간단한 자기소개 (3~4줄)
- 관심 분야 3가지를 아이콘과 함께 카드로 표시

Tailwind CSS로 스타일링하고, 반응형으로 만들어줘.

AI가 코드를 생성하면 diff를 확인한 뒤 수락합니다. 브라우저에서 결과를 확인하고, 텍스트를 본인 정보로 수정하세요. 색상이나 레이아웃이 마음에 들지 않으면 "배경 색상을 좀 더 밝게 해줘" 또는 "카드 간격을 넓혀줘"처럼 추가로 요청합니다.

💡 팁: 프롬프트에 구체적인 색상 코드(예: #1a1a2e)나 폰트 이름을 넣으면 원하는 디자인에 더 빨리 도달할 수 있습니다.

🗂️ 3단계: Projects 섹션 (15~30분)

포트폴리오에서 가장 중요한 섹션입니다. 아래처럼 프로젝트 정보를 구체적으로 전달해야 AI가 정확한 결과를 만들어냅니다.

Projects 섹션을 추가해줘. 카드 형태로 표시하고, 각 카드에는
프로젝트 이름, 설명, 사용 기술 태그, GitHub 링크, 데모 링크 버튼이 있어야 해.

프로젝트 1:
- 이름: 할 일 관리 앱
- 설명: React와 Firebase로 만든 실시간 할 일 관리 앱
- 기술: React, Firebase, Tailwind CSS
- GitHub: https://github.com/username/todo-app
- 데모: https://todo-app.vercel.app

프로젝트 2:
- 이름: 날씨 대시보드
- 설명: OpenWeather API를 활용한 날씨 정보 대시보드
- 기술: Next.js, TypeScript, Chart.js
- GitHub: https://github.com/username/weather-dashboard

카드에 호버 효과를 넣고, 반응형으로 모바일에서는 1열, 데스크톱에서는 2열로 보여줘.

프로젝트 데이터를 하드코딩하지 않고 별도 배열로 관리하면 나중에 프로젝트를 추가하거나 수정하기 편합니다. AI에게 "프로젝트 데이터를 별도 파일로 분리해줘"라고 추가 요청하는 것도 좋은 방법입니다.

🛠️ 4단계: Skills와 Contact 섹션 (30~40분)

Skills 섹션을 추가해줘. 기술 스택을 아이콘과 함께 그리드로 표시해줘.
카테고리별로 나눠줘:
- Frontend: HTML, CSS, JavaScript, React, Next.js
- Tools: Git, VS Code, Cursor, Figma
- AI: ChatGPT, Claude, Cursor AI

Contact 섹션도 추가해줘:
- 이메일: hello@example.com
- GitHub: https://github.com/username
- LinkedIn: https://linkedin.com/in/username
- 간단한 연락 문구: "협업이나 문의가 있으시면 편하게 연락주세요"

Skills 섹션에서 아이콘을 사용하고 싶다면 react-icons 패키지를 설치하면 됩니다. 터미널에서 npm install react-icons를 실행한 뒤, AI에게 "react-icons를 사용해서 기술 스택 아이콘을 넣어줘"라고 요청하세요.

✨ 5단계: 스타일 다듬기 (40~50분)

기본 구조가 완성됐으니 전체적인 디자인을 다듬을 차례입니다.

🎨 색상과 타이포그래피 통일

전체 페이지의 색상 테마를 통일해줘.
- 메인 색상: #6366f1 (인디고)
- 배경: #0f172a (다크)
- 텍스트: #e2e8f0 (밝은 회색)
- 강조: #a78bfa (보라)
Google Fonts에서 'Inter' 폰트를 적용해줘.

📱 반응형 확인

브라우저 개발자 도구(F12)를 열고 모바일 화면 크기로 전환해서 레이아웃이 깨지지 않는지 확인합니다. 깨지는 부분이 있다면 AI에게 "모바일에서 Projects 카드가 겹치는데 수정해줘"처럼 구체적으로 알려주세요.

🌀 애니메이션 추가

각 섹션이 스크롤할 때 아래에서 위로 자연스럽게 나타나는 애니메이션을 추가해줘.
framer-motion을 사용하고, 각 섹션에 0.3초 딜레이를 줘.

애니메이션이 과하면 오히려 전문적이지 않아 보일 수 있습니다. 페이드인 정도의 간결한 효과가 가장 무난합니다.

🌐 6단계: Vercel에 배포 (50~60분)

포트폴리오가 완성되면 전 세계 누구나 볼 수 있도록 배포합니다.

📌 GitHub에 코드 올리기

git init
git add .
git commit -m "feat: 포트폴리오 사이트 초기 버전"
git remote add origin https://github.com/사용자이름/my-portfolio.git
git branch -M main
git push -u origin main

📌 Vercel 연결

vercel.com에 접속해 GitHub 계정으로 로그인합니다.
"Add New Project"를 클릭합니다.
방금 올린 my-portfolio 저장소를 선택합니다.
Framework Preset이 "Next.js"로 자동 감지되는지 확인합니다.
"Deploy"를 클릭하면 1~2분 안에 배포가 완료됩니다.

배포가 완료되면 https://my-portfolio-xxxx.vercel.app 형태의 URL이 생성됩니다. 이 주소를 브라우저에서 열어 실제로 접속되는지 확인하세요.

⚠️ 주의: GitHub 저장소가 private이어도 Vercel에서 배포할 수 있습니다. Vercel에 GitHub 권한을 부여할 때 해당 저장소에 접근 권한을 허용하면 됩니다.

✅ 완성 후 점검 목록

배포까지 끝났다면 아래 항목을 하나씩 확인하세요.

모든 섹션이 정상적으로 표시되는가
프로젝트 링크(GitHub, 데모)가 올바르게 연결되는가
모바일 화면에서 레이아웃이 깨지지 않는가
이미지가 있다면 정상적으로 로딩되는가
Contact 섹션의 이메일 링크가 작동하는가
페이지 로딩 속도가 3초 이내인가
오탈자나 임시 텍스트("Lorem ipsum" 등)가 남아 있지 않은가

🔍 자주 하는 실수와 예방법

🚫 AI 생성 코드를 검토 없이 수락하기

AI가 만든 코드를 diff 확인 없이 바로 수락하면, 기존에 잘 작동하던 부분이 덮어씌워질 수 있습니다. 특히 page.tsx 전체를 교체하는 경우 이전 섹션이 사라지는 경우가 있습니다. 반드시 변경 내용을 확인하고, 문제가 있으면 Cmd+Z로 되돌리세요.

🚫 프로젝트 정보를 나중에 채우려고 미루기

"나중에 넣어야지"하면서 더미 데이터를 그대로 배포하는 경우가 많습니다. 포트폴리오에 "Lorem ipsum"이나 "프로젝트 설명을 입력하세요" 같은 텍스트가 남아 있으면 오히려 인상이 나빠집니다. 배포 전에 모든 텍스트를 실제 내용으로 교체했는지 반드시 확인하세요.

🚫 반응형을 마지막에 확인하기

데스크톱에서만 확인하다가 배포 후 모바일로 접속해보면 레이아웃이 완전히 깨져 있는 경우가 흔합니다. 각 섹션을 만들 때마다 브라우저 개발자 도구에서 모바일 크기로 확인하는 습관을 들이세요.

🔄 포트폴리오 사이트를 더 발전시키는 방법

📌 커스텀 도메인 연결

Vercel 대시보드에서 Settings → Domains에 들어가면 자신만의 도메인을 연결할 수 있습니다. namecheap.com이나 가비아에서 도메인을 구매한 뒤 DNS 설정에서 Vercel이 안내하는 CNAME 레코드를 추가하면 됩니다. 개인 도메인이 있으면 전문성이 한층 올라갑니다.

📌 다크 모드 / 라이트 모드 토글

페이지 상단 오른쪽에 다크모드/라이트모드 토글 버튼을 추가해줘.
next-themes 패키지를 사용하고, 시스템 설정을 기본값으로 해줘.

📌 블로그 섹션 추가

포트폴리오에 블로그를 추가하면 자신의 학습 과정이나 프로젝트 후기를 공유할 수 있습니다. Next.js의 MDX 기능을 활용하면 마크다운으로 글을 작성할 수 있어 관리가 편합니다.

📌 SEO 최적화

메타 태그와 Open Graph 태그를 추가해줘.
- 제목: 홍길동 | 웹 개발 포트폴리오
- 설명: AI와 함께 만드는 웹 서비스 개발자 홍길동의 포트폴리오입니다.
- OG 이미지: /og-image.png

검색엔진과 소셜 미디어에서 포트폴리오 링크가 제대로 표시되려면 메타 태그 설정이 필요합니다. Next.js의 metadata 객체를 사용하면 간단하게 설정할 수 있습니다.

❓ 자주 묻는 질문

Q. 코딩을 전혀 몰라도 정말 1시간 안에 만들 수 있나요?

개발 환경(Node.js, Git, Cursor)이 이미 설치되어 있다면 가능합니다. 환경 설치까지 포함하면 1시간 30분~2시간 정도 예상하세요. 이 글에서 제공하는 프롬프트를 그대로 사용하면 시간을 단축할 수 있습니다.

Q. Next.js 대신 다른 프레임워크를 써도 되나요?

가능합니다. React, Vue, Svelte 등 어떤 프레임워크든 AI에게 요청하면 코드를 생성해줍니다. 다만 Next.js는 Vercel과의 배포 연동이 가장 간편하고, 정적 사이트 생성(SSG)을 지원해 포트폴리오 같은 사이트에 적합합니다.

Q. Cursor 무료 플랜으로도 충분한가요?

포트폴리오 1개를 만드는 정도라면 무료 플랜의 AI 요청 횟수로 충분합니다. 다만 디자인을 여러 번 수정하면서 요청이 많아질 수 있으므로, 프롬프트를 한 번에 구체적으로 작성하는 것이 효율적입니다.

Q. 포트폴리오에 이미지를 넣고 싶은데 어떻게 하나요?

프로젝트 스크린샷이나 프로필 사진은 public/ 폴더에 넣으면 됩니다. 예를 들어 public/profile.jpg로 저장한 뒤 코드에서 /profile.jpg 경로로 참조합니다. 이미지 최적화가 필요하면 Next.js의 Image 컴포넌트를 사용하세요.

Q. 배포 후 수정은 어떻게 하나요?

코드를 수정한 뒤 git add ., git commit, git push를 하면 Vercel이 자동으로 재배포합니다. 별도의 배포 명령 없이 GitHub에 푸시하기만 하면 됩니다. 보통 1~2분 이내에 반영됩니다.

Q. 포트폴리오 사이트에 비용이 드나요?

Next.js와 Cursor 무료 플랜, Vercel 무료 플랜을 사용하면 비용이 전혀 들지 않습니다. 커스텀 도메인을 연결하려면 도메인 구매 비용(연간 1~2만 원)이 발생하지만, .vercel.app 주소를 그대로 써도 됩니다.

Q. 디자인 감각이 없는데 괜찮을까요?

AI에게 "미니멀하고 모던한 디자인으로 만들어줘"라고 요청하면 깔끔한 결과물이 나옵니다. 색상 조합이 고민된다면 coolors.co에서 팔레트를 골라 AI에게 색상 코드를 전달하면 됩니다.

Q. 템플릿 사이트 대신 바이브코딩으로 만드는 이점이 뭔가요?

Wix나 Squarespace 같은 템플릿 서비스는 디자인 자유도가 제한되고 월 구독료가 발생합니다. 바이브코딩으로 직접 만들면 원하는 대로 커스터마이징할 수 있고, Vercel 무료 배포를 활용하면 유지비가 없습니다. 게다가 "직접 코드로 만든 포트폴리오"라는 것 자체가 어필 포인트가 됩니다.

⚠️ 면책조항: 이 글은 2026년 4월 기준으로 작성되었습니다. Next.js, Cursor, Vercel의 인터페이스나 기능은 업데이트에 따라 달라질 수 있습니다. 최신 정보는 각 서비스의 공식 문서를 확인하세요.

이 가이드를 따라 포트폴리오를 완성하셨다면, 다음 단계로 커스텀 도메인을 연결하거나 블로그 섹션을 추가해보세요. 처음 만든 포트폴리오가 완벽하지 않아도 괜찮습니다. 배포 후 점진적으로 개선해나가는 것이 가장 효과적인 방법입니다.

바이브코딩으로 포트폴리오 사이트 1시간 만에 만들기 (2026 실전 가이드)