포트폴리오 사이트 — AI와 함께 직접 만들기

이 시리즈의 글

1. 바이브 코딩이 뭔데?
2. HTML, CSS, JavaScript — AI와 함께 처음부터 이해하기
3. 프롬프트의 기술 — AI에게 잘 부탁하는 법
4. 지금 읽고 있는 글 포트폴리오 사이트 — AI와 함께 직접 만들기
5. 배포까지 — Vercel로 세상에 공개하는 법

---

왜 코드로 포트폴리오를 만들까요?

디자이너에게 포트폴리오는 가장 중요한 자산이에요. Behance나 Notion도 좋지만, 직접 코드로 만든 포트폴리오는 특별한 장점이 있어요.

AI와 함께라면 "시간 투자"라는 단점이 거의 사라져요. 오늘 이 글을 따라가면 하루 만에 완성할 수 있어요.

---

프로젝트 시작하기

터미널에서 다음 명령어로 Next.js 프로젝트를 생성해요.

npx create-next-app@latest my-portfolio

설정 질문이 나올 때 이렇게 선택하세요:

TypeScript? → Yes
ESLint? → Yes
Tailwind CSS? → Yes
src/ directory? → Yes
App Router? → Yes

프로젝트가 생성되면 에디터로 열어볼까요.

cd my-portfolio
code .

Tip: VS Code 말고도 Cursor, Windsurf 등 AI 기능이 내장된 에디터를 써도 좋아요.

---

포트폴리오의 기본 구조

포트폴리오 사이트는 크게 5개 섹션으로 나뉘어요.

AI에게 이 구조를 알려주고 하나씩 만들어볼게요.

---

섹션 1: Hero — 강렬한 첫인상

AI에게 이렇게 요청해보세요:

포트폴리오 Hero 섹션을 만들어줘.
- 배경: 어두운 그라데이션 (zinc-950 → zinc-900)
- 이름: 큰 볼드 텍스트
- 직함: "UI/UX Designer & Creative Developer"
- 한 줄 소개: 부드러운 fade-in 애니메이션
- Tailwind CSS 사용

AI가 생성한 코드를 src/app/page.tsx에 넣으면 바로 보여요. 마음에 안 드는 부분이 있다면?

Hero 섹션에서 이름 폰트를 더 크게 하고,
직함 색상을 #E5FD52 (연두색 포인트)로 바꿔줘

이렇게 대화하듯이 수정하면 돼요. 이게 바이브 코딩의 핵심이에요.

---

섹션 2: Projects — 작업물 카드 그리드

프로젝트 섹션은 가장 중요한 부분이에요.

Projects 섹션을 만들어줘.
- 그리드 레이아웃 (2열, 모바일은 1열)
- 각 카드: 썸네일 이미지, 프로젝트 이름, 짧은 설명, 사용 도구 태그
- 카드에 hover하면 살짝 올라오는 효과
- 데이터는 배열로 관리해서 쉽게 추가/삭제 가능하게

AI가 만들어준 코드에서 프로젝트 데이터를 내 작업물로 교체하면 돼요.

const projects = [
  {
    title: "브랜드 리뉴얼",
    description: "식음료 브랜드의 아이덴티티를 재설계했어요",
    tags: ["Branding", "Figma", "Illustrator"],
    image: "/projects/brand-renewal.jpg",
    link: "https://behance.net/...",
  },
  // 계속 추가...
];

Tip: 이미지는 public/projects/ 폴더에 넣으면 /projects/파일명으로 바로 사용할 수 있어요.

---

섹션 3: About & Skills

About 섹션을 만들어줘.
- 왼쪽: 프로필 사진 (둥근 모서리)
- 오른쪽: 자기소개 텍스트
- 아래: 스킬 바 (Figma 90%, Photoshop 85%, HTML/CSS 70%, React 50%)
- 스킬 바는 애니메이션으로 채워지는 효과

스킬 바를 표로 정리하는 것도 깔끔해요:

---

섹션 4: Contact — 마무리

Contact 섹션을 만들어줘.
- 이메일 주소 (클릭하면 메일 앱 열리게)
- SNS 링크 (인스타그램, 링크드인)
- "함께 일해요" 같은 따뜻한 CTA 문구
- 미니멀하게

---

반응형 디자인 확인하기

만들면서 꼭 모바일 화면도 체크하세요. 브라우저에서 F12 → 모바일 아이콘을 누르면 돼요.

AI에게 수정을 요청할 때도 구체적으로:

모바일에서 Projects 그리드가 2열인데 1열로 바꿔줘.
Hero 텍스트도 모바일에서는 좀 더 작게 조절해줘.

---

디자이너만의 강점을 살리세요

코드를 AI가 짜주지만, 디자인 감각은 여러분의 것이에요.

• 컬러: 포트폴리오 전체 색상 팔레트를 먼저 정하세요
• 타이포그래피: Google Fonts에서 마음에 드는 폰트 조합을 찾아보세요
• 여백: 넉넉한 padding과 margin이 고급스러움을 만들어요
• 일관성: 모든 섹션에서 같은 스타일 규칙을 유지하세요

전체 사이트의 색상을 이렇게 통일해줘:
- 배경: #09090b (zinc-950)
- 주요 텍스트: white
- 보조 텍스트: #a1a1aa (zinc-400)
- 포인트: #E5FD52
- 테두리: #27272a (zinc-800)

---

다음 글 예고

포트폴리오를 만들었으면 이제 세상에 공개할 차례예요! 다음 글에서는 Vercel을 이용해서 무료로 배포하는 방법을 알려드릴게요. 내 도메인을 연결하는 것까지요!