개발 WorkFlow

아래 이미지의 좌측하단 Storybook Repo 작업

목표

• Page기반 → UI 컴포넌트 기반으로 전환 과정에서 개발 & 디자인 Work flow 개선
  • 개발 : 코드 관리(Bit.dev), UI 컴포넌트 명세서(Storybook)
  • 디자인 : 실제 웹 상에서의 시각 테스트(Storybook)

도입 장점

: 디자인 / 개발 파트의 효용성을 계속 생각하며 고도화해야 함.

• 웹에 최적화된 비쥬얼 테스트(모바일, 태블릿, 데스크탑 화면 조정 가능)
  • 함께 쓰면 좋은 크롬 : chrome toogle device topbar, stylebot, colorpick eyeDroper
• 디자인적인 효용성
  • 실제 웹에선 어떻게 나오는지를 확인할 수 있음. → 하지만 실제 구현 페이지에서는 다르게 보일 수 있음. 결국은 실제 페이지에서 확인해야함.
  • 해당 UI를 마음대로 값을 조정하여 변수들을 체크해볼 수 있음.
• 개발적인 효용성
  • UI 코드 명세서(어떻게 생겼고 어떻게 사용해야하는지)
  • 단위 테스트에 적합(인터렉티브한 UI에 한해서만 해야함.)

위험성

• 디자인
  • 제플린같은 디자인 툴을 사용하는 편이 더 나을 때가 많음. 실제 웹에서 어떻게 구현되는가를 컴포넌트별로 체크할때만 효용성이 있음.
• 개발
  • 오버 엔지니어링 : 단위테스트가 필요없을 정도로 마이너한 일들은 명세서의 역할만 할 정도로 개발.
  • 개발기한 → 지금은 UI 컴포넌트 개발과 프론트앤드 기능개발을 병렬적으로 해야함.