지난 시간에 우리는 인터넷에 주소가 있는 사이트를 만들었습니다. 아직 내용은 기본 텍스트뿐이지만, 집으로 치면 전기·수도까지 다 연결된 상태입니다.
1회차 = 빈 새 집에 전기·수도·인터넷까지 다 연결한 날.
모든 인프라는 갖춰져 있는데, 집 안은 텅 비어 있는 상태였습니다.
오늘(2회차) = 가구를 들이고, 가족사진을 걸고, 내 이름을 문패에 새기는 날.
도구는 새로 안 삽니다. 지난 시간 손에 익힌 방법 그대로, 내용만 교체합니다.
오늘 시간표를 한눈에 봅니다.
| 섹션 | 내용 | 시간 |
|---|---|---|
| 0 | 큰 그림 — 오늘은 "채우기" | 10분 |
| 1 | 내 사이트 다시 깨우기 (1회차 복습) | 20분 |
| 2 | 내 홈페이지 기획 — 종이에 먼저 | 30분 |
| 3 | 첫 번째 채우기 — 제목과 소개 글 | 35분 |
| — | 🍵 쉬어가기 | 10분 |
| 4 | 사진 넣기 | 35분 |
| 5 | 색·글씨·모바일 다듬기 | 35분 |
| 6 | 마무리 | 15분 |
지난주에 만든 사이트를 오늘 다시 열어야 합니다. 안티그래비티를 실행하고, 지난주 폴더를 찾아서, 개발 서버를 켜는 것까지가 이번 섹션입니다. 1회차에서 이미 해본 동작이지만, 처음엔 손이 기억하지 못할 수 있으니 천천히 같이 합니다.
my-first-site)를 찾아 선택합니다.app/, package.json 등 파일들이 있으면 OK.
지난주 폴더 이름이 뭐였는지 git 기록으로 찾아줘라고 물어볼 수도 있습니다.오른쪽(또는 아래쪽) AI 채팅창에 아래 프롬프트를 붙여넣으세요.
이 폴더는 지난주에 만들어둔 Next.js 프로젝트야. 개발 서버를 다시 켜줘 (npm run dev). 브라우저에서 열어야 할 주소를 알려줘.
AI가 안티그래비티 안 터미널에서 명령어를 대신 실행합니다. 아래쪽 까만 화면에 글자가 나타납니다. 멈출 때까지 기다리세요.
Local: http://localhost:3000 비슷한 줄이 보이면 켜진 것입니다.
포트가 이미 사용 중인 것 같아. 다른 포트로 바꿔서 다시 켜줘라고 말하세요.localhost:3000 입력 → 엔터.집을 지을 때 설계도 없이 바로 벽돌을 쌓으면, 나중에 방 크기가 맞지 않거나 화장실 위치가 이상해집니다. 홈페이지도 마찬가지입니다. 화면을 보지 말고, 종이나 메모장에 먼저 적은 다음 AI에게 부탁해야 내가 원하는 모습이 나옵니다.
지금부터 5가지를 직접 적어보세요. 컴퓨터 화면은 잠깐 내려두어도 됩니다.
① 한 줄 소개 (나는 ___하는 사람입니다)
예) "나는 20년 경력의 제과제빵 강사입니다" / "나는 시흥에서 꽃집을 운영하는 홍길동입니다"
내 한 줄: _______________________________________________________________
② 이 사이트를 볼 사람 한 명을 구체적으로
예) "우리 동네에서 취미로 케이크를 배우고 싶어 하는 40대 주부"
그 한 사람: _______________________________________________________________
③ 꼭 들어갈 내용 3가지 고르기 (해당하는 것에 ✓)
☐ 내가 하는 일 설명 ☐ 나의 강점·특기 ☐ 경력·이력
☐ 수강 후기·고객 이야기 ☐ 가격·신청 방법 ☐ 그 외: ___________
④ 연락 방법 (하나 이상 골라 ✓)
☐ 전화번호 ☐ 이메일 ☐ 카카오톡 오픈채팅 링크 ☐ 인스타그램 주소
⑤ 쓸 사진 고르기 (총 2~3장이면 충분합니다)
대표 사진 1장: 나 혼자 잘 나온 사진 (얼굴이 보이면 좋음)
활동/작업 사진 1~2장: 내가 실제로 하는 일이 보이는 사진
사진 파일을 지금 USB나 카카오톡으로 이 컴퓨터에 옮겨두세요.
이제 화면으로 돌아옵니다. 기획지에 적은 내용을 AI에게 알려주고, 페이지를 내 소개로 바꿉니다. 이번 섹션은 크게 세 단계입니다.
아래 프롬프트에서 [ ] 안을 내 기획지 내용으로 바꿔서 AI에게 보내세요.
지금 app/page.tsx 파일을 아래 4부분으로 완전히 다시 써줘. ① 상단: 큰 제목 + 내 이름 + 한 줄 소개 - 큰 제목: "[내가 하는 일을 한 단어로]" - 이름: "[내 이름]" - 한 줄 소개: "[기획지에 적은 한 줄 소개]" ② 소개 글: 나에 대해 2~3문장 (아래 내가 쓴 글로만 채워줘) "[직접 쓴 소개 글 붙여넣기]" ③ 하는 일 / 강점: 3~5개 항목 (아래 내용만 사용) "[기획지에서 고른 내용 적기]" ④ 연락처: [연락 방법과 실제 정보] 중요: 내가 준 글로만 채우고, 없는 내용은 절대 지어내지 마. 빠진 부분이 있으면 "[여기에 내용을 적어주세요]"처럼 빈칸으로 표시해줘. 디자인은 깔끔하게, Tailwind 클래스 사용.
AI가 "[여기에 내용을 적어주세요]" 같은 빈칸을 남겼다면, 지금 그 자리에 내 글을 직접 넣을 차례입니다.
아까 만든 소개 글 부분의 빈칸을 채워줘. 소개 글: "[직접 쓴 소개 문장 2~3개]" 연락처: [전화번호 또는 카카오 링크 등] 내가 준 텍스트 그대로만 넣고, 추가로 꾸미거나 고치지 마.
AI가 파일을 수정한 뒤, 저장은 자동으로 됩니다. 브라우저(localhost:3000)를 열어 내 이름과 소개가 보이는지 확인하세요.
브라우저에서 내용이 맞는 것을 확인했으면, 지금 상태를 세이브합니다. 1회차에서 했던 것과 똑같습니다.
지금 변경 사항을 커밋하고 GitHub에 푸시해줘. 커밋 메시지: "2회차 — 내 소개·연락처 채움" 명령어는 네가 직접 실행. 끝나면 성공 여부를 한국어로 알려줘.
1~2분 기다리면 버셀이 자동으로 새 빌드를 시작합니다.
xxx.vercel.app)를 브라우저에서 새로고침하면 내 이름·소개가 보입니다. 이것이 오늘 첫 번째 사이클 완성입니다.
텍스트만 있는 홈페이지는 마치 아무것도 걸리지 않은 흰 벽 같습니다. 사진 한 장이 들어가면 공간이 살아납니다. 다만 액자를 벽에 걸려면 먼저 액자를 방 안에 들여와야 하듯, 사진 파일도 프로젝트 폴더 안으로 먼저 가져와야 합니다.
Next.js에서 이미지를 보여주려면, 사진 파일을 프로젝트 안 public 폴더에 넣어야 합니다.
public 폴더를 찾습니다.public 폴더 안으로 드래그해서 넣습니다.profile.jpg, my-work.jpg, class-photo.png내 사진.jpg, My Photo 2023.JPGpublic/ 안에 내 사진 파일이 보이면 OK.
public 폴더에 [파일명, 예: profile.jpg] 사진을 방금 넣었어. 이 사진을 페이지 상단 소개 글 옆(또는 위)에 넣어줘. 사진 크기는 너비 최대 300px 정도로 적당하게. Next.js의 Image 컴포넌트를 사용해줘. alt 텍스트는 "[내 이름] 프로필 사진"으로.
사진이 여러 장이라면, 하나씩 넣는 프롬프트를 각각 보내세요. 한꺼번에 여러 장을 넣으면 위치가 엉킬 수 있습니다.
localhost:3000)에 내 사진이 보이면 성공.
휴대폰으로 찍은 사진은 원본 파일이 3MB~10MB씩 되기도 합니다. 사이트가 느려지는 원인입니다.
public 폴더에 있는 [파일명] 사진이 너무 커. - 파일 크기를 확인해줘 (MB로 알려줘) - 600KB 이하로 줄여줘. 화질이 약간 낮아져도 괜찮아. - 원본 파일은 따로 백업해두고 줄인 버전만 같은 이름으로 저장해줘.
사진 추가 작업이 끝났어. 변경 사항을 커밋하고 GitHub에 푸시해줘. 커밋 메시지: "2회차 — 프로필·활동 사진 추가" 명령어는 네가 직접 실행.
1~2분 뒤 버셀 주소를 새로고침해서 사진이 보이는지 확인합니다.
public 폴더 사진 파일명을 확인해줘. 혹시 한글이나 띄어쓰기 있어?라고 물으세요.프로필 사진이 너무 크게 나와. 너비를 300px로 제한하고, 비율 유지해서 줄여줘.라고 말하세요.Next.js Image 컴포넌트에서 외부 이미지 도메인 설정이 필요한지 확인해줘.라고 물으세요.내용과 사진이 다 들어갔으니, 이제 보기 좋게 다듬을 차례입니다. 이 섹션도 한 번에 다 바꾸지 않습니다. 한 가지씩 바꾸고, 확인하고, 커밋합니다.
내 사이트에 어울리는 색 한 가지를 고르세요. 색 이름("하늘색", "진한 초록")으로 말해도 되고, 색상 코드(#RRGGBB)를 알면 그걸 써도 됩니다.
페이지의 주요 색을 바꾸고 싶어. - 배경색 또는 강조색을 "[내가 고른 색 이름 또는 코드]"로 바꿔줘. - 제목과 버튼에 그 색을 적용해줘. - 글자가 너무 연하거나 배경과 겹쳐서 안 보이지 않도록 주의해줘.
글씨가 너무 작거나 줄이 너무 촘촘하면 읽기 불편합니다. 어르신들이 보기 편하려면 조금 크게가 좋습니다.
본문 글씨가 좀 작고 줄 간격이 좁은 것 같아. - 본문 글씨 크기를 1.1~1.2rem 정도로 키워줘. - 줄 간격(line-height)은 1.8 정도로 늘려줘. - 제목 글씨는 지금보다 조금 더 크게, 굵게.
많은 분들이 홈페이지를 폰으로 봅니다. 반드시 폰에서도 확인하세요.
폰에서 확인했더니 [문제 내용을 적어주세요]. 예) "글자가 화면 밖으로 나간다" / "사진이 너무 크게 나온다" / "버튼이 너무 작아서 누르기 어렵다" 모바일 화면에서 잘 보이도록 고쳐줘.
다듬기가 마음에 들면, 오늘의 마지막 사이클을 돌립니다.
색·글씨·모바일 수정이 다 끝났어. 오늘 작업을 마지막으로 커밋하고 푸시해줘. 커밋 메시지: "2회차 — 색상·글씨·모바일 다듬기 완료" 명령어는 네가 직접 실행.
| 순서 | 한 줄로 | 사이클 여부 |
|---|---|---|
| ① | 안티그래비티 열고 개발 서버 재실행 (복습) | — |
| ② | 종이에 기획 — 소개·연락처·사진 목록 작성 | — |
| ③ | AI에게 4부분 구조로 바꿔달라 → 소개·연락처 채움 | 커밋·푸시 ① |
| ④ | 사진 public 폴더에 넣고 AI에게 배치 부탁 | 커밋·푸시 ② |
| ⑤ | 색·글씨 조정, 모바일 확인 후 다듬기 | 커밋·푸시 ③ |
| 회차 | 핵심 산출물 | 오늘 위치 |
|---|---|---|
| 1회차 | 버셀 주소로 보이는 사이트 (한 사이클 완성) | 지난 주 |
| 2회차 | 내 이름·사진·소개로 채운 "나의 페이지" | 오늘 ★ |
| 3회차 | 내 도메인(.kr)으로 접속되는 사이트 + HTTPS | 다음 주 |
| 4회차 | 구글·네이버 검색 등록 + 발표 | — |
홍길동.kr, 홍길동꽃집.kr, hgd-flower.kr