온룩
Onlook
리액트 코드를 피그마처럼 시각적으로 편집하고 변경 사항을 소스 코드에 즉시 반영하는 AI 비주얼 에디터
검증된 사실
- 최신 버전
- v0.2.322025-07-17
- GitHub
- ★ 24,659
- 최근 변경
- 2025-07-17 v0.2.32 출시 — 연락처 이메일 hello@onlook.dev에서 contact@onlook.com으로 변경 소스: https://github.com/onlook-dev/onlook/rele
2026-06-15 직접 확인 · 자동 검증 데이터
제품 화면
2026-06-15 확인
가격 정보
무료 플랜은 일일 5건의 AI 채팅과 5개의 프로젝트를 제공한다. Pro 플랜은 월 $25로 무제한 프로젝트와 월 100건의 메시지를 지원하지만, 최근 정책 변경으로 인해 신규 사용자는 별도 문의나 데모 예약이 필요할 수 있다.
최근 업데이트와 소식
- 소식Next.js 및 Tailwind CSS 기반 실시간 인피니트 캔버스 편집 지원 추가
Next.js 및 Tailwind CSS 기반 실시간 인피니트 캔버스 편집 지원 추가
- 버전 업데이트Storybook 디자인 시스템 연동 및 체크포인트 저장/복원 기능 출시
Storybook 디자인 시스템 연동 및 체크포인트 저장/복원 기능 출시
- 버전 업데이트v0.2.32 출시 — 연락처 이메일 hello@onlook.dev에서 contact@onlook.com으로 변경
v0.2.32 출시 — 연락처 이메일 hello@onlook.dev에서 contact@onlook.com으로 변경
소개AI 요약
활용 워크플로우
입력
온룩
출력
비주얼 디자인 모드
코딩 없이 캔버스에서 직접 요소를 배치하고 스타일을 수정하여 실제 코드로 변환하는 경로
AI 바이브 코딩 (Vibe Coding)
자연어 대화만으로 복잡한 UI 레이아웃을 생성하거나 전체 페이지를 빌드하는 경로
엔지니어 핸드오프
디자이너가 수정한 사항을 개발자가 즉시 검토하고 PR로 병합할 수 있는 협업 워크플로우
핵심 차별점: 실제 React 소스 코드와 시각적 캔버스를 1:1로 매핑하여 '디자인이 곧 코드'가 되는 환경을 구현하는 오픈 소스 비주얼 IDE입니다.
주요 기능AI 요약
- DOM-코드 실시간 매핑 — 시각적 편집이 즉시 .tsx 파일에 반영
- Tailwind CSS 시각적 에디터(드래그 앤 드롭 레이아웃 조정)
- AI 프롬프트 기반 React 컴포넌트 생성
- GitHub Pull Request 직접 통합
- Figma 스타일 레이어 구조 및 인스펙터 제공
- 오픈소스(GitHub) — 셀프 호스팅 무료 사용 가능
장점 & 단점AI 분석
공식 정보와 공개 피드백을 함께 정리한 참고 메모입니다
장점
- AI 프롬프트로 UI 변경 시 코드가 즉시 업데이트되는 직관적인 캔버스 편집 환경 제공
- 독점 의존성 없이 깔끔하고 유지보수 가능한 React/Tailwind 코드를 생성함
- Figma 사용 경험이 있는 디자이너에게 익숙한 레이어 패널로 DOM 구조 시각화
- data-oid 태깅 시스템으로 시각 상태와 코드 상태를 안정적으로 동기화
- v0나 Lovable 대비 더 프리미엄하고 세련된 디자인 결과물을 출력
- 랜딩 페이지나 전체 사이트를 단 하루 만에 배포 가능한 빠른 개발 속도
단점
- 무료 플랜의 5개 AI 메시지 제한으로 기본 프로토타입 완성도 어려움
- 복잡한 스타일 적용 시 2~3분의 지연 발생 및 대규모 편집 중 응답 불가 현상
- 셀프 호스팅 버전도 AI 기능은 Onlook 클라우드 의존으로 메시지 제한 적용
- AI 생성 컴포넌트 오류 발생 시 자동 감지 및 수정 실패로 별도 코드 에디터 필요
- Figma 프로젝트 가져오기 버그 및 웹 버전 안정성 문제로 아직 베타 단계
활용 사례AI 요약
- React 컴포넌트를 피그마처럼 시각적으로 직접 수정
- AI를 활용한 웹사이트 레이아웃 빠른 프로토타이핑
- 디자인 변경 사항을 코드 수정 없이 GitHub PR로 제출
- 기존 코드베이스의 디자인 시스템 유지하며 UI 고도화
사용자 리뷰
리뷰를 불러오는 중...
심층 비교 — 무엇을 골라야 할까
온룩와(과) 비슷한 도구를 가격·기능·실사용 관점에서 비교한 결정 가이드
대안 도구
이 도구 대신 사용할 수 있는 대안
클로바 AI
Naver
한국어와 국내 맥락에 최적화된 하이퍼클로바 X로 AI 서비스를 개발·배포하는 통합 플랫폼
애스크코디
코드 생성부터 테스트, 문서화까지 개발 전 과정을 지원하는 멀티 모델 기반 AI 코딩 어시스턴트
컨티뉴
IDE 안에서 원하는 LLM을 선택해 코드 맥락을 제어하는 오픈소스 AI 코딩 어시스턴트
세레브라스
세계 최대 크기의 AI 전용 칩으로 기존 GPU보다 수십 배 빠른 초고속 LLM 추론 환경을 제공하는 API 플랫폼
블랙박스 AI
여러 AI 모델을 골라 쓰고 2억 개 이상의 저장소를 검색하며 실시간 자동완성까지 제공하는 AI 코딩 어시스턴트
그록
자체 LPU 칩으로 오픈소스 모델을 빠르게 돌리는 추론 전용 클라우드 플랫폼입니다. GPU 기반 서비스보다 초당 토큰 생성량이 높고 첫 응답까지의 지연이 짧은 점이 핵심입니다.