스크립트
00:00:00이것은 메타의 자체 스타일링 솔루션인 StyleX를 기반으로 구축된 메타 버전의 ShadCN, Asterix입니다.
00:00:05완전한 테마 설정이 가능하고 MIT 라이선스를 따르며, 메타는 8년 동안 13,000개의 애플리케이션에서 내부적으로 이를 개선해 왔다고 합니다.
00:00:09Tailwind나 ShadCN을 싫어하시는 분이라면 이 라이브러리에 확실히 관심이 생기실 겁니다. ShadCN을 좋아하시더라도
00:00:15한번 살펴볼 만한 가치가 있을 겁니다.
00:00:18바꿀 만한 이유가 있는지 함께 알아보죠.
00:00:24개인적으로 이 라이브러리가 출시와 동시에 제공하는 수많은 컴포넌트와 기능에 정말 깊은 인상을 받았습니다.
00:00:29그동안 내부적으로 수년간 사용해 왔다는 것을 잘 보여주는 대목이죠.
00:00:32React 기반으로 구축된 150개 이상의 접근 가능한 컴포넌트가 있는데, 일일이 나열하는 것보다는
00:00:37모든 기능을 한눈에 볼 수 있는 템플릿을 통해 보여드리는 것이 가장 좋을 것 같습니다.
00:00:41여기 상태 섹션과 드롭다운 메뉴가 포함된 그룹 테이블이 있습니다.
00:00:44결제 양식에서는 필요한 모든 개별 폼 요소를 확인할 수 있고,
00:00:48오류 메시지와 같은 폼 상태 정보도 함께 제공됩니다.
00:00:50드래그 앤 드롭 칸반 보드를 만들거나, 탭과 사이드바가 있는 IDE를 구축할 수도 있습니다.
00:00:56이커머스 사이트 제작도 문제없습니다.
00:00:58심지어 AI 채팅 사이트도 가능하며, 응답 결과를 렌더링하기 위한 마크다운 컴포넌트까지 완벽하게 지원합니다.
00:01:03구독 버튼도 있네요.
00:01:05잠시만요, 그건 유튜브네요. 하지만 저희 영상이 도움이 되셨다면 구독 버튼을 눌러주세요. 정말 큰 힘이 됩니다.
00:01:10보시다시피 Asterix는 여러분이 필요로 하는 거의 모든 컴포넌트 요구 사항을 충족시켜 줍니다.
00:01:14이 모든 컴포넌트는 실제로 핵심 라이브러리에서 제공됩니다.
00:01:16따라서 다른 컴포넌트를 사용할 때와 동일하게 사용할 수 있으며, 컴포넌트에서 제공하는 다양한 옵션은 문서를 통해 확인할 수 있습니다.
00:01:23예를 들어, 버튼에는 아이콘, 끝 콘텐츠, 크기, 변형 등 필요한 거의 모든 설정을 추가할 수 있습니다.
00:01:30이제 왜 이 라이브러리를 사용해야 하는지 알아보겠습니다.
00:01:32메타의 주장은 디자인 시스템이 항상 두 가지 나쁜 선택지 중 하나를 강요한다는 것입니다.
00:01:36첫 번째는 Material UI와 같은 대기업 시스템을 채택하는 것인데, 이 경우 모든 앱이 커스터마이징이 제한된 구글 제품처럼 보이게 됩니다.
00:01:44두 번째는 ShadCN처럼 코드를 프로젝트에 복사하여 붙여넣는 것인데, 이 경우 여러분이 코드를 직접 소유하게 됩니다.
00:01:50결국 모든 프로젝트가 각 컴포넌트의 자체 포크를 갖게 되고, 여러분이 업데이트를 직접 관리해야 하므로 업스트림 수정 사항을 따라가기 어려워집니다.
00:01:57이런 컴포넌트 코드 책임을 지기 싫어하는 사람들을 위해 Asterix는 이러한 트레이드오프를 끝내겠다고 주장합니다.
00:02:03Asterix를 사용하면 시스템이 동작, 접근성, 품질을 관리하고 테마가 외관을 제어합니다.
00:02:08색상, 타입, 반경, 모션 등 토큰 수준에서 모든 것을 사용자 정의할 수 있으며, 컴포넌트를 다시 작성할 필요가 전혀 없습니다.
00:02:14여기 Asterix 웹사이트의 템플릿을 사용하여 만든 애플리케이션이 있습니다.
00:02:18이것은 별도의 테마를 지정하지 않았을 때의 기본 모습이며, 기본 테마가 함께 제공됩니다.
00:02:24직접 테마를 만들려면 define theme 함수를 사용하면 되는데,
00:02:27이 함수는 몇 가지 멋진 기능을 제공합니다.
00:02:29첫 번째는 색상 옵션입니다.
00:02:31때로는 주요 브랜드 색상을 밝은 녹색으로 정하고 싶을 때가 있습니다.
00:02:35배경색, 강조색 등 개별 색상을 일일이 생각하고 생성하고 싶지는 않겠죠.
00:02:40Asterix에서는 저장 버튼을 누르기만 하면 이런 색상들을 자동으로 생성해 줍니다.
00:02:44따라서 헥스 코드 하나만으로 훌륭한 시작점을 얻을 수 있습니다.
00:02:48색상 다음으로 타이포그래피 옵션이 있습니다.
00:02:50이는 직관적입니다. 여기서는 'into'를 사용하고 스케일도 설정할 수 있습니다.
00:02:54기본 텍스트 크기를 14로 설정합니다.
00:02:57비율은 1.2로 지정하겠습니다.
00:02:59텍스트 크기를 한 단계 높일 때마다,
00:03:03기본값에 1.2를 곱하여 개별 텍스트 크기를 결정하게 됩니다.
00:03:08이렇게 자동으로 모든 토큰이 생성되는 것이죠.
00:03:10다음으로 반경(radius)을 조절할 수 있습니다.
00:03:12이 설정 역시 매우 간단합니다.
00:03:14버튼을 둥글게 만들고 싶다면 높은 값을 설정하면 됩니다.
00:03:17모든 모서리를 날카롭게 하고 싶다면 0으로 설정하세요.
00:03:21다음은 마지막 도우미 옵션인 모션(motion)입니다.
00:03:23이는 마우스 호버나 클릭 시 애니메이션 속도를 제어합니다.
00:03:27이처럼 몇 가지 변수 정의만으로도 커스텀 테마를 훌륭하게 완성할 수 있습니다.
00:03:31필요한 모든 토큰을 알아서 만들어주니까요.
00:03:34그런데 만약 선택된 토큰이 마음에 들지 않는다면 어떨까요?
00:03:36예를 들어 여기 보조 버튼의 색상을 바꾸고 싶다면 토큰 섹션으로 가면 됩니다.
00:03:40이 테마와 토큰 섹션의 아주 멋진 점은 모든 것이 타입 안전하다는 것입니다.
00:03:42정의 가능한 토큰을 시스템이 정확히 알고 있죠.
00:03:47이것이 바로 CSS 대신 자바스크립트나 타입스크립트 파일을 사용하는 이유입니다.
00:03:49타입 안전성을 확보할 수 있으니까요.
00:03:53보조 버튼의 배경색은 'color neutral' 토큰으로 정의되어 있습니다.
00:03:55배열로 설정하여 라이트 모드와 다크 모드 값을 각각 입력하면 됩니다.
00:03:58저는 두 모드 모두 같은 색상을 사용하겠습니다.
00:04:03저장하면 보조 버튼 색상이 변경된 것을 확인할 수 있습니다.
00:04:05하지만 색상을 바꾸면서 텍스트가 잘 보이지 않는 문제가 생겼습니다.
00:04:08텍스트 색상을 검은색으로 바꾸고 싶지만,
00:04:11이 설정은 'color text primary' 변수로 정의되어 있습니다.
00:04:12이를 저장하면 화면의 모든 텍스트가 검은색으로 변해버립니다.
00:04:15버튼만 바꾸고 싶었는데 말이죠.
00:04:18따라서 토큰을 전역으로 바꾸는 대신
00:04:19컴포넌트 단위에서만 변경하겠습니다.
00:04:22이때 컴포넌트 섹션을 활용합니다.
00:04:24버튼을 수정하겠습니다.
00:04:26변형 유형(variant)을 'secondary'로 지정하고,
00:04:28CSS 변수를 원하는 대로 입력합니다.
00:04:30색상을 검은색으로 설정합니다.
00:04:32저장하고 확인하면 보조 버튼의 텍스트 색상만 검은색으로 바뀝니다.
00:04:35다른 곳은 변하지 않았죠.
00:04:37해당 컴포넌트에만 변경 사항이 적용되었습니다.
00:04:39컴포넌트 섹션의 또 다른 멋진 점은
00:04:40자신만의 커스텀 변형을 정의할 수 있다는 것입니다.
00:04:42예를 들어 'my button'이라는 변형을 만들어 보겠습니다.
00:04:44글자색은 검은색, 배경색은 빨간색으로 설정합니다.
00:04:46버튼을 사용할 때 타입 안전성이 보장되므로
00:04:47'my button'이 유효한 변형임을 시스템이 알고 있습니다.
00:04:50여기 구독 버튼이 보이죠.
00:04:52테마 설정만으로도 컴포넌트의 모든 부분을 조정하거나 앱 전체의 스타일을 완전히 바꿀 수 있습니다.
00:04:56좋은 베이스로 시작하고 싶다면
00:04:57미리 빌드된 테마를 사용할 수도 있습니다.
00:04:58파일을 보면 많은 사용자 지정 항목이 있고,
00:05:00기존 테마를 확장할 수도 있어서
00:05:01매번 새로 만들 필요가 없습니다.
00:05:02모든 테마는 프로덕션 빌드가 가능합니다.
00:05:05따라서 Next.js 같은 서버 사이드 렌더링 앱에서도 잘 작동하며,
00:05:07필요한 CSS와 자바스크립트를 모두 정적으로 생성합니다.
00:05:09테마 설정을 한곳에서 관리하면
00:05:10브랜드 일관성을 유지하는 데 큰 도움이 됩니다.
00:05:12Tailwind에 대한 비판 중 하나가 바로 이 부분인데요.
00:05:15개발자나 AI가 어떤 클래스든 쓸 수 있어서
00:05:16스타일이 제각각이 되기 쉽다는 점입니다.
00:05:18이런 고정 테마를 사용하면 한곳에서 관리되므로
00:05:20추적하기가 훨씬 쉽습니다.
00:05:23테마 변경 사항을 쉽게 확인할 수 있고,
00:05:26AI도 고민 없이 제공된 토큰과 컴포넌트만 사용하게 되죠.
00:05:28Tailwind와 ShadCN으로도 유사하게 구현할 수는 있지만,
00:05:31타입 안전성이 없어 강제하기는 더 어렵습니다.
00:05:34테마 외에도 컴포넌트를 직접 스타일링할 수 있습니다.
00:05:36여러 방법이 있는데, 권장 방식은 StyleX를 활용하는 것입니다.
00:05:38Asterix가 StyleX 기반이기 때문입니다.
00:05:40Tailwind나 Panda 같은 다른 라이브러리,
00:05:42혹은 일반 CSS 클래스도 사용할 수 있습니다.
00:05:45여기 StyleX로 정의된 오버라이드를 보겠습니다.
00:05:46Primary 버튼 스타일을 글자색은 흰색, 배경색은 빨간색으로 설정했습니다.
00:05:49페이지의 특정 버튼 하나만 바꾸고 싶다면
00:05:53X-Style 프롭을 이용해 스타일을 적용하면 됩니다.
00:05:56저장하면 Primary 버튼이 해당 스타일로 바뀝니다.
00:05:58일회성 변경을 원할 때 유용한 방식이죠.
00:06:00Tailwind와 ShadCN으로도 말이죠.
00:06:01문서에서 다양한 스타일링 방법을 확인할 수 있습니다.
00:06:03정말 유연하죠.
00:06:05눈여겨볼 점은 Tailwind 지원입니다.
00:06:06소위 'Tailwind 브릿지'를 구현했는데요.
00:06:07Asterix 테마의 디자인 토큰을
00:06:09특정 부분을 변경하고 싶다면 말이죠.
00:06:10색상, 반경, 폰트 크기 등이 모두 Asterix에서 설정한 테마를 따르면서
00:06:12Tailwind 클래스로 사용할 수 있습니다.
00:06:14개인적으로는 그냥 StyleX를 사용할 것 같습니다.
00:06:16Asterix가 구축된 기반이기도 하고,
00:06:17라이브러리를 혼용하는 것이 복잡할 뿐이라 생각해서요.
00:06:19또 다른 큰 특징은 AI와의 우수한 통합성입니다.
00:06:21Asterix CLI는 사람이 아닌 AI를 위해 존재합니다.
00:06:22각 컴포넌트 문서를 불러오거나
00:06:24AI 에이전트의 컨텍스트로 제공해 도움을 주고,
00:06:25StyleX에 정의된 오버라이드가 있습니다.
00:06:27기본 버튼이라고 부르는 스타일이 있는데,
00:06:29글자 색상을 흰색으로,
00:06:30배경 색상을 빨간색으로 지정하고 싶습니다.
00:06:32이제 이 페이지의 버튼 하나만 바꾸고 싶다면,
00:06:34X-Style 속성을 넣기만 하면 됩니다.
00:06:36그리고 StyleX 스타일을 전달하면,
00:06:38직접 프로젝트를 만들기 전에 체험해 볼 수 있는
00:06:39플레이그라운드도 마련되어 있습니다.
00:06:42여러분도 한번 사용해 보실 생각인가요?
00:06:43댓글로 알려주세요.
00:06:45잠깐, 구독 잊지 마시고요.
00:06:46늘 그랬듯,
00:06:47다음 영상에서 뵙겠습니다.
00:06:48컴포넌트를 스타일링하는 모든 다양한 방법들이죠.
00:06:51정말 유연합니다.
00:06:52하지만 꼭 짚고 넘어가고 싶은 멋진 기능은
00:06:53이 Tailwind 지원입니다.
00:06:55실제로 이들은
00:06:56Tailwind 브릿지라는 기능을 통해 구현했습니다.
00:06:58이를 통해 계속해서 Tailwind를 사용할 수 있지만,
00:07:00Asterix에서 설정한 테마의
00:07:01모든 디자인 토큰을
00:07:03Tailwind 유틸리티 클래스로 매핑해 줍니다.
00:07:06따라서 색상,
00:07:07반경,
00:07:07폰트 크기 같은 것들이
00:07:08모두 Asterix 테마로 정의되지만,
00:07:10Tailwind에서 해당 설정을
00:07:11클래스 이름으로 사용할 수 있는 거죠.
00:07:13하지만 개인적으로는
00:07:13StyleX를 계속 사용할 것 같습니다.
00:07:15Asterix가 이를 기반으로 구축되었고,
00:07:17라이브러리들을 섞어 쓰는 것이
00:07:18복잡하기만 하고 얻는 것보다 잃는 게 많다고 생각하기 때문입니다.
00:07:20스타일링 이야기는 여기서 마치고,
00:07:21Asterix의 또 다른 대단한 기능은
00:07:22AI와 매우 잘 작동한다는 점입니다.
00:07:24Asterix CLI가 있긴 한데,
00:07:26대부분 사람이 쓰라고 만든 게 아니라
00:07:28AI를 위해 만들어졌습니다.
00:07:29컴포넌트마다 문서를 가져오는
00:07:30명령어들이 포함되어 있어
00:07:31이를 컨텍스트에 불러올 수 있습니다.
00:07:33에이전트들이 해당 컴포넌트를
00:07:34더 잘 다룰 수 있게 돕기 위해서죠.
00:07:36심지어 에이전트의 agents.md 파일까지
00:07:38가이드를 위해 자동으로 채워줍니다.
00:07:40데모를 만들 때 사용해 봤는데
00:07:41정말 훌륭하게 작동했고,
00:07:42꽤 새로운 라이브러리임에도
00:07:43Fable이나 GPT 같은 모델들이
00:07:45모두
00:07:45Asterix와 잘 작동했습니다.
00:07:47전반적으로 보셨다시피 Asterix는
00:07:49기능으로 꽉 찬
00:07:49디자인 시스템입니다.
00:07:51기본적인 내용만 다뤘을 뿐이죠.
00:07:52문서가 매우 잘 작성되어 있으니
00:07:54꼭 한번 읽어보시는 걸 추천합니다.
00:07:55대부분의 컴포넌트는
00:07:57모범 사례 섹션도 포함되어 있어
00:07:58LLM에게도 아주 큰 도움이 될 겁니다.
00:08:00프로젝트가 없더라도
00:08:02직접 사용해 볼 수 있는
00:08:03플레이그라운드도 마련되어 있습니다.
00:08:04이런 라이브러리를 사용해 보실 생각인가요?
00:08:06아래 댓글로 알려주세요.
00:08:07잠시만요, 구독 버튼도 눌러주시고요.
00:08:08항상 그렇듯,
00:08:09다음 영상에서 뵙겠습니다.
00:08:10감사합니다.