코딩 없이 20분 만에 포트폴리오 웹사이트 만들기: Gemini, Github, Vercel 활용 가이드

서론: 포트폴리오 웹사이트, 이제 누구나 만들 수 있습니다

취업 준비를 하거나 프리랜서로 활동하시는 분들에게 전문적인 포트폴리오 웹사이트는 선택이 아닌 필수가 되었습니다. 하지만 웹사이트를 만들려면 HTML, CSS, JavaScript를 배워야 하고, 외주를 맡기는 데 최소 50만 원에서 100만 원 이상의 비용이 듭니다.

2026년 현재, 이 모든 장벽이 무너졌습니다. Google의 Gemini와 AI Studio, 그리고 GitHub, Vercel 같은 현대적인 개발 도구를 활용하면 코딩 지식 없이도 단 20분 만에 전문가 수준의 포트폴리오 웹사이트를 무료로 만들 수 있습니다.

1. 준비물: 필요한 것은 단 4가지

시작하기 전에 다음 항목들을 준비해 주세요. 별도의 유료 소프트웨어는 전혀 필요하지 않습니다.

• 컴퓨터와 인터넷 연결: Windows, Mac 모두 가능합니다.

• 구글 계정: Gmail 주소만 있으면 됩니다.

• 20분의 여유 시간: 집중해서 따라오시면 충분합니다.

• 자신의 경력 데이터: 간단한 메모나 이력서 파일이면 충분합니다.

2. 전체 워크플로우 한눈에 보기

본격적으로 시작하기 전에 전체 프로세스를 이해하면 훨씬 수월합니다.

3. 단계별 상세 가이드

Step 1: Gemini로 포트폴리오 내용 자동 생성하기

먼저 Google Gemini에 접속하여 포트폴리오에 들어갈 전문적인 문구를 생성합니다.

코딩 없이 20분 만에 포트폴리오 웹사이트 만들기: Gemini와 Vercel 활용 완벽 가이드_v2

추천 프롬프트:

“나는 [직업]으로 활동하는 [이름]입니다. 내 포트폴리오 웹사이트에 들어갈 내용을 Markdown 형식으로 작성해 줘. 이름, 소개, 주요 경력(3~5개), 보유 스킬, 연락처를 포함해 줘.”

Step 2: 디자인 템플릿 선택 및 캡처

코딩을 못 해도 괜찮습니다. AI에게 “이런 스타일로 만들어줘”라고 시각적으로 알려주기 위해 샘플 이미지가 필요합니다.

• 추천 사이트: Framer, Webflow

• 방법: 마음에 드는 디자인을 찾은 후, 크롬 확장 프로그램(GoFullPage 등)을 사용해 전체 페이지를 캡처하고 이미지를 복사(Ctrl+C)합니다.

Step 3: Google AI Studio로 코드 생성하기

Google AI Studio는 이미지 속 디자인을 코드로 바꿔주는 강력한 도구입니다.

1. 이미지 붙여넣기: 캡처한 디자인을 Ctrl+V로 입력창에 넣습니다.

2. 프롬프트 입력: “첨부한 디자인을 참고해서 HTML, CSS, JS로 반응형 포트폴리오를 만들어줘. 내용은 아까 만든 텍스트를 사용해 줘.”

3. 결과 확인: ‘Preview’ 버튼을 눌러 실제 작동하는 모습을 확인합니다.

Step 4: GitHub에 저장하기

생성된 코드를 GitHub에 저장해야 Vercel에서 사이트를 띄울 수 있습니다. AI Studio 내의 ‘Save to GitHub’ 버튼을 활용하면 클릭 몇 번으로 저장소가 생성됩니다.

• 주의: Repository 설정 시 반드시 Public으로 설정해야 이미지가 정상적으로 출력됩니다.

Step 5: Vercel로 세상에 배포하기

마지막으로 Vercel에 접속하여 GitHub 계정으로 로그인합니다.

1. Add New Project 클릭

2. 방금 만든 GitHub 저장소 선택 후 Import

3. Deploy 버튼 클릭! 약 1분 뒤에 나만의 웹사이트 주소가 생성됩니다.

4. 추가 커스터마이징 팁 (SEO 최적화)

웹사이트를 만든 후 다음 프롬프트를 AI Studio에 입력하여 성능을 높여보세요.

• 반응형 개선: “모바일 화면에서도 텍스트가 깨지지 않게 폰트 크기를 조절해 줘.”

• 애니메이션: “스크롤을 내릴 때 각 섹션이 부드럽게 나타나는 효과(Fade-in)를 추가해 줘.”

• 연락 폼: “이메일을 바로 보낼 수 있는 문의 폼 섹션을 추가해 줘.”

5. 이 방법의 장단점 비교

👍 장점

• 압도적 비용 절감: 호스팅과 도메인(기본)이 모두 무료입니다.

• 수정의 용이성: 디자인을 바꾸고 싶으면 AI에게 말만 하면 됩니다.

• 전문성: 2026년 최신 트렌드가 반영된 세련된 UI를 가질 수 있습니다.

👎 단점

• 고급 기능 제한: 결제 시스템이나 복잡한 데이터베이스 구축에는 한계가 있습니다.

• 학습 곡선: 처음 GitHub이나 Vercel을 접할 때 생소할 수 있습니다.

결론: 지금 바로 시작하는 사람이 이깁니다

몇 년 전만 해도 웹사이트 제작은 전문가의 영역이었습니다. 하지만 이제 AI는 여러분의 아이디어를 현실로 만드는 가장 강력한 조수가 되었습니다. 오늘 20분만 투자해 보세요. 내일은 이력서에 “포트폴리오: https://yourname.vercel.app“라는 당당한 한 줄을 추가하게 될 것입니다.

🚀 다음 단계로 넘어가기

웹사이트를 완성하셨나요? 이제 다음을 수행해 보세요:

1. LinkedIn 프로필에 사이트 링크 추가하기

2. 이메일 서명에 포트폴리오 주소 포함하기

3. 주변에 내 결과물을 공유하고 피드백 받기

시리얼(Sireal)과 함께 더 배우기

AI 시대의 생산성 혁명을 경험하고 싶다면 시리얼을 방문해 보세요.

• 공식 웹사이트: sireal.co