Onlook

시각적 캔버스 편집

• Figma와 유사한 사용자 인터페이스에서 요소를 드래그 앤 드롭하여 배치할 수 있습니다.
• 실시간 미리보기를 통해 코드 변경 사항이 즉시 반영되는 것을 확인할 수 있습니다.
• 우클릭을 통해 해당 요소가 코드 어디에 위치하는지 바로 확인하고 편집할 수 있습니다.

AI 기반 개발

• AI 채팅을 통해 텍스트 설명이나 이미지를 기반으로 Next.js 애플리케이션을 몇 초 만에 생성할 수 있습니다.
• 프로젝트의 수정 사항을 AI에게 요청하면 자동으로 코드를 생성하고 적용합니다.
• 여러 메시지를 동시에 큐잉하여 복잡한 요청도 처리할 수 있습니다.

개발자 도구

• 실시간 코드 에디터가 내장되어 있어 코드를 직접 수정할 수 있습니다.
• 체크포인트를 저장하고 복원하여 안전하게 실험적인 변경을 시도할 수 있습니다.
• CLI를 통해 명령어를 실행하고, 앱 마켓플레이스와 연동할 수 있습니다.

배포 및 협업

• 프로젝트를 즉시 배포하여 공유 가능한 링크를 생성하거나 커스텀 도메인을 연결할 수 있습니다.
• 팀원과 함께 실시간으로 편집하며 협업할 수 있습니다.

기본 사용법

Onlook는 호스팅 버전과 로컬 실행 버전 모두를 지원합니다. 공식 웹사이트(onlook.com)를 통해 바로 시작하거나, 공식 문서(docs.onlook.com/developers/running-locally)의 안내에 따라 로컬 환경에서 실행할 수 있습니다. 기존 Next.js + TailwindCSS 프로젝트를 가져오거나, 편집기 내에서 새로 만들 수 있습니다. 프로젝트가 생성되면 코드가 웹 컨테이너에 로드되고 실행되어 미리보기 링크가 에디터에 표시됩니다.

이런 경우에 유용합니다

• 프로토타입 빠르게 만들기: 아이디어를 텍스트로 설명하면 AI가 Next.js 기반의 동작하는 웹사이트 프로토타입을 즉시 생성하여 아이디어를 빠르게 검증할 수 있습니다.
• 디자인 시스템 관리: 브랜드 에셋과 토큰을 관리하고, 컴포넌트를 감지하여 재사용함으로써 일관된 디자인을 유지할 수 있습니다.
• 디자이너의 코딩 갭 해소: 코드를 직접 작성하지 않아도 시각적 편집기를 통해 웹사이트의 레이아웃과 스타일을 조정하고, 실시간으로 코드가 어떻게 변하는지 확인할 수 있습니다.

지원 환경·시스템 요구사항

Onlook는 Next.js와 TailwindCSS 프로젝트를 대상으로 설계되었습니다. 공식 웹사이트에서 호스팅 버전을 제공하며, 로컬에서 실행 시 Docker와 Bun이 요구됩니다.

최신 버전·업데이트

이번 릴리스 버전은 0.2.32입니다. 프로젝트는 Apache 2.0 라이선스로 배포됩니다.

제한 사항·확인 사항

• 현재 Next.js와 TailwindCSS 기반 프로젝트에 최적화되어 있어, 다른 프레임워크나 CSS 라이브러리에 대한 지원은 향후 계획에 있습니다.
• 드래그 앤 드롭 컴포넌트 패널, 브랜드 이미지 검색, MCP 설정, 커멘트 남기기 등의 기능은 아직 개발 중인 상태입니다.
• 로컬 실행을 위해 Docker와 Bun 런타임 환경이 필요할 수 있습니다.