# 디자인 시스템

[MUI] MUI를 통한 디자인 시스템 구조 뜯어보기
디자인 시스템을 구축하는 데 있어서 개발자의 역할은 뭘까요? MUI의 소스 코드를 바탕으로 이들이 디자인 시스템을 구축한 방법을 정리하며 자문자답해 보았습니다.
Material Design을 활용한 디자인 시스템 제작
디자인 시스템의 필요성과 디자인 프로그램을 활용하여 json 파일 업는방법에 대한 부분은 아래쪽 링크를 통해 한번 읽어 보시길 권합니다. -> 디자인 시스템의 필요성 이글은 CSS-in-JS 방식으로의 Material UI를 활용하여 Design system을 구축한

디자인 시스템의 필요성
도입 개발자와 디자이너 사이엔 항상 긴밀한 협업이 필요하다 하지만 항상 정확한 정보를 전달하기 쉽지않고 그로인해 Cumunication Cost가 항상 발생한다 이부분을 해결하기위해 두 집단 사이의 커뮤니케이션 시스템이 필요하다 서비스는 통일성이 있어야한다. 여러

디자인 시스템을 만드는 이유
디자인 시스템은 컴포넌트 라이브러리만이 아닌, 서비스가 나타내고자 하는 방향입니다. 이 포스트에서는 "디자인 시스템의 정의"와 "각 기업들의 디자인 시스템"을 알아봅니다!

디자인 시스템이란? ( Part 2 )
디자인 시스템이란 - 2 Part1에서는 디자인 시스템이 무엇인지, 어떤 특징을 가지고 있는지 알아봤습니다. Part2에서는 디자인 시스템의 구성요소에 대해 자세히 알아봅시다. 잠시 생물시간으로 돌아가봅시다. 사람은 수많은 세포들로 이루어져있습니다. 그리고 세포는 지

Atomic Design Pattern의 Best Practice 여정기
좋은 폴더 구조란 무엇일까요? 가끔씩 이 파일을 어디다 두면 좋지? 라는 생각이 들때가 있습니다. 하지만 막상 아무데나 두어도 어차피 폴더로 찾아가지 않고 파일명을 검색해서 찾아가기에 대수롭지 않게 생각되기도 했어요. > 그런데 프로젝트에 새로운 사람이 투입이 되니까
rollup + storybook 따라하기
왜 rollup인가? 스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다. 하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적

TIL#1 React 아토믹 디자인 시스템, 파일구조 생각하기
두 개의 React 프로젝트를 완성해보고 나니, 잘 정리된 파일 구조의 필요성을 느끼게 되었다. 파일 구조는 사실 개발자의 개인 취향에 따른다고들 하는데, 일단은 잘 알고, 왜 그렇게 하는지 기준을 세우고 하는 것과 그냥 막연히 나누는 것에는 차이가 있다고 생각한다.

디자인 시스템 개발기
제가 다니고 있는 식스샵에서 최근에 스토리북을 이용해서 디자인시스템을 개발했는데 관련해서 경험 및 후기를 간략하게 써보려고 합니다.

👨🎨 Flutter 에서 Customizing 가능한 디자인 시스템 사용하기
flutter 에서 두통 유발자 ThemeData 커스터마이징 하기
storybook으로 구축하는 디자인 시스템
여기에 가시면 다양한 storybook의 예제를 볼 수 있습니다. 이 외에 저같은 경우는 Atomic Design 형태로 만들고 싶어 공부하고 있습니다. 아래의 그림을 살펴보세요. 1. 내가 만들 디자인 시스템 가장 이상적인 디자인 시스템은 프로젝트

원티드 - 요즘 "프론트엔드 개발" 어떻게 하지? 참관 후기
12/4일 원티드에서 진행한 요즘 "프론트엔드 개발" 어떻게 하지?라는 행사에 참관했다. 이렇게 평일에 진행하는 행사에 참여해보는것은 진짜 드문 것 같다. 사무실이 마포 합정에 위치해서 강남으로 오는게 엄청난 고역이라 매번 재밌어 보이는 행사도 그냥 생략해왔었는데, 요새 평상시보다 그래도 조금은 더 여유로워서 다녀올 수 있게 되었다. 이번 행사는 원...

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기
우리가 만든 컴포넌트들을 다른 프로젝트에서도 사용 할 수 있게 해주려면 패키지를 만들어서 npm에 퍼블리시를 해주어야 합니다. (또는, 로컬 패키지로 설정해서 사용하거나 git 레포로 설치하는 방법도 존재합니다.) 라이브러리를 배포하려면, 우리가 보통 웹 애플리케이션을 webpack / parcel 과 같은 도구로 번들링하는 것 처럼 라이브러리도 번들링을...

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기
스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포넌트를 만들게 될 때마다 디자인 시스템에 컴포넌트를 하나씩 ...

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기
TypeScript와 Storybook을 사용하여 나만의 디자인 시스템을 구축해봅시다! 우선, 디자인 시스템이 무엇인지부터 알아보도록 합시다.