디자이너를 위한 Cursor - 오픈소스, 시각적 우선 코드 에디터

Next.js + TailwindCSS로 AI와 함께 웹사이트, 프로토타입, 디자인을 제작하세요. 브라우저 DOM에서 직접 시각적 에디터로 편집할 수 있습니다. 코드로 실시간 디자인이 가능합니다. Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow 등의 오픈소스 대안입니다.

🚧 🚧 🚧 Onlook for Web은 아직 개발 중입니다 🚧 🚧 🚧

우리는 Onlook for Web을 놀라운 프롬프트-투-빌드(prompt-to-build) 경험으로 만들기 위해 적극적으로 기여자를 찾고 있습니다. 제안된 기능(및 알려진 문제)의 전체 목록을 확인하려면 open issues를 참조하시고, 수백 명의 다른 빌더들과 협업하기 위해 Discord에 참여해 주세요.

Onlook으로 할 수 있는 것:

• Next.js 앱을 몇 초 만에 생성
  • 텍스트 또는 이미지로 시작
  • 미리 만들어진 템플릿 사용
  • Figma에서 가져오기
  • GitHub 저장소로 시작
• 앱을 시각적으로 편집
  • Figma와 유사한 UI 사용
  • 실시간으로 앱 미리보기
  • 브랜드 자산 및 토큰 관리
  • 페이지 생성 및 이동
  • 레이어 탐색 – 이전 버전 Onlook Desktop에서 제공
  • 컴포넌트 감지 및 사용 – 이전 버전 Onlook Desktop에서 제공
  • 프로젝트 이미지 관리 – 이전 버전 Onlook Desktop에서 제공
• 개발 도구
  • 실시간 코드 편집기
  • 체크포인트에서 저장 및 복원
  • CLI를 통해 명령 실행
  • 앱 마켓플레이스 연결
  • 로컬에서 코드 편집 – 이전 버전 Onlook Desktop에서 제공
• 몇 초 만에 앱 배포
  • 공유 가능한 링크 생성
  • 사용자 정의 도메인 연결
• 팀과 협업
  • 실시간 편집
  • 댓글 남기기

Onlook for Desktop (일명 Onlook Alpha)

현재 Onlook Web은 초기 프리뷰 단계입니다. 다운로드 가능한 데스크톱 전자 앱을 찾고 있다면, Onlook Desktop으로 이동되었습니다.

웹으로 전환하는 이유는 여기서 확인하세요: Electron에서 웹으로 마이그레이션

시작하기

호스팅 앱 또는 로컬에서 실행으로 곧 이용 가능합니다.

사용 방법

Onlook은 모든 Next.js + TailwindCSS 프로젝트에서 실행됩니다. 프로젝트를 Onlook으로 가져오거나 편집기 내에서 처음부터 시작할 수 있습니다.

AI 채팅을 사용하여 작업 중인 프로젝트를 생성하거나 편집하세요. 언제든지 요소를 우클릭하면 해당 요소의 정확한 코드 위치를 열 수 있습니다.

새로운 div를 그려넣고 드래그 앤 드롭으로 부모 컨테이너 내에서 재배치하세요.

사이트 디자인과 코드를 나란히 미리 볼 수 있습니다.

Onlook의 편집기 도구 모음을 사용해 Tailwind 스타일을 조정하고, 객체를 직접 조작하며 레이아웃을 실험해 보세요.

문서

전체 문서는 docs.onlook.com에서 확인하실 수 있습니다.

기여 방법은 문서의 Contributing to Onlook 섹션을 참조하세요.

작동 방식

1. 앱을 생성하면 코드를 웹 컨테이너에 로드합니다
2. 컨테이너가 실행되며 코드를 서빙합니다
3. 편집기는 미리보기 링크를 수신해 iFrame에 표시합니다
4. 편집기는 컨테이너에서 코드를 읽고 인덱싱합니다
5. 요소를 코드 내 위치에 매핑하기 위해 코드를 계측합니다
6. 요소가 편집되면 iFrame 내 요소를 먼저 수정한 후 코드를 변경합니다
7. AI 채팅도 코드 접근 권한과 편집 도구를 보유하여 코드를 이해하고 수정할 수 있습니다

이 아키텍처는 이론적으로 선언적 DOM 요소 표시가 가능한 모든 언어/프레임워크(예: jsx/tsx/html)에 적용 가능합니다. 현재는 Next.js와 TailwindCSS에 최적화되어 있습니다.

전체 과정은 Architecture Docs에서 확인하세요.

기술 스택

프론트엔드

• Next.js - 풀 스택
• TailwindCSS - 스타일링
• tRPC - 서버 인터페이스

데이터베이스

• Supabase - 인증, 데이터베이스, 스토리지
• Drizzle - ORM

AI

• AI SDK - LLM 클라이언트
• Anthropic - LLM 모델 제공자
• Morph Fast Apply - 고속 적용 모델 제공자
• Relace - 고속 적용 모델 제공자

샌드박스 및 호스팅

• CodeSandboxSDK - 개발 샌드박스
• Freestyle - 호스팅

런타임

• Bun - 모노레포, 런타임, 번들러
• Docker - 컨테이너 관리

기여하기

개선을 위한 제안이 있으시면 저장소를 포크하여 풀 리퀘스트를 생성해 주세요. 또한 이슈를 열어 주실 수도 있습니다.

자세한 지침과 행동 강령은 CONTRIBUTING.md를 참고해 주세요.

기여자

연락처

• 팀: Discord - Twitter - LinkedIn - 이메일
• 프로젝트: https://github.com/onlook-dev/onlook
• 웹사이트: https://onlook.com

라이선스

Apache 2.0 라이선스로 배포됩니다. 자세한 내용은 LICENSE.md를 참고해 주세요.