제미나이 3.1로 10분 안에 정말 사이트가 나올까요? 지난 글에서 설치와 기본 동작까지 봤는데, 오늘은 저도 처음 만들어보면서 따라할 수 있게 진짜 한 페이지짜리 포트폴리오를 끝까지 만들어보겠습니다. 클로드 코드 매일 쓰는 저도 모르던 부분이 있을 텐데, 같이 헤매면서 한 페이지 완성하는 그 흐름을 보여드릴 거니까 기대해주세요.
1편에서 설치·환경 세팅을 마쳤다면, 이 글부터는 바로 페이지를 디자인하고 프롬프트 하나로 HTML 코드를 얻는 과정을 같이 경험할 수 있습니다.
오늘 만들 페이지 — 포트폴리오로 정한 이유
안티그래비티로 만들 수 있는 페이지가 여러 개지만, 처음 사용자가 가장 쉽게 따라할 수 있고 본인 것으로 다시 만들기 좋은 건 포트폴리오입니다. 개발자·디자이너·마케터 누구든 자기소개 페이지 하나쯤은 필요하니까요. 섹션이 반복되어 AI가 한 번 구조를 배우면 수정이 쉽고, 이미지가 부족해도 텍스트 기반 섹션(자기소개·프로젝트·연락처)만으로 완성되며, 10~15분 안에 진짜 끝납니다. 너무 길지도 너무 짧지도 않은 분량이 따라하기 가장 좋습니다.
실제로 만들 때 어떤 섹션이 들어갈지 미리 그려두는 게 첫 번째 일입니다. 저는 이렇게 청사진을 잡았어요. – 헤더 + 네비게이션 — 왼쪽에 이름(예: “Jayden | AI Developer”), 오른쪽에 메뉴(Home / About / Projects / Contact) – 히어로 섹션 — 큰 제목, 한 줄 설명, “View My Work” 같은 CTA 버튼 – About 섹션 — 자기소개 2~3문단. 경력·관심사·강점을 짧게 – Projects 섹션 — 작업물 3~4개를 카드 형태로 (제목 + 한 줄 설명 + 사용 기술) – Contact 섹션 — 이메일, 링크드인, 깃허브 주소 – 푸터 — “© 2026 Jayden” 정도의 카피라이트 이 청사진을 머릿속에 그려두면, 다음 단계에서 프롬프트를 던질 때 헷갈리지 않습니다. 저도 처음엔 청사진 없이 그냥 “포트폴리오 만들어줘”라고만 던졌다가 한참 헤맸어요. 결과는 나오는데 내가 원하는 모양이 아니라서, 수정 프롬프트만 10번 넘게 던졌습니다. 그러다 보니 한 시간이 훌쩍 지나 있더라고요. 청사진 5분 그리는 게 결국 30분 줄여준다는 걸 그때 알았습니다. 종이 한 장 꺼내서 사각형으로 섹션 6개 그리는 거면 충분합니다. 거창한 와이어프레임 도구 안 써도 됩니다. 다만 청사진만으로는 첫 결과의 시각적 완성도가 부족할 수 있어요. 첫 프롬프트 던지기 전에 두 가지 레퍼런스를 더 준비해두면, 디자인 톤이 한 번에 잡혀서 수정 사이클이 절반 이하로 줄어듭니다.
모델 선택과 design.md, 드리블 — 디자인 시스템 미리 잡기
먼저 AI 모델 선택부터 정합니다 (좌측 사이드바 “Model” 영역에서 클릭). 안티그래비티는 여러 모델을 지원하지만, 첫 프로젝트는 Gemini 3 Pro 를 기본값으로 유지하세요. 충분히 빠르고 한 페이지 정도는 문제없이 만듭니다. Gemini 3 Flash 는 더 빠르지만 간단한 페이지 한정이고, Claude 나 GPT 는 강력하지만 토큰 제약 때문에 도중에 “모델 전환하세요” 메시지가 뜰 수 있어요. 프론트엔드 디자인 감각은 Gemini 3 Pro 가 가장 강하니까 첫 작업은 그대로 두는 게 안전합니다.
다음은 design.md 파일입니다. getdesign.md 라는 사이트에 가면 Nike·Tesla·Vercel·Stripe·Linear 같은 유명 브랜드의 디자인 시스템(컬러·타이포·간격·컴포넌트 등)이 마크다운 파일 한 장으로 정리되어 있어요. 본인이 좋아하는 브랜드의 design.md 를 다운받아 안티그래비티 프로젝트 폴더 루트(`my-portfolio/design.md`)에 넣어두면 됩니다. 그리고 첫 프롬프트에 “design.md 의 디자인 시스템을 따라줘” 한 줄을 추가하세요. AI 가 그 톤·간격·폰트를 그대로 적용해 결과물을 만듭니다. 저는 미니멀한 톤을 좋아해서 Vercel 의 design.md 를 가져와봤는데, 검정·흰색 + Geist 폰트 + 깔끔한 간격이 한 번에 적용되더라고요. 마지막으로 드리블(Dribbble) 이미지입니다. dribbble.com 에서 “portfolio web design” 으로 검색해 본인이 좋아하는 레이아웃 1~2장을 캡처합니다. 이 이미지를 안티그래비티 프롬프트 입력창에 첨부하면, AI 가 그 레이아웃 구조를 참고해 만듭니다. design.md 가 톤·디자인 언어를 잡는다면, 드리블 이미지는 섹션 배치·여백·타이포 크기 같은 시각 구조를 잡아요. 두 가지를 함께 주면 결과물 완성도가 확연히 다르게 나옵니다. 청사진(머릿속) + design.md(브랜드 톤) + 드리블 이미지(레이아웃 참고) — 이 세 가지를 미리 준비한 후 첫 프롬프트를 던지는 흐름이, 안티그래비티에서 한 번에 잘 뽑는 가장 빠른 길입니다.
첫 프롬프트와 첫 결과 — 5분 만에 화면이 뜨다
안티그래비티에 던질 첫 번째 프롬프트가 중요합니다. 너무 자세하면 AI가 헷갈리고, 너무 대충 쓰면 원하는 걸 못 만듭니다. 좋은 프롬프트와 나쁜 프롬프트의 차이를 보겠습니다.
나쁜 프롬프트는 “포트폴리오 페이지 만들어줘” 같은 식입니다. 너무 짧아서 AI가 뭘 만들지 헷갈리고, 색상·레이아웃·글자 크기가 다 다르게 나옵니다. 좋은 프롬프트는 이런 형태입니다.
포트폴리오 페이지를 만들어줘.
- 제목: "Jayden | AI Developer"
- 섹션 구성:
1. 헤더 (네비게이션 메뉴: Home / About / Projects / Contact)
2. 히어로 섹션 (큰 타이틀 + 소개 한 줄 + "View My Work" 버튼)
3. About 섹션 (자기소개 3문단)
4. Projects 섹션 (프로젝트 4개, 각각 제목+설명+기술스택)
5. Contact 섹션 (이메일 + LinkedIn + GitHub)
6. 푸터
- 컬러: 다크 모드 (배경 검정, 텍스트 흰색, 강조 파란색)
- 폰트: 모던하고 깔끔한 산세리프 (Inter 또는 Poppins 권장)
- 반응형 필수 (모바일 320px ~ 데스크톱 1920px까지)
섹션별로 뭘 넣을지, 어떤 톤인지 다 적었으니 AI가 일관성 있게 만들 수 있습니다. 이 프롬프트를 Manager 뷰 입력창에 던지는 순간 정말 신기한 일이 벌어집니다. 한 번 체험해봤습니다. 우측 미리보기 탭을 열어두면 AI가 코드를 생성하는 동안 실시간으로 “로딩 중” 표시가 나타났다가, 갑자기 페이지가 팍 나타납니다. 검은 배경에 흰 글씨, 파란색 강조. 정말 깔끔했습니다. 처음 결과를 보고 “어? 의외로 이렇게 깔끔하게 나왔다”는 생각이 들었습니다. 로고도 자동으로 생겼고, 버튼도 있고, 모바일에서도 텍스트가 겹치지 않더라고요. 물론 만족스럽지 않은 부분도 있었어요. 프로젝트 카드들이 데스크톱에서 한 줄에 모두 붙어 있어서 답답해 보였고, 글꼴도 너무 기본적인 느낌이었습니다. Contact 섹션의 이메일 입력칸도 너무 작아 보였어요.
디자인 미세조정과 내 정보 채우기
첫 결과물이 나온 후부터가 진짜 재미입니다. Manager 입력창에 수정 지시를 계속 던질 수 있거든요. 제가 실제로 시도한 프롬프트들입니다.
첫 번째 수정: “Projects 섹션의 배경색을 다크 블루(#1a2332)로 바꿔줘. 프로젝트 카드는 테두리를 밝은 회색(#444)으로 하고, 마우스 호버 시 테두리가 파란색(#00bfff)으로 변하게 해줘.” 이 명령을 던지자마자 우측 미리보기가 반짝 바뀌었습니다. Projects 섹션 배경이 어두운 파란색으로 변했고, 카드 위에 마우스를 올려보니 정말로 테두리가 파란색으로 변했어요. 두 번째 수정: “제목을 더 크고 굵게 해줘. 크기 48px, 굵기 700. 그리고 전체 글꼴을 Courier New 모노스페이스로 변경해줘.” 결과는 “어, 모노스페이스는 좀 그래”였습니다. 모노스페이스 폰트는 공학적 느낌이 강해서, 포트폴리오라기보다는 코드 에디터 같았거든요. 그래서 다시 던졌습니다. “글꼴을 다시 기본값으로 돌려줘. 하지만 제목 크기와 굵기는 48px, 700으로 유지해.” 세 번째 수정: “Projects 섹션의 카드 3개를 PC에선 3개 나란히, 태블릿에선 2개 나란히, 모바일에선 1개씩 세로로 배치해줘. 패딩도 모바일은 10px, 데스크톱은 20px로.” 미리보기에서 브라우저 창을 줄여가며 확인했는데, 정말로 화면 크기에 맞춰 카드 배치가 바뀌었습니다. 모바일에서도 깔끔했어요.
한 번에 1~2가지만 요청하는 게 중요합니다. “색도 바꿔주고 레이아웃도 바꿔주고 폰트도 바꿔줘” 이렇게 5개를 한 번에 던지면 AI가 놓치는 부분이 생기더라고요.
구조와 디자인이 마음에 들면 이제 실제 내용을 넣을 차례입니다. “타이틀의 ‘Jayden’ 부분을 본인 이름으로 바꿔주세요. 소개 문구도 ‘AI Developer’ 에서 본인 직종으로 변경해주세요.” 식으로 던지면 됩니다. 저는 그대로 ‘Jayden | AI Developer’ 를 유지하면서 다른 섹션을 손봤는데, 명령 하나가 전체 페이지에 반영되었어요. 제목도 바뀌고, 메타 태그도 자동으로 업데이트됐습니다. 다음은 프로젝트 정보였습니다. “Projects 섹션의 프로젝트 제목과 설명을 내 프로젝트로 바꿔줘. 더미 텍스트(Lorem ipsum) 대신 이걸 넣어줘: 프로젝트1 ‘AI Chat Dashboard’ | React + WebSocket | 실시간 메시지 처리 플랫폼.” AI가 즉시 적용했습니다. 이미지도 자체적으로 생성해서 넣어줬어요. 만약 특정 이미지가 있다면 파일로 제공할 수도 있습니다. 가장 유용했던 기능은 더미 텍스트를 한 번에 교체할 수 있다는 점이었어요. “전체 About 섹션의 Lorem ipsum을 이 텍스트로 바꿔줘”라고 프롬프트를 하나만 던지면, AI가 모든 더미 텍스트를 찾아 교체합니다. 수동으로 HTML을 편집할 필요가 없었습니다. About 섹션에 본인 소개를 넣었고, Contact 섹션에 실제 이메일 주소를 넣었습니다. 소셜 링크도 프롬프트로 추가했어요. “Contact 섹션에 GitHub 링크를 https://github.com/johnpark으로, LinkedIn은 https://linkedin.com/in/johnpark으로 바꿔줘.” 결과는 완벽했습니다. 한 번도 코드를 손으로 수정하지 않았는데, 내 정보가 모두 들어간 포트폴리오 페이지가 완성되었거든요.
인터넷에 배포 + 직접 만들고 보니
로컬 환경에서 완성된 포트폴리오 페이지는 본인 컴퓨터에서만 볼 수 있습니다. 이제 실제 웹 주소(URL)를 받아 친구나 면접관, 클라이언트에게 공유할 차례입니다. 안티그래비티가 생성한 코드는 배포가 매우 간단합니다.
가장 권장되는 방법은 Vercel입니다. GitHub 계정이 있다면 몇 번의 클릭만으로 자동 배포됩니다. 먼저 안티그래비티에서 생성한 프로젝트 폴더를 GitHub에 push 합니다. 안티그래비티는 자동으로 git 리포지토리를 초기화하므로, 이미 `.git` 폴더가 있을 거예요. 터미널에서 다음 명령어를 실행합니다.
bash
git add .
git commit -m "포트폴리오 페이지 완성"
git push origin main
이후 Vercel 사이트에 접속해 GitHub 계정으로 로그인합니다. “Add New Project”(새 프로젝트 추가) 버튼을 클릭하고, 방금 push한 GitHub 리포지토리를 선택하면 자동 배포가 시작됩니다. 배포는 1~2분 정도 걸리고, 완료되면 `your-project-name.vercel.app` 형식의 무료 URL을 받습니다. SSL 인증서도 자동으로 적용되므로 보안 걱정 없습니다. GitHub를 사용하지 않는다면 Netlify도 같은 방식으로 지원합니다. 또는 정말 간단하게 하고 싶다면 GitHub Pages를 추천합니다. 리포지토리 이름을 `username.github.io`로 생성한 후 코드를 push하면 자동으로 `username.github.io` URL이 할당됩니다. 도메인을 별도로 구매할 필요 없습니다. 배포 후 반드시 모바일 폰으로 한 번은 확인하세요. 데스크톱에서는 잘 보였지만 폰에서는 글자가 겹치거나 버튼이 누르기 불편할 수 있습니다. 안티그래비티가 반응형을 고려해 생성했다면 대부분 깔끔하게 보일 겁니다.
처음부터 끝까지 몇 분 걸렸나요? 저도 이번에 직접 따라해봤는데, 프롬프트를 치밀하게 작성하고 미세조정을 3~4회 정도 거친 후 배포까지 약 35분 정도였습니다. 경험이 많으신 분들은 15분 안에 끝낸다고 했으니, 확실히 빠릅니다.
가장 만족한 부분은 “정말 코드를 한 줄도 안 썼다”는 점입니다. HTML, CSS, JavaScript를 모두 AI가 작성했는데 배포 후 실제 웹사이트가 정상 작동합니다. 이미지도 로드되고, 링크도 클릭되고, 모바일도 잘 나옵니다. 마치 인테리어 전문가가 집을 꾸며주는 기분이었어요. 아쉬웠던 부분도 솔직하게 말하면, “정해진 틀 안에서만” 작동한다는 느낌입니다. 매우 독특한 디자인이나 복잡한 상호작용(예: 실시간 데이터 대시보드)을 원하면 개발자에게 맡기는 게 낫습니다. 또한 처음 프롬프트가 정확해야 수정 사이클이 적다는 점도 있습니다. 너무 모호하게 “멋진 페이지 만들어”라고 하면 여러 번 수정해야 합니다. 한 가지 더 솔직히 말씀드리면, 처음 결과가 너무 마음에 들면 오히려 “조금만 더 바꿔볼까” 하는 욕심이 생기더라고요. 디자인 미세조정 프롬프트를 한 번 더 던지면 또 새로운 버전이 나오고, 그게 또 마음에 들어서 한 번 더. 그러다 보면 처음 만족했던 버전이 어디로 갔는지 모르게 됩니다. 안티그래비티는 버전 히스토리를 볼 수 있긴 한데, 처음 한두 번은 그게 어디 있는지 못 찾아 헤맸어요. 그래서 저는 “이게 마음에 들었다” 싶으면 GitHub에 한 번 push 해두고 그다음 미세조정으로 넘어가는 습관을 들였습니다. 작은 팁이지만 헤매는 시간이 확 줄어듭니다.
여기까지 함께 한 분들께
지금까지의 여정을 요약하면 이렇습니다. 1편에서 안티그래비티를 설치하고 기본을 배웠고, 2편에서 실제 포트폴리오 페이지를 만들어 배포했습니다. 전체 소요 시간은 처음 따라하는 분 기준 30~45분, 한 번 해본 분이라면 20분 안쪽입니다. 코드 경험이 전혀 없어도 본인의 첫 홈페이지를 만들 수 있다는 점이 핵심입니다.
다만 추천하지 않는 경우도 있습니다. 복잡한 백엔드(데이터베이스 연동, 로그인 시스템)가 필요하거나, 대규모 전자상거래 사이트를 만들어야 한다면 안티그래비티보다는 전문 개발자나 WordPress 같은 플랫폼을 고려하세요. 안티그래비티는 “빠르게 첫 발을 떼는 것”에 최적화되어 있습니다. 혹시 따라해 본다면, 처음에는 작은 포트폴리오나 개인 블로그처럼 단순한 페이지부터 시작하세요. 성공 확률이 높고, 그다음에 조금 복잡한 프로젝트로 나아가는 게 좋습니다. 프롬프트 작성이 예술인 만큼, 한두 번 경험하면 AI에게 “정확히 뭘 원하는지” 전달하는 감각이 생깁니다. 이 글을 다 읽으셨다면, 여러분도 오늘부터 시작해보세요.