Anthropic은 6월 18일 커밋 423563cf를 통해 자신들의 frontend-design Skill을 조용히 재작성했습니다. 새로운 버전은 기존 버전의 핵심 논지와 상충하며, 공개된 플러그인 문서에서 AI가 생성한 세 가지 구체적인 디자인 클리셰(clichés)를 명시했습니다. 심지어 헥스 코드(hex codes)와 함께 말이죠.

SKILL.md의 차이(diff)는 +39 / -26 라인입니다 (커밋 전체로는 +41/-28이며, 나머지는 marketplace.json 업데이트와 플러그인 버전이 1.1.0으로 올라간 것입니다). 서류상으로는 단순한 유지보수 업데이트처럼 보이지만, 실제로는 철학의 반전입니다.

저는 지난주에 업스트림 anthropics/claude-code 버전의 파일과 비교하며 저 자신의 이미지 생성 기술을 검토하던 중 이를 발견했습니다. 이 변화는 눈에 띄지 않게 슬그머니 진행되었는데, Anthropic이 최근 출시한 디자인-엔지니어링(design-engineering) 변화 중 가장 흥미로운 사례 중 하나라는 점에서 아쉬움이 남습니다. 무엇이 변했는지, 그리고 모델과 접점이 있는 UI를 출시할 때 이것이 왜 중요한지 설명하겠습니다.

이전 버전: 모든 곳에서 대담해져라

이전 Skill의 핵심 지침은 극단적이었습니다. Anthropic이 6월 18일까지 배포해 온 파일의 내용은 다음과 같습니다:

극단적인 스타일을 선택하세요: 극도로 미니멀한(brutally minimal), 맥시멀리스트의 혼돈(maximalist chaos), 레트로 퓨처리즘(retro-futuristic), 유기적/자연적(organic/natural), 럭셔리/정제된(luxury/refined), 장난기 가득한/장난감 같은(playful/toy-like), 에디토리얼/잡지 스타일(editorial/magazine), 브루탈리스트/가공되지 않은(brutalist/raw), 아르데코/기하학적(art deco/geometric), 소프트/파스텔(soft/pastel), 산업적/실용적(industrial/utilitarian) 등.

그리고 다음과 같이 마무리했습니다:

주저하지 마세요. 틀에서 벗어나 생각하고 독특한 비전에 완전히 몰입할 때 진정으로 무엇을 창조할 수 있는지 보여주세요.

이전 문서의 구조는 밀어붙여야 할 축(axes)들의 목록이었습니다: 타이포그래피(Typography), 색상(Color), 모션(Motion), 공간 구성(Spatial Composition), 배경(Backgrounds). 각 축에는

작은 스튜디오의 디자인 리드로서 접근하세요. 이 스튜디오는 모든 클라이언트에게 다른 누구와도 혼동될 수 없는 시각적 아이덴티티를 부여하는 것으로 알려져 있습니다. 이 클라이언트는 이미 템플릿처럼 느껴지는 제안들을 거절했으며, 독특한 관점에 비용을 지불하고 있습니다. 즉, 이번 브리프에 특화된 팔레트, 타이포그래피, 레이아웃에 대해 의도적이고 의견이 담긴 선택을 하고, 정당화할 수 있는 실제 미학적 위험 하나를 감수하세요.

one이라는 단어에 주목하세요. 새로운 파일에서는 이 단어를 나중에 더 직접적으로 사용합니다:

당신의 대담함을 한 곳에 집중시키세요. 시그니처 요소가 기억할 만한 유일한 것이 되게 하고, 그 주변의 모든 것은 조용하고 절제된 상태를 유지하세요.

그리고 코코 샤넬에게 흔히 귀속되는 격언으로 제한 섹션을 마무리합니다:

샤넬의 조언을 고려해 보세요: 외출하기 전에 거울을 보고 액세서리 하나를 빼세요.

이 변화는 정교합니다. 이전: 모든 축에서 극단적인 것을 선택하세요. 새로운 방식: 시그니처 요소 하나를 선택하고, 나머지는 조용하게 유지한 다음, 배포하기 전에 한 가지를 더 제거하세요.

두 버전을 연속으로 읽어보면 (제 생각에는) 이전 버전은 데모용으로 작성된 것처럼 보입니다. 반면 새로운 버전은 '모든 곳에서 대담해지라'는 식의 결과물을 일 년 동안 접한 후, 그 모든 것이 수렴했다는 것을 깨달은 사람에 의해 쓰인 것처럼 보입니다. 저는 의도에 대한 내부 정보를 가지고 있지 않습니다. 단지 두 문서를 순서대로 읽었을 때 어떻게 느껴지는지에 대한 것입니다.

세 가지 기본값을 명명했습니다. 헥스 코드로요.

이것은 제가 예상하지 못한 부분입니다.

새로운 파일에는 다음 단락이 포함되어 있습니다:

현재 AI가 생성하는 디자인은 세 가지 스타일로 군집화되어 있습니다:
(1) 따뜻한 크림색 배경(약 #F4F1EA)에 높은 대비의 세리프 디스플레이와 테라코타 악센트;
(2) 거의 검은색 배경에 단 하나의 밝은 산성 녹색 또는 진홍색 악센트;
(3) 헤어라인 규칙, 제로 보더-반지름(border-radius), 그리고 밀도 높은 신문 같은 열을 가진 대형 시트 스타일 레이아웃.

Anthropic은 자체 플러그인 문서에서 자신들의 모델이 기본값으로 사용하는 크림색 배경의 헥스 값(hex value)을 공개적으로 명시하고 있습니다. 그들은 이어서 다음과 같이 신중하게 표현된 문장을 덧붙였습니다:

세 가지 모두 특정 브리프(briefs)에는 적합하지만, 이는 선택이라기보다는 기본값(defaults)에 가까우며, 주제와 상관없이 나타납니다.

이 문장은 매우 중요한 역할을 하고 있습니다. 이는 "이것들이 나쁜 디자인이다"라고 말하는 것이 아닙니다. 제가 해석하기에는 다음과 가깝습니다: "이것들은 우리가 아무런 지침을 받지 못했을 때 내놓는 결과물이다." 어느 쪽이든, 팀은 자신들의 출력물을 감사(auditing)하고 있으며 그 감사 내용을 공개 문서에 기록하고 있는 것입니다.

이는 본질적으로 텍스트 측 팀들이 지난 1년 동안 유지해 온 'AI 슬롭(AI Slop)' 단어 목록의 시각적 디자인 버전이라고 할 수 있습니다. 이 비유를 구체화하기 위해, 세 가지 기본값이 실제 제품의 히어로 섹션(hero sections)으로 렌더링되었을 때 어떤 모습인지 보여드리겠습니다. 동일한 가상의 제품(당연하게도 Lumen이라는 이름의 감사 도구)을 세 가지 기본 스타일로 처리한 모습입니다.

클리셰 1: #F4F1EA 크림색, Playfair 스타일의 이탤릭 세리프(italic serif), 테라코타(terracotta) 액센트. 언뜻 보면 "편집 디자인의 세련미"처럼 보이지만, 2초만 지나면 "이번 분기에 내가 본 모든 AI 생성 랜딩 페이지"처럼 느껴집니다.

클리셰 2: 거의 검은색에 가까운 배경, 단일 밝은 액센트, 모노스페이스(monospace) 디테일, "trusted by" 스트립. 첫인상: 엣지 있는 현대적 기술. 자세히 보면: 당신이 방문했던 최근 3개의 YC 데모 데이(Demo Day) 랜딩 페이지와 구분이 불가능합니다.

클리셰 3: 브로드시트 스타일 (broadsheet style), 가는 선 (hairline rules), 제로 보더 라디우스 (zero border-radius), 조밀한 열 (dense columns). "진지하고 지적인" 느낌을 전달하려 하지만, 즉시 AI 스타트업의 "회사 소개 (About)" 페이지 장르로 회귀함.

이 중 어느 것도 나쁜 것은 아닙니다. 모두 유능하고, 방어 가능하며, 바로 출시할 수 있는 수준입니다. 하지만 이들은 또한 기본 동작 (default behavior)이기도 하며, 이는 실제 제품이 무엇을 하든 상관없이 템플릿을 사용한 것처럼 읽힌다는 것을 의미합니다.

프로세스가 루프 (loop)로 대체되었습니다

또 다른 주요 구조적 변화는 해당 스킬 (Skill)이 모델에게 어떻게 _작업(work)_할지를 지시하는 방식에 있습니다. 이전 버전에는 축 (axes)의 목록이 있었습니다. 새 버전에는 프로세스 (process)가 있습니다.

프로세스: 브레인스토밍 (brainstorm), 탐색 (explore), 계획 (plan), 비판 (critique), 구축 (build), 다시 비판 (critique again)

확장된 지침은 5단계 루프를 설명합니다:

1. 브리프 (brief)를 읽습니다. 만약 모호하다면 주제, 대상, 그리고 페이지가 수행해야 할 단 하나의 작업을 확정합니다.
2. 압축된 토큰 시스템 (token system)을 구축합니다: 4~6개의 헥스 값 (hex values), 2개 이상의 타이포그래피 역할 (type roles), 산문과 ASCII 와이어프레임 (ASCII wireframe)으로 설명된 레이아웃, 그리고 시그니처 (signature) 요소를 포함합니다.
3. 브리프에 비추어 계획을 비판 (critique)합니다.

이 규칙들은 실용적입니다. 제가 직접 적용하고 싶은 것들은 다음과 같습니다:

• 버튼은 정확히 어떤 일이 일어나는지 말해야 합니다. "제출(Submit)"이 아니라 "변경 사항 저장(Save changes)"이라고 해야 합니다.
• 동일한 동사가 전체 흐름을 관통해야 합니다. "게시(Publish)"라고 라벨링된 버튼을 누르면 "게시됨(Published)"이라는 토스트(toast) 메시지가 나타납니다.
• 에러(Error)는 사과하지 않습니다. 무슨 일이 일어났는지, 그리고 어떻게 수정해야 하는지를 명시합니다.
• 빈 화면(Empty screen)은 분위기를 조성하는 것이 아니라, 행동을 유도하는 초대장이어야 합니다.

만약 여러분이 UX 카피(UX copy)가 "디자이너의 업무"인지 아니면 "엔지니어의 업무"인지를 두고 제품 팀과 싸워본 적이 있다면, Anthropic은 방금 이를 디자인 스킬(design Skill)의 책임 목록에 추가했습니다.

절제(Restraint)의 실제 모습

여기 새로운 스킬(Skill)의 철학으로 재구축된 동일한 Lumen 히어로(hero) 섹션이 있습니다. 네이비 모노크롬(Navy monochrome), 하나의 시그니처(signature) 요소: 거대하게 설정되어 전체 수직 공간을 차지하는 "One."이라는 단어입니다. 그 외의 모든 것은 조용하고 절제되어 있습니다.

"변경 후"의 처리 방식입니다. 거의 흰색에 가까운 배경에 네이비 텍스트를 사용했으며, 단 하나의 단어인 "One."을 유일한 시각적 모멘트로 거대하고 이탤릭체로 설정했습니다. 내비게이션(navigation)과 푸터(footer)는 의도적으로 작게 배치했습니다. 이 이미지의 역할은 "대담함을 한 곳에 집중하라(spend boldness in one place)"가 단순한 슬로건이 아니라 실제 레이아웃(layout) 선택임을 증명하는 것입니다.

여기서의 시그니처는 타이포그래피(typographic) 모멘트이지만, 이 레시피는 일반화될 수 있습니다: 하나의 축(색상, 타이포그래피, 레이아웃, 모션, 장식)을 선택해 강하게 밀어붙인 다음, 나머지 모든 축에서는 힘을 뺍니다(withdraw). 기존 스킬 세트의 함정은 모델에게 모든 축을 동시에 밀어붙이라고 지시하는 것이었는데, 이는 역설적으로 가장 안전한 조합으로 수렴하게 만듭니다. 새로운 스킬은 "대담함을 한 곳에 집중하라"라는 문구를 통해 이를 명시적으로 진단합니다.

모델을 통해 UI를 배포할 때의 의미

몇 가지 실질적인 시사점은 다음과 같습니다.

새로운 버전과 대조하여 생성 프롬프트(generation prompts) 및 스킬(Skills)을 점검하십시오. 만약 귀하의 프롬프트에 "대담하게(be bold)", "독특하게(be distinctive)", "디자인을 밀어붙여라(push the design)"와 같은 표현이 포함되어 있다면, 앞서 언급한 세 가지 클리셰 중 하나를 생성하고 있을 가능성이 높습니다. 해결책은 밀어붙일 축(axis)을 하나만 지정하고, 나머지는 명시적으로 제한하는 것입니다.

헥스 코드 감사(hex-code audit) 방식은 차용이 가능합니다. "출력된 배경색이 #F4F1EA에 가깝고 강조색(accent)이 테라코타(terracotta)라면 플래그를 표시하라"는 식의 점검은 실제로 작성 가능한 체크 항목입니다. 동일한 방식이 나머지 두 가지 클리셰(애시드 그린(acid-green) 강조색이 들어간 거의 검은색, 흰색 바탕의 신문 스타일 헤어라인(broadsheet hairlines))에도 적용됩니다. Anthropic은 크림색에 대해서만 헥스 코드를 명시했으므로, 나머지 항목에 대해서는 귀하만의 임계값(threshold values)을 정하십시오. 이는 LLM 출력물에서 "delve"라는 단어를 grep으로 찾는 것과 시각적으로 동일한 작업입니다.

카피(copy)를 디자인 파이프라인(design pipeline)에 포함시키십시오. 만약 귀하의 디자인 툴링(design tooling)에 버튼 라벨, 빈 상태(empty-state) 텍스트, 에러 메시지가 일급 객체(first-class artifacts)로 포함되어 있지 않다면, 귀하는 구식의 분절된 책임 구조를 배포하고 있는 것입니다. Anthropic은 방금 공개 문서에서 카피를 "디자인 재료(design material)"로 격상시켰습니다.

생성 루프(generation loop)에 비판(critique) 단계를 구축하십시오. "계획, 구축, 비판, 재구축" 패턴은 범용적으로 사용 가능합니다. 어떤 단발성 생성(single-shot generation)이라도 다음과 같이 명시적으로 질문하는 자기 검토(self-review) 단계를 둘러쌀 수 있습니다: "유사한 브리프(brief)에 대해 무엇을 생성했을 것이며, 이것은 그것과 어떻게 다른가?"

요약

새로운 스킬을 한 문장으로 압축해야 한다면 다음과 같습니다: AI 생성 디자인은 모든 곳에서 대담해지려 함으로써 실패한다. 해결책은 정확히 한 곳에서만 대담해지고, 배포하기 전에 액세서리를 하나 제거하는 것이다.

Anthropic은 자사 모델이 생성하는 기본값(defaults)을 감사하고 있으며, 그 감사 내용을 공개 플러그인 문서에 작성하고 있습니다. 이는 읽어볼 만한 가치가 있는 유용한 내용이며, 모두가 볼 수 있는 곳에서 행하는 이례적으로 정직한 행보입니다.

가감 없이 직접 읽어보고 싶다면 전체 변경 사항(diff)은 commit 423563cf에서 확인할 수 있습니다. 10분 정도 투자할 가치가 있습니다.