(주) Witi

KNOWHOW 모바일 앱

창업가 대상 지원 사업 공고 큐레이팅, 커뮤니티 플랫폼 서비스의 모바일 앱 신규 개발 프로젝트입니다.

Nuxt 3 기반의 웹서비스를 Next.js 14로 컨버팅하는 작업이 병행되었습니다.

Next.js 기반 컨버팅과 함께 서비스 디자인 리뉴얼이 진행되면서, 개발 생산성과 UX 일관성 증대를 위한 디자인 시스템을 구축하였습니다.

기존 개발 환경에서는 시스템이 부재해 프론트엔드에서 임의로 공통 컴포넌트를 만들었으나, 디자인의 확장을 유연하게 대응하지 못해 유사한 컴포넌트들이 다수 제작되었습니다. UX 일관성, 재활용성과 유지보수성이 떨어지고 레거시가 지속적으로 발생하는 상황이었습니다.

이를 해결하기 위해 리뉴얼을 담당한 외부 디자인 팀과 협업하여 모바일 앱을 비롯해 사내 전체 서비스 도입을 고려한 디자인 시스템을 구축하였고, UI 확장에 유연하게 대처하기 위한 컴포넌트 아키텍처 설계를 병행했습니다.

1 Atomic Design Pattern을 따르는 디자인 시스템 설계

Atom 단계의 컴포넌트 예시

Organism 단계의 컴포넌트 예시