SiteForge 소개: 진짜 프리미엄 AI 웹사이트를 만드는 엔진

모든 AI 웹사이트 제작 도구에는 똑같은 근본적인 문제가 있어요. AI가 디자인, 레이아웃, 타이포그래피, 색상, 여백, 반응형까지 모든 것을 한 번에 처리하고, 전부 잘 나오기를 바라는 거예요. 가끔은 잘 나와요. 하지만 더 자주 "AI스러운" 결과물이 나와요. 익숙한 레이아웃, 무난한 글꼴, 뻔한 색상 팔레트요. 열 개를 나란히 놓으면 하나로 뭉개져 보이죠.

우리는 이 문제를 밑바닥부터 풀기로 했어요. 오늘은 SiteDrop에 만든 가장 큰 변화를 공유해요. SiteForge는 AI가 잘하는 일과 못하는 일을 분리해서, 템플릿 같지 않은 진짜 맞춤형 웹사이트를 만들어 내는 전용 웹사이트 컴파일러 엔진이에요.

원본 HTML 방식의 AI 웹사이트가 한계에 부딪히는 이유

ChatGPT, Claude, Gemini가 웹사이트를 만들 때는 원본 HTML과 CSS를 써요. 그러면 AI는 그래픽 디자이너, 타이포그래퍼, 색채 이론가, 접근성 전문가, 프런트엔드 개발자 역할을 한 번의 응답 안에서 동시에 해내야 해요.

결과물은 그 나름대로 인상적이에요. 하지만 분명한 한계가 있어요.

• 타이포그래피는 감에 의존해요.AI는 학습 데이터에서 본 글꼴을 골라요. 모듈식 글자 크기 체계도, 계산된 자간도, 굵기 단계도 없어요. 제목과 본문이 그저 "괜찮아 보일" 뿐이에요.
• 색상 팔레트가 피상적이에요. 주 색상과 포인트 색상은 나오지만, 체계적으로 만들어 낸 배경 채우기, 어두운 띠, 명암비를 확인한 중간 톤, 상호작용 상태 단계는 없어요.
• 레이아웃이 반복돼요. AI는 수천 번 본 무난한 패턴으로 돌아가요. 히어로 → 특징 → 추천 후기 → CTA. 매번 똑같아요.
• 반응형 디자인이 불안정해요. 미디어 쿼리를 계산하지 않고 짐작해서 씁니다. 게시한 뒤에야 모바일에서 깨지는 부분을 발견하게 돼요.

이건 AI의 결함이 아니에요. 안전망이 없는 형식(원본 HTML)으로 모든 것을 한꺼번에 시키는 방식의 결함이에요.

SiteForge의 접근 방식: 생성기가 아니라 컴파일러

SiteForge는 근본적으로 다르게 작동해요. AI에게 HTML을 쓰게 하는 대신, 작업을 두 단계로 나눠요.

1. AI는 창의적인 결정을 내려요. 구조(어떤 섹션을 어떤 순서로 넣을지), 브랜드 팔레트, 글꼴 조합, 문구, 이미지 방향을 정해요. 그리고 이를 원본 마크업이 아니라 구조화된 사양인 SiteSpec으로 내놓아요.
2. 컴파일러는 엔지니어링을 맡아요. 결정적인 엔진이 SiteSpec을 읽고, 보장된 명암비, 계산된 글자 크기 체계, 알맞은 반응형 기준점, 매끄러운 배경 교차, 작동하는 내비게이션 앵커를 갖춘 완벽한 HTML을 만들어요. 매번 똑같이요.

프로그래밍 언어의 컴파일러를 떠올려 보세요. 프로그래머는 고수준 코드(창의적 의도)를 써요. 컴파일러는 최적화된 기계어 코드(다듬어진 웹사이트)를 만들어요. 프로그래머는 메모리나 CPU 레지스터를 관리할 필요가 없어요. 컴파일러가 모두 처리하니까요.

무엇이 만들어질까요?

차이는 미묘하지 않아요. SiteForge로 만든 사이트는 하나하나 다른 에이전시가 디자인한 것처럼 보여요. 시스템이 각 업종과 분위기에 무엇이 필요한지 이해하기 때문이에요.

• 엄선한 타이포그래피 조합."Google Fonts에서 아무거나 고르기"가 아니에요. 꼼꼼히 테스트한 제목/본문 글꼴 쌍 라이브러리를 만들었어요. 에디토리얼 느낌의 법률 사무소에는 Playfair Display와 Inter, 분위기 있는 이발소에는 Bebas Neue와 Instrument Serif, 현대적인 SaaS에는 Space Grotesk와 DM Sans를 짝지어요. 각각 모듈식 글자 크기, 자간 단계, 굵기 체계, 행간 구조를 갖췄어요.
• 체계적인 색상 팔레트. 모든 팔레트는 Radix 방식의 완전한 체계예요. 배경, 표면, 텍스트, 흐린 톤, 더 옅은 톤, 선, 포인트 색상(호버와 활성 상태 포함), 보조 색상, 어두운 띠, 칩 배경까지요. 모두 WCAG AA 기준으로 명암비를 확인해요.
• 디자인 처리. AI가 그라디언트, 그림자, 모서리 둥글기, 표면 질감(그레인, 점, 격자), 구분선 스타일(각도, 곡선, 아치), 이미지 프레임 같은 시각적 처리를 고르면 컴파일러가 모든 섹션에 일관되게 적용해요.
• 배경의 리듬. 인접한 두 섹션이 같은 배경을 쓰지 않아요. AI가 블록 순서를 어떻게 정했든 컴파일러가 배경을 자동으로 번갈아 적용해서 시각적으로 숨 쉴 공간을 만들어요.
• 작동하는 내비게이션 보장.모든 앵커 링크가 제대로 연결돼요. 끊어진 링크는 자동으로 바로잡혀요. AI가 내비게이션을 빠뜨리면 새로 만들어 넣어요. 이 모든 것이 결정적으로 처리되기 때문에 "아무 데도 가지 않는" CTA는 없어요.

20가지가 넘는 전용 블록 유형

SiteForge는 글자만 바꾸는 템플릿이 아니에요. 엔진에는 AI가 조합해서 쓸 수 있는 풍부한 블록 유형 라이브러리가 들어 있어요.

• 히어로 변형 — 전체 화면, 오른쪽 패널, 왼쪽 패널, 배경 분할, 콜라주가 있고, 미디어 위치, 텍스트 정렬, 통계 배치, 태그 카드를 위한 구성 제어도 갖췄어요.
• 콘텐츠 블록 — 특징 격자, 아이콘 격자, 번갈아 나오는 행, 통계 카운터, 탭 콘텐츠, 과정/타임라인 단계, 팀원 카드, 프로젝트 갤러리예요.
• 사회적 증거 — 추천 후기 캐러셀, 소셜 게시물 임베드, 로고 바, 전후 비교 슬라이더, 사례 연구 블록이에요.
• 전환 — 가격 단계, 예약 CTA, 마지막 CTA, FAQ 아코디언, 지도 연동이 되는 문의 양식이에요.

모든 블록 유형에는 고유한 CSS, 고유한 반응형 동작, 고유한 명암비와 여백 로직이 있어요. 모두 결정적이고, 모두 테스트를 거쳤어요.

플레이북 아키텍처

이 구조를 확장할 수 있게 해 주는 것이 Playbook 패턴이에요. 컴파일러는 Playbook의 순수 함수예요. Playbook을 바꾸면 같은 엔진에서 다른 디자인 언어가 나와요.

Playbook에는 이런 것들이 묶여 있어요.

• 문법 — AI가 따르는 창의적 브리프예요.
• 스스로 설명하는 스키마 — AI가 결과를 내놓는 구조화된 사양이에요 (출력을 제한하면서 동시에 AI에게 그 언어를 가르쳐 줘요).
• 블록 렌더러 — 섹션 유형별 마크업 함수예요.
• 기본 CSS — 확정된 팔레트와 글꼴 조합에서 생성되는 디자인 시스템 토큰이에요.
• 디자인 리졸버 — AI의 창의적 선택을 엔진이 바로 쓸 수 있는 토큰(명암비 단계, 굵기 단계, 반응형 클램프)으로 바꿔요.

그 결과 AI는 창의적인 방향을 몇 줄만 쓰고, 엔진은 디자인 에이전시라면 수천 달러를 청구했을 웹사이트를 만들어 내요.

여러분에게 어떤 의미일까요?

SiteDrop의 만들기 화면에서 비즈니스에 대한 질문에 답하고 분위기를 고르면, 이제 받는 웹사이트는 SiteForge로 만들어져요. 경험은 그대로예요(질문에 답하면 사이트가 나와요). 품질은 한 단계 도약했어요.

• 프리미엄 타이포그래피가 제멋대로인 글꼴 선택이 아니라 실제 디자인 시스템을 따라요.
• 깊이 있는 색상 팔레트 — 배경, 띠, 호버 상태, 명암비 보장이 들어 있어요.
• 숨 쉬는 레이아웃 — 알맞은 여백, 배경 교차, 시각적 위계가 있어요.
• 처음부터 모바일에 완벽하게 — 반응형 동작이 AI의 짐작이 아니라 엔진에 내장돼 있어요.
• 작동하는 문의 양식 — 연락처 데이터가 결정적으로 정리돼요(E.164 전화번호, 표시용 라벨, 주소 형식).

HTML은 여전히 내 것이에요. 여전히 내려받고, 수정하고, 어디에서든 호스팅할 수 있어요. 달라진 점은 처음부터 받는 결과물이 훨씬 좋아졌다는 거예요.

정리하면

AI는 창의적인 결정을 내리는 데 뛰어나요. 비즈니스에 맞는 분위기, 문구, 구조를 고르는 일이죠. 하지만 그 결정을 다듬어지고, 접근성이 갖춰지고, 반응형인 웹사이트로 바꾸는 정밀한 엔지니어링에서는 덜 믿을 만해요.

SiteForge는 AI가 잘하는 일은 AI에게 맡기고, 나머지는 품질을 보장하는 결정적인 엔진이 처리해요. 그 결과 "AI스러운" 느낌이 아니라 진짜 프리미엄으로 보이는 AI 웹사이트가 나와요.