[발전 방안 제안(Improvement Plan)]: 스토리북(Storybook) 도입

[sap03110]

아이디어명 Idea Name

UI 컴포넌트 관리 및 테스트를 위한 스토리북 도입

아이디어 요약 Idea Summary

UI 컴포넌트를 독립적으로 개발하고 테스트하기 위한 스토리북 도입을 제안합니다.
최근 카카오, 토스 등 많은 IT 회사에서도 스토리북을 도입하여 디자인 시스템을 관리하고 있습니다.
egovframe-template-simple-react 템플릿 내에도 스토리북을 도입한다면, 기본 제공되는 컴포넌트에 대한 이해를 높일 수 있고 일관성 있는 스타일을 유지하면서 재사용성 높은 프론트엔드 어플리케이션을 만들 수 있습니다.

필요한 작업 내용은 다음과 같습니다.

1. 스토리북 설정 추가
2. 기본 제공되는 컴포넌트에 대한 예시 스토리 작성
3. 기본 제공되는 컴포넌트에 대한 예시 테스트 작성

제안배경 Suggestion Background

현대 웹 애플리케이션 개발에서 컴포넌트 기반 아키텍처는 점점 더 중요해지고 있습니다.
이러한 환경에서 스토리북은 React 기반 프로젝트에서 UI 컴포넌트를 효과적으로 관리할 수 있는 강력한 도구입니다.
스토리북의 필요성을 크게 4가지로 정리했습니다.

1. 독립적인 개발 환경

스토리북은 컴포넌트를 독립적으로 개발할 수 있는 환경을 제공합니다.
다른 프로젝트나 코드에 영향을 받지 않고 자유롭게 작업이 가능합니다.
API가 없는 상황에서도 목데이터를 이용하여 개발할 수 있기 때문에 개발 딜레이를 줄일 수 있습니다.

2. 강력한 문서화 제공

스토리북은 자동으로 컴포넌트를 문서화하는 기능을 제공합니다.
컴포넌트의 Props에 대한 타입, 설명을 읽어서 자동으로 테이블화하기 때문에, 주석을 참고하지 않고도 스토리북에서 해당 컴포넌트에 대한 정보 파악이 가능합니다.
스토리북 mdx 문법을 사용하면 개발자가 직접 필요한 부분에 대한 문서를 작성하는 것도 가능합니다.

예시)

Props 문서화	커스텀 문서화

3. UI 확인 용이

페이지가 많아질 수록 관리해야 하는 컴포넌트의 양도 늘어납니다.
파일명이나 주석이 부족하다면 어떤 컴포넌트가 어떤 기능을 하는지 파악하기 어려워집니다.
스토리북에서는 특정 페이지에 접근하지 않고도 즉시 UI 확인이 가능하기 때문에, 해당 컴포넌트가 어떤 것인지 바로 확인할 수 있습니다.

4. QA 및 테스트 효율성 증대

스토리북에서는 props 데이터를 변경하여 컴포넌트를 다양한 상태로 테스트할 수 있기 때문에, 개발 단계에서 즉각적으로 버그를 발견하고 수정이 가능합니다.

또한, 스토리북 테스팅 라이브러리를 사용하여 테스트 작성도 가능합니다.

기대효과 Expectations

스토리북 도입으로 인한 기대효과는 다음과 같습니다.

인증 정보가 필요한 헤더나 어드민 컴포넌트는 직접 로컬 API 서버를 띄운 후, 로그인을 해야만 컴포넌트 확인이 가능합니다.
스토리북 목데이터를 사용하면 로컬 API 서버를 띄우지 않아도 컴포넌트를 확인할 수 있어 간단하게 수정이 가능합니다.
egovframe-template-simple-react 템플릿을 사용할 프론트엔드 개발자들�의 개발 편의성을 높일 수 있습니다.

템플릿을 처음 사용하는 분들도 스토리북 문서를 통해 빠르게 컴포넌트 및 히스토리를 파악할 수 있습니다.
egovframe-template-simple-react도 components 폴더에서만 23개의 공통 컴포넌트가 관리되고 있습니다.
실제로 템플릿을 clone하여 살펴보니, 각 컴포넌트가 어디에서 어떻게 사용되고 있는지 파악하기가 어려웠습니다.
스토리북이 있다면 이러한 어려움을 겪지 않아도 됩니다.

현재 템플릿 내 여러 페이지에서 공통으로 사용되고는 있지만 컴포넌트로 분리되어 있지 않은 화면 요소들이 다수 존재합니다.
예시)

좌측 플로팅 메뉴	상단 페이지 네비게이션	메인 기능소개

여러 기여자들이 작업하다 보니, 중복 컴포넌트에 대한 관리가 어렵기 때문입니다.
스토리북으로 컴포넌트를 관리한다면 중복 컴포넌트를 줄이고, 안정적인 관리 및 유지보수가 가능합니다.

자유기술 Free Writing

앞선 내용은 템플릿 사용자 중심으로 스토리북 도입의 필요성에 대해 말씀 드렸습니다.
앞으로 오픈소스 기여자들이 더욱 많아질 텐데, 지속적인 유지보수 및 퀄리티 있는 코드 관리를 위해서라도 스토리북 도입은 필수적입니다.
제안 내용을 바탕으로 전자정부프레임워크가 더욱 좋은 방향으로 발전해 나가면 좋겠습니다.

참고문헌 Reference

https://storybook.js.org/

[eGovFrameSupport]

안녕하세요
전자정부 표준프레임워크 센터입니다.

'24년 7월 29일부터 9월 30일까지 전자정부 서비스 개발 표준 기반인 "전자정부 표준프레임워크" 개선에 민간 SW개발자의 아이디어와 의견을 반영하기 위해 "2024년 전자정부 표준프레임워크 컨트리뷰션"을 개최 하였습니다.

표준프레임워크 깃허브(github.com/egovframework)에 보내주신 귀하의 의견에 감사드리며, 전자정부 표준프레임워크 운영·개선 과정에서 유용하게 활용토록 하겠습니다.
본 설문에 응답 주시면 표준프레임워크에서 마련한 소정의 기념품을 발송 드릴 예정이오니, 문항에 빠짐없이 응답 해 주시기 바랍니다.

앞으로도 전자정부 표준프레임워크에 지속적인 관심 바라오며, 아래 URL 접속, 설문지로 이동하여 항목에 응답 부탁드립니다.
https://forms.gle/6qRXGFZn5WTaxBCK8

※ 컨트리뷰션 종료 후, 시상관련하여 연락 갈 예정이오니, 꼭 통화 가능한 본인번호를 기재해 주시기 바랍니다.
※ 귀하께서 답변해 주시는 내용은 컨트리뷰션 참가 확인 및 기념품 발송 목적으로만 활용되며, 개인정보는 기념품 발송 후 즉시 영구 삭제처리 됩니다.

감사합니다.