포트폴리오 호스팅, Vercel과 GitHub Pages의 갈림길

• 목록
• 답변
• 글쓰기
• 옵션
  • 수정
  • 삭제

포트폴리오가 같아도 호스팅에서 인상이 갈립니다

보이는 화면 뒤에서 평가되는 것

채용 담당자가 포트폴리오 링크를 눌렀는데 첫 화면이 늦게 열리거나 보안 경고가 나타난다면, 정성껏 만든 프로젝트 설명도 읽히기 어렵습니다. 반대로 페이지가 빠르게 열리고 주소가 깔끔하며 모바일에서도 안정적으로 작동하면 콘텐츠를 보기 전부터 관리할 줄 아는 사람이라는 인상을 줍니다.

포트폴리오 호스팅은 단순히 파일을 인터넷에 올리는 작업이 아닙니다. 코드 수정 후 자동 배포되는지, 개인 도메인을 연결할 수 있는지, 프로젝트별 미리보기 주소를 만들 수 있는지까지 포함한 운영 방식입니다. 포트폴리오라는 용어의 기본 범위가 궁금하다면 지식백과의 포트폴리오 설명도 함께 참고할 만합니다.

이 글에서는 개발자와 디자이너가 자주 검토하는 Vercel, GitHub Pages, Netlify 세 서비스를 비교합니다. 모두 무료로 시작할 수 있지만 사용 목적은 꽤 다릅니다. 어떤 서비스가 무조건 우수한지를 고르기보다 자신의 제작 방식과 업데이트 빈도에 맞는 도구를 찾는 것이 핵심입니다.

• 정적 HTML·CSS 중심: 서버 기능보다 단순성과 유지비가 중요합니다.
• Next.js·React 중심: 빌드 자동화와 프리뷰 배포가 작업 속도를 좌우합니다.
• 문의 폼이 필요한 사이트: 폼 처리와 서버리스 기능 지원을 확인해야 합니다.
• 취업 제출용 사이트: 장애 가능성, 주소의 신뢰도, 수정 반영 속도가 중요합니다.

호스팅은 방문자가 의식하지 않을 때 가장 잘 작동합니다. 멋진 기능보다 링크를 누른 즉시 안정적으로 열리는 경험을 먼저 확보하세요.

Vercel과 GitHub Pages, Netlify를 한눈에 놓아보기

무료라는 공통점보다 운영 방식의 차이가 큽니다

세 서비스 모두 Git 저장소와 연결해 포트폴리오를 공개할 수 있고, 사용자 도메인과 HTTPS를 지원합니다. 그러나 무료 플랜의 범위와 배포 과정, 동적 기능의 지원 수준은 서로 다릅니다. 특히 2026년 8월 기준으로 Vercel Hobby는 개인·비상업 프로젝트용이며, Netlify Free는 월간 크레디트 한도 방식으로 운영된다는 점을 알아둘 필요가 있습니다.

가격표의 무료 표시만 보고 결정하면 나중에 이전 작업이 생길 수 있습니다. 프리랜서 영업이나 유료 서비스 홍보처럼 상업적 성격이 있다면 Vercel Hobby의 용도 제한을 검토해야 하고, Netlify에서는 트래픽과 배포가 크레디트를 함께 소비한다는 점을 살펴야 합니다. GitHub Pages는 정적 사이트에 강하지만 서버에서 실행되는 인증, 데이터베이스 처리, API 비밀키 보관에는 적합하지 않습니다.

비교표를 읽을 때 놓치기 쉬운 조건

무료 사용량은 영구적으로 고정된 약속이 아니며 계정 생성 시점과 정책 변경에 따라 달라질 수 있습니다. 배포 직전에는 반드시 각 서비스 대시보드의 요금제와 사용량 화면을 확인하세요. 특히 이미지가 많은 프로젝트는 페이지 조회 수보다 전송량을 먼저 소모할 수 있습니다.

• 채용 제출용 개인 포트폴리오라면 무료 플랜으로 충분한 경우가 많습니다.
• 고객 프로젝트를 함께 운영한다면 상업 이용 조건과 팀 권한을 우선 비교합니다.
• 월간 한도를 넘었을 때 사이트가 일시 중지되는지, 추가 과금되는지 확인합니다.
• 도메인 구매 비용은 호스팅 무료 여부와 별도로 발생합니다.

개발 방식에 따라 첫 번째 선택이 달라집니다

Next.js라면 Vercel의 연결성이 빠릅니다

Next.js로 만든 포트폴리오라면 Vercel이 가장 자연스러운 출발점입니다. GitHub 저장소를 불러오면 프레임워크를 자동으로 감지하고, 커밋이 올라갈 때마다 빌드와 배포를 이어 줍니다. 프로젝트 상세 페이지를 동적으로 생성하거나 이미지 최적화, 서버 함수, 미리보기 배포를 이용한다면 설정 시간을 크게 줄일 수 있습니다.

다만 기능이 편리하다고 모두 켤 필요는 없습니다. 단순한 소개 사이트인데 서버 함수와 외부 데이터 호출을 과도하게 사용하면 장애 지점과 사용량만 늘어납니다. 또 Hobby 플랜은 개인·비상업 용도를 전제로 하므로, 유료 의뢰를 받는 스튜디오 사이트나 회사 서비스로 확장할 계획이라면 Pro 전환 비용까지 고려해야 합니다.

HTML과 문서형 프로젝트라면 GitHub Pages가 담백합니다

HTML, CSS, JavaScript로 구성된 정적 포트폴리오나 Jekyll 기반 기술 블로그에는 GitHub Pages가 잘 맞습니다. 별도 서버를 관리하지 않아도 저장소의 파일을 공개할 수 있고, 코드 이력과 실제 결과물을 한 계정 안에서 연결하기 좋습니다. 서버 기능을 쓰지 않는다는 제약은 오히려 구조를 단순하게 유지하는 장점이 됩니다.

반면 비공개 저장소 지원 범위는 GitHub 요금제에 영향을 받을 수 있고, 프레임워크 빌드가 필요하면 Actions 설정을 추가해야 할 수 있습니다. 문의 폼에 입력된 내용을 직접 처리하거나 API 키가 필요한 요청을 실행하는 코드를 브라우저에 넣어서는 안 됩니다. 필요한 경우 외부 폼 서비스나 별도 백엔드를 연결하세요.

• Vercel 우선: Next.js, 서버 함수, PR 프리뷰를 자주 사용합니다.
• GitHub Pages 우선: 정적 파일 중심이고 구조를 최대한 단순하게 유지하고 싶습니다.
• 다른 선택 검토: 비개발자가 콘텐츠를 자주 수정하거나 관리자 화면이 필요합니다.
• 공통 원칙: 저장소에 비밀번호, 토큰, 개인 연락처 원본을 커밋하지 않습니다.

Netlify는 폼과 배포 유연성이 필요한 순간 빛납니다

디자인 포트폴리오에 문의 동선을 붙이기 좋습니다

Netlify는 정적 사이트의 간결함을 유지하면서 문의 폼이나 서버리스 기능을 더하고 싶은 사용자에게 매력적입니다. Astro, Hugo, React 등 여러 프레임워크를 Git 저장소와 연결할 수 있고, 배포 프리뷰를 통해 수정본을 공개 주소로 확인할 수 있습니다. 개발자와 디자이너가 함께 검토하는 프로젝트라면 화면 캡처를 주고받는 것보다 프리뷰 링크 하나를 공유하는 편이 빠릅니다.

예를 들어 프로젝트 상세 페이지의 버튼 색상과 설명 순서를 바꿨다고 가정해 보겠습니다. 운영 주소를 바로 덮어쓰지 않고 브랜치 프리뷰에서 확인한 뒤 승인된 버전만 배포하면, 채용 담당자가 방문하는 동안 미완성 화면이 노출될 가능성을 줄일 수 있습니다. 간단한 의뢰 문의를 받는 포트폴리오라면 폼 처리 기능도 별도 서버 구축 부담을 낮춰 줍니다.

주의할 점은 현재 Free 플랜이 월 300크레디트 한도로 운영된다는 사실입니다. 프로덕션 배포, 대역폭, 웹 요청, 함수 실행 등이 크레디트 소비에 영향을 줄 수 있으므로 이미지 원본을 그대로 올리거나 사소한 수정마다 프로덕션 배포를 반복하는 습관은 피하는 편이 좋습니다. 한도에 도달하면 다음 주기까지 프로젝트가 멈출 수 있어 제출 시즌에는 사용량 알림을 확인해야 합니다.

• 이미지는 WebP 또는 AVIF로 변환하고 화면 크기에 맞춰 리사이즈합니다.
• 초안 검토에는 배포 프리뷰를 활용하고 프로덕션 배포 횟수를 줄입니다.
• 문의 폼에는 성공 메시지와 오류 메시지를 모두 설정합니다.
• 스팸 방지 기능을 켠 뒤 본인 이메일로 실제 수신 테스트를 진행합니다.
• 대시보드에서 월간 크레디트와 트래픽 변화를 주기적으로 확인합니다.

문의 폼은 존재하는 것보다 끝까지 작동하는지가 중요합니다. 제출 버튼, 수신함 도착, 자동 회신, 스팸함 이동까지 한 번의 실제 테스트로 연결해 보세요.

직무와 운영 상황을 먼저 넣으면 답이 선명해집니다

취업 준비생과 프리랜서의 기준은 같지 않습니다

프론트엔드 개발자라면 완성 화면뿐 아니라 브랜치 전략과 배포 흐름도 역량의 일부가 됩니다. 이 경우 Next.js 프로젝트를 Vercel에 연결하고 PR별 프리뷰 주소를 활용하면 구현 과정까지 설명하기 좋습니다. 면접에서는 자동 배포를 선택한 이유, 환경 변수를 분리한 방식, 오류 발생 시 되돌리는 절차를 짧게 이야기할 수 있습니다.

그래픽 디자이너나 콘텐츠 기획자는 복잡한 서버 기능보다 큰 이미지가 빠르게 열리고 프로젝트 설명을 쉽게 수정할 수 있는지가 중요합니다. 직접 코딩한 정적 페이지를 오래 유지할 계획이라면 GitHub Pages가 경제적입니다. 문의 폼, 리디렉션, 프리뷰 협업이 필요하다면 Netlify 쪽이 시간을 아껴 줄 수 있습니다.

프리랜서 포트폴리오는 개인 작품 전시를 넘어 영업 채널로 작동합니다. 무료 플랜의 상업 이용 조건, 트래픽 증가 시 비용, 고객 자료의 접근 권한을 더 엄격히 살펴야 합니다. 포트폴리오가 단순한 작품 묶음이 아니라 자신의 능력과 경험을 목적에 맞게 제시하는 수단이라는 관점은 포트폴리오 관련 지식백과 항목에서도 확장해 볼 수 있습니다.

상황별로 고르면 이렇게 나뉩니다

1. Next.js 취업 포트폴리오: Vercel을 선택하고 자동 배포와 프리뷰 기능을 활용합니다.
2. HTML 한 페이지 소개 사이트: GitHub Pages로 운영 복잡도와 월 비용을 낮춥니다.
3. 문의 접수가 중요한 디자인 사이트: Netlify에서 폼 처리와 배포 프리뷰를 검토합니다.
4. 고객과 여러 명이 관리하는 상업 사이트: 무료 플랜보다 팀 권한과 유료 요금의 예측 가능성을 우선합니다.
5. 아직 기술 구성이 정해지지 않은 경우: 샘플 한 페이지를 세 서비스에 배포해 빌드 시간과 수정 난이도를 직접 기록합니다.

무료 호스팅도 월 2시간의 운영 예산이 필요합니다

비용은 서버 요금과 관리 시간을 함께 계산합니다

개인 포트폴리오는 세 서비스 모두 월 0원으로 시작할 수 있지만, 실제 운영비가 완전히 0원인 것은 아닙니다. 사용자 도메인을 구입하면 확장자와 등록 업체에 따라 대체로 연간 수만 원 수준이 들고, 갱신 가격이 첫해 할인 가격보다 높을 수 있습니다. 이메일 주소까지 도메인에 맞추려면 메일 서비스 비용도 별도로 확인해야 합니다.

유료 전환 기준도 숫자로 정해 두면 판단이 쉬워집니다. Vercel Pro는 현재 월 20달러부터 시작하며 포함 사용량 이후에는 자원 사용에 따른 비용이 생길 수 있습니다. Netlify는 Free 0달러, Personal 월 9달러, Pro 월 20달러 구조를 제시하고 있지만, 계정과 정책에 따라 조건이 달라질 수 있으므로 결제 직전 공식 가격 화면을 다시 확인해야 합니다.

시간 예산도 마련하세요. 처음 연결에는 저장소 정리, 도메인 설정, HTTPS 확인을 포함해 약 2~4시간이 들 수 있습니다. 이후에는 매달 30분씩 링크와 문의 폼을 검사하고, 분기마다 1시간을 들여 패키지 업데이트와 모바일 화면을 확인하는 정도가 현실적입니다. 채용 지원 전날에는 최소 20분을 별도로 확보해 시크릿 창과 휴대전화 데이터 환경에서 주소를 열어 보는 편이 안전합니다.

작은 포트폴리오를 위한 현실적인 운영 수치

• 초기 구축: 서비스 연결 1시간, 도메인·DNS 1시간, 테스트 1~2시간을 잡습니다.
• 월간 관리: 30분 동안 깨진 링크, 인증서, 폼 수신, 사용량을 확인합니다.
• 이미지 기준: 대표 이미지는 가능하면 장당 300KB 안팎으로 줄이고 원본 다운로드는 분리합니다.
• 장애 대비: 마지막 정상 배포 주소와 저장소 릴리스 지점을 기록해 15분 안에 되돌릴 수 있게 합니다.
• 유료 전환 신호: 무료 한도의 70%를 두 달 연속 사용하거나 상업 운영 조건이 생기면 요금제를 재검토합니다.

처음부터 모든 기능을 갖추려 하면 공개가 늦어집니다. 정적 포트폴리오는 GitHub Pages, Next.js 프로젝트는 Vercel, 폼과 프리뷰가 중요한 사이트는 Netlify라는 출발점을 세우고 4시간 안에 첫 배포를 완료해 보세요. 이후 월 30분의 점검 기록이 쌓이면 서비스 이전이나 유료 전환도 감이 아니라 실제 사용량으로 결정할 수 있습니다.