GitHub Copilot 작업 규칙

이 파일은 Copilot이 자동으로 읽습니다. 수강생은 이 파일을 열어볼 필요도, 수정할 필요도 없습니다. 여기 적힌 내용 덕분에 매 프롬프트마다 “반응형으로”, “한국어로”, “라이브러리 쓰지 마”를 반복해서 쓸 필요가 없어집니다. → 채팅 횟수 절약

이 저장소가 만드는 것

코딩을 해본 적 없는 직장인이 2시간 만에 완성하는 개인 홈페이지 1장. 최종 결과물은 Netlify에 배포되어 본인 도메인(www.이름.com)으로 열립니다.

절대 규칙 (Hard Rules)

파일은 index.html 하나만 만든다.
- CSS는 <style> 태그 안에, JavaScript는 <style> 아래 <script> 태그 안에 작성한다.
- style.css, script.js 등 별도 파일을 절대 만들지 않는다.
- 이유: 수강생이 파일을 오가는 순간 시간이 사라진다.
외부 라이브러리·CDN·빌드 도구를 쓰지 않는다.
- Tailwind, Bootstrap, React, jQuery, npm, Node, 폰트 CDN 전부 금지.
- 필요한 건 순수 HTML + CSS + Vanilla JS로 해결한다.
- 음악은 <audio> 태그로 재생한다. iframe 임베드는 쓰지 않는다.
모든 텍스트·주석은 한국어로 쓴다.
기존 코드를 지우지 않는다.
- 새 섹션을 추가할 때는 기존 섹션을 그대로 두고 추가만 한다.
- 색·폰트를 바꿀 때는 :root CSS 변수 값만 바꾼다.
한 번에 전체 파일을 다시 출력하지 않는다.
- 바뀐 부분만 보여주고, 어디에 넣으면 되는지 한 줄로 알려준다.
- 이유: 전체 재출력은 응답이 길어지고 수강생이 붙여넣다 실수한다.

코드 스타일

CSS 변수는 반드시 `:root`에 모은다

:root {
  --bg:        #ffffff;   /* 배경 */
  --text:      #1a1a1a;   /* 본문 글자 */
  --muted:     #6b7280;   /* 흐린 글자 */
  --point:     #2563eb;   /* 강조·링크·버튼 */
  --card:      #f9fafb;   /* 카드 배경 */
  --line:      #e5e7eb;   /* 구분선 */
  --radius:    14px;
  --maxw:      880px;     /* 본문 최대 너비 */
  --font: system-ui, -apple-system, "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", sans-serif;
}

색상을 하드코딩하지 않는다. 항상 var(--point) 형태로 참조한다.
폰트는 위 시스템 폰트 스택만 쓴다. 웹폰트 로딩 금지.

레이아웃

본문은 max-width: var(--maxw) + margin: 0 auto + padding: 0 20px.
모바일 우선. 기본 스타일이 모바일이고, @media (min-width: 768px)에서 넓힌다.
Flexbox / CSS Grid만 사용. float, 절대좌표 배치 금지.
터치 대상(버튼·링크)은 최소 44×44px.

마크업

<section id="about"> 처럼 섹션마다 영문 소문자 id를 붙인다. (about, career, community, posts, music, contact)
시맨틱 태그를 쓴다: <header> <nav> <main> <section> <article> <footer>.
모든 <img>에 alt를 넣는다.
페이지 언어는 <html lang="ko">.

접근성 최소선

배경과 글자의 명도 대비 4.5:1 이상.
키보드 Tab으로 메뉴가 순서대로 이동해야 한다.
아코디언은 <details> / <summary> 태그를 쓴다. (JS 없이 동작 = 고장 위험 0)

답변 방식

수강생은 코드를 읽지 못한다고 가정한다.
코드 블록 앞에 “이 코드는 ○○을 합니다” 한 문장을 붙인다.
코드 블록 뒤에 “</body> 바로 위에 붙여넣으세요” 처럼 위치를 지정한다.
전문 용어(DOM, 이벤트 버블링, 시맨틱 등)를 쓰지 않는다.
되묻지 않는다. 정보가 부족하면 가장 무난한 값으로 채우고 무엇을 가정했는지 한 줄로 적는다. (이유: 되물으면 채팅 1회가 낭비된다.)

콘텐츠 출처

수강생의 실제 내용은 저장소 루트의 content.md 에 있다. “content.md 를 참고해서” 라는 말이 나오면 그 파일을 읽고 값을 채운다. content.md 에 비어 있는 항목이 있으면 그럴듯한 예시로 채우고,  주석을 남긴다.

구조 명세

페이지 전체 구조는 SPEC.md 에 정의되어 있다. “SPEC.md 대로” 라는 말이 나오면 그 문서의 섹션 순서·메뉴·동작을 그대로 따른다.