포트폴리오 링크는 늘 좋은 상황에서 열리지 않습니다. 채용 담당자가 회의 사이에 휴대폰으로 볼 수도 있고, 클라이언트가 전달받은 이메일에서 바로 열 수도 있습니다. 면접 직전 여러 후보의 작업물을 비교하는 자리에서 열리는 경우도 흔합니다.
그 링크의 일은 하나입니다. 작업물을 빠르게 확인할 수 있어야 합니다.
디자이너, 프론트엔드 개발자, 사진가, 작가, 모션 디자이너, 학생, 프리랜서, 소규모 스튜디오라면 대부분 정적 포트폴리오만으로 충분합니다. 케이스 스터디, 고해상도 이미지, 라이브 데모, 프로토타입, 프로젝트 메모, 소스 코드, 영상, 연락처를 서버 운영 없이 담을 수 있습니다. 어려운 부분은 호스팅 자체가 아닙니다. 올바른 파일을 배포하고, 페이지를 가볍게 유지하고, 전문적으로 보이는 URL에 작업물을 올리는 일입니다.
포트폴리오 호스팅이 해결해야 하는 것
포트폴리오는 단순한 갤러리가 아닙니다. 내가 어떤 일을 했고, 어떤 판단을 했고, 실제로 확인할 수 있는 결과가 무엇인지 보여주는 증거 공간입니다.
| 필요 | 실제 의미 |
|---|---|
| 관리 가능한 정체성 | 플랫폼 프로필 URL에만 의존하지 않고 내 도메인을 사용합니다. |
| 깊이 있는 케이스 스터디 | 배경, 역할, 제약, 과정, 결과, 근거를 보여줍니다. |
| 시각 자료의 품질 | 모든 이미지를 피드 형식에 맞추지 않고 문맥과 크기에 맞게 제공합니다. |
| 실제 확인 | 프로토타입, 정적 데모, 작은 웹앱, 문서, 코드로 연결합니다. |
| 비공개 검토 | 미완성 작업이나 민감한 작업을 필요할 때 비밀번호로 보호해 공유합니다. |
| 안전한 업데이트 | 내보내기 오류, 이미지 경로 문제, 프로젝트 페이지 오류가 생기면 교체하거나 되돌릴 수 있습니다. |
좋은 호스팅 흐름은 처음에는 단순하게 시작하고, 필요해지면 더 진지한 전문 사이트로 커질 수 있어야 합니다.
정적 포트폴리오와 웹사이트 빌더
포트폴리오 플랫폼과 웹사이트 빌더는 편리합니다. 발견성과 빠른 편집에는 장점이 있습니다. 하지만 포트폴리오 자체의 구조, 인터랙션, 퍼포먼스까지 평가 대상이라면 독립적인 정적 사이트가 더 잘 맞습니다.
| 선택지 | 잘 맞는 경우 | 한계 |
|---|---|---|
| 포트폴리오 플랫폼 | 빠른 작품 업로드, 커뮤니티, 노출 | 구조, 브랜딩, URL, 인터랙션 제어가 제한됩니다. |
| 웹사이트 빌더 | 노코드 편집, 템플릿, 빠른 페이지 제작 | 월 비용, 내보내기 제한, 플랫폼 종속성이 남을 수 있습니다. |
| 정적 포트폴리오 | 커스텀 디자인, 정적 export, 코드 포트폴리오, 인터랙티브 데모 | 파일, 에셋, 배포 절차를 직접 관리해야 합니다. |
UI 디자이너에게 포트폴리오는 인터페이스 샘플입니다. 프론트엔드 개발자에게는 구현 샘플입니다. 스튜디오에는 첫 브랜드 접점이 될 수 있습니다. 이런 경우라면 다른 플랫폼 안의 프로필처럼 보이는 것보다, 내가 관리하는 독립 사이트처럼 보이는 편이 낫습니다.
자주 쓰는 도구에서 무엇을 배포해야 할까
가장 흔한 실수는 잘못된 폴더를 업로드하는 것입니다.
| 도구 또는 스택 | 보통 배포할 것 | 업로드 전 확인 |
|---|---|---|
| HTML/CSS/JS | index.html이 들어 있는 폴더 | 이미지, 폰트, 스크립트, 프로젝트 페이지를 포함합니다. |
| Framer export | 내보낸 정적 폴더 | 에셋 경로와 반응형 레이아웃을 확인합니다. |
| Webflow export | 내보낸 사이트 폴더 | 커스텀 코드와 폼 동작을 확인합니다. |
| Vite | npm run build 후의 dist | 중첩 라우트가 있으면 base path를 확인합니다. |
| React static build | build 또는 프레임워크 출력 | 클라이언트 라우팅과 에셋 경로를 테스트합니다. |
| Next static export | out | 정적으로 export 가능한 라우트에만 사용합니다. |
| Astro / Eleventy / Hugo / Jekyll | 생성된 output 폴더 | 호스트가 빌드를 실행하지 않는다면 소스를 올리지 않습니다. |
Cloudflare Pages는 빌드된 에셋을 직접 올리는 Direct Upload를 문서화합니다. 포트폴리오에는 이 방식이 잘 맞습니다. 많은 포트폴리오는 깔끔한 CI 파이프라인이 아니라 완성된 export 폴더에서 시작하기 때문입니다.
홈페이지보다 케이스 스터디 페이지가 중요하다
홈페이지는 첫인상을 만듭니다. 신뢰는 프로젝트 페이지에서 생깁니다.
| 질문 | 중요한 이유 |
|---|---|
| 어떤 문제였나 | 보는 사람이 브리프, 대상 사용자, 제약을 빠르게 이해해야 합니다. |
| 내 역할은 무엇이었나 | 팀 프로젝트에서 실제로 무엇을 맡았는지 알아야 합니다. |
| 어떤 결정을 했나 | 결과물이 깔끔할수록 판단 과정 설명이 더 중요합니다. |
| 출시 후 무엇이 달라졌나 | 지표, 코멘트, 전후 비교, 배운 점이 신뢰를 만듭니다. |
| 어디에서 확인할 수 있나 | 데모, 프로토타입, 영상, 소스 코드, 자세한 글로 연결합니다. |
모든 프로젝트 페이지가 같은 길이일 필요는 없습니다. 작은 CSS 실험은 짧은 설명과 데모면 충분합니다. 제품 리디자인은 완성도 있는 케이스 스터디가 필요합니다. 비공개 클라이언트 작업은 공개 요약과 제한된 공유 링크를 나누는 편이 안전합니다.
강한 시각 자료를 보여주되 사이트를 무겁게 만들지 않기
포트폴리오는 작업물이 좋아도 페이지가 무거우면 바로 이탈이 생깁니다.
배포 전 확인하세요.
- 레이아웃에서 실제로 쓰는 크기에 맞춰 이미지를 export합니다.
- 워크플로가 허용한다면 최신 이미지 포맷을 사용합니다.
- 영상을 압축하고 큰 배경 영상의 자동 재생은 피합니다.
- 긴 갤러리는 lazy-load합니다.
- 원본 고해상도 파일은 정말 필요한 곳에서만 제공합니다.
- 큰 모니터뿐 아니라 휴대폰과 일반 네트워크에서도 테스트합니다.
배포 후에는 분석 데이터가 도움이 됩니다. 중요한 케이스 스터디에 방문은 있는데 금방 나간다면, 작업물의 문제가 아니라 이야기 구조, 미디어 용량, 모바일 레이아웃 문제일 수 있습니다.
진지하게 사용할 포트폴리오는 커스텀 도메인에 두기
미리보기 URL은 첫 검토에는 충분합니다. 하지만 취업, 프리랜스 영업, 클라이언트 제안에 쓰는 포트폴리오는 직접 관리하는 도메인에 두는 편이 좋습니다.
| 패턴 | 예시 |
|---|---|
| 개인 이름 | alexchen.dev, maria.design |
| 스튜디오 이름 | northline.studio |
| 직무 중심 | productdesigner.name, frontend.dev |
| 서브도메인 | work.example.com, portfolio.example.com |
커스텀 도메인은 보기 좋기만 한 것이 아닙니다. 기억하기 쉽고, 이력서와 이메일 서명에 넣기 쉽고, 나중에 도구를 바꿔도 같은 주소를 유지하기 쉽습니다. Google은 프로필 페이지 구조화 데이터도 안내합니다. 사이트의 사람이나 조직 정보를 검색엔진에 전달하는 데 도움이 될 수 있습니다. 순위를 올리는 편법은 아니지만, 포트폴리오를 실제 웹 자산으로 다룰 이유는 됩니다.
아직 공개하면 안 되는 작업 보호하기
포트폴리오에는 클라이언트명, 출시 전 화면, 내부 지표, 제안 작업, 팀 프로젝트, NDA가 걸린 스크린샷이 섞일 수 있습니다.
| 작업 유형 | 더 안전한 공개 방식 |
|---|---|
| 공개 출시된 작업 | 이미지와 링크가 있는 공개 케이스 스터디. |
| 승인됐지만 제한이 있는 작업 | 공개 요약과 비밀번호 보호된 상세 내용. |
| NDA 또는 출시 전 작업 | 정보를 가린 페이지 또는 비공개 검토 링크. |
| 팀 프로젝트 | 내 역할과 협업자를 명확히 표시합니다. |
| 지표 | 정확한 숫자가 민감하면 범위나 정성적 결과로 표현합니다. |
비밀번호 보호는 법적 검토를 대체하지 않습니다. 공유 범위를 좁히는 실무 도구입니다. 계약상 민감한 작업이라면 세부 내용을 공개하기 전에 허락을 받아야 합니다.
포트폴리오 분석에서 봐야 할 것
포트폴리오 분석은 복잡할 필요가 없습니다. 몇 가지 질문에 답하면 됩니다.
| 질문 | 유용한 신호 |
|---|---|
| 사람들이 포트폴리오를 여는가 | 방문, 방문자, 국가, 리퍼러. |
| 어떤 작업이 관심을 받는가 | 상위 페이지와 프로젝트 경로. |
| 채용 담당자나 클라이언트가 올바른 경로에서 오는가 | LinkedIn, 이메일, 채용 플랫폼, 개인 도메인 리퍼러. |
| 사이트가 너무 무거운가 | 대역폭, 기기, 브라우저, 모바일 트래픽. |
| 새 버전이 무언가를 망가뜨렸는가 | 주요 페이지의 갑작스러운 하락이나 반복되는 404. |
이력서 PDF, LinkedIn 게시물, 콜드 메일, 프로젝트 제안서에 포트폴리오 링크를 넣는다면 UTM을 붙여 두세요. 그러면 “누군가 봤다”가 추측이 아니라 판단 근거가 됩니다.
DeployPages가 맞는 경우
DeployPages는 포트폴리오가 정적 사이트이거나 정적 export이고, 브라우저에서 통제된 방식으로 배포하고 싶을 때 잘 맞습니다.
HTML 폴더, ZIP, Framer export, 정적 빌드 출력, 작은 라이브 데모, PDF 케이스 스터디 자료, 전체 포트폴리오 사이트를 브라우저에서 업로드할 수 있습니다. 포트폴리오가 커지면 같은 프로젝트에서 커스텀 도메인, 분석, 비밀번호 보호, 즉시 롤백, CLI 배포를 사용할 수 있습니다.
포트폴리오부터 시작한다면 portfolio hosting을 사용할 수 있습니다. 이력서 페이지가 출발점이라면 resume hosting을 참고하세요. 단순 HTML 폴더를 올린다면 HTML deployment guide가 가장 빠릅니다.
공개 전 체크리스트
포트폴리오 링크를 넓게 공유하기 전에 확인하세요.
- 모든 주요 페이지와 케이스 스터디 페이지를 엽니다.
- 히어로, 갤러리, 캡션, 프로젝트 카드의 모바일 표시를 확인합니다.
- 이미지, 영상, PDF, 불필요한 export 에셋을 압축합니다.
localhost, 개인 파일 경로, placeholder 문구, 임시 프로젝트명을 제거합니다.- 명확한 연락 경로를 둡니다.
- 전문적으로 사용할 포트폴리오라면 커스텀 도메인을 연결합니다.
- 민감한 작업은 가리거나 비밀번호로 보호합니다.
- 데모, 소스 코드, 프로토타입, 외부 미디어 링크를 테스트합니다.
- 큰 리디자인을 올리기 전에는 롤백 경로를 확보합니다.
포트폴리오는 거대할 필요가 없습니다. 확인하기 쉽고, 충분히 빠르고, 내 역할을 솔직하게 보여주고, 기억하기 쉬운 주소에 있으면 됩니다.