name: minara-usecase-video description: Make Minara use case / beginner tutorial videos (mobile App or desktop), rebuilding the product UI in HyperFrames code and walking through the real user path step by step. Unlike minara-video (marketing demo, UI redesign allowed), this skill requires a faithful UI: copy, layout, components, and interaction paths all follow the product frontend code and screen recordings. Triggers: "use case 视频", "教程视频", "操作演示", "新手教程", "按 App 界面做一个视频"; also makes covers for these videos ("封面", "cover", "缩略图").

/minara-usecase-video — Minara 사용 사례 튜토리얼 동영상

2026년 10월에 제작된 사례 1(모바일 앱: 질문 하나 → BTC 전략 → 한 번의 탭으로 실행)과 사례 3(데스크톱 Strategy Studio: 한 문장 → Choice Boxes → 백테스트 → 최적화 → 실시간 배포)에서 추출된 지침입니다. 데스크톱 참고 자료: assets/pc-monitor-frame.html 및 assets/helpers-reference.js (헬퍼 함수는 직접 복사하여 사용 가능).

minara-video와의 차이점 (먼저 읽으십시오)

항목	minara-video (마케팅 데모)	minara-usecase-video (이 스킬)
UI	제품을 복사하지 않음; 큰 글씨로 최소한의 재설계	충실히 재현: 프론트엔드 코드의 구성 요소, 크기, 색상, 카피를 그대로 따름
카피	자체 마케팅 카피 작성	버튼/제목/프롬프트는 제품 원본 텍스트를 단어 그대로 사용 (로케일 유지); 문법 오류도 그대로
상호 작용 경로	생략하거나 압축 가능	전체 실제 경로: 모든 클릭, 모달, 체크박스가 코드와 동일한 순서로 존재해야 함
카메라	다양한 카메라 움직임	클릭/타이핑 중에만 눈에 띄게 확대하고 커서를 따라감; 그 외에는 정지; 명확성이 최우선
화면 내 텍스트	주석 텍스트 없음	프레임 내에는 캡션 없음; 시작 부분 3초짜리 타이틀 카드만 예외; 텍스트 오버레이는 별도 버전 (다른 프로젝트 폴더에 있음)
구조	여러 장면을 별도로 렌더링	단일 연속 컴포지션 (화면 녹화처럼)

minara-video에서 상속된 엄격한 규칙: Geist 폰트, 시그니처 이징 minaraSnap = cubic-bezier(0.95,0.03,0,0.98), 전환 ≤0.5초, Math.random() / repeat:-1 사용 금지, 타임라인 paused:true 및 window.__timelines에 등록, 최대 손실률 >20%인 전략은 먼저 운영자에게 문의, 테스트 페이지에는 드래그 가능한 타임라인이 있어야 함. 시작 시 먼저 Skill(hyperframes)을 실행하여 컴포지션 규칙을 로드합니다.

주제 및 데모 자산 (2026-10-15 기준, 운영자가 설정)

주식 전략 우선: 사용 사례는 기본적으로 데모에 주식 / TradFi 상품을 사용합니다 (예: TradFi 30, 개별 미국 주식, 지수). 전략 이름, 자산 풀, 보유 자산, 티커 바는 주식을 선호해야 합니다.
암호화폐는 2차: BTC, ETH와 같은 주요 코인은 나타날 수 있지만, 주요 항목으로 사용해서는 안 됩니다. 동영상에 주식과 암호화폐가 모두 있는 경우, 주식을 먼저 배치하고 더 많은 시간을 할애합니다.
밈 코인 금지: 운영자가 특별히 요청하지 않는 한, DOGE, PEPE, WIF, BONK 등을 프레임, 자산 풀, 티커 바, AI 답변, 예제 프롬프트에 넣지 마십시오. 제품 기본 데이터에 포함된 경우 대체하십시오.
대본 및 스토리보드 작성 시 이 규칙에 따라 자산을 선택합니다. 제품 자료의 예제가 적합하지 않은 경우, 재구축 전에 주식 상품으로 교체하고 교체 사실을 대본에 명시합니다.

진리의 원천 (우선순위에 따라)

프론트엔드 코드 (보기 전에 최신 버전을 가져오고, 대본의 "기반" 섹션에 커밋 날짜를 기록)
- 웹: 제품의 웹 프론트엔드 저장소 (git pull 실행 후)
- 모바일: 제품 모바일 앱 소스 (apps/mobile/src)
  - 카피: locales/en.json (중국어 버전은 해당하는 zh 파일에 있음)
  - 색상/간격: theme/colors.light.ts, theme/tokens.ts
  - 구성 요소: ui/, features/<module>/ (예: features/strategy/strategy-card, run-strategy, running-detail, features/agent/composer)
운영자의 화면 녹화/스크린샷 (use case/ 자산 폴더에 있음): 레이아웃, 계층 구조 및 실제 시각 자료에 사용. ⚠️ 이 자산은 UI 참고 자료일 뿐, 콘텐츠 참고 자료는 아닙니다 — "에이전트가 말하는 것은 무시"; 답변 콘텐츠는 직접 설계합니다.
대본 md: 샷 분석, 대사, 텍스트 오버레이.

코드가 지원하지 않지만 동영상에 표시해야 하는 상호 작용(예: 사례 1 채팅에서 클릭 가능한 전략 카드)은 구축할 수 있지만, 이것은 현재 코드에 아직 없는 계획된 상호 작용임을 운영자에게 명확히 알리고, 가장 가까운 기존 구성 요소에서 재구축합니다 (사례 1은 MarketplaceStrategyCard를 따르고, 실행 탭 후에는 마켓플레이스와 동일한 실행 경로를 따름).

작업 흐름

1. 대본 확인

각 샷을 최신 코드와 대조: 버튼 이름, 페이지 순서, 필수 단계(예: 위험 공개 체크박스, 배포 전 백테스트 통과 필요), 임계값 숫자.
대본 편집 시, 운영자는 보통 "원본 파일을 그냥 덮어쓰세요"라고 말하고, 제안만 원할 때는 "먼저 제안을 주고 대본은 편집하지 마세요"라고 말합니다 — 이 둘을 구분하십시오.
하나의 md에 여러 사례가 포함된 경우 필요에 따라 단일 사례 파일로 분할합니다.

2. 상호 작용 경로에서 스토리보드로 역방향 작업

코드의 실제 경로를 표로 만듭니다: 각 화면의 제목, 구성 요소, 클릭 대상, 다음 화면. 예 (모바일, 전략 실행): Run → Select Wallet → Next → Configuration (Risk Control drawdown cap / auto-update / check risk disclosure) → Run → success page Running (View Details / Notify me) → Running Strategy Details → back → Strategy tab Running
타임라인이 있는 경우, 바로 storyboard.html (템플릿 assets/storyboard-template.html)로 이동한 다음 초 단위 스케줄을 작성하고, 운영자 확인 후에만 코드를 작성합니다.

3. 사양

항목	모바일 앱	데스크톱
캔버스	컴포지션 1080×1920, 내보내기 1440×2560 / 60fps	컴포지션 1920×1080, 내보내기 2560×1440 / 60fps
UI	390pt 너비 앱 화면, 프레임의 90% 로 스케일, 모든 면에 여백, 둥근 모서리 + 1px 테두리	1440×810 웹 페이지를 컴퓨터 모니터에 배치 (어두운 베젤 + 스탠드, 스케일 1.15), 글꼴 크기는 제품 원본 크기보다 10–15% 크게
테마 / 언어	운영자가 설정; 기본값 영어 + 앱 기본 라이트 테마	좌측과 동일
데모 데이터	3–4자리 PnL, 손실률 <20%, 데모 표시	좌측과 동일
오프닝	0–3초 타이틀 카드, 그 다음 워크스루	좌측과 동일

모바일 좌표계: K = 1080*0.9/390, #app 위치 left:54px; top:96px, transform: scale(K). 모든 요소 CSS는 앱 내 pt 좌표로 작성하며, 코드의 크기에서 재구축합니다.

데스크톱 좌표계: K = 1.15, OX = 132, OY = 38 (프레임 내 화면 왼쪽 상단 모서리의 px 위치), 1440×810 pt. 레이아웃: 왼쪽 사이드바 264 / 중앙 열 766 / 오른쪽 Assistant 410, 하단 티커 바 26.

데스크톱은 컴퓨터 모니터를 사용해야 합니다 (2026-10-15 기준, 운영자가 설정): 제품 UI가 더 이상 프레임을 채우지 않고, 컴퓨터 모니터 화면 내부에 위치하며, 모니터 베젤과 스탠드가 그 뒤에 있습니다. assets/pc-monitor-frame.html을 직접 사용하십시오:

구조: #cam > #stand-neck + #stand-base + #monitor > #screen > #app. 모니터 외부 프레임 1684×959.5, left 118 / top 24 위치, 14px 베젤, 26 코너 반경; 화면 1656×931.5, 12 코너 반경; 스탠드는 모니터 아래 중앙에 배치. 배경은 어두운 방사형 그라데이션 유지.
모니터와 스탠드는 모두 #cam 안에 있으므로 확대 시 UI와 함께 스케일 업됨; 커서와 클릭 리플도 #cam 안에 있으며, OX + x*K, OY + y*K로 위치 지정. camTo 공식은 변경되지 않으며, 세 값 K / OX / OY만 교체합니다.
UI가 프레임을 채울 때보다 약 14% 작아졌으므로 (1.333 → 1.15), 와이드 샷에서 텍스트가 약간 작아집니다. 클릭 및 타이핑 중 확대로 이를 보완합니다. 운영자가 와이드 샷 텍스트가 너무 작다고 판단하면 글꼴 크기 사양에 따라 한 단계씩 모두 키우고, 모니터를 제거하지 마십시오.
오프닝 타이틀 카드가 페이드 아웃된 후, 전체 모니터(스탠드 포함)가 1.04×에서 페이드 인됩니다.
모바일은 모니터를 사용하지 않으며, 현재 90% 화면에 둥근 모서리와 테두리를 유지합니다.

글꼴 크기 사양 (데스크톱; 2026-10-15 운영자: "사용자가 휴대폰에서 읽을 수 있도록 UI 전체 글꼴을 약간 키움") — 최종 동영상은 휴대폰에서 시청되므로 다음 크기가 최소값입니다:

요소	pt
페이지 제목 (전략 이름)	21
사이드바 탐색 / 탭 / 툴바 / 버튼 / 서브 탭	16–16.5
Assistant 본문 / 사용자 버블 / Choice Box 옵션 설명	15 / 15 / 14
Choice Box 질문 / 옵션 이름	17.5 / 16
메트릭 카드 레이블 / 값	14 / 22
테이블 / 코드	15 / 14.5 (줄 높이 24)
모달 제목 / 필드 레이블 / 입력, 칩, 버튼	20 / 14.5 / 15.5–16

더 큰 텍스트가 맞지 않으면 작은 텍스트를 제거합니다 (예: 메트릭 카드의 "1,264 Trades" 및 "684W 580L"); 글꼴 크기를 줄이지 마십시오. 데스크톱 동영상에 모바일 화면을 배치할 때는 스케일 1.2, 중앙 정렬을 사용합니다.

오프닝 타이틀 카드 (2026-10-15 사양): 0–3초 어두운 배경, 하나의 큰 중앙 정렬 헤드라인 (Geist 76px / 650, text-wrap: balance), 단어가 하나씩 올라옴 (0.09초 간격); 2.55초에 헤드라인이 확대되며 페이드 아웃; 2.75초에 제품 UI가 1.04×에서 1×로 페이드 인. 헤드라인 카피는 운영자가 제공하며, 예: 사례 3 "Turn your trading idea into a live strategy.". 구현: tl에 워크스루를 작성하고 (paused 아님), 타이틀에 외부 master = gsap.timeline({paused:true})를 사용하고, master.add(tl, 3), master를 등록하고, data-duration과 테스트 페이지의 DUR에 3을 더합니다.

4. 컴포지션 작성

프로젝트를 $VIDEO_WORKSPACE/hyperframes/<slug>/에 배치:

index.html        단일 컴포지션 (data-composition-id="main")
_test.html        테스트 페이지 (assets/test-wrapper.html 복사, DUR 및 타임라인 ID 변경)
assets/           로컬 gsap, CustomEase, Geist woff2, minara-avatar.png (CDN 종속성 없음)
references/       소스 자산의 복사본
audio/            lines.tsv (내레이터 카피), vo-placement.tsv (타이밍)
storyboard.html / _backups/ / output/

핵심 헬퍼는 assets/helpers-reference.js에 있습니다 (사례 1의 실제 코드):

R(el): 이동 애니메이션 전 요소의 앱 내 pt 좌표를 측정하여 MAP에 저장합니다. 이후 모든 클릭은 이 예측 좌표를 사용합니다 — 화면이 프레임 밖으로 밀려난 후 측정하면 390pt 차이가 나서 커서가 빗나갑니다.
camTo(t, px, py, s, d) / camReset: 카메라 확대. s>1일 때, 초점 포인트를 중앙으로 약간 당깁니다 (데스크톱: 720+(px-720)*0.75, y도 동일) — 전체 행이 잘리지 않도록 합니다. 프레임 내부로 위치를 고정하여 바깥이 보이지 않도록 합니다. 변수 curS를 사용하여 현재 스케일을 추적합니다 (camTo가 설정하고 camReset이 1로 되돌림).
curShow / curMove / tap / moveTap: 모바일은 반투명 소프트 터치 포인트를 사용하고, 데스크톱은 흰색 화살표 커서를 사용합니다. 클릭은 누름 + 리플 효과를 포함합니다. curS>1일 때, moveTap은 동시에 클릭 대상으로 camTo를 실행합니다 (지속 시간 = 이동 지속 시간 + 0.15초) — 확대된 상태에서 커서를 자동으로 따라갑니다.
pushIn / pushBack: 수평 페이지 밀기, 0.45초.
splitWords + stream: AI 답변이 단어 단위로 스트리밍됩니다.

5. 카메라 및 페이싱 (운영자의 자체 발언에서 정한 규칙)

"마우스 클릭하거나 타이핑할 때는 해당 동작 영역으로 확대하고, 프레임이 마우스를 따라갈 수 있습니다; 클릭하지 않을 때는 확대할 필요가 없습니다."

"커서가 움직이는 곳을 더 눈에 띄게 확대하세요" (2026-10-15, 기존 ≤1.25 제한을 대체). 데스크톱 스케일:

동작	스케일
타이핑 (입력 상자)	1.7
버튼 / 탭 / 사이드바 클릭	1.6
Assistant 채팅, Choice Box 읽기	1.5
모달 내 연속 동작	1.45, 커서를 따라감
모바일 사례 1은 1.25를 사용했음; 새로운 모바일 동영상도 "눈에 띄게" 해야 함 — 운영자와 스케일을 확인하십시오.

연속 클릭(Choice Box 옵션, 배포 단계 모달)의 경우, 클로즈업 상태를 유지하고 내내 따라가며, 매번 확대했다 축소했다 하지 마십시오.
클릭 후 시청자가 결과를 봐야 하는 경우(탭 전환, By symbol / Fills, 백테스트 결과 표시, 메트릭 업데이트, AI 생성 후 툴바 값 채워짐), 클릭 후 0.5–0.6초 후에 와이드 샷으로 되돌립니다.
확대 시, 모달의 상단 및 하단 가장자리가 프레임에서 잠시 벗어나는 것은 허용되지만, 커서와 클릭 대상은 프레임 내에 있어야 하며 텍스트가 프레임 가장자리에 닿아서는 안 됩니다.
"화려한 카메라 움직임은 필요 없습니다; 각 단계를 명확히 보여주는 것이 주요 목표"; 일반적인 내레이션 속도로 전환하며, 더듬거리지 않습니다.
프레임 내에 캡션을 넣지 않습니다.

6. 충실도 체크리스트 (사례 1의 함정)

타이핑 효과: 문자당 하나의 <span>, tl.set(span,{display:'inline'})으로 하나씩 표시. 매 프레임마다 전체 textContent를 다시 쓰지 마십시오 — 뒤로 탐색 시 잘못된 중간 값이 남습니다 (v2에서는 플레이스홀더 텍스트 위에 추가 "C"가 쌓였음).
입력 상자 줄 바꿈: 설정 중에 문자를 하나씩 표시하여 어떤 문자가 두 줄로 넘어가는지와 높이가 얼마나 증가하는지 측정하고, 그 순간에 그 위에 있는 빠른 질문 카드를 동시에 위로 이동합니다.
레이어링: 빠른 질문 카드는 입력 상자의 흰색 배경 마스크 위에 있어야 함; 상세 페이지는 탭 바를 덮어야 함 (상세 페이지 z-index > tabbar).
클래스 이름 충돌 방지: 텍스트 오버레이 레이어는 hz- 접두사를 사용 (hz-main / hz-note / hz-cta); 실행 패널의 .cta와 한 번 충돌하여 검은색 막대가 생성되었음.
페이지 전환 후 콘텐츠가 상태 표시줄 / 상단 막대 아래로 미끄러져 들어가지 않도록 함; 테이블에 회색 배경이 생기지 않도록 함.
항상 fromTo에 immediateRender:false를 사용 — 그렇지 않으면 탐색 시 첫 번째 프레임이 잘못됨.
프레임 캡처는 다음을 포함해야 함: 모든 클릭 전후, 타이핑 중간, 줄 바꿈 순간, 모든 페이지 전환 후.

데스크톱 추가 사항 (사례 3의 함정)

피해야 할 사항

…

[번역을 위해 잘림]

Minara Use Case 동영상 스킬