두 번째 잔 — 뉴스레터 구독 수집 원페이지

이메일 한 칸만 있는 구독 페이지가 아니라, 지난 편지를 읽어 보고 어느 호부터 받을지 골라 신청하는 한 장입니다. 1인 창작자의 SNS 바이오 링크 자리에 그대로 씁니다.

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 — Node 도 npm 도 번들러도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

sol-02-newsletter-collect/
├── index.html                 구독 화면 (첫 화면 · 지난 편지 고르기 · 발행인 · FAQ)
├── pages/
│   ├── about.html             발행인 소개와 한 통이 만들어지는 순서
│   ├── blog/index.html        발행 기록 12건 표
│   ├── blog/post.html         편지 전문 한 편 (제12호)
│   ├── legal/privacy.html     개인정보 처리방침 (요약 + 전문 11조)
│   ├── legal/terms.html       이용 조건 (전문 7조)
│   └── system/                404 · 오프라인
├── styles/
│   ├── tokens.css             디자인 토큰            ← 브랜드 색은 여기서 바꿉니다
│   ├── base.css               리셋 · 타이포 · 레이아웃 기본
│   ├── components.css         버튼 · 폼 · 진입 모션 (공용 모듈 병합본)
│   ├── sections.css           빈 상태 · 인쇄
│   └── theme.css              ★ 이 템플릿만의 디자인
├── scripts/
│   ├── main.js                화면 배선 (구독 폼 · 아카이브 · 구독자 수 · PWA)
│   └── logic/newsletter.js    판정과 계산 규칙 (DOM 무관 · Node 에서 단독 실행)
├── contract/                  Next.js 이관 계약서 4종
├── assets/
│   ├── fonts/                 Merriweather · Source Sans 3 (자급, 외부 CDN 없음)
│   ├── icons/                 프로필 · PWA 아이콘
│   └── images/                편지 미리보기 도판
├── manifest.webmanifest       PWA
└── sw.js                      서비스 워커 (오프라인 열람)

스타일시트는 순서가 고정돼 있고 CSS 레이어(base → components → utilities → theme)를 쓰므로 theme.css 가 항상 이깁니다.

Customize

Brand colors

styles/tokens.css 가 아니라 styles/theme.css 의 §1 블록을 고칩니다. 이 템플릿은 PRD 팔레트를 그 자리에서 덮어쓰기 때문입니다.

색을 바꾸면 theme.css 머리말의 대비 표도 함께 고쳐 두세요. 그 표가 세 표면 (지면 · 판 · 눌린 면) 각각에서 잰 값입니다.

Fonts

서체는 assets/fonts/ 에 들어 있고 assets/fonts/fonts.css 가 선언합니다. .woff2 를 바꾸고 theme.css §2 의 --font-heading · --font-body · --font-num 을 고치면 됩니다. 한글 웹폰트는 들어 있지 않습니다 — 한글은 기기의 명조(제목)와 고딕(본문)으로 그려집니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 반경 사다리(9 · 13 · 20 · 알약), 선 두께 사다리(1 · 1 · 2 · 4), 간격 리듬(6 · 12 · 20 · 24 · 72)과 구독자 수가 굴러 올라가는 연출이 전부 이 파일 안에 주석과 함께 있습니다.

편지 목록 바꾸기

index.html 의 <script type="application/json" id="newsletter-data"> 가 원본입니다. newsletter.issues 를 고치면 아카이브 목록과 밀린 편지 계산이 함께 바뀝니다. 화면의 정적 목록과 pages/blog/index.html 의 표는 그 값을 옮겨 적은 사본이므로 같이 고쳐 주세요 (contract/README.md 참고).

Pages

Browser Support

Chrome · Edge 121+, Safari 17+, Firefox 121+ 에서 실측했습니다. iOS Safari 17+.

• CSS 중첩 없이 평문 CSS 로 작성했고 color-mix() 를 쓰지 않습니다.
• 선택된 행 강조에 :has() 를 씁니다 (Chrome 105+ · Safari 15.4+ · Firefox 121+). 지원하지 않는 브라우저에서는 선택 표시가 라디오 버튼만으로 보이고 기능은 그대로입니다.
• 띠지의 반투명 배경은 backdrop-filter 입니다. 미지원 시 불투명한 크림색으로 떨어집니다.
• text-wrap: pretty 는 Firefox 가 아직 지원하지 않습니다. 줄바꿈만 달라집니다.
• JavaScript 를 꺼도 문서는 그대로 읽힙니다 — 지난 편지 목록, 발췌 한 편, 발행 기록 12건, 안내 문구가 전부 정적 HTML 입니다. 꺼졌을 때 사라지는 것은 신청 접수, 고른 호에 따른 계산, 구독자 수 집계입니다.

Accessibility

• WCAG 2.2 AA 대비 (본문 4.5:1 이상). 세 표면에서 각각 실측한 표가 theme.css 머리말에 있습니다.
• 키보드만으로 신청까지 갑니다. 탭 순서는 띠지 → 표제 → 이메일 → 동의 → 신청 → 지난 편지입니다.
• 구독자 수와 발췌 패널은 aria-live 로 바뀐 것을 읽어 줍니다.
• 터치 타깃 44×44px 이상, 컨트롤 높이 48px 한 계급.
• prefers-reduced-motion · prefers-reduced-data · prefers-reduced-transparency 대응.
• 이 템플릿은 라이트 전용입니다. 편지 한 통을 읽는 지면이라 다크 모드를 넣지 않았고, OS 가 다크여도 지면색이 바뀌지 않게 잠가 두었습니다.

Credits & License

서체와 이미지 출처는 CREDITS.md, 사용 조건은 LICENSE.md에 있습니다. 예시로 쓰인 사람 이름, 이메일(example.com), 링크는 모두 가공입니다.

이 템플릿의 일부는 AI 의 도움을 받아 제작했습니다.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory