8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
46 lines
5.2 KiB
Markdown
46 lines
5.2 KiB
Markdown
# Pulsegate design.md
|
|
|
|
## 브리프
|
|
|
|
- 무엇을: 한 엔드포인트를 세계 여러 지점에서 같은 형식으로 확인하는 가상 엣지 모니터링 서비스.
|
|
- 누구에게: 지점별 응답 시간을 한눈에 비교하고, 늦어진 곳만 골라 보려는 운영 담당자.
|
|
- 제약: 실제 점검·계정 생성이 없다는 사실을 페이지 범위에서 한 번 밝힌다. 기존 값(6개 지점의 DNS·TLS·첫 바이트·p99)과 표 구조, Tab으로 닿는 내부 앵커를 유지한다.
|
|
- 기본 언어: 한국어(`lang="ko"`). 지점 코드와 프로토콜 이름만 라틴으로 둔다.
|
|
|
|
## 2026-10 재작업 이유
|
|
|
|
2026-09판은 전형적인 개발도구 다크 템플릿이었고 lumina-optics·synapse-bci와 같은 틀이었다(유사도 0.84·0.83). 영어 페이지에 고지 단어가 32회 나왔고 히어로 본문이 "This page illustrates…"로 시작했다.
|
|
|
|
## 결정표
|
|
|
|
| 축 | 이 브리프의 재료 | 결정·역할 토큰 | 기각 조건 |
|
|
|---|---|---|---|
|
|
| 은유 | 지점 이름 ICN·NRT·SIN·SJC·LHR·FRA가 원래 공항 코드다. | 공항 출발 안내판. 표가 곧 히어로 이미지이고, 지점 코드와 숫자를 플랩 낱장 한 칸에 한 글자씩 올린다. | 플랩 때문에 표가 화면 낭독기에서 읽히지 않으면 원문 `sr-only` 사본을 확인한다. |
|
|
| 바탕 | 안내판과 도로 표지의 신호 노랑. 운영 화면은 보통 어둡다 — 그 관습을 뒤집어 이 서비스만의 얼굴로 쓴다. | `--surface: #ffd23a`, 잉크 `#121110`(대비 ≈13:1). 강조는 검은 낱장과 `--accent: #b3121f` '주의' 판정 하나. | 빨강 판정이 노랑 위에서 4.5:1 아래면 더 어둡게 한다. |
|
|
| 판정 | p99 150 ms를 넘은 FRA-01만 다르게 보여야 한다. | 판정 열을 새로 두고 `주의 · 150 초과`만 빨강. 나머지는 `정상`. | 판정 색만으로 구분하지 않는다 — 문구가 함께 바뀐다. |
|
|
| 타입 | 안내판 글자는 좁고 각진 간판체다. | 표제·플랩 도현(Do Hyeon), 본문 Gothic A1. 모노 없음 — 등폭은 낱장 칸이 맡는다. `code`도 본문 서체 800. | 도현의 좁은 자폭 때문에 두 줄 표제가 세 줄이 되면 `--step-3` 상한을 낮춘다. |
|
|
| 구도 | 첫 화면에서 표제와 안내판이 함께 보여야 한다. | 왼쪽 큰 표제 + 오른쪽 짧은 설명·행동, 그 아래 화면 폭 전체 안내판. 좁은 화면은 DNS·TLS 열을 접어 p99와 판정을 남긴다. | 390 폭에서 표제와 안내판 머리가 첫 화면에 같이 들어오지 않으면 히어로 여백을 줄인다. |
|
|
| 모션 | 기계식 안내판은 한 번 넘어가고 멈춘다. | 첫 로드에 플랩이 260~680 ms 넘어가다 표의 값에 멈춘다. 값을 지어내지 않는다. 움직임 줄이기면 넘기지 않는다. 호버는 즉시 반전. 스크롤 등장 없음. | — |
|
|
| 형태 | 낱장 모서리만 둥글다. | `--radius: 4px`(플랩·버튼). 면과 구분선은 각지게. | — |
|
|
|
|
## 카피 방향 (2026-10-02)
|
|
|
|
표제·섹션 제목은 무엇을 하는 서비스인지 사실대로 쓴다. "28개 도시가 10초마다 묻는다"처럼 지점을 사람처럼 말하게 하는 문장(무생물 주어 + 사람 동사)을 "28개 지점에서 10초마다 점검"으로 바꿨다. 안내판은 디자인 은유로만 두고 카피에서는 "지점별 응답 시간", "점검 방식"처럼 운영 담당자가 쓰는 말을 쓴다. 어미는 합니다체 하나로 통일한다.
|
|
|
|
## 진실 범위
|
|
|
|
헤더 아래 띠 한 곳("지점·응답 시간·요금은 예시이며, 이 페이지는 실제 점검을 실행하지 않습니다")과 요금표 열 머리글 `요금(예시)` 한 번. 표제·히어로 본문·안내판 셀에는 고지 문구를 넣지 않는다.
|
|
|
|
## 검증
|
|
|
|
- `node tools/instrument-showcases-e2e.mjs` — 내부 앵커 대상 존재·Tab 도달, 표 읽기 가능.
|
|
- `node tools/similarity.mjs` — 재작업 엄격 대상.
|
|
|
|
## 내비·푸터 결정 (2026-10-06 연장)
|
|
|
|
- 내비 없음: 섹션이 넷(히어로·응답 시간·점검 방식·요금)이고 행동은 하나(무료 요금제로 시작)뿐이라 상단 바의 섹션 링크를 뺐다. 상단 바에는 워드마크와 `.btn.btn-head` "무료로 시작"(`#plan-free`, 요금표의 무료 행)만 남긴다. 히어로의 "요금 보기"·"점검 방식 보기" 두 링크도 같은 이유로 뺐다 — 표가 바로 아래에 있어 안내가 필요 없다.
|
|
- 푸터: 다음 행동 하나 크게. `.foot-cta`(노랑 낱장 색, 표제 크기 `--step-3`, 높이 9~15rem)가 푸터 면적의 대부분이고, 아래 한 줄에 브랜드와 쇼케이스 표기만 둔다. 링크는 헤더와 같은 `#plan-free`. 가입 화면은 없다(진실 범위: 이 페이지는 계정을 만들지 않는다)고 이미 띠에 적혀 있으므로 푸터에 고지를 반복하지 않는다. 검은 푸터 위 포커스 링은 잉크색이 사라져 노랑(`--surface`)으로 바꿨다.
|
|
|
|
## 변경 기록
|
|
|
|
- 2026-10-06 연장: 상단 바 내비 제거, 히어로 행동 2개 제거, 푸터를 "다음 행동 하나 크게"로 교체. 토큰·서체·히어로 구도·표·플랩 모션은 그대로. E2E(`instrument-showcases-e2e.mjs`)가 보는 내부 앵커는 `#main`·`#plan-free`로 줄었고 모두 대상이 있다.
|