코딩 없이 20분 만에 포트폴리오 웹사이트 만들기: Gemini, Github, Vercel 활용 가이드
서론: 포트폴리오 웹사이트, 이제 누구나 만들 수 있습니다
취업 준비를 하거나 프리랜서로 활동하시는 분들에게 전문적인 포트폴리오 웹사이트는 선택이 아닌 필수가 되었습니다. 하지만 웹사이트를 만들려면 HTML, CSS, JavaScript를 배워야 하고, 외주를 맡기는 데 최소 50만 원에서 100만 원 이상의 비용이 듭니다.
2026년 현재, 이 모든 장벽이 무너졌습니다. Google의 Gemini와 AI Studio, 그리고 GitHub, Vercel 같은 현대적인 개발 도구를 활용하면 코딩 지식 없이도 단 20분 만에 전문가 수준의 포트폴리오 웹사이트를 무료로 만들 수 있습니다.
1. 준비물: 필요한 것은 단 4가지
시작하기 전에 다음 항목들을 준비해 주세요. 별도의 유료 소프트웨어는 전혀 필요하지 않습니다.
컴퓨터와 인터넷 연결: Windows, Mac 모두 가능합니다.
구글 계정: Gmail 주소만 있으면 됩니다.
20분의 여유 시간: 집중해서 따라오시면 충분합니다.
자신의 경력 데이터: 간단한 메모나 이력서 파일이면 충분합니다.
2. 전체 워크플로우 한눈에 보기
본격적으로 시작하기 전에 전체 프로세스를 이해하면 훨씬 수월합니다.
| 단계 | 도구 | 주요 작업 | 소요 시간 |
| Step 1 | Gemini | 포트폴리오 텍스트 내용 생성 | 2분 |
| Step 2 | 디자인 사이트 | 마음에 드는 템플릿 캡처 | 2분 |
| Step 3 | AI Studio | 이미지 기반 웹 코드 자동 생성 | 5분 |
| Step 4 | GitHub | 코드 클라우드 저장 및 관리 | 3분 |
| Step 5 | Vercel | 실제 웹사이트 무료 배포 | 3분 |
3. 단계별 상세 가이드
Step 1: Gemini로 포트폴리오 내용 자동 생성하기
먼저 Google Gemini에 접속하여 포트폴리오에 들어갈 전문적인 문구를 생성합니다.
코딩 없이 20분 만에 포트폴리오 웹사이트 만들기: Gemini와 Vercel 활용 완벽 가이드_v2
추천 프롬프트:
“나는 [직업]으로 활동하는 [이름]입니다. 내 포트폴리오 웹사이트에 들어갈 내용을 Markdown 형식으로 작성해 줘. 이름, 소개, 주요 경력(3~5개), 보유 스킬, 연락처를 포함해 줘.”
Step 2: 디자인 템플릿 선택 및 캡처
코딩을 못 해도 괜찮습니다. AI에게 “이런 스타일로 만들어줘”라고 시각적으로 알려주기 위해 샘플 이미지가 필요합니다.
방법: 마음에 드는 디자인을 찾은 후, 크롬 확장 프로그램(GoFullPage 등)을 사용해 전체 페이지를 캡처하고 이미지를 복사(Ctrl+C)합니다.
Step 3: Google AI Studio로 코드 생성하기
Google AI Studio는 이미지 속 디자인을 코드로 바꿔주는 강력한 도구입니다.
이미지 붙여넣기: 캡처한 디자인을 Ctrl+V로 입력창에 넣습니다.
프롬프트 입력: “첨부한 디자인을 참고해서 HTML, CSS, JS로 반응형 포트폴리오를 만들어줘. 내용은 아까 만든 텍스트를 사용해 줘.”
결과 확인: ‘Preview’ 버튼을 눌러 실제 작동하는 모습을 확인합니다.
Step 4: GitHub에 저장하기
생성된 코드를 GitHub에 저장해야 Vercel에서 사이트를 띄울 수 있습니다. AI Studio 내의 ‘Save to GitHub’ 버튼을 활용하면 클릭 몇 번으로 저장소가 생성됩니다.
주의: Repository 설정 시 반드시 Public으로 설정해야 이미지가 정상적으로 출력됩니다.
Step 5: Vercel로 세상에 배포하기
마지막으로 Vercel에 접속하여 GitHub 계정으로 로그인합니다.
Add New Project 클릭
방금 만든 GitHub 저장소 선택 후 Import
Deploy 버튼 클릭! 약 1분 뒤에 나만의 웹사이트 주소가 생성됩니다.
4. 추가 커스터마이징 팁 (SEO 최적화)
웹사이트를 만든 후 다음 프롬프트를 AI Studio에 입력하여 성능을 높여보세요.
반응형 개선: “모바일 화면에서도 텍스트가 깨지지 않게 폰트 크기를 조절해 줘.”
애니메이션: “스크롤을 내릴 때 각 섹션이 부드럽게 나타나는 효과(Fade-in)를 추가해 줘.”
연락 폼: “이메일을 바로 보낼 수 있는 문의 폼 섹션을 추가해 줘.”
5. 이 방법의 장단점 비교
👍 장점
압도적 비용 절감: 호스팅과 도메인(기본)이 모두 무료입니다.
수정의 용이성: 디자인을 바꾸고 싶으면 AI에게 말만 하면 됩니다.
전문성: 2026년 최신 트렌드가 반영된 세련된 UI를 가질 수 있습니다.
👎 단점
고급 기능 제한: 결제 시스템이나 복잡한 데이터베이스 구축에는 한계가 있습니다.
학습 곡선: 처음 GitHub이나 Vercel을 접할 때 생소할 수 있습니다.
결론: 지금 바로 시작하는 사람이 이깁니다
몇 년 전만 해도 웹사이트 제작은 전문가의 영역이었습니다. 하지만 이제 AI는 여러분의 아이디어를 현실로 만드는 가장 강력한 조수가 되었습니다. 오늘 20분만 투자해 보세요. 내일은 이력서에 “포트폴리오: https://yourname.vercel.app“라는 당당한 한 줄을 추가하게 될 것입니다.
🚀 다음 단계로 넘어가기
웹사이트를 완성하셨나요? 이제 다음을 수행해 보세요:
LinkedIn 프로필에 사이트 링크 추가하기
이메일 서명에 포트폴리오 주소 포함하기
주변에 내 결과물을 공유하고 피드백 받기
시리얼(Sireal)과 함께 더 배우기
AI 시대의 생산성 혁명을 경험하고 싶다면 시리얼을 방문해 보세요.
공식 웹사이트: sireal.co
Comments are closed.