Highlight Story
디자인 시스템의 4단 진화
신설 조직에 디자인 시스템을 0→1로 만든 뒤, 1년 가까이 운영하며 어떻게 진화시켜왔는지를 직접 겪은 흐름으로 정리해봤습니다.
이 흐름에서 제가 배운 것
새 라이브러리를 신규 프로젝트에 바로 적용하지 않고, 운영 중인 환경에서 먼저 검증해본 뒤 본격 적용했습니다. 디자인 시스템은 만들고 끝나는 결과물이 아니라 운영 → 학습 → 진화의 사이클을 거치는 살아있는 시스템이라는 걸, 1년 동안 직접 마주하며 알게 됐습니다.
2025.03 - 04
1. 디자인 시스템 구축
신설 조직의 범용 시스템 0→1
의사결정
Bootstrap 기반 + CSS Variables 토큰 + Monorepo
근거
백오피스 도메인 비중이 높은 사내 환경에 맞춰 컴포넌트 풍부도·디자인 커스터마이징 자유도·반응형 그리드 성숙도가 균형 잡힌 Bootstrap을 채택했습니다. 사내 정체성은 CSS Variables로 추상화해 Bootstrap 위에 일관되게 입혔습니다.
다음 단계로
이 시스템이 운영 환경에서 어떻게 동작할지 어디서 검증해볼까 고민하던 차에, 마침 시작 단계였던 사내 백오피스 신규 구축이 첫 적용 환경으로 자연스러웠습니다.
2025.05 - 06
2. 사내 백오피스 신규 구축
디자인 시스템의 첫 검증 환경
의사결정
Monorepo 디자인 시스템을 운영 환경에 처음 적용
근거
공지·약관·FAQ·회원·파일 업로드 등 운영 도메인의 다양한 화면 패턴(폼·테이블·검색·첨부)에 토큰·컴포넌트 구조가 어떻게 동작하는지 직접 확인해봤습니다.
다음 단계로
운영한 지 약 1년이 됐을 때 사내 차기 신규 프로젝트(BI 서비스)에 Antd를 도입하기로 했습니다. 신규에 바로 던지지 않고 운영 중인 백오피스에서 먼저 검증해보기로 결정했습니다.
2026.02 - 03
3. 사내 백오피스 리팩토링
BI 프로젝트의 사전 검증 파일럿
의사결정
자체 Monorepo → Antd 디자인 시스템 점진적 교체
근거
신규 BI 프로젝트에 Antd를 바로 적용하면 라이브러리 부적합·디자인 정체성 적용 한계 같은 리스크가 운영 단계에서 발견될 수 있다고 봤습니다. 그래서 운영 중인 백오피스에서 먼저 마이그레이션을 진행해 Antd 기반 워크플로우·디자인 적용 가능성·운영 리스크를 사전에 확인했습니다.
다음 단계로
검증 단계에서 정의한 토큰 매핑·컴포넌트 사용 패턴이 그대로 신규 BI 프로젝트의 초기 개발 속도를 결정했습니다.
2026.04 - 2026.08
4. BI 서비스 신규 구축
검증된 패턴의 본격 적용
의사결정
Antd 디자인 시스템 본격 적용 + 차트를 디자인 시스템에 편입
근거
직전 사내 백오피스 리팩토링에서 검증해둔 토큰 매핑·컴포넌트 사용 패턴을 그대로 가져왔습니다. 차트도 시각적 일관성을 위해 같은 계열(Antd Charts/AntV G2)을 골랐지만, 라이브러리를 화면에서 직접 쓰게 두지 않고 shared 래퍼 6종만 공개하는 층을 뒀습니다. 팔레트·높이·다크모드가 토큰 레이어에 모이고, 라이브러리 한계로 래퍼를 자체 구현으로 갈아끼울 때도 화면 코드는 그대로였습니다.
회고: 다시 한다면
- ・ 1단계 디자인 시스템 구축 시점에 Antd/MUI 같은 큰 시스템과의 비교 검토를 더 명시적으로 문서화해뒀다면, 이후 3단계 마이그레이션 결정의 근거가 더 단단했을 것 같습니다.
- ・ 2단계 백오피스 첫 적용에서 더 다양한 화면 패턴(데이터 시각화·복합 폼)까지 검증했다면 3단계 Antd 결정 시점을 더 앞당길 수 있었을 것 같아요.
- ・ 디자인 시스템의 ‘운영 → 학습 → 진화’ 사이클을 더 짧게 가져가기 위해, 다음 시스템부터는 분기별 회고를 명시적인 단계로 두려고 합니다.