# OnLook - 디자이너를 위한 Cursor

> Clean Markdown view of GeekNews topic #21365. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21365](https://news.hada.io/topic?id=21365)
- GeekNews Markdown: [https://news.hada.io/topic/21365.md](https://news.hada.io/topic/21365.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-06-10T09:31:01+09:00
- Updated: 2025-06-10T09:31:01+09:00
- Original source: [github.com/onlook-dev](https://github.com/onlook-dev/onlook)
- Points: 17
- Comments: 2

## Summary

오픈소스 **비주얼 바이브코딩 에디터**입니다. **Next.js + TailwindCSS** 기반으로 브라우저에서 실시간 미리보기와 DOM 직접 수정을 지원하며, Bolt, V0 등 상용 서비스를 대체하는 것을 목표로 합니다. **Figma와 유사한 UI**, AI 챗봇 기반 코드 편집, 다양한 프레임워크 확장 기능등을 제공하고 **웹 컨테이너**와 **실시간 에디터** 아키텍처를 바탕으로, 온전히 웹 기반이지만 데스크톱 앱과도 연동할 수 있습니다.

## Topic Body

- 웹에서 사이트, 프로토타입, 디자인을 실시간 코드와 함께 만들 수 있는 오픈소스 **비주얼 바이브코딩 에디터**  
- **Next.js + TailwindCSS** 기반, 브라우저에서 실시간 미리보기 및 직접 DOM을 수정 가능   
- Bolt, Lovable, V0, Replit Agent, Figma Make, Webflow 등 상용 서비스의 오픈소스 대체를 목표  
  
### 주요 기능  
- Next.js 앱을 **텍스트/이미지로부터 즉시 생성** - Figma 임포트, 템플릿 등 지원 예정   
- **Figma와 유사한 UI**로 페이지 생성, 자산 및 토큰 관리, 실시간 프리뷰 지원  
- **실시간 코드 에디터**, 체크포인트 저장 및 복원, CLI 통한 명령어 실행, 마켓플레이스 연동  
- 드래그앤드롭, Tailwind 스타일 편집, 레이아웃 실험 등 시각적 조작 지원  
- 실시간 편집 / 댓글 / 공유링크 / 커스텀 도메인 지원 예정   
- 웹 기반이지만, 데스크톱 앱([Onlook Desktop](https://github.com/onlook-dev/desktop))과도 연동 가능  
  
### 아키텍처 및 동작 방식  
  
- 앱 생성 시 코드를 **웹 컨테이너**에 로드해 코드가 실행됨  
- 미리보기 링크를 **iFrame**으로 에디터에 표시, 코드와 UI 매핑 처리  
- **AI 챗봇**이 코드 접근 및 편집 지원, 코드를 직접 이해하고 수정 가능  
- JSX/TSX/HTML 등 **선언형 DOM**을 사용하는 다양한 프레임워크 확장 가능  
  
### 사용 기술 스택  
  
- 프론트엔드: Next.js, TailwindCSS, tRPC  
- 데이터베이스/스토리지: Supabase, Drizzle  
- AI: AI SDK, Anthropic, Morph Fast Apply, Relace  
- 샌드박스/호스팅: CodeSandboxSDK, Freestyle  
- 런타임/번들러: Bun, Docker  
  
### 기타 정보  
  
- Apache 2.0 라이선스  
- 웹 앱은 곧 공개 예정, 데스크톱 앱도 별도 제공  
- 전체 문서 및 개발 참여 방법은 [공식 문서](https://docs.onlook.com) 참고

## Comments



### Comment 39894

- Author: xguru
- Created: 2025-06-10T09:32:01+09:00
- Points: 2

[Onlook - 오픈 소스 Webflow를 이용한 맞춤형 앱 제작 도구](https://news.hada.io/topic?id=15758)  
  
1년쯤 전에 이런 제목으로 올라왔었는데, 역시 네이밍이 중요하네요. OOO for XXX 가 이해가 편하죠.

### Comment 39913

- Author: [hidden]
- Created: 2025-06-10T14:19:19+09:00
- Points: 1
- Parent comment: 39894
- Depth: 1

[숨김 처리된 댓글입니다]