👋 코딩을 몰라도 괜찮습니다. 내 소개를 정리하고, AI와 함께 포트폴리오 웹사이트를 만들어 인터넷에 공개합니다.
한 번에 한 단계씩 진행하세요. 프롬프트를 복사하고, [대괄호]를 내 내용으로 바꾸면 됩니다.
워크플로 한눈에 보기 #
이 실습은 한 번에 한 단계씩 진행합니다. 1~7단계에서 생성형 AI로 내용과 디자인을 정리해 plan.md를 확정하고, 8단계에서만 Grok Bot으로 웹사이트 파일을 만듭니다. 확인한 파일은 9단계에서 GitHub에 보관한 뒤, 10단계에서 Vercel로 인터넷에 공개합니다. 아쉬운 점이 있으면 11~12단계에서 수정한 다음 같은 주소에 다시 배포합니다.
1~7단계 실습 흐름 #
1~7단계는 ChatGPT·Claude·Gemini 중 하나로 진행하며, 여기까지는 Grok Bot을 사용하지 않습니다. 소개와 경험, 화면 순서, 디자인을 정리한 뒤 만들 것과 뺄 것을 확정하고 빠진 내용을 확인합니다. 끝나면 최신 plan.md와 checkpoint.md를 컴퓨터에 저장한 다음 8단계로 넘어갑니다.
먼저 이것만 알아두세요 #
| 도구 | 맡길 일 |
|---|---|
| ChatGPT·Claude·Gemini 중 하나 | 내용 정리, 기획, 사용법 질문 |
| Grok Bot | 웹사이트 코드 작성·수정·테스트만 |
| GitHub | 완성한 원본 파일 보관 |
| Vercel | 다른 사람이 접속할 웹사이트 주소 만들기 |
Grok Bot 사용량을 아끼기 위해 기획을 먼저 마칩니다. 개발할 때만 Grok Bot을 사용하세요.
준비물 #
- PC와 웹브라우저
- 생성형 AI 계정 하나: ChatGPT·Claude·Gemini 중 선택
- Grok Bot, GitHub, Vercel 계정
- 내 소개, 프로젝트나 경험, 공개할 이메일
서비스 이용 조건과 사용량은 내 계정 화면에서 확인하세요. 결제가 필요하면 멈추고 판단합니다.
저장할 폴더 만들기 #
내 컴퓨터에 my-portfolio 폴더를 만드세요. AI에게 받은 최신 파일을 여기에 모읍니다.
| 파일 | 쉬운 설명 |
|---|---|
| plan.md | 무엇을 만들지 정리한 메모 |
| index.html | 브라우저로 열어 보는 실제 웹사이트 |
| assets 폴더 | 사진이 있을 때만 사용하는 폴더 |
| checkpoint.md | 어디까지 했는지 적는 이어 하기 메모 |
.md는 텍스트 문서입니다. 내용을 읽을 때는 메모장 같은 텍스트 편집기를 사용해도 됩니다.
꼭 지킬 약속 #
- 비밀번호·인증번호·API 키는 AI 대화에 적지 않습니다.
- 공개할 정보만 사용합니다. 없는 경력이나 성과는 만들지 않습니다.
- 파일은 직접 다운로드합니다. AI가 ‘저장했다’고 말한 것만 믿지 않습니다.
- 공개·결제·삭제는 내용을 확인한 뒤 직접 진행합니다.
1단계. 생성형 AI와 시작하기 #
사용 도구: ChatGPT·Claude·Gemini 중 하나
새 대화를 열고 아래 프롬프트를 보내세요. 7단계까지 같은 대화를 사용하면 편합니다.
코딩을 처음 접하는 사람의 포트폴리오 제작을 도와주세요.
이 대화에서는 기획과 사용법 안내만 하고 코드는 작성하지 마세요.
실제 개발은 나중에 Grok Bot에서 진행합니다.
- 소개·프로젝트 또는 경험·연락처가 있는 한 페이지 사이트를 만듭니다.
- CSS와 JavaScript를 포함한 index.html을 사용합니다.
- 회원가입·결제·서버·DB·프레임워크는 사용하지 않습니다.
- 어려운 용어는 한 문장으로 풀어주세요.
- 질문은 한 번에 3개 이하로 해주세요.
- 내가 요청한 단계만 진행하고 확인을 기다려주세요.
- 확정한 내용은 plan.md 하나에 모아 계속 갱신해주세요.
- 파일 첨부가 안 되면 파일명과 복사할 전체 내용을 주세요.
먼저 내가 준비할 것을 짧게 알려주세요.완료 확인: 어떤 AI에서 기획하고 어떤 도구에서 개발하는지 알겠습니다.
2단계. 내 소개와 경험 정리하기 #
사용 도구: 생성형 AI
완벽한 문장이 아니어도 괜찮습니다. 경력이 없으면 과제·동아리·개인 경험을 적으세요.
포트폴리오에 넣을 내용을 정리해주세요.
- 이름 또는 활동명: [입력]
- 직업 또는 관심 분야: [입력]
- 이 사이트를 볼 사람: [입력]
- 나의 강점: [입력]
- 소개하고 싶은 프로젝트나 경험: [내가 한 일과 결과]
- 공개할 이메일: [입력]
- 추가 링크·사진: [없으면 생략]
한 줄 소개, 짧은 자기소개, 프로젝트 또는 경험, 연락처로 정리해주세요.
없는 경력·숫자·링크는 만들지 마세요.
꼭 필요한 빈 정보만 질문하고 plan.md에 반영해주세요.완료 확인: 내용이 사실이고, 인터넷에 공개해도 괜찮습니다.
3단계. 화면 순서 정하기 #
사용 도구: 생성형 AI
와이어프레임은 ‘어디에 무엇을 놓을지’ 그린 간단한 배치도입니다.
정리한 내용으로 화면 순서를 정해주세요.
기본은 첫 화면 → 프로젝트/경험 → 자기소개 → 연락처입니다.
없는 내용은 생략해주세요.
PC와 휴대전화 화면을 각각 글자와 네모로 간단히 그려주세요.
메뉴는 해당 위치로 이동하고 문의 버튼은 이메일 앱을 열게 합니다.
아직 코드는 작성하지 말고 plan.md를 갱신해주세요.완료 확인: 첫 화면에서 내가 누구인지, 어떻게 연락하는지 알 수 있습니다.
4단계. 디자인 정하기 #
사용 도구: 생성형 AI
마음에 드는 분위기만 말해도 됩니다. 처음에는 밝은 배경과 포인트 색상 하나면 충분합니다.
포트폴리오 디자인을 단순하게 정해주세요.
- 원하는 분위기: [예: 차분한, 깔끔한, 신뢰감 있는]
- 좋아하는 색: [입력 또는 추천 요청]
- 참고 사이트: [없으면 생략]
배경·글자·포인트 색, 글자 크기, 버튼·카드 규칙만 정해주세요.
휴대전화에서도 읽기 쉽게 하고 과한 움직임은 빼주세요.
참고 사이트의 문구·사진·코드는 복사하지 마세요.
plan.md를 갱신해주세요. 아직 코드는 만들지 마세요.완료 확인: 글자가 잘 읽히고, 원하는 분위기와 맞습니다.
5단계. 만들 것과 뺄 것 확정하기 #
사용 도구: 생성형 AI
PRD는 ‘무엇을 만들면 완성인지’ 적은 제작 요청서입니다. 별도 문서 대신 plan.md에 함께 정리합니다.
지금까지의 내용을 제작 요청서로 짧게 정리해주세요.
- 필수: 소개, 프로젝트 또는 경험, 메뉴 이동, 이메일 문의
- 제작: CSS·JavaScript를 포함한 index.html, 필요한 사진만 assets에 저장
- 제외: 회원가입·결제·문의 폼·서버·DB·프레임워크·npm
- 품질: 모바일 가로 넘침 없음, 읽기 쉬운 글자, 키보드 조작, 이미지 설명, 페이지 제목·설명
- 원본 보관: GitHub / 인터넷 공개: Vercel
기능별로 내가 확인할 방법을 한 줄씩 적어주세요.
plan.md를 갱신하고 아직 코드는 만들지 마세요.완료 확인: 이번에 만들 것과 만들지 않을 것이 명확합니다.
6단계. 빠진 내용 확인하기 #
사용 도구: 생성형 AI
개발 전에 확인하면 나중에 다시 고치는 일을 줄일 수 있습니다.
plan.md에서 아래 문제를 확인해주세요.
- 자료가 없는 섹션이나 버튼
- 잘못된 연락처·링크
- 지어낸 경력·성과 또는 비공개 정보
- 앞에서 정한 내용과 충돌하는 요구
지금 해결할 문제만 짧게 알려주세요.
내 정보는 임의로 바꾸지 말고 질문해주세요.
필수 문제가 해결되면 plan.md를 갱신해주세요.완료 확인: 필수 정보에 빈칸이 없고, 공개해도 되는 내용만 남았습니다.
7단계. Grok Bot에 넘길 준비하기 #
사용 도구: 생성형 AI
여기까지는 Grok Bot을 사용하지 않습니다. 확정한 문서를 저장한 뒤 개발 도구로 이동합니다.
Grok Bot에 전달할 최신 plan.md를 정리해주세요.
콘텐츠·화면 순서·디자인·제작 방식·완성 기준을 포함해주세요.
개발은 아래 순서로 나눠주세요.
M1: 내용과 화면 뼈대
M2: 디자인과 모바일 화면
M3: 버튼·접근성·페이지 제목과 설명
M4: 오류 확인과 최종 파일 정리
plan.md와 checkpoint.md를 첨부해주세요.
checkpoint.md에는 완료 단계·확정 결정·남은 문제·다음 작업을 적어주세요.
첨부가 안 되면 파일별 전체 내용을 주세요. 코드는 작성하지 마세요.완료 확인: 최신 plan.md와 checkpoint.md가 내 컴퓨터에 있습니다.
8단계. Grok Bot으로 웹사이트 만들기 #
사용 도구: Grok Bot
먼저 문서 전달하기 #
Grok Bot에서 새 대화를 열고 plan.md와 checkpoint.md를 첨부합니다. 첨부가 안 되면 파일명과 내용을 붙여넣으세요.
첨부 문서를 바탕으로 포트폴리오를 개발해주세요.
이 대화에서는 코드 작성·수정·테스트만 진행합니다.
기획을 다시 하거나 운영 문서를 작성하지 마세요.
- CSS·JavaScript를 포함한 index.html로 만듭니다.
- 사진은 필요한 경우 assets에 둡니다.
- 프레임워크·npm·서버·DB는 추가하지 마세요.
- 확정한 문구·구조·디자인은 유지해주세요.
- 지정한 묶음만 진행하고 내 확인을 기다리세요.
- 전체 코드 파일과 필요한 assets를 첨부해주세요.
- 파일 첨부가 안 되면 파일명과 전체 코드를 주세요.
- 실제 테스트한 것과 미검증 항목을 구분해주세요.
- 로그인·외부 공개·결제·삭제는 하지 마세요.
먼저 문서를 읽을 수 있는지와 파일 생성·브라우저 테스트 가능 여부만 알려주세요.
아직 개발은 시작하지 마세요.한 묶음씩 요청하기 #
아래 프롬프트를 하나씩 보냅니다. 결과를 내려받아 확인한 뒤 다음 것으로 넘어가세요.
M1 · 내용과 뼈대 #
M1만 진행해주세요.
plan.md의 모든 필수 내용이 들어간 index.html을 만들어주세요.
문구는 HTML 본문에 넣고 없는 정보는 지어내지 마세요.
파일을 첨부하고 내 확인을 기다려주세요.받은 index.html을 더블클릭해 브라우저에서 엽니다. 내용과 순서가 맞으면 다음 요청을 보냅니다.
M2 · 디자인과 모바일 #
M1을 확인했습니다. M2만 진행해주세요.
확정한 디자인을 적용하고 사진은 assets 상대경로로 연결해주세요.
화면 너비 360·768·1280px에서 글자·사진이 잘리거나 가로로 넘치는지 확인해주세요.
문구·섹션 순서는 유지하고 최신 전체 파일을 첨부해주세요.브라우저 창을 좁혀 글자와 사진이 잘리지 않는지 보세요. ZIP을 받았다면 먼저 압축을 풉니다.
M3 · 버튼과 기본 동작 #
M2를 확인했습니다. M3만 진행해주세요.
메뉴 이동·제공한 프로젝트 링크·이메일 문의를 구현해주세요.
한국어 설정, 페이지 제목·설명, 제목 구조, 이미지 설명, 키보드 포커스를 적용해주세요.
과한 움직임은 빼고 동작 줄이기 설정에 대응해주세요.
이메일 주소도 글자로 표시해주세요. 문의 폼은 만들지 마세요.
공개 주소가 필요한 메타 정보는 배포 후로 남겨주세요.
최신 전체 파일을 첨부해주세요.메뉴·링크를 누르고, 키보드 Tab으로 이동해 보세요. 이메일 버튼은 기기에 메일 앱이 설정되어 있어야 열릴 수 있습니다.
M4 · 최종 확인 #
M3를 확인했습니다. M4만 진행해주세요.
링크·이미지·모바일 가로 넘침·키보드 조작·콘솔 오류를 점검해주세요.
plan.md와 실제 문구가 일치하는지도 확인해주세요.
실행하지 못한 테스트는 미검증으로 표시해주세요.
최신 index.html과 필요한 assets를 ZIP으로 첨부해주세요.
변경 파일·테스트 결과·남은 문제만 짧게 보고하고 멈춰주세요.완료 확인: 내 컴퓨터에서 최신 사이트가 열리고, 내용·버튼·모바일 화면을 확인했습니다.
9단계. GitHub에 원본 저장하기 #
사용 도구: GitHub에서 직접 진행 · 질문은 생성형 AI
GitHub 저장소는 원본 파일을 보관하는 온라인 폴더입니다.
- GitHub에 로그인하고
New repository를 누릅니다. - 이름을
my-portfolio처럼 입력하고Private로 만듭니다. uploading an existing file또는Add file → Upload files를 선택합니다.- 압축을 푼 최신
index.html과 필요한assets를 올립니다. ZIP 자체는 올리지 않습니다. - 설명에
feat: add portfolio를 적고Commit changes로 저장합니다.
커밋은 ‘변경 내용을 기록해 저장하는 것’입니다. 저장소 최상위에 index.html이 보여야 합니다.
⚠️ 기획 문서·개인정보·백업 ZIP은 올리지 마세요. 비공개 저장소여도 배포한 파일은 인터넷에 공개될 수 있습니다.
완료 확인: 저장소 주소를 열면 최신 파일과 저장 기록이 보입니다.
10단계. Vercel로 인터넷에 공개하기 #
사용 도구: Vercel에서 직접 진행 · 질문은 생성형 AI
배포는 ‘다른 사람이 접속할 수 있도록 웹사이트를 인터넷에 올리는 것’입니다. 여기서 실제 공개되므로 내용을 한 번 더 확인하세요.
- Vercel에 로그인하고 새 프로젝트를 추가합니다.
- GitHub를 연결하고 방금 만든 저장소를
Import합니다. - 아래 설정을 확인합니다.
| 설정 | 선택할 내용 |
|---|---|
| Framework Preset | Other |
| Root Directory | index.html이 있는 저장소 최상위 |
| Build·Install Command | 별도 명령 사용 안 함 |
| Output Directory | 현재 화면에서 정적 파일을 배포하는 설정 확인. dist를 임의로 입력하지 않음 |
- 공개할 준비가 됐다면
Deploy를 누릅니다. - 성공 후 사이트 주소를 열고, 휴대전화와 시크릿 창에서도 확인합니다.
화면이 다르거나 오류가 나면 생성형 AI에 물어보세요. 결제나 권한 확대가 필요하면 멈춥니다.
완료 확인: 로그인하지 않은 사람도 사이트에 접속하고, 내용·사진·링크가 정상입니다.
공개 주소를 코드에 넣어야 할 때만 #
검색·공유용 주소 설정이 필요하면 Grok Bot에 아래 개발 요청만 보냅니다. 변경한 파일은 직접 GitHub에 올리고 재배포 성공을 확인하세요.
최신 파일을 첨부합니다. 공개 주소는 [실제 HTTPS 주소]입니다.
canonical·og:url을 실제 주소로 맞추고 필요한 경우 robots.txt·sitemap.xml을 추가해주세요.
없는 공유 이미지는 넣지 마세요. 다른 내용·디자인은 바꾸지 마세요.
수정 파일과 테스트 결과만 주고 업로드·배포는 하지 마세요.11단계. 아쉬운 부분 수정하기 #
사용 도구: 생성형 AI로 요청 정리 → Grok Bot으로 코드 수정
먼저 사이트를 보고 바꾸고 싶은 것 한 종류만 고르세요.
| 이렇게 말하기보다 | 이렇게 요청하세요 |
|---|---|
| 더 예쁘게 해주세요 | 프로젝트 카드 사이 간격을 넓혀주세요 |
| 모바일이 이상해요 | 휴대전화에서 첫 화면 제목이 오른쪽으로 잘립니다 |
생성형 AI에 아래 내용을 보내 수정 요청서를 만듭니다.
Grok Bot에 보낼 수정 요청서를 짧게 정리해주세요. 코드는 작성하지 마세요.
- 현재 문제: [위치와 상태]
- 원하는 결과: [구체적인 변경]
- 유지할 것: [나머지 문구·색·순서 등]
- 스크린샷: [첨부]
모호한 부분만 질문해주세요.요청서를 확인한 뒤 Grok Bot에 최신 전체 파일과 함께 보냅니다.
첨부한 최신 파일에서 아래 내용만 수정해주세요.
[확정한 수정 요청서]
무관한 문구·디자인은 바꾸지 마세요.
수정 부분과 기존 링크·이미지·모바일 화면을 테스트해주세요.
전체 수정 파일과 테스트 결과만 주고 GitHub 업로드·배포는 하지 마세요.완료 확인: 다운로드한 수정본을 열어 원하는 변경을 확인했습니다. 아직 공개 사이트에는 반영하지 않습니다.
12단계. 수정본 다시 배포하기 #
사용 도구: GitHub·Vercel에서 직접 진행 · 질문은 생성형 AI
- 이전 정상 파일을 다른 폴더에 복사하고, GitHub의 현재 커밋을 기록합니다.
- 확인한 수정 파일만 GitHub의 같은 위치에 올립니다. 원본이 다른 사람에 의해 바뀌었다면 덮어쓰기 전에 멈춥니다.
- 변경 설명을 적고 커밋합니다.
- Vercel에서 해당 커밋의 배포가 성공했는지 확인합니다.
- 기존 사이트 주소를 새로고침하고 바뀐 부분·사진·링크를 다시 확인합니다.
GitHub의 main 브랜치가 Vercel에 연결되어 있으면 커밋할 때 자동 배포될 수 있습니다. 새 프로젝트를 또 만들 필요는 없습니다.
완료 확인: 같은 공개 주소에서 최신 수정이 보이고, 로그인 없이 접속됩니다.
집에서 이어 하기 #
정리만 하려고 Grok Bot을 다시 사용하지 않습니다. 생성형 AI에 최신 파일과 개발 결과 보고를 첨부하세요.
다음에 이어 할 수 있도록 checkpoint.md를 짧게 정리해주세요.
- 마지막 완료 단계와 다음 할 일
- 확정한 결정과 남은 문제
- 최신 파일 목록
- GitHub 저장소·브랜치·커밋과 사이트 공개 주소: [있는 것만 입력]
직접 확인하지 않은 결과는 미검증으로 적어주세요.
코드는 수정하지 말고 파일을 첨부하거나 복사할 전체 내용을 주세요.다음에는 생성형 AI에 plan.md·checkpoint.md를 첨부하고 “현재 상태와 다음 할 일만 알려주세요”라고 요청하세요. 개발이 필요할 때만 Grok Bot에 최신 문서와 코드를 전달합니다.
막히면 이렇게 질문하세요 #
사용법은 생성형 AI에 먼저 묻고, 실제 코드 수정만 Grok Bot에 맡깁니다.
지금 [단계 번호]를 진행 중입니다.
- 마지막으로 한 일: [입력]
- 기대한 결과: [입력]
- 실제 화면이나 오류: [입력 또는 스크린샷]
다음에 내가 할 일을 3개 이하로 알려주세요.
확인하지 못한 원인은 추정이라고 표시해주세요.| 문제 | 먼저 확인할 것 |
|---|---|
| 파일을 만들었다는데 첨부가 없음 | 첨부를 요청하거나 전체 내용을 직접 저장 |
| 사이트가 코드처럼 보임 | 파일명이 index.html.txt가 아닌지 확인 |
| 사진이 안 보임 | ZIP 압축 해제, assets 위치·파일명 확인 |
| 배포 후 404 | 저장소 최상위의 index.html과 배포 설정 확인 |
| 수정했는데 사이트가 그대로임 | 새 커밋의 배포 성공 여부 확인 |
| 사이트에 로그인 화면이 뜸 | Vercel의 배포 보호·방문자 접근 설정 확인 |
기존 자료 #
- 바이브코딩 본격 실습 순서
- 바이브코딩 맛보기 실습 순서 w.그록봇 (Grok Bot)
