Transcript
00:00:00모두가 동일한 AI 모델을 사용할 수 있지만, 그 모델을 중심으로 프로세스를 구축한 사람은 아무도 없습니다.
00:00:05이제 모델 자체는 중요하지 않고, 그 모델을 다루는 '하니스(harness)'가 중요하다는 말을 들어보셨을 겁니다.
00:00:09하니스는 기본적으로 AI 모델이 따르도록 만드는 프로세스를 의미합니다.
00:00:13하지만 꼭 알아두어야 할 점이 있습니다.
00:00:14모델은 계속 진화하기 때문에, 3개월 전에 만든 하니스는 이미 구식이 되어버렸다는 사실입니다.
00:00:19이 영상을 촬영하는 시점에서 가장 뛰어난 모델은 앤스로픽의 플래그십 모델인 Fable 5이지만,
00:00:24걱정하지 마세요. 어떤 모델이 나오더라도 하니스를 계속 발전시킬 수 있는
00:00:27다양한 방법을 안내해 드릴 겁니다.
00:00:30사실 앤스로픽은 공식적인 프론트엔드 디자인 기술을 가지고 있는데,
00:00:34이 기술이 존재하는 이유는 그들 스스로가 명명한 문제 때문입니다.
00:00:37모델이 사용자가 요청한 디자인 중에서 가장 안전하고 평균적인 결과물로 향하는 경향이 있다는 것입니다.
00:00:42이를 '분포 수렴'이라고 부릅니다.
00:00:43즉, 모델이 이미 수천 번 학습한 데이터를 바탕으로 결과물을 만든다는 의미입니다.
00:00:47이미 너무 익숙한 결과물만 내놓는 것이죠.
00:00:49최신 모델들이 워낙 강력하다고 광고되다 보니 이제는 문제가 아니라고 생각하실 수도 있지만,
00:00:53제가 경험한 바로는 전혀 그렇지 않습니다.
00:00:56예를 들어, 저희가 단순히 농장 웹사이트용 랜딩 페이지를 만들어달라고 프롬프트를 입력해 보았습니다.
00:01:01모델을 올바른 방향으로 유도하기 위해 최대한 창의적으로 작업하고,
00:01:06내용보다는 디자인에 집중하라고 했습니다.
00:01:07또한 저희 시스템에는 여러 기술이 준비되어 있지만, 모델이 이를 활용하지 못하도록
00:01:13명시적으로 어떤 기술도 불러오지 말라고 요청했습니다.
00:01:16그렇게 만들어진 결과물이 이것입니다.
00:01:18나쁜 디자인은 아니지만, 그렇다고 최고라고 하기도 어렵습니다.
00:01:22대비가 맞지 않는 부분도 있고, 일부 이미지는 제대로 불러와지지 않았습니다.
00:01:26하지만 여기에 해당 기술을 적용했을 때는 확연히 달라졌습니다.
00:01:29이 기술에 특별한 것이 들어간 건 아닙니다.
00:01:31외부 참조나 외부 리소스도 사용하지 않았죠.
00:01:34말 그대로 프롬프트만 사용한 것입니다.
00:01:35그것만으로도 훨씬 나은 디자인이 만들어졌습니다.
00:01:37훨씬 세련되고 심미적으로도 만족스러운 디자인이 나왔습니다.
00:01:41은은한 애니메이션도 포함되었고 디테일한 부분까지 신경 썼습니다.
00:01:45전반적으로 모델이 스스로 생성했을 때보다 눈에 띄게 더 좋은 결과물이었습니다.
00:01:49새로운 모델이 나올 때마다 AI 기업들은 API 사용자를 위한 새로운 프롬프트 가이드를 배포합니다.
00:01:55저희는 Fable 5 가이드를 사용하여 디자인 기술을 수정했습니다.
00:01:58일반적인 디자인 프롬프트와 프롬프트 가이드를 복사하기만 하면 됩니다.
00:02:02둘 다 Claude에 붙여넣고, 해당 모델의 프롬프트 가이드를 가지고 있다고 말한 뒤
00:02:06업데이트된 버전을 만들어달라고 요청하면 됩니다.
00:02:09그러면 모델이 프롬프트를 분석해서 새 모델에 맞게 다시 작성해 줍니다.
00:02:12보시는 것처럼 새로 만들어진 사이트가 훨씬 좋아 보이죠.
00:02:15구조도 훨씬 나아졌고, 요소들을 카드 형태로 깔끔하게 정리했습니다.
00:02:19보통 Claude가 생성하는 것보다 훨씬 창의적이라고 느껴지는데, 그 이유는 아주 작은 디테일들 때문입니다.
00:02:24예를 들어 CTA 섹션을 우표가 붙은 엽서 편지처럼 만든 것 같은 부분들 말이죠.
00:02:29이런 작은 디테일들이 훨씬 더 창의적으로 보이게 만듭니다.
00:02:32그렇다면 기업들이 왜 이런 프롬프트 가이드를 내놓을까요?
00:02:35모델들은 종종 행동 문제를 보이기도 하는데, 가이드에서 해결 방법을 알려주기 때문입니다.
00:02:39Opus 4.8 출시 당시, 앤스로픽은 모델이 특정 디자인 스타일로 회귀하는 경향이 있다고 지적했습니다.
00:02:45그에 대한 해결책으로 모델에게 먼저 여러 디자인 대안을 제시하게 한 뒤, 원하는 방향을 고르게 하는 방법을 권장했죠.
00:02:51하지만 Fable 5가 출시되면서 이 문제는 더 이상 가이드에서 언급되지 않았습니다.
00:02:56저희가 본 바로는 모델이 여전히 동일한 스타일로 회귀하곤 합니다.
00:02:59항상 그런 것은 아니지만요.
00:03:01저희 테스트 결과에 따르면, 생성된 사이트 중 3분의 2 정도는 여전히 비슷한 스타일로 결과가 나옵니다.
00:03:07완전히 해결된 것은 아니었던 거죠.
00:03:08그래서 이전 모델들의 문서도 찾아보는 것이 좋습니다.
00:03:11최신 가이드에는 누락되었지만 여전히 유용한 정보들을 종종 발견할 수 있거든요.
00:03:15그래서 Opus 4.8의 프롬프트 가이드를 참고해, 사용자가 원하는 디자인 방향을 물어보도록
00:03:20디자인 기술을 변경했습니다.
00:03:23그 결과 이런 디자인이 생성되었습니다.
00:03:25이것도 아주 좋아 보이네요.
00:03:26하지만 솔직히 더 좋은 방법은 디자인 마크다운(.md) 파일을 사용하는 것입니다.
00:03:30이 파일들은 페이지에 바로 적용할 수 있는 브랜드 언어를 담고 있습니다.
00:03:33Get design.md는 수많은 브랜드 파일을 얻을 수 있는 정말 훌륭한 소스입니다.
00:03:38그래도 일단 모델이 랜딩 페이지를 생성한 후에 사용하는 것이 좋습니다.
00:03:42이 조언은 랜딩 페이지에 국한된 것인데, 왜냐하면 디자인 마크다운 파일을 들여다보면
00:03:47폰트까지 아주 세세하게 고정해 두기 때문입니다.
00:03:50앞선 예시들에서 보셨듯이, 폰트는 사이트를 훨씬 더 창의적으로 보이게 만드는 큰 요소입니다.
00:03:55애니메이션 추가와 관련해서는 두 가지 수준이 있습니다.
00:03:58마케팅 UI와 기능적 UI입니다.
00:04:00대시보드 같은 기능적 UI에 디자인 기술을 적용하면 아름답게 보일 수는 있지만,
00:04:05정작 사람들이 사용하기는 어려울 수 있습니다.
00:04:07그래서 애니메이션 추가를 위해 저희는 두 가지를 활용합니다.
00:04:10마케팅 페이지의 경우, 이 기술이 모델에게 이미 CSS 기반 애니메이션을 추가하도록 지시하지만,
00:04:15GSAP 애니메이션이 훨씬 더 뛰어납니다.
00:04:17여기서 프롬프트 가이드의 또 다른 단계가 나옵니다.
00:04:20이제 모델을 제어하는 핵심 수단은 '노력(Effort)' 수준입니다.
00:04:22단순한 작업은 낮음에서 중간 정도로 설정하면 되지만,
00:04:25애니메이션 추가 같은 작업은 'X-High'를 사용하는 것이 훨씬 좋으며,
00:04:30재시도 횟수도 줄여줍니다.
00:04:32저희 마케팅 UI 기술에는 GSAP을 언제 사용해야 할지 지정하는 규칙이 있습니다.
00:04:36해당 조건이 충족되면 자동으로 GSAP 기술까지 함께 불러오는 방식이죠.
00:04:41실제로 여기에 보여드린 랜딩 페이지에 그 설정을 사용했습니다.
00:04:44저희의 제한적인 계획에도 불구하고 꽤 훌륭하게 작동했습니다.
00:04:48엽서 안에서 화면 애니메이션이 재생되는 위치를 정확히 잡았고,
00:04:52계절이 차례로 바뀌는 효과까지 아주 잘 구현했습니다.
00:04:55이런 전문화된 기술이 얼마나 많은 구현 세부 사항을 자동으로 처리할 수 있는지 보여주는
00:04:59좋은 예시입니다.
00:05:00저희는 수많은 시행착오 끝에 이 기술 시스템을 완성했습니다.
00:05:035시간 사용 제한에 계속 걸리면서 말이죠.
00:05:07그 모든 과정을 건너뛰고 싶으시다면 Community AI Labs Pro에서 얻으실 수 있습니다.
00:05:11링크는 설명란에 있습니다.
00:05:12이미 말씀드렸듯이 UI는 두 가지 종류가 있습니다.
00:05:15기능적 UI의 전체 워크플로는 마케팅 UI와는 완전히 다릅니다.
00:05:20예를 들어, 첫 단계인 '계획'이 매우 중요합니다.
00:05:23이 영상에서 자세히 다루지는 않겠지만, 계획이 준비되면 Claude에게 전달하면 됩니다.
00:05:27그다음,
00:05:27앱을 바로 빌드하게 하는 대신, HTML을 사용하여 목업을 먼저 만들라고 요청하세요.
00:05:33저희 프로세스는 디자인 마크다운 파일로 시작합니다.
00:05:36사용할 디자인 마크다운을 이미 결정하셨다면 좋습니다.
00:05:40없어도 괜찮습니다. 없어도 진행할 수 있거든요.
00:05:42그냥 다음 단계로 넘어가면 됩니다.
00:05:43예를 들어, 저희가 직접 만든 커뮤니티를 보시면
00:05:45외부 디자인과 내부 디자인이 완전히 다르다는 것을 바로 눈치채실 겁니다.
00:05:50저희의 경우,
00:05:51모든 것을 HTML 목업을 이용해 먼저 계획했습니다.
00:05:54노션에서 영감을 받은 디자인 마크다운을 만드는 것부터 시작했죠.
00:05:58그 디자인 시스템을 사용해 실제 애플리케이션을 작성하기 전에 모든 화면을 목업으로 구축했습니다.
00:06:04그 목업들을 최종 확정하고 검증한 후에야 완벽한 기능의 애플리케이션으로 변환했습니다.
00:06:09자, 기능적 UI 설계의 가장 중요한 단계로 넘어가기 전에 광고 한 번 보고 가겠습니다.
00:06:13광고 좀 볼까요?
00:06:14최근 Claude Code를 사용하는 많은 사람들이 비용이 급증하는 것을 경험했습니다.
00:06:18솔직히 그게 제가 Kimi에 관심을 갖게 된 이유입니다.
00:06:20그들은 Opus 비용의 1/8 정도로 코딩에 뛰어난 오픈 소스 모델을 만들었습니다.
00:06:26최신 모델인 Kimi K2.6은 가장 어려운 실세계 코딩 벤치마크인 Sweebench Pro에서
00:06:301위를 차지했습니다.
00:06:33그들은 단순히 모델만 출시한 게 아니라 K2.6을 기반으로 정말 유용한 제품들을 만들었습니다.
00:06:38단 하나의 프롬프트로 훌륭한 프론트엔드 디자인을 갖춘 프로덕션 수준의 웹사이트를 생성하고,
00:06:41전체 슬라이드 데크를 만들며, 데이터베이스와 인증까지 즉시 처리할 수 있습니다.
00:06:47하지만 가장 놀라운 기능은 아마 'Agent Swarm'일 겁니다.
00:06:49하나의 작업에 300개의 AI 에이전트를 병렬로 투입할 수 있거든요.
00:06:53하나의 에이전트가 느릿하게 처리하는 대신, 전체 AI 팀이 동시에 작업하는 셈입니다.
00:06:58이 모든 것이 사람들이 돈을 내고 사용하던 기존 클로즈드 소스 대안들보다 훨씬 저렴한
00:07:03오픈 소스 모델에서 작동합니다.
00:07:05매일 Claude Code나 Cursor를 쓰는데 최근 API 비용 때문에 부담이 크셨다면,
00:07:09Kimi를 시도해 볼 가치가 있습니다.
00:07:11저희 링크를 통해 가입하시면 6월 30일까지 첫 구매 시 10% 할당량 보너스를 추가로 드립니다.
00:07:16설명란의 링크를 클릭하고 빌드를 시작하세요.
00:07:19자, 이제 기능적 UI 설계의 또 다른 정말 중요한 부분인 실험에 대해 이야기해 보죠.
00:07:24시간이 흐르면서 저희는 이 문제를 해결하기 위해 다양한 접근 방식을 시도해 왔습니다.
00:07:28초기에는 여러 에이전트가 병렬로 작업하는 태스크 리스트를 사용했는데,
00:07:32각 에이전트가 서로 다른 UI 변형을 생성하게 했습니다.
00:07:35목표는 여러 디자인을 실험해서 어떤 방식이 실제로 가장 잘 작동하는지 파악하는 것이었습니다.
00:07:40나중에는 이 워크플로에 하위 에이전트를 사용하기 시작했는데, 이제는 그럴 필요가 없습니다.
00:07:45백만 토큰의 컨텍스트가 있다면 기본 에이전트로도 충분히 가능하거든요.
00:07:48또한 내부적으로 'Gallery Viewer'라는 것을 구축했습니다.
00:07:51Gallery Viewer의 목적은 간단합니다.
00:07:53여러 HTML 목업을 생성할 때, 수십 개의 파일 속에서 길을 잃지 않게 하는 것입니다.
00:07:58대신, 목업들이 자동으로 하나의 뷰에서 함께 열려 비교하기가 아주 쉽습니다.
00:08:03예를 들어, 커뮤니티 플랫폼을 구축할 당시 커뮤니티 상호작용 공간이 어떤 모습이어야 할지 초기엔 몰랐습니다.
00:08:08커뮤니티 경험이 필요하다는 건 알았지만, 사용자들이 서로 상호작용할 방법이 너무 많았죠.
00:08:12그래서 하나의 디자인에 확정하기보다 HTML 목업을 이용해 실험하기로 했습니다.
00:08:17에이전트에게 여러 커뮤니티 채널 UI를 HTML 목업으로 만들도록 시켜서 비교해 보았습니다.
00:08:22에이전트는 여러 버전을 자동으로 만들어 Gallery Viewer 안에 띄워주었습니다.
00:08:28우리는 각 변형을 비교하며 어느 방향이 가장 좋은지 결정할 수 있었습니다.
00:08:33이 예시에서 눈치챌 수 있는 한 가지는 디자인이 시각적으로 일관되지 않다는 점입니다.
00:08:37이상적으로는 서로 다른 상호작용 패턴을 탐색하면서도 동일한 디자인 언어를 공유해야 하죠.
00:08:42그런 일이 일어나지 않은 이유는 제공된 디자인 마크다운 파일이 없었기 때문입니다.
00:08:46디자인 마크다운이 존재하면, 모델은 이를 색상, 간격, 타이포그래피, 컴포넌트, 전반적인 스타일의 '진실의 원천'으로 사용합니다.
00:08:53그렇게 하면 생성된 모든 목업이 다양한 UX 방식을 탐색하면서도 시각적 일관성을 유지할 수 있죠.
00:08:59기능적 UI에 애니메이션을 추가하는 것처럼 큰 차이를 만들 수 있는 몇 가지 작은 디테일도 있습니다.
00:09:04저희는 자체 기술에 애니메이션 가이드라인 세트를 문서화해 두었으니 원하시면 복사해 사용하셔도 됩니다.
00:09:10지금까지 꽤 잘 작동해 왔고 계속해서 정교화하고 있습니다.
00:09:15하지만 한 가지 강력히 권장하는 것은, 애플리케이션의 기능적 부분에 애니메이션을 과하게 넣지 말라는 것입니다.
00:09:20지나친 애니메이션은 처음에는 인상적으로 보일지 모르지만,
00:09:25생산성 중심의 인터페이스에서는 오히려 주의를 분산시키는 요소가 됩니다.
00:09:29디자인을 마무리했다면 다음 단계는 ShadCN 기술을 사용하는 것입니다.
00:09:35이미 기능적 UI 기술을 ShadCN 기술과 연결해 두었기 때문에 대부분의 워크플로가 자동으로 처리됩니다.
00:09:40이전에는 훨씬 더 복잡한 워크플로를 사용했었습니다.
00:09:45ShadCN MCP를 위해 구체적인 구현 계획을 만들고, 그 계획을 사용해 전체 인터페이스를 빌드했었죠.
00:09:50그런 방식도 작동은 했지만, 너무 복잡했습니다. 오늘날의 워크플로는 훨씬 단순합니다.
00:09:55최종 HTML 목업과 ShadCN 기술만 있으면 됩니다. 이렇게 잘 작동하는 이유는 ShadCN 기술에 이미
00:10:01ShadCN 제작자들이 직접 패키징한 엄청난 양의 컨텍스트와 구현 지식이 들어있기 때문입니다.
00:10:06그래서 확정된 HTML 목업을 가져와 실제 ShadCN 컴포넌트를 사용해 거의 1대 1로 재현할 수 있습니다.
00:10:11이 단계에서는 복잡한 구현 계획이나 변환 워크플로를 만드는 것에 대해 걱정할 필요가 없습니다.
00:10:16이런 디자인 프로세스가 마음에 드신다면 채널을 구독하고 '하입(hype)' 버튼도 클릭해 주세요.
00:10:21저희는 AI로 다양한 비즈니스의 프로세스를 최적화하는 새로운 방법을 배우도록 돕는 콘텐츠를 게시합니다.
00:10:26여러분의 지원은 저희에게 큰 힘이 됩니다.
00:10:31가이드는 또한 이러한 모델들에 대해 자체 검증을 명시적으로 하라고 요구합니다.
00:10:36Claude.md에 에이전트가 자신의 결과물을 검증하도록 요청하는 프롬프트를 넣을 수 있습니다.
00:10:41이제 메인 에이전트를 사용하는 대신 결과물을 검증할 수 있는 하위 에이전트를 사용하세요.
00:10:46검증을 위해서는 비교할 대상이 필요한데, 항상 하위 에이전트가 디자인 마크다운을 확인하게 하세요.
00:10:50가이드에서 언급된 또 다른 사항은 모델이 작업에 대한 컨텍스트를 가지고 있을 때 더 잘 수행한다는 점입니다.
00:10:55디자인의 경우, 이는 제품이 실제로 무엇인지에 대한 지식을 갖는 것을 의미합니다.
00:10:59많은 프레임워크가 별도의 product.md를 설정하지만, 저희 의견으로는
00:11:03Claude.md를 설정하면 모델이 프로젝트의 내용을 이해하기에 충분한 컨텍스트가 됩니다.
00:11:09그래서 기능적 UI 기술은 새로운 작업을 받을 때마다 모델이 Claude.md를 읽게 합니다.
00:11:13또한 앱에 새로운 요소를 추가할 때마다 참조할 수 있도록 모든 HTML 파일이 담긴 'mox' 폴더도 포함합니다.
00:11:18그 위에 디자인 마크다운까지 있다면 더욱 좋겠죠. 이것들이 프로젝트에 꼭 필요한 파일들입니다.
00:11:24요즘은 많은 SaaS 앱을 쉽게 복제할 수 있습니다.
00:11:28저희는 팀 관리에 자체 제작 소프트웨어를 사용합니다.
00:11:32많은 사람을 수용할 필요가 없어서 직접 만든 것인데,
00:11:37그런 경우라면 처음부터 만들 필요는 없습니다.
00:11:42그들의 UI를 최대한 완벽하게 복제하기만 하면 됩니다. 최신 모델들은
00:11:46이미지 이해 능력이 훨씬 좋아져서 이 워크플로가 아주 쉬워졌습니다.
00:11:51복제에는 두 가지 모드가 있습니다. 모드 B는 마케팅 UI용입니다.
00:11:56이 경우 'single-file CLI'라는 아주 유용한 CLI 도구가 있습니다. 이것을 사용하면 HTML, CSS,
00:12:01웹사이트에 사용된 이미지까지 페이지의 모든 것을 캡처할 수 있습니다. 사이트에 여러 페이지가 있다면,
00:12:07사이트맵.xml 파일을 가져올 수도 있습니다. 사이트맵을 사용하면
00:12:13모델이 다른 페이지들을 발견하고 가져올 수 있습니다. 문제는 인증 뒤에 숨겨진 페이지들을 마주할 때 시작됩니다.
00:12:19예를 들어 노션의 UI를 복제하고 싶어도 도구를 노션 웹사이트에 바로 사용할 수는 없습니다.
00:12:23노션 URL을 입력하면 랜딩 페이지밖에 나오지 않으니까요.
00:12:28실제로 필요한 건 로그인 화면 뒤의 애플리케이션 인터페이스입니다. 다행히 모델들은
00:12:34이미지로부터 인터페이스를 이해하는 능력이 매우 뛰어나져서, 그런 상황에서는 스크린샷이
00:12:40최고의 선택입니다. 인터페이스의 다양한 상태를 아주 주의 깊게 캡처해야 합니다.
00:12:45페이지를 열어두고 호버 시 무슨 일이 일어나는지, 상호작용이 레이아웃에 어떤 영향을 주는지 보여주는 스크린샷이 필요하죠.
00:12:50다른 예를 들어보죠. 페이지 하나에 두 개의 열이 있는 페이지를 열었다고 합시다. 이것만 제공하면,
00:12:56모델은 두 개의 열을 만들 수 있다는 것을 모를 수도 있습니다. 아주 철저하게 모든 컨텍스트를 제공해야 합니다.
00:13:01스크린샷을 캡처했다면 이미지들을 프롬프트에 직접 붙여넣지 마세요. 대신 Claude에 드래그하세요.
00:13:07그러면 시스템이 모드 A가 사용할 수 있는 이미지 경로에 접근하게 됩니다. 모드 A는
00:13:13해당 스크린샷들을 모아 복제 폴더에 넣고 참조 자료로 활용하게 됩니다.
00:13:19그 스크린샷들이 효과적으로 복제 프로세스의 토대가 되는 것이죠. 거기서부터 인터페이스의
00:13:25초기 HTML 버전을 생성하고 그다음 최종 애플리케이션 빌드로 넘어가면 됩니다.
00:13:29이 영상이 끝났습니다. 채널을 지원하고 이런 영상을 계속 만드는 데 도움을 주고 싶으시다면,
00:13:35아래의 'Super Thanks' 버튼을 이용해 주세요. 항상,
00:13:39시청해 주셔서 감사합니다. 다음 영상에서 뵙겠습니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video