스토리북(storybook) 적용하기

스토리북에 대해 이야기하기에 앞서, 디자인 시스템(Design System)에 대해 간략히 살펴보고자 한다.

 

UI 가이드라인이란?

• UI 표준화
• 화면 간 일관성 확보
• 다른 디자이너 및 개발자가 따르는 정해진 기준

 

 

UX 가이드라인

• 서비스, 브랜드 측면
• 사용자에게 일관적이고 차별화된 경험 제공
• 사용자의 행동과 니즈를 반영
• 차별화된 가치를 바탕으로 전략 정의

 

 

디자인시스템

정의 상으로는 UI 가이드라인과 UX 가이드라인을 포괄하는 종합세트이지만,

실제 사례들에서는 포괄하는 범위가 제각기 다르다.
패턴 라이브러리 역할만 하기도 하고, 브랜드 원칙까지 포함하여 하나의 철학을 구성하기도 한다.

 

 

디자인시스템, 반드시 있어야 하는가?

꼭 그렇지만은 않다.

만약 소규모의 팀에서 단일 앱으로 작업하는 경우, 디자인 시스템을 사용하도록 인프라를 설정하는 대신

UI 컴포넌트로 이루어진 디렉터리를 사용하는 것이 좋을 수 있다.

작은 프로젝트의 경우 유지보수 비용, 환경 통합, 도구에 드는 비용이
생산성 향상에 드는 비용보다 훨씬 커지기 때문이다.

 

디자인 시스템은 여러 프로젝트가 같은 UI 컴포넌트를 공유할수록 이점이 생긴다.

다른 앱이나 여러 팀 간에 같은 UI 컴포넌트를 공유하는 경우에 더욱 적합할 것이다.

 

 

그렇다면 디자인 시스템 도입이 필요한 시점은?

• 제품 군 / 기능 확장 시 (일관성이 점차 깨지기 시작하는 시점)

• 새로운 시장 진출 시 (국가 간 다양한 상황에 유연하게 대응하면서도 일관성 있게 보이도록 고려해야 하는 시점 - 읽는 방향, 날짜/언어 표기 등)

• 채널 / 매개체 확장 시(디바이스 특성, 호환성을 우선적으로 고려)

 

 

스토리북과 디자인 시스템의 관계

디자인 시스템이 있는 경우

미리 정의한 디자인 시스템을 편리하게 공유, 유지보수 하도록 도움

 

디자인 시스템이 없는 경우

• 다양한 기능을 통해 컴포넌트를 기획자, 디자이너가 손 쉽게 보고 테스트 할 수 있도록 함
• 어떤 속성 변화에 의존하여 UI가 변경되는지 문서화 가능

 

 

스토리북이란?

한 문장으로 정의가 어려울 정도로 다양한 목적과 방식으로 사용되는 UI 컴포넌트 개발 도구

 

• 프로젝트 개발자(본인) : 고립된 환경에서 UI 컴포넌트를 개발함으로써 복잡한 비즈니스 로직을 구축하지 않아도 테스트 가능

• 사내 다른 개발자 : 컴포넌트를 문서화(documentation)하기 위한 도구로 사용하여 컴포넌트 UI 및 사용법 등을 쉽게 공유

• 디자이너 : 컴포넌트들을 모아 놓고 테스트 및 비교하며 일관성, 편의성, 접근성 등을 확인

• 외부 공개용 : 디자인 시스템(Design System)을 구축하기 위한 기본 플랫폼

▲ 개발자 간 소통을 편리하게 할 수 있다

 

▲ 디자이너가 작업할 때에도 효용을 얻을 수 있다 

 

 

▲ 개발자-디자이너 간의 소통을 편리하게 할 수 있다

 

 

▲ IT 기업들이 기술 블로그를 운영하는 목적과 유사한 방식으로 사용할 수도 있다

 

 

 

스토리북 효율 극대화하기(Addon)

Addon이라는 확장 프로그램을 이용해서 스토리북의 기능 및 화면을 자유롭게 커스터마이징 할 수 있다.

그 중 몇 가지를 골라 소개하겠다.

 

 

1) controls (essential에 포함되어있음)

컴포넌트의 속성들을 직접 조정하며 눈으로 확인할 수 있다.

 

2) storybook/addon-viewport

기기별 사이즈를 커스텀할 수 있다 (스토리북에서 제공하는 기본값은 원래 고정값임)

사이즈 별로 변하는 컴포넌트들을 확인하며 기기별 화면을 개발할 수 있다. 

 

 

3) storybook/addon-docs

앱의 global theme를 적용하여 각각의 테마에서 컴포넌트들이 어떻게 바뀌는지 확인 가능

 

4) storybook/addon-storysource

소스코드로 어떻게 쓸 수 있는지 바로 확인 가능

 

 

디자이너의 스토리북 사용 예시

 

기획자의 스토리북 사용 예시