YouMind
로그인

HTML 브랜드: 입력 기반 결과물의 부상

@emmettshine
영어2026년 5월 13일
437K
201
15
17
401

TL;DR

크리에이티브 에이전시들은 정적인 결과물에서 '아토믹 키트(atomic kits)'로 전환하고 있습니다. 이는 AI 에이전트가 디자인을 실행하고 인간은 고차원적인 독창적 사고에 집중할 수 있도록 돕는 HTML 및 JSON 기반의 기계 판독형 브랜드 시스템입니다.

창의적인 작업이 전통적인 결과물에서 원자적 시스템 기반 결과

지향으로 전환되는 방식

지난주 우리는 창업자에게 /human, /agent 두 개의 폴더와 readme.md 파일이 포함된 zip 파일을 보냈습니다. 한 달간의 작업 끝에 agent 폴더 안에는 YAML, JSON, Markdown, HTML, CSS, SVG 파일을 통해 그들의 전체 브랜드가 명령어로 인코딩되어 있었습니다. 받은 후, 그들은 이 패킷을 Cursor에 넣고 프롬프트를 입력했으며, 그날 거의 완성된 랜딩 페이지를 얻었습니다.

지난 몇 주 동안 단순한 zip 폴더는 우리가 제작을 요청받는 결과물이 되었습니다. 웹사이트, 소프트웨어 제품, 또는 시장 출시 캠페인 바이블이 아니라 말이죠. 다시 말해, 우리의 투입물이 우리 가치가 있는 곳이며 결과를 이끌어내는 데 도움이 되는 것이지, 우리의 산출물이 아닙니다.

이것은 우리에게 꽤 새로운 일이며, 부분적으로 Claude Design을 통해 가능해진 것에 의해 추진되었습니다. 접근 가능한 UI 레이어와 Design이 생성하는 체계적인 파일들은 @littleplainsxo에서 상당히 큰 돌파구였습니다.

우리는 지난 몇 주 동안 이 작업을 함께 해온 몇몇 초기 단계 창업자들과 함께 경험한 내용을 설명하고자 합니다.

또한 인간의 창의성과 독창적인 사고('마술 트릭')가 가장 가치 있는 부분과 이것이 점점 더 우리가 우리가 대가를 받고자 하는 이유에 대해서도 이야기할 것입니다.

Emmett - inline image

프로젝트 가치는 상류로 이동 중입니다

우리는 창의적인 작업 자체가 변화하고 있으며, 그에 따라 가치, 일정, 가격 모델도 함께 변화를 직접 목격하는 초기 단계에 있습니다.

며칠 전, @alexleiphart와 저는 사무실에서 업계 친구들을 방문하여 우리가 작업 방식을 설명하려고 했습니다. 우리가 고민하는 내용을 설명하기 위해 화이트보드에 다이어그램을 그렸습니다. 세로축은 프로젝트 가치, 가치, 가로축은 프로젝트 시간이었습니다.

Emmett - inline image

가치가 점점 선행/투입물 기반이 되는 방식을 보여주는 대략적인 화이트보드 그림.

전통적인 서비스 계약에서 가치는 결과물이 축적됨에 따라 천천히 꾸준히 증가합니다. 시간에 대해 비용을 지불하고, 산출물을 받으며, 계약 기간 동안 가치가 쌓입니다. 지난 몇 달 동안 우리가 발견한 것은 옆으로 누운 깔때기와 더 비슷합니다.

초기 단계 계약의 경우, 가치의 가장 높은 집중도는 맨 처음에 있습니다: 심층 연구, 전문가 종합, 그리고 회사를 브랜드로 포지셔닝하는 방법에 대한 대담한 판단에 있습니다. 누구를 위한 것인지. 무엇을 말하는지. 어떻게 들리는지. 시장에서 어디에 위치하는지. 이러한 판단이 유지되는 시스템과 그렇지 않은 시스템을 구분합니다. 여기서부터 깔때기는 급격히 좁아집니다. 일단 사고가 완료되면, 산출물은 그 사고의 논리에 따라 실행되기 때문입니다.

참고: 다이어그램 맨 끝에 'magic-trick.md'가 있다는 점에 주목하세요. 나중에 다시 다루겠습니다.

에이전시 모델이 변화하고 있습니다

에이전시 작업의 역사 대부분 동안, 인수인계는 정적이었습니다. 디자인 파일, PDF, 클라이언트가 참조하고 해석할 프레젠테이션... 그리고 새로운 작업이 구축되고, 새로운 카피가 작성되고, 새로운 벤더와 팀원이 고용됨에 따라 점차 원래 의도에서 벗어나게 되었습니다.

지난 수십 년간의 디지털 기반 창의적인 작업에서 Brand_Guidelines_FINAL_v3-FINAL-FINAL.pdf 같은 파일을 접해본 사람이라면 이 패턴을 알고 있습니다. 브랜드는 인수인계 후 클라이언트 팀이 유지할 수 있는 형태로 세상에 존재했습니다.

그러나 우리와 에이전트적 창의성의 최전선에 있는 다른 사람들이 최근에 제공해 온 것은 형태와 의도가 다릅니다.

우리가 지금 제공하는 모든 키트의 형태.

/human 폴더에는 전통적인 형식(PDF, Figma 링크 문서 등)의 브랜드 가이드라인이 포함되어 있으며, 여전히 가치 있고 대다수 팀에게 핵심을 유지합니다.

/agent 폴더가 더 흥미로운 부분입니다.

/human 폴더의 작업을 기반으로 YAML, JSON, Markdown, HTML, CSS, SVG 파일은 모든 에이전트 도구가 읽고 구축할 수 있도록 구조화되어 있습니다. 이제 브랜드는 문서가 아닌 명령어로 인코딩되며, 우리의 상류 판단에 기반합니다. 해당 폴더를 여는 에이전트는 내장된 관점과 함께 전체적인 시스템을 얻습니다.

지난 몇 달간의 돌파구는 키트가 개별적으로 일관될 뿐만 아니라 개별로 검색 가능한 것이 아니라는 점입니다.

이 '원자적 시스템'을 Claude Design, Code, Cursor(또는 다른 많은 도구)에 입력하면 브랜드 DNA가 확장되어 랜딩 페이지, UI 표면, 또는 GTM 캠페인을 높은 수준의 품질, 맥락, EQ, 기술적 특수성으로 작성, 디자인, 애니메이션화, 출시할 수 있습니다. 이는 기초적인 사고가 파일 구조에 내장되어 있기 때문입니다.

동일한 브랜드가 두 가지 형식으로 존재합니다. 인간이 시스템을 이해하는 데 사용하는 형식과 에이전트가 이를 확장하는 데 사용하는 형식입니다. 지난 달의 돌파구는 이제 에이전트를 위한 정보 패킷이 더 명확한 상위 수준의 통일된 방향성을 가지며, 이를 향해 구축할 수 있는 하위 수준의 기술적 세부 사항을 갖추게 되었다는 점입니다.

예시:

우리는 최근 Type (방금 출시된 실제 사이트를 확인하세요!)을 위한 원자적 키트 구축을 구축했습니다. Type은 멀티플레이어 AI 작업 공간 도구입니다(@fletchrichman 감사합니다).

최종 패킷을 Cursor에 넣고 단일 프롬프트를 입력했습니다: "원자적 디자인 시스템과 전략을 기반을 기반으로 HTML 랜딩 페이지를 생성해 주세요." 모델은 원자, 분자, 유기체를 단계별로 살펴보고 올바른 글꼴, 작동하는 호버 상태, 특정 모듈, 사양과 일치하는 모션, 내장된 브랜드 가이드라인의 CSS 요소를 갖춘 전체 랜딩 페이지를 생성했습니다. 또한 브랜드 포지셔닝, 전략, 어조, 제작 카피 가이드라인을 따랐습니다. 매우 좋았으며, 놀라운 창업 팀의 도움과 약간의 마법(다음 섹션 참조)이 있었습니다.

모션 폴더에는 Type 특정 이징 곡선과 전환 속도를 지정하는 JSON 파일이 포함되어 있습니다. 이를 시각화하도록 요청하자, Claude Design은 단순히 읽는 것보다 클릭하여 모션 시스템을 느낄 수 있는 대화형 컴포넌트를 생성했습니다.

디자인 또는 엔지니어링 주도 창업 팀(예: Type)의 경우 루프는 더욱 긴밀하게 작동합니다. 그들은 키트를 편집기에 가져와 한두 개의 값을 변경하고 저장하면 즉시 구축을 시작합니다. 기본 색상 변경: 하나의 CSS 변수 업데이트. 모션 곡선 변경: JSON 편집. Claude Design에 다시 업로드하면 전체 가이드라인이 새 값에 맞게 재생성됩니다. 키트는 작업에 가장 가까운 사람들이 코드에서 실시간으로 편집할 수 있습니다.

Opus 4.7과 함께 Cursor에서 열린 동일한 키트. 하나의 프롬프트: 원자적 키트에서 HTML 랜딩 페이지를 구축해 주세요.

Emmett - inline image
Emmett - inline image
Emmett - inline image

magic_trick.md

일반적으로 원샷 프롬프트가 출시에 필요한 것을 제공하지 못하는 이유는 다음과 같습니다.

에이전트 키트가 일반적으로 생성하는 모든 것은 입력된 것의 재조합입니다: 포지셔닝, 어조, 구성 요소, 모션. 이것이 키트가 구축된 목적입니다. 출력은 일관되고, 브랜드화되며, 출시 가능할 것입니다. 또한 입력이 허용한 중간값으로 수렴하는 경향이 있습니다. 정확성과 독창성은 같은 것이 아닙니다.

대부분의 사람들은 화이트보드 다이어그램 끝에 있는 작은 상승세, 즉 마법의 트릭을 잊어버립니다.

실행 레이어가 주로 에이전트적일 때, 계약이 끝나갈 무렵 모든 것이 중간으로 수렴하기 시작하는 순간이 있습니다. 바로 반대의 일이 필요할 때 말이죠. 원샷으로는 거의 마법 같은 돌파구를 만들어내지 못합니다 (가끔 AI 환각의 창의성을 그리워할 때도 있습니다).

큰 베팅을 하는 창업자들과 작업하는 프리미엄 가격의 스튜디오에게 "중간값"은 정확히 사람들이 우리에게 피하기 위해 지불하는 것입니다.

이때 인간이 아이디어를 가지고 다시 들어와야 합니다. 진짜, 포도당을 태우고, 주류에서 벗어나고, 이상하고, 땀 흘리는 독창적인 창의적 생각. 입력만으로는 예측할 수 없었던 생각 말입니다.

결과를 기울이는 종류의 움직임: 지난 겨울의 필름 누아르 느와르 폭식에서 비롯된 론칭 필름 콘셉트, 산책 중에 떠오른 숭고한 제품 순간, 매우 늦은 외출에서 영감을 받은 하위 문화를 암시하는 캠페인 아이디어, 외국에서 폭우 속 우연히 발견한 작은 미술관에서 영감을 받은 급진적인 최상단 쇼스토퍼, 시스템이 자체적으로 생산했을 것보다 더 강력하게 와닿는 옥외 광고 카피.

우리는 내부적으로 이것을 magic_trick.md라고 불러 왔으며, 농담은 반만입니다.

Emmett - inline image

어휘의 가치

최근 Diplo가 AI에 AI에 대해 질문을 받았습니다. 그의 답변에서 그는 세계 최고의 DJ들이 종종 자신보다 나이가 많은 이유는 그들의 어휘, 즉 축적된 음악 지식 때문이라고 말했습니다.

그에게 있어 그의 뛰어난 어휘는 새벽 5시에 일어나 벼룩시장에서 레코드 상자를 뒤지고, 집집마다 돌아다니며 희귀한한 바이닐을 찾고, 모든 트랙을 읽고, 모든 레코드의 모든 베이스 연주자를 아는 수년간의 노력에서 비롯되었습니다.

DJ를 위대하게 만드는 것은 이러한 수년간의 축적된 지식과 경험입니다. 둘 다 어떤 레코드를, 어떤 방에서, 어떤 밤에 꺼내야 하는지 알게 해줍니다. "그것이 우리를 좋게 만듭니다. 제 재능은 오래된 레코드를 발굴하는 데서 왔습니다."

Emmett - inline image

잘 제작된 에이전트 시스템은 거대하고 완벽하게 상호 참조된 레코드 라이브러리와 같습니다. 그 자체로는 놀랍지만, 군중의 에너지, 방의 페로몬, 그리고 아무도 예상하지 못했고 모두가 기억하는 일을 해낼 경험 없이는 쓸모가 없습니다.

원자적 키트가 도서관이라면, magic_trick.md는 위대한 DJ가 특정 방, 특정 밤을 위해 구성하는 세트입니다. 어제의 아이디어는 오늘의 아이디어가 아닙니다. 각 중요한 브랜드 출력을 위한 승리 조합은 잘 제작된 에이전트 키트와 깊은 마법의 트릭 아이디어입니다.

하류에 그 독창적인 사고를 위한 여지를 남겨두지 않으면, 아무도 기억하지 못하는 올바른 것을 출시할 위험이 있습니다.

밑에 시스템 없는 대담한 아이디어만 있다면, 출시 발표 이후에는 살아남지 못할 기억에 남는 것을 출시하게 될 것입니다.

시스템 사고와 독창적인 사고. 한 손이 다른 손을 씻습니다.

HTML & .MD: Markdown에서 마크업으로

Nathaniel Whittemore가 이틀 전 그의 훌륭한 팟캐스트, AI Daily Brief에서 논의한 것처럼, 우리는 HTML이 이러한 종류의 작업에 점점 더 적합한 형식이라고 생각합니다.

구조화된 HTML로 표현된 컴포넌트는 모든 현대 에이전트가 구문 분석할 수 있습니다. SVG는 그 논리가 기하학에 내장되어 있습니다. CSS 파일은 구조적 수준에서 시각적 언어를 인코딩합니다. 이러한 파일은 에이전트가 직접 작동할 수 있는 명령어입니다. 평면 래스터 내보내기(PNG, JPEG, PDF)는 볼 수 있지만 구축할 수는 없습니다.

시스템을 HTML, CSS, SVG로 구조화할 때, 우리는 인간이 보는 방식뿐만 아니라 에이전트가 읽고 구성하는 방식을 위해 구축하고 있습니다. 이러한 구분은 우리가 내리는 거의 모든 출력 결정의 거의 모든 출력 결정 거의 모두를 형성합니다.

(이에 대한 훌륭한 기술적 글은 @thariq의 Claude Code 사용하기: HTML의 비합리적인 효과를 참조하세요.)

Emmett - inline image
Emmett - inline image

Claude Design이 우리에게 바꾼 것

우리의 원자적 키트 개념은 Claude Design보다 먼저 존재했습니다. 우리는 올해 초부터 이 방향으로 나아가고 있었으며, 에세이 인간과 에이전트를 위한 브랜드 구축하기에서 브랜드 작업을 에이전트가 읽을 수 있는 형식으로 리팩터링해야 하는 이유를 제시했습니다.

지금 크게 다르게 느껴지는 점은 이러한 키트를 스프린트가 요구하는 속도로 잘 생산하는 것이 진정으로 가능해졌고, 더욱 영향력이 커졌다는 것입니다.

Claude Design을 통해 우리는 시스템을 시각적, 언어적, 전략적, 구조적으로 더 깊이 사고할 수 있게 되었습니다. 동일한 도구 내에서 작업하고 올바른 형식의 아티팩트를 생성할 수 있으며, 이전에 모든 프로젝트의 후반부를 잡아먹던 수동 변환 단계가 필요 없습니다. 2025년에 12주 계약이 필요했던 작업이 이제 (때로는) 가치면) 가치를 압축하지 않고 4주 스프린트에 들어갈 수 있습니다. 제대로 수행되면 가치는 실제로 증가했습니다.

클라이언트가 갖게 되는 키트는 생성적이고, 구조화되어 있으며, 미래에 대비되어 있고, 살아 있습니다. 기존의 결과물은 정적이었고, 수동 유지 관리가 필요했으며, 즉각적인 구현 능력이 극도 매우 제한적이었습니다.

Emmett - inline image
Emmett - inline image

우리가 판매하는 것: 원자적 세계

원자적 키트가 결과물일 때, 키트는 완성된 자산이 아닙니다. 완성입니다. 완성된 자산을 생산하는 시스템입니다.

이는 실제로 판매되는 것을 변화시킵니다. 판매되는 것은 모든 미래의 아티팩트, 페이지, 제품이 동일한 브랜드처럼 느껴지게 만드는 인코딩된 사고입니다.

키트는 독창적인 사고에서 파생된 독창적인 작업입니다. 클라이언트가 키트에서 생성하는 모든 하류 출력은 그 독창성을 물려받습니다.

Jack Dorsey와 Roelof Botha는 최근 "계층 구조에서 지능으로"를 발표하며, 차세대 기업들이 그들이 "세계 모델"이라고 부르는 것, 즉 비즈니스 자체에 대한 지속적으로 업데이트되는 기계 판독 가능한 이해를 중심으로 조직될 것이라고 주장했습니다. 이 이해는 AI가 직접 작동할 수 있을 만큼 풍부합니다. 그들의 가정은 이해가 해자이며, 시스템이 실행됨에 따라 그 이해의 깊이가 복리 효과를 낸다는 것입니다.

동일한 원칙이 우리가 하는 창의적인 작업에도 적용됩니다.

원자적 키트는 브랜드 세계 모델입니다. 브랜드가 무엇인지, 누구를 위한 것인지, 어떻게 들리는지, 어떻게 보이는지에 대한 구조화되고 기계가 읽을 수 있는 이해입니다. 그 이해의 깊이가 그것을 가치 있게 만들고, 지속 가능하게 만듭니다.

"원자적 키트는 브랜드 세계 모델입니다."

이 작업이 곧 판매되는 방식

전통적인 창의적인 작업은 시간과 재료에 가격을 책정합니다: 범위를 정하고, 산출물에 대해 비용을 지불하고, 넘어갑니다. 키트가 실제 제품이라면, 초기 작업에 가치가 집중되며, 정확히 화이트보드 다이 보여주는 대로입니다. 지속적인 관계는 생산 작업을 위한 재범위 설정보다는 살아있는 시스템에 대한 접근을 유지하는 것에 더 가까워 보입니다.

우리는 이미 이와 유사한 버전을 시작했습니다. Dan Batten을 통해 Little Plains 팀이 독점적으로 접근할 수 있는 맞춤형 노드 기반 심층 연구 에이전트를 구축했습니다. 여러 클라이언트가 이를 사용하도록 요청했습니다. 우리가 준비되었다면, 고정 요금으로 월간 접근을 제공하고 지속적으로 유지 관리하고 개선할 것입니다. 그들은 항상 최신 버전을 받게 됩니다.

구조적으로 유사한 것이 브랜드 시스템에 적용될 수 있습니다. 우리는 부엌에서 레시피를 개선하며 남아 있을 것입니다. 클라이언트는 항상 최상의 버전으로 구축합니다. 초기 비용은 낮추고, 지속적인 라이선스, 지속적인 품질.

동일한 원칙이 우리의 Flora 작업에도 적용됩니다. 우리는 클라이언트를 위한 독창적인 생성 워크플로우(시각 자료 생산 방식, 맞춤 UI 생성 패턴, 노드 기반 콘텐츠 파이프라인)를 구축하고 그 기술을 산출물뿐만 아니라 계속 사용할 수 있는 자산으로 제공합니다. 이러한 기술이 더욱 정교해짐에 따라, 우리는 접근 및 사용에 대한 라이선스 부여를 모색하고 있습니다.

Emmett - inline image

우리는 아직 창의적인 작업에 대한 완전한 라이선스 모델에 도달하지 않았지만, 이에 대해 이야기하기 시작할 만큼 가까워졌습니다. 이 작업이 사고 팔리는 미래는 에이전시 가격보다 소프트보다 소프트웨어 가격 책정에 더 가깝습니다. 우리에게는 아마도 하이브리드가 될 것입니다: 초기에는 범위가 정해진 시간과 재료, 우리가 남기는 우리가 남기는 시스템에 대한 지속적인 라이선스.

당신이 독창적인 사고와 독창적인 아이디어를 가지고 있다고 믿는다면, 이것은 유리하게 느껴져야 합니다.

당신의 손이 아닌 당신의 마음에 대해 대가를 받는 것을 목표로 하세요.

우리가 지금 있는 곳

지난 한 달 동안 우리는 여러 개의 원자적 키트를 인도했습니다. 창업 팀들은 실제 출시 마감 시한에 맞춰 실시간으로 이를 바탕으로 구축하고 있으며, 이것이 실제로 중요한 유일한 유일한 테스트입니다.

우리 풀타임 팀의 각 구성원은 매일 Claude Design을 사용하고 있습니다. 카피라이터들은 Google Docs가 아닌 HTML 사이트 내에서 카피를 테스트하여 문자 수, 줄 바꿈, 상황에 따라 내러티브가 실제로 어떻게 흐르는지 더 명확하게 파악하고 있습니다. 디자이너들은 배포될 동일한 환경에서 컴포넌트를 스트레스 테스트를 진행하고 있습니다. 매체가 매체이기 때문에 작업이 더 정직해집니다.

요약하면, 상류의 정의 작업(전략, 포지셔닝 논리, 브랜드를 일관되게 만드는 시각적 및 언어적 시스템)이 실제 제품이 되고 있습니다. 이후의 작업은 점점 하류로 이동하고 있습니다.

마지막으로, 우리가 항상 가장 중요하게 여겨온 작업(독창적이고 창의적인 사고)은 앞으로 더욱 중요해질 수 있는 부분입니다.

읽어주셔서 감사합니다!

이 전문적인 이야기에 대해 이야기하고 싶다면 다음 주소로 이메일을 보내주세요: hello@littleplains.co.

  • Emmett & Alex

Emmett Shine과 Alex Leiphart는 Little Plains의 파트너이며, 뉴욕에 기반을 둔 스튜디오로서 브랜드, 제품, 그리고 이 둘을 함께 묶는 시스템에 대해 멋진 스타트업들과 협업하고 있습니다.*

원클릭 저장

YouMind로 바이럴 글을 AI 심층 읽기

소스를 저장하고, 핵심 질문을 던지고, 주장을 요약해 바이럴 글을 다시 활용할 수 있는 노트로 바꾸세요. 하나의 AI 워크스페이스에서 모두 할 수 있습니다.

YouMind 둘러보기
크리에이터를 위해

당신의 Markdown을 깔끔한 𝕏 글로

직접 쓴 장문을 올릴 때 이미지, 표, 코드 블록을 𝕏에 맞게 정리하는 일은 번거롭습니다. YouMind는 전체 Markdown 초안을 깔끔하고 바로 게시할 수 있는 𝕏 글로 바꿔 줍니다.

Markdown → 𝕏 사용해 보기

분석할 패턴 더 보기

최근 바이럴 아티클

더 많은 바이럴 아티클 보기