OpenUI: AI 기반 UI 생성기

1. 프로젝트 개요

OpenUI는 개발자가 일상적인 언어로 사용자 인터페이스를 설명하면 브라우저에서 즉시 실시간 렌더링된 결과를 확인할 수 있게 해 주는 LLM 기반 오픈소스 애플리케이션입니다. 이후 결과물을 깔끔한 HTML/CSS 또는 프레임워크별 코드(React, Svelte, Web Components 등)로 내보낼 수 있습니다.

2. 배경 및 포지셔닝

OpenUI는 기계 학습 실험 추적으로 유명한 Weights & Biases (W&B) 사에서 차세대 LLM 기반 개발자 도구가 어떤 모습일지 탐구하기 위해 만든 내부 프로토타입입니다. 자연어 의도를 마크업을 직접 작성하지 않고 동작하는 프론트엔드 코드로 변환한다는 아이디어를 더 많은 사람들이 실험해 볼 수 있도록 공개되었습니다.

개념적으로 OpenUI는 사유 "텍스트-UI" 생성기와 같은 영역에 있지만, 관대한 라이선스를 따르는 완전한 오픈소스라는 점, 특정 AI 공급업체에 종속되지 않는 공급업체 독립적이라는 점, 그리고 자체 호스팅이 가능하다는 점에서 차별화됩니다. 즉, 팀은 폐쇄적이고 호스팅되는 서비스에 의존하는 대신 Ollama를 통한 로컬 모델 사용을 포함해 자체 인프라에서 전적으로 실행할 수 있습니다.

3. 기능 카테고리

🤖 LLM 공급업체 통합 — 9개의 백엔드 지원 — OpenAI, Anthropic Claude, Google Gemini, Groq, Mistral, Cohere, Ollama(로컬 모델), 모든 OpenAI 호환 엔드포인트, 그리고 통합 프록시 역할을 하는 LiteLLM — 팀은 비용, 개인정보 보호 및 지연 시간 요구 사항에 따라 클라우드 공급업체, 자체 호스팅 로컬 모델을 선택하거나 여러 모델을 혼합하여 사용할 수 있습니다.
🎨 코드 내보내기 대상 — 4개 이상의 출력 형식 — 순수 HTML/CSS, React, Svelte 및 Web Components — 생성된 마크업을 팀이 이미 사용 중인 프레임워크로 변환하여 출력물을 기존 코드베이스에 직접 붙여넣을 수 있게 합니다.
🖥️ 실시간 미리보기 및 반복 작업 — 채팅 기반 개선, 즉각적인 렌더링 미리보기, 메시지별 기록 — 개발자가 코드를 만지지 않고도 변경 사항("버튼을 더 크게", "다크 테마로 전환" 등)을 계속 설명하며 UI가 실시간으로 업데이트되는 것을 볼 수 있습니다.
👁️ 시각 지원 개선 — 시각 인식 모델을 위한 스크린샷 기반 피드백 — 사용자가 스크린샷(예: 디자인 목업 또는 렌더링 버그)을 첨부할 수 있어 LLM이 생성된 UI를 시각적 참조와 일치시킬 수 있습니다.
🐳 배포 옵션 — 4가지 설정 경로 — 사전 빌드된 Docker 이미지, Docker Compose(Ollama 포함), uv를 통한 소스 설치, GitHub Codespaces/Gitpod용으로 준비된 Dev Containers — 한 줄짜리 데모부터 완전히 맞춤화된 로컬 개발 환경까지 모든 것을 다룹니다.

4. 주요 하이라이트

자연어-UI 생성 — 컴포넌트나 전체 레이아웃을 한 문장으로 설명하면 몇 초 안에 렌더링되고 편집 가능한 결과를 얻을 수 있어, 새 UI를 처음부터 시작할 때 겪는 빈 캔버스 문제를 해결합니다.
공급업체 독립적 아키텍처 — 내부적으로 LiteLLM을 사용하므로, 예를 들어 OpenAI에서 로컬 Ollama 모델로 전환하는 것은 코드 변경이 아닌 구성 변경으로 이루어집니다.
다중 프레임워크 내보내기 — 동일하게 생성된 디자인을 순수 HTML, React, Svelte 또는 Web Components로 변환할 수 있어, 디자인을 특정 기술 스택으로 옮겨야 할 때의 재작업을 줄여줍니다.
Ollama를 통한 로컬 우선 옵션 — 데이터 개인정보 보호나 비용 제약이 있는 팀은 스크린샷 기반 개선을 위한 Llava 같은 시각 모델을 포함하여 로컬 오픈 웨이트 모델을 사용해 전체 파이프라인을 오프라인으로 실행할 수 있습니다.
대화형 반복 루프 — 수동 CSS 조정 대신 채팅을 통해 개선이 이루어지므로 기술 및 비기술 사용자 모두에게 빠른 피드백 루프를 유지합니다.
마찰 없는 체험 — API 키와 함께 단일 docker run 명령만으로 작동하는 인스턴스를 띄울 수 있으며, 로컬 설정 전에 평가할 수 있는 공개 데모도 제공됩니다.

5. 역할별 사용 사례

일반 개발자 — 일상 언어 설명에서 UI 컴포넌트나 프로토타입 레이아웃을 빠르게 구성한 다음, 현재 프로젝트에서 사용하는 프레임워크로 직접 내보냅니다.
데이터/연구 과학자 — 깊은 프론트엔드 전문 지식 없이 내부 도구, 대시보드 또는 ML 데모 앱을 위한 간단한 프론트엔드를 구축합니다. 특히 이미 실험 추적을 위해 W&B를 사용 중인 팀에 유용합니다.
프로젝트 매니저 / 제품 소유자 — 엔지니어링 작업이 시작되기 전에 이해관계자들의 의견을 맞추기 위해 기능 설명이나 와이어프레임 아이디어를 클릭 가능한 시각적 프로토타입으로 몇 분 만에 변환합니다.

6. 시작하기

필요한 정보 찾기 — 주요 README와 backend/README.md 및 프론트엔드 README에 있는 컴포넌트별 문서를 읽거나, 설치 전에 호스팅된 데모를 사용해 보세요:

open https://openui.fly.dev

설치 / 통합 — 가장 빠른 경로는 사전 빌드된 Docker 이미지를 사용하는 것입니다:

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

그런 다음 http://localhost:7878에 접속하세요. 소스에서 실행하려면(git 및 uv 필요):

git clone https://github.com/wandb/openui.git
cd openui/backend
uv sync --all-extras
export OPENAI_API_KEY=xxxx
uv run python -m openui --dev

기여하기 — 저장소를 포크하고 main 브랜치에서 새 브랜치를 만든 다음, 기존 PR 규칙에 따라 풀 리퀘스트를 제출하세요:

git clone https://github.com/wandb/openui.git
cd openui
git checkout -b my-feature

새로운 작업을 시작하기 전에 열려 있는 이슈에서 좋은 첫 이슈를 확인하세요.

7. 프로젝트 구조

openui/
├── backend/          # Python API 서버: LLM 오케스트레이션, LiteLLM 구성, HTML 생성
│   └── README.md     # 백엔드별 설정 및 환경 변수
├── frontend/         # React 기반 웹 UI: 채팅 인터페이스, 실시간 미리보기, 코드 내보내기
├── .devcontainer/     # Codespaces / Gitpod용으로 사전 구성된 개발 환경
└── docker-compose.yml # OpenUI와 로컬 Ollama 인스턴스를 묶어 놓은 Compose 설정

핵심 파일: backend/는 채팅 프롬프트를 렌더링된 마크업으로 변환하는 모델 라우팅 로직을 포함합니다. frontend/는 실시간 미리보기를 렌더링하고 React/Svelte/Web Components로의 변환을 처리합니다. .devcontainer/는 기여자가 원클릭으로 작동하는 환경을 얻을 수 있게 해줍니다.

8. 관련 생태계

상위 종속성: LiteLLM(통합 LLM API 프록시), Ollama(로컬 모델 런타임), 그리고 통합되는 다양한 클라우드 LLM API(OpenAI, Anthropic, Google Gemini, Groq, Mistral, Cohere).
출시 조직: Weights & Biases에서 제작했으며, OpenUI는 원래 내부 도구 프로토타입으로서 그들의 실험 추적 플랫폼을 보완하기 위해 만들어졌습니다.
보완 도구: 더 넓은 AI 지원 프론트엔드 개발 영역에서 다른 "프롬프트-UI" 도구들과 나란히 자리 잡고 있으며, 폐쇄적인 호스팅 생성기에 대한 오픈소스, 자체 호스팅 대안을 제공합니다.

9. 라이선스

OpenUI는 Apache License 2.0으로 배포됩니다.

✅ 상업적 사용, 수정, 배포 및 개인 사용이 모두 허용됩니다.
❌ 라이선스는 어떠한 보증도 제공하지 않으며, 저자로부터의 책임 보장도 없습니다.
ℹ️ Apache-2.0은 기여자로부터 명시적인 특허 허여를 포함하므로, 많은 팀이 기업 도입 시 덜 명시적인 관대한 라이선스보다 선호합니다.

10. FAQ

Q: OpenUI를 사용하려면 모든 LLM 공급업체의 API 키가 필요한가요?
A: 아니요. 모든 공급업체 키는 선택 사항입니다. 사용하려는 공급업체의 키만 설정하면 됩니다(예: OPENAI_API_KEY만 설정). Ollama를 통해 완전히 로컬로 실행하는 경우에는 키가 전혀 필요하지 않습니다.

Q: 데이터를 클라우드 AI 공급업체로 전송하지 않고 OpenUI를 사용할 수 있나요?
A: 네. OpenUI는 번들로 제공되는 docker-compose.yml 설정을 통해 Ollama를 이용해 시각 모델을 포함한 로컬 모델을 대상으로 전적으로 실행할 수 있습니다.

Q: 생성된 UI를 어떤 프레임워크로 내보낼 수 있나요?
A: 순수 HTML/CSS, React, Svelte 및 Web Components가 모두 내보내기 대상으로 지원됩니다.

Q: 설치 전에 OpenUI를 어디서 체험해 볼 수 있나요?
A: 공개 데모는 openui.fly.dev에서 이용할 수 있습니다.

Q: OpenUI가 사용하는 모델을 어떻게 사용자 정의하나요?
A: OpenUI는 환경 변수에서 LiteLLM 구성을 자동으로 생성합니다. OPENUI_LITELLM_CONFIG 경로를 통해 사용자 정의 구성을 제공하거나 작업 디렉터리에 구성 파일을 배치할 수도 있습니다.

11. 빠른 링크

저장소: github.com/wandb/openui
백엔드 문서: backend/README.md
이슈 / 기여 트래커: github.com/wandb/openui/issues
풀 리퀘스트: github.com/wandb/openui/pulls
라이브 데모: openui.fly.dev

12. 요약

OpenUI는 프론트엔드 개발의 지루한 첫 단계인 아이디어를 마크업으로 변환하는 과정을, 팀이 선택한 클라우드 또는 로컬 LLM 기반의 대화형이며 거의 즉각적인 프로세스로 바꿔줍니다. 관대한 오픈소스 라이선스 아래에서 UI를 빠르게 프로토타입하고, LLM 지원 디자인 워크플로를 평가하거나, 폐쇄적인 텍스트-UI 도구를 대체하는 완전한 자체 호스팅 대안을 실행하려는 개발자 및 제품 팀에 가장 유용합니다.