THE
PORTFOLIO
SHIFT
50MB
PDF?
GRAVITY
ANTI
GRAVITY
채용담당자가
링크 기반 포트폴리오 선호
웹 포트폴리오 보유자의
면접 전환율
Recruiterflow 2025 · Fueler 채용 트렌드 리포트
CHAPTER 01
DATA
FIRST
OPEN
YOUR
FOLDER
이미지
스케치
프레젠테이션
기록
CHAPTER 02
VISUAL
REFERENCE
추출
구조 분석
조합
이미지로 전달
CHAPTER 03
STRUC
TURE
sabum profile.pdf
50MB · 메일 첨부 불가
고정된 페이지 순서
다운로드 후 열기
sabum.kr
URL 공유 · 즉시 접속
인터랙션 · 다크모드 · 다국어
모바일 · PC · 어디서든
CHAPTER 04
VIBE
CODING
YOUR
TOOLS
# Cursor — AI 코드 에디터의 시작
# Claude Code — 터미널에서 대화하는 AI
# Antigravity — 대화만으로 웹사이트 완성, 코드 편집 없이
# VS Code — 무료 코드 에디터
3분
열기
시작
확인
PLAN
FIRST
# 포트폴리오 사이트
## 목표 — 나를 소개하는 웹
## 구조 — Hero → 프로젝트 → 연락처
## 디자인 — 어두운 배경, 큰 세리프
## 기술 — HTML + CSS + 바이브코딩
이렇게 말하면
"웹사이트 만들어줘"
"예쁘게 해줘"
"이거 이상해"
이렇게 말하면
"포트폴리오 사이트, 어두운 배경, 큰 세리프 타이틀, 프로젝트 3열 그리드"
"Hero에 Kinetic Typography로 이름 등장, 스크롤 시 작업물 페이드인"
"헤더가 스크롤 시 사라짐 → 상단 고정으로 변경"
AI
IMAGE
# API 한 줄 — 이미지가 만들어진다
## Gemini — Google의 이미지 생성
## DALL·E — OpenAI의 이미지 생성
## Midjourney — 아트 디렉션의 정석
## 활용 — Hero 배경, 아이콘, OG 이미지
WATCH
OUT
× 파일명에 한글·공백 — 영문 소문자, 하이픈만
× 이미지 원본 그대로 — 1MB 이하로 압축
× 모바일 확인 안 함 — 반드시 실기기 테스트
× 커밋 없이 작업 — 수시로 저장, 수시로 커밋
× 완벽주의 — 일단 배포, 그다음 개선
CHAPTER 05
PUB
LISH
Git
버전 기록 도구
작업을 저장하고
언제든 되돌릴 수 있는
버전 관리 시스템
GitHub
Git + 웹 = 무료 배포
UP
DATE
01 수정 — 코드를 고치고
02 커밋 — 변경을 기록하고
03 푸시 — 세상에 반영한다
∞ 반복 — 계속 고치면 된다