🤖 이번 실습은 그록봇 대화창 하나로 진행할 수 있습니다.
준비물: 그록봇 앱(로그인), 구글 계정(구글 문서), Github, Vercel 계정
1. ChatGPT – 시리얼 | 노션 예시 생성기 사이트에 접속합니다. #
2. Resume 포트폴리오 버튼을 클릭합니다. #
3. 이름, 직업을 입력합니다. #
4. 자신의 이력서에 들어갈 내용을 복사합니다. #
💡 구글 문서: 구글이 무료로 제공하는 온라인 문서 프로그램이에요. 주소창에 docs.new만 입력하면 새 문서가 바로 열려요.
5. 인터넷 주소창에서 docs.new를 입력해 구글 문서를 생성합니다. #
6. 수정 → 마크다운에서 붙여넣기를 선택합니다. #
💡 마크다운: # 제목, – 목록처럼 간단한 기호로 글의 모양을 표시하는 글쓰기 방식이에요.
참고이미지
7. 문서 내에서 자신의 포트폴리오에 맞게 내용을 수정합니다. #
8. 그록봇 앱 또는 웹을 실행하고 로그인한 뒤, 새 대화를 시작합니다. #
9. 아래 사이트에서 내가 만들고 싶은 디자인 포트폴리오를 탐색합니다. #
10. 원하는 디자인을 찾았으면 사이트를 열어 Open in Live 버튼을 누릅니다. #
참고 이미지
11. 내 포트폴리오 내용을 마크다운으로 복사합니다. #
참고이미지 → 전체 선택해야 옵션이 보입니다.
12. 그록봇 대화창에 아래 준비물을 넣고 아래 프롬프트를 함께 보냅니다. #
- 웹플로우 사이트 주소
- 내 포트폴리오 파일
- 아래 프롬프트
💡 프롬프트: AI에게 보내는 요청 문장이에요. 아래 회색 상자 내용을 통째로 복사해 붙여 넣으면 돼요. HTML은 웹페이지를 만드는 기본 언어예요.
당신은 시니어 웹 디자이너 겸 프론트엔드 개발자입니다.
# 목표
아래 "참고 사이트"의 디자인과 모든 애니메이션, 모션 그래픽을 빠짐없이 수집하고, 저작권에 위배되지 않는 선에서 최대한 똑같이 느껴지도록 재현해 주세요. 내용은 "내 포트폴리오 파일"의 내용으로만 채운 단일 페이지 웹사이트를 한 번에 완성해 주세요.
# 입력
- 참고 사이트: [여기에 참고할 포트폴리오 사이트 주소를 붙여 넣기]
- 내 포트폴리오: 첨부한 파일(마크다운)
# 저작권 준수 (가장 먼저 지킬 것)
- 참고 사이트의 소스 코드(HTML, CSS, JS)는 그대로 복사하지 말고, 관찰한 동작과 모습을 보고 처음부터 직접 작성하세요.
- 참고 사이트의 이미지, 영상, 로고, 아이콘, 글꼴 파일, 문구는 가져오지 마세요. 같은 자리에 같은 크기와 연출로 내 것을 넣거나, 비슷한 느낌의 직접 만든 요소와 자유롭게 쓸 수 있는 글꼴로 대체하세요.
- 레이아웃, 간격, 색의 분위기, 움직이는 방식, 타이밍처럼 저작권으로 보호되지 않는 설계 방식은 최대한 똑같이 따르세요.
- 이 범위 안에서 첫인상과 사용감은 참고 사이트와 거의 같아야 합니다.
# 1단계: 그록봇의 브라우저로 참고 사이트를 직접 탐색하며 수집
그록봇의 브라우저로 참고 사이트를 열고, 사람이 사용하듯 직접 조작하며 움직이는 요소를 하나도 빠뜨리지 말고 목록으로 정리하세요. 화면을 보는 것만으로 끝내지 말고 반드시 아래 동작을 모두 실행해 보세요.
- 처음 접속할 때: 로딩 화면, 인트로 애니메이션, 첫 화면 등장 효과를 처음부터 끝까지 관찰하세요. 필요하면 새로고침해서 다시 확인하세요.
- 스크롤: 맨 위부터 맨 아래까지 천천히 스크롤하세요. 스크롤 위치별로 나타나는 효과(페이드, 슬라이드, 확대, 순차 등장, 패럴랙스, 고정 섹션, 진행 표시줄)를 기록하고, 위로 다시 올릴 때의 반응도 확인하세요.
- 마우스 올리기: 버튼, 링크, 카드, 이미지, 메뉴, 로고, 아이콘, 글자 등 반응할 것 같은 모든 요소 위에 마우스를 올려 보고 변화를 기록하세요. 커서 모양과 커서를 따라다니는 효과도 확인하세요.
- 클릭과 이동: 메뉴, 탭, 슬라이더, 아코디언, 모달을 눌러서 열고 닫는 효과를 확인하세요. 페이지 안의 이동과 페이지 전환 효과도 확인하세요. 단, 문의 전송이나 결제처럼 실제로 무언가를 보내는 버튼은 누르지 마세요.
- 숨은 효과: 일정 시간 가만히 두었을 때 바뀌는 효과, 화면 크기(데스크톱, 태블릿, 모바일)를 바꿨을 때 달라지는 효과, 마우스를 움직일 때만 나타나는 효과를 확인하세요.
- 모션 그래픽: 배경 움직임, 그라데이션 변화, 도형과 일러스트, SVG, Lottie, 캔버스, 3D, 영상 배경이 있는지 확인하세요.
- 각 효과마다 기록할 것: 트리거, 움직이는 방식, 시간(초), 이징(가속 곡선), 반복 여부
- 브라우저로 직접 확인하지 못한 효과는 추측해서 적지 말고 "확인 못함"으로 표시하세요.
# 2단계: 적용
1. 1단계 목록의 모든 효과를 내 페이지에 하나도 빠짐없이 적용하세요. 가능한 한 CSS 애니메이션, IntersectionObserver, 순수 JavaScript로 직접 구현하고, 외부 라이브러리는 꼭 필요할 때만 CDN으로 불러오세요.
2. 효과의 위치, 타이밍, 이징, 반복은 참고 사이트와 최대한 똑같이 맞추세요.
3. 코드는 관찰한 동작을 바탕으로 처음부터 직접 작성하고, 영상이나 Lottie처럼 파일이 필요한 요소는 같은 느낌으로 직접 만들어 대체하세요.
4. 디자인(레이아웃, 간격, 글자 크기 비율, 컬러의 분위기, 이미지 배치)도 저작권을 지키는 선에서 최대한 똑같이 따르세요.
5. 문구, 경력, 프로젝트, 연락처 등 모든 내용은 "내 포트폴리오 파일"의 것만 사용하세요. 참고 사이트의 문구와 정보는 절대 넣지 마세요.
6. 이미지는 참고 사이트의 배치, 크기, 연출을 똑같이 따르되 실제 사진은 내 포트폴리오 파일에 있는 것으로 넣으세요. 내 이미지가 없는 자리는 같은 톤의 플레이스홀더를 넣고, 어느 자리인지 알려 주세요.
7. 내 포트폴리오에 없는 정보는 지어내지 마세요.
8. 모바일에서도 깨지지 않게 반응형으로 만들고, 모션이 많아도 버벅이지 않게 transform과 opacity 위주로 구현하세요. 사용자가 "동작 줄이기" 설정을 켠 경우에는 움직임을 줄여 주세요.
9. 완성한 뒤에는 그록봇의 브라우저로 결과 파일을 직접 열어서, 1단계 목록의 효과가 똑같이 동작하는지 확인하고 다른 부분은 고쳐 주세요.
10. 중간 질문 없이 바로 완성하세요.
# 산출물
1. 최종 결과: 단일 HTML 파일 1개(CSS와 JS 포함)로 만들어 파일로 첨부해 주세요.
2. 수집한 효과 목록과 각각의 적용 여부를 표로 정리해 주세요. (효과 이름, 트리거, 시간, 이징, 적용 여부)
3. 확인하지 못했거나 재현하지 못한 효과, 그리고 저작권 때문에 대체한 요소가 있으면 이유와 대체한 방법을 알려 주세요.13. Github에 파일 저장 #
💡 GitHub: 코드 파일을 인터넷에 보관하는 서비스예요. 저장소(repository)는 GitHub 안의 프로젝트 폴더라고 생각하면 돼요.
방금 만든 포트폴리오 HTML 파일을 내 GitHub 저장소에 저장해 줘.
# 조건
- 저장소 이름: portfolio-test-261103 (없으면 새로 만들어 줘)
- 공개 범위: Private
- 파일 이름은 index.html로 저장해 줘. (이미지 등 다른 파일이 있으면 같은 폴더에 함께 저장해 줘)
- GitHub 연결이 안 되어 있으면 연결 방법을 먼저 알려 주고, 내가 직접 로그인하고 승인할 수 있게 해 줘. 내 비밀번호나 토큰은 채팅에 적지 마.
# 마무리
- 저장이 끝나면 저장소 주소와 저장된 파일 목록을 알려 줘.
- 내용을 바꾸지 말고, 지금 있는 파일 그대로 저장해 줘.
14. Vercel에 연결하여 배포 #
💡 Vercel: GitHub에 있는 웹페이지를 누구나 볼 수 있는 인터넷 주소로 열어 주는 서비스예요. 배포는 내 결과물을 인터넷에 올려 다른 사람이 접속할 수 있게 하는 일이에요.
방금 GitHub에 저장한 portfolio-test-261103 저장소를 Vercel에 연결해서 인터넷에 공개해 줘.
# 조건
- 대상 저장소: 내 GitHub의 portfolio-test-261103
- 배포 방식: 별도 빌드 없는 정적 사이트(Framework Preset: Other)로 설정하고, 루트 폴더의 index.html을 그대로 공개해 줘.
- Vercel 연결이 안 되어 있으면 연결 방법을 먼저 알려 주고, 내가 직접 로그인하고 승인할 수 있게 해 줘. 내 비밀번호나 토큰은 채팅에 적지 마.
# 마무리
- 배포가 끝나면 공개 주소(https://...vercel.app)를 알려 줘.
- 주소로 접속했을 때 내 포트폴리오가 정상으로 열리는지 확인하고, 문제가 있으면 원인과 해결 방법을 알려 줘.
- 앞으로 GitHub의 index.html을 수정하면 자동으로 다시 공개되는지도 알려 줘.
15. 포트폴리오 수정 (그록봇 대화창에서 이어서 요청합니다) #
컬러 #
🎯 미션: 내 포트폴리오에 어울리는 컬러 팔레트를 직접 정하세요. Primary, Secondary, Accent, Background, Surface, Text, Border 값을 HEX로 지정하고 위 예시 프롬프트에 대입해 실제로 색상을 바꿔보세요.
- Primary/Secondary/Accent: 키/서브/포인트 컬러 역할(어디에 어떤 색을 쓰는지 결정)
- HEX(6글자) + Palette(팔레트): #RRGGBB 형식으로 Primary/Secondary/Accent + Background/Surface/Text/Border까지 한 세트로 제시
- CSS 변수(Design token): –primary 같은 변수로 색을 통일(하드코딩 금지, 전체 일괄 변경 가능)
예시 프롬프트 #
기존 포트폴리오 구조는 유지하고, 컬러만 아래 팔레트로 교체해줘.
Primary/Secondary/Accent 역할을 지켜서 적용해줘(Primary=CTA/링크, Accent=포인트 1~2곳).
[HEX(6글자) + Palette]
- Primary: #0EA5E9
- Secondary: #22C55E
- Accent: #F97316
- Background: #0B1220
- Surface: #111827
- Text: #E5E7EB
- Border: #1F2937
[CSS 변수(Design token)]
--primary 등 변수로만 색을 쓰고, 하드코딩은 없애줘.
결과물: 수정된 HTML 파일을 다시 첨부레이아웃 #
🎯 미션: 내 포트폴리오의 섹션 순서를 직접 정하고, Desktop/Tablet/Mobile 열 구성을 원하는 대로 바꿔 위 예시 프롬프트를 수정해 실행하세요.
- Hero / CTA: 첫 화면(히어로 섹션) + 클릭 유도 버튼(CTA) 묶음(레이아웃 최상단 고정)
- 섹션(Section) 순서 / 정보구조(IA): 어떤 블록을 어떤 순서로 배치할지(예: Hero → Social proof → Projects…)
- Grid/Flex + Breakpoint(반응형 기준점): 카드/열 배치 방식(grid/flex)과 모바일·태블릿·데스크탑에서 열 수가 바뀌는 기준(예: 3열→2열→1열)
예시 프롬프트 #
포트폴리오 레이아웃을 재정렬해줘. (디자인 톤/컬러/폰트는 유지)
Hero/CTA는 항상 최상단에 두고, CTA 버튼 2개를 명확히 보여줘.
섹션(Section) 순서/정보구조(IA)는 아래로 고정해줘:
Hero/CTA → Social proof → Projects → About → Experience → Contact
Grid/Flex + Breakpoint 기준으로 반응형도 잡아줘:
Desktop(≥1025) Projects 3열(grid) / Tablet(481~1024) 2열 / Mobile(≤480) 1열
Hero는 Desktop 2컬럼(flex) → Mobile 1컬럼(세로 스택)으로 변경
결과물: 수정된 HTML 파일을 다시 첨부세부 디자인 #
🎯 미션: Container 최대 폭, Spacing token 기준값, Typography scale 단계를 직접 정해 아래 예시 프롬프트에 반영하고 결과를 확인하세요.
- Spacing token(간격 토큰): 24/40/64처럼 “기준 간격 단위”를 정해 섹션 패딩/마진/gap을 전부 같은 규칙으로 맞추는 것
- Container(max-width): 콘텐츠가 넓게 퍼지지 않게 최대 폭(예: 1200px) + 중앙정렬로 전체 레이아웃 기준선을 잡는 것
- Typography scale(타이포 스케일): h1/h2/p 폰트 크기·line-height·간격을 단계별로 규격화해서 전체 글 흐름/가독성을 통일하는 것
예시 프롬프트 #
포트폴리오의 톤은 유지하고, 세부 디자인만 “시스템화”해서 정돈해줘.
Container(max-width)는 1200px로 통일하고 중앙 정렬해줘.
Spacing token은 24/40/64 기준으로 --space-1.. 변수로 정의하고,
섹션 padding/margin, 카드 gap까지 전부 토큰만 사용하게 바꿔줘.
Typography scale은 h1/h2/p 폰트 크기+line-height를 단계로 정리해서
모바일에서도 글자 잘림/겹침이 없게 적용해줘.
결과물은 수정된 HTML 파일을 다시 첨부해줘.글자 #
🎯 미션: 내 포트폴리오에서 바꾸고 싶은 문구를 3곳 이상 찾아 Ctrl+F로 직접 수정해보세요.
- 프롬프트로 글자를 하나씩 지시하면 시간이 오래 걸립니다.
- 같은 문구가 여러 곳에 있으면, 의도와 다른 위치까지 같이 바뀌는 경우가 잦습니다.
- 그래서 글자(카피) 수정은 직접 편집하는 방식이 가장 빠르고 정확합니다(CTRL+F로 위치 찾기).
자동화 워크플로우라는 글자를 "업무 자동화"로 변경해줘.16. 포트폴리오 공개(배포) #
💡 내가 만든 결과물(웹사이트/앱 코드)을 다른 사람이 접속할 수 있는 서버에 올려서 공개하는 과정
