# Design System

22개의 포스트
post-thumbnail

(SEB_FE) Section4 Unit4 [UX/UI] Design System

디자인 시스템이란 무엇이며, 왜 중요한지 이해할 수 있다.디자인 시스템을 적용함으로써 얻는 이점을 알 수 있다.구글, 마이크로소프트 등 실제 유명 서비스에서 디자인 시스템을 어떻게 사용하는지 알 수 있다.디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

🔘 디자인시스템 버튼 컴포넌트 개발기

어쩌다보니 NEXTSTEP 리액트 강의에 있는 미션에서 디자인 시스템을 개발하는 사이드 프로젝트에 참여하게 되었다. 목적은 교육생들이 리액트 학습에만 집중할 수 있도록 컴포넌트를 가져다 써 UI 구현를 편리하게 하도록 해주기 위함이었다!디자인시스템이 적용되는 미션은 페

2023년 5월 18일
·
0개의 댓글
·

디자인 시스템 리서치

생각 디자인 시스템 만들기란 업무가 주어져서 관련 자료를 서치해보았다. 자주쓰는 ui 요소 일부만 컴포넌트화 해도 엄청 편리한데, 이런 것들을 총 망라해 시스템화해두면.. 사실상 ui 를 그리는 작업 자체에는 디자이너가 거의 필요 없어질 것 같다. ux 자체도 기본적인

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

Storybook + Jest + RTL로 모던하게(?) 프론트엔드 단위 테스트하기

Ep.3 시나리오 기반 프론트엔드 테스팅

2023년 1월 29일
·
0개의 댓글
·
post-thumbnail

디자인 시스템에 Compound Component 적용하기

React compound component = 반응 혼합물 틀?

2023년 1월 26일
·
0개의 댓글
·

AST 분석을 활용해서 컴포넌트 추적해보기

2022 패스트 캠퍼스에서 진행하는 inner circle 디자인시스템(김민태 멘토님) 스터디에서 진행했던 내용을 기반으로 작성한 글입니다.프로젝트를 진행하기 앞서 주제를 정하기까지 한달 정도를 고민했었습니다.왜냐하면 디자인 시스템의 정의 자체가 조직, 프로젝트마다 달

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

디자인 시스템 혼자서도 만들수 있다 !

최근 한달간 디자인 시스템을 직접 만들어 보고 프로젝트에 적용했습니다. 디자인 시스템을 왜 만들어야 하는지, 어떻게 적용할 수 있는지에 대한 글입니다.

2023년 1월 8일
·
8개의 댓글
·
post-thumbnail

atomic design system

참고한 영상https://www.youtube.com/watch?v=33yj-Q5v8mQ프로젝트를 하기 앞서, 멘토님의 추천에 의해 아토믹 디자인 시스템에 대해 공부해보았다. 공부라기보다 빠르게 훑기정도...?원래는 5단계로 나누어진다.1\. atoms(원자)

2022년 12월 15일
·
0개의 댓글
·
post-thumbnail

Atomic Design 간단 정리

Brad Frost의 Atomic Design - FE UI/code Design

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

Storybook Deploy with Chromatic

퍼스널 브랜딩 디자인 시스템 제작기 :)

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

RESON&CE Design System 배포

퍼스널 브랜딩 디자인 시스템 제작기 :)

2022년 8월 19일
·
0개의 댓글
·

사내 디자인 시스템 배포

나는 Saas 프로젝트의 시작이 다가올 때 사내 디자인 시스템을 배포해야겠다고 마음먹었다. 컴포넌트들이 완성은 되었지만 실제로 라이브러리를 통해 사용해 본적은 없었기 때문이다. Saas 프로젝트 시작 전에 배포를 마치지 못한다면, 여태 만들었던 컴포넌트들의 코드를 새로

2022년 8월 7일
·
0개의 댓글
·

사내 디자인 시스템 제작

현재 회사는 기존 서비스를 Saas 형태로 전환하려 한다. 기존에는 기술 인력이 고객사에 방문하여 서비스를 직접 설치해 주는 방식이었다고 한다. 하지만 Saas를 통해 고객들이 사이트에서 설치를 직접하는 방식으로 사업모델을 변경하려 한다. 그래서 리액트 기반의 서비스

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

(번역) NNG 디자인 시스템 101

원문: Design Systems 101

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

[FE쥬니어의 Design System] 01. Personal Design System, Storybook, Vite로 환경 설정하기

Storybook, Vite로 Personal Design System 개발 환경 설정한 방법

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

CSS in JS vs CSS Modules

요즘 새로운 회사 일로 인해 두 가지에 대해서 조사할 일이 생겼다.디자인 시스템에서는 어떤 라이브러리가 합리적일 지 고민했던 흔적을 글로 남기고자 한다.개발에 앞서 생각하기에 나의 중요한 점을 적어봤다.

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

VAC 패턴

퍼블리셔와 함께 react 프로젝트를 진행해야한다면, VAC를 보아라,,

2021년 12월 20일
·
0개의 댓글
·
post-thumbnail

Atomic Design 적용해보기

Atomic Design을 한번 사용해보았습니다

2021년 11월 30일
·
0개의 댓글
·