Case 01
HyperFrames
4→1
재훈풀스택 개발자
4 도구를 한 창에.
VSCode · 터미널 · Notion · Figma 사이의 컨텍스트 전환이 한 워크스페이스에서 멈춘다.
OPENBRIDGERUN
WHAT'S NEW · v1.0.18
이번 버전에 들어온 것.
영상을 만들고 다듬는 도구가 통째로 들어왔고, 뷰어를 여러 화면으로 나눠 문서를 한꺼번에 보고 고치게 했다.
Make video
글·이미지로 영상을 만든다.
짧은 설명이나 사진을 넣으면 영상으로 만들어 준다. 쓰던 영상 생성 서비스의 키를 연결해 그대로 쓰는 방식이라 여러 서비스 중 골라 붙일 수 있다. 코드로 정의한 움직이는 그래픽도 영상으로 뽑는다.
Edit video
자르고, 자막 넣고, 다듬는다.
필요 없는 구간을 잘라 잇고, 화면 위 원하는 자리에 자막과 제목을 얹는다. 천천히 확대/축소·속도·페이드, 말 사이 긴 정적 자동 제거. 자막 자동 생성·번역, 글을 음성으로 읽어 주는 AI 내레이션(내 목소리 학습 포함), 화자 자동 구분까지.
Split view
여러 문서를 한 화면에.
뷰어를 2·3·4분할(나란히 · 세로 · 바둑판 2×2)로 나눠 서로 다른 문서를 동시에 본다. 패널마다 다른 파일과 확대율, 경계를 끌어 크기 조절, 잠금을 켜면 한 패널을 스크롤할 때 나머지도 같이 움직인다. 분할 배치는 워크스페이스마다 기억된다.
Edit & zoom
소스 직접 편집 · 스크롤 확대.
Source 보기에서 Markdown · HTML · 텍스트 원본을 바로 고칠 수 있다(이전엔 보기 전용). 문서 뷰어와 터미널 모두 Cmd+스크롤(또는 트랙패드 핀치)로 키우고 줄인다.
FEATURES
한 곳에서, 네 가지 표면.
한 창에서 보고, 고치고, 명령하고, 확장한다. 도구를 옮겨다닐 일이 없다.
Level 01 · Viewer
본다
View
HTML · PDF · 비디오 · 이미지 · XLSX · 마크다운 · 코드 — 한 앱이 모든 문서를 한 결로.
Level 02 · Editor
고친다
Edit
MD · HTML 라이브 편집(즉시 프리뷰) · PDF 주석 / 하이라이트 · 비디오 책갈피 · 재생속도 · 이미지 Paint canvas · Region 캡처 · Element pick. 보고 있는 그 자리를 픽셀 단위로 직접 편집.
Level 03 · Terminal
명령한다
AI Command
내장 PTY 터미널 + Claude / Codex / Gemini CLI · MCP bridge. 문서 · 캡처 · Paint 스케치가 LLM 의 직접 컨텍스트로 자연어처럼 전달 — 1:1 AI 어시스턴트와 직관적 소통.
Level 04 · Profile
확장한다
AI Connect
AI 동료의 머리 + 손발 + 작업장. 직무별 Profile (Slidev · Quarto · D2 · Marimo · Manim · HyperFrames 등) 즉시 사용. ⌘⇧N New Workspace 마법사 한 번이면 셋업 완료. GitHub repo URL 한 줄로 팀 Profile 공유.
DEMOS · 영상으로 한눈에
3 레벨, 한 화면에.
각 데모는 30~50 초 루프. 타일을 클릭하면 큰 오버레이로 자세히 — replay 버튼으로 다시 재생.
LEVEL I · VIEW
⤢ 크게enlarge
LEVEL II · EDIT
⤢ 크게enlarge
LEVEL III · AI COMMAND
⤢ 크게enlarge
호환 / Compatible with
Claude · Codex · Gemini · OpenAI · DeepSeek · Mistral · Together AI · Groq · Cerebras · Ollama
View · Lv.01
LEVEL 01 · VIEW
모든 문서, 한 결로.
HTML · PDF · 비디오 · 이미지 · XLSX · 마크다운 · 코드 · DOCX. 폴더 안 모든 파일을 같은 단축키와 같은 검색으로 다룬다.
- 탭 + 사이드바 + 갤러리 — 폴더 구조 그대로
- 듀얼 패널 / 분할 보기로 비교
- 전 파일 텍스트 검색 + Outline
- 다크 / 라이트 + 8 Persona 테마
Edit · Lv.02
LEVEL 02 · EDIT
픽셀을 그 자리에서 고친다.
텍스트 라이브 편집과 시각 편집이 같은 파일에서 동시에 작동. 보고 있는 자리를 그대로 손대는 워크플로우.
- MD / HTML 라이브 편집 · 즉시 프리뷰
- PDF 주석 / 하이라이트 자동 저장
- 비디오 책갈피 · 재생속도 · 프레임 캡처
- Paint canvas · Region · Element pick
Command · Lv.03
LEVEL 03 · AI COMMAND
AI 와 1:1 으로 일한다.
내장 PTY 터미널 + Claude / Codex / Gemini CLI · MCP bridge. 문서 · 캡처 · 스케치가 자연어처럼 모델로 전달된다.
- 내장 터미널 — 워크스페이스 셸 그대로
- MCP bridge — Cursor · Claude Code 호환
- ChatPanel — BYOM (Claude / GPT / Gemini / DeepSeek / Ollama)
- 화면 영역 + Paint 스케치를 직접 컨텍스트로
LEVEL 04 · AI CONNECT
8 직군, 8 Profile 로 확장.
번들 Profile 여덟 — HyperFrames · Slidev · Quarto · Marimo · Astro Starlight · D2 · Excalidraw · Manim. 각 직군이 어떻게 쓰는지.
Case 02
Slidev
3→1
현우 / 민지디자이너 ↔ 개발자
슬랙 핑 3 → PR 1.
시니어의 의도가 Region 캡처 + Paint 스케치 한 번에 신입에게 정확히 전달된다.
REGIONPAINTPATCH
Case 03
Quarto
13→1
이수민B2B SaaS PM
13 파일 → 1 슬라이드.
PRD 7 + 영업 XLSX 1 + 시장 PDF 5 가 회의 5 분 전에 한 장으로 합쳐진다.
SELECTASKRENDER
Case 04
Marimo
5→1
지영1인 데이터 강사
5 도구 → 1 노트북.
draw.io · Notion · Obsidian · Airtable · Keynote 가 재현 가능한 Marimo 노트북 한 권으로 들어온다.
OPENASKRUN
Case 05
Astro Starlight
3w→4d
혜민OSS docs maintainer
Docusaurus → Stripe-style.
generic 정적 사이트의 부분 영역만 Region 캡처로 시각 편집. 재빌드 3주가 4일.
IMPORTREGIONPOLISHPUSH
Case 06
D2
200→1
민호시스템 아키텍트
200줄 텍스트 → 다이어그램 1장.
요구사항 명세를 D2 노드로 한 줄씩 변환. architecture 다이어그램이 자동으로 그려진다.
TEXTGENERATESHARE
Case 07
Excalidraw
30m→3m
수아미팅 facilitator
화이트보드가 회의록.
30분 미팅의 스케치가 끝나기 전에 요약 + 액션 아이템으로 정리된다.
SKETCHCAPTURESUMMARIZE
Case 08
Manim
3h→30m
마이클수학 영상 크리에이터
3시간 영상 → 30분 컷.
수식을 자연어로 설명하면 Manim 씬 코드가 생성. 미리보기 → Region 수정 → 렌더.
DESCRIBEPREVIEWRENDER
EDITIONS
당신에게 맞는 수츠를 고르세요.
"보고 있는 자리를 AI 컨텍스트로" 라는 한 가지 미션. 누가 쓰느냐에 따라 핏이 달라집니다. Pro 먼저 출시, Easier 는 그 다음.
HTMLook Pro
파워 유저 · 개발자 · 디자이너 · OSS maintainer
- BYOM — Claude · GPT · Gemini · DeepSeek · Ollama 자유
- 내장 PTY 터미널 + claude / codex / gemini CLI
- MCP bridge — Claude Code · Cursor · Hermes 호환
- Save as Skill — 반복 워크플로우 자동 패키지
- Paint canvas · Region capture · Element pick
?
가까운 미래의 새 수트 · 곧 공개
Pro 와 Easier 사이를 잇는 새 수트가 머지 않아 등장합니다. 사용자 편지로 spec 을 다듬는 중 — 당신만의 새 use case 가 있다면, 그 메일 한 통이 정의가 됩니다.
당신에게 맞을 자리를 알려주세요 →HTMLook Easier
AI 입문자 · 일반 사용자 · 학생
키 관리 없이 바로 시작. 번들 AI · 단순 UI · 일상 문서. v1.x 후속 릴리스.
출시 알림 받기 →TUTORIALS · 배우는 길
세 갈래 — 영상으로, 손가락으로, 직무로.
앱 안의 인터랙티브 walkthrough 로 직접 손가락에 익히고, htmlook_campus 8 단계 튜토리얼로 기초를 잡고, 8 프로파일 × 75 시드로 자기 도메인 워크플로를 완성합니다. 그리고 기능별 레퍼런스 매뉴얼은 wiki 에. 넷 다 무료 · 오프라인 가능.
A
인터랙티브 워크스루
메뉴에서 시작하면 실제 UI 위에 spotlight + tooltip 이 떠서 단계별 클릭 / 드롭 / 단축키를 안내. BASIC #1 "Drop. Open. Done." 부터 advanced multi-pane 까지 — 영상을 본 그대로, 같은 동작을 직접.
B1드롭 → 열림drop → open
B2워크스페이스workspace
B3MD 라이브MD live
B4HTML splitHTML split
B5Region citeRegion cite
B64-mode4-mode
A1XLSX citeXLSX cite
A2Live cueLive cue
A3Multi-targetMulti-target
A4Multi-paneMulti-pane
10
walkthroughs · 69 step · ko / en
Pro 메뉴에서 시작
B
기초부터 — 8 단계 튜토리얼
설치 → 첫 파일 → BYOM 설정 → 편집 → 명령 → Skill 저장 → 번들 프로파일 → 직접 확장. 마크다운 · 영상 · 페르소나 워크스루를 본인 페이스로. 무엇이 어디서 어떻게 되는지 한 번에.
01시작start
02첫 파일first file
03BYOMBYOM
04편집editing
05명령command
06Skillskill
07프로파일profiles
08확장extend
8
step · 17 feature 영상 · 26 페르소나 워크스루
Step 1 부터 시작
C
심화 — 프로파일 튜토리얼
번들 8 프로파일마다 도메인 시드 워크스페이스가 7~26 종. hyperframes.json · slides.md · scene.py · index.qmd · notebook.py 같은 도구별 시드를 그대로 열어 BYOM 모델로 워크플로 재현.
26HyperFrames
7Slidev
7Quarto
7Marimo
7Manim
7D2
7Excalidraw
7Astro Starlight
75
시드 워크스페이스 · 8 프로파일 · BYOM 9 모델
프로파일 가이드 열기
D
레퍼런스 — 기능별 wiki
튜토리얼은 한 번 따라가면 되지만 wiki 는 매일 손이 닿는 곳. 사이드바·탭·뷰어·터미널·AI·Paint·음성·Skill·Export·Settings·단축키. 사람용 트랙과 AI 어시스턴트 (MCP/스키마) 트랙 두 갈래로 분리.
Sidebar
Viewer
Terminal
AI
Paint
Voice
Skill
Export
Settings
Shortcuts
63
page · ko / en · 사람 + AI 두 트랙
wiki 열기
네 갈래 학습
A · 손가락에 익힘
/
B · 무엇이 어디서
/
C · 직무에 적용
/
D · 매일 찾아봄
모두 오프라인 가능 — BYOM 키만 있으면 인터넷 없이도.
PRO PRICING
필요한 만큼만, 정직하게.
14일 무료로 모든 기능 체험. 이후 뷰어는 영구 무료, 편집·AI는 월 구독. 토큰 마진 0 — BYOM 정신 유지.
14일 무료
Trial
무료
14일 모든 기능 풀 체험. 카드 등록 없음.
- Pro Solo 모든 기능
- BYOM · MCP · Skill · Paint · Region
- Workspace + Profile · 5 devices
- Wizard · 8 bundled Profile · 75 sample
Free Viewer
$0
영구 무료 · 뷰어 only
- HTML · MD · PDF · XLSX · 비디오 · 이미지 뷰어
- 검색 · Outline · Split view · Sidebar
- 다크/라이트 테마
- 읽기 전용 (편집 / AI / Skill X)
Pro Solo
$7/mo
솔로 작업 + AI 협업 풀
- Free Viewer 전체 +
- 편집 · 라이브 프리뷰 · WYSIWYG
- BYOM (Claude · GPT · Gemini · Ollama)
- MCP · ChatPanel · Save as Skill
- Paint · Region · Element pick
- Workspace + Profile · 5 devices
- Wizard · 8개 bundled Profile · 75 sample
Pro Solo+
v1.1 출시 예정
Cloud sync · 자체 STT 서비스
- Pro Solo 전체 +
- 다중 디바이스 워크스페이스 sync (Mac · Win)
- 지난 30일 backup history 복원
- ChatPanel history cross-device
- 자체 STT 서비스 — 음성 메모 자동 전사
DOWNLOAD
받아서 바로 시작.
Windows: SmartScreen 경고가 뜨면? — 한 번 클릭으로 통과
v1.0 Windows 빌드는 코드사인 과정 없이 배포됩니다. Windows 11이 처음 보는 앱에 대해 다음 다이얼로그를 보여줍니다:
"Windows protected your PC. Microsoft Defender SmartScreen prevented an unrecognized app from starting."
해결: More info 클릭 → Run anyway 클릭. 그 후엔 경고 없이 바로 실행됩니다. 앱 자체에는 영향이 없으며, 무결성은 GitHub Releases 의 SHA-256 해시로 직접 검증할 수 있습니다.
We will add Windows code signing in v1.1. Until then, the app behaves exactly as the macOS / Linux builds — same source, same release commit, just no Authenticode certificate. Pro and Easier installers are reproducible from the public CI workflow.