Exem UI  —  디자인 라이브러리로 사내 제품 통합하기

Exem UI는 사내 제품들의 디자인 언어를 하나의 공통 시스템으로 정리하고, 디자인과 개발 조직이 함께 관리할 수 있도록 만든 통합 디자인 라이브러리입니다. 지속 가능한 시스템을 만들기 위해 디자인 요소를 정교하게 정리하고, 플랫폼 디자이너로서 여러 조직 간의 소통을 이끌며 프로젝트를 주도했습니다.

사내에는 여러 제품이 존재했는데, 각기 다른 시점에 각 팀의 방식대로 설계되면서 화면 구조, 디자인 스타일, 컴포넌트 사용 기준 등이 제품마다 다르게 형성되었습니다. 그 결과 제품의 사용자 경험이 마치 서로 다른 회사의 서비스처럼 일관되지 않았고, 제품이 확장될수록 화면 복잡도가 높아지면서 그에 따른 유지보수 비용이 점점 커지고 있었습니다.

Exem UI는 디자인 파일 안에서만 끝나는 시스템이 아니라 실제 제품에 적용되는 라이브러리로서 기획됐습니다. 디자인과 개발 결과물이 서로 일치하는 구조를 만들기 위해 각 제품의 개발팀과 함께 구현 방식과 개발 환경을 조율했고, React와 Tailwind 등 실제로 사용될 기술 스택을 고려하여 디자인 시스템을 구축했습니다.

디자인 시스템을 구축하는 초기부터 컴포넌트 Props, 변수명, 상태 구조 등을 개발팀과 함께 논의해 실제 개발 구조와 최대한 일치하도록 설계했습니다. 이를 통해 디자인과 개발 간 해석 차이가 발생할 수 있는 여지를 줄이고, 컴포넌트 설계부터 구현까지 같은 기준으로 소통할 수 있는 기반을 마련했습니다.

개발 환경뿐만 아니라 Figma 상에서도 디자이너가 컴포넌트를 효율적으로 사용하고 관리할 수 있도록 전체 구조를 모듈화했습니다. Nested Instance, Instance Swap, Slot 등 최신 Figma 기능을 활용해 하나의 컴포넌트가 다양한 맥락에서 사용될 수 있도록 설계했고, 이를 통해 더 적은 비용으로 일관된 화면을 빠르게 구성할 수 있는 환경을 만들었습니다.

Exem UI의 컬러 시스템은 단순한 팔레트 정리를 넘어 의미 기반의 토큰 체계로 설계했고, Figma Variables를 활용해 라이트 · 다크 테마 모두에 대응할 수 있도록 구조를 정리했습니다. 특히 Opacity 기반의 Elevation 토큰을 만들어, 다양한 배경에서도 일관된 레이어 위계를 표현할 수 있는 시스템을 구현했습니다.

디자인 시스템은 특정 디자이너의 감각에 의존하면 오래 유지되기 어렵다고 판단하여, 누구나 같은 기준으로 작업하고 기여할 수 있는 디자인 가이드를 함께 정리했습니다. 이를 통해 신규 디자이너나 다른 제품 담당자도 명확하게 기준을 이해하고, 시스템 안에서 일관되게 작업할 수 있는 환경을 구축했습니다.

시스템의 확장과 활용성을 높이기 위해 Exem UI라는 별도의 사이트를 배포하고, 디자인 구성 요소와 활용을 중심으로 전반적인 내용을 문서화했습니다. 이 사이트는 단순한 소개 페이지가 아니라 디자이너와 개발자가 동일한 기준을 참고하고, 변경 이력을 추적할 수 있는 라이브러리 운영의 기반이 되었습니다.

사이트에는 컴포넌트 속성과 상태를 직접 조작해볼 수 있는 Playground와 각 요소들의 활용 기준을 정리한 Usage 가이드라인을 함께 구성했습니다. 이를 통해 디자인 요소들의 단순 스펙뿐만 아니라 동작 방식, 실제 제품에서의 사용 맥락을 쉽게 이해하고 언제든지 확인할 수 있도록 했습니다.

라이브러리가 특정 개인이나 팀에 의존하지 않고 장기적으로 유지될 수 있도록, 책임과 권한, 커뮤니케이션, 작업 프로세스 등의 운영 정책을 모든 구성원들과 함께 정리했습니다. 그 결과 초기 구축 이후에도 각 제품과 작업자의 요구사항를 반영하며, 지속적으로 개선되고 확장될 수 있는 시스템으로 자리잡을 수 있었습니다.

Exem UI를 사람뿐만 아니라 AI도 이해하고 활용할 수 있는 구조로 확장하기 위해, CLI 패키지 설치 환경을 구축하고 앞서 정리한 디자인 가이드라인을 연동했습니다. 내부 구성원들은 LLM 서비스를 통해 쉽게 라이브러리를 설치하고, 제품뿐만 아니라 기획서 작성, 내부 툴 제작 등 다양한 방식으로 일관된 디자인 언어를 활용할 수 있게 되었습니다.

실제로 개발 라이브러리와 가이드라인을 Claude Code에 적용해, 사내 인터널 프로덕트를 빠르게 제작하는 프로젝트를 진행했습니다. 3주라는 짧은 기간 안에 기획 · 디자인 · 개발이 성공적으로 진행되었고, 이 프로젝트는 Exem UI가 단순한 정리 문서가 아니라 제품을 빠르고 일관되게 만드는데 실질적으로 활용될 수 있음을 보여주는 좋은 사례가 되었습니다.

Exem UI는 디자인 결과물 이상의 전사적인 제품 방향성을 구체화 하고 업무 프로세스를 재정의한 프로젝트입니다. 그 과정에서 디자이너와 개발자, 그리고 각 제품 조직 간의 이해관계를 조율하고, 새롭게 정한 기준과 방향성을 구성원들에게 설득하며 시스템을 정착시켰습니다. 이를 통해 플랫폼 디자이너로서 개별 제품의 문제를 넘어, 조직 전체의 비효율을 구조적으로 해결하는 역할까지 확장할 수 있었습니다.