AI는 홈페이지, Pricing, Blog 페이지를 빠르게 생성할 수 있지만 버튼, 글꼴, 간격, CTA가 일관되지 않은 결과를 만들기도 합니다. 이 글에서는 Agent에 캔버스를 개방하는 Figma의 제품 방향, 디자인 시스템 연구, We0.ai의 ...
생성형 AI는 일반적으로 현재 작업을 기준으로 페이지의 목표를 해석합니다. 홈페이지는 브랜드의 첫인상에 집중하고, Pricing은 요금제 비교에 집중하며, Blog는 글 읽기에 집중합니다. 매번 처음부터 생성하면 모델은 각 부분의 문제에 대해 “그럴듯해 보이는” 답을 따로 찾게 되고, 그 결과 국소 최적화가 발생합니다.
이는 단순한 미관상의 문제가 아닙니다. 시각적 불일치는 방문자가 정보를 이해하는 데 필요한 비용을 높이고, 유지보수, 콘텐츠 게시, 후속 실험을 느리게 만듭니다. SaaS, AI 제품, B2B 기업의 공식 웹사이트는 브랜드 소개, 제품 교육, 콘텐츠 배포, 리드 수집을 동시에 담당하는 경우가 많습니다. 페이지 규칙이 무너지면 전체 고객 확보 경로에 영향을 줍니다.
Design System은 디자이너만 읽는 규정 문서가 아니라, 브랜드에 관한 결정을 팀과 AI가 함께 재사용할 수 있는 “인터페이스”로 변환하는 체계입니다. 최소한 다음 네 가지 계층을 포함합니다.
연구 결과는 디자인 시스템만으로 항상 충분한 것은 아니라는 점도 보여줍니다. 전문 개발자 49명을 대상으로 수작업 개발, 디자인 시스템만 사용한 방식, 기업 디자인 시스템과 결합한 AI 지원 워크플로를 비교한 통제 실험에서는 디자인 시스템을 인식하는 AI가 납품 시간, 작업 완성도, 결과 안정성을 개선할 수 있는 것으로 나타났습니다. 다만 논문은 실험 과제, 기업 표본, 내부 도구 환경이 결론의 일반화 범위를 제한한다고 지적합니다(arXiv: Design-System-Aware Development with AI). 웹사이트 구축 팀이 얻을 수 있는 시사점은 규칙을 PDF에만 남겨두지 말고 실제 생성 및 검수 과정에 포함해야 한다는 것입니다.
브랜드 색상을 단순히 “테크 블루”라고 표현하는 대신 color.brand.primary, color.surface.muted, color.text.strong과 같은 실행 가능한 의미 기반 토큰으로 변환합니다. 마찬가지로 글자 크기, 컨테이너 너비, 간격을 제한된 척도로 정의하고, AI가 페이지마다 18px, 19px, 21px을 임의로 생성하도록 두지 않습니다.
Token의 가치는 중앙 집중식 수정에 있습니다. 브랜드 기본 색상을 조정할 때 팀은 페이지마다 비슷한 파란색 수십 가지를 찾아 수정할 필요가 없습니다. 또한 AI에 명확한 선택지를 제공합니다. “보기 좋은 파란색을 선택하라”가 아니라 “기본 CTA에는 primary를 사용하고 보조 작업에는 secondary를 사용하라”라고 지시할 수 있습니다.
버튼은 색상과 모서리 둥글기만으로 정의되지 않습니다. 계층, 상태, 크기, 아이콘 위치, 비활성 상태, 로딩 상태도 명확히 정해야 합니다. 카드 역시 제목, 요약, 메타데이터, 작업 영역의 관계를 규정해야 합니다. 컴포넌트 정의가 명확할수록 AI가 Pricing과 Blog에서 별도의 버튼 체계를 다시 만들 가능성이 줄어듭니다.
전역 스타일은 글꼴 스택, 제목 계층, 링크 상태, 포커스 스타일, 문단 간격, 콘텐츠 최대 너비, 반응형 브레이크포인트 등 페이지 간 공통 골격을 담당합니다. 이를 통해 “브랜드다움”을 개별 페이지의 디자인이 아니라 전체 사이트의 기본 동작으로 만들 수 있습니다.
CTA에는 시각적 규칙과 비즈니스 규칙이 함께 필요합니다. 어떤 상황에서 “무료로 시작하기”를 사용하고, 어떤 상황에서 “데모 예약하기”를 사용할지, 버튼이 어느 페이지로 연결되는지, 폼에서 어떤 필드를 수집할지를 정해야 합니다. CTA를 통일한다고 해서 모든 페이지에 같은 문구를 넣는 것은 아닙니다. 서로 다른 사용자 의도를 명확하고 추적 가능한 전환 경로로 연결하는 것이 핵심입니다.
생성을 시작하기 전에 다음과 같은 의사결정 체크리스트를 만드는 것이 좋습니다. 이는 “고급스럽고 현대적이며 통일감 있게 만들어 달라”는 한 문장보다 사람과 AI가 정확하게 실행하기 쉽습니다.
| 계층 | 정의해야 할 내용 | 예시 점검 질문 |
|---|---|---|
| Token | 색상, 글꼴, 글자 크기, 간격, 모서리 둥글기 | 페이지가 시스템에 없는 색상이나 글자 크기를 사용하고 있는가? |
| 컴포넌트 | Button, Card, Form, Nav | 동일한 컴포넌트에 설명되지 않은 여러 변형이 존재하는가? |
| 패턴 | Hero, Pricing, 사례, 아티클 목록 | 페이지 구조가 해당 비즈니스 목적에 부합하는가? |
| 전역 | 컨테이너, 브레이크포인트, 제목, 링크 상태 | PC와 모바일 규칙이 일관적인가? |
| 전환 | CTA 문구, 링크, 폼, 이벤트 | 사용자의 다음 단계가 명확하고 추적 가능한가? |
| 거버넌스 | 명명, 버전, 검토, 폐기 | 새 페이지가 시스템을 우회하지 않고 어떻게 추가되는가? |
홈페이지를 생성하기 전에 대상 사용자, 브랜드 성격, 핵심 제품, 주요 전환 목표, 페이지 목록, 사용 금지 표현, Token 표, 컴포넌트 목록을 포함한 간단한 사이트 컨텍스트를 작성합니다. 페이지 프롬프트에는 해당 페이지에만 필요한 내용을 설명하고, 사이트 수준의 규칙은 안정적으로 유지합니다.
예시:
B2B SaaS 공식 웹사이트의 Pricing 페이지를 생성합니다. 사이트 수준의 Button, Card, Typography 및 spacing tokens를 상속합니다. 주요 CTA에는 브랜드 기본 버튼 컴포넌트를 사용합니다. 요금제 차이는 통일된 표 구조로 표현합니다. 정의되지 않은 색상, 글꼴 또는 모서리 둥글기 값을 새로 추가하지 않습니다.
이러한 프롬프트는 “페이지를 창작하는 일”과 “시스템을 준수하는 일”을 분리해 생성할 때마다 발생하는 무작위성을 줄입니다.
도구가 구조화된 편집을 지원한다면 AI가 비슷한 HTML을 새로 생성하도록 하기보다 기존 컴포넌트를 호출하고 콘텐츠를 채우도록 하는 것이 좋습니다. 컴포넌트에는 PrimaryButton, FeatureCard, ArticleCard, LeadForm처럼 명확한 이름과 사용 상황이 있어야 합니다. 컴포넌트 이름, 속성, 사용 금지 조건이 명확할수록 페이지 간 재사용성이 높아집니다.
아이디어를 한 문장으로 입력하면 We0 AI가 쇼케이스 사이트, 페이지, CMS를 생성하고 출시 후 고객과 트래픽 확보를 돕습니다.
무료 등록을 위한 하나의 완전한 프로젝트 생성
하나의 완전한 생성 흐름을 시도하고 첫 번째 프로젝트 초안을 빠르게 보는 데 가장 적합합니다.
생성이 완료되면 다음 네 가지 범주로 점검합니다.
검수 결과는 현재 페이지에만 임시 수정으로 반영하지 말고 규칙 또는 컴포넌트 개선 사항으로 다시 기록해야 합니다. 그렇지 않으면 다음 생성에서도 같은 오류가 반복됩니다.
홈페이지는 더 강한 시각적 계층을 사용할 수 있지만 Hero의 제목, 본문 너비, 기본 버튼, 보조 버튼은 여전히 전역 체계에서 가져와야 합니다. 애니메이션과 일러스트레이션에는 페이지 고유의 특징을 부여할 수 있지만, 기본 컴포넌트까지 그에 맞춰 변형해서는 안 됩니다.
Pricing의 핵심은 요금제 이름, 가격, 혜택, 제한 사항, CTA를 비교하기 쉽게 만드는 것입니다. 통일된 카드, 태그, 버튼 상태를 재사용하는 것이 좋습니다. 특정 요금제를 강조해야 한다면 글꼴, 색상, 그림자를 임시로 바꾸기보다 이미 정의된 강조 변형을 사용해야 합니다.
Blog가 별도의 독립적인 테마처럼 보이면 안 됩니다. 아티클 목록, 작성자 정보, 카테고리 태그, 목차, 본문 너비, 추천 콘텐츠는 모두 Global Styles를 상속해야 합니다. 콘텐츠 성장을 위해서는 안정적인 템플릿이 필요합니다. 안정적인 템플릿은 대량 제작, 메타데이터 업데이트, 내부 링크 유지관리를 쉽게 해줍니다.
| 방식 | 초기 속도 | 페이지 간 일관성 | 후속 유지보수 | 적합한 상황 |
|---|---|---|---|---|
| 페이지별 개별 프롬프트 | 빠름 | 낮음 | 높은 비용 | 일회성 프로토타입 |
| 기존 페이지 복사 | 보통 | 보통 | 분기 발생 가능성이 높음 | 페이지 수가 적은 경우 |
| Design System + AI | 초기 투자 필요 | 높음 | 중앙 집중식 관리 가능 | 기업 공식 웹사이트 및 지속적인 성장 |
| 페이지별 수작업 디자인 | 비교적 느림 | 팀에 따라 다름 | 높은 인력 비용 | 고도로 맞춤화된 프로젝트 |
이는 “AI가 디자인 결정을 대체할 것인가”를 묻는 양자택일의 문제가 아닙니다. 사람이 브랜드와 비즈니스의 경계를 정의하고, AI가 그 경계 안에서 페이지를 조합하고 콘텐츠를 채우며 반복적인 검수를 수행하도록 하는 방식이 더 합리적입니다.
스타트업 팀은 10개의 Token, 5개의 핵심 컴포넌트, 3개의 페이지 패턴부터 시작할 수 있습니다. 완전한 시스템을 만들려다 출시가 늦어지는 것을 피하기 위해서입니다. 마케팅 팀은 CTA, 폼, 아티클 템플릿, 내부 링크를 먼저 통일해야 합니다. 이러한 요소가 콘텐츠 게시와 리드 연결에 직접적인 영향을 주기 때문입니다. Agency 또는 컨설턴트는 고객별로 독립적인 Token 세트와 컴포넌트 라이브러리를 구축한 뒤 동일한 제작 프로세스로 여러 웹사이트를 납품할 수 있습니다. 해외 영업 팀은 다국어 텍스트 길이, 글꼴 대체, 날짜 형식, 시장별 CTA 규칙도 추가로 정의해야 합니다.
We0.ai의 공개 제품 소개에 따르면 사용자는 자연어로 요구사항을 설명하고, 여러 Agent로 구성된 팀이 실행 가능한 웹사이트를 생성하도록 한 뒤 시각적 캔버스에서 조정하고 자체 도메인에 배포할 수 있습니다. 해당 페이지에는 CMS, SEO 및 GEO 최적화, 다양한 스타일의 디자인, 도메인 배포 등의 기능도 소개되어 있습니다(We0.ai 공식 웹사이트). 이러한 워크플로는 디자인 일관성을 웹사이트 구축 과정의 앞단에 반영하는 데 적합합니다.
도구는 구현 비용을 낮출 수 있지만 기업을 대신해 브랜드 규칙을 임의로 결정해서는 안 됩니다. 출시 전에는 담당자가 브랜드 자산, 사실에 기반한 표현, 개인정보 보호 및 규정 준수 요구사항을 검토해야 하며 실제 기기에서 반응형 결과도 확인해야 합니다.
첫째, 시스템이 지나치게 엄격하면 모든 페이지에서 계층감이 사라질 수 있습니다. 모든 차이를 금지하기보다 제한적이고 이름이 명확한 변형을 허용해야 합니다. 둘째, 컴포넌트 재사용이 콘텐츠 문제를 가릴 수 있습니다. 통일된 카드가 명확한 가치 제안과 신뢰할 수 있는 제품 정보를 대신할 수는 없습니다. 셋째, AI가 컴포넌트를 올바르게 호출하더라도 부정확하거나 오래된 문구를 입력할 수 있으므로 사실, 가격, 사례, 기능에 대한 책임은 여전히 사람이 져야 합니다. 넷째, 디자인 시스템에는 버전 관리가 필요합니다. 브랜드, 제품, 전환 목표가 바뀌면 기존 컴포넌트를 표시하고 마이그레이션한 뒤 폐기해야 합니다.
가장 실용적인 측정 방법은 “모든 페이지가 픽셀 단위로 완전히 동일한가”가 아닙니다. 다음 세 가지를 확인해야 합니다. 사용자가 브랜드를 빠르게 인식할 수 있는가, 팀이 낮은 마찰로 새 페이지를 추가할 수 있는가, 방문자가 각 페이지에서 합리적인 다음 단계를 찾을 수 있는가입니다.
AI 웹사이트 구축의 진정한 과제는 보기 좋은 페이지 하나를 생성하는 것이 아니라, 수십 개의 페이지가 장기적으로 하나의 브랜드에 속한 것처럼 보이게 만드는 것입니다. 해결 방법은 Design System을 AI가 실행할 수 있는 컨텍스트로 전환하는 것입니다. Brand Tokens로 기본값을 제한하고, Reusable Components로 상호작용을 재사용하며, Global Styles로 전체 사이트의 표현을 통일하고, Consistent CTA로 비즈니스 목표를 연결해야 합니다. 이렇게 해야 AI가 매번 새로운 테마를 처음부터 만드는 대신 시스템 안에서 웹사이트를 확장할 수 있습니다. 빠른 출시와 지속적인 리드 확보가 필요한 팀이라면, 출시 후 페이지별로 다시 작업하는 것보다 먼저 최소한으로 실행 가능한 디자인 시스템을 구축한 뒤 AI가 Build, Showcase, Grow, Leads의 전체 프로세스에 참여하도록 하는 편이 일반적으로 더 안정적입니다.
한 문장에서 시작해 몇 분 안에 완전한 웹사이트를 받아보세요.
