버그가 있을 수 있습니다 — 이것은 프리 알파 버전입니다 (내일 업데이트를 출시할 예정입니다).

🚀 AI 및 개발 도구의 새로운 혁신

현재의 모든 AI 빌더는 한쪽을 선택하도록 강요합니다:

• **시각적 웹사이트 빌더(visual website builder)**를 사용하거나 (레이아웃과 디자인에는 좋지만, 상태(state)와 로직이 있는 실제 작동하는 앱이 필요할 때는 형편없고),
• 또는 **AI 코딩 작업 공간(AI coding workspace)**을 사용합니다 (앱 작성에는 좋지만, 그 앱을 전체 웹사이트 레이아웃 안에 배치하고 시각적으로 조정하고 싶을 때는 형편없습니다).

오늘 저는 [Openconstructor] 내에 Code Mode의 프리 알파 버전을 출시했습니다 — 하나의 브라우저 스튜디오에서 두 세계를 연결합니다.

👉 Code Mode (Pre-Alpha) 실시간 체험하기 (무료, 가입 불필요): https://openconstructor.pw
👉 GitHub 저장소 (MIT): https://github.com/Kuloka/openconstructor

Code Mode 작동 방식 (그리고 이것이 다른 이유)

Code Mode에서는 단순히 정적인 UI 섹션을 생성하는 것이 아니라, AI와 채팅하여 실제 JavaScript 로직, 상태(state), 인터랙티브 컨트롤 및 라이브 미리보기가 있는 완전하고 작동하는 애플리케이션을 작성합니다.

그리고 여기가 핵심 워크플로우입니다:
앱이 Code Mode에서 준비되는 순간, 원클릭으로 시각적인 웹 생성기(Web Constructor) 캔버스에 직접 배치할 수 있습니다!

1. Code Mode에서 전체 인터랙티브 앱 작성: AI에게 작동하는 계산기, SaaS ROI 추정기, 칸반 보드(Kanban board), 인터랙티브 가격 구성기(pricing configurator), 대시보드 위젯 또는 미니 게임을 구축하도록 요청합니다.
2. 웹 빌더에 바로 배치: 새로 코딩한 앱을 320개 이상의 순수 HTML/CSS 컴포넌트 및 [준비된 웹사이트 템플릿] 옆의 시각적 캔버스에 바로 배치합니다.
3. 모든 것을 함께 내보내기 또는 게시: 원클릭으로 라이브 공유 링크에 게시하거나, HTML, React (Vite .zip), Vue, Svelte, Roblox Luau (ScreenGui / .rbxmx), 또는 **LÖVE 2D (Lua)**로 내보냅니다.

⚡ 무거운 코드 모드 작업용 전문가 팁: 초저가 고처리량(High-TPS) 모델 사용하기 (OpenRouter를 통한 GLM 5.3 Flash와 같은 모델)

코드 모드에서 수백 줄에 달하는 전체 인터랙티브 애플리케이션을 작성하는 것은 단일 히어로 섹션을 생성하는 것보다 훨씬 많은 자원을 소모합니다. 만약 모델이 초당 15~20 토큰으로 스트리밍한다면, 무거운 앱 빌드는 너무 오래 걸립니다.

Openconstructor는 기본적으로 무료 AI 티어(가입 없이 하루 3회 무료 생성, 무료 계정 사용 시 하루 20회)를 포함하고 있지만, 무거운 코드 모드 워크로드의 경우 OpenRouter 키를 연결하고 초고속의 초저가 Flash급 모델 — 특히 OpenRouter를 통한 GLM 5.3 Flash — 을 선택하는 것을 강력히 권장합니다:

• 대용량 토큰 처리 속도(Massive Tokens Per Second, TPS): GLM 5.3 Flash와 같은 고처리량 모델은 코드를 매우 빠른 속도로 스트리밍하여, 무거운 전체 앱 생성 시간을 분 단위에서 초 단위로 단축시킵니다.
• 소액의 비용: 비싼 최첨단(frontier) 모델 크레딧을 소모하지 않고도 코드 모드에서 거의 즉각적인 반복 코딩이 가능합니다.
• 100% 클라이언트 측 키 저장: 사용자의 OpenRouter (또는 Groq / Gemini / Anthropic / DeepSeek) API 키는 브라우저에 암호화되어 로컬로 보관됩니다.

속도 및 품질 비교는 **AI 모델 벤치마크 페이지**에서 확인하실 수 있습니다.

⚠️ 주의 사항: 코드 모드는 현재 프리 알파(Pre-Alpha) 버전입니다

100% 투명하게 말씀드리자면, 코드 모드는 현재 프리 알파(Pre-Alpha) 상태이므로 AI가 복잡한 코드를 작성하거나 업데이트할 때 가끔 버그나 미흡한 부분이 발생할 수 있습니다.

저는 현재 적극적으로 버그를 수정하고 코드 생성 파이프라인을 개선하고 있습니다. 만약 프롬프트가 작동하지 않는 코드나 예상치 못한 오류를 생성한다면, 댓글로 알려주시거나 GitHub에 이슈를 열어주시면 빠르게 패치하겠습니다!

지금 바로 코드 모드(Pre-Alpha) 사용해 보기

모든 것이 별도의 설정 없이 브라우저에서 직접 실행됩니다.

• Live Studio (Code Mode 포함): [https://openconstructor.pw]
• 전체 웹사이트 템플릿: [https://openconstructor.pw/templates]
• AI 모델 속도 및 비용 벤치마크: [https://openconstructor.pw/ai-models]
• 변경 로그 (Changelog): [https://openconstructor.pw/changelog]
• GitHub: [https://github.com/Kuloka/openconstructor]

(저희의 *_$5 커뮤니티 지원 목표**는 상단 바의 Support 버튼을 통해 여전히 진행 중입니다 — 첫 $5가 들어오는 즉시, 저는 추가 무료 모델을 잠금 해제하고 모두를 위한 일일 제한을 높일 것입니다!)

Code Mode를 테스트하여 작동하는 앱을 웹 캔버스에 배치해 보세요. 그리고 댓글로 무엇이 고장 나는지(혹은 무엇이 잘 작동하는지!) 알려주세요!