# editorial · design

한국어 원고 교정·교열·윤문 SaaS **editorial**의 정적 디자인 프로토타입.
모든 화면은 빌드 없이 작동하는 단일 HTML/CSS/JS 파일입니다.

> Claude Design 에서 생성한 디자인 번들을 그대로 포팅했습니다.
> v1.2 · 24개 화면 · 2026-06-29 기준.

## 시작

```bash
# 정적 서버 어느 것이든
python3 -m http.server 4000
# 또는
npx serve .
```

`http://localhost:4000` 에서 `index.html` 이 화면 인덱스 역할을 합니다.

## 구조

```
.
├── index.html                  화면 인덱스
├── editorial-*.html            기존 화면
├── what-is-editorial.html      서비스 이해 페이지 (/what-is-editorial)
├── editorial-spec.html         화면기획서 (구 "editorial 화면기획서.html")
├── editorial-change-log.html   기획 변경 기록 (등록 번호·날짜 기준)
├── css/
│   ├── editorial-tokens.css    공유 토큰 + 기본 컴포넌트 (v1.2)
│   ├── editorial-auth.css      인증 4종 공통 셸
│   └── editorial-legal.css     약관·개인정보·사업자 공통
├── js/
│   └── symbol-fit.js           심볼 자동 피팅
├── fonts/
│   └── MagnoliaScript-Regular.{woff2,woff,ttf,eot,svg}
└── tokens/
    ├── editorial.tokens.json   Tokens Studio v2 / W3C 호환
    └── README.md
```

## 화면 그룹

| 그룹 | 화면 |
|---|---|
| **P0 핵심** | 랜딩 · 로그인 · 라이브러리 · 보고서 · 모달 |
| **P1 인증** | 회원가입 · 비밀번호 찾기 · 이메일 인증 |
| **P1 결제·플랜** | 요금제 · 마이 플랜 · 결제 · 플랜 해지 |
| **P1 설정·공유** | 설정 (6탭, `동료 초대` 포함) · 공유 보고서 |
| **P2 마케팅** | 소개 · editorial이란? · 브랜드북 · 사업자 정보 |
| **P2 법적·에러** | 이용약관 · 개인정보처리방침 · 에러 (404/500/empty) |
| **REF** | 디자인 시스템 · 화면기획서 · 기획 변경 기록 |

## 핵심 결정 사항 (v1.2)

- 본문 15px · 웨이트 500 / 650 / 800 (Pretendard Variable)
- 다크 배경 raised-1/2/3 별도 hex
- success #16A34A · destructive #DC2626 / warning 은 destructive 통합
- 시맨틱 좌측 컬러 라인 안 씀 (Claude 스러움 회피)
- 다크 랜딩 그라데이션: 블롭 3개 (오렌지 2 + 레드 1), 19~28s alternate
- 분석중 상태: 원형 파이 + 퍼센티지 (프로그레스 바 X)
- 모바일 라이브러리: 카드 레이아웃 (가로 스크롤 X)
- 보고서 단축키: J/K/A/X/B
- 업로드 2단계: "원고 분량 / 사용할 크레딧 / 보유한 크레딧" 3행만, 양수만
- 스타일 분석: 일관성 지수 + 용어집(용어/규칙) — 횟수·문장길이·빈도 통계 없음

## 디자인 토큰

`tokens/editorial.tokens.json` 은 Tokens Studio v2 / W3C 호환 포맷.
Figma 의 Tokens Studio 플러그인에서 *Load from File* 로 바로 가져옵니다.

```
core/*                      값
  color / dimension / type / motion / shadow
semantic/light · semantic/dark
  core alias 를 통한 라이트/다크 미러링
```

CSS 토큰(`css/editorial-tokens.css`) ↔ JSON 토큰은 **수동 동기화**.
변경 시 양쪽 모두 갱신 필요.

## 기획 변경 기록

`editorial-change-log.html`은 기획 변경을 등록 번호와 등록 날짜 기준으로 기록하는 내부 PRD 전달 문서입니다.
각 등록 건마다 무엇이 문제였고, 왜 기획을 수정했으며, 어떤 개선 기준으로 개발해야 하는지 먼저 설명한 뒤 변경 항목·영향 화면·관련 파일·개발 확인 항목을 확인하는 용도로 사용합니다.

현재 기준:

- 등록 1 — 보고서 승인/무시 액션의 다운로드 반영 의미 명확화 (`a9bb947`)

## 리퍼럴 프로그램 문서

### 현재 리퍼럴 화면 방향

- 공개 추천 랜딩과 독립 추천 허브는 만들지 않습니다.
- 초대 링크는 기존 로그인 화면의 추천 변형으로 연결합니다.
- 기존 설정 화면의 여섯 번째 `동료 초대` 탭을 모든 로그인 사용자에게 노출합니다.
- 자격 전에는 혜택·원고 업로드, 자격 후에는 링크 복사·직접 이메일 초대·초대 현황·혜택 기준을 제공합니다.
- 초대 링크는 수정할 수 없고 새 링크만 만들 수 있습니다. 새 링크를 만들면 기존 공개 링크는 즉시 무효화되지만 이미 고정된 귀속과 이메일 초대 링크는 유지됩니다.
- 초대 현황은 최대 5개 행으로 표시하며, 5/5 도달 후에도 링크 복사·이메일 초대와 기존 화면 문구를 유지합니다.
- 직접 이메일 초대의 상세 템플릿은 후속 설계합니다. 제목에는 `(광고)`를 붙이지 않으며 최종 문안은 출시 전 Legal 검토합니다.
- 현재 화면 구현 범위는 설정의 여섯 번째 `동료 초대` 탭입니다. 사용자 메뉴·마이 플랜·최초 안내 등 다른 진입점은 후속 화면 작업 범위입니다.
- [리퍼럴 프로그램 기획서 v1.3](./editorial_리퍼럴_프로그램_기획서_v1.3_최종.md) — 목표, 운영 정책, 사용자 여정, 노출 원칙
- [리퍼럴 프로그램 실행 기획서 v1.0](./editorial_리퍼럴_프로그램_실행기획서_v1.0.md) — 상태·API·원장·운영·QA 계약
- [화면별 상태·문구 매트릭스 v1.0](./editorial_리퍼럴_프로그램_화면별_상태_문구_매트릭스_v1.0.md) — 최초 안내, 가입, 보상, 예외, 알림, CS의 사용자 노출 문구

## 배포

기본 배포 대상은 Cloudflare Pages의 GitHub 연동입니다. 이 저장소는 빌드 없는 정적 HTML 프로토타입이므로 ZIP을 만들 필요 없이 `main` 브랜치에 push하면 자동 배포됩니다.

기존 ZIP/Drag-and-drop 방식의 Direct Upload 프로젝트는 Git 연동으로 전환할 수 없으므로, Git 연동용 Pages 프로젝트를 새로 만든 뒤 커스텀 도메인을 새 프로젝트로 옮깁니다.

Cloudflare Pages 설정값:

| 항목 | 값 |
|---|---|
| Git provider | GitHub |
| Repository | `bookend-tech/editorial-design` |
| Production branch | `main` |
| Framework preset | None |
| Build command | `exit 0` |
| Build output directory | `.` |
| Root directory | 비워둠 |

`_headers`는 기존 Vercel 설정의 정적 자산 캐시 헤더를 Cloudflare Pages에 적용합니다. `dist/`의 ZIP 산출물은 자동 배포 흐름에서는 사용하지 않습니다.

Vercel 배포가 필요할 때를 대비해 `vercel.json`은 보존합니다.

## 외부 의존 (CDN)

- Pretendard Variable — `cdn.jsdelivr.net/gh/orioncactus/pretendard`
- Remix Icon — `cdn.jsdelivr.net/npm/remixicon`
- JetBrains Mono + Sacramento — Google Fonts

Magnolia Script 만 로컬 호스팅 (`fonts/`).