Onlook

Onlook의 핵심은 Tailwind CSS 디자인 도구와 React 비주얼 에디터를 같은 무한 캔버스에 얹은 것이다. 렌더링되는 것은 정지 이미지가 아니라 실제 컴포넌트다. 요소를 골라 끌고, 크기를 바꾸고, 순서를 옮기고, 스타일을 고친다. 편집은 원본 파일로 돌아가므로 화면에서 옮긴 것이 그대로 배포된다. 디자이너는 디자인 도구의 자유를 지키면서 저장소와의 연결도 잃지 않는다.

Onlook의 어시스턴트는 AI 디자인 어시스턴트다. 컴포넌트와 디자인 토큰, Storybook 설정을 읽고 팀의 방식에 맞는 변경을 제안한다. 요소는 직접 고쳐도 되고, 채팅에 맡겨 코드를 쓰게 해도 된다. 채팅만으로 돌아가는 생성 도구와 달리, AI가 반복 작업을 맡는 동안에도 시각적 통제권은 온전히 남는다.

GitHub에 있는 기존 Next.js와 Tailwind CSS 프로젝트를 Onlook에 가리키면 곧바로 편집을 시작한다. Onlook만의 파일 형식도, 관리할 두 번째 디자인 시스템도 없다. 가져온 프로젝트가 곧 내보내는 프로젝트다.

에디터는 브랜드의 서체와 색, 여백, 컴포넌트 패턴을 따라가며 생성할 때 적용한다. 새 요소는 모두 같은 토큰을 물려받으므로, 어긋난 곳을 손으로 잡지 않아도 페이지가 브랜드 안에 머문다. 디자인 시스템이 엄격한 팀에는 이 일관성이 생성 속도보다 중요하다.

팀은 프로젝트를 공유하고 같은 캔버스에서 동시에 작업한다. Figma에서 협업하던 방식 그대로다. 리비전 기록이 모든 변경을 남기므로 누구든 이전 버전으로 돌아갈 수 있다. 이 안전망이 있으면 과감한 레이아웃도 잃을 걱정 없이 시도한다.

Onlook에서는 디자인 위에 div와 텍스트를 직접 따라 그려 대응하는 코드를 실시간으로 만들어낸다. 익숙한 단축키는 다른 디자인 도구에서 그대로 넘어오므로 손이 기억한 동작을 쓸 수 있다. 레이어는 컴포넌트 트리가 빽빽한 구역에서도 중첩 요소를 정확히 고르게 해준다.

완성한 작업은 GitHub나 링크, 자체 도메인으로 내보낸다. Onlook은 Apache 2.0 라이선스의 오픈소스라 무료로 셀프 호스팅하고 디자인과 코드 변경을 자기 인프라에 둘 수도 있다. 호스팅 버전은 브랜치, 테마, SSO 같은 팀 기능을 별도 견적 가격으로 더한다.