디자인 시스템 & 스토리북 & 피그마란?

제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자!

 

Bard. 디자인 시스템

디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다.

 

Bard. 스토리북

https://storybook.js.org/

Storybook: Frontend workshop for UI development

스토리북은 디자인 시스템을 구축하고 문서화하는 데 사용되는 오픈 소스 도구입니다. 스토리북을 사용하면 개발자는 다음과 같은 작업을 수행할 수 있습니다.

• UI 컴포넌트를 독립적으로 테스트하고 문서화합니다.
• 다양한 조건에서 UI 컴포넌트를 시각화합니다.
• 디자인 시스템을 다른 개발자와 공유합니다.

 

스토리북은 다음과 같은 장점을 제공합니다.

• 생산성 향상: 스토리북을 사용하면 개발자는 UI 컴포넌트를 더 빠르고 쉽게 테스트하고 문서화할 수 있습니다.
• 품질 향상: 스토리북을 사용하면 개발자는 UI 컴포넌트를 보다 세밀하게 테스트하고 문서화할 수 있습니다.
• 협업 향상: 스토리북을 사용하면 디자인 시스템을 다른 개발자와 보다 쉽게 공유할 수 있습니다.

 

스토리북은 다양한 프레임워크와 기술을 지원합니다. React, Angular, Vue.js, Svelte, HTML, CSS 등에서 사용할 수 있습니다.

 

스토리북을 사용하면 다음과 같은 방식으로 디자인 시스템을 구축할 수 있습니다.

• UI 컴포넌트를 개발합니다.
• 스토리북에 UI 컴포넌트를 추가합니다.
• UI 컴포넌트를 테스트하고 문서화합니다.

 

스토리북은 디자인 시스템을 구축하고 문서화하는 데 유용한 도구입니다. 스토리북을 사용하면 개발자는 다음과 같은 이점을 얻을 수 있습니다.

• 생산성 향상: 스토리북을 사용하면 개발자는 UI 컴포넌트를 더 빠르고 쉽게 테스트하고 문서화할 수 있습니다.
• 품질 향상: 스토리북을 사용하면 개발자는 UI 컴포넌트를 보다 세밀하게 테스트하고 문서화할 수 있습니다.
• 협업 향상: 스토리북을 사용하면 디자인 시스템을 다른 개발자와 보다 쉽게 공유할 수 있습니다.

 

Bard. Figma

https://www.figma.com/

Figma: The Collaborative Interface Design Tool

Figma는 웹 기반의 디자인 및 협업 도구입니다. Figma를 사용하면 웹, 모바일, 데스크톱 애플리케이션의 디자인을 만들고, 다른 디자이너와 협업하고, 디자인을 공유할 수 있습니다.

 

Figma의 주요 기능은 다음과 같습니다.

• 벡터 기반 디자인: Figma는 벡터 기반 디자인을 지원합니다. 따라서 디자인을 확대하거나 축소해도 선명한 이미지를 유지할 수 있습니다.
•  협업: Figma는 실시간 협업을 지원합니다. 따라서 여러 디자이너가 동시에 같은 디자인을 작업할 수 있습니다.
• 디자인 공유: Figma는 디자인을 공유할 수 있는 기능을 제공합니다. 따라서 디자인을 클라이언트나 다른 개발자와 쉽게 공유할 수 있습니다.

 

Figma는 다음과 같은 장점을 제공합니다.

• 생산성 향상: Figma는 벡터 기반 디자인과 실시간 협업 기능을 통해 디자이너의 생산성을 향상시킵니다.
• 협업 향상: Figma는 실시간 협업 기능을 통해 디자이너 간의 협업을 보다 쉽게 만듭니다.
• 공유 용이성: Figma는 디자인 공유 기능을 통해 디자인을 보다 쉽게 공유할 수 있습니다.

 

Figma는 다양한 플랫폼에서 사용할 수 있습니다. 웹 브라우저, macOS, Windows에서 사용할 수 있습니다.

 

Figma는 다음과 같은 분야에서 사용됩니다.

• 웹 디자인: Figma는 웹 애플리케이션의 디자인을 만들기 위해 사용됩니다.
• 모바일 디자인: Figma는 모바일 애플리케이션의 디자인을 만들기 위해 사용됩니다.
• 데스크톱 디자인: Figma는 데스크톱 애플리케이션의 디자인을 만들기 위해 사용됩니다.

 

Figma는 디자인 및 협업 도구를 찾고 있는 디자이너에게 유용한 도구입니다. Figma를 사용하면 디자이너는 생산성을 향상시키고, 협업을 보다 쉽게 만들고, 디자인을 보다 쉽게 공유할 수 있습니다.

 

 

참고하면 좋을만할 사이트

https://velog.io/@velopert/design-system-using-typescript-and-storybook

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