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.
78 lines
8.1 KiB
Markdown
78 lines
8.1 KiB
Markdown
# design.md — 청온 케어
|
||
|
||
## 진행 상태
|
||
|
||
- 2026-10-06 재작업(전체·리디자인 경로, 방향 선택은 사용자 위임). 0 현행 감사 → 1 레퍼런스 → 2 카드 3장 중 A → 3 토큰 → 4 구현(index + protocol 공통 셸) → 5 감사 통과 → 6 이 문서. 완료.
|
||
|
||
## 브리프
|
||
|
||
- 무엇을: 가상 입주·이사·사무실 청소 브랜드의 견적 페이지 한 장 + 작업 절차 2차 페이지. 정적 HTML/CSS + 인라인 JS, 쇼케이스 사이트(`apps/site/public/work/cheongon-care/`) 안.
|
||
- 누구에게: 입주·이사를 앞둔 사람이 평형과 옵션을 골라 예상 금액을 보고 견적을 요청한다. 보조로 운영 화면 예시(접수·배차)를 같은 페이지에서 전환해 본다.
|
||
- 제약: 기본 언어 ko-KR(기존 로컬라이제이션). 상호·단가·옵션 가격·32개 항목·6단계 문구는 기존 파일 값 유지. 새 이미지 금지. 서체는 OFL·공개 배포본. plan.md 배정값(아래 지문 블록)이 제약이다.
|
||
- 화면 목록: `index.html`(견적 계산기 → 절차 → 장비 → 요청 푸터, 운영 화면 예시 모드) · `protocol/index.html`(절차 상세, 같은 셸).
|
||
|
||
## 미확정
|
||
|
||
- 대표 전화번호 02-000-4172 — 푸터 연락처 줄, 전화 다이얼로그. 예시 값이다(사용자 결정 2026-10-06, 다이얼로그와 푸터 고지에 명시).
|
||
- 응답 시간·서비스 지역 — 기존 파일에 없어 사실 목록에 넣지 않았다. 값이 오면 `.facts`에 행 하나 추가.
|
||
- og:image — 전용 1200×630 이미지가 없어 기존 사진의 절대 URL을 가리킨다.
|
||
- 방향 카드 선택(A)은 위임으로 정했다.
|
||
|
||
## 레퍼런스
|
||
|
||
- R1 구조: Homeaglow https://www.homeaglow.com/ — 중간 크기 표제 아래 입력 한 칸, 옆에 가격 사실 3줄($19·$59/월·7일 예약). 가져온 원리: 표제 작게, 사실 목록, 입력이 첫 화면.
|
||
- R1′ 같은 시장: 청연 https://www.chyeon.com/, 미소 https://miso.kr/ — 앱 다운로드 히어로·상단 바·가격 없음. 가져온 원리: 가격을 첫 화면에 두는 것이 이 시장에서 차별점이다.
|
||
- R2 톤: 기존 design.md의 "입력 작업표와 합계 명세 분리" 결정 재사용.
|
||
- R3 디테일: designpaca `mobile-app-ux.md` safe area 절(`viewport-fit=cover` + `env()` + `max()`).
|
||
- 미검증: 숨고 검색 페이지(404), 당근 비즈프로필 하단 바(페처 불가).
|
||
|
||
## 방향
|
||
|
||
지문: 히어로 데이터·도구(견적 패널이 첫 화면, 표제 작게, 사실 목록 4줄, 행동은 패널 안 링크) · 표제/본문 Wanted Sans / Wanted Sans · 바탕 밝음·쿨 #eef3f6 · 강조 187° #156a75 · radius 8px · 흐름 견적 계산기 → 6단계 번호 목록 → 장비 누끼 + 기록 4항목 → 견적 요청(푸터) · 내비 없음 + 모바일 하단 고정 바(전화·견적) · 푸터 = 견적 요청 폼 + 상호·전화 placeholder·고지 한 줄 · 이미지 multiply + 방사형 마스크 누끼 · 모션 없음(폼 상태 색·테두리 전환 160ms만)
|
||
|
||
- 한 문장 컨셉: 입주를 앞둔 사람이 공간 유형·평형·옵션을 고르고 합계를 본 뒤 연락처를 남긴다.
|
||
- 프리셋: swiss-minimal 지배(흰 작업 패널, 선으로 나눈 사실 목록) + 보조 없음. 강조색은 행동·합계·활성 상태에만.
|
||
- 표현 리스크: 합계 숫자(44px)가 페이지에서 가장 큰 글자이고 표제(28px)보다 크다 — 도구가 주인이라는 구도를 글자 크기로 말한다. 검증: 회색조 캡처 첫 시선이 합계였다.
|
||
- 표면 다이얼: 고객 화면 표현성 1·밀도 2 / 운영 화면 예시 표현성 0·밀도 3·증거 노출(예시 고지) 3.
|
||
- 제시 카드: A 계산기가 첫 화면(채택) · B 영수증 한 장(기각 — 1440 폭 낭비, 390에서 합계가 멀다) · C 단가표가 먼저(기각 — 390 표 변환, 행동까지 읽을 것이 많다). A를 고른 이유: 배정 제약과 R1 구성이 같고, 기존 E2E가 슬라이더·유형·합계가 한 화면에서 바뀌는 것을 단언한다.
|
||
- 반사실: 고유 요소 — 단가 3종 버튼(11,000/9,500/14,500), 32개 항목 검수 사실, 옵션 4종 가격. 같은 업종 치환에서 값이 바뀌어야 하고, 세무사무소 치환에서 평형 슬라이더가 무의미 → 통과. 수렴: plan 분포에서 같은 내비 형태인 thursday-flowers와 흐름·푸터·이미지·모션이 다르다(B-2 2/6 같음).
|
||
- 보존 자산: 상호, 단가·옵션 가격, 32개 항목·6단계 문구, 운영 표 예시 행, `assets/*.webp` 3장, `#calculator`·`#pyeongSlider`·`#sumTotal`·`.type-btn[data-base]`·`#btnModeAdmin/#btnModeClient`·`#qcModal`·`.card a[href='../index.html#calculator']`(E2E 계약).
|
||
|
||
## 토큰과 예산
|
||
|
||
- 값은 `styles/tokens.css`. 역할: `--surface`(바탕) / `--surface-raised`(패널·입력) / `--surface-card`(합계 면·표 헤더) / `--accent`(행동·활성·절차 번호) / `--accent-hover`(합계 숫자·호버) / `--ink-faint`(가격·눈금, 흰 위 5.36:1) / 상태 알약 3종은 브랜드 강조와 분리.
|
||
- 타입: step--1 13 / 0 16 / 1 19 / 2 22~28(h1·섹션 제목) / 3 32~44(합계 한 곳). measure 36em. 서체 하나(Wanted Sans Variable, jsdelivr split 서브셋, swap). 모노 없음 — 숫자는 `tabular-nums`.
|
||
- 간격 토큰 1~8, 컨테이너 78rem, 컨트롤 44px, 하단 바 높이 4.25rem + safe area.
|
||
- 예산: tokens §5 기본선. 실측 — 인라인 JS 약 5KB, 첫 화면 이미지 0장, 아래 사진 2장 lazy(84KB·72KB). 폰트 전송량은 split 서브셋이라 쓰인 글자 범위만 — 미측정.
|
||
|
||
## 이펙트와 폴백
|
||
|
||
- 누끼 대체: `.gear-cutout img { mix-blend-mode: multiply; mask-image: radial-gradient(ellipse …) }`. 마스크 미지원이면 직사각 사진 그대로 보인다(완성된 상태).
|
||
- 폼 상태 전환 160ms 색·테두리. 감소 모션에서 1ms.
|
||
- 그 밖의 모션·재질 없음.
|
||
|
||
## 하지 않기로 한 것
|
||
|
||
- 상단 바 내비·sticky·backdrop-filter — 한 장짜리에 행동 하나라 차례가 필요 없다.
|
||
- 히어로 사진 — 도구가 주인인 구도가 포기한 것. `clean-hero.webp`는 남기되 쓰지 않는다.
|
||
- eyebrow·영문 라벨·가운뎃점 메타 문자열 — 라벨은 `dt` 한 낱말.
|
||
- JetBrains Mono·MaruBuri — 한글 라벨에 라틴 모노를 쓰지 않고, 쓰지 않는 표제 서체를 싣지 않는다(`assets/fonts/` 삭제).
|
||
- 지어낸 전화번호·응답 시간·지역 — placeholder 또는 생략.
|
||
- 스크롤 리빌·등장 모션 — 배정표에 없다.
|
||
|
||
## 검증
|
||
|
||
- 자동: html-validate 0 오류(2페이지) · stylelint 0 · no-hanja PASS · integrity cheongon-care 5/5 · design-gate 충족 28/미검증 0/실패 0(폭 320·390·768·1440·1920, axe AA 0건) · showcase-audit PASS 12/0 · archive E2E cheongon 블록 24/24.
|
||
- 수동: 키보드 순회 1440·390 전부 도달·포커스 링 보임 · 전화 다이얼로그 Esc 닫힘·포커스 복귀 · 감소 모션 1ms · 대비 실측(흰/강조 6.27, 합계/회색 면 7.14, 희미/흰 5.36, 알약 6.56~7.42; 어두운 면 위 텍스트 없음) · h1·h2 마지막 줄 어절 ≥2.
|
||
- 시각 루브릭(약한 축부터): R5 1 · R6 1 · R9 1 · R1 2 · R2 2 · R3 2 · R4 2 · R7 2 · R8 2 · R10 2 = 17/20. 대표 화면 index, 2차는 캡처만 열어 봄. 근거는 `outputs/rework-2026-10-06/cheongon-care.md`.
|
||
- 미검증: 하단 바 국내 실측 사례, 실기기 safe area, 200% 확대 캡처, WebKit, 폰트 전송량.
|
||
|
||
## 피드백 기록 · 보존 목록
|
||
|
||
- 2026-10-02 카피 교정에서 정한 업종 어휘(입주청소, 평당 단가, 줄눈, 추가 옵션, 팀장)와 합니다체는 유지했다.
|
||
|
||
## 변경 기록
|
||
|
||
- 2026-08 초기: ledger-console 프리셋, 5:7 소개/사진 히어로, 입력 작업표/합계 명세 분리, verify-final 18묶음 통과.
|
||
- 2026-10-02 카피 교정: "공간의 숨결"·"케어 솔루션"·영문 직함 제거, 합니다체 통일.
|
||
- 2026-10-06 재작업: 히어로를 견적 패널로, 내비 제거 + 하단 행동 바, 푸터를 요청 폼으로, 서체 Wanted Sans 하나, radius 8 한 값, eyebrow 0, 가운뎃점 메타 0, 2차 페이지 공통 셸·인라인 style 제거, 운영 표 행 추가를 DOM 생성으로 변경.
|