본문으로 건너뛰기
2026년 8월 7일 · 엔지니어링

디자인 디렉터, 또는 왜 두 개의 빌드가 똑같이 보이지 않는가

이 글은 발행 시점의 제품을 설명합니다. 현재 기능은 AI 빌더에이전트 팀을 참고하세요.

디자인 디렉터, 또는 왜 두 개의 빌드가 똑같이 보이지 않는가

당신은 버그처럼 느껴지는 문제로 혼란스러운 상태로 메시지를 보내셨습니다. 새로 오픈하는 레스토랑 사이트를 생성했는데 마음에 들지 않아서 다시 생성했더니, 간판만 바뀐 거의 같은 사이트가 나왔다는 내용이었죠. 테라코타 벽, 크림색 카드, 포틀랜드부터 프라하까지 어느 비스트로에나 어울릴 법한 세리프 로고타입. 당신은 합리적으로 물으셨습니다 — 이 도구가 내부적으로 그냥 하나의 템플릿을 재활용하고 있는 게 아니냐고.

그렇지 않습니다. 그리고 저는 이 질문을 그냥 안심시키는 말로 넘기지 않고 실제로 답하고 싶습니다.

당신이 겪은 일은 실제로 존재하는 현상이며, 당신의 빌드에만 국한된 것이 아닙니다 — 이는 별도의 지시 없이 대규모 학습 분포로부터 생성하는 모든 시스템에서 나타나는 잘 알려진 실패 양상입니다. 추가 지시 없이 모델에게 레스토랑 사이트 디자인을 요청하면, 그동안 본 모든 레스토랑 사이트의 통계적 중간값을 향해 가게 되고, 그 중간값이 바로 테라코타와 크림색입니다. 왜냐하면 그것이 분포에서 압도적으로 많기 때문입니다. SaaS 랜딩 페이지(중앙 정렬된 그래디언트 히어로, 세 개의 둥근 기능 아이콘)나 크립토 대시보드(모든 모델이 동의하는 듯한 그 인디고에서 바이올렛으로 가는 그래디언트)도 마찬가지입니다. 모델이 다른 것을 할 수 없어서가 아닙니다 — 1970년대 스키 리조트 브로셔나 소비에트 지하철 노선도처럼 디자인해달라고 요청하면 보통 잘 해냅니다. 문제는 아무것도 결정을 강제하지 않았기 때문에 평균값으로 기본 설정된다는 것입니다.

실제로 배후에서 바뀐 것

두 번째 시도가 달라 보였어야 했던 이유는 — 그렇지 않았다면 이는 당신이 우회할 문제가 아니라 우리가 직접 고쳐야 할 부분입니다 — 우리가 디자인 디렉터라고 부르는 단계 때문입니다. 이는 빌더가 마크업을 작성하기 전에 실행되며, 그 유일한 임무는 나중에 빌더가 빠져나갈 수 없는 결정을 내리는 것입니다: 관점이 있는 팔레트, 구체적인 타이포그래피, 검증 가능할 만큼 명확하게 진술된 무드. 구체적으로는 다음과 같습니다:

  • 이름이 붙은 5~7개의 색상, 각각 역할이 지정됨 — "주 색상/보조 색상"이 아니라 "위험 상태 전용 색상", "호버 시에만 나타나는 색상"처럼
  • 두 가지 서체, 각각 존재 이유가 있는
  • 두세 문장의 무드 언어, 실제 아트 디렉터가 무드보드에 핀으로 꽂을 법한 종류의

우리가 브리프를 판단하는 기준은 그것이 위반될 수 있는가입니다. "따뜻하고 친근한"은 위반될 수 없습니다 — 어길 방법이 없으니 강제할 방법도 없고, 그러면 브리프에 뭐라고 적혀 있든 빌더는 곧장 테라코타와 크림색으로 돌아갑니다. "따뜻한 손그림 가을 팔레트, 크림색 종이 위 잉크 아웃라인, 광택 없음, 드롭 섀도 없음"은 실제 약속이며, 이 브리프에 대비해 유리 같은 그래디언트 카드가 렌더링되면 명백히 잘못된 것이 보이고, 이것이 바로 이 방식을 유용하게 만드는 이유입니다.

4~6개 브리프당 하드 제약 조건 — 우리가 찾아낸 최적 지점입니다. 더 적으면 빌더가 긴 빌드 동안 방황할 여지가 너무 많고, 더 많으면 제약 조건들끼리 충돌하기 시작합니다.

만약 당신의 빌드가 평범하게 나왔다면, 솔직한 가능성은 프롬프트의 브리프가 충분히 구체적이지 않아서 디렉터가 확실히 약속할 것이 없었다는 것입니다. 참조 대상 — 장소, 시대, 소재, 심지어 "베이지 색은 안 됨"이라도 — 을 지정하면 디렉터가 밀어붙일 수 있는 무언가가 생깁니다.

제가 스크린샷만이 아니라 이것을 신뢰하는 이유

무엇이 저를 설득했는지 말씀드리겠습니다. 나란히 놓인 멋져 보이는 예시 세 개를 눈으로 보는 것이 아니었습니다 — 그런 식으로는 존재하지 않는 승리를 스스로 확신하게 됩니다. 우리는 디렉터가 존재하기 전과 후로 카테고리별로 수백 개의 빌드를 실행했고, 원시 RGB가 아니라 Lab 공간의 델타-E를 사용해 동일 카테고리 빌드 간의 쌍별 색상 거리를 측정했습니다. RGB는 채도가 비슷한 두 파란색이 화면에서는 동일하게 보임에도 서로 멀다고 우기기 때문입니다. 레스토랑 사이트가 디렉터 도입 전 가장 심각했습니다 — 압도적 다수가 좁은 델타-E 대역 안에 몰려 있었고, 모두 같은 테라코타를 향해 갔습니다.

~3배 디렉터 도입 후 동일 카테고리 빌드 간 중앙값 쌍별 색상 거리 증가 — 그리고 거의 동일한 결과물의 꼬리 부분이 거의 사라졌습니다. 저를 움직인 것은 이 숫자였지, 사진들이 아니었습니다.

과대 포장하지는 않겠습니다. 색상 거리는 "구별되어 보임"을 측정하는 것이지 "보기 좋음"을 측정하는 것이 아니며, 우리가 그만큼 세심하게 계측하지 못한 레이아웃이나 타이포그래피 다양성에 대해서는 아직 아무것도 말해주지 않습니다. 팔레트는 이웃과 최대한 구별되면서도 여전히 못생길 수 있습니다. 우리는 당신이 만드는 것에는 안전하고 획일적인 것보다 구별되면서 가끔 특이한 것이 더 낫다고 생각하지만, 이는 증명이 아니라 판단입니다.

당신 쪽에서 주의해야 할 한 가지

반대 방향으로 작동하는 실패 양상도 있으며, 이를 겪기 전에 짚어둘 가치가 있습니다: 때로는 "깔끔하고 현대적인"이 구체성 부족이 아니라 실제 요청 그 자체입니다. 엔터프라이즈 SaaS 대시보드를 만드는 사람은 종종 지루한 패턴을 일부러 원합니다. 사용자들이 그것을 기대하고, 벗어나면 즐거움이 아니라 지원 티켓이 생기기 때문입니다. 차별화에 지나치게 열성적인 디렉터는 가끔 당신이 요청한 것보다 더 아트 디렉션된 결과물을 내놓기도 합니다. 우리는 디렉터의 차별화 본능보다 당신의 명시적 제약 조건에 더 높은 가중치를 두므로, "지루하고 엔터프라이즈스러운"이라고 하면 당신의 브리프에 대한 반란이 아니라 세련되게 지루한 결과물을 받아야 합니다 — 하지만 이미 브랜드 색상, 로고, 공간 참고 사진이 있다면 프롬프트에 넣거나 직접 첨부하세요. 고정된 입력값은 디렉터가 자체적으로 방향을 발명하는 것보다 언제나 낫고, 이를 제안이 아닌 제약 조건으로 취급할 것입니다.

참고로, 사이트 대신 우리 게임 중 하나를 만들 때는 이 문제가 더욱 중요해집니다 — 게임은 랜딩 페이지보다 디렉터가 방향을 정하지 않은 채 남겨둘 표면이 훨씬 많기 때문입니다. 그곳의 브리프는 스프라이트 스타일, 애니메이션 느낌, UI 크롬, 오디오 팔레트를 한 번에 고정해야 하고(오디오 쪽에 대해서는 삐 소리가 아닌 사운드에서 더 자세히 다룹니다), 하나의 빌드 안에서의 불일치는 서로 관련 없는 두 빌드 간 불일치와 달리 미완성처럼 읽히기 때문입니다.

그러니: 레스토랑 사이트를 다시 생성하되, 이번에는 구체적인 무언가를 알려주세요 — 특정 연대, 소재, 느낌을 원하는 장소, 사용해서는 안 되는 색상 등. 그것이 당신이 실제로 가진 레버입니다. 그리고 이것이 당신의 빌드가 아닌 다른 빌드에서 작동하는 것을 보고 싶다면, 우리 랜딩 페이지의 스타일 트립틱이 동일한 대략적 브리프 카테고리를 디렉터에 두 번 통과시켜 서로 관련 없는 두 미학에 도달하는 것을 보여줍니다 — 그것이 당신 자신의 재생성에서도 보여야 할 격차입니다.
엔지니어링
공유XLinkedInFacebookRedditQuoraWhatsAppTelegram이메일
← 모든 게시글