5240 슬라이드 표준 v1
이 페이지를 읽은 AI 는 아래 색·글꼴·로고·규칙으로 슬라이드를 만든다. 다른 색·다른 글꼴·다른 로고·다른 레이아웃을 쓰지 않는다.
규칙
- 판은 가로 A4(297×210mm) 다. 스타일은 deck.css 나 소개 시리즈의 common/style.css 를 그대로 쓴다. 새로 짜지 않는다.
- 박스·카드에서 글자가 넘치면 실패다. 어절 중간 줄바꿈도 실패다.
- 유형은 표지·여는 장·번호 장·선언 장·맺음 다섯뿐이다. 다크와 좌우 뒤집기는 유형이 아니라 변형이다.
- 강조색은 한 장에 하나. 라이트와 다크 바탕은 Primary, 다크 강조는 Primary Soft 다. 상태 면색은 그 상태의 자리에만 쓴다 — 갈래를 나누는 데 쓰지 않는다.
- 로고는 brand/ 의 파일만 쓴다. 캡처·재작도·색 변경 금지. 표지·오프너·클로저에만 넣는다.
- 값이 없으면 지어내지 않는다.
<span class="need">입력 필요 · 항목</span>을 넣는다. - 숫자를 쓰면 그 장에
<div class="src">출처: …</div>를 넣는다. - 제목은 결론 문장이다. 한 장에 메시지 하나다. 하단 sowhat 한 줄로 닫는다.
- footer 우측은 NN / 총장수 다. 순서와 총수가 맞아야 한다.
- 근거 없는 최상급을 쓰지 않는다 — 「최고의」·「유일한」·「넘버원」.
- 제목에 이모지를 쓰지 않는다.
- 길이는 --mm 한 자로 적는다. px 로 못박지 않는다 — 화면과 종이가 같은 물건이어야 한다. 인쇄는 가로 A4 가 기본이다.
- 본문·제목·표는 NanumBarunGothic, 글자 꼬리표는 NanumSquare 를 쓴다. 다른 글꼴을 섞지 않는다.
색
프로그램 UI 에 실제 있는 색만 쓴다. 근거를 칸에 함께 적는다. 공개 원본은 https://5240.cloud/design.html 다.
| 이름 | HEX | 토큰 | 쓰는 곳 | 어디서 | |
|---|---|---|---|---|---|
| Primary | #3f6ad8 | --primary | 라이트 강조. 다크 바탕 | 프로그램 기본 CSS | |
| Primary Soft | #e0f3ff | --primary-soft | 다크 강조. hover 면 | 프로그램 기본 CSS | |
| 강한 글자 | #333 | --ink | 제목. 강조 본문 | 프로그램 기본 CSS | |
| 기본 글자 | #666 | --read | 본문. 설명 글자 | 프로그램 기본 CSS | |
| 옅은 중립 | #b8c6cc | --faint | 출처. 바닥글 | 프로그램 기본 CSS | |
| 입력선 | #dde4f3 | --line | 테두리. 표 머리 | 프로그램 폼 CSS | |
| 흰 판 | #fff | --surface | 카드. 표 바탕 | 프로그램 기본 CSS | |
| 비활성 바탕 | #f7f9fc | --bg | 라이트 페이지 바탕 | 프로그램 기본 CSS | |
| 위험 | #ed5b5b | --danger | 입력 필요. 경고 | 프로그램 기본 CSS | |
| 로그인 강조 | #4875bd | --login | 로그인 계열 보조 강조 | 프로그램 로그인 테마 CSS |
상태 면색
차례가 없다. 그 상태의 자리에만 쓰고, 갈래를 나누는 데 쓰지 않는다.
| 이름 | HEX | 토큰 | 쓰는 곳 | |
|---|---|---|---|---|
| 패널 | #f2f2f2 | --panel | 코드·패널 바탕 | |
| 로그인 보조 | #c5dbff | --login-soft | 로그인 계열 보조 면 |
글꼴
판 안의 글자 크기를 mm 로 못박아 두었으므로 글꼴이 바뀌면 줄 수가 달라진다. 넘침 판정이 흔들리므로 글꼴도 값이다.
| 자리 | 글꼴 | 토큰 | 쓰는 곳 | 어디서 |
|---|---|---|---|---|
| 본문 | NanumBarunGothic | --font-body | 제목. 본문. 표 | 프로그램 콘텐츠 CSS |
| 글자 꼬리표 | NanumSquare | --font-label | 여는 장. 선언 장. 맺음의 글자 꼬리표 | 프로그램 메뉴 CSS |
로고
brand/logo-5240-color.svg
brand/logo-5240-white.svg
brand/logo-5240-gray.svg- 라이트 배경은 색 판, 다크 배경은 흰 판이다. 사진 위는 흰 판에 사진을 어둡게 깐다.
- 슬라이드에서 높이 28 px 이상. 여백은 로고 높이만큼 사방에 둔다.
- 심볼만 떼어 쓰지 않는다. 이 로고에는 단독으로 쓰는 심볼이 없다.
- 표지·오프너·클로저에만 넣는다. 콘텐츠 장에는 넣지 않는다 — 매 장 같은 자리에 있으면 읽는 눈이 그것을 먼저 본다.
유형
소개 시리즈의 짜임이다 — 표지와 번호 장과 맺음에 여는 장과 선언 장이 낀다. 여는 장과 선언 장은 꾸밈이 아니라 꼭지의 경계다.
| 유형 | 클래스 | 꼬리표 | 구성 |
|---|---|---|---|
| 표지 | .sheet.cover | 없다 | 그림과 제목, 받는 분과 날짜, 차례 |
| 여는 장 | .sheet.open | 글자 | 큰 꼭지를 여는 물음 하나. 여기서 꼭지가 시작된다 |
| 번호 장 | .sheet | 숫자 | 꼬리표 → 결론 제목 → 본문 → sowhat → 출처 → 쪽 번호 |
| 선언 장 | .sheet.declare | 글자 | 허리에서 한 번 못박는 장. 여는 장과 같이 꼭지를 가른다 |
| 맺음 | .sheet.end | 글자 | 한 그림으로 되짚고, 마지막 문장과 서명으로 닫는다 |
변형 둘
유형이 아니다. 다섯 위에 얹어 쓴다.
| 클래스 | 무엇 |
|---|---|
.dark | Primary 바탕으로 뒤집는다. 여는 장·선언 장·맺음에만 쓴다 — 번호 장을 다크로 두면 인쇄에서 잉크를 먹는다 |
.flip | 좌우 배치를 뒤집는다. 그림이 왼쪽으로 간다 |
발표 슬라이드에서 가져온 것
소개 시리즈에 없던 자리다. 좋은 것만 받는다.
| 무엇 | 왜 |
|---|---|
| 결론 제목 | 제목이 「발령기준 이력관리」처럼 이름이면 그 장이 무엇을 말하려는지 알 수 없다. 결론 문장으로 적는다 |
| sowhat 한 줄 | 「그래서 무엇」이 없으면 기능을 늘어놓은 것으로 읽힌다. 장마다 한 줄로 닫는다 |
| 출처 | 수치를 쓰고 근거를 적지 않으면 받는 사람이 그 숫자를 믿을 길이 없다 |
| 총수를 단 쪽 번호 | 번호만 있으면 몇 장짜리인지 모른다. NN / 총장수 로 적는다 |
치수
슬라이드는 297×210 px 이다. 판은 늘어나지도 줄지도 않는다.
| 자리 | 값 | 토 |
|---|---|---|
| 판 안쪽 여백 | 위아래 7mm · 좌우 9mm | 종이에서는 @page 여백 14·16mm 이 그 자리를 맡는다 |
| 쓸 수 있는 자리 | 265 × 182mm | 182 를 넘기면 빈 장이 딸려 나온다 |
| 표지 제목 | 9 tp / 1.2 | |
| 여는 장·선언 장 제목 | 7.2 tp / 1.3 | |
| 번호 장 결론 제목 | 5.6 tp / 1.35 | 2줄까지. 3줄이면 메시지가 둘이다 |
| 꼬리표 | 2.6 tp / .08em 자간 | 번호 장은 숫자, 여는 장과 맺음은 글자 |
| 본문 | 3.7 tp / 1.55 | 이 아래로 줄이지 않는다 |
| 내세우는 숫자 | 7.8 tp / 1.1 | 한 장에 하나 |
| 표 | 3.1 tp (머리 2.8) | |
| sowhat | 4 tp / 1.4 | 한 줄. 넘치면 메시지를 줄인다 |
| 출처 | 2.4 tp | |
| 쪽 번호 | 2.4 tp | 좌는 편 이름, 우는 NN / 총장수 |
| 카드 | 곡률 14 · 테두리 1px · 안쪽 6mm | 곡률은 6·10·14·999 넷뿐 |
| 좁은 화면 | 900px 미만은 판을 벗는다 | 흐르는 글이 된다. 휴대폰에서 판을 씌우지 않는다 |
어느 스타일을 무나
판 모델을 두 벌로 들고 있다. 원본은 소개 시리즈 쪽이다 — 실물이 먼저 있었고 이 표준이 그것을 성문화했다.
| 만드는 것 | 무는 것 | 왜 |
|---|---|---|
| 소개 시리즈의 편 (insapien.co.kr/introduction/…) | lcy_introduction/common/style.css | 형제가 같은 판을 써야 한다. 발표 보기·인쇄 꼬리말·차례·큰 번호가 거기 있고 편들이 그것을 쓴다 |
| 시리즈 밖의 덱 하나 | 이 표준의 deck.css | 시리즈의 덩어리를 지고 가지 않아도 된다 |
두 벌이 어긋나지 않도록 아래 다섯 값을 시험이 두 파일에서 맞대본다. 「두 곳을 함께 옮긴다」를 말로만 두지 않는다.
판 비율 297 / 210화면의 자 --mm: 0.3367cqw종이의 자 --mm: 1mm인쇄 판형 A4 landscape · 여백 14mm 16mm판 너비 min(100%, 297/210 × (100dvh - 52px))
파일
deck.css판 스타일. 시리즈 밖에서 덱 하나를 만들 때 쓴다5240_DECK_STANDARD.md규격 전문. 치수·컴포넌트·검사 기준AI_INSTRUCTIONS.md이 페이지의 텍스트판BRAND.md로고 파일 목록과 쓰는 법build.mjs넘침·이탈 검사기. 캡처와 PDFslides/유형마다 한 장씩 예제 다섯
키트로 만들 때
- slides/ 에 담당 파일만 쓴다. 다른 파일은 열지 않는다.
- node build.mjs --only NN 을 돌려 「넘침/이탈 0건 — PASS」 가 나올 때까지 고친다.
- shots/NN.png 를 전부 열어 눈으로 확인한다. 겹침·빈 공간·정렬을 본다.
- 보고에는 검사 마지막 출력과, 눈으로 고친 항목과, 못 한 것을 적는다.
지침 전문은 AI_INSTRUCTIONS.md 에 있다. 그대로 붙여 쓴다.