9ee3dab378
받은 이미지 11장을 docs/images/ 로 최적화 배치(37.6MB -> 3.3MB: 사진은
JPEG q88, 평면 다이어그램은 PNG-8, 최대폭 1600). 원본은 image/ 에 그대로 둔다.
소개서: 매니페스트(docs/소개서-이미지.json)로 11장을 절에 배치해 HTML 재생성
(4.6MB 단일 파일). 표지 컷은 1장 앞에 before-heading 으로.
경영진 보고 덱(docs/deck/): 14장. 매뉴얼 생성기와 같은 구조 —
deck.json(내용) + build_deck.py(생성기) + clips/(3초 클립). 손으로 쓴 HTML 은
두 번째 수정부터 낡고, 낡은 덱은 회의실에서 틀린 숫자를 띄운다.
클립이 없으면 포스터 스틸로 자동 대체되므로 지금 상태로도 완성본이다.
비교 슬라이드는 클립이 하나도 없으면 이미 좌우 비교인 09 스틸 1장으로
바뀐다 — 좌우 패널에 쪼개 넣으면 같은 비교가 두 겹이 된다.
모든 클립·스틸에 '재현' 배지를 템플릿에 박았다. 이 영상들은 제품 동작
녹화가 아니라 연출된 재현이고, 실제 동작처럼 보여주면 허위 시연이 된다.
배지 문구는 매체를 따른다(영상/이미지) — 스틸에 "재현 영상"은 그 자체가
작은 거짓말이다. 실화면 캡처 8장에는 배지가 붙지 않는다.
실렌더로 확인하며 잡은 결함:
- 마지막 슬라이드가 백지였다. :nth-child(even) 이 section.closing 보다
명시도가 높아 네이비 배경을 덮고, 흰 글자가 흰 배경에 얹혔다(대비 1:1).
- 한국어 제목이 어절 중간에서 끊겼다("설명할 수 있습/니다") — CJK 기본
줄바꿈이 글자 단위다. word-break:keep-all.
- 슬라이드 이동이 전혀 동작하지 않았다. scroll-snap-type:y mandatory 인
컨테이너에서 behavior:'smooth' 가 취소되고 원위치로 스냅된다
(측정: smooth->0, auto->905). 즉시 전환으로 변경 — 덱에서는 컷 전환이
오히려 슬라이드답다. 키보드가 항상 잡히는 것은 아니라 이전/다음 버튼도 추가.
- 도판이 커서 하단 주석이 화면 밖으로 밀렸다(max-height 하향).
- 표지 베일이 무거워 경광등 빨강이 죽었다 — 이 제품의 상징색이라 살렸다.
- 4번과 5번이 같은 도판을 썼다(포스터 교체).
접근성 게이트(측정): 대비 실패 0건. figcaption 4.35:1 미달로 --ink-3 을
#5C6474 로, 네이비 위 슬라이드 번호 2.0:1 을 #8FB2E2 로 교정. 레일 점은
7x7 이라 발표 중 못 맞춘다 — 점은 그대로 두고 히트영역 24x24(WCAG 2.5.8),
이전/다음 버튼 46x46.
영상 브리프(docs/영상-브리프.md): 3초 클립 6종. 스틸이 못 하는 것만 발주
했고, 클립마다 0.0~3.0초 타임라인·프레임 안에 반드시 있어야 할 것·피할 것을
적었다. 대시보드 녹화는 제외 — 실화면 캡처가 이미 있고 그건 진짜다.
생성물(경영진-보고.html)과 clips/ 는 gitignore — 사용설명서.html 과 같은 이유.
196 lines
8 KiB
Markdown
196 lines
8 KiB
Markdown
# 경영진 보고용 3초 영상 브리프
|
||
|
||
> 대상: `docs/deck/` 경영진 보고 덱에 들어갈 짧은 클립.
|
||
> 이미 확보된 스틸 11장(`docs/images/`)은 그대로 씁니다 — 영상은 **스틸이 못 하는 것**만 발주합니다.
|
||
|
||
---
|
||
|
||
## 0. 먼저 읽을 것
|
||
|
||
### 0-1. ⚠ 모든 클립은 "재현 영상"입니다
|
||
|
||
이 클립들은 실제 제품이 동작하는 화면 녹화가 아니라 **연출된 재현**입니다.
|
||
경영진 보고에서 이를 실제 동작 영상처럼 보여주면 그건 허위 시연입니다.
|
||
|
||
**덱 템플릿이 모든 클립에 `재현` 배지를 자동으로 붙이도록 만들었습니다.** 지워지지 않게
|
||
코드에 박아 뒀습니다 — 발표자가 깜빡할 수 있는 종류의 것이라서요.
|
||
|
||
실제 제품 화면이 필요한 자리에는 **실화면 캡처 8장**(`server/deploy/manual/shots/`)이 이미
|
||
있습니다. 그건 진짜입니다. 재현 클립과 실화면을 덱에서 시각적으로 구분해 두었습니다.
|
||
|
||
### 0-2. 스틸로 충분한 것은 발주하지 않았습니다
|
||
|
||
판정 조건·구성도·타임라인은 정지 이미지가 더 잘 전달합니다(읽을 시간이 필요하므로).
|
||
아래 6종은 **움직임이 있어야만 전달되는 것**만 골랐습니다.
|
||
|
||
### 0-3. 공통 사양
|
||
|
||
| 항목 | 값 |
|
||
|---|---|
|
||
| 길이 | **3초** (±0.3초) |
|
||
| 컷 | **단일 컷, 편집 없음.** 카메라 고정 — CCTV 시점이어야 설득력이 있습니다 |
|
||
| 화면비 | 16:9, **1920×1080 이상** |
|
||
| 형식 | `.mp4` (H.264 + yuv420p). 브라우저 재생용 |
|
||
| 소리 | **없음.** 회의실에서 음소거로 재생합니다 |
|
||
| 재생 | 1회 재생 후 **마지막 프레임 정지**. 넘어지는 장면이 무한 반복되면 보기 불편합니다 |
|
||
| 얼굴 | **식별 불가**. 뒷모습·측면·헬멧·바닥을 향한 얼굴 |
|
||
| 조명 | 실제 공장 조도. 지나치게 영화적인 조명은 재현 티가 나서 오히려 신뢰를 깎습니다 |
|
||
| 색 | 스틸 11장과 같은 톤 — 네이비 작업복, 흰 헬멧, 회색 콘크리트 바닥, 노란 안전선 |
|
||
|
||
### 0-4. 카메라 시점을 고정하세요
|
||
|
||
**모든 클립이 같은 공장, 같은 높이(약 3~4m), 같은 앵글이면 가장 좋습니다.**
|
||
클립마다 장소가 바뀌면 "여러 곳에서 찍은 홍보 영상"처럼 보이고, 한 곳에서 이어지면
|
||
**"이 시스템이 이 공장을 보고 있다"** 로 읽힙니다. 후자가 훨씬 강합니다.
|
||
|
||
가능하면 `08-넘어짐-감지-시퀀스.png` 의 공장을 그대로 쓰세요.
|
||
|
||
---
|
||
|
||
## A. 발주 목록
|
||
|
||
### A-1. `v01-넘어짐-경광등.mp4` ★P0 — 이 덱에서 가장 중요한 3초
|
||
|
||
**이 클립이 말해야 하는 것**
|
||
|
||
> 사람이 쓰러지고, **경광등이 켜진다.** 그 사이에 아무도 없다.
|
||
|
||
**왜 필요한가** — 이 제품의 전부입니다. 감지가 대응으로 이어지는 순간을 정지 이미지로는
|
||
보여줄 수 없습니다. 경영진이 기억할 3초가 있다면 이것입니다.
|
||
|
||
**타임라인**
|
||
|
||
| 시각 | 화면 |
|
||
|---|---|
|
||
| 0.0s | 작업자가 기계 앞에 서 있음. 화면 한쪽 상단에 **꺼진 경광등**이 보임 |
|
||
| 0.5s | 무너지기 시작 |
|
||
| 1.2s | 바닥에 쓰러짐. 헬멧이 굴러감 |
|
||
| 2.0s | **경광등 점등** — 붉은 빛이 주변 바닥·기계에 반사 |
|
||
| 3.0s | 경광등 켜진 채 정지 |
|
||
|
||
**꼭** — **경광등이 처음부터 프레임 안에 있어야 합니다.** 꺼진 상태에서 켜지는 것이 보여야
|
||
하고, 컷을 나눠 경광등을 따로 보여주면 효과가 절반이 됩니다.
|
||
|
||
**피할 것** — 슬로모션, 극적인 음악용 편집, 카메라 흔들림(핸드헬드), 유혈.
|
||
|
||
---
|
||
|
||
### A-2. `v02-앉기-정상.mp4` ★P0 — 반드시 A-3과 한 쌍
|
||
|
||
**한 문장**
|
||
|
||
> 쭈그려 앉아 작업해도 **아무 일도 일어나지 않는다.**
|
||
|
||
**타임라인** — 작업자가 자연스럽게 쭈그려 앉아 바닥의 부품을 만짐. 3초 내내 경광등 꺼진 채.
|
||
|
||
**꼭** — **A-1과 완전히 같은 앵글·같은 장소.** 나란히 틀어서 "차이는 자세뿐"이 보여야 합니다.
|
||
경광등이 프레임 안에 있고 **끝까지 꺼져 있어야** 합니다.
|
||
|
||
**왜 필요한가** — "앉으면 오탐 나는 거 아니냐"가 도입 검토의 첫 질문입니다. 말로 답하는 것과
|
||
3초를 보여주는 것은 설득력이 다릅니다.
|
||
|
||
---
|
||
|
||
### A-3. `v03-허리굽힘-정상.mp4` ★P1
|
||
|
||
**한 문장**
|
||
|
||
> 허리를 굽혀 물건을 들어도 울리지 않는다.
|
||
|
||
A-2와 같은 목적, 다른 자세. 여유가 없으면 A-2만으로도 성립합니다.
|
||
|
||
---
|
||
|
||
### A-4. `v04-구역진입.mp4` ★P1
|
||
|
||
**한 문장**
|
||
|
||
> **발이 선을 넘는 순간** 판정된다.
|
||
|
||
**타임라인**
|
||
|
||
| 시각 | 화면 |
|
||
|---|---|
|
||
| 0.0s | 바닥에 노란 안전선. 작업자가 선 밖에서 걸어옴 |
|
||
| 1.5s | **발이 선을 넘음** |
|
||
| 2.5s | 경광등 점등 (또는 주의색) |
|
||
| 3.0s | 정지 |
|
||
|
||
**꼭** — **발과 선이 함께 프레임 안에** 있어야 합니다. 상반신만 잡으면 이 클립의 의미가 사라집니다.
|
||
카메라를 조금 낮추거나 각도를 눕혀 바닥이 넓게 보이게.
|
||
|
||
---
|
||
|
||
### A-5. `v05-카메라-건드림.mp4` ★P1 — 차별점
|
||
|
||
**한 문장**
|
||
|
||
> 카메라를 건드리면 **시스템이 그 사실을 스스로 신고한다.**
|
||
|
||
**타임라인**
|
||
|
||
| 시각 | 화면 |
|
||
|---|---|
|
||
| 0.0s | 정상적인 공장 화면 |
|
||
| 1.0s | 화면 전체가 **한 번 흔들리며 각도가 틀어짐** (누군가 청소하다 스친 것처럼) |
|
||
| 1.5s | 틀어진 채로 안정 — **화면은 여전히 멀쩡해 보임** |
|
||
| 3.0s | 정지 |
|
||
|
||
**꼭** — 카메라 **자체 시점**입니다(1인칭). 삼각대를 밖에서 찍는 게 아니라, 화면이 흔들려야 합니다.
|
||
틀어진 뒤에도 영상이 정상적으로 나오는 것이 핵심 — "고장난 게 아니라서 아무도 모른다"가
|
||
이 제품이 잡는 조용한 실패입니다.
|
||
|
||
**피할 것** — 화면이 까매지거나 노이즈가 끼면 안 됩니다. 그건 누구나 아는 고장입니다.
|
||
|
||
---
|
||
|
||
### A-6. `v06-2인1조.mp4` ★P2
|
||
|
||
**한 문장**
|
||
|
||
> 한 명이 나가면 **혼자 남은 것**이 판정된다.
|
||
|
||
**타임라인** — 0.0s 두 사람이 함께 작업 → 1.5s 한 명이 프레임 밖으로 걸어 나감 →
|
||
3.0s 남은 한 명 혼자. (실제로는 30초 지속 후 이벤트이므로 클립에 경광등은 켜지 **않습니다.**)
|
||
|
||
**꼭** — 경광등을 켜지 마세요. 30초 규칙이라 즉시 울리지 않습니다. 덱의 자막이 설명합니다.
|
||
|
||
---
|
||
|
||
## B. 우선순위
|
||
|
||
| | 파일 | 없으면 안 되는가 |
|
||
|---|---|---|
|
||
| **P0** | `v01-넘어짐-경광등.mp4` | **덱의 핵심.** 이것만 있어도 보고가 됩니다 |
|
||
| **P0** | `v02-앉기-정상.mp4` | v01과 쌍. 단독으로는 의미 없음 |
|
||
| P1 | `v04-구역진입.mp4` | 구역 기능 설명이 크게 살아납니다 |
|
||
| P1 | `v05-카메라-건드림.mp4` | 차별점 슬라이드용 |
|
||
| P1 | `v03-허리굽힘-정상.mp4` | v02의 보강 |
|
||
| P2 | `v06-2인1조.mp4` | 있으면 좋음 |
|
||
|
||
**P0 2개만 있어도 덱은 성립합니다.** 나머지 자리는 스틸 이미지로 자동 대체됩니다.
|
||
|
||
---
|
||
|
||
## C. 전달 방법
|
||
|
||
`docs/deck/clips/` 에 위 파일명 그대로 넣어주십시오.
|
||
|
||
덱 생성기(`docs/deck/build_deck.py`)가 **파일이 있으면 영상을, 없으면 해당 스틸 이미지를**
|
||
자동으로 넣습니다. 그래서 지금 P0 2개만 먼저 주셔도 되고, 나중에 하나씩 추가해도
|
||
생성기만 다시 돌리면 반영됩니다.
|
||
|
||
```
|
||
python docs/deck/build_deck.py
|
||
```
|
||
|
||
---
|
||
|
||
## D. 넣지 않기로 한 것
|
||
|
||
| 제외 | 이유 |
|
||
|---|---|
|
||
| 대시보드 화면 녹화 | **실화면 캡처 8장이 이미 있고 그건 진짜입니다.** 재현 영상으로 대체하면 진짜를 가짜로 바꾸는 셈 |
|
||
| 골격(스켈레톤) 오버레이 애니메이션 | 작업자를 추적한다는 인상을 키움 — 스틸 브리프와 같은 이유 |
|
||
| 드론·타임랩스·기업 홍보 톤 | 이건 안전 설비 보고이지 브랜드 필름이 아닙니다. 화려할수록 "실제로 되는 건가"라는 의심을 삽니다 |
|
||
| 3초를 넘는 서사형 영상 | 경영진 보고에서 한 장면에 쓸 수 있는 시간은 3초입니다 |
|