AI로 웹사이트를 디자인하고 코딩하세요!

온룩(Onlook)은 AI 챗(Chat) 기능을 통해 텍스트나 이미지로부터 웹사이트를 생성하고 편집할 수 있도록 지원한다. 사용자는 AI 챗(Chat)을 통해 코드 생성, 스타일 변경, 레이아웃 조정 등 다양한 작업을 수행할 수 있다. 특히, AI 모델(AI Model)을 활용하여 코드 이해 및 자동 완성을 제공함으로써 개발 생산성을 향상시킨다. 이는 AI 기반의 웹 개발(AI-driven Web Development)을 위한 새로운 접근 방식을 제시한다.

온룩(Onlook)은 실시간 시각 편집(Real-time Visual Editing) 기능을 제공하여 브라우저(Browser) 내에서 직접 웹사이트를 편집할 수 있다. 사용자가 UI를 변경하면 해당 변경 사항이 즉시 코드에 반영된다. 이는 iFrame 기반의 렌더링(iFrame-based Rendering)을 통해 구현되며, 코드와 디자인 간의 일관성(Consistency)을 유지한다. 또한, Figma와 유사한 UI를 제공하여 디자인 툴(Design Tool) 사용 경험을 웹 개발 환경에 통합한다.

온룩(Onlook)은 Next.js와 TailwindCSS를 기반으로 구축되어 있으며, tRPC를 사용하여 서버 인터페이스(Server Interface)를 구현한다. Next.js의 서버 사이드 렌더링(Server-side Rendering) 및 정적 사이트 생성(Static Site Generation) 기능을 활용하여 성능을 최적화한다. TailwindCSS를 통해 스타일 관리(Style Management)를 효율적으로 수행하며, Supabase를 데이터베이스(Database)로 사용하여 인증, 데이터 저장, 파일 관리를 처리한다.

온룩(Onlook)은 선언적(Declarative) DOM 요소를 표시하는 모든 언어 또는 프레임워크로 확장 가능하도록 설계되었다. 현재는 Next.js와 TailwindCSS에 초점을 맞추고 있지만, 다양한 프레임워크 지원(Framework Support)을 위한 기반을 마련하고 있다. CodeSandboxSDK, Freestyle과 같은 샌드박스(Sandbox) 및 호스팅(Hosting) 솔루션과의 통합을 통해 개발 및 배포 과정을 간소화한다. 이는 플랫폼 독립성(Platform Independence)을 확보하고, 개발자(Developer)의 선택 폭을 넓히는 데 기여한다.