DESIGN.md · git:20261010.5b518b6 · 2026-10-10 · sha256 34f2230bfe5c5ef8
DESIGN.md git:20261010.5b518b6A
Immutable. This exact content never changes and is served at /api/v1/blob/34f2230bfe5c5ef8.
# 정책한걸음 — 소개자료 디자인 기준 2026-10-10 개정 · 적용 범위: README 소개 이미지, 30초 모션그래픽, GIF, 포스터. 사용자가 제공한 **정책한걸음 최종 로고**에서 색·형태·문자 특성을 확인하고, 소개자료에 필요한 배치·타이포그래피·모션 규칙을 확장한 문서입니다. 원본에서 확인한 값과 이번 제작에서 정한 규칙을 구분합니다. 기존의 공식 브랜드 매뉴얼을 전재한 문서는 아닙니다.  ## 1. 기준 원본 - `정책한걸음_최종 로고_원본 파일.ai`: 벡터 경로와 그라데이션 정의를 확인한 기준 파일. - `SP2_최종 로고 이미지.png`: 영상에 실제로 배치하는 투명 PNG. [저장소 내 원본 사본](docs/media/brand-logo.png) - 같은 이름의 JPG는 흰 배경 확인용입니다. 영상에는 투명 PNG를 사용합니다. - 원본 체크섬과 기계 판독용 값: [brand-tokens.json](docs/media/brand-tokens.json) 데스크톱 원본은 변경하지 않습니다. PNG 사본은 바이트 단위로 동일하게 보관합니다. 배치할 때만 투명 바깥 여백을 제외해 크기를 맞추며 심벌·워드마크·태그라인의 내부 비례는 바꾸지 않습니다. ## 2. 로고에서 확인한 시각 특성 | 요소 | 확인 내용 | 소개자료에 적용하는 방식 | |---|---|---| | 파란 심벌 | 밝은 파랑에서 짙은 남색으로 이어지는 선형 그라데이션 | 연결선·진행 표시·중요한 결과에 사용 | | 회색 심벌 | 중간 회색에서 짙은 회색으로 이어짐 | 원문·입력·중간 상태를 표현 | | 연결된 곡선 | 둥근 방향 전환과 이어지는 두 줄 | 원본 로고에서 유지하고 화면에서는 진행선으로 간소화 | | 전진하는 형태 | 오른쪽으로 기울어진 문자와 비스듬한 끝단 | 원본 로고의 비례·형태를 유지 | | 한글 워드마크 | 굵은 검정, 높은 밀도와 강한 실루엣 | 본문 제목의 굵기·대비를 결정하는 참고 | | 영문 태그라인 | 회색 이탤릭, `The Step in Public Policy` | 원본 로고의 일부로 유지 | | 넓은 여백 | 흰 바탕 위 심벌·문자의 명확한 대비 | 바깥 여백과 문서를 밝게, 터미널은 어둡게 구성 | AI 파일의 로고 문자는 윤곽선 경로입니다. **원래 폰트명은 확인할 수 없습니다.** 비슷한 폰트로 로고를 다시 조판하지 않고 원본 이미지를 배치합니다. ## 3. 색상 아래 주색·보조색은 원본 AI의 RGB 그라데이션과 벡터 채움에서 확인했습니다. RGB 실수값을 8비트 HEX로 변환한 값입니다. | 토큰 | HEX | 근거·용도 | |---|---|---| | `blue` | `#0071BC` | 파란 심벌 시작색. 주요 연결·강조 | | `indigo` | `#1B1464` | 파란 심벌 끝색. 제목·완료 상태 | | `gray` | `#808080` | 회색 심벌 시작색. 입력·중간 상태 | | `charcoal` | `#1A1A1A` | 회색 심벌 끝색. 본문·구조 | | `black` | `#000000` | 한글 워드마크 | | `tagline_gray` | `#5B5B60` | 태그라인의 채움색을 반올림한 값 | | `white` | `#FFFFFF` | 화면 배경 | 다음은 원본 로고에 있는 색이라고 주장하지 않는 **화면용 파생색**입니다. | 토큰 | HEX | 용도 | |---|---|---| | `ink` | `#171722` | 일반 제목·본문 | | `muted` | `#5B5B60` | 보조 설명 | | `line` | `#D9DFEA` | 구분선·대기 상태 | | `pale` | `#EEF5FB` | 선택 영역·결과 패널 | 파랑→남색 그라데이션은 연결과 전진을 나타내는 띠·경로에만 사용합니다. 긴 문장에는 단색을 사용합니다. 세 레포를 같은 브랜드로 묶고 제품 구분은 이름·내용으로 합니다. ## 4. 로고 배치 - 로고는 오른쪽 위에 고정합니다. 1920×1080 화면에서 **너비 144px**로, 이전 영상의 약 41%입니다. - 제품 이름은 왼쪽 위, 로고는 작은 제작 주체 표시로 둡니다. 본문과 실행 화면이 먼저 읽혀야 합니다. - 원본 투명 PNG의 바깥 여백만 잘라 배치합니다. 심벌·워드마크·태그라인의 내부 비례와 색은 유지합니다. - 로고는 밝은 바탕에 놓으며, 확대 도입이나 별도 로고 장면을 만들지 않습니다. ## 5. 설명용 타이포그래피 설명과 한글 화면에는 Pretendard를 사용합니다. 원본 로고 서체를 특정한 결과가 아니라 한국어 가독성을 위한 별도 선택입니다. | 역할 | 1920×1080 기준 | 굵기 | |---|---|---| | 장면 제목 | 45px | Bold | | 터미널·파일 본문 | 31.5–36px | Regular / Bold | | 하단 핵심 설명 | 34.5px | Bold | | 창 제목·예시 표시 | 24px | Regular | 한 장면은 한 행동과 그 결과를 보여줍니다. 긴 명령은 필요한 부분에 한해 27px까지 줄입니다. 본문을 실제 화면처럼 배열하고, 색으로 강조한 부분에도 원문·수정안·이유를 적습니다. ## 6. 배치와 그래픽 - 16:9, 1920×1080. 좌우 여백 72px, 로고·제품명 위쪽, 핵심 행동 제목 아래에 터미널과 파일 내용을 크게 배치합니다. - 터미널은 어두운 배경, 결과 문서는 흰 배경입니다. 새로운 제품 대시보드나 존재하지 않는 버튼을 만들지 않습니다. - 파란색·남색은 중요 출력·수정안에 사용합니다. 밝은 파랑 `#79C0FF`는 어두운 화면의 가독성용 파생색입니다. - 터미널 색: 배경 `#161B22`, 본문 `#E6EDF3`, 보조 `#A8B3C4`. 창 버튼과 성공 표시는 일반적인 UI 의미색이며 로고에서 추출한 색이 아닙니다. - 원문과 수정본을 나란히 놓거나, 교정교열표를 화면 전체에 표시합니다. 파일명은 실제 출력 규약에 맞춥니다. 자유롭게 정하는 파일명은 예시로 표시합니다. - 재구성 화면과 실제 실행 출력 재생을 구분해 하단에 표시합니다. 가상 자료만 사용하고, 30초가 실제 처리시간이라는 인상을 주지 않습니다. ## 7. 모션 30초, 30fps, 무음·화면 자막. README GIF도 같은 30초 전체를 8fps로 보여줍니다. | 구간 | 역할 | 움직임 | |---|---|---| | 0–7초 | 입력·실행 명령 또는 요청 | 명령 입력, 응답 순서대로 등장 | | 7–14초 | 처리 결과·사용자 조정 | 응답 또는 결과 문서 표시 | | 14–23초 | 핵심 결과 자세히 보기 | 전후 문구 또는 교정표 강조 | | 23–30초 | 받을 파일·다음 행동 | 결과 위치·용도 확인 | 명령 입력은 약 1.1초, 각 출력 줄은 약 0.3초로 등장한 뒤 읽을 시간을 둡니다. 장면 전환은 약 0.22초 페이드입니다. 로고는 움직이지 않으며, 장식 곡선보다 실제 입력과 결과의 변화에 움직임을 사용합니다. ## 8. 적용과 검증 - 공통 토큰: [docs/media/brand-tokens.json](docs/media/brand-tokens.json) - 제품별 내용: [docs/media/intro.json](docs/media/intro.json) - 재생성: `python3 docs/media/render_intro.py` - 산출물: MP4, README GIF, 정지 포스터, 장면별 스토리보드. - 무음으로도 입력·처리·결과와 강점을 이해할 수 있는지 확인합니다. - 1080p 원본과 README 축소 화면에서 로고·한글·범위 안내의 잘림과 겹침을 확인합니다. - 원본 PNG 체크섬, 30초·900프레임, 전체 영상 디코딩, README 링크를 확인합니다. 기능 설명의 근거와 실행 확인 범위는 [영상 문서](docs/media/README.md)에 별도로 남깁니다.