onlook-dev/onlook

어떤 프로젝트인가요?

핵심 기능

• 01브라우저 실시간 미리보기에서 요소를 직접 편집하고, 변경 사항을 코드에 반영합니다.
• 02요소를 마우스 오른쪽 버튼으로 클릭해 소스 코드의 해당 위치로 이동합니다.
• 03AI 채팅으로 프로젝트를 만들거나 편집합니다.
• 04비주얼 툴바에서 Tailwind 스타일과 레이아웃을 조정합니다.
• 05체크포인트를 저장하고 복원하며, 공유 가능한 배포 링크를 생성합니다.

활용 사례

• Next.js와 Tailwind 프로젝트에서 랜딩 페이지나 마케팅 사이트를 프로토타이핑합니다.
• 디자이너가 시각적으로 수정한 내용이 검토 가능한 실제 코드로 반영되도록 합니다.
• 변경 사항을 확정하기 전에 AI로 다양한 레이아웃을 탐색합니다.

빠른 시작

1. 1

   onlook.com에서 호스팅 앱을 사용하세요

2. 2

   또는 문서에서 로컬 실행 가이드를 확인하세요

사용 전 알아둘 점

• !Next.js 및 Tailwind CSS 프로젝트만 지원하며, 다른 프레임워크는 아직 지원하지 않습니다.
• !호스팅 제품은 대기자 명단을 통해 얼리 액세스로 제공됩니다.
• !로컬 실행 방법은 README가 아닌 문서 사이트에 별도로 안내되어 있습니다.

토픽

자주 묻는 질문

onlook은(는) 무엇인가요?

AI 지원을 받아 브라우저에서 Next.js + Tailwind CSS 코드를 직접 디자인하고 편집할 수 있는 오픈소스 비주얼 에디터입니다. Onlook은 Next.js와 TailwindCSS로 웹사이트와 인터페이스를 만들기 위한 비주얼 코드 에디터입니다. 코드 에디터에서만 작업하는 대신 앱의 실시간 미리보기에서 요소를 선택하고 수정하면, 변경 사항이 실제 소스 코드에 반영됩니다. AI 채팅으로 프로젝트를 만들거나 수정할 수도 있습니다.

onlook은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

onlook은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

onlook은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. onlook의 마지막 커밋은 2026년 8월 25일입니다.

onlook은(는) 어디에 사용할 수 있나요?

Next.js와 Tailwind 프로젝트에서 랜딩 페이지나 마케팅 사이트를 프로토타이핑합니다. 디자이너가 시각적으로 수정한 내용이 검토 가능한 실제 코드로 반영되도록 합니다. 변경 사항을 확정하기 전에 AI로 다양한 레이아웃을 탐색합니다.

onlook는 어떻게 설치하나요?

onlook.com에서 호스팅 앱을 사용하세요 또는 문서에서 로컬 실행 가이드를 확인하세요

onlook은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/onlook-dev/onlook