AI 시대의 포트폴리오 완전 가이드
문서에서 웹으로
INTRODUCTION
PDF보다 URL이 편하다.
URL 하나면 누구나 바로 볼 수 있다.
클라우드 링크 공유는 번거롭고 만료됨
보는 사람이 순서를 바꿀 수 없음
정적 이미지만 가능, 영상/애니메이션 불가
파일을 받아야만 볼 수 있음. 모바일 불편
링크 하나로 전 세계 누구나 접근. 만료 없음
스크롤 애니메이션, 테마 전환, 언어 전환 가능
Git으로 버전 관리. 수정하면 바로 반영
반응형 레이아웃. 어떤 기기에서든 최적화
채용담당자가
링크 기반 포트폴리오 선호
웹 포트폴리오 보유자의
면접 전환율
GitHub Pages
호스팅 비용
Recruiterflow 2025 · Fueler 채용 트렌드 리포트
디자인 영감을 얻을 수 있는 사이트
CHAPTER 01
디자인보다 내용이 먼저다.
폴더부터 정리하자.
대부분의 사람들이 포트폴리오를 만들 때 디자인부터 시작한다. 하지만 내용 없이 디자인부터 시작하면 나중에 다시 고쳐야 한다.
먼저 폴더를 만들고, 여기에 자기소개, 프로젝트 이미지, 설명 텍스트, 레퍼런스를 정리하면 된다. 이 데이터가 포트폴리오의 기본이 된다.
폴더를 잘 정리하면 사이트도 정리된다.
portfolio/
├── 📁 images/
│ ├── hero-photo.jpg # 프로필 사진
│ ├── project-01/
│ │ ├── thumbnail.jpg # 썸네일 (16:9)
│ │ ├── detail-01.jpg # 상세 이미지
│ │ └── detail-02.jpg
│ └── project-02/
│ └── ...
│
├── 📁 content/
│ ├── about.md # 자기소개
│ ├── projects.json # 프로젝트 데이터
│ └── contact.md # 연락처
│
├── 📁 reference/
│ ├── layout-inspiration/ # 레이아웃 참고
│ ├── color-palette/ # 컬러 참고
│ └── typography/ # 서체 참고
│
└── 📄 README.md # 프로젝트 설명이름, 직함(또는 되고 싶은 직함), 한 줄 소개, 2-3줄 자기소개.
"안녕하세요, UX 디자이너 김철수입니다. 사용자의 문제를 데이터로 풀어가는 디자이너입니다."
최소 3개 프로젝트. 프로젝트당 썸네일 1장 + 상세 이미지 2-4장.
1200×675px (16:9 비율)1600px 이상 폭, 1MB 이하각 프로젝트마다: 제목, 기간, 역할, 사용 도구, 한 줄 요약, 상세 설명.
{
"title": "커피숍 브랜딩",
"period": "2024.09 - 2024.11",
"role": "Brand Designer",
"tools": ["Figma", "Illustrator"],
"summary": "로컬 커피숍의 브랜드 아이덴티티 리디자인",
"link": "https://www.behance.net/..."
}능숙한 도구와 기술 스택. 숙련도를 표시하면 더 좋다.
이메일, LinkedIn, Behance, Dribbble, GitHub 등 — 실제 URL을 미리 정리하세요.
CHAPTER 02
"모던하게 해줘"만으로는 부족하다.
레퍼런스가 필요하다.
"깔끔하게", "모던하게"는 수백 가지로 해석된다. 레퍼런스 없이 시작하면, 작업 방향이 매번 흔들린다.
좋은 포트폴리오를 5개만 모아도 방향이 잡힌다. 컬러, 레이아웃, 타이포그래피 — 구체적인 기준이 생긴다.
레퍼런스는 따라하기가 아니라, 방향을 잡는 것이다.
레퍼런스를 그냥 모으기만 하면 소용이 없다.
분석하고, 추출하고, AI에게 전달하는 것까지가 하나의 프로세스다.
레퍼런스에서 주요 컬러 3-5개를 뽑아낸다. 배경색, 강조색, 텍스트 컬러를 구분한다.
섹션 구성, 그리드, 여백 비율을 관찰한다. 어떤 순서로 정보를 배치했는지 파악한다.
제목과 본문의 서체 조합, 사이즈 위계, 자간/행간을 분석한다.
분석한 레퍼런스 이미지를 AI에게 보여주며 "이 스타일로 만들어줘"라고 대화한다.
# 레퍼런스 이미지와 함께 전달하는 프롬프트
이 웹사이트의 디자인 스타일을 참고해서
포트폴리오 사이트를 만들어줘.
# 구체적으로 지정할 요소들:
- 컬러: 다크 배경 + 옐로우 포인트
- 레이아웃: 풀스크린 히어로 + 카드 그리드
- 서체: 영문 산세리프 + 한글 프리텐다드
- 톤: 미니멀, 모던, 타이포 중심
# 이렇게 하면 안 된다:
- ❌ "깔끔하게 만들어줘"
- ❌ "트렌디한 느낌으로"
- ✅ "첨부한 이미지처럼 만들어줘"CHAPTER 03
구조부터 잡는다.
어떤 포트폴리오 사이트든 결국 같은 구조 위에 있다. 5개 섹션만 기억하면 된다.
이 구조 위에 자신만의 콘텐츠를 채우면 된다. 구조가 먼저, 디자인은 그 다음이다.
대부분의 포트폴리오가 따르는 구조다.
방문자가 가장 먼저 보는 화면. 풀스크린 이미지 또는 타이포그래피로 강한 첫인상을 만든다. 이름 + 직함 + 한 줄 소개만 있으면 충분하다.
나는 어떤 문제를 풀고 싶은 사람인가. 경력보다 가치관과 관점이 더 중요하다. 프로필 사진 + 2~3줄 소개면 된다.
카드 그리드 레이아웃으로 대표 프로젝트를 보여준다. 썸네일 + 프로젝트명 + 역할 + 한 줄 설명. 클릭하면 상세 페이지로.
Figma, Photoshop 같은 도구 나열보다 "어떤 문제를 풀 수 있는가"가 핵심이다. 아이콘 + 태그로 간결하게.
이메일, LinkedIn, Behance 링크를 명확히 배치한다. CTA 버튼("함께 일해요") 하나면 충분하다.
<!-- 포트폴리오 기본 구조 -->
<section id="hero">
<h1>김철수</h1>
<p>UX Designer</p>
</section>
<section id="about">
<img src="profile.jpg" />
<p>사용자 문제를 데이터로 풀어가는...</p>
</section>
<section id="projects">
<div class="project-grid">
<div class="card">...</div> <!-- 프로젝트 1 -->
<div class="card">...</div> <!-- 프로젝트 2 -->
<div class="card">...</div> <!-- 프로젝트 3 -->
</div>
</section>
<section id="skills">
<div class="skill-tags">...</div>
</section>
<section id="contact">
<a href="mailto:hello@me.com">이메일</a>
<a href="https://linkedin.com/...">LinkedIn</a>
</section>코드를 복사해서 바로 쓸 수 있는 사이트들. 화려한 Hero 섹션부터 UI 컴포넌트까지.
CHAPTER 04
코드 대신 말로 만든다.
HTML을 외울 필요 없다. CSS를 공부할 필요 없다. AI에게 말하면 코드가 나온다.
도구는 달라도 방법은 같다 — 대화. 설치 3분, 첫 사이트 10분이면 충분하다.
구체적으로 말하면 결과가 정확해진다.
설치 3분, 첫 사이트 10분
계획이 있으면 AI가 더 정확하다
# 포트폴리오 사이트
## 목표
나를 소개하는 웹사이트
## 구조
Hero → 프로젝트 → 연락처
## 디자인
- 어두운 배경
- 큰 세리프 타이틀
- 프로젝트 카드 그리드
## 기술
HTML + CSS + 바이브코딩포트폴리오에 필요한 이미지, AI가 만든다
Google의 이미지 생성
OpenAI의 이미지 생성
아트 디렉션의 정석
Hero 배경 · 아이콘 · OG 이미지
자주 하는 실수들
영문 소문자, 하이픈만 사용하라
1MB 이하로 압축하라
반드시 실기기 테스트하라
수시로 저장, 수시로 커밋하라
일단 배포, 그다음 개선하라
CHAPTER 05
만들었으면 배포한다.
코드를 완성했으면 배포한다. GitHub Pages는 무료 호스팅이다.
username.github.io — 이 주소가 당신의 포트폴리오 도메인이 된다.
먼저 배포하고, 조금씩 고쳐나가면 된다.
작업을 저장하고 언제든 되돌릴 수 있는 버전 관리 시스템
코드를 올리면 사이트가 열린다
3단계로 배포 완료
브라우저에서 github.com에 접속한다.
무료 계정을 생성한다. 이메일과 비밀번호만 있으면 된다.
이 username이 곧 나의 도메인이 된다. username.github.io
# 1. Git 초기화
git init
# 2. 파일 추가 & 커밋
git add .
git commit -m "first commit"
# 3. GitHub에 연결 & 푸시
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main
# 완료! https://username.github.io 에서 확인수정 → 커밋 → 푸시, 반복
코드를 고치고
변경을 기록하고
세상에 반영한다
계속 고치면 된다
실습에 필요한 템플릿을 다운로드하세요
PRD는 Product Requirements Document의 약자입니다.
쉽게 말하면 “이렇게 만들어줘”를 정리한 요청서입니다.
글을 쓰는 형식입니다.# - ** 같은 기호로 제목, 목록, 굵은 글씨를 씁니다.
메모장에서도 열 수 있는 텍스트 파일입니다.
글의 내용입니다.
구조, 디자인, 콘텐츠를 정리해서 AI에게 전달합니다.
마크다운 형식으로 작성하면 AI가 가장 잘 읽습니다.
아래 템플릿을 다운로드해서 내용을 채운 후, Antigravity에 붙여넣으면 됩니다.