웹사이트를 구축한다는 것은 전통적으로 복잡한 코드, 호스팅 설정, 레이아웃 디자인과 씨름하는 것을 의미했습니다. 이는 지역 소상공인과 비기술적 크리에이터들이 온라인 활동을 전혀 하지 못하게 만드는 장벽이었습니다.

하지만 휴대폰으로 일반적인 대화를 나누는 것만으로 완전한 반응형 맞춤형 웹사이트를 구축할 수 있다면 어떨까요?

그것이 바로 Chat2Site의 아이디어입니다. Chat2Site는 자연어를 완전히 배포된 에지 호스팅 (edge-hosted) 웹사이트로 변환하는 대화형 마이크로 SaaS (micro-SaaS) 플랫폼입니다.

깨진 레이아웃, 누락된 태그, 잘못된 CSS와 같은 일반적인 "AI 코드 환각 (AI code hallucinations)"을 피하기 위해, 저는 Google의 오픈 웨이트 (open-weights) 모델인 Gemma 2 9B를 중심으로 이를 구축했습니다. 이 프로젝트가 어떻게 구성되었는지, 아키텍처가 어떻게 작동하는지, 그리고 왜 Gemma 2 9B가 이 프로젝트에 적합한 선택이었는지 소개합니다.

도전 과제: LLM 코드 생성에서의 구조적 일관성
표준 LLM (Large Language Model)에게 채팅 대화로부터 직접 프론트엔드 코드를 생성하도록 요청하면 두 가지 문제가 빠르게 나타납니다:

1. 구조적 환각 (Structural hallucinations) — LLM은 산문을 작성하는 데는 능숙하지만, 긴 컨텍스트 윈도우 (context windows) 동안 엄격한 구문을 유지하는 데 어려움을 겪습니다. 닫히지 않은 태그 하나나 잘못된 JSON 문자열 하나만 있어도 전체 레이아웃이 무너집니다.
2. 리소스 및 지연 시간 제약 (Resource and latency constraints) — 실시간 채팅-코드 생성을 위해 대형 모델을 실행하는 것은 느리고 비용이 너무 많이 들어 마이크로 SaaS 제품으로서 경제성이 떨어집니다.

이 프로젝트에 실제로 필요했던 것은 효율적이고, 코드에 잘 튜닝되어 있으며, 엄격하게 구조화된 출력을 생성하는 데 신뢰할 수 있는 모델이었습니다.

Google의 Gemma 2 9B의 등장 🧠
Google의 Gemini 모델과 동일한 기초 연구를 바탕으로 구축된 Gemma 2 9B는 작지만 진정으로 유능한 오픈 웨이트 (open-weights) 모델입니다.
약 8조 개의 토큰(대부분 웹 문서 및 코드)으로 학습되었으며, 더 큰 교사 모델 (teacher models)로부터의 지식 증류 (knowledge distillation)를 통해 더욱 정교해진 이 모델은 크기에서 기대할 수 있는 것보다 훨씬 뛰어난 성능을 발휘합니다. Gemma 2 9B의 추론 능력과 구조화된 텍스트를 파싱하는 능력은 스키마 제약이 있는 생성 (schema-constrained generation) 작업에 자연스럽게 부합했습니다.

Chat2Site의 작동 방식: 2단계 파이프라인 (Dual-Stage Pipeline)

Gemma 2 9B에게 오류 발생 가능성이 너무 높은 가공되지 않은 HTML과 CSS를 처음부터 작성하도록 요청하는 대신, Chat2Site는 구조를 온전하게 유지하도록 설계된 2단계 컴파일 파이프라인 (two-stage compilation pipeline)을 실행합니다.

1단계: 스키마 제약 정보 추출 (Schema-Constrained Information Extraction)
사용자는 텔레그램 봇이든 웹 채팅 인터페이스든 대화형 클라이언트와 대화합니다. Gemma 2 9B는 이러한 다회차 대화 (multi-turn conversation)를 읽고 이를 구조화된 JSON 스키마 (JSON schema)로 매핑합니다:

json{
"business_name": "Bayside Bakery",
"hero_headline": "Artisanal Sourdough Baked Daily",
"primary_color": "#D2B48C",
"services": [
{"name": "Croissants", "price": "$4.50"},
{"name": "Sourdough Boule", "price": "$8.00"}
]
}

Gemma 2 9B는 지시 사항을 밀접하게 따르기 때문에 출력 형식이 일관되게 유지됩니다. 모델이 관련 변수들을 깔끔하게 추출해 내는데, 이는 완전성 (completeness)과 정확성 (correctness)이 크게 향상된 주요 원인 중 하나입니다.

2단계: 템플릿 컴파일 및 엣지 배포 (Template Compilation and Edge Deployment)
해당 JSON이 검증되면, 구조화된 데이터는 미리 구축된 반응형 (responsive) HTML/CSS 템플릿 그리드에 주입됩니다. 이것이 깨진 div나 결함이 있는 스크립트의 위험을 제거하는 핵심입니다. 레이아웃은 애초에 자유롭게 생성된 것이 아니기 때문입니다. 최종적인 정적 번들 (static bundle)은 글로벌 엣지 호스팅 (edge hosting)으로 직접 배포되며, 1분 이내에 업체 웹사이트가 라이브 상태가 됩니다.

이 프로젝트에서 Gemma 2 9B가 빛난 이유

• 신뢰할 수 있는 JSON 생성 — 시스템 프롬프트 (system prompt)를 밀접하게 따랐으며, 경로를 벗어나지 않고 유효하며 파싱 가능한 (parsable) JSON을 일관되게 생성했습니다.
• 진정한 효율성 — Grouped-Query Attention 및 최적화된 아키텍처 (architecture) 덕분에 추론 (inference) 속도가 빠르게 유지되어, 대화가 실시간으로 매끄럽게 이어졌습니다.
• 낮은 운영 오버헤드 (operational overhead) — 9B 파라미터 규모의 오픈 모델로서 호스팅 비용이 저렴하고 용이하며, 이는 마이크로 SaaS (micro-SaaS) 제품의 재정적 지속 가능성을 유지하는 데 매우 중요합니다.

전체적인 그림: 디지털 포용 (Digital Inclusion)
Google의 오픈 웨이트 (open-weights) 모델을 직관적인 채팅 기반 인터페이스와 결합함으로써, 지역 상인들은 단 몇 분 만에 온라인에 진출하고, 값비싼 대행사 수수료를 건너뛰며, 지역 디지털 경제와 직접 연결될 수 있습니다.
오픈 웨이트 LLM (Large Language Models)으로 가능한 한계를 넓힐 수 있도록 도구와 리소스, 그리고 격려를 보내준 Google Cloud Gen AI Academy APAC 커뮤니티에 깊은 감사를 표합니다.
💡 라이브 MVP 프로토타입: cha2site.streamlit.app