L👀K
npm version
Node.js
단 하나의 명령어로, 전문적인 제품 데모 비디오를 만드세요.
어떤 웹사이트든 AI가 생성한 음성 해설을 통해 세련된 데모 영상으로 변환할 수 있습니다. 편집이 필요 없습니다.
<p align="center">
<img src="https://raw.githubusercontent.com/nirholas/LooK/HEAD/docs/assets/logo.svg" alt="LooK" width="128">
<br>
<em>아름다운 제품 데모를 자동으로 생성하세요</em>
</p>
npx look-demo quick https://your-app.com
그게 전부입니다. 몇 분 만에 전문적인 데모 비디오를 얻을 수 있습니다.
📚 문서화 (Documentation)
기능 (What It Does)
- 부드러운 커서 애니메이션으로 사이트를 녹화합니다.
- GPT-4 Vision을 사용하여 UI를 분석합니다.
- 설득력 있는 음성 해설 스크립트를 작성합니다.
- 자연스러운 AI 목소리로 나레이션합니다.
- YouTube, Twitter 등에서 사용할 수 있도록 세련된 비디오로 내보냅니다 (Export).
설치 (Installation)
필수 요구 사항:
- Node.js 18 이상
- FFmpeg:
brew install ffmpeg (Mac) 또는 apt install ffmpeg (Linux)
- OpenAI API 키:
export OPENAI_API_KEY=sk-...
빠른 시작 (Quick Start)
가장 빠른 방법 (권장)
look quick https://your-app.com
이 명령어는 스마트 기본 설정을 사용하여 훌륭한 데모를 자동으로 생성합니다.
전체 제어 (Full Control)
look demo https://your-app.com \
--output demo.mp4 \
--duration 30 \
...
미리 보기만 하기 (녹화 없음) (Just Preview)
look demo https://your-app.com --dry-run
녹화하기 전에 AI 분석 및 스크립트를 확인해 보세요.
다중 페이지 워크스루 (Multi-Page Walkthrough)
AI가 사이트 전체를 탐색하도록 하고 싶으신가요? 다음 워크스루 명령어를 사용하세요:
look walkthrough https://your-app.com --max-pages 5
이 기능은 다음을 수행합니다:
- 사이트의 모든 페이지를 발견(Discover)합니다.
- 데모에 가장 중요한 페이지(기능, 가격 책정 등)를 우선순위화(Prioritize)합니다.
- 해당 페이지들을 지능적으로 탐색(Navigate)합니다.
- 모든 페이지에 걸쳐 일관된 내러티브를 생성(Generate)합니다.
look walkthrough https://your-app.com --dry-run
...
주요 기능 (Features)
- 🎬 스마트 줌(Smart Zoom) - 카메라가 부드럽고 전문적인 움직임으로 커서를 따라갑니다.
- 🖱️ 커서 효과(Cursor Effects) - 클릭 리플 애니메이션이 적용된 아름다운 커서.
- 🤖 AI 비전(AI Vision) - GPT-4V가 사용자 인터페이스(UI)를 이해하고 스크립트를 작성합니다.
- 🗣️ AI 음성(AI Voice) - OpenAI TTS를 사용한 자연스러운 보이스오버.
- 📹 60fps 녹화 - 매우 부드러운 브라우저 캡처.
- 🎨 프로 폴리시(Pro Polish) - 색상 보정(Color grading), 비네팅(vignette), 모션 블러(motion blur).
- 📱 다중 플랫폼(Multi-Platform) - YouTube, Twitter, Instagram, TikTok용 내보내기.
- 🗺️ 사이트 탐색기(Site Explorer) - AI가 여러 페이지를 자동으로 탐색합니다.
- 🖥️ 웹 에디터(Web Editor) - 엔터프라이즈급 시각 편집 인터페이스.
- 📋 템플릿(Templates) - 일반적인 사용 사례를 위한 사전 구축된 구성.
엔터프라이즈 기능 (Enterprise Features)
- 🧠 지능형 오케스트레이션(Intelligent Orchestration) - 품질 점수 및 자동 최적화를 갖춘 5단계 AI 파이프라인
- 📊 제품 인텔리전스(Product Intelligence) - 제품 카테고리, 가치 제안(value props), 대상 고객을 자동으로 감지합니다.
- 🎭 스토리 아크(Story Arcs) - 5가지 내러티브 템플릿: 문제→해결책, 기능 소개(Feature Showcase), 여정(Journey), 비포/애프터(Before/After), 빠른 데모(Quick Demo)
- ⏱️ 스마트 페이싱(Smart Pacing) - 음성 해설과 동기화되는 콘텐츠 인식 타이밍
- 🎬 시각적 순간(Visual Moments) - 최적의 캡처를 위해 애니메이션, 차트, 양식을 자동으로 감지합니다.
- 🎙️ 음성 향상(Voice Enhancement) - SSML 생성, 다중 음성 지원, 감정 마커
- 📝 애니메이션 자막(Animated Captions) - 카라오케(Karaoke), 팝(Pop), 타자기(Typewriter), 페이드(Fade) 자막 스타일
- 🎨 하단 자막(Lower Thirds) - 애니메이션이 적용된 전문적인 이름/제목 오버레이
- ⌨️ 키보드 시각화기(Keyboard Visualizer) - 단축키 표시 (Mac/Windows 스타일)
- 🔍 스포트라이트 및 콜아웃(Spotlight & Callouts) - 화살표, 배지, 하이라이트를 사용하여 주의를 집중시킵니다.
- 🎞️ 장면 전환(Scene Transitions) - 장면 간 페이드(Fade), 블러(Blur), 슬라이드(Slide), 줌(Zoom) 효과
- 🖼️ GIF 내보내기(GIF Export) - 고품질 팔레트 최적화된 GIF 변환
- 📸 자동 썸네일(Auto Thumbnails) - AI 기반 최고의 프레임 선택
- 💧 워터마크(Watermarks) - 위치 지정이 가능한 텍스트 또는 로고 오버레이
- 📊 진행률 표시줄(Progress Bars) - 시각적 타임라인 지표
- 🎬 인트로/아웃트로(Intro/Outro) - 애니메이션 브랜딩 인트로 및 CTA 아웃트로 카드
웹 에디터 (Web Editor)
더 인터랙티브한 경험을 위해 비주얼 에디터를 시작하세요:
기능 (Features)
- 첫 사용 온보딩(First-run onboarding) - 주요 기능에 대한 안내 투어
- 설정 패널(Settings panel) - 브라우저에서 API 키 직접 구성
- 템플릿(Templates) - 사전 제작된 데모 구성 (SaaS, 이커머스, 포트폴리오 등)
- 내장 문서(Built-in docs) - 에디터를 벗어나지 않고 문서에 접근할 수 있습니다.
- 실시간 녹화(Live recording) - 녹화 중 실시간 미리보기
- 타임라인 편집(Timeline editing) - 마커, 줌, 효과의 시각적 편집
- 키보드 단축키(Keyboard shortcuts) -
Shift + ?를 눌러 모든 단축키 보기
API 키 설정 (API Key Setup)
API 키는 두 가지 방법으로 구성할 수 있습니다:
- 환경 변수(Environment variables) (CLI):
export OPENAI_API_KEY=sk-...
- 웹 UI 설정(Web UI Settings): ⚙️ 설정(Settings) → API 키(API Keys)를 클릭하고 키를 입력합니다.
전체 문서는 웹 에디터 가이드를 참조하세요.
옵션 (Options)
데모 명령어 (Demo Command)
look demo <url> [options]
| 옵션 (Option) | 설명 (Description) | 기본값 (Default) |
|---|
-o, --output | 출력 파일 경로 (Output file path) | ./demo.mp4 |
| ... | | |
커서 및 클릭 효과 (Cursor & Click Effects)
| 옵션 (Option) | 설명 (Description) | 기본값 (Default) |
|---|
--cursor | 커서 스타일 (default, pointer, dot, circle, none) | default |
| ... | | |
예시 (Examples)
look quick https://stripe.com
...
📱 모바일 앱 녹화 (Mobile App Recording)
Docker를 사용하여 안드로이드 앱의 데모 영상을 녹화합니다 (Android Studio 설정 불필요).
빠른 시작 (Quick Start)
모바일 명령어 (Mobile Commands)
| 명령어 (Command) | 설명 (Description) |
|---|
look mobile-start | Docker에서 안드로이드 에뮬레이터 + Appium 시작 |
| ... | |
요구 사항 (Requirements)
- Docker Desktop 설치 및 실행 중이어야 함
- 8GB 이상의 RAM 사용 가능해야 함
- 앱이
.apk 파일 형태여야 함
전체 문서 및 iOS 지침은 모바일 설정 가이드를 참조하세요.
작동 방식 (How It Works)
URL → 스크린샷 → GPT-4V 분석 → 스크립트 → 브라우저 녹화 →
→ 커서 추가 → 줌 적용 → 클릭 효과 적용 →
→ 색 보정(Color Grade) → 음성 생성 → 결합 → 내보내기 (Export)
마법은 오케스트레이션에 있습니다. LooK는 수십 가지 단계를 자동으로 처리하여 전문적인 결과를 만들어냅니다.
문제 해결 (Troubleshooting)
"FFmpeg를 찾을 수 없음" (FFmpeg not found)
FFmpeg 설치:
- Mac:
brew install ffmpeg
- Linux:
sudo apt install ffmpeg
- Windows: ffmpeg.org에서 다운로드
"OpenAI API 오류" (OpenAI API error)
API 키 설정:
export OPENAI_API_KEY=sk-your-key-here
영상이 끊겨 보임 (Video looks choppy)
- 충분한 디스크 공간을 확보했는지 확인하세요.
- 지속 시간을 줄여보세요:
-d 15
- 더 빠른 프리셋을 사용하세요:
--preset twitter
커서가 보이지 않음 (Cursor not visible)
- 커서 스타일을 확인하세요:
--cursor default
- 크기를 늘리세요:
--cursor-size 32
라이선스 (License)
모든 권리 보유. LICENSE를 참조하세요.
🤝 기여하기 (Contributing)
기여를 환영합니다! 다음 방법들로 도움을 주실 수 있습니다:
기여자 빠른 시작 가이드 (Quick Start for Contributors)
- 저장소 포크(Fork)하기
- 포크된 저장소 클론(Clone)하기:
git clone https://github.com/YOUR_USERNAME/LooK.git
cd LooK
3. **의존성 설치(Install dependencies):**
```bash
npm install
- 테스트 실행:
npm test
look test --full
5. **변경 사항 적용하기 (Make your changes)**
6. **풀 리퀘스트(Pull Request) 제출하기**
### 기여 방법 (Ways to Contribute)
- 🐛 **버그 보고:** [이슈 열기](https://github.com/nirholas/LooK/issues)
- 💡 **기능 제안:** [토론 시작하기](https://github.com/nirholas/LooK/discussions)
- 📖 **문서 개선:** 오타 수정, 예시 추가
- 🔧 **PR 제출:** 버그 수정, 새로운 기능
- ⭐ **저장소 스타(Star)하기:** 응원 표시!
### 개발 환경 설정 (Development Setup)
```bash
# 의존성 설치
npm install
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
코드 스타일 (Code Style)
- ES 모듈 사용 (
import/export)을 사용하세요.
- 콜백 함수보다 async/await를 선호하세요.
- 공개 함수에 JSDoc 주석을 추가하세요.
- 커밋은 집중적이고 설명적으로 유지하세요.
계획된 기능은 ROADMAP.md를 참조하세요.
❤️로 제작: nichbot
문서화 (Documentation)
전체 문서 사이트: https://nirholas.github.io/LooK/
- 시작하기는 설치 및 첫 실행 방법을 다룹니다.
- 예제에는 복사하여 붙여넣을 수 있는 코드 스니펫이 있습니다.
스타 기록 (Star History)
Star History Chart
<!-- three.ws:growth -->
프로젝트 지원하기 (Support the project)
만약 LooK가 시간을 절약해 준다면, GitHub에서 스타(Star)해주세요. 스타는 다른 개발자와 AI 에이전트들이 신뢰할 만한 저장소를 찾는 방법이며, 단 한 번의 클릭으로 가능합니다.
이 기능을 사용할 사람을 아시나요? X에 게시하기 · Bluesky에 공유하기 · LinkedIn에 공유하기 · Hacker News에 제출하기 · Reddit에 공유하기
AI 에이전트를 위해 구축됨
코딩 에이전트(Coding agents)와 LLM 툴링은 이 레포지토리(repo)를 직접 읽을 수 있습니다: AGENTS.md, llms.txt, llms-full.txt. 에이전트에게 https://github.com/nirholas/LooK를 가리키면 필요한 컨텍스트(context)를 갖게 됩니다.
같은 작성자의 다른 작업물
- nirholas의 모든 레포지토리: 주제별로 분류된 전체 카탈로그
- three.ws: 솔라나 지갑(Solana wallets), 스킬 마켓플레이스(skill marketplace), 그리고 x402 결제 기능을 갖춘 3D AI 에이전트 플랫폼
질문이나 아이디어: 이슈를 열거나 토론을 시작하세요
기여자들
Contributors
<!-- /three.ws:growth -->
