Real Ui Design

---
name: real-ui-design
description: 유튜브 영상 화면을 '원본 장면 흐림 배경 + 디테일한 실사 기기(휴대폰·앱 창·브라우저) + 앞 UI 카드·알림'의 세 층으로 만드는 디자인 방식과 realkit 사용법. 영상 클립·오프닝 장면을 만들 때, 사용자가 "실사 UI", "원본 흐림 배경", "휴대폰 화면처럼", "앱 알림 뜨는 화면", "장면 HTML 만들어" 같은 말을 하거나 영상 클립·오프닝 화면을 만들 때 사용한다. 이 스킬은 화면 모양만 정한다 — 대본은 youtube-script 스킬, 검수는 tools/qa.py를 따른다(아이콘 세트·썸네일 스킬은 전체 키트).
---

# 실사 UI 디자인

장면 하나 = 세 층. 실제 소스가 화면의 주인공이고, UI는 그것을 "실제 휴대폰·앱에서 일어나는 일"처럼 보이게 감싼다. 원 제작자가 여러 안(보라·코랄 그라데이션, 게임 HUD, 클립아트)을 비교한 끝에 고른 방식이고, 그 뒤 모든 영상을 이 방식 하나로 만들었다.

채널 값(무료 키트 기본): 스타일 실사 UI, 글꼴 하다 산스, 강조색 `#0a84ff`. 바꾸고 싶으면 memory 규칙으로 남긴다(처음 세팅 도구·아이콘 세트는 전체 키트).

키트: `tools/realkit/` — `base.css`(휴대폰·알림·카드·창·플레이어·스포트라이트·로고 배지 뼈대), `theme-real.css`(색·재질 변수), `motion.css`(움직임 키프레임), `realkit.js`(시간 제어 `RK.seek`), `ui-icons.js`(앱 화면 속 작은 UI 기호), `realkit.py`(합성·렌더 도구). 글꼴은 `python tools/get_fonts.py`로 받는다(없으면 대체 글꼴로 그려진다).

## 1. 세 층

1. **뒤: 원본 장면 흐림 배경** — 그 장면의 실제 소스(원본 영상 구간·녹화)를 화면 가득(cover) 깔고 흐림(1080p 기준 반지름 16~18px, realkit 960×540 시퀀스에선 `blur=8`쯤), 밝기 0.70~0.78, 가장자리 어두운 비네트. 흐림은 CSS blur가 아니라 **미리 구워**(realkit `seq`·`still`) 가장자리 번짐을 막는다. 영상이면 아주 느린 밀어 넣기(`data-anim="push"`). 장면이 바뀌면 배경 원본도 그 장면의 것으로 바꾼다.
2. **가운데: 실사 기기** — 얇은 베젤·다이내믹 아일랜드·상태 표시줄(9:41·신호·와이파이·배터리)을 갖춘 휴대폰, 또는 앱 창·브라우저 창. **화면 안은 실제 소스**(원본을 세로로 잘라 실제 재생, 실제 녹화)이지 그린 그림이 아니다. 정지된 검은 화면 금지.
3. **앞: 정보 카드·알림** — iOS식 밝은 반투명 알림 배너(앱 아이콘 + 제목 + 한 줄 내용 + 시간)가 기기 밖으로 떠오르고, 프로필·매출·통계는 어두운 유리 카드.

## 2. 크기·배치 (휴대폰 시청자 기준)

- **창 틀은 꼭 필요할 때만**: "인터넷에서 이 페이지를 연다"가 중요한 장면(검색 결과·대시보드·요금 페이지·메일함)만 브라우저 창에 넣는다. 쓸 때도 **세로 92~95%(약 1000px)**까지 키우고 페이지는 필요한 부분으로 확대해 글자 36px 이상. 휴대폰으로 보는데 화면 속 작은 창을 또 보면 안 읽힌다.
- 포스터·사진·영상·이미지 같은 일반 소스는 **창 없이 화면 꽉 채움**(필요하면 흐림 배경 위 꽉 차게). 창 안에 또 작은 창 ✕. 세로로 긴 페이지는 창에 넣으면 잘리니 전체 화면으로 위 → 아래 훑는다.
- 주인공 요소 하나를 화면 60~70% 크기로 가운데에. 아이콘은 남은 빈 공간 가운데에 크게(가장자리·창 모서리에 붙이지 않음).
- 모든 요소는 1920×1080 안 사방 40px 이상 여백, 창에 얹는 카드는 그 창 경계 안(또는 창과 겹치지 않는 빈 공간).
- **브랜드 심볼 배지**: 브랜드 이름을 말하는 동안 왼쪽 위에 그 브랜드의 심볼 마크(흰 둥근 판, 창과 겹치지 않게). 여러 서비스를 묶어 말하면 실제 심볼 로고들을 가운데에 나란히.
- **짤(GIF)**: 실제 소스가 없는 장면에 한 개, 가운데 무테, 화면 세로 55~60%. 성과 숫자 위에 올리지 않는다. 채널 캐릭터와 같은 순간에 나오지 않게.

## 3. 색·재질 (`theme-real.css` 변수로만 바꾼다)

- 바탕 `#0d0d0f`, 글자 흰색 / 72% / 50%.
- 강조(누르는 것·링크·잠금) 기본 파랑 `#0a84ff` — 채널 값 `design.accent`가 있으면 그 색으로 변수를 바꾼다. **돈은 초록 `#30d158`**, 좋아요 빨강 `#ff3040`은 작게만.
- 어두운 유리 카드: `rgba(22,22,26,.56)` + `backdrop-filter: blur(28px) saturate(150%)` + 테두리 `rgba(255,255,255,.16)` + 그림자.
- 알림 배너: `rgba(242,242,247,.80)` + `blur(30px) saturate(180%)`, 글자 `#111113`/`#3c3c43`, 아이콘 모서리 20px.
- 매출 같은 핵심 숫자는 크게(120px 안팎) 초록, 아래 작은 설명 한 줄 — 단 **돈·성과 증거의 주인공은 실제 화면 확대**이고, 숫자 카드는 그 옆 보조로만(다시 그린 금액 카드가 주인공이면 "생성형 느낌").
- **대비**: 요소와 배경이 비슷한 색이면(어두운 흐림 배경 위 어두운 로고) 밝은 받침판·외곽선·빛 번짐·스포트라이트로 띄운다. 어두운 로고는 흰 바탕 타일에.

## 4. 하지 않는 것

- 보라·코랄·네온 그라데이션 배경, 클립아트 동전·하트 더미, 장난감 스티커, 게임 HUD(원 제작자가 비교 후 거절).
- 회색 줄로 대충 그린 가짜 알림·내용 없는 자리 표시 카드.
- **지어낸 숫자·댓글·후기.** 알림·카드 속 숫자와 문구는 원본·녹화에서 확인한 값만(예: "주문 23건 · 건당 $12"). 확인 못 한 값은 넣지 않는다. 시안용 임시 문구는 최종 영상 전에 실제 값으로 바꾼다.
- 상표 그대로 베끼기(실제 앱 로고·고유 아이콘으로 앱 UI를 흉내). 'OO풍' 자체 UI로 만들고 앱 이름은 쓰지 않거나 일반 단어로. 브랜드를 **말하는** 장면의 심볼 로고 배지(출처 표시)는 위 2절대로 쓴다.
- '예시'·'재연'·'광고' 칩. 실사형 AI 생성 장면은 업로드 설정의 AI 합성 공개로 표시한다.
- 답 먼저 보여 주기: 제목·오프닝이 숨긴 답은 잠금 화면 + 큰 물음표로 가린다.
- 글자 위에 테두리 박스 겹치기 — 강조는 나머지를 어둡게 하는 스포트라이트·형광펜 배경으로.

## 5. 아이콘

- 실제 소스가 없을 때 쓰는 아이콘은 직접 만든 입체 아이콘을 쓴다(셀 셰이딩 3D 아이콘 세트는 전체 키트). 그 대사 내용에 맞는 것이 없으면 같은 규격으로 새로 만든다. 평면 이모지·클립아트 ✕, 같은 아이콘 돌려 쓰기 ✕.
- `ui-icons.js`는 앱 화면 속 작은 UI 기호(하트·검색·재생 등)에만 쓴다.

## 6. 글자

- `design.font` 하나만(기본 하다 산스: Black 900 / ExtraBold 800 / Bold 700 / SemiBold 600 / Medium 500). 바꾸려면 `base.css`의 `@font-face`와 realkit 글꼴 검사를 함께 바꾼다.
- **1080p 기준 가장 작은 글자도 28px 이상**(휴대폰 시청 가독성), 창 안 페이지 글자는 36px 이상. realkit이 28px 미만·다른 글꼴·대체 글꼴을 경고한다.
- 글자는 실제 앱 문구(짧게)·숫자·고유명사·캡처 원문만. 설명용 라벨('걸린 시간'·'광고 단가')도 아이콘·로고·움직임으로 바꾼다. 긴 문장은 의미 단위로 줄바꿈(줄바꿈 위치를 직접 지정).
- 번역 말풍선·카드 문구는 쉬운 일상 말('몫' ✕ → '내가 받는 돈'). 영어 원문 캡처 뒤엔 바로 한글 번역 카드.
- 실측 값은 결과만("23시간"). 시작·끝 시각 ✕.
- 출처 칩: 원본이 들어간 곳 근처에 작게 "채널 · YouTube"·"발행처 · 날짜"(빨간 재생 아이콘 + 흰 글자, 어두운 반투명 바탕). 방송 자막·로고를 가리지 않게(전체 화면 방송 위면 위쪽으로).

## 7. 움직임

- 알림: 위에서 미끄러져 내려오며 살짝 튕김(0.3~0.4초), 여러 개면 부채꼴로 쌓임, 등장마다 `noti` 효과음.
- 결제 알림 → 매출 카드: 숫자 세기(0.8~1.2초, `data-count`) + 작은 상승 그래프, 등장 때 `pay` 효과음.
- 탭: 손가락 커서가 눌림 + 퍼지는 파란 원, 누른 뒤 화면 전환은 흐림 사이로 녹아들기. `tap` 효과음. 클릭 대상 스포트라이트는 대사 시점에 정확히, 화면이 바뀌면 바로 푼다.
- **말하는 동작을 보여 준다**: '검색'이면 검색창에 실제 키워드가 한 글자씩 타이핑되고 결과가 뜨는 움직임. 아이콘을 늘어놓기보다 동작이 먼저.
- **결과 몽타주**: '자동화'·'영상 하나 만드는' 류 대사엔 실제 작업 녹화를 타임랩스처럼 빨리 넘기거나 실제 결과 클립을 빠르게 이어 붙인다.
- 같은 실제 화면을 5초 넘게 그대로 두지 않는다 — 스크롤·확대 이동·형광펜 순서로 계속 움직인다. 정지 캡처도 천천히 훑기·줌으로.
- 강조 링·박스는 스크롤되는 녹화 위에 고정해 두지 않는다(녹화가 흘러가 빗나감) — 같이 움직이거나 끈다.
- 기기 화면 안 원본은 실제로 재생한다. 원본 영상 소리는 쓰지 않는다(우리 대사만).
- 실제 녹화(데스크톱 앱 등)는 기기 대신 실사 창 프레임 안에 넣어도 된다(창 크기는 2절).
- 움직임은 개별 속성(`translate`·`scale`·`opacity`)만. 잠깐 커지는 등장(pop·zin) 중엔 글자가 28px보다 작아질 수 있으니 점검은 움직임이 끝난 시각으로.

## 8. 만드는 순서

1. 장면마다 쓸 실제 소스를 고른다 — 배경용, 기기 화면용, 카드에 들어갈 확인값. 움직이는 소스(녹화·영상 구간)를 먼저 찾는다.
2. 소스 준비(클립 빌더 `videos/<slug>/build_<clip>.py` 안에서):
   ```python
   import sys; sys.path.insert(0, 'tools/realkit'); import realkit as rk   # 키트 루트에서 실행 기준
   V = rk.Voice('videos/<slug>/renders/voice-v1/voices.json')            # 장면 길이 = 음성 + 0.22초
   S = 'videos/<slug>/clips/v1/src'
   rk.seq(f'{S}/news.mp4', f'{S}/s1_bg', t0=0.6, dur=V.dur('v1-s1'), size=(960, 540), blur=8, bright=.76)      # 흐림 배경
   rk.seq(f'{S}/news.mp4', f'{S}/s1_screen', t0=0.6, dur=V.dur('v1-s1'), crop=(1298, 0, 622, 1080), size=(476, 984))  # 휴대폰 화면
   rk.seq(f'{S}/rec.mp4', f'{S}/s2_rec', dur=V.dur('v1-s2'), size=(1280, 720), boxes=[(578, 455, 772, 78, 26)])  # 원본 좌표 상자를 흐림(개인 정보·숨길 답)
   rk.still(f'{S}/page.png', f'{S}/bg.jpg', size=(960, 540), blur=9, bright=.6)                            # 그림 한 장
   ```
3. 장면 HTML `videos/<slug>/clips/v1/<장면>.html` — `tools/realkit/`의 `base.css`·`theme-real.css`·`motion.css`·`ui-icons.js`·`realkit.js`를 상대 경로(`../../../../tools/realkit/…`)로 링크.
   - `<img data-seq="src/s1_bg" data-t0="ai">` : 신호 시각에 0번 프레임부터 30fps 재생.
   - `data-anim="drop@like, out@and+0.05"` : `이름[:길이[:fill]]@시각`. 시각은 초 또는 신호 이름±초.
   - `<span data-count="276" data-ct="week+0.2" data-ct-end="rev+0.75" data-dec="2" data-pre="$">` : 숫자 세기.
   - 브라우저에서 바로 보기: `<장면>.html?t=3.5`(정지), `?play=1`(실시간).
4. 정지 시안 ✋: `python tools/realkit/realkit.py still videos/<slug>/clips/v1/<장면>.html 3.5 videos/<slug>/renders/v1-still-1.png`. 새 영상의 첫 시안은 사용자 확인을 받는다.
5. 신호·효과음·렌더(같은 빌더 안):
   ```python
   cues = {'ai': V.T('v1-s1', 'AI로'), 'like': V.T('v1-s1', '인플루언서로')}   # 대사 단어가 시작하는 시각
   shots = [rk.Shot('videos/<slug>/clips/v1/s1.html', ['v1-s1'], cues, seqs=['src/s1_bg', 'src/s1_screen'],
                    sfx=[{'t': 1.3, 'kind': 'noti'}], check_at=[3.9])]           # 장면 순서 = voices.json 순서
   rk.build(V, shots, 'videos/<slug>/renders/v1-v1.mp4', 'videos/<slug>/renders/v1-v1-job')   # 병렬 렌더 → 음성+효과음 → 끝까지 디코딩
   rk.preview('videos/<slug>/renders/v1-v1.mp4', 'videos/<slug>/renders/v1-v1-preview.mp4')    # 휴대폰 확인용 480p
   ```
   효과음은 파일 없이 합성된다: `noti`·`pay`·`tap`·`click`·`pop`·`whoosh`·`tick`·`thud`·`rise`·`swish`·`stamp`·`done`. 출력은 1920×1080 30fps H.264 + AAC, -16 LUFS.
6. 점검: `python tools/realkit/realkit.py sheet videos/<slug>/renders/v1-v1.mp4 videos/<slug>/renders/v1-v1-sheet.jpg 1` — 1초 간격 시트로 겹침·잘림(사방 40px 여백)·대비·답 노출·지어낸 값·강조 위치를 확인하고, `check_at` 경고(28px·글꼴·없는 신호)를 0으로 만든다.

## 9. 다른 규칙과의 관계

소스 우선순위(원본 영상 1순위·움직이는 소스 먼저), 0~3초 실제 소스 중 가장 센 장면, 심볼 로고, 답 숨기기, 화면 글자 최소화, 같은 소스 반복 금지, 가림 기준, 검수는 `tools/qa.py`(docs/04)를 따른다. 이 스킬은 **화면 모양만** 정한다. 사용자가 다른 디자인을 원하면 같은 두 장면(0~3초·반전)으로 정지 시안 3안을 만들어 비교 시트(`rk.grid`)로 보여 주고 고르게 한 뒤, 고른 방향을 `design.style`과 memory 규칙으로 남긴다.