나만의 디자인 시스템을 만들어보자!

요즘 컨퍼런스에서 자주 등장하는 주제는 디자인 시스템인 거 같습니다. 어느 정도 규모가 있는 회사들은 회사의 특성을 고려한 디자인 시스템을 개발하여 사용하는데요. 관련 영상을 보다보니까 저도 디자인 시스템에 대한 관심이 생겨서 나만의 디자인 시스템을 만들어보려고 합니다

서론 이번 글에서는 선택한 기술 스택을 바탕으로 프로젝트를 세팅해보겠습니다. 프로젝트 세팅이 제대로 됐는지 확인하기 위해 간단한 샘플 코드도 작성해볼 예정입니다. Create Project 저번 글에서 말씀드렸듯이 저는 빌드 툴로 Vite를 선택했습니다. 해당 명령

서론 이번 글에서는 지금까지 만든 프로젝트로 배포 테스트를 진행해보겠습니다. "이제 프로젝트 세팅 끝났는 데 왜 배포를 하냐?" 라는 질문이 나올 수 있을 거 같습니다. 어차피 해당 디자인 시스템을 배포할 예정이기도 하고 프로젝트가 방대해지기 전에 배포 테스트를 하는

Storybook을 사용하면 컴포넌트 문서화를 간단하게 진행할 수 있습니다. 하지만 작성한 Storybook을 확인하기 위해서는 npm run storybook 명령어를 통해 별도의 서버를 실행시켜야 하며 다른 사람들과 공유하는 것이 주 목적인 Storybook의 특징

서론 디자인 토큰이란? 디자인 토큰은 무엇일까요? 간단하게 말하면 해당 디자인 시스템에서 개발자가 사용하는 다양한 값을 상수로 정해놓은 것을 말합니다. 세상에는 무수히 많은 표현들이 있지만 우리들은 한정된 단어로만 의사소통을 진행합니다. 이것과 마찬가지로 디자인

저번 시간까지는 디자인 시스템의 기반을 다졌다면 이번 글에서는 드디어 첫 번째 컴포넌트를 개발해볼 예정입니다. Button 컴포넌트이 상태값 Button 컴포넌트 Button.tsx Button.css.ts Button.stories.ts Button.tes

오늘은 Accordion 컴포넌트를 리팩토링 하는 시간을 가지겠습니다. 기존 Accordion 컴포넌트 제가 구현한 기존의 Accordion 컴포넌트를 소개하자면 아래와 같습니다. 합성 컴포넌트 패턴으로 구성되어 있으며 아래와 같은 요구사항을 충족하도록 기능 구현이