elecq 사업계획 — 디자인기획

v1.0 · 2026-08-04 · 회사 디자인 규율 적용: 토큰 기반·임의색 금지·AI 클리셰 배제. 근거: 백서 5장

1. 브랜드 방향

인상 목표: "정부 사이트보다 쉽고, 블로그보다 믿을 수 있다." 공공성 서비스로 출발하므로 신뢰·중립·정확의 인상이 최우선이다. 화려함·과장·마케팅 톤 배제.
컬러: 화이트 베이스 + 블루 액센트(회사 기준: Centras 계열 화이트+블루, 레드 금지). 포인트는 1색 원칙. teal·보라 등 임의색 금지, 카드 좌측 컬러 액센트 바 금지(AI 클리셰).
타이포: 시스템 폰트 스택 + 숫자 가독성 우선(테이블·계산 결과가 제품의 얼굴). 금액·수치는 tabular numerals.
로고·슬로건: 런칭 전 확정(Phase 1 중 결정 — 실행기획 v2.0은 게이트 기반이므로 주차 항목 아님). 텍스트 로고로 시작 — Phase 1에서 그래픽 아이덴티티에 시간을 쓰지 않는다.

2. 디자인 토큰 (정본의 시작점)

Phase 1 착수 시 wiki/design/design-system.md(정본)로 승격한다. 초기 토큰 세트:

--bg / --surface / --border          화이트 베이스 중립 계열
--text / --text-sub / --text-faint   본문·보조·미약
--accent / --accent-weak             블루 1계열(호버·배경 파생만 허용)
--ok / --warn / --danger             상태색 — 판정 등급(안전/주의/위험 — 백서 5.3)·잔여 상태 표시 전용
--radius / --space-*  / --shadow-1   기하·간격·그림자 최소 세트

규칙: 컴포넌트에서 토큰 외 색상 하드코딩 금지. 상태색은 의미(잔여 상태) 외 장식 사용 금지. 이모지 금지(아이콘은 SVG 최소 세트).

3. 정보 구조 (IA)

홈 ─ 보조금 조회(지역×차종 → 실구매가)   ← 핵심 동선, 홈에서 즉시 실행
  ├ 보조금 현황 /subsidy/{지자체}        ← 101개 지자체 페이지(SEO/GEO 골격)
  ├ 차량 DB /cars, /cars/{모델}          ← 모델별 표준 스펙 페이지
  ├ 비교 /compare                        ← 2~4종 비교
  ├ 계산기 /calc                          ← TCO·충전비
  └ 데이터 기준 /about-data               ← 출처·갱신 주기·정정 채널(신뢰 페이지)

홈 = 도구 진입점이다. 배너·소개 문구 중심의 랜딩을 만들지 않는다 — 첫 화면에서 바로 지역·차종을 고르게 한다.
/about-data는 신뢰의 근거 페이지: 데이터별 출처·기준시각·갱신 주기·한계를 공개한다. "정직이 차별화"의 화면 구현.

4. 핵심 화면 원칙

화면	원칙
보조금 결과	숫자 1개(실구매가)를 가장 크게. 산식 펼쳐보기(국비+지방비-차감 내역). 기준시각·출처·"정본은 공고" 고지 상시 노출
잔여 현황	접수잔여/출고잔여의 난해함을 우리가 해석해 보여준다: "출고 시점 수령 가능성" 판정 3등급(안전/주의/위험 — 백서 5.3) + 근거 수치(잔여·소진 속도·T_lead 밴드·기준 시각·선정 방식) 병기
차량 상세	스펙 테이블은 전 모델 동일 구조(비교 가능성 = 표준의 인상). 출처·기준일 각주
계산기	가정치 전부 노출·수정 가능. "몰래 가정" 금지 — 신뢰 요건이자 GEO 요건

5. 반응형·검증 의무

대상 폭: 1440 · 1100 · 900 + 모바일 390(소비자 서비스이므로 모바일 필수 — 회사 3폭 규율에 390 추가).
검증: 화면 완성 시 4폭 스크린샷 확인 의무(1440 한 폭 검증은 검증이 아님). TAP의 tools/b2g-design-snap.sh 방식 스냅 스크립트를 elecq용으로 이식.
표·비교 뷰는 좁은 폭에서 가로 스크롤 컨테이너로 격리(본문 가로 스크롤 금지).

6. GEO·SEO 구조 요건 (디자인 = 데이터 구조)

모든 수치 콘텐츠는 시맨틱 테이블 + Schema.org(Vehicle·FAQPage·Dataset) 마크업.
페이지마다 요약문 1문단(AI 발췌 대상)·기준일·출처 블록을 표준 컴포넌트로.
페이지 제목 패턴 표준화: "2026 {지자체} 전기차 보조금 — {금액} (기준 {날짜})" 형태로 롱테일 질의 직답.
디자인 완성도 기준선: 새 화면은 최신 정본 조립으로 시작하되, Phase 1은 기능 신뢰가 우선 — 장식적 완성도는 Phase 2에서 상향.

7. 신뢰 시각화 설계 (2026-08-05 신설) — "계산한다는 것을 보여준다"

배경: 이 서비스의 핵심 주장은 "복잡한 데이터를 우리 알고리즘으로 계산해 수령 가능성을 알려준다"이다. 그런데 주장을 문장으로만 하면 신뢰가 생기지 않는다. 계산 과정 자체를 시각화하는 것이 신뢰 디자인의 본체다. 원칙: 장식이 아니라 증거. Stripe·Linear가 제품 UI 자체를 히어로에 놓는 것과 같은 논리 — 추상 도식이 아니라 실제 소스명·실제 수식·실제 결과 조각을 보여준다.

7.1 절대 금지 (AI 클리셰 = 신뢰도 파괴)

아이콘 3개 + 화살표로 "데이터 수집 → AI 분석 → 결과" 도식. 아무것도 증명하지 않는다.
"빅데이터", "머신러닝", "AI 엔진" 같은 추상 명사 배지. 무엇을 계산하는지 말하지 않으면 신뢰가 아니라 의심을 만든다.
가짜 정밀도(확률 %, 소수점 신뢰도), 회전하는 그래픽, 파티클·네트워크 노드 장식.
데이터 소스를 익명 블록으로 표시("Data Source A"). 이름을 못 쓰면 없는 것이다.

7.2 A. 소개 페이지 — 데이터·연산 파이프라인 다이어그램

목적: 처음 온 사람이 "이 회사는 진짜 계산을 한다"를 3초 안에 납득하게 한다.

구조: 좌(입력) → 중(연산) → 우(출력) 3단. 데스크톱 3열, 900 이하 세로 스택(화살표는 회전).

영역	내용	신뢰를 만드는 장치
입력	실제 소스 4개를 이름으로: ①지자체 보급사업 공고문(101곳) ②일별 잔여 스냅숏 ③차종별 출고 대기 밴드 ④2026 보조금 지침 룰셋	각 소스에 상태 칩(확보·수집 예정·절차 진행 중)을 붙인다. 없는 것을 없다고 말하는 것이 신뢰의 출발
연산	실제 수식 2줄을 그대로 노출: `소진 예측 = 잔여 ÷ 최근 소진 속도`, `여유 = 소진 예측 − 내 출고 대기`. 아래에 지자체 선정 방식 3분기(출고·등록순 / 접수순 / 추첨)	수식이 보이면 "블랙박스가 아니다"가 성립. 분기 3갈래는 "지역마다 다르게 계산한다"는 정교함의 증거
사람 검증	연산과 출력 사이에 HIL 단계를 명시: "지침·공고 변경은 사람이 확인한 뒤 반영"	자동화 만능을 주장하지 않는 것이 오히려 신뢰를 높인다
출력	실제 제품 조각: 등급 배지 + 판정 타임라인 미니어처	추상 결과 아이콘이 아니라 진짜 화면 조각을 쓴다

컴포넌트 규격

입력 카드: g50 배경·radius 12·padding 16~18. 소스명 14/700, 설명 12/g600, 상태 칩(기존 .st-* 도트 문법 재사용)
연산 카드: 흰 카드·shadow-m·radius 20. 수식은 monospace 13px, g50 배경 블록. 분기 3칩은 pill
연결선: 1px --g300 + 화살촉. 모바일에서는 세로 방향으로 회전
색: 블루는 연산 카드 강조 1곳만. 나머지 무채색(정본 §1-4 준수)

7.3 B. 트래커 — 출고 월별 수령 가능성 시뮬레이터

목적: 이 서비스의 논지("계약 시점이 아니라 출고 시점이 문제다")를 한 장의 그래프로 증명한다. 사용자가 출고 시점을 모르므로 시점을 묻지 않고 모든 달의 결과를 동시에 보여준다.

데이터: demo_outlook()(구현 완료 — lib/demo-data.php)이 월별로 산출.

해당 월까지 남는 물량 = 현재 잔여 − 소진 속도 × 경과일(월말 기준, 보수적)
등급: 비관(소진 +15%)에서도 남으면 안전 / 낙관(−15%)에서만 남으면 주의 / 낙관에서도 바닥이면 위험
접수순 지자체는 "선정 후 2개월 출고 요건"을 함께 적용해 낮은 쪽 채택, 추첨 지자체는 판정 미제공

화면 구성 — 기존 판정 타임라인을 확장한다 (새 차트를 만들지 않는다)

메인·트래커에 이미 있는 판정 타임라인(vt_html() / .vt-*)이 이 기능의 기반이다. 새 컬럼 차트를 별도로 만들면 같은 시간 정보를 두 문법으로 그리게 되어 일관성이 깨진다. 같은 시간축에 레인 하나를 더 얹는다.

[판정 타임라인 — 하나의 시간축]
  잔여 물량      ████████████░░░ ┆ 소진 예측
  내 출고 대기        ▓▓▓▓▓▓▓▓
  월별 가능성    ■■■■|■■■■|■■■■|▨▨▨▨|░░░░|░░░░   ← 신규 레인
                 8월  9월  10월  11월  12월  1월

요약 문장(가장 크게): "지금 추세라면 10월 출고까지 안전, 12월부터 어렵습니다." + "선택하신 EV3는 지금 계약 시 11~1월 출고 예상입니다."
월별 가능성 레인(신규): 기존 타임라인 하단에 월 단위 구간을 등급색으로 채운 띠를 추가한다. 각 구간의 좌우 위치는 기존 레인과 동일한 horizon 비율 계산을 쓴다(vt_html의 $pct()).

색: 안전 --blue / 주의 --warn / 위험 --out(옅은 채도, 면적 사용이므로 텍스트색보다 연하게) / 추첨 info 회색
각 구간 위에 월 라벨. 등급이 바뀌는 경계에 세로 구분선
핵심 가치: 내 출고 대기 레인이 바로 위에 있으므로, 사용자는 "내 차가 나올 구간이 무슨 색인가"를 정렬만으로 즉시 읽는다 — 별도 차트로는 얻을 수 없는 정렬 이점

근거 패널: 기존 판정 근거 패널에 행 추가(월별 계산 방법 한 줄). 새 패널을 만들지 않는다.
고지: 기존 고지 재사용.

구현 규칙: vt_html()에 선택 입력 months(구간 배열)를 추가하고, tracker.js의 동일 DOM 생성부도 함께 고친다(두 곳 동시 수정 규칙 — verdict-ui.php 주석). CSS는 .vt-* 이웃에 .vt-months로 추가한다.

규율: 확률 % 표기 금지 · 점 추정 금지(항상 구간) · 추첨 지자체는 차트 대신 안내 문구 · 시연 표기 유지.

문안 SSOT: wiki/site/subsidy.md에 섹션 신설(요약 문형·범례·근거 라벨·고지). PHP·JS는 소비만 한다.

7.4 구현 순서

트래커 시뮬레이터(7.3) — 모델 완료, UI 남음. 서버 렌더 + tracker.js 동기화(기존 verdict-ui.php와 동일 패턴)
소개 파이프라인(7.2)
두 화면 모두 4폭 + 위험/추첨 상태 스냅 검증 후 반영

브랜드·토큰·IA·GEO