재사용될 수 있는 컴포넌트를 개발자와 디자이너가 확인할 수 있도록
인벤토리에 보관한다.
Why Storybook?
웹의 보편성으로 더욱 복잡해지는 프론트엔드
모든 사용자의 인터페이스에 대응하려고 하는 반응형 웹 디자인을 필두로 시간이 지남에 따라 장치, 브라우저, 접근성, 성능 및 비동기 상태와 같은 추가 요구 사항이 쌓여가고 있습니다.
문제를 더욱 복잡하게 만드는 것은 이러한 UI가 비즈니스 논리, 대화형 상태 및 앱 컨텍스트에 얽혀 있기 때문에 디버깅하기가 어렵다는 것입니다.
최신 프론트엔드의 폭은 기존 workflow를 압도하고 수많은 UI 변형을 고려해야 하지만 모든 것에 대응할 수는 없습니다.
Storybook이 제시하는 solution
-
격리된 UI 구축
앱 비즈니스 로직 및 컨텍스트의 간섭 없이 구성 요소를 렌더링하기 위해 격리된 iframe을 제공함으로써 도달하기 어려운 엣지 케이스에 대한 개발에 집중하는 데 도움 -
UI 변형을 'story'로 캡처
세분화된 UI 구성 요소 변형에 대한 스토리를 작성한 다음 개발, 테스트 및 문서화에 해당 스토리를 사용 -
모든 'story'를 추적
UI 구성 요소와 해당 스토리의 대화형 디렉터리로 모든 단계를 건너뛰고 특정 상태의 UI 구성 요소 작업으로 바로 이동 가능
Storybook's Benefit
📝 내구성이 더 뛰어난 UI 개발
✅ 플레이크 없이 UI 테스트
📚 팀이 재사용할 수 있는 문서 UI
📤 UI가 실제로 어떻게 작동하는지 공유
🚦 UI 워크플로우 자동화
더 자세한 내용은 공식홈페이지에서 👉 "why storybook"
Let's Storybook!
install : npx storybook@latest init
run : npm run storybook
더 자세한 내용은 공식홈페이지에서 👉 "how to install storybook"
Storybook Usage
가장 먼저 해야할 일은 디자인 토큰을 만들어 컴포넌트화하는 것이었습니다.
그 후 다양한 스타일 관련 라이브러리를 사용해 제작한 디자인 토큰을 활용해 컴포넌트를 제작해 보는 것이 이번 주 챌린지의 과제였습니다.
각 라이브러리들의 차이를 명확히 알기 위해선 같은 디자인의 페이지를 다른 라이브러리를 활용해 만드는 것이 효과적일 것이라 판단해 먼저 figma에서 페이지 하나를 제작했습니다.
아래는 다음 주에 진행할 유효성 검사에 활용할 수 있을 것 같아서 회원가입 페이지로 간단하게 만들어 본 페이지 디자인입니다.
아래는 button, select 태그들의 hover와 focus 됐을 때의 효과를 보여주기 위한 페이지입니다.
아래는 페이지에서 사용될 전역 컴포넌트들과 디자인 토큰입니다.
| styled-components
먼저 저와 Kimi 님에게 익숙한 React와 styled-components 라이브러리로 페이지를 만들어 봤습니다. 미디어 쿼리는 적용되어 있지 않고 1920px을 기준으로 만들었습니다.
src/pages 폴더 하위에 main.js, signUp.js(우), signIn.js(좌) 구조로 작성되어 있습니다.
디자인 토큰들은 styles/theme.style.js 파일 안에 작성,
공용 컴포넌트들은 src/components 폴더 안에 작성했습니다.
| storybook
storybook에서는 디자인 토큰을 src 상위 폴더인 .storybook/preview.js 안에 적어 주어야 합니다.
좌 : styled-components의 src/styles/theme.style.js
우 : storybook의 .storybook/preview.js
styled-components에서는 공용 컴포넌트 별로 파일이 하나씩만 존재하는데 반면 storybook에는 3개가 존재합니다.
아래는 styled-components의 공용 컴포넌트 button.js 파일입니다.
styled-components로 제작한 공용 컴포넌트는 button.js 안에는 아래 내용들이 전부 합쳐져 1개의 파일로 작성이 가능합니다.
1. 공용화된 button의 js 부분 (return)
2. props의 값에 따라 변동될 디자인의 값
3. 각 button들의 합집합에 해당하는 defaultButton의 속성들을 묶어 놓은 부분
storybook의 경우는 위 기능들이 각각 별도의 파일로 존재합니다.
1. 공용화된 button의 js 부분 (return) 👉 0000.stories.jsx
2. props의 값에 따라 변동될 디자인의 값 👉 0000.stories.css
3. 각 button들의 합집합에 해당하는 defaultButton의 속성들을 묶어 놓은 부분 👉 0000.stories.js
컴포넌트화가 완료되면 아래와 같은 화면을 볼 수 있습니다.
storybook은 figma의 plugin을 설치할 경우 component를 쉽게 storybook에 등록할 수 있다고 합니다.
figma에서도 storybook 접근이 가능하기 때문에 디자이너와 프론트엔드 개발자의 협업이 다른 라이브러리들에 비해 용이합니다.
단, 규모가 작은 프로젝트의 경우 파일도 타 라이브러리들 가운데 가장 세분화되어 있고
사용법이 독보적인 경향이 있기 때문에 개발자가 귀찮을 수 있습니다.
| tailwind
좌 : tailwind의 tailwind.config.js
우 : storybook의 .storybook/preview.js
좌 : tailwind의 tailwind.config.js
우 : styled-components의 src/components/button.js
좌 : tailwind의 signIn 페이지
우 : styled-components의 signIn 페이지
tailwind의 경우 css를 inline 형태로 넣어주게 됩니다.
태그의 이름을 고민하지 않아도 된다는 장점이 있지만 css와 js가 return 문 안에 함께 섞여 있기 때문에
특정 기능을 파악하고자 할 때에는 오히려 가독성이 떨어지는 것 같다고 생각합니다.
아래는 tailwind로 제작한 같은 디자인의 회원가입 페이지입니다.
| emotion
emotion에서 공용화된 컴포넌트는 styled-components와 가장 비슷합니다.
좌 : emotion의 signIn 페이지
우 : styled-components의 signIn 페이지
styled-components는 개발자가 정의한 이름의 태그를 적용해주면 해당 스타일이 적용되는 반면
emotion은 스타일을 적용해줘야 하는 태그 안에 인라인의 형태로 넣어줘야 한다는 차이가 있습니다.
아래는 emotion으로 제작한 같은 디자인의 회원가입 페이지입니다.
총 세 개의 스타일 관련 라이브러리를 활용해 같은 페이지를 제작해본 결과, 각 라이브러리들의 특징을 더욱 확실히 느낄 수 있었습니다.
시각화를 위해 기준을 만들어 표로 작성해봤습니다.
기준의 정의
♻️ 재사용성: 컴포넌트화하기 용이한지, 다양한 상황이나 환경에서도 호환성이 좋은가(커스텀이 용이한가)
🛠️ 생산성: 얼마나 많은 기능을 지원해주는가
🔏 학습성: 적용하는데 걸리는 시간이 얼마나 빠른가
📑 접근성: 공식문서가 정리가 잘 되어있는지
스타일 라이브러리 특성표
| 라이브러리명 | 재사용성 | 생산성 | 학습성 | 접근성 | 한 줄 특징 | 총 등수 |
|---|---|---|---|---|---|---|
| styled-components | 1 | 2 | 1 | 3 | 너무 익숙해서 기준이 됨 (객관성 결여) | 1 |
| storybook | 1 | 2 | 4 | 2 | 디자이너와 협업 용이 | 3 |
| tailwind-css | 4 | 1 | 2 | 1 | 공식문서 정리 끝판왕 (mdn보다 친절) | 2 |
| emotion | 1 | 4 | 2 | 4 | styled-components와 도긴개긴 (개인 취향) | 4 |
My Sample
아래는 story book을 활용한 ui inventory 관리, CDD 개념 확립을 위해 진행한 두 번째 비기너 챌린지의 결과물입니다.
챌린지 진행 기간 : 20231213 ~ 20231221
#2. StoryBook
20231213 ~ 20231221: 과제 진행
20231222 ~ 20231223: CDD 관련 자료 검색 및 블로그 작성
20231224: code review & develop
20231225 ~ 20231227: storybook 관련 블로그 작성
저와 Kimi 님이 제작한
- 코드를 더 자세히 보시려면 👉 "go to gitHub"
- 디자인을 더 자세히 보시려면 👉 "go to Figma"
