WindWalker의 AI 디자인 시스템
— 일관된 브랜드를 자동으로 유지하는 법
"primary 색상을 rose로 바꿔줘"라고 입력하면 Home부터 Contact까지 모든 페이지의 버튼, 강조색, 아이콘 색이 한꺼번에 바뀝니다. WindWalker가 디자인 일관성을 유지하는 방식을 설명합니다.
디자인 시스템이란 무엇인가
디자인 시스템은 웹사이트 전반에서 사용하는 색상, 폰트, 간격(spacing), 버튼 스타일 등의 규칙 모음입니다. 잘 갖춰진 디자인 시스템이 있으면 새 페이지를 추가하거나 콘텐츠를 수정할 때 시각적 일관성이 자연스럽게 유지됩니다.
스타트업이나 소규모 비즈니스에서 디자인 시스템을 직접 구축하는 것은 쉽지 않습니다. 디자이너 없이 여러 페이지를 관리하다 보면 버튼 색상이 페이지마다 다르거나, 폰트 크기가 들쭉날쭉해지는 문제가 생깁니다.
design_system 필드를 두어 색상 팔레트, 폰트, spacing 규칙을 중앙에서 관리합니다. AI는 이 값을 기준으로 모든 페이지의 스타일을 생성하고 수정합니다.
PRD 기반 동작 원리
WindWalker 내부에서는 각 프로젝트의 디자인 정보가 PRD 문서 안에 구조화되어 저장됩니다. 대략 이런 구조입니다.
{
"design_system": {
"colors": {
"primary": "blue",
"secondary": "gray",
"accent": "indigo"
},
"typography": {
"heading_font": "Inter",
"body_font": "Inter",
"base_size": "16px"
},
"spacing": {
"section_padding": "5rem",
"container_max": "1280px"
},
"border_radius": "0.75rem"
}
}사용자가 "primary 색상을 rose로 바꿔줘"라고 하면, AI는 PRD의 colors.primary 값을 업데이트한 뒤 해당 값을 참조하는 모든 페이지의 HTML을 다시 렌더링합니다. 페이지마다 일일이 색상 코드를 수정할 필요가 없습니다.
할 수 있는 것들
색상 변경
브랜드 컬러를 바꾸고 싶을 때 자연어로 요청할 수 있습니다.
- "전체 사이트의 주요 색상을 emerald로 바꿔줘"
- "버튼 색상을 #2563EB로 지정해줘"
- "배경을 흰색 대신 slate-50으로 변경해줘"
- "링크 색상을 현재 파란색에서 보라색으로 바꿔줘"
폰트 변경
Google Fonts 기반으로 폰트를 교체할 수 있습니다. 변경 시 전체 페이지에 일관되게 적용됩니다.
- "본문 폰트를 Noto Sans KR로 변경해줘"
- "제목 폰트를 Playfair Display로 바꿔줘"
- "폰트 크기를 전체적으로 조금 키워줘"
Spacing 및 레이아웃
- "섹션 간격을 좀 더 여유 있게 늘려줘"
- "컨테이너 최대 너비를 960px로 줄여줘"
- "카드의 모서리를 더 둥글게 바꿔줘"
실제 대화 예시
실제 편집 채팅에서 어떻게 진행되는지 보여주는 예시입니다.
확인 후 특정 요소만 다른 색상으로 유지하고 싶으시면 말씀해주세요.
현재 한계점
PRD 기반 디자인 시스템은 편리하지만, 현재 베타 버전에서는 다음 제약이 있습니다.
- 페이지별 개별 예외: 특정 페이지의 특정 섹션만 다른 색상을 적용하는 세밀한 제어는 현재 제한적입니다.
- 커스텀 CSS: 직접 CSS 코드를 편집하는 인터페이스는 아직 베타 단계입니다.
- 애니메이션 설정: 디자인 시스템을 통한 트랜지션·애니메이션 일괄 설정은 향후 지원 예정입니다.
- 다크 모드: 다크/라이트 모드 토글 기능은 현재 준비 중입니다.
AI에게 특정 조정을 요청했을 때 원하는 결과가 나오지 않는 경우, 더 구체적으로 설명하거나 ("About 페이지의 히어로 섹션 배경만 바꿔줘") 다시 요청하면 수정됩니다.