피드로 돌아가기
강남언니 공식 블로그Frontend
원문 읽기
컴포넌트 디자인으로 재사용성 극대화하기
힐링페이퍼가 컴포넌트 기반 디자인 시스템 도입으로 백오피스 페이지 작업 시간 단축 및 디자이너 협업 효율성 향상
AI 요약
Context
강남언니 앱 백오피스 시스템은 무수한 기능으로 인해 디자인 및 개발 단계에서 반복 작업이 많았고, 여러 디자이너가 각각 작업할 때 일관성 유지가 어려웠습니다.
Technical Solution
- 타이포그래피 시스템 구축: 폰트 사이즈, 두께, 컬러별 스타일을 정의하고 Runner를 활용해 빠른 적용
- 컬러 시스템 구축: 기본 컬러(메인/서브/그레이스케일)와 상태별 스타일(active/disabled/focused/error/dim) 생성
- 앨리먼트 설계: 가변 텍스트에 반응하도록 고정 Padding 값을 설정해 자동 길이 조정 기능 구현
- 컴포넌트 조합: 버튼, 툴팁, 라벨, 뱃지 등 기본 앨리먼트를 조합해 복합 컴포넌트 생성
- Abstract 라이브러리화: 프로젝트에 디자인 파일을 링크시켜 중앙화된 컴포넌트 관리
- Zeplin Styleguide를 통한 개발자 공유: 전역 스타일로 여러 프로젝트 및 플랫폼(WEB/iOS/AOS) 동시 연동
Key Takeaway
모듈화된 디자인 요소를 계층적으로 구축(앨리먼트 → 컴포넌트 → 페이지)하면, 오버라이드만으로 새로운 페이지를 구성 가능하며 여러 디자이너 간 일관된 결과물을 보장합니다. 컴포넌트 검증은 요소가 가장 많은 단일 페이지로 먼저 시안을 작성해 실제 사용 패턴을 파악한 후 역반영하는 방식이 효과적입니다.
실천 포인트
복수의 디자이너가 참여하는 백오피스나 관리 도구 프로젝트에서 타이포그래피 및 컬러 시스템을 먼저 정의한 후, 가변 영역(텍스트, 아이콘 조합)을 고려한 기본 앨리먼트를 설계하고 이를 Zeplin 또는 Abstract 같은 도구로 중앙화하면, 신규 페이지 작업 시 Import와 오버라이드만으로 99% 이상 완성할 수 있어 디자인 소요 시간을 대폭 단축할 수 있습니다.