개발 WorkFlow
아래 이미지의 좌측하단 Storybook Repo 작업
목표
- Page기반 → UI 컴포넌트 기반으로 전환 과정에서 개발 & 디자인 Work flow 개선
- 개발 : 코드 관리(Bit.dev), UI 컴포넌트 명세서(Storybook)
- 디자인 : 실제 웹 상에서의 시각 테스트(Storybook)
도입 장점
: 디자인 / 개발 파트의 효용성을 계속 생각하며 고도화해야 함.
- 웹에 최적화된 비쥬얼 테스트(모바일, 태블릿, 데스크탑 화면 조정 가능)
- 함께 쓰면 좋은 크롬 : chrome toogle device topbar, stylebot, colorpick eyeDroper
- 디자인적인 효용성
- 실제 웹에선 어떻게 나오는지를 확인할 수 있음. → 하지만 실제 구현 페이지에서는 다르게 보일 수 있음. 결국은 실제 페이지에서 확인해야함.
- 해당 UI를 마음대로 값을 조정하여 변수들을 체크해볼 수 있음.
- 개발적인 효용성
- UI 코드 명세서(어떻게 생겼고 어떻게 사용해야하는지)
- 단위 테스트에 적합(인터렉티브한 UI에 한해서만 해야함.)
위험성
- 디자인
- 제플린같은 디자인 툴을 사용하는 편이 더 나을 때가 많음. 실제 웹에서 어떻게 구현되는가를 컴포넌트별로 체크할때만 효용성이 있음.
- 개발
- 오버 엔지니어링 : 단위테스트가 필요없을 정도로 마이너한 일들은 명세서의 역할만 할 정도로 개발.
- 개발기한 → 지금은 UI 컴포넌트 개발과 프론트앤드 기능개발을 병렬적으로 해야함.