포트폴리오 웹사이트를 직접 만들겠다고 마음먹는 순간, 머릿속에 이런 생각부터 스쳐 지나갑니다.
- “도메인은 또 뭐고, 호스팅은 어디서 해야 하지?”
- “HTML이니 CSS니 자꾸 말은 들었는데, 내가 이걸 할 수 있을까?”
그래서 대부분의 사람들은 결국 PPT나 PDF 포트폴리오에 머무릅니다. 파일로만 있어도 당장 지원은 할 수 있으니까요. 하지만 막상 상대 입장에서 생각해 보면, 링크 하나만 눌러서 내 포트폴리오를 볼 수 있는 사람과, 굳이 파일을 열어봐야 하는 사람 중 누가 더 기억에 남을지는 이미 답이 나와 있습니다.
좋은 소식은, 이제는 이 격차를 줄이는 일이 예전보다 훨씬 쉬워졌다는 점입니다. Gemini 같은 생성형 AI, Google AI 스튜디오, GitHub, Vercel을 한 번만 연결해두면, 그 다음부터는 정말 말 그대로 “10분짜리 작업”에 가까워집니다.
이 글은 강의에서 설명했던 과정을 그대로 가져와서, 실제로 따라 하면 그대로 사이트가 나오는 흐름으로 사람 말투에 가깝게 정리한 버전입니다.
한눈에 보기: 준비물과 전체 순서
코딩 없이 포트폴리오 웹사이트를 만드는 순서는 ① 내 경력을 AI가 읽기 좋게 정리하고 ② Framer·Webflow에서 템플릿을 고른 뒤 ③ 템플릿 캡처를 Google AI 스튜디오에 붙여 넣어 사이트 뼈대를 만들고 ④ GitHub에 저장해서 ⑤ Vercel로 배포하는 것입니다. 별도 유료 소프트웨어 없이 무료 플랜으로 배포까지 할 수 있고, 내 도메인을 연결할 때만 도메인 비용이 듭니다.
준비물
- 컴퓨터와 인터넷 연결 (Windows, Mac 모두 가능)
- 구글 계정
- 내 경력 메모나 이력서 파일
- 처음 한 번은 20분 정도의 시간
| 단계 | 도구 | 하는 일 | 강의 기준 시간 |
|---|---|---|---|
| 1 | Gemini | 포트폴리오 텍스트 정리 | 2분 |
| 2 | Framer·Webflow | 마음에 드는 템플릿 캡처 | 2분 |
| 3 | Google AI 스튜디오 | 이미지를 보고 웹 코드 생성 | 5분 |
| 4 | GitHub | 코드 저장 | 3분 |
| 5 | Vercel | 웹사이트 배포 | 3분 |
1. PPT 포트폴리오, 왜 아쉽게 느껴질까
PPT는 발표용으로는 최고지만, 읽기용 매체로는 한계가 분명합니다.
- 슬라이드는 한 장 한 장 끊겨 있어서, 전체 스토리가 한 번에 잡히지 않습니다.
- 파일을 열어야 하니, 모바일에서 보기에도 은근히 번거롭습니다.
- 특정 프로젝트를 다시 찾아보기도 쉽지 않습니다.
웹 포트폴리오는 정반대입니다.
- URL 하나면 어디서든 열립니다.
- 위에서 아래로 자연스럽게 읽을 수 있습니다.
- 검색엔진·내부 검색 모두에 잘 잡힙니다.
그러니까, PPT 포트폴리오가 이미 있는 분이라면 “새로 만드는 것”이 아니라 “한 단계 업그레이드하는 것” 정도로 생각하면 부담이 훨씬 줄어듭니다.
2. AI가 이해할 수 있는 포맷으로 내용부터 정리하기
웹을 만들겠다고 해서, 처음부터 개발 툴부터 열 필요는 없습니다. 오히려 그 전에 할 일은 내 이야기를 AI가 읽기 좋은 텍스트로 정리해 두는 것입니다.
형식은 뭐든 괜찮습니다.
- Google Docs
- Word
- 한글 문서
중요한 건 구조입니다. 예를 들어 생산성 컨설턴트 포트폴리오라면 이렇게 나눌 수 있겠죠.
- 나라는 사람에 대한 한 줄 소개
- 어떤 문제를 풀어주는 사람인지, 핵심 역량
- 실제로 함께 일했던 기업·조직 목록
- 대표 프로젝트와 그 결과(숫자까지 있으면 금상첨화)
AI에게 “이 내용을 기반으로 웹 포트폴리오를 만들어 달라”고 할 예정이기 때문에, 문장 하나하나를 예쁘게 쓰는 것보다, 큰 덩어리를 잘 나눠놓는 게 훨씬 중요합니다.
이미 있는 이력서나 메모를 Gemini에 붙여 넣고 이렇게 요청하면, 포트폴리오에 맞게 덩어리를 나눠 줍니다.
“나는 [직업]으로 활동하는 [이름]입니다. 내 포트폴리오 웹사이트에 들어갈 내용을 Markdown 형식으로 작성해 줘. 이름, 소개, 주요 경력(3~5개), 보유 스킬, 연락처를 포함해 줘.”
3. Framer·Webflow에서 ‘나 닮은’ 템플릿 고르기
다음 단계는 겉모습, 즉 레이아웃 레퍼런스 찾기입니다. 여기서 직접 디자인을 튀어나오게 새로 할 필요는 없습니다. 이미 잘 만든 포트폴리오 템플릿이 세상에 널려 있으니까요.
Framer나 Webflow 같은 곳에 들어가서 검색창에 portfolio만 쳐 봐도, 수십 개의 템플릿이 나옵니다. 이 중에서 아래 네 가지 기준에 맞는 것만 골라도 반은 성공입니다.
- 맨 위에 이름과 한 줄 소개가 큼직하게 보이는지
- 서비스·역량을 자연스럽게 나열할 수 있는 섹션이 있는지
- 기업 로고, 프로젝트 카드 등을 모아둘 수 있는 공간이 있는지
- 맨 아래에 문의, 연락처, 버튼 같은 콜투액션이 있는지
완벽한 것을 찾으려다 시간을 다 쓰기 쉬우니, “내 포트폴리오를 이 레이아웃에 얹었을 때 어색하지 않겠다” 정도면 충분합니다.
4. 템플릿 페이지 전체를 캡처해서 AI에게 보여주기
여기서 우리가 할 일은 디자인을 그대로 가져오는 게 아니라, AI에게 참고용으로 보여주는 것입니다. 그래서 템플릿 페이지를 통째로 이미지로 만들어 둡니다.
방법은 간단합니다.
- 크롬에서 템플릿 페이지를 연다.
- 전체 페이지 캡처 확장 프로그램을 설치한다. (예: GoFullPage)
- 페이지를 끝까지 스크롤한 뒤, 한 번에 전체를 캡처하고 이미지를 복사(
Ctrl + C)한다.
이 이미지는 곧 “이런 모양으로 내 포트폴리오를 꾸며줘”라고 AI에게 설명할 때 쓰이는 자료가 됩니다.
5. Google AI 스튜디오 Builder에서 ‘사이트 뼈대’ 뽑아내기
이제 본격적으로 Google AI 스튜디오의 Builder를 엽니다.
이 화면은 쉽게 말해서, 디자인 이미지와 텍스트를 넣으면 웹사이트 코드가 나오는 공간입니다.
진행 순서는 이렇습니다.
- Google AI 스튜디오 접속 → Builder 앱 열기
- 새 프로젝트 생성 후 약관 동의
- 입력란에 템플릿 전체 이미지를
Ctrl + V로 붙여넣기 - 그 아래에 내가 정리해 둔 포트폴리오 텍스트 붙여넣기
- 마지막으로 프롬프트 작성
예를 들면, 이런 식으로 쓸 수 있습니다.
“첨부한 이미지의 디자인을 활용해서 아래 내용에 있는 포트폴리오를 만들어줘. 웹사이트 디자인 코드로 만들어줘. GitHub에 저장하고 Vercel에 배포를 할 거야. 알아서 코드를 잘 만들어줘.”
엔터를 누르고 잠시 기다리면, AI가 이미지를 뜯어보면서 어느 부분이 어떤 섹션인지 파악하고, 그 아래 텍스트와 매칭해서 기본 웹사이트 뼈대를 가진 코드를 만들어 줍니다.
코드 탭을 보면 HTML·CSS 구조가 생겨 있고, Preview 탭에서는 실제 페이지 모양을 확인할 수 있습니다. 이때까진 그냥 “나쁘지 않은 템플릿 복사본” 정도의 상태라고 보면 됩니다.
6. 클릭하면 팝업이 뜨는 인터랙션까지 AI에게 맡기기
포트폴리오 사이트가 ‘고급져 보이는’ 포인트 중 하나가, 카드를 클릭했을 때 뜨는 팝업 모달입니다. 이걸 직접 자바스크립트로 짜려면 머리가 지끈한데, Builder 안에서는 설명만 잘 해 주면 AI가 알아서 구현해 줍니다.
- Preview에서 팝업으로 만들고 싶은 영역(예: 프로젝트 카드)을 선택합니다.
Annotate탭을 클릭해 그 영역에 체크 표시를 남깁니다.Add to chat버튼을 눌러 해당 영역 스크린샷을 채팅으로 보냅니다.- 이렇게 요청합니다.
“이 부분을 팝업으로 만들어줘. 버튼을 누르거나 이미지나 글자를 누르면 팝업이 떠서 좀 더 상세한 내용을 볼 수 있게 만들어줘.”
잠시 후 코드를 다시 빌드하면, 클릭 시 화면 중앙에 상세 내용이 뜨는 팝업이 생깁니다. 생각보다 훨씬 덜 복잡하죠.
같은 방식으로 파트너 로고 영역이나 진행 기업 목록 같은 것도 각각 팝업 구조를 달아 줄 수 있습니다. 강의에서 보여줬던 것처럼, 카드 하나하나가 살아 움직이는 느낌을 줄 수 있습니다.
7. 내 콘텐츠로 갈아끼우기: 텍스트·이미지 치환
이제 모양새는 나왔으니, 내용을 진짜 내 것으로 바꿀 차례입니다. 여기서 할 일은 단순합니다.
- 템플릿이 넣어준 예시 문구 → 내 포트폴리오 텍스트로 교체
- 더미 로고·사진 → 내 이미지로 교체
텍스트는 영역을 선택해서 Add to chat으로 보내고
“여기 텍스트를 내가 실제로 진행했던 기업 목록으로 바꿔줘.”
처럼 요청하면 됩니다.
이미지는 GitHub를 한 번 거쳐야 합니다.
- GitHub 레포지토리에서
Add file → Upload files로 이미지를 업로드합니다. - 업로드한 이미지를 클릭한 뒤, 점점점 메뉴에서
Copy permalink를 눌러 링크를 복사합니다. - 다시 Google AI 스튜디오로 돌아와 이미지 영역을 Annotate →
Add to chat으로 보낸 뒤,
“이 이미지 영역을 방금 복사한 링크의 이미지로 변경해줘.”
라고 요청합니다.
이미지가 어색하게 잘리면 한 줄만 더 붙이면 됩니다.
“이미지가 위아래로 잘리고 있어. 비율에 맞게 자연스럽게 보이도록 스타일도 같이 수정해줘.”
이 과정을 몇 번 반복하고 나면, 화면 속 사이트가 어느 순간 “아, 이건 완전히 내 웹사이트네” 하는 느낌으로 바뀝니다.
8. GitHub에 저장해 두면, 그다음부터는 편해진다
눈앞의 화면이 마음에 들기 시작했다면, 이제 이걸 날려먹지 않게 GitHub에 저장해 두는 일이 남았습니다. GitHub는 어렵게 생각할 필요 없이, “코드를 위한 구글 드라이브” 정도로 받아들이면 편합니다.
Builder에서 GitHub에 저장 버튼을 눌러 레포지토리를 만들고, 이름을 하나 정해 줍니다. (예: portfolio)
그 다음부터는 수정할 때마다
Stage & Commit All Changes버튼 한 번- “변경 사항이 없습니다”라는 문구가 나올 때까지 커밋
이 정도만 해 주면 됩니다. 강의에서는 저장소(Repository)를 Public으로 만들어야 이미지가 제대로 보였다는 점도 함께 짚었습니다. 이미지가 깨져 보이면 저장소 공개 설정부터 확인해 보세요.
이 과정이 익숙해질수록, 나중에 코드를 되돌리거나 비교할 수 있어서 오히려 마음이 편해집니다.
9. Vercel로 실제 배포까지 끝내기
이제 마지막 단계, Vercel 배포입니다. 여기까지 오면 사실상 90%는 끝난 거고, 배포는 그냥 연결 작업에 가깝습니다.
- Vercel 사이트에서 회원가입을 합니다. 플랜은 Hobby(무료)로 충분합니다.
- 이름을 영어로 적고, 로그인 방식은 GitHub 연동으로 선택합니다.
Authorize Vercel을 눌러 권한을 허용하고, 휴대폰 인증까지 마칩니다.
로그인이 끝나면 대시보드에서 Add New → Project를 누릅니다. GitHub에 연결된 레포지토리 목록이 뜨는데, 아까 만든 포트폴리오 레포를 선택하고 Import → Deploy만 눌러주면 됩니다.
잠시 후 프로젝트명.vercel.app 형태의 도메인이 하나 생깁니다. 이 주소를 클릭했을 때, 강의에서 봤던 것과 같은 웹 포트폴리오가 떠 있으면 성공입니다.
혹시 화면이 갑자기 검거나 하얗게 나오면 당황하지 말고, 다시 Google AI 스튜디오에 가서 이렇게 말해 주세요.
“Vercel에 배포했는데 화면이 검게 나와. 왜 그런지 찾아서 고쳐줘.”
수정된 코드를 다시 GitHub에 저장하면, Vercel이 자동으로 재배포를 진행합니다.
10. 도메인만 얹으면, 이제 진짜 ‘내 사이트’가 된다
기본 도메인도 충분히 쓸 수 있지만, 포트폴리오용이라면 개인 도메인까지 연결하면 완전히 느낌이 달라집니다.
myname.commyname.workmyname.dev
같은 주소는 생각보다 금방 적응되고, 한번 익어버리면 명함·이력서·SNS 어디에 붙여도 다 자연스럽습니다.
Vercel의 Domain 탭에서 Add domain을 눌러 이미 가지고 있는 도메인을 붙이거나, Buy domain에서 새로 구입할 수 있습니다.
그다음부터는 이 주소가 곧 나를 설명하는 가장 최신 링크가 됩니다.
11. 한 번만 해 보면, 두 번째부터는 진짜 10분 컷
여기까지 읽으면 “생각보다 할 게 많네…”라는 느낌이 들 수도 있습니다. 하지만 실제로 한 번만 세팅을 해 보면, 그다음부터는 리듬이 완전히 달라집니다.
- 새 프로젝트를 추가하고 싶을 때 → 텍스트만 조금 바꾸고 이미지 몇 개 교체
- 실적이 업데이트됐을 때 → 해당 섹션 문단만 수정
- 디자인을 조금 바꾸고 싶을 때 → 템플릿 이미지를 하나 더 가져와서 일부 레이아웃만 조정
완성한 뒤에는 Google AI 스튜디오에 이런 요청을 더해 보세요.
- 모바일: “모바일 화면에서도 텍스트가 깨지지 않게 폰트 크기를 조절해 줘.”
- 애니메이션: “스크롤을 내릴 때 각 섹션이 부드럽게 나타나는 효과(Fade-in)를 추가해 줘.”
- 연락 폼: “이메일을 바로 보낼 수 있는 문의 폼 섹션을 추가해 줘.”
이 정도 작업은 이제 정말 10분 안에 할 수 있는 일이 됩니다. 코드를 직접 짜는 게 아니라, AI에게 “여기 좀 이렇게 바꿔줘”라고 말해 주는 쪽에 더 가깝기 때문입니다.
포트폴리오 사이트는 결국, “나라는 사람을 대신 소개해 주는 24시간짜리 안내원” 같은 존재입니다. 이 안내원을 텍스트 파일 안에만 가둬 두느냐, 아니면 웹이라는 무대 위에 올려두느냐의 차이는 시간이 갈수록 점점 커질 수밖에 없습니다.
AI와 템플릿, 그리고 GitHub·Vercel까지 한 번만 연결해 보세요. 생각보다 훨씬 적은 에너지로, 그동안 미뤄 두었던 나만의 포트폴리오 사이트를 충분히 멋지게 완성할 수 있을 겁니다.
이 방법의 장점과 한계
장점
- 비용: Vercel Hobby(무료) 플랜과 기본
.vercel.app주소로 무료로 시작할 수 있습니다. - 수정: 디자인이나 내용을 바꾸고 싶으면 AI에게 말로 요청하면 됩니다.
한계
- 결제 기능이나 복잡한 데이터베이스가 필요한 사이트에는 맞지 않습니다.
- GitHub와 Vercel을 처음 쓰면 화면이 낯설 수 있습니다. 한 번만 해 보면 두 번째부터는 훨씬 빨라집니다.
자주 묻는 질문
코딩을 전혀 몰라도 포트폴리오 웹사이트를 만들 수 있나요?
네. 이 방법은 AI에게 원하는 모습과 내용을 설명하고 결과를 고치게 하는 방식이라 코드를 직접 쓰지 않습니다. 템플릿 캡처와 내 경력 텍스트만 준비하면 Google AI 스튜디오가 코드를 만들어 줍니다.
비용이 드나요?
Vercel은 Hobby(무료) 플랜으로 충분하고, 배포하면 프로젝트명.vercel.app 주소가 생깁니다. 내 도메인을 연결할 때만 도메인 비용이 듭니다.
배포했는데 화면이 검거나 하얗게 나와요.
Google AI 스튜디오에 “Vercel에 배포했는데 화면이 검게 나와. 왜 그런지 찾아서 고쳐줘.”라고 요청하세요. 수정된 코드를 다시 GitHub에 저장하면 Vercel이 자동으로 다시 배포합니다.
수정할 때마다 처음부터 다시 해야 하나요?
아닙니다. Google AI 스튜디오에서 고친 뒤 GitHub에 저장(커밋)하면 Vercel이 자동으로 다시 배포합니다.
함께 보면 좋은 글
Comments are closed.