CanRobot · 캔로봇
Microsoft Frontier Transformation Engineer TITAN Microsoft Certified Trainer Microsoft MVP 2025

CanRobot

PROMPTS.md — 복사해서 붙여넣는 프롬프트 모음

PROMPTS.md — 복사해서 붙여넣는 프롬프트 모음

🗣️ 강사 멘트: “오늘 여러분은 코드를 안 씁니다. 복사·붙여넣기만 합니다.”

아래 회색 상자를 통째로 복사해서 Copilot Chat에 붙여넣고 Enter를 누르세요. 순서대로 하세요. 건너뛰면 다음 게 안 됩니다.

⚠️ 시작 전 딱 3가지

  1. 주소창의 github.com 을 github.dev 로 바꾸면 브라우저에서 편집기가 열립니다.
  2. 오른쪽 Copilot Chat 패널을 엽니다. (없으면 왼쪽 사이드바 채팅 아이콘)
  3. Copilot Free는 채팅 월 50회입니다. 오늘 설계는 필수 8회 + 예비 7회 = 최대 15회. 👉 아무 말이나 던지지 마세요. 아래 프롬프트만 쓰면 한도 안에서 끝납니다.

📊 프롬프트 예산표

구간 프롬프트 채팅 횟수 시간
모듈 03 P1 · P2 · P3 3회 20분
모듈 04 P4 · P5 · P6 · P7 4회 25분
모듈 05 P8 1회 15분
필수 합계   8회 60분
예비 P9 ~ P15 필요할 때만 —

모듈 03 · 저장소 · 테마 · 메뉴 (20분)

P1 — 홈페이지 뼈대 만들기 ⭐ 가장 중요

📍 먼저: 저장소 루트에 빈 index.html 파일을 하나 만들고, 그 파일을 열어둔 상태에서 실행하세요. ⏱️ 응답에 30초~1분 걸립니다. 기다리세요.

이 저장소의 SPEC.md 와 content.md, 그리고 THEME.md 를 읽고 index.html 전체를 만들어줘.

지금 단계에서 완성할 것:
1. <head> 안에 charset, viewport, title, description, og 태그
2. <style> 안에 :root CSS 변수 (THEME.md 에서 내가 고른 테마의 색상값을 그대로 사용)
3. 공통 스타일 — 본문 최대 너비, 섹션 여백, h2 제목 스타일, 카드 기본 스타일, 링크 스타일
4. 상단 고정 헤더 — 왼쪽에 내 이름, 오른쪽에 메뉴 4개 (소개/기록/음악/연락)
5. 메뉴를 누르면 해당 섹션으로 부드럽게 이동 (scroll-behavior: smooth, scroll-margin-top: 80px)
6. 6개 섹션의 빈 껍데기만 만들기 — id는 about, career, community, posts, music, contact
   각 섹션에는 h2 제목만 넣고 내용은 "(다음 단계에서 채웁니다)" 라고 써둘 것
7. 하단 푸터
8. 모바일에서 헤더 메뉴가 이름 아래로 줄바꿈되어 가로 정렬되도록

파일은 index.html 하나만. CSS와 JS는 이 파일 안에. 외부 라이브러리 금지.
전체 코드를 한 번에 출력해줘.

✅ 체크포인트: 저장(Ctrl+S) → 우클릭 Open Preview 또는 하단 미리보기. 상단 메뉴 4개를 누르면 해당 위치로 스르륵 이동하면 성공.

P2 — 소개 섹션 채우기

content.md 의 "1. 기본 정보" 와 "2. 소개 3문장" 을 읽고,
index.html 의 <section id="about"> 안을 채워줘.

- 왼쪽에 프로필 사진 (profile.jpg, 200x200, 원형)
- 오른쪽에 이름(h1), 한 줄 소개(강조색·굵게), 소개 3문장(한 문단)
- 모바일(768px 미만)에서는 사진이 위, 글이 아래로 세로 배치
- profile.jpg 파일이 아직 없어도 깨져 보이지 않게 onerror 처리:
  이미지가 없으면 이름 첫 글자가 들어간 원형 도형이 대신 보이게 해줘

about 섹션 부분만 출력하고, 어디에 붙여넣으면 되는지 알려줘.

P3 — 경력 아코디언

content.md 의 "3. 경력" 을 읽고 <section id="career"> 안을 채워줘.

- 회사마다 <details>/<summary> 아코디언 하나씩
- summary 왼쪽에 "회사명 · 직책", 오른쪽 끝에 기간
- 펼치면 하는 일 내용이 나옴
- 가장 최근 경력 1개만 <details open>
- 각 항목은 카드 배경색 + 둥근 모서리 + 아래 12px 간격
- JavaScript 없이 details 태그만으로 동작하게

career 섹션 부분만 출력해줘.

🗣️ 강사 멘트: “지금 3번 프롬프트로 만든 아코디언, 직접 코딩하면 30분짜리입니다.”

모듈 04 · 프로필 · 글쓰기 · 음악 (25분)

P4 — 커뮤니티 + 뉴스레터

content.md 의 "4. 커뮤니티 활동" 을 읽고 <section id="community"> 안을 채워줘.

- 카드를 Grid로 배치 (모바일 1열, 768px 이상 2~3열)
- 카드 = 이모지 아이콘(크게) + 제목 + 설명 + 링크가 있으면 "자세히 보기" 링크
- 링크가 비어 있는 카드는 링크를 아예 안 보이게
- 섹션 맨 아래에 뉴스레터 구독 박스:
  이메일 입력칸과 "구독하기" 버튼을 가로로 붙여서 배치
  form에 onsubmit="return false" 를 넣어 새로고침 방지
  버튼을 누르면 alert("구독해주셔서 감사합니다!") 만 뜨게
  (실제 전송 기능은 만들지 마)

community 섹션 부분만 출력해줘.

P5 — 기록 카드 + 링크드인 공유 버튼

content.md 의 "5. 기록 — 글 3편" 을 읽고 <section id="posts"> 안을 채워줘.

- 글 카드 3장을 Grid로 (모바일 1열, 768px 이상 3열)
- 카드 = 제목(h3) + 한 줄 요약(흐린 색) + 날짜(작게)
- 카드 아래에 버튼 2개를 가로로:
  1) "원문 보기" → 글 링크를 새 탭으로 (target="_blank" rel="noopener")
  2) "링크드인에 공유" → https://www.linkedin.com/sharing/share-offsite/?url=글주소
     글주소는 encodeURIComponent 로 인코딩된 상태로 넣어줘
- 링크가 비어 있는 글은 두 버튼을 숨기고 카드만 보이게
- 카드에 마우스를 올리면 3px 위로 뜨는 효과 (transition 0.2s)

posts 섹션 부분만 출력해줘.

P6 — 음악 (카드 클릭 재생) ⭐ 주의

content.md 의 "6. 음악 — 내가 만든 곡" 을 읽고 <section id="music"> 안을 채워줘.

중요: iframe을 넣지 마. 페이지가 무거워지고 현장 와이파이에서 멈춰.
Suno 음원을 <audio> 태그 하나로 재생하는 방식으로 만들어줘.

- 카드는 기록 섹션과 똑같은 모양으로, 모바일 1열 / 768px 이상 3열
- 커버는 Suno 커버 이미지
  https://cdn2.suno.ai/image_large_곡ID.jpeg
- 커버 위에 원형 ▶ 재생 버튼을 CSS로 겹쳐 놓는다
  (터치 기기에는 hover가 없으니 항상 보이게)
- 카드를 누르면 페이지를 떠나지 않고 그 자리에서 재생
  음원 주소는 https://cdn1.suno.ai/곡ID.mp3
- <audio> 는 페이지에 하나만 두고, 곡을 바꿀 때 src 만 교체한다
- 화면 아래에 재생바를 띄운다 (이전·재생·다음, 진행바, 남은 시간)
- 곡이 없는 칸은 'Coming soon' 안내 카드로 두고, 눌러도 재생되지 않게 한다
- 각 카드 아래에 곡 제목과 한 줄 메모

재생 처리 JavaScript는 짧게 모아서 </body> 바로 위에 넣어줘.
music 섹션 부분과 script 부분을 나눠서 출력해줘.

💡 유튜브 곡이라면 — 위 프롬프트에서 커버를 img.youtube.com/vi/영상ID/hqdefault.jpg, 재생을 “유튜브 IFrame API로 소리만” 으로 바꿔 말하면 됩니다. 카드 모양과 재생바는 그대로입니다.

P7 — 연락처 + 푸터 마무리

content.md 의 "1. 기본 정보" 를 읽고 <section id="contact"> 와 푸터를 완성해줘.

연락 섹션:
- 가운데 정렬
- 큰 버튼 2개를 가로로:
  "이메일 보내기" → mailto: 링크
  "링크드인" → 링크드인 주소, 새 탭
- 버튼 아래 작은 글씨로 이메일 주소를 그대로 한 번 더 표시
- 연락처 입력 폼은 만들지 마 (서버가 없어서 동작 안 함)

푸터:
- "© 2026 내이름" 가운데 정렬
- 그 아래 아주 작은 글씨로 "GitHub Copilot으로 만들었습니다"

그리고 <head>의 title, description, og:title, og:description을
content.md 의 내 이름과 한 줄 소개로 정확히 바꿔줘.

contact 섹션, 푸터, head 수정분을 각각 나눠서 출력해줘.

✅ 체크포인트: 여기까지 오면 홈페이지 완성입니다. 이제 배포만 남았습니다.

모듈 05 · 배포 (15분)

📍 이 구간은 프롬프트가 필요 없습니다. DEPLOY.md 를 보고 따라 하세요. P8은 배포 직전에 한 번만 실행하는 최종 점검입니다.

P8 — 최종 점검 (배포 전 1회)

index.html 전체를 검토하고 아래 항목을 한 번에 고쳐줘.

1. 모바일 375px 폭에서 가로 스크롤이 생기는 곳이 있으면 수정
2. 이미지에 alt가 빠진 곳 채우기
3. 배경색과 글자색 대비가 부족한 곳 수정
4. content.md 의 값과 다르게 들어간 텍스트가 있으면 맞추기
5. 아직 "(다음 단계에서 채웁니다)" 같은 자리표시 문구가 남아 있으면 지우기
6. <html lang="ko"> 확인

고친 부분만 목록으로 알려주고, 수정된 코드 조각을 붙여줘.

🔧 예비 프롬프트 (필요할 때만)

시간이 남거나 문제가 생겼을 때만 쓰세요. 안 써도 됩니다.

P9 — 색이 마음에 안 들 때

:root 의 --point 색을 (원하는 색: 예를 들어 따뜻한 주황색)으로 바꿔줘.
그 색과 어울리도록 --card, --line 색도 같이 조정해줘.
:root 블록만 출력해줘.

P10 — 글자가 너무 작거나 클 때

전체 본문 글자 크기를 한 단계 (키워/줄여)줘.
제목과 본문의 비율은 유지하고, 모바일에서도 읽기 편하게.
바뀐 CSS 부분만 출력해줘.

P11 — 특정 섹션을 없애고 싶을 때

index.html 에서 (섹션 이름) 섹션을 완전히 삭제해줘.
관련된 HTML, CSS, JS, 그리고 상단 메뉴 링크까지 모두 지워줘.
지워야 할 부분이 어디인지 정확히 알려줘.

P12 — 섹션 순서를 바꾸고 싶을 때

섹션 순서를 (예: 소개 → 기록 → 음악 → 경력 → 커뮤니티 → 연락) 로 바꿔줘.
HTML 순서만 바꾸고 CSS는 건드리지 마.

P13 — 사진이 이상하게 나올 때

프로필 사진이 (찌그러져 / 잘려서 / 너무 커서) 보여.
object-fit 을 써서 정사각형 영역에 얼굴이 가운데 오도록 고쳐줘.
해당 CSS만 출력해줘.

P14 — 뭔가 깨졌을 때 (범용 수리)

index.html 에서 (무엇이 어떻게 안 되는지 구체적으로 한 문장)
원인을 찾아서 고쳐줘. 고친 부분만 보여주고 어디를 바꿔야 하는지 알려줘.

💡 “안 돼요” 라고만 쓰면 Copilot도 모릅니다. “메뉴의 음악을 눌러도 이동하지 않아요” 처럼 구체적으로 쓰세요.

P15 — 파비콘 (여유 있을 때)

파비콘을 이모지로 만들어줘. 파일 없이 SVG data URI 방식으로,
<head> 에 한 줄만 추가되게. 이모지는 (원하는 이모지)로.

🚫 이런 프롬프트는 쓰지 마세요

나쁜 프롬프트 왜
“예쁘게 만들어줘” 기준이 없어 매번 다른 결과 → 재요청 반복 → 한도 소진
“안 돼요” 무엇이 안 되는지 없으면 Copilot이 되묻는다 → 1회 낭비
“고마워요!” 이것도 채팅 1회로 계산됩니다
“리액트로 다시 만들어줘” 오늘 범위 밖. 되돌리는 데 5회 이상 듭니다
한 번에 3가지 다른 요청 하나만 틀려도 전부 다시 → 위 프롬프트처럼 묶어서 주세요

💡 오늘의 진짜 교훈

“한 번에 제대로 요청하는 법”

좋은 프롬프트 = ① 무엇을 ② 어디에 ③ 어떤 제약으로 ④ 어떤 형태로 받을지

P1~P8이 전부 이 4가지를 갖추고 있습니다. 다시 한 번 읽어보세요. 이건 Copilot에만 해당하는 이야기가 아닙니다.