인포크 디자인 시스템 (IDS)

목표

디자인 시스템의 구축을 통해 일관된 서비스 정체성과 커뮤니케이션 비용의 감축을 목표로 합니다.

상세

1. 컴포넌트화 및 가이드라인 구축

산재해있던 디자인 및 코드의 컴포넌트화를 위해 디자이너, 동료 개발자와 협의를 통해 컴포넌트의 네이밍, 용도 등을 정의하고 개발했습니다.

컴포넌트의 구조는 아토믹 디자인 패턴을 차용하여 Foundation, Element, Component, Pattern으로 계층을 나누었습니다.

컴포넌트들이 일관된 디자인 가이드라인을 따르도록 관리하고 유지했습니다. 만약 IDS의 업데이트가 필요한 경우 디자이너, 동료 개발자와 빠른 의사 결정을 통해 업데이트를 진행했습니다.

2. 스토리북을 활용한 배포

개발된 디자인 시스템을 스토리북을 활용해 관리했습니다. 이를 통해, 컴포넌트를 시각화하고 상호작용할 수 있는 환경을 구성했으며, 각 컴포넌트에 대한 사용법 및 예제를 문서화하고 이를 지속해서 관리했습니다.

결론

  • 일관된 디자인 가이드라인의 구축에 기여했습니다.
  • 전사적 커뮤니케이션 비용을 줄이고 향후 프로젝트의 개발 난이도 및 시간 단축에 기여했습니다.
  • 새로운 팀원의 온보딩 과정에 디자인 시스템을 활용함으로써 서비스에 대한 적응 기간 단축 및 난이도 감소에 기여했습니다.
  • 스토리북에 배포된 디자인 시스템을 활용해 개발자와 디자이너 간의 커뮤니케이션 비용을 감축했습니다.