포트폴리오 사이트 만들기: 구성과 공개 방법

개인 포트폴리오 웹사이트에 꼭 넣어야 할 내용, 직군별 구성 예시, AI로 직접 만드는 방법과 내 도메인으로 공개하는 방법을 정리했습니다.

2026년 10월 25일2분 분량

포트폴리오 사이트는 대표 작업 몇 개를 골라 과정과 결과를 보여 주고, 보는 사람이 바로 연락할 수 있게 만든 개인 웹사이트입니다. 작업을 많이 올리는 것보다 잘 고른 3~6개를 제대로 설명하는 편이 훨씬 효과적입니다. 아래에서 꼭 넣어야 할 내용, 직군별 구성, AI로 코딩 없이 만드는 방법을 순서대로 설명합니다.

포트폴리오 사이트에 꼭 넣어야 할 것

  • 첫 화면: 이름, 하는 일 한 줄, 대표 작업 이미지 하나.
  • 작업 목록: 3~6개의 대표 작업을 썸네일과 제목으로.
  • 작업 상세: 문제, 내 역할, 과정, 결과를 짧게. 가능하면 수치나 사용자 반응도 함께.
  • 소개: 경력, 잘하는 분야, 일하는 방식.
  • 연락처: 이메일이나 문의 양식. 모든 페이지에서 찾기 쉽게.

직군별 구성 예시

  • 디자이너: 큰 이미지 중심의 작업 상세, 과정 스케치와 최종안 비교, 사용한 도구.
  • 개발자: 프로젝트별 기술 스택, 직접 써 볼 수 있는 링크, 코드 저장소 링크, 맡은 부분.
  • 사진가: 장르별 갤러리, 촬영 문의 양식, 가격대 안내.
  • 작가·기획자: 대표 글이나 기획서 요약, 성과, 매체 이력.

작품 중심 포트폴리오에 대한 영어 가이드 art portfolio website도 참고할 만합니다.

글과 이미지를 먼저 준비하세요

화면을 만들기 전에 작업마다 제목, 세 문장 정도의 설명, 대표 이미지 2~3장을 준비합니다. 글이 없으면 사이트가 완성된 것처럼 보여도 내용이 비어 있습니다. 회사 작업이라면 공개해도 되는 범위인지 먼저 확인하세요.

AI로 포트폴리오 사이트 만들기

VibeDream에서 New Project를 누르고 Direct Prompt를 고른 뒤 아래처럼 한국어로 설명하면 됩니다. 화면은 현재 영어이지만 채팅은 한국어로 쓸 수 있습니다.

UX 디자이너 김하늘의 포트폴리오 사이트를 만들어 주세요.
페이지: 홈(이름, 한 줄 소개, 대표 작업 6개 썸네일), 작업 상세(문제, 역할, 과정, 결과, 이미지 여러 장), 소개(경력과 잘하는 분야), 연락(이메일과 문의 양식).
문의 양식으로 받은 내용은 저장하고 비밀번호로 보호된 /inbox 페이지에서 볼 수 있게 해 주세요.
분위기: 흰 배경, 넉넉한 여백, 큰 이미지, 휴대폰에서 먼저 보기 좋게.
모든 문구는 한국어로 해 주세요.

미리보기가 나오면 휴대폰 화면으로 바꿔 확인하고, 자리 표시 문구를 준비한 글로 한 페이지씩 바꿔 달라고 요청합니다. 작업 이미지는 채팅에 첨부해 어느 페이지에 넣을지 알려 주세요. 문의 양식으로 테스트 메시지를 보내 /inbox에 저장되는지도 확인하세요. 템플릿에서 시작하고 싶다면 Aesthetic Landing Page를 고른 뒤 채팅으로 포트폴리오에 맞게 바꿔도 됩니다.

왼쪽에 채팅, 오른쪽에 웹사이트의 실시간 미리보기가 있는 VibeDream 작업 화면
왼쪽에서 요청하고 오른쪽에서 확인합니다.

내 도메인으로 공개하기

Put it online을 누르면 1~3분 뒤 haneul.vibedreams.ai 같은 주소에 HTTPS로 공개되고, www 주소로 내 도메인도 연결할 수 있습니다. 도메인 연결 단계는 영어 배포 가이드와 홈페이지 만들기에서 설명합니다.

문의 양식으로 이름과 이메일을 받는다면 개인정보 처리방침 페이지도 함께 만들어 두세요.

비용

VibeDream은 월 49달러, 60크레딧의 All Access Mini부터 시작합니다. 크레딧은 메시지마다 쓰이고 큰 변경일수록 더 많이 씁니다. 코드는 Code 탭에서 볼 수 있고 ZIP으로 받거나 GitHub에 동기화할 수 있습니다. 요금은 요금 페이지에서 확인하세요.

자주 묻는 질문

아이디어를 앱으로 만들어 볼까요?

만들고 싶은 것을 설명하면 바로 실시간 미리보기로 확인할 수 있습니다.

앱 만들기 시작

다른 가이드