AI 슬롭을 피한 브랜드 웹: 디자인 시스템 접근

브랜드 웹사이트를 만들려는 분들이 요즘 비슷한 고민을 합니다. AI 도구로 빠르게 뽑은 화면은 그럴듯해 보이는데, 막상 띄워 놓으면 어디서 본 듯한 느낌을 지울 수가 없습니다. 보라색 그라디언트, 가운데 정렬한 히어로, 3단으로 늘어선 아이콘 카드. 이런 화면이 인터넷 곳곳에 깔리면서 "AI 슬롭(slop)"이라는 말까지 생겼습니다. 보급형 AI가 찍어내는 평균값 디자인을 가리키는 표현입니다. 여우비는 이 문제를 디자인 시스템이라는 방식으로 풉니다. 이 글에서는 AI 슬롭이 왜 생기는지, 디자인 시스템이 어떻게 그것을 막는지, 브랜드 일관성이 왜 자산이 되는지, 그리고 실제로 어떻게 적용하는지를 순서대로 짚겠습니다.

AI 슬롭 디자인의 문제

AI 슬롭은 생성 도구가 학습 데이터의 평균을 그대로 뱉어낸 결과물을 말합니다. 빠르고 싸지만, 수천 개의 사이트와 똑같이 생겼다는 게 본질적 약점입니다. 브랜드를 구별 짓는 힘이 처음부터 빠져 있는 셈입니다.

문제는 미관에서 그치지 않습니다. 방문자는 화면을 보는 순간 무의식적으로 신뢰도를 가늠합니다. 어디서나 본 듯한 템플릿 위에 회사 로고만 얹은 페이지는 "여기도 그저 그런 곳"이라는 인상을 줍니다. 정작 제품이나 서비스가 탄탄해도, 첫인상에서 평균치로 묶여 버리는 겁니다. 차별화에 들였던 비용이 화면 한 장에서 무너집니다.

기술적으로 들여다보면 원인이 더 분명해집니다. AI 생성 화면은 대개 가장 흔한 패턴으로 수렴합니다. 풀폭 중앙 정렬 히어로, 그 아래 세 개씩 묶인 아이콘 카드, 그라디언트 위에 얹은 반투명 유리 카드, 캐러셀. 하나하나는 검증된 패턴이지만, 한꺼번에 쌓이면 누구나 알아보는 "AI가 만든 티"가 됩니다. 서체도 마찬가지여서, 기본값으로 깔린 산세리프 폰트와 채도 높은 인디고-바이올렛 계열이 그 인상을 굳힙니다.

여우비는 이런 클리셰를 의도적으로 피합니다. 풀폭 히어로 대신 비대칭 에디토리얼 레이아웃을 쓰고, 차가운 인디고 대신 따뜻한 잉크 중립 톤에 petrol 액센트(#1F7A6E)를 둡니다. 유리 같은 머티리얼은 시스템 크롬에만 제한적으로 쓰고, 본문 텍스트 위에는 얹지 않습니다. 이렇게 기본값에서 한 발씩 비켜서는 선택이 모여 "또 그 화면"에서 벗어나게 합니다.

다만 오해는 피해야 합니다. AI 자체가 문제는 아닙니다. 여우비도 AI로 만들고 운영하는 팀입니다. 문제는 도구가 아니라, 도구가 내놓는 첫 제안을 그대로 출고하는 태도입니다. 평균값을 출발점으로 삼되, 거기서 브랜드 쪽으로 끌고 나오는 판단이 빠지면 슬롭이 됩니다.

디자인 시스템 접근(토큰·컴포넌트)

디자인 시스템은 색·서체·간격·컴포넌트를 한 번 정의해 두고 모든 화면이 그것을 참조하게 만드는 구조입니다. 즉흥적 선택을 줄이는 대신, 브랜드 규칙을 코드와 디자인 양쪽에서 강제하는 단일 기준을 세웁니다.

핵심 단위는 디자인 토큰입니다. 토큰은 "이 색", "이 간격"처럼 값에 이름을 붙여 둔 변수입니다. 여우비는 3단계 구조를 씁니다. 가장 아래 원시 토큰(primitive)은 순수한 값입니다. 그 위 의미 토큰(semantic)은 "본문 색", "강조 표면"처럼 쓰임새로 이름을 붙입니다. 맨 위 브랜드 토큰은 그 의미값에 브랜드 고유의 결정을 입힙니다. 화면을 짤 때는 원시값을 직접 부르지 않고 의미·브랜드 토큰만 참조합니다. 그래서 petrol 액센트 하나를 조정하면 그 색을 쓰는 모든 화면이 한꺼번에 따라옵니다.

컴포넌트는 그다음 층입니다. 버튼·카드·내비게이션 같은 조각을 토큰 위에서 한 번 설계해 두면, 새 페이지는 그 조각을 조합해 만듭니다. 페이지마다 버튼을 새로 그리지 않으니 어긋날 일이 없고, 한 번 고치면 모든 곳에 반영됩니다. 일관성과 속도를 동시에 얻는 지점이 여기입니다.

여우비의 시스템은 두 층으로 나뉩니다. 아래층(SYSTEM)은 애플 휴먼 인터페이스 가이드라인 계열의 보편 규칙으로, 누가 봐도 익숙하고 편한 동작을 담당합니다. 위층(EXPRESSION)은 브랜드 고유의 표현을 담습니다. 보편적 사용성은 바닥에 깔고, 그 위에 브랜드의 목소리를 얹는 구조입니다. 토큰을 표준 포맷(W3C DTCG)으로 관리하기 때문에 디자인 도구와 개발 코드가 같은 값을 공유합니다.

이 접근이 슬롭을 막는 이유는 단순합니다. AI에게 백지 위에서 알아서 만들라고 하면 평균으로 흐릅니다. 그러나 토큰과 컴포넌트라는 울타리를 먼저 세워 두면, AI는 그 안에서만 생성합니다. 도구의 속도는 그대로 쓰면서, 결과물은 브랜드 규칙을 벗어나지 못합니다. 자유롭게 풀어 둔 AI가 아니라, 시스템이 잡아 준 AI가 일하는 셈입니다.

브랜드 일관성

브랜드 일관성은 모든 접점에서 같은 시각·언어 규칙이 반복되는 상태를 말합니다. 웹·명함·제안서·SNS가 따로 놀지 않고 한 사람이 만든 듯 보일 때, 방문자는 그 브랜드를 더 빨리 인식하고 더 오래 기억합니다.

일관성이 자산인 이유는 누적되기 때문입니다. 같은 색과 서체, 같은 여백 규칙을 반복해서 마주치면 사람의 기억에 패턴이 쌓입니다. 로고를 가려도 알아보는 단계까지 가면, 그 인식 자체가 마케팅 비용을 줄여 줍니다. 반대로 페이지마다 톤이 다르면 매번 처음부터 다시 설득해야 합니다. 쌓이지 않는 인상은 매번 비용입니다.

디자인 시스템은 이 일관성을 사람의 의지가 아니라 구조로 보장합니다. 담당자가 매번 색상값을 기억해서 맞추는 방식은 사람이 바뀌거나 마감이 급하면 무너집니다. 토큰을 참조하는 방식은 그 흔들림을 없앱니다. 새 페이지든 새 캠페인이든 같은 토큰을 부르는 한 자동으로 정렬됩니다. 일관성을 개인의 성실성에 맡기지 않고 시스템에 맡기는 겁니다.

확장할 때 차이가 가장 크게 드러납니다. 페이지가 다섯 개일 때는 사람이 눈으로 맞출 수 있습니다. 그러나 페이지가 수십 개로 늘고, 언어가 셋이 되고, 시즌마다 캠페인이 추가되면 수작업으로는 통제가 안 됩니다. 시스템은 규모가 커질수록 더 강하게 작동합니다. 처음에 토큰과 컴포넌트를 세워 두는 일은, 나중의 혼란을 미리 차단하는 투자입니다.

여우비가 따뜻한 잉크 중립에 petrol 액센트, 에디토리얼 비대칭이라는 고유 조합을 고수하는 것도 이 맥락입니다. 흔한 조합을 피한 선택을 토큰으로 고정해 두면, 그 차별성이 모든 화면에서 흔들림 없이 반복됩니다. 한 번 잘 정한 규칙이 시간이 갈수록 더 또렷한 인상으로 누적됩니다.

적용 방법

적용은 브랜드 핵심 결정을 토큰으로 옮기는 일에서 시작합니다. 색·서체·간격·머티리얼의 기준값을 의미 단위로 정의하고, 모든 후속 작업이 그 토큰만 참조하도록 약속하는 것이 첫 단계입니다.

처음 할 일은 차별화 지점을 분명히 정하는 것입니다. 우리 브랜드는 흔한 패턴 중 무엇을 버릴지부터 정합니다. 여우비라면 인디고-바이올렛 그라디언트를 버리고 따뜻한 중립+petrol을 택하는 식입니다. 이 결정을 머릿속이 아니라 토큰 파일에 적어 두는 순간, 그 기준은 팀 전체가 공유하는 약속이 됩니다.

다음은 컴포넌트를 토큰 위에서 만드는 단계입니다. 자주 쓰는 조각, 버튼·카드·내비게이션·폼을 먼저 정리합니다. 각 조각이 토큰만 참조하게 하면, 이후 페이지 제작은 조립에 가까워집니다. AI 도구를 쓸 때도 이 컴포넌트와 토큰을 입력 조건으로 넣습니다. 그러면 생성 결과가 처음부터 브랜드 안쪽에서 나옵니다.

검수 단계에서는 클리셰 점검을 넣습니다. 출고 전에 풀폭 중앙 히어로, 3단 아이콘 카드, 텍스트 위 유리, 기본 산세리프 같은 슬롭 신호가 들어왔는지 확인합니다. 점검 항목을 목록으로 고정해 두면 감이 아니라 기준으로 거를 수 있습니다. AI가 무심코 끌어온 평균값을 이 단계에서 걸러 내는 것이 핵심입니다.

규모와 맞춤은 균형을 잡습니다. 작은 브랜드라면 색·서체·핵심 컴포넌트 몇 개로 충분합니다. 처음부터 거대한 시스템을 만들 필요는 없고, 자주 쓰는 것부터 토큰화하면 됩니다. 시스템은 한 번에 완성하는 게 아니라 쓰면서 키워 가는 구조라는 점을 기억하면, 부담 없이 시작할 수 있습니다.

여우비는 이 과정을 AI로 운영하는 한-베 팀으로 진행합니다. 디자인 시스템을 기준으로 두고, AI의 속도를 그 안에서 활용하는 방식입니다. 브랜드 웹을 새로 짓거나 기존 화면의 슬롭 느낌을 걷어 내고 싶다면, 여우비와 상담해 보세요.