10분 만에 만드는 포트폴리오 웹사이트, 코딩 몰라도 여기까지 한다

포트폴리오 웹사이트를 직접 만들겠다고 마음먹는 순간, 머릿속에 이런 생각부터 스쳐 지나갑니다.

• “도메인은 또 뭐고, 호스팅은 어디서 해야 하지?”
• “HTML이니 CSS니 자꾸 말은 들었는데, 내가 이걸 할 수 있을까?”

그래서 대부분의 사람들은 결국 PPT나 PDF 포트폴리오에 머무릅니다. 파일로만 있어도 당장 지원은 할 수 있으니까요. 하지만 막상 상대 입장에서 생각해 보면, 링크 하나만 눌러서 내 포트폴리오를 볼 수 있는 사람과, 굳이 파일을 열어봐야 하는 사람 중 누가 더 기억에 남을지는 이미 답이 나와 있습니다.

좋은 소식은, 이제는 이 격차를 줄이는 일이 예전보다 훨씬 쉬워졌다는 점입니다. Gemini 같은 생성형 AI, Google AI 스튜디오, GitHub, Vercel을 한 번만 연결해두면, 그 다음부터는 정말 말 그대로 “10분짜리 작업”에 가까워집니다.

이 글은 강의에서 설명했던 과정을 그대로 가져와서, 실제로 따라 하면 그대로 사이트가 나오는 흐름으로 사람 말투에 가깝게 정리한 버전입니다.

1. PPT 포트폴리오, 왜 아쉽게 느껴질까

PPT는 발표용으로는 최고지만, 읽기용 매체로는 한계가 분명합니다.

• 슬라이드는 한 장 한 장 끊겨 있어서, 전체 스토리가 한 번에 잡히지 않습니다.
• 파일을 열어야 하니, 모바일에서 보기에도 은근히 번거롭습니다.
• 특정 프로젝트를 다시 찾아보기도 쉽지 않습니다.

웹 포트폴리오는 정반대입니다.

• URL 하나면 어디서든 열립니다.
• 위에서 아래로 자연스럽게 읽을 수 있습니다.
• 검색엔진·내부 검색 모두에 잘 잡힙니다.

그러니까, PPT 포트폴리오가 이미 있는 분이라면 “새로 만드는 것”이 아니라 “한 단계 업그레이드하는 것” 정도로 생각하면 부담이 훨씬 줄어듭니다.

2. AI가 이해할 수 있는 포맷으로 내용부터 정리하기

웹을 만들겠다고 해서, 처음부터 개발 툴부터 열 필요는 없습니다. 오히려 그 전에 할 일은 내 이야기를 AI가 읽기 좋은 텍스트로 정리해 두는 것입니다.

형식은 뭐든 괜찮습니다.

• Google Docs
• Word
• 한글 문서

중요한 건 구조입니다. 예를 들어 생산성 컨설턴트 포트폴리오라면 이렇게 나눌 수 있겠죠.

1. 나라는 사람에 대한 한 줄 소개
2. 어떤 문제를 풀어주는 사람인지, 핵심 역량
3. 실제로 함께 일했던 기업·조직 목록
4. 대표 프로젝트와 그 결과(숫자까지 있으면 금상첨화)

AI에게 “이 내용을 기반으로 웹 포트폴리오를 만들어 달라”고 할 예정이기 때문에, 문장 하나하나를 예쁘게 쓰는 것보다, 큰 덩어리를 잘 나눠놓는 게 훨씬 중요합니다.

3. Framer·Webflow에서 ‘나 닮은’ 템플릿 고르기

다음 단계는 겉모습, 즉 레이아웃 레퍼런스 찾기입니다. 여기서 직접 디자인을 튀어나오게 새로 할 필요는 없습니다. 이미 잘 만든 포트폴리오 템플릿이 세상에 널려 있으니까요.

Framer나 Webflow 같은 곳에 들어가서 검색창에 portfolio만 쳐 봐도, 수십 개의 템플릿이 나옵니다. 이 중에서 아래 네 가지 기준에 맞는 것만 골라도 반은 성공입니다.

• 맨 위에 이름과 한 줄 소개가 큼직하게 보이는지
• 서비스·역량을 자연스럽게 나열할 수 있는 섹션이 있는지
• 기업 로고, 프로젝트 카드 등을 모아둘 수 있는 공간이 있는지
• 맨 아래에 문의, 연락처, 버튼 같은 콜투액션이 있는지

완벽한 것을 찾으려다 시간을 다 쓰기 쉬우니, “내 포트폴리오를 이 레이아웃에 얹었을 때 어색하지 않겠다” 정도면 충분합니다.

4. 템플릿 페이지 전체를 캡처해서 AI에게 보여주기

여기서 우리가 할 일은 디자인을 그대로 가져오는 게 아니라, AI에게 참고용으로 보여주는 것입니다. 그래서 템플릿 페이지를 통째로 이미지로 만들어 둡니다.

방법은 간단합니다.

1. 크롬에서 템플릿 페이지를 연다.
2. 전체 페이지 캡처 확장 프로그램을 설치한다. (예: GoFullPage)
3. 페이지를 끝까지 스크롤한 뒤, 한 번에 전체를 캡처한다.

이 이미지는 곧 “이런 모양으로 내 포트폴리오를 꾸며줘”라고 AI에게 설명할 때 쓰이는 자료가 됩니다.

5. Google AI 스튜디오 Builder에서 ‘사이트 뼈대’ 뽑아내기

이제 본격적으로 Google AI 스튜디오의 Builder를 엽니다. 이 화면은 쉽게 말해서, 디자인 이미지와 텍스트를 넣으면 웹사이트 코드가 나오는 공간입니다.

진행 순서는 이렇습니다.

1. Google AI 스튜디오 접속 → Builder 앱 열기
2. 새 프로젝트 생성 후 약관 동의
3. 입력란에 템플릿 전체 이미지를 Ctrl + V로 붙여넣기
4. 그 아래에 내가 정리해 둔 포트폴리오 텍스트 붙여넣기
5. 마지막으로 프롬프트 작성

예를 들면, 이런 식으로 쓸 수 있습니다.

“첨부한 이미지의 디자인을 활용해서 아래 내용에 있는 포트폴리오를 만들어줘. 웹사이트 디자인 코드로 만들어줘. GitHub에 저장하고 Vercel에 배포를 할 거야. 알아서 코드를 잘 만들어줘.”

엔터를 누르고 잠시 기다리면, AI가 이미지를 뜯어보면서 어느 부분이 어떤 섹션인지 파악하고, 그 아래 텍스트와 매칭해서 기본 웹사이트 뼈대를 가진 코드를 만들어 줍니다.

코드 탭을 보면 HTML·CSS 구조가 생겨 있고, Preview 탭에서는 실제 페이지 모양을 확인할 수 있습니다. 이때까진 그냥 “나쁘지 않은 템플릿 복사본” 정도의 상태라고 보면 됩니다.

6. 클릭하면 팝업이 뜨는 인터랙션까지 AI에게 맡기기

포트폴리오 사이트가 ‘고급져 보이는’ 포인트 중 하나가, 카드를 클릭했을 때 뜨는 팝업 모달입니다. 이걸 직접 자바스크립트로 짜려면 머리가 지끈한데, Builder 안에서는 설명만 잘 해 주면 AI가 알아서 구현해 줍니다.

1. Preview에서 팝업으로 만들고 싶은 영역(예: 프로젝트 카드)을 선택합니다.
2. Annotate 탭을 클릭해 그 영역에 체크 표시를 남깁니다.
3. Add to chat 버튼을 눌러 해당 영역 스크린샷을 채팅으로 보냅니다.
4. 이렇게 요청합니다.

“이 부분을 팝업으로 만들어줘. 버튼을 누르거나 이미지나 글자를 누르면 팝업이 떠서 좀 더 상세한 내용을 볼 수 있게 만들어줘.”

잠시 후 코드를 다시 빌드하면, 클릭 시 화면 중앙에 상세 내용이 뜨는 팝업이 생깁니다. 생각보다 훨씬 덜 복잡하죠.

같은 방식으로 파트너 로고 영역이나 진행 기업 목록 같은 것도 각각 팝업 구조를 달아 줄 수 있습니다. 강의에서 보여줬던 것처럼, 카드 하나하나가 살아 움직이는 느낌을 줄 수 있습니다.

7. 내 콘텐츠로 갈아끼우기: 텍스트·이미지 치환

이제 모양새는 나왔으니, 내용을 진짜 내 것으로 바꿀 차례입니다. 여기서 할 일은 단순합니다.

• 템플릿이 넣어준 예시 문구 → 내 포트폴리오 텍스트로 교체
• 더미 로고·사진 → 내 이미지로 교체

텍스트는 영역을 선택해서 Add to chat으로 보내고

“여기 텍스트를 내가 실제로 진행했던 기업 목록으로 바꿔줘.”

처럼 요청하면 됩니다.

이미지는 GitHub를 한 번 거쳐야 합니다.

1. GitHub 레포지토리에서 Add file → Upload files로 이미지를 업로드합니다.
2. 업로드한 이미지를 클릭한 뒤, 점점점 메뉴에서 Copy permalink를 눌러 링크를 복사합니다.
3. 다시 Google AI 스튜디오로 돌아와 이미지 영역을 Annotate → Add to chat으로 보낸 뒤,

“이 이미지 영역을 방금 복사한 링크의 이미지로 변경해줘.”

라고 요청합니다.

이미지가 어색하게 잘리면 한 줄만 더 붙이면 됩니다.

“이미지가 위아래로 잘리고 있어. 비율에 맞게 자연스럽게 보이도록 스타일도 같이 수정해줘.”

이 과정을 몇 번 반복하고 나면, 화면 속 사이트가 어느 순간 “아, 이건 완전히 내 웹사이트네” 하는 느낌으로 바뀝니다.

8. GitHub에 저장해 두면, 그다음부터는 편해진다

눈앞의 화면이 마음에 들기 시작했다면, 이제 이걸 날려먹지 않게 GitHub에 저장해 두는 일이 남았습니다. GitHub는 어렵게 생각할 필요 없이, “코드를 위한 구글 드라이브” 정도로 받아들이면 편합니다.

Builder에서 GitHub에 저장 버튼을 눌러 레포지토리를 만들고, 이름을 하나 정해 줍니다. (예: portfolio)

그 다음부터는 수정할 때마다

• Stage & Commit All Changes 버튼 한 번
• “변경 사항이 없습니다”라는 문구가 나올 때까지 커밋

이 정도만 해 주면 됩니다. 이 과정이 익숙해질수록, 나중에 코드를 되돌리거나 비교할 수 있어서 오히려 마음이 편해집니다.

9. Vercel로 실제 배포까지 끝내기

이제 마지막 단계, Vercel 배포입니다. 여기까지 오면 사실상 90%는 끝난 거고, 배포는 그냥 연결 작업에 가깝습니다.

1. Vercel 사이트에서 회원가입을 합니다. 플랜은 Hobby(무료)로 충분합니다.
2. 이름을 영어로 적고, 로그인 방식은 GitHub 연동으로 선택합니다.
3. Authorize Vercel을 눌러 권한을 허용하고, 휴대폰 인증까지 마칩니다.

로그인이 끝나면 대시보드에서 Add New → Project를 누릅니다. GitHub에 연결된 레포지토리 목록이 뜨는데, 아까 만든 포트폴리오 레포를 선택하고 Import → Deploy만 눌러주면 됩니다.

잠시 후 프로젝트명.vercel.app 형태의 도메인이 하나 생깁니다. 이 주소를 클릭했을 때, 강의에서 봤던 것과 같은 웹 포트폴리오가 떠 있으면 성공입니다.

혹시 화면이 갑자기 검거나 하얗게 나오면 당황하지 말고, 다시 Google AI 스튜디오에 가서 이렇게 말해 주세요.

“Vercel에 배포했는데 화면이 검게 나와. 왜 그런지 찾아서 고쳐줘.”

수정된 코드를 다시 GitHub에 저장하면, Vercel이 자동으로 재배포를 진행합니다.

10. 도메인만 얹으면, 이제 진짜 ‘내 사이트’가 된다

기본 도메인도 충분히 쓸 수 있지만, 포트폴리오용이라면 개인 도메인까지 연결하면 완전히 느낌이 달라집니다.

• myname.com
• myname.work
• myname.dev

같은 주소는 생각보다 금방 적응되고, 한번 익어버리면 명함·이력서·SNS 어디에 붙여도 다 자연스럽습니다.

Vercel의 Domain 탭에서 Add domain을 눌러 이미 가지고 있는 도메인을 붙이거나, Buy domain에서 새로 구입할 수 있습니다.

그다음부터는 이 주소가 곧 나를 설명하는 가장 최신 링크가 됩니다.

11. 한 번만 해 보면, 두 번째부터는 진짜 10분 컷

여기까지 읽으면 “생각보다 할 게 많네…”라는 느낌이 들 수도 있습니다. 하지만 실제로 한 번만 세팅을 해 보면, 그다음부터는 리듬이 완전히 달라집니다.

• 새 프로젝트를 추가하고 싶을 때 → 텍스트만 조금 바꾸고 이미지 몇 개 교체
• 실적이 업데이트됐을 때 → 해당 섹션 문단만 수정
• 디자인을 조금 바꾸고 싶을 때 → 템플릿 이미지를 하나 더 가져와서 일부 레이아웃만 조정

이 정도 작업은 이제 정말 10분 안에 할 수 있는 일이 됩니다. 코드를 직접 짜는 게 아니라, AI에게 “여기 좀 이렇게 바꿔줘”라고 말해 주는 쪽에 더 가깝기 때문입니다.

포트폴리오 사이트는 결국, “나라는 사람을 대신 소개해 주는 24시간짜리 안내원” 같은 존재입니다. 이 안내원을 텍스트 파일 안에만 가둬 두느냐, 아니면 웹이라는 무대 위에 올려두느냐의 차이는 시간이 갈수록 점점 커질 수밖에 없습니다.

AI와 템플릿, 그리고 GitHub·Vercel까지 한 번만 연결해 보세요. 생각보다 훨씬 적은 에너지로, 그동안 미뤄 두었던 나만의 포트폴리오 사이트를 충분히 멋지게 완성할 수 있을 겁니다.