# 디자인 시스템

12개의 포스트
post-thumbnail

Atomic Design Pattern의 Best Practice 여정기

좋은 폴더 구조란 무엇일까요? 가끔씩 이 파일을 어디다 두면 좋지? 라는 생각이 들때가 있습니다. 하지만 막상 아무데나 두어도 어차피 폴더로 찾아가지 않고 파일명을 검색해서 찾아가기에 대수롭지 않게 생각되기도 했어요. > 그런데 프로젝트에 새로운 사람이 투입이 되니까

2022년 6월 14일
·
16개의 댓글
post-thumbnail

rollup + storybook 따라하기

왜 rollup인가? 스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다. 하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적

2022년 4월 26일
·
0개의 댓글
post-thumbnail

TIL#1 React 아토믹 디자인 시스템, 파일구조에 관하여

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

2022년 3월 28일
·
0개의 댓글
post-thumbnail

디자인 시스템 개발기

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

2022년 2월 9일
·
0개의 댓글

storybook으로 구축하는 디자인 시스템

여기에 가시면 다양한 storybook의 예제를 볼 수 있습니다. 이 외에 저같은 경우는 Atomic Design 형태로 만들고 싶어 공부하고 있습니다. 아래의 그림을 살펴보세요. 1. 내가 만들 디자인 시스템 가장 이상적인 디자인 시스템은 프로젝트

2021년 5월 7일
·
0개의 댓글
post-thumbnail

개발자의 디자인 시스템 회고

개발자의 디자인 시스템 회고

2021년 3월 21일
·
4개의 댓글
post-thumbnail

원티드 - 요즘 "프론트엔드 개발" 어떻게 하지? 참관 후기

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

2019년 12월 7일
·
17개의 댓글
post-thumbnail

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기

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

2019년 11월 24일
·
1개의 댓글
post-thumbnail

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

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

2019년 11월 24일
·
4개의 댓글
post-thumbnail

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

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

2019년 11월 23일
·
4개의 댓글