스크립트
00:00:00메타가 엄청난 일을 해냈습니다. 자체 디자인 시스템을 공개한 거죠. 그런데 이건 평범한
00:00:04디자인 시스템이 아닙니다. 다른 곳에서는 찾아볼 수 없는 두 가지 특징이 있거든요. 첫째는
00:00:09메타의 실제 시스템이라는 점입니다. 메타 엔지니어들이 8년 동안 구축하고 다듬어왔으며
00:00:14지금도 자사 앱 전반에서 사용 중이죠. 단순한 실험적 시도가 아니라 이미 대규모 환경에서 검증된 시스템입니다.
00:00:19두 번째 특징이 더 중요한데, AI 에이전트가 직접 읽고 빌드할 수 있도록 설계된
00:00:23최초의 디자인 시스템이라는 점입니다. 에이전트가 사람뿐만 아니라
00:00:28시스템 전체를 이해하고 직접 활용할 수 있게 구축되었습니다. 기존처럼 추측하며
00:00:32작업할 필요가 없죠. 저희는 소프트웨어 기업이고, 이 채널은 AI Labs입니다.
00:00:37저희가 프로세스를 최적화한 것처럼 여러분께도 그 방법을 보여드리고 있죠. 이번
00:00:42영상에서는 메타의 새로운 시스템을 자세히 살펴보고, 왜 이것이 '에이전트 우선'인지,
00:00:47그리고 어떻게 하면 훨씬 더 효과적으로 활용할 수 있을지 구축한 기술을 다루겠습니다. 먼저 이
00:00:51시스템이 어떤 모습인지 알아보기 전에, Asterix가 무엇인지 간단히 설명하겠습니다. Asterix는 메타의
00:00:57내부 사이트 구축용 시스템으로 최근 오픈 소스로 공개되었습니다. 메타의 디자인 스타일은 전문적이고
00:01:02미니멀합니다. 메타 제품 전반에 나타나는 디자인 접근 방식과 동일하죠. 미니멀리즘과
00:01:08브랜드 수준의 디자인 시스템 사고가 결합되었습니다. 그래서 사이트의 모든 부분이 일관된 규칙을
00:01:13따르며 완벽하게 조화를 이룹니다. 완전히 맞춤 설정이 가능해서, 누구나 자신만의 브랜드 컬러에 맞춰
00:01:19메타의 시스템을 수정할 수 있습니다. React와 Stylex 기반으로 제작되었는데, 이는 프론트엔드
00:01:24구축에 가장 널리 쓰이는 도구들이죠. ShadCN과 유사한 컴포넌트 라이브러리인데,
00:01:30ShadCN이 즉시 앱에 사용할 수 있는 사전 구축 컴포넌트를 제공한다면, Asterix는 150개 이상의
00:01:35메타 스타일 컴포넌트를 제공하여 필요에 따라 수정할 수 있게 합니다. 또한 에이전트가 사용하기 쉽게 설계되었습니다.
00:01:41로그인, 설정, 채팅 페이지 등 가장 자주 쓰이는 페이지용 템플릿을 함께 제공하며,
00:01:47에이전트가 이를 시작점으로 직접 불러올 수 있습니다. 플레이그라운드를 활용하면
00:01:51수정 사항이 어떻게 반영되는지 바로 볼 수 있습니다. 코드와 결과물이 좌우로 나뉘어 있어,
00:01:57변경 즉시 결과 창에 반영되죠. 플레이그라운드에서는 Asterix의 테마도
00:02:01탐색해 볼 수 있습니다. 각 테마는 고유한 스타일, 색상, 폰트를 갖추어 다양한 종류의
00:02:07웹사이트에 적합하며, 프로젝트에 적용하기 전에 미리 확인해 보고 결정할 수 있습니다.
00:02:11현재 베타 버전이라 메타 엔지니어들이 적극적으로 업데이트하며 개선 중입니다.
00:02:17회사에서 8년간 디자인 시스템을 설계한 경험을 바탕으로 구축되었고, 이미 다수의
00:02:22앱에서 사용되고 있습니다. 이 라이브러리의 핵심 원칙은 '강제가 아닌 가이드'입니다.
00:02:27에이전트의 작업을 제한하는 가드레일을 만드는 대신, 바로 사용할 수 있는 컴포넌트를 제공하죠.
00:02:32가이드는 프롬프트가 아니라 문서와 예제 안에 존재합니다. Asterix를 사용하여 구축하기 위해 필요한
00:02:37모든 규칙과 세부 사항이 문서화되어 있기 때문입니다.
00:02:42그래서 Asterix는 사람과 AI 에이전트 모두 막힘없이 작업할 수 있도록 구축되었습니다. 메타 엔지니어들이
00:02:47직접 구축하고 관리하기 때문에, 디자인 시스템의 모든 요소가 추측이 아닌 실제
00:02:52현업에서 테스트되고 검증되었습니다. Asterix가 무엇인지 알았으니, 이제 프로젝트에 적용해 봅시다.
00:02:57설치는 꽤 간단합니다. GitHub에서 사용하는 패키지 매니저의 설치 명령어를
00:03:02복사하면 됩니다.
00:03:07패키지 매니저는 프로젝트의 코드 라이브러리를 설치하고 관리하는 도구입니다.
00:03:12저희는 npm으로 프로젝트를 빌드하고 있어서 명령어를 복사해 프로젝트 폴더에 붙여넣었습니다.
00:03:17명령어를 실행하면 Asterix의 코어와 테마가 설치됩니다. 테마는 앞서 본 것 중 원하는 것으로
00:03:23바꿀 수 있는데, 저희는 구축할 프로젝트에 맞춰 뉴트럴 테마를 설치했습니다.
00:03:27테마 외에도 이 명령어는 CLI를 설치하고 Asterix를 프로젝트 의존성에 추가하여
00:03:32앱에서 컴포넌트를 사용할 수 있게 합니다. CLI는 에이전트와 Asterix 사이의 가교 역할을 하며,
00:03:38에이전트가 사이트 빌드에 필요한 컴포넌트에 접근하고 다운로드할 수 있게 해줍니다.
00:03:43Asterix에는 MCP도 있지만, CLI가 더 나은 옵션입니다. 필요한 것만 조금씩 불러와
00:03:49컨텍스트 윈도우를 낭비하지 않기 때문이죠. 에이전트로 빌드할 때 하나 더 실행해야 할 것이 있습니다.
00:03:54바로 Asterix init 명령어입니다.
00:03:58이 명령어는 AI 코딩 에이전트가 사용할 수 있도록 프로젝트를 준비시킵니다. 실행하면 몇 가지 질문을
00:04:04하며 템플릿 사용 여부도 묻습니다. 하지만 저희처럼 Next.js 기반으로 빌드한다면,
00:04:09주의할 점이 있습니다. 설치되는 템플릿은 pages 폴더에 위치하는데,
00:04:13Next.js는 app 폴더를 사용합니다. 모든 최신 Next.js 프로젝트는 페이지 생성 시
00:04:19app 폴더를 사용하는 앱 라우터를 쓰기 때문입니다. 반면 pages 폴더는 구형
00:04:24페이지 라우터를 의미하죠. 앱 폴더와 pages 폴더가 동시에 존재하면
00:04:29오류가 발생합니다. 따라서 템플릿을 app 폴더로 옮기거나,
00:04:34설치 시 페이지 이름을 app으로 변경하여 향후 충돌을 방지해야 합니다.
00:04:40init 명령어는 clod.md와 agent.md 파일을 변경합니다. 이 파일들은 에이전트의
00:04:46빌드 가이드 역할을 하죠. 에이전트가 Asterix CLI로 빌드하는 방법,
00:04:50컴포넌트를 가져오는 명령어, 따라야 할 절차를 알려주는 모든 지침이 추가됩니다.
00:04:56이 지침을 통해 에이전트는 CLI를 기반으로 올바르게 앱을 빌드합니다.
00:05:01혼자 추측하거나 웹 검색에 의존하지 않게 되죠. 에이전트가 단독으로 작업하면 제대로 못 하는 경우가
00:05:05있는데, Asterix는 이를 해결합니다.
00:05:11에이전트가 항상 문서화된 사실에 근거하여 작업하도록 만들어 추측을 방지합니다.
00:05:16clod.md 파일을 통해 에이전트는 CLI로 문서를 찾아보도록 유도됩니다. 동일한 프롬프트가
00:05:22agent.md 파일에도 적용되어, 다른 에이전트를 사용해도 가이드를 받을 수 있습니다.
00:05:28빈 템플릿을 선택했음에도 불구하고, 스타일은 globals.css 파일에 적용됩니다.
00:05:34여기에는 웹사이트 전체에 적용되는 디자인 및 테마 스타일이 포함되어 어디서든 사용할 수 있죠.
00:05:39페이지 자체는 현재 빈 상태이지만, 여기서 스타일을 사용하여 사이트를 구축할 수 있습니다.
00:05:45영상이 유익했다면 채널 구독과 하이프 버튼을 눌러주세요.
00:05:50작은 응원이 저희에게는 큰 힘이 됩니다. Asterix 설치와 에이전트 준비가 끝났으니,
00:05:55실제 사이트를 빌드해 봅시다. 에이전트에게 원하는 웹사이트에 대한 상세한 프롬프트를
00:06:00주기만 하면 됩니다. 요청을 보내면 Claude가 프로젝트를 우선 파악합니다.
00:06:06Next.js 프로젝트가 이미 설치되어 있으니까요. 그다음 Claude.md 파일에 명시된
00:06:11Asterix 워크플로우를 따릅니다. Claude는 Asterix CLI 도구를 호출하여 스타터
00:06:17팩, 디자인 프롬프트, 그리고 우리가 원하는 방향에 맞는 리소스를 찾습니다.
00:06:22처음부터 다시 만들지 않고 기존 리소스를 활용하죠.
00:06:27거기서 Claude는 가장 적합한 템플릿을 고릅니다. 여러 명령어를 실행하여 필요한
00:06:32모든 컴포넌트를 불러온 후 앱 코드를 작성하고 실행합니다. 빌드된 사이트는 단순하고
00:06:37미니멀한 스타일을 따랐지만, 몇 가지 문제가 있었습니다. 카드 하나가 줄 바꿈되어야
00:06:43주 라인에 맞춰 정렬되지 않았고 제품들도 중앙 정렬이 안 됐습니다. 컬러 테마도
00:06:47AI가 흔히 사용하는 파란색과 검은색 조합으로, 전형적인 'AI 슬롭(slop)' 느낌이었습니다.
00:06:53단순한 사이트인데도 빌드에 16분이나 걸려 기대보다 너무 오래 걸렸습니다.
00:06:58다음으로 넘어가기 전, 후원사 Lychee Gen에 대해 말씀드리겠습니다.
00:07:03이 캐릭터 아트를 가져와 몇 분 만에 3D 프린트 가능한
00:07:09모델로 만들었습니다. 모델링 기술은 필요 없었죠. 방법은 이렇습니다. Lychee Gen을 사용하면 이미지나
00:07:14스케치, 텍스트 프롬프트로도 몇 분 안에 3D 모델을 얻을 수 있습니다. 아트를 업로드하자 깔끔한 모델이 나왔습니다.
00:07:21모양은 훌륭했지만 검이 너무 작아 보이더군요. 그래서 에디트 스튜디오에서
00:07:26처음부터 다시 할 필요 없이 “크기를 키워줘”라고 말했습니다. 그다음 바로 Lychee Slicer에서 열었더니
00:07:31깔끔하고 완벽한 상태로 출력 준비가 되었습니다. 정말 중요한 건 이거죠. Lychee Gen은
00:07:3680만 명 이상의 사용자를 보유한 인기 레진 프린팅 소프트웨어 Lychee Slicer 팀이 만들었습니다.
00:07:42그래서 화면에서만 예쁜 게 아니라, 깨끗한 토폴로지와
00:07:48자동 복구 기능으로 프린트에 최적화되어 있습니다. 첫 모델은 완전히 무료입니다.
00:07:53고정 댓글의 링크를 클릭해 Lychee Gen을 시작해 보세요.
00:07:57생성된 듯한 느낌을 고치기 위해, 원인을 정확히 파악해야 했습니다. 저희 영상을 보셨다면
00:08:02자주 언급했던 AI Labs 디자인 시스템을 기억하실 겁니다.
00:08:06내부 또는 외부 프로젝트를 빌드할 때 사용하는 모든 기술을 모아둔 곳이죠.
00:08:11이 기술들이 큰 도움이 되었습니다. 그 기술들 중,
00:08:16AI Slop Detector 기술이 있습니다. 에이전트가 빌드한 사이트를 검토하여
00:08:21AI 슬롭에 해당하는 패턴을 모두 찾아내는 게 주요 업무입니다. 덕분에
00:08:27생성된 게 아니라 의도된 디자인으로 보이게 하죠. 이 기술은 보고서를 생성하지만,
00:08:32직접 문제를 고치지는 않아 저희가 반복해서 수정할 수 있습니다. 계속 발전 중이며 이미 많은
00:08:37패턴을 감지하고, AI 슬롭 같다고 하면 패턴으로 추가하기도 합니다.
00:08:42그래서 그 기술을 가져와 웹사이트에 실행했습니다. 랜딩 페이지를 감사하고
00:08:47스캐너를 돌려 모든 문제를 찾아냈습니다. 시각적 디자인은 깔끔하지만,
00:08:51전형적인 AI 생성 SaaS 랜딩 페이지 같다는 결과가 나왔죠. 4가지 문제를 발견했는데,
00:08:56가장 중요한 건 랜딩 페이지의 전체적인 모습이었습니다.
00:09:02수정을 실행하도록 프롬프트를 줬습니다. 기술이 수정 사항을 적용하자 컬러
00:09:07팔레트를 전형적인 AI 슬롭에서 더 미니멀한 것으로 바꿨습니다.
00:09:12보고된 모든 문제를 해결하고 진부한 문구를 삭제해, 사이트가 의도된 디자인으로 보이게 만들었습니다.
00:09:17결과는 첫 번째 버전보다 훨씬 좋았습니다. 다음 단계는 Asterix가 직접
00:09:22수정할 필요 없는 훌륭한 사이트를 빌드하게 하는 것이었습니다. 라이브러리를 더 잘 활용하고
00:09:27문제를 해결하기 위해 Asterix Max라는 기술을 만들었습니다.
00:09:33이 기술은 라이브러리가 템플릿에 의존하여 단순한 사이트를 빌드하는 대신,
00:09:37Asterix의 성능을 극한으로 끌어올립니다.
00:09:43가장 중요한 건 모델을 확고한 근거 위에 두는 것입니다. 즉, 추측이 아니라
00:09:48실제 사실에 기반해 작업하게 하죠. 이를 위해 Asterix 매니페스트 명령어를 실행하여
00:09:52사용 가능한 모든 것을 나열하는 파일을 만듭니다. 모델이 존재조차 몰랐을 모든 명령어와 플래그를
00:09:58인식하게 하는 거죠. 그 매니페스트가 있으면 모델은 추측할 필요가 없습니다.
00:10:03CLI에 무엇이 있는지 알고 문제를 직접 해결할 수 있죠. 이 기술은 또한
00:10:09clod.md의 지침을 따르며 디자인을 실제로 확인하는 도구를 사용하여 깔끔한
00:10:15그리드와 적절한 깊이의 계층 구조 등을 체크하여, 이전과 같은 문제가 발생하지 않게 합니다.
00:10:20또한 여러 영역에 걸쳐 참조하고 이벨(evals)을 포함해, 문제를 자동으로 감지하고 테스트합니다.
00:10:27빌드한 기술을 테스트하기 위해 AI Slop Detector 기술도 함께 설치하여
00:10:32둘이 협력하여 더 좋은 사이트를 생성하도록 했습니다. 수정 작업을 따로 할 필요 없이
00:10:36한 번에 처리할 수 있게 된 거죠. 기술을 호출하고 빌드할 사이트를 알려줬습니다.
00:10:41지시대로 먼저 매니페스트 명령어를 실행해 필요한 콘텐츠를 수집했습니다.
00:10:46이후 이전과 유사한 워크플로우를 사용했습니다. 그 후, 기술은 헤드리스
00:10:51크롬 브라우저를 사용하여 사이트의 외형을 체크했습니다.
00:10:56AI Slop Detector 기술과 협력하여 반복적으로 스크린샷을 찍고,
00:11:00분석하고 발견된 문제를 해결했습니다. 마지막에는 사이트 전반의
00:11:05변경 사항들이 적용되었습니다. 검토와 개선을 동시에 진행하느라 시간이 걸렸지만,
00:11:10결과물은 훨씬 뛰어났습니다. 이 보완 기술과 함께 몇 가지
00:11:14문제는 남았지만, 아주 효과적으로 수정할 수 있었습니다. Asterix
00:11:19단독으로 작업했을 때보다 훨씬 나았습니다. 방금 만든 기술은 AI Labs 디자인 시스템과 함께
00:11:24저희 커뮤니티인 AI Labs Pro에서 찾을 수 있습니다. 모든 리소스와 스타터
00:11:29팩 등을 얻을 수 있고, 저희 팀을 포함해 같은 관심사를 가진 사람들과 교류할 수 있는 곳이죠.
00:11:34저희 활동에 가치를 느끼고 채널을 후원하고 싶다면 가장 좋은 방법입니다. 링크는
00:11:39설명란에 있습니다. 이번 영상은 여기까지입니다. 채널을 후원하고
00:11:43계속해서 이런 영상을 만들 수 있도록 돕고 싶으시다면, 아래 슈퍼 땡스 버튼을 이용해 주세요. 항상
00:11:49시청해 주셔서 감사합니다. 다음 영상에서 뵙겠습니다.