wjb127 consulting-report — 컨설팅 보고서 생성기
사용자 입력을 기반으로 컨설팅펌 스타일의 HTML 보고서를 생성한다. 4개 테마 중 선택 (기본값 G). 모든 테마는 60/30/10 색상 비율을 유지하되 색감·폰트·레이아웃 시그니처가 다르다.
테마 선택 (Theme)
파라미터 파싱
사용자 입력 맨 앞(또는 --theme X)에서 테마 식별자를 추출한다. 대소문자 무시.
/consulting-report A ...또는--theme A→ 테마 A (Swiss/Signal)/consulting-report B ...→ 테마 B (Slate/Teal)/consulting-report C ...→ 테마 C (Warm Serif)- 식별자 없음 → 테마 G (기본 — 아이보리/남색/골드)
식별자는 보고서 내용에서 제외(테마 지정용일 뿐). 나머지 텍스트가 실제 보고서 주제.
테마별 적용 규칙
컴포넌트 HTML 구조와 CSS 클래스명은 4개 테마 모두 동일. 테마마다 바꾸는 것은 ① :root 토큰 ② 폰트 <link> + 폰트 변수 ③ 아래 명시된 레이아웃 시그니처뿐. 컴포넌트 정의(아래 "사용 가능한 컴포넌트")는 그대로 쓰되, 색/폰트만 토큰으로 치환된다.
- 테마 G는 외부 CDN 없음(시스템 Pretendard 폴백). A/B/C는 구글폰트 CDN 사용(고유 타이포가 핵심이라 예외 허용).
<head>에 preconnect 2줄 + 폰트 link 포함. - 등급 태그(SAFE/STANDARD/COMPLEX), 비교카드, direction 등 모든 컴포넌트의 색은 각 테마 토큰을 그대로 따른다.
테마 A — Swiss / Signal (순백·잉크블랙·시그널레드)
차갑고 날선 에디토리얼. 데이터·진단·날카로운 분석에 적합.
폰트 링크:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Space+Mono:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
:root{
--bg:#FFFFFF; --surface:#FFFFFF; --surface-tint:#F3F3F0;
--ink:#141414; --ink-soft:#3A3A38; --ink-line:#DBDBD6;
--accent:#E5341E; --accent-soft:#F4A79B; --accent-tint:rgba(229,52,30,0.07);
--safe:#2E7D5B; --safe-bg:rgba(46,125,91,0.08);
--standard:#C08A2A; --standard-bg:rgba(192,138,42,0.08);
--complex:#C0392B; --complex-bg:rgba(192,57,43,0.08);
--text:#141414; --text-muted:#6E6E6B;
--font-sans:'Inter','Noto Sans KR',sans-serif;
--font-mono:'Space Mono',monospace; /* 섹션번호·라벨·숫자단위 */
--font-num:'Space Mono',monospace; /* mod-num·ci-num·price */
}
레이아웃 시그니처: 헤어라인 룰(1px) 위주, 둥근모서리 0, 섹션번호/라벨/단위는 --font-mono 대문자, 숫자 font-variant-numeric:tabular-nums, doc-title 40px/weight800/letter-spacing -1.6px, summary/cap 그리드는 셀 사이 1px 보더로 꽉 채움. accent는 작은 블록·언더라인으로만.
테마 B — Slate / Teal (쿨그레이·딥슬레이트·틸)
모던 테크 컨설팅(딜로이트/액센추어 톤). SaaS·기술·디지털전환 제안에 적합.
폰트 링크:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
:root{
--bg:#F4F6F7; --surface:#FFFFFF; --surface-tint:#EAEEF0;
--ink:#1E2A32; --ink-soft:#3A4A54; --ink-line:#D8DEE2;
--accent:#0E8C7F; --accent-soft:#5FD0C4; --accent-tint:rgba(14,140,127,0.08);
--safe:#0E8C7F; --safe-bg:rgba(14,140,127,0.08);
--standard:#C08A2A; --standard-bg:rgba(192,138,42,0.08);
--complex:#B4533F; --complex-bg:rgba(180,83,63,0.10);
--text:#1E2A32; --text-muted:#697882;
--font-sans:'IBM Plex Sans KR',sans-serif;
--font-mono:'IBM Plex Mono',monospace; /* 섹션번호·라벨·숫자 */
--font-num:'IBM Plex Mono',monospace;
}
레이아웃 시그니처: 둥근모서리 68px, 카드 좌측 35px 컬러 레일(::before), 등급은 pill 태그(border-radius 999px), direction은 다크 슬레이트 + 우상단 원형 틸 글로우(::after), 비교카드 헤더에 컬러 도트, 리스트 불릿 ›, 숫자 tabular-nums.
테마 C — Warm Serif (크림·에스프레소·테라코타)
지적인 싱크탱크/이코노미스트 톤. 전략·인사이트·"읽히는" 보고서(전자책류)에 적합.
폰트 링크:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=Spectral:ital,wght@1,500;1,600&display=swap" rel="stylesheet">
:root{
--bg:#F7F3EC; --surface:#FFFCF6; --surface-tint:#EFE8DC;
--ink:#23201B; --ink-soft:#4A443B; --ink-line:#DAD1C2;
--accent:#C2562F; --accent-soft:#E0A07F; --accent-tint:rgba(194,86,47,0.08);
--safe:#5C6B3F; --safe-bg:rgba(92,107,63,0.08);
--standard:#B07A1E; --standard-bg:rgba(176,122,30,0.08);
--complex:#9E421F; --complex-bg:rgba(158,66,31,0.08);
--text:#23201B; --text-muted:#8A7F6E;
--font-serif:'Noto Serif KR',Georgia,serif; /* 제목·헤드라인·숫자값·축명 */
--font-sans:'Noto Sans KR',sans-serif; /* 본문 */
--font-ital:'Spectral',Georgia,serif; /* 섹션번호·라벨(이탤릭) */
--font-num:'Noto Serif KR',serif;
}
레이아웃 시그니처: 세리프 주도(doc-title·sec-title·값·축명 = --font-serif), 컨테이너 폭 780px로 좁혀 매거진 느낌, 헤더 중앙정렬, 섹션번호/라벨은 --font-ital 이탤릭("— 01. Direction"), sec-title 하단 2px 잉크 룰, 구분선은 점선/얇은 라인, 여백·line-height 큼(1.75), direction 중앙정렬.
디자인 시스템 — 기본 테마 G (아이보리/남색/골드)
아래 토큰은 테마 G 기준. A/B/C 선택 시 위 테마 토큰·폰트·시그니처로 치환하되, 컴포넌트 구조는 동일. 컴포넌트 정의에서
'Pretendard'/'Georgia'직접 표기는 각 테마의--font-sans/--font-num(또는 serif/ital) 변수로 대체.
색상 토큰 (CSS Variables)
:root {
--bg: #FAF8F3; /* 60% — 배경, 여백 */
--surface: #FFFFFF; /* 카드, 모듈 내부 */
--surface-tint: #F4F1EA; /* 카드 사이드 패널, 강조 배경 */
--ink: #1B2545; /* 30% — 제목, 헤더 바, 총합 바 */
--ink-soft: #2E3958; /* 본문 강조 */
--ink-line: #D5D0C4; /* 구분선, 보더 */
--accent: #B89048; /* 10% — 섹션 번호, 태그, 하이라이트 */
--accent-soft: #E8D9B5; /* 총합 숫자, 남색 배경 위 강조 */
--accent-tint: rgba(184,144,72,0.08); /* 틴트 배경 */
--safe: #4A7C59; /* SAFE 등급 텍스트 */
--safe-bg: rgba(74,124,89,0.08); /* SAFE 등급 배경 */
--standard: #B8860B; /* STANDARD 등급 텍스트 */
--standard-bg: rgba(184,134,11,0.08); /* STANDARD 등급 배경 */
--complex: #8B3A3A; /* COMPLEX 등급 텍스트 */
--complex-bg: rgba(139,58,58,0.08); /* COMPLEX 등급 배경 */
--text: #1B2545;
--text-muted: #6B7A99;
}
타이포그래피
- 폰트:
'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif - 넘버링/장식:
'Georgia', serif(이탤릭) - 본문: 15px, line-height 1.7
- 문서 제목: 36px, weight 800, letter-spacing -1px
- 섹션 제목: 24px, weight 700, letter-spacing -0.3px
- 섹션 번호: 11px, letter-spacing 2px, 골드색, 대문자
- 태그/라벨: 11px, letter-spacing 3px, 골드색, 대문자
레이아웃
- 컨테이너: max-width 920px, 양쪽 패딩 24px
- 섹션 간격: margin-bottom 56px
- body 패딩: 60px 24px
반응형 (max-width: 768px)
- body 패딩: 32px 16px
- 제목: 26px
- 그리드 → 단일 컬럼
- flow 가로 → 세로 (화살표 90도 회전)
사용 가능한 컴포넌트
1. 문서 헤더 (doc-header)
<header class="doc-header">
<div class="doc-tag">태그 텍스트 · CONFIDENTIAL</div>
<h1 class="doc-title">문서 제목</h1>
<p class="doc-subtitle">부제목 한 줄</p>
<div class="doc-meta">
<span><strong>발행일</strong>2026년 X월 X일</span>
<span><strong>버전</strong>v1.0</span>
<span><strong>유효기간</strong>발행일로부터 30일</span>
</div>
</header>
- 상단 4px 남색 보더
- 하단 1px 라인
2. 요약 카드 그리드 (summary-row)
<div class="summary-row">
<div class="summary-card">
<div class="label">라벨</div>
<div class="value">숫자<span class="unit">단위</span></div>
<div class="note">보조 설명</div>
</div>
<div class="summary-card highlight"><!-- .highlight: 골드색 숫자 -->
<div class="label">총 비용</div>
<div class="value">280<span class="unit">만원</span></div>
<div class="note">부가세 별도</div>
</div>
</div>
- 3컬럼 그리드 (모바일: 1컬럼)
- 1px gap + 보더로 셀 구분
3. 방향 박스 (direction)
<div class="direction">
<div class="label">LABEL</div>
<h3>핵심 메시지 제목</h3>
<p>상세 설명. <strong>강조</strong> 가능.</p>
</div>
- 남색(--ink) 배경
- 왼쪽 5px 골드 악센트 바
- strong 태그 → accent-soft 색상
4. 플로우 차트 (flow)
<div class="flow">
<div class="flow-step">
<div class="step-num">1</div>
<div class="step-title">단계명</div>
<div class="step-desc">설명</div>
</div>
<div class="flow-arrow">→</div>
<!-- 반복 -->
</div>
- 가로 배치, flex
- step-num: 골드 원형 뱃지 (28px)
- 모바일: 세로 전환
5. 모듈 카드 (module)
<div class="module">
<div class="mod-num">01</div>
<div class="mod-body">
<span class="mod-tier-tag">SAFE</span>
<h3>모듈 제목</h3>
<p class="mod-desc">설명</p>
<ul class="mod-list">
<li>항목 1</li>
<li>항목 2</li>
</ul>
</div>
<div class="mod-price">
<div class="price-num">150<span class="won">만원</span></div>
<div class="price-period">약 10~12일</div>
</div>
</div>
- 3컬럼 그리드: 60px(번호) / 1fr(본문) / 160px(가격)
- mod-num: Georgia italic, 골드색
- mod-tier-tag: 등급에 따라 색상 변경
- SAFE:
background: var(--safe-bg); color: var(--safe); - STANDARD:
background: var(--standard-bg); color: var(--standard); - COMPLEX:
background: var(--complex-bg); color: var(--complex);
- SAFE:
- mod-list li::before: 골드색 em dash (—)
- 모바일: 단일 컬럼
6. 총합 바 (total-bar)
<div class="total-bar">
<div class="total-label">합계 (N개 모듈)</div>
<div class="total-price">
<div class="price-num">280<span class="won">만원</span></div>
</div>
</div>
- 남색 배경, accent-soft 숫자
7. 처리 규모 카드 (capacity)
<div class="capacity">
<h3>제목</h3>
<div class="cap-grid">
<div class="cap-card">
<div class="cap-label">라벨</div>
<div class="cap-value">수치</div>
<div class="cap-note">보조 설명</div>
</div>
<!-- 3컬럼 -->
</div>
</div>
8. 확인 사항 리스트 (confirm-list)
<div class="confirm-list">
<div class="confirm-item">
<div class="ci-num">01</div>
<div class="ci-body">
<h4>항목 제목</h4>
<p>설명. <strong>강조</strong> 가능.</p>
</div>
</div>
</div>
9. 확장/추가 기능 리스트 (expand-section)
<div class="expand-section">
<h3>목록 제목</h3>
<ul class="expand-list">
<li>
<span class="exp-name">기능명</span>
<span class="exp-price">가격</span>
</li>
</ul>
</div>
10. 문서 푸터 (doc-footer)
<div class="doc-footer">
<div class="stamp">END OF REPORT</div>
문서 제목 · 발행일<br>
면책/유효기간 안내
</div>
- 상단 2px 남색 보더
- 중앙 정렬
11. 일반 테이블 (data-table)
<table class="data-table">
<thead>
<tr><th>헤더1</th><th>헤더2</th><th>헤더3</th></tr>
</thead>
<tbody>
<tr><td>값1</td><td>값2</td><td>값3</td></tr>
</tbody>
</table>
CSS (보고서에 추가):
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--ink-line);
margin-bottom: 14px;
}
.data-table th {
background: var(--surface-tint);
border-bottom: 2px solid var(--ink-line);
padding: 14px 18px;
text-align: left;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.data-table td {
padding: 14px 18px;
border-bottom: 1px solid var(--ink-line);
font-size: 14px;
color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
12. 인용/강조 블록 (quote-block)
<div class="quote-block">
<p>인용 또는 핵심 메시지</p>
</div>
CSS:
.quote-block {
background: var(--accent-tint);
border-left: 4px solid var(--accent);
padding: 24px 28px;
margin: 20px 0;
}
.quote-block p {
font-size: 15px;
color: var(--ink);
line-height: 1.7;
font-style: italic;
}
13. 진행 타임라인 (timeline)
<div class="timeline">
<div class="tl-item">
<div class="tl-marker"></div>
<div class="tl-content">
<div class="tl-label">PHASE 1</div>
<h4>단계 제목</h4>
<p>설명</p>
</div>
</div>
</div>
CSS:
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
content: "";
position: absolute;
left: 11px; top: 0; bottom: 0;
width: 2px;
background: var(--ink-line);
}
.tl-item { position: relative; margin-bottom: 32px; }
.tl-marker {
position: absolute;
left: -32px; top: 4px;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg);
}
.tl-content {}
.tl-label {
font-size: 11px;
letter-spacing: 2px;
color: var(--accent);
font-weight: 700;
margin-bottom: 4px;
}
.tl-item h4 {
font-size: 16px;
font-weight: 700;
color: var(--ink);
margin-bottom: 8px;
}
.tl-item p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.7;
}
14. 비교 카드 (compare-grid)
<div class="compare-grid">
<div class="compare-card">
<div class="cc-header">옵션 A</div>
<div class="cc-body">
<div class="cc-price">150<span class="unit">만원</span></div>
<ul class="cc-list">
<li>포함 항목 1</li>
<li>포함 항목 2</li>
</ul>
</div>
</div>
<div class="compare-card recommended"><!-- .recommended: 골드 보더 -->
<div class="cc-header">옵션 B <span class="rec-badge">추천</span></div>
<!-- ... -->
</div>
</div>
CSS:
.compare-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.compare-card {
background: var(--surface);
border: 1px solid var(--ink-line);
}
.compare-card.recommended { border: 2px solid var(--accent); }
.cc-header {
background: var(--surface-tint);
padding: 16px 20px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
border-bottom: 1px solid var(--ink-line);
}
.rec-badge {
display: inline-block;
background: var(--accent);
color: white;
font-size: 10px;
padding: 2px 8px;
font-weight: 700;
letter-spacing: 1px;
vertical-align: middle;
margin-left: 8px;
}
.cc-body { padding: 24px 20px; }
.cc-price {
font-size: 30px;
font-weight: 800;
color: var(--ink);
margin-bottom: 16px;
}
.cc-price .unit {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.cc-list { list-style: none; padding: 0; }
.cc-list li {
font-size: 13.5px;
color: var(--text-muted);
padding: 4px 0 4px 16px;
position: relative;
}
.cc-list li::before {
content: "—";
position: absolute;
left: 0;
color: var(--accent);
}
생성 흐름
Step 1 — 사용자 입력 파싱
사용자 메시지에서 다음을 추출:
- 테마: 입력 맨 앞
A/B/C(대소문자 무시) 또는--theme X→ 해당 테마. 없으면 G(기본). ("테마 선택" 섹션 참조). 식별자는 보고서 내용에서 제외. - 보고서 유형: 견적서, 제안서, 분석 보고서, 프로젝트 계획서, 비교 분석, 진행 보고 등
- 제목: 문서 메인 제목
- 대상: 클라이언트명 또는 프로젝트명
- 내용: 섹션별 내용 (사용자가 구조를 지정하면 따르고, 아니면 유형에 맞게 자동 구성)
- 파일명: 지정 없으면
report-{주제요약}-{YYYYMMDD}.html(테마 G 외엔report-{주제}-{테마}-{YYYYMMDD}.html권장)
정보가 부족하면 질문:
"보고서 제목이랑 포함할 내용 알려줘. 견적서면 모듈/가격 정보, 제안서면 핵심 제안 내용."
Step 2 — 섹션 구성
보고서 유형에 따라 적절한 컴포넌트 조합:
견적서: doc-header → summary-row → direction → module × N → total-bar → confirm-list → expand-section → doc-footer
제안서: doc-header → summary-row → direction → timeline → module × N → compare-grid → confirm-list → doc-footer
분석 보고서: doc-header → summary-row → quote-block → data-table × N → capacity → confirm-list → doc-footer
진행 보고: doc-header → summary-row → timeline → module(완료/진행중) → confirm-list → doc-footer
비교 분석: doc-header → summary-row → compare-grid → data-table → quote-block → doc-footer
유형에 맞지 않는 컴포넌트는 생략. 필요하면 컴포넌트 조합을 자유롭게 변경.
Step 3 — HTML 생성
- 선택 테마의
:root토큰 + 폰트 변수를<style>최상단에 넣는다. A/B/C면<head>에 preconnect 2줄 + 폰트<link>도 추가. - 전체 CSS를
<style>태그에 인라인 (테마 A/B/C는 폰트만 CDN, 나머지 자급) - 사용하는 컴포넌트의 CSS만 포함. 컴포넌트 CSS의
'Pretendard'/'Georgia'직접 표기는 테마 폰트 변수(--font-sans/--font-num/--font-serif/--font-ital)로 치환 - 선택 테마의 레이아웃 시그니처(헤더 정렬·라벨 폰트·보더/둥근모서리·direction 장식 등)를 반영
- 한국어 콘텐츠 기본, 날짜는 생성일 기준 자동 입력
doc-tag에 보고서 유형 +CONFIDENTIAL표기 (G 외 테마는 테마명도 표기 가능)- 모바일 반응형 미디어쿼리 필수 포함
Step 4 — 저장
- 저장 위치: 현재 프로젝트 루트 (pwd)
- 파일명:
report-{주제}-{YYYYMMDD}.html - 사용자가 경로/파일명 지정하면 그대로 사용
Step 5 — 결과 안내
보고서 생성 완료: {파일 경로}
— 테마 {G/A/B/C} ({테마명})
— {보고서 유형}: {제목}
— 섹션 {N}개, 컴포넌트: {사용된 컴포넌트 목록}
— 브라우저에서 열어서 확인해봐: open {파일 경로}
규칙
- 테마 G: 외부 CDN/스크립트 의존성 없음 — 순수 HTML+CSS 단일 파일. Pretendard는 시스템 폰트 폴백으로 충분.
- 테마 A/B/C: 구글폰트 CDN
<link>만 허용(고유 타이포 핵심). 그 외 의존성 없음. 인터넷 없으면 시스템 폴백으로 degrade(폰트만 달라짐). - 색상 비율 60/30/10 준수 — 모든 테마 공통. 배경 60% / 텍스트·헤더 30% / 악센트 10%.
- 이모지 사용 금지 (텍스트 콘텐츠 내)
- 모든 숫자 데이터는 큰 폰트 + 작은 단위 패턴 유지 (
<span class="unit">) - 둥근 모서리: 테마 G·A는 최소(0
2px, 직선적), B는 68px(소프트), C는 0(세리프 에디토리얼). 테마 시그니처를 따른다. - 기존 보고서 수정 요청 시 Read → Edit 패턴 사용 (새로 생성하지 않음). 테마 변경 요청이면
:root+폰트link+시그니처만 교체.
테마 빠른 참조
| 테마 | 호출 | 색감 | 폰트 | 느낌 / 적합 |
|---|---|---|---|---|
| G | (기본) | 아이보리·남색·골드 | Pretendard + Georgia | 전통 컨설팅펌. 견적·제안 범용 |
| A | A |
순백·잉크블랙·시그널레드 | Inter + Space Mono | 스위스/맥킨지. 데이터·진단·날선 분석 |
| B | B |
쿨그레이·슬레이트·틸 | IBM Plex Sans/Mono | 테크 컨설팅. SaaS·기술·디지털전환 |
| C | C |
크림·에스프레소·테라코타 | Noto Serif KR + Spectral | 싱크탱크/이코노미스트. 전략·읽히는 보고서 |