Luko의 사내 디자인 시스템 기반 컴포넌트 라이브러리 Lukomponent 리뉴얼 프로젝트에 참여하여, 기존 Vue 2 기반 라이브러리를 Vue 3와 Storybook 중심으로 재설계 및 구축했습니다.
프로젝트 목표
유지보수성과 확장성이 높은 Vue 3 기반의 통합 UI 컴포넌트 시스템을 구축하는 것이 프로젝트의 목표였습니다.
주요 작업 내용
Vue 3 마이그레이션
기존 Vue 2 컴포넌트들을 분석하고, Composition API에 맞춰 구조를 개선했습니다. 이전에 tree-shaking이 되지 않던 문제를 해결하여 번들 크기를 크게 줄일 수 있었습니다.
컴포넌트 개발의 복잡성
작은 컴포넌트를 만드는 것이 보기에 쉬워 보여도, "제대로" 만들기가 얼마나 어려운지에 대해 깊이 이해하게 된 프로젝트입니다.
예를 들어, 버튼 하나만 하더라도 다음 사항들을 모두 고려해야 합니다:
- 스타일링:
focus,active,disabled와 같은 상태별 스타일 - 접근성:
aria-label과 같은 accessibility 속성 - 키보드 상호작용: 탭 키를 눌렀을 때, 엔터 키를 눌렀을 때의 행위가 어떻게 이루어져야 하는지
- 사용자 경험: 다양한 상황에서의 일관된 동작 보장
이러한 경험을 통해 컴포넌트 라이브러리 개발의 복잡성과 중요성을 배울 수 있었습니다.