Vibe 코딩 가이드 2/5

🎨 Vibe 코딩 가이드

🚀 2단계 - 기본 활용

🎉 1단계 완료를 축하합니다!
이제 웹페이지를 만들고 공유할 수 있습니다. 2단계에서는 더 재미있고 인터랙티브한 요소들을 추가해봅시다!

🌟 2단계에서 배울 내용

• 이미지 추가하고 크기 조절하기
• 버튼 만들고 스타일 꾸미기
• 클릭하면 반응하는 기능 만들기
• 여러 섹션으로 페이지 나누기
• 링크 만들어 다른 페이지 연결하기

🖼️ 실습 1: 이미지 추가하기

📝 AI에게 이렇게 요청하세요:

제 취미 소개 페이지를 만들어주세요.
제목은 "내가 좋아하는 것들"이고,
고양이 이미지를 하나 넣어주세요.
이미지 아래에 "귀여운 고양이"라는 설명을 넣어주세요.

💡 이미지 사용 방법 2가지:
1. 무료 이미지 URL 사용 - AI가 unsplash.com 같은 무료 이미지 링크를 사용
2. 내 이미지 업로드 - GitHub에 이미지 파일도 함께 업로드

📝 이미지 크기 조절 요청:

이미지가 너무 커요.
너비를 300픽셀로 줄여주세요.
그리고 둥근 테두리를 넣어주세요.

🔘 실습 2: 버튼 만들기

📝 기본 버튼 만들기:

"더 알아보기"라는 텍스트가 있는 버튼을 만들어주세요.
버튼 색은 파란색, 글자는 흰색으로 해주세요.
버튼에 마우스를 올리면 색이 진한 파란색으로 변하게 해주세요.

🎯 중요!
버튼에 호버 효과(마우스 올릴 때 변화)를 넣으면 사용자가 클릭할 수 있다는 걸 알 수 있습니다!

⚡ 실습 3: 클릭 이벤트 추가하기

📝 알림창 띄우기:

버튼을 클릭하면
"안녕하세요! 방문해주셔서 감사합니다!"라는
알림창이 나오게 해주세요.

📝 텍스트 변경하기:

"색깔 바꾸기"라는 버튼을 만들어주세요.
클릭하면 페이지 배경색이 분홍색으로 바뀌게 해주세요.
한 번 더 클릭하면 하늘색으로 바뀌게 해주세요.

💡 클릭 이벤트 아이디어:
- 숨겨진 메시지 보여주기
- 좋아요 카운터 만들기
- 이미지 바꾸기
- 텍스트 색상 변경하기

📑 실습 4: 여러 섹션 만들기

📝 구조화된 페이지 만들기:

포트폴리오 페이지를 만들어주세요.

3개 섹션으로 나눠주세요:
1. 소개 섹션 - 배경색 하늘색
2. 프로젝트 섹션 - 배경색 연한 회색
3. 연락처 섹션 - 배경색 연한 녹색

각 섹션 사이에 약간의 여백을 넣어주세요.

🎯 디자인 팁!
섹션마다 다른 배경색을 사용하면 내용 구분이 명확해집니다!

🔗 실습 5: 링크 만들기

📝 외부 링크 추가:

"내 GitHub 보러가기" 버튼을 만들어주세요.
클릭하면 https://github.com 으로 이동하게 해주세요.
새 탭에서 열리게 해주세요.

📝 페이지 내 이동:

페이지 맨 위에 네비게이션 메뉴를 만들어주세요.
"소개", "프로젝트", "연락처" 링크 3개를 넣어주세요.
클릭하면 해당 섹션으로 스크롤되게 해주세요.

🎨 실습 6: 종합 프로젝트

✨ 지금까지 배운 것을 모두 사용해봅시다!

📝 완성형 요청 예시:

내 소개 웹사이트를 만들어주세요.

헤더 부분:
- 배경색 진한 파란색, 글자 흰색
- 내 이름 "홍길동"을 크게 표시
- "웹 개발 배우는 중" 부제목

소개 섹션:
- 내 사진 (둥근 모양, 200픽셀)
- 자기소개 3줄 정도

관심사 섹션:
- "코딩", "음악", "여행" 3개 카드
- 각 카드에 아이콘 이미지

연락하기 버튼:
- 클릭하면 이메일 주소가 나타남
- 버튼은 초록색

💡 좋은 요청 패턴:
1. 전체 구조를 먼저 설명
2. 각 부분의 내용과 스타일 구체적으로
3. 원하는 상호작용 명시
4. 결과를 보고 하나씩 수정 요청

🔧 자주 하는 수정 요청들

1 간격 조정
"섹션 사이 간격을 더 넓혀주세요"
"버튼과 텍스트 사이를 좁혀주세요"

2 정렬 변경
"이미지를 가운데 정렬해주세요"
"버튼 3개를 한 줄로 나란히 배치해주세요"

3 애니메이션 추가
"버튼에 클릭하면 살짝 작아지는 효과를 넣어주세요"
"페이지 로딩될 때 내용이 서서히 나타나게 해주세요"

4 모바일 대응
"휴대폰에서 봤을 때도 잘 보이게 조정해주세요"
"화면 크기에 따라 글자 크기가 자동으로 조절되게 해주세요"

⚠️ 흔한 실수와 해결법

❌ 문제: 버튼을 눌러도 아무 반응이 없어요
✅ 해결: "버튼 클릭 이벤트가 작동 안 해요. 콘솔 오류 확인해주세요" 라고 요청

❌ 문제: 이미지가 안 보여요
✅ 해결: 이미지 URL이 올바른지 확인, 또는 "이미지 링크를 무료 이미지로 바꿔주세요"

❌ 문제: 휴대폰에서 보면 레이아웃이 깨져요
✅ 해결: "반응형으로 만들어주세요" 또는 "모바일에서도 잘 보이게 수정해주세요"

🏆 2단계 미션

1 3개 섹션이 있는 포트폴리오 페이지 만들기

2 최소 2개의 이미지 포함하기

3 클릭하면 반응하는 버튼 2개 이상 만들기

4 외부 사이트로 연결되는 링크 추가하기

5 GitHub Pages에 업로드해서 친구에게 공유하기

🌐 GitHub에 이미지 포함해서 업로드하기

💡 2단계에서 달라진 점!
이제 HTML 파일뿐만 아니라 이미지 파일도 함께 업로드해야 합니다!

📁 파일 구조 준비하기

1 폴더 구조 만들기
컴퓨터에 폴더를 만들고 이렇게 정리하세요:

my-website/
├── index.html (메인 HTML 파일)
├── images/ (이미지 폴더)
│ ├── photo.jpg
│ ├── cat.png
│ └── icon.svg

💡 파일명 규칙:
- 영문으로만 작성 (한글 ❌)
- 공백 대신 하이픈(-) 사용
- 소문자 추천
- 예: my-photo.jpg ✅, 내사진.jpg ❌

🚀 GitHub에 업로드하기

1 저장소 만들기 (1단계와 동일)
- GitHub 로그인
- 새 Repository 생성
- 이름: my-portfolio (원하는 이름)
- Public 선택
- Create repository 클릭

2 여러 파일 한 번에 업로드
- "Add file" → "Upload files" 클릭
- 폴더 전체를 드래그해서 놓기
- 또는 파일들을 여러 개 선택해서 드래그
- 폴더 구조가 그대로 유지됩니다! ✨
- "Commit changes" 클릭

⚠️ 주의!
이미지를 사용하는 HTML 코드에서 이미지 경로를 올바르게 작성해야 합니다:

<img src="images/photo.jpg"> ✅ 올바름
<img src="photo.jpg"> ❌ 이미지 폴더 안에 있다면 틀림

3 GitHub Pages 설정
- Settings → Pages
- Branch: "main" 선택
- Save 클릭
- 2~3분 기다리기 ⏱️

4 확인하기
- https://아이디.github.io/my-portfolio/ 접속
- 이미지가 모두 잘 보이는지 확인
- 버튼 클릭이 작동하는지 확인

✏️ 파일 수정 및 추가하기

📝 새 이미지 추가하는 방법:

1 저장소에서 "images" 폴더 클릭

2 "Add file" → "Upload files"

3 새 이미지 드래그

4 "Commit changes" 클릭

5 index.html에서 이미지 태그 추가

📝 HTML 파일 수정하는 방법:

1 index.html 클릭

2 연필 아이콘(Edit) 클릭

3 코드 수정

4 "Commit changes" 클릭

5 2~3분 후 웹사이트에서 Ctrl+F5로 확인

🔧 이미지가 안 보일 때 해결법

❌ 문제: GitHub Pages에 올렸는데 이미지가 안 보여요
✅ 체크리스트:

• 이미지 파일이 제대로 업로드되었나요?
• 이미지 경로가 올바른가요? (대소문자 정확히!)
• 이미지 파일명에 한글이나 공백이 있나요?
• HTML에서 경로를 상대경로로 썼나요?

💡 개발자 도구로 확인하기:
웹사이트에서 F12 키를 누르면 개발자 도구가 열립니다.
"Console" 탭에서 빨간색 오류 메시지를 확인하면 어떤 이미지가 문제인지 알 수 있습니다!

📦 전체 프로젝트 다운로드하기

💾 백업 방법:
저장소 메인 페이지에서 초록색 "Code" 버튼 → "Download ZIP"을 클릭하면
전체 프로젝트를 내 컴퓨터에 저장할 수 있습니다!

🎓 다음 단계 예고:
2단계를 완료했다면 폼(입력창) 만들기, 데이터 저장, 리스트 관리 등을 배우는 3단계로 넘어갈 준비가 되었습니다!
3단계부터는 실제 사용 가능한 웹 앱을 만들 수 있습니다! 🚀

💪 여러분의 성장:
1단계: 텍스트만 있는 페이지 ➜ 2단계: 이미지, 버튼, 인터랙션이 있는 멋진 페이지!