「내 페이지 만들기」 수업 재료

내 페이지 템플릿

디자인을 고르고, 글자만 내 이야기로 바꾸면 소개 페이지가 됩니다. 디자인 47가지를 준비했습니다.

이렇게 만듭니다

1
고르고 받기
마음에 드는 디자인의 「ZIP 받기」를 누르고, 받은 파일을 오른쪽 클릭 → 「모두 압축 풀기」. 압축을 풀지 않고 열면 모양이 나오지 않습니다.
2
열어 보기
풀린 폴더의 index.html 을 더블클릭하면 예시 페이지가 열립니다. 영상 자리의 「오류 153」은 인터넷에 올리면 사라집니다.
3
내 이야기로 바꾸기
Antigravity 의 Open Folder 로 index.html 이 바로 보이는 폴더를 열고, 아래 문장을 AI 에게 붙여 넣습니다.
4
인터넷에 올리기
GitHub 에 새 저장소를 만들어 폴더 안 파일을 올리고, Vercel 에서 그 저장소를 가져옵니다. 수업 교재 「깃과 깃허브」 차시를 그대로 따라 하세요.

괄호 부분만 내 것으로 바꿔서 Antigravity 채팅창에 붙여 넣으세요.

글 바꾸기
index.html 의 글자만 내 이야기로 바꿔 줘. 새 파일은 만들지 말고, 태그와 class, style.css 는 그대로 둬. DESIGN.md 를 지켜. 내 이야기는 이래: (여기에 내 이야기)
카카오톡 주소
첫 화면 버튼과 연락처의 카카오톡 오픈채팅 주소를 이 주소로 바꿔 줘. 다른 곳은 바꾸지 마: (내 오픈채팅 링크)
내 사진
images 폴더에 내 사진 my-photo.jpg 를 넣었어. index.html 의 사진 주석 설명대로 첫 화면 사진 자리에 연결해 줘. 다른 곳은 바꾸지 마.
대표색
style.css 맨 위 한 줄의 대표색만 (원하는 색)으로 바꿔 줘.
칸 늘리기
경력 칸을 하나 더 만들어 줘. 위 칸 모양을 그대로 복사하고, DESIGN.md 를 지켜.

불러오는 중…

모양과 그림이 안 나와요+

압축을 풀었는지 확인하세요. ZIP 안에서 바로 열면 모양이 나오지 않습니다.

영상 자리에 「오류 153」이 떠요+

내 컴퓨터에서 파일로 열 때만 그렇습니다. 인터넷에 올리면 영상이 나옵니다.

아이폰 사진이 안 보여요+

.heic 사진은 크롬에서 보이지 않습니다. JPG 로 바꿔 넣으세요. 앞으로 찍을 사진은 아이폰 설정 → 카메라 → 포맷 → 「높은 호환성」으로 바꾸면 JPG 로 찍힙니다.

버튼을 눌러도 카카오톡이 안 열려요+

오픈채팅 주소를 아직 넣지 않은 상태입니다. 「내오픈채팅주소」 자리를 내 오픈채팅 링크로 바꾸세요. (오픈채팅방 → 공유 → 링크 복사)

카톡에 주소를 보냈는데 그림이 안 떠요+

index.html 위쪽 og:image 의 주소를 https:// 로 시작하는 전체 주소로 바꾸세요. 그림은 images/og.jpg (가로 1200 × 세로 630)를 내 그림으로 바꾸면 됩니다.

AI 가 파일을 잔뜩 만들었어요+

「방금 바꾼 거 되돌려 줘」라고 말하세요. 그래도 안 되면 ZIP 을 다시 받아 처음부터 하면 됩니다.