html-design-system

HTML 디자인 시스템

제안서의 모든 도표, 차트, 다이어그램, 개념도는 HTML/CSS/JS로 작성한다. 이 스킬은 공통 CSS/JS 파일과 컴포넌트 템플릿을 제공한다.

두 가지 사용 방식

1. 섹션 작성 (기본 — 인라인 HTML)

generate-section 커맨드에서 섹션을 작성할 때, 도표와 도안은 섹션 HTML 파일 내에 인라인으로 작성한다. 별도 HTML 파일로 분리하거나 Chrome 스크린샷으로 이미지 변환하지 않는다.

<!-- 섹션 HTML (sections/01_제안사일반현황.html) -->
<link rel="stylesheet" href="../_common/page-frame.css">
<script src="../_common/page-frame.js"></script>
<div class="a4-page">
  <h3>1.1 제안사 일반현황</h3>
  <p>본문...</p>
  <div class="table-title">표 1. 기업 개요</div>
  <table><!-- 인라인 테이블 --></table>
  <div class="table-title">그림 1. 사업 추진 체계</div>
  <div class="flow-container"><!-- 인라인 도안 --></div>
</div>

2. PPTX 변환용 (별도 HTML → Chrome → PNG)

PPTX 생성 파이프라인에서는 별도 HTML 파일을 만들어 Chrome headless로 고해상도 PNG 스크린샷을 캡처한 뒤 python-pptx로 삽입한다. 이 워크플로우는 PPTX 변환 시에만 사용한다.

디자인 토큰

컬러 팔레트

• --primary: #1B3A5C — 네이비 블루 (메인 컬러)
• --primary-light: #2E5C8A — 라이트 블루
• --accent: #0078D4 — 액센트 블루
• --accent-light: #E8F4FD — 연한 하늘색 배경
• --success: #2E7D32 — 그린 (긍정/완료)
• --warning: #F57C00 — 오렌지 (주의)
• --danger: #C62828 — 레드 (위험)

타이포그래피

• 본문: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif
• 본문 크기: 11pt, 표 내부: 10pt, 각주: 9pt
• 페이지 프레임 폰트: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif

A4 규격

• HTML body 폭: 794px (96 DPI 기준)
• A4 실제 크기: 210mm x 297mm
• 콘텐츠 패딩: 20px 40px

공유 CSS/JS 사용법

generate-common 명령이 실행 시 아래 파일을 _common/ 디렉토리에 복사한다:

• _common/page-frame.css — 페이지 프레임 + 차트 컴포넌트 통합 스타일
• _common/page-frame.js — 헤더/푸터 자동 주입 + 오버플로 분할
• _common/common-config.json — 장별 시작 페이지 설정

HTML 파일에서 참조:

<link rel="stylesheet" href="../_common/page-frame.css">
<script>
var PAGE_CONFIG = { badge:"II", title:"기술 방안", project:"사업명", section:"기술 방안", startPage:15, totalPages:80 };
</script>
<script src="../_common/page-frame.js"></script>

서포팅 파일

• page-frame.css: 페이지 프레임 레이아웃 + 차트 컴포넌트 통합 CSS
• page-frame.js: 헤더/푸터 자동 주입, 오버플로 페이지 분할, 페이지 번호 계산
• component-templates.md: HTML 컴포넌트 템플릿 (데이터 테이블, 비교표, 플로우, KPI, 타임라인, 조직도)
• page-frame-guide.md: A4 페이지 프레임 구조 + Chrome 렌더링 가이드