온룩
Onlook
리액트 코드를 피그마처럼 시각적으로 편집하고 변경 사항을 소스 코드에 즉시 반영하는 AI 비주얼 에디터
부분 무료webmobiledesktop오픈소스LLM 기반멀티모달
웹사이트 방문하기onlook.com
레플리케이트와(과) 비교하기소개
Onlook은 디자이너와 개발자 사이의 간극을 없애기 위해 설계된 차세대 시각적 코드 에디터입니다. '디자이너를 위한 Cursor'를 표방하며, 실제 React 소스 코드를 캔버스에서 시각적으로 직접 수정하고 그 결과를 즉시 코드베이스에 반영합니다. AI를 활용해 컴포넌트를 생성하고 Tailwind CSS를 시각적으로 제어할 수 있으며, 수정 사항을 GitHub PR로 직접 제출할 수 있는 환경을 제공합니다.
활용 워크플로우
입력
로컬 React/Next.js 소스 코드 (GitHub 저장소)Figma 디자인 자산 (이미지 및 레이아웃 참조)자연어 AI 프롬프트 (Claude 3.5 Sonnet 기반)사용자의 시각적 캔버스 인터랙션 (드래그 앤 드롭)
온룩
Babel 플러그인을 통한 DOM-소스 코드 실시간 매핑Tailwind CSS 기반 시각적 스타일링 및 클래스 주입AI를 활용한 신규 컴포넌트 생성 및 디자인 시스템 제약 조건 적용IDE(VS Code, Cursor, Zed)와의 양방향 실시간 동기화
출력
업데이트된 .tsx/.jsx React 소스 코드GitHub Pull Request (리뷰용 변경 내역)브라우저 기반 실시간 라이브 프리뷰Tailwind CSS 설정 및 유틸리티 코드
비주얼 디자인 모드
코딩 없이 캔버스에서 직접 요소를 배치하고 스타일을 수정하여 실제 코드로 변환하는 경로
AI 바이브 코딩 (Vibe Coding)
자연어 대화만으로 복잡한 UI 레이아웃을 생성하거나 전체 페이지를 빌드하는 경로
엔지니어 핸드오프
디자이너가 수정한 사항을 개발자가 즉시 검토하고 PR로 병합할 수 있는 협업 워크플로우
핵심 차별점: 실제 React 소스 코드와 시각적 캔버스를 1:1로 매핑하여 '디자인이 곧 코드'가 되는 환경을 구현하는 오픈 소스 비주얼 IDE입니다.
주요 기능
- DOM-코드 실시간 매핑 기술
- Tailwind CSS 시각적 에디터
- Claude 3.5 Sonnet 기반 AI 채팅
- GitHub Pull Request 통합
- 다양한 프레임워크 지원(React, Vue, Svelte 등)
장점 & 단점
웹검색을 통해 수집된 사용자 피드백 정보입니다
장점
- AI 프롬프트로 UI 변경 시 코드가 즉시 업데이트되는 직관적인 캔버스 편집 환경 제공
- 독점 의존성 없이 깔끔하고 유지보수 가능한 React/Tailwind 코드를 생성함
- Figma 사용 경험이 있는 디자이너에게 익숙한 레이어 패널로 DOM 구조 시각화
- data-oid 태깅 시스템으로 시각 상태와 코드 상태를 안정적으로 동기화
- v0나 Lovable 대비 더 프리미엄하고 세련된 디자인 결과물을 출력
- 랜딩 페이지나 전체 사이트를 단 하루 만에 배포 가능한 빠른 개발 속도
단점
- 무료 플랜의 5개 AI 메시지 제한으로 기본 프로토타입 완성도 어려움
- 복잡한 스타일 적용 시 2~3분의 지연 발생 및 대규모 편집 중 응답 불가 현상
- 셀프 호스팅 버전도 AI 기능은 Onlook 클라우드 의존으로 메시지 제한 적용
- AI 생성 컴포넌트 오류 발생 시 자동 감지 및 수정 실패로 별도 코드 에디터 필요
- Figma 프로젝트 가져오기 버그 및 웹 버전 안정성 문제로 아직 베타 단계
가격 정보
부분 무료시작 가격: $25/mo (Pro plan)
무료 플랜은 일일 5건의 AI 채팅과 5개의 프로젝트를 제공한다. Pro 플랜은 월 $25로 무제한 프로젝트와 월 100건의 메시지를 지원하지만, 최근 정책 변경으로 인해 신규 사용자는 별도 문의나 데모 예약이 필요할 수 있다.
활용 사례
- React 컴포넌트를 피그마처럼 시각적으로 직접 수정할 때
- AI를 활용해 웹사이트 레이아웃을 빠르게 프로토타이핑할 때
- 디자인 변경 사항을 코드 수정 없이 GitHub PR로 보내고 싶을 때
- 기존 코드베이스의 디자인 시스템을 유지하며 UI를 고도화할 때
대상 사용자
UI/UX 디자이너프론트엔드(React) 개발자제품 관리자(PM)웹 디자인 및 개발 에이전시
연동 서비스
ReactVS CodeNext.js
태그
디자인개발자 도구오픈소스브라우저 확장자동화
사용자 리뷰
리뷰를 불러오는 중...
대안 도구
이 도구 대신 사용할 수 있는 대안
