# 디자인 시스템

20개의 포스트
post-thumbnail

Atomic design

life는 삶이라고요

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

[MUI] MUI를 통한 디자인 시스템 구조 뜯어보기

디자인 시스템을 구축하는 데 있어서 개발자의 역할은 뭘까요? MUI의 소스 코드를 바탕으로 이들이 디자인 시스템을 구축한 방법을 정리하며 자문자답해 보았습니다.

2022년 12월 27일
·
0개의 댓글
·

Material Design을 활용한 디자인 시스템 제작

디자인 시스템의 필요성과 디자인 프로그램을 활용하여 json 파일 업는방법에 대한 부분은 아래쪽 링크를 통해 한번 읽어 보시길 권합니다. -> 디자인 시스템의 필요성 이글은 CSS-in-JS 방식으로의 Material UI를 활용하여 Design system을 구축한

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

디자인 시스템의 필요성

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

2022년 9월 29일
·
0개의 댓글
·
post-thumbnail

Stroybook 시작하기

디자인 시스템을 구축하기 위한 Storybook을 처음 시작하는 법에 대해서 궁금하지 않으신가요?

2022년 9월 25일
·
0개의 댓글
·
post-thumbnail

디자인 시스템을 만드는 이유

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

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

디자인 시스템이란? ( Part 2 )

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

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

Atomic Design Pattern의 Best Practice 여정기

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

2022년 6월 14일
·
23개의 댓글
·
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일
·
2개의 댓글
·
post-thumbnail

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

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

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

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

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

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