SPEC.md — 내 홈페이지 구조 명세서
수강생 안내: 이 파일은 읽지 않아도 됩니다. 수정도 하지 마세요. Copilot에게 “SPEC.md 대로 만들어줘” 라고 말하면 이 문서를 보고 알아서 만듭니다.
강사 안내: 이 파일 하나가 프롬프트 3~4회를 대체합니다. 구조를 말로 설명하지 말고, 이 문서를 가리키게 하세요.
0. 한 줄 요약
세로로 스크롤되는 한 페이지(One-page) 개인 홈페이지.
상단 메뉴를 누르면 해당 위치로 부드럽게 이동한다.
파일은 index.html 하나뿐이다.
1. 페이지 뼈대
┌──────────────────────────────────────┐
│ HEADER (상단 고정) │
│ 내이름 소개 · 기록 · 음악 · 연락 │
├──────────────────────────────────────┤
│ #about 소개 │
│ #career 경력 │
│ #community 커뮤니티 │
│ #posts 기록 │
│ #music 음악 │
│ #contact 연락 │
├──────────────────────────────────────┤
│ FOOTER © 2026 내이름 │
└──────────────────────────────────────┘
섹션 순서는 위 표 그대로. 임의로 바꾸지 않는다.
2. HEADER / 메뉴
| 항목 | 값 |
|---|---|
| 위치 | position: sticky; top: 0; — 스크롤해도 위에 붙어 있음 |
| 배경 | var(--bg) + 아래쪽 border-bottom: 1px solid var(--line) |
| 왼쪽 | 본인 이름 (텍스트, 클릭 시 맨 위로) |
| 오른쪽 | 메뉴 4개만: 소개 / 기록 / 음악 / 연락 |
| 링크 | <a href="#about"> 형태의 앵커 |
| 부드러운 이동 | html { scroll-behavior: smooth; } — JS 불필요 |
| 가림 방지 | section { scroll-margin-top: 80px; } |
| 모바일 | 화면이 좁으면 메뉴를 이름 아래 줄로 내려서 가로 정렬 (햄버거 메뉴 만들지 않음) |
⚠️ 메뉴는 4개다. 경력·커뮤니티는 페이지에는 있지만 메뉴에는 넣지 않는다. 이유: 모바일에서 메뉴 5개 이상은 줄바꿈이 지저분해진다.
3. 섹션별 명세
3-1. #about — 소개
- 레이아웃: 모바일은 세로(사진 위 / 글 아래), 768px 이상은 가로 2단(사진 왼쪽 / 글 오른쪽).
- 프로필 사진: 정사각형 크롭,
border-radius: 50%, 200×200px.- 파일명은
profile.jpg, 저장소 루트에 둔다. - 사진이 없으면 이니셜 한 글자가 들어간 원형 도형으로 대체한다.
- 파일명은
- 이름 (
<h1>, 가장 큰 글자) - 한 줄 소개 (
<p class="tagline">,var(--point)색, 굵게) - 소개 3문장 (
<p>, 줄바꿈 없이 한 문단)
3-2. #career — 경력
- 회사별 아코디언. 반드시
<details>/<summary>태그로 만든다. (JS 금지) <summary>에는회사명 · 직책+ 오른쪽에기간.- 펼치면 그 아래에 하는 일 2~3줄이 나온다.
- 가장 최근 회사 1개만
<details open>으로 펼쳐둔다. - 각 항목은
var(--card)배경 +var(--radius)둥근 모서리 + 아래 12px 간격.
3-3. #community — 커뮤니티
- 카드 2~3장을 가로로 배열 (모바일은 세로 1열, 768px 이상 2~3열 Grid).
- 카드 1장 = 이모지 아이콘 + 제목 + 설명 2줄 + (선택) 링크.
- 섹션 맨 아래에 뉴스레터 구독 박스:
- 이메일 입력칸 + “구독하기” 버튼 가로 배치.
- 실제 전송은 하지 않는다. 버튼을 누르면
alert("구독해주셔서 감사합니다!")만 띄운다. <form onsubmit="return false">로 페이지 새로고침을 막는다.
3-4. #posts — 기록
- 글 카드 3장. 모바일 1열, 768px 이상 3열 Grid.
- 카드 1장 구성:
- 제목 (
<h3>) - 한 줄 요약 (
var(--muted)색) - 날짜 (작게)
- 하단 버튼 2개 가로 배치:
- “원문 보기” → 해당 글 URL을 새 탭으로 (
target="_blank" rel="noopener") - “링크드인에 공유” → 아래 형식의 링크
https://www.linkedin.com/sharing/share-offsite/?url=글주소URL은
encodeURIComponent()로 감싼다.
- “원문 보기” → 해당 글 URL을 새 탭으로 (
- 제목 (
- 카드 전체에
transition+ hover 시 살짝 떠오르는 효과 (transform: translateY(-3px)).
3-5. #music — 음악
- 카드 3장. 기록 섹션과 똑같은 카드 모양을 쓴다.
<audio>방식으로 만든다 (iframe 금지):- 커버는 Suno 커버 이미지:
https://cdn2.suno.ai/image_large_곡ID.jpeg - 커버 위에 원형 ▶ 재생 버튼을 겹쳐 놓는다.
터치 기기에는 hover가 없으므로
@media (hover:none)에서 항상 보이게 한다. - 카드를 누르면 페이지를 떠나지 않고 그 자리에서 재생한다.
음원 주소:
https://cdn1.suno.ai/곡ID.mp3 <audio>는 페이지에 하나만 두고 곡을 바꿀 때src만 교체한다.- 이유: iframe을 여러 개 로드하면 현장 Wi-Fi에서 페이지가 멈춘다. 이 규칙은 중요하다.
- 커버는 Suno 커버 이미지:
- 곡이 없는 칸은 ‘Coming soon’ 안내 카드로 두고 클릭해도 재생되지 않게 한다.
- 각 카드에 곡 제목 + 한 줄 메모.
- 커버 비율은 16:9 고정 (
aspect-ratio: 16 / 9). - 곡 ID는 공유 주소
suno.com/s/...를 열면 나오는suno.com/song/곡ID에서 얻는다. - 유튜브 곡을 쓸 경우: 커버는
img.youtube.com/vi/영상ID/hqdefault.jpg, 재생은 유튜브 IFrame API로 소리만 (영상은 1px 숨김). 카드 모양은 동일하다.
3-6. #contact — 연락
- 가운데 정렬.
- 큰 버튼 2개: 이메일 보내기 (
mailto:) / 링크드인 (target="_blank"). - 그 아래 작은 글씨로 이메일 주소를 그대로 한 번 더 표시.
- 연락처 입력 폼은 만들지 않는다. (서버가 없으므로 동작하지 않는다)
3-7. FOOTER
© 2026 내이름+ 아주 작은 글씨로GitHub Copilot으로 만들었습니다.- 가운데 정렬,
var(--muted)색.
4. 공통 규칙
| 항목 | 값 |
|---|---|
| 섹션 세로 여백 | 모바일 56px 0, 데스크톱 88px 0 |
| 섹션 제목 | <h2>, 왼쪽 정렬, 아래에 32px 폭의 var(--point) 밑줄 장식 |
| 본문 최대 너비 | var(--maxw) = 880px |
| 좌우 여백 | 20px |
| 카드 간격 | 16px |
| 링크 | 밑줄 없음, var(--point) 색, hover 시 밑줄 |
5. 문서 상단 <head> 에 들어갈 것
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이름 — 한 줄 소개</title>
<meta name="description" content="한 줄 소개">
<meta property="og:title" content="이름">
<meta property="og:description" content="한 줄 소개">
<meta property="og:type" content="website">
viewport 태그가 빠지면 모바일에서 글자가 개미만 해진다. 반드시 넣는다.
6. 만들지 않는 것 (하지 말 것 목록)
- ❌ 다크모드 토글 — 시간 대비 효과 없음
- ❌ 스크롤 애니메이션 라이브러리 (AOS 등)
- ❌ 로딩 스피너
- ❌ 햄버거 메뉴
- ❌ 방문자 카운터, 댓글, 검색
- ❌
style.css/script.js분리 - ❌ 연락처 전송 폼 (서버 없음)
여유가 있다면 이 대신 내용을 다듬으세요. 기능보다 내용이 남습니다.