확장되는 서비스, 디자인 시스템은 어떻게 개선해야 할까?

들어가며

안녕하세요, 노머스 UX팀에서  UX/UI를 담당하고있는 조예슬입니다.

프롬 초창기부터 지금까지 서비스 전반의 UX/UI를 맡아오며, 하나의 디자인 시스템으로 앱과 웹은 물론 파트너센터까지 확장해가는 과정을 경험했습니다. 그 안에서 단순히 컴포넌트를 유려하게 만드는 것을 넘어, 실제 서비스에 효과적으로 적용되는 디자인 시스템이 얼마나 중요한지도 깨달았습니다.

이번 아티클에서는 디자인 시스템의 컴포넌트를 제작할 때 어떤 부분을 고려하고, 실제로 어떻게 만들어가고 있는지에 대해 이야기해보려 합니다.

실무에서 겪은 시행착오와 작은 노하우들을 솔직하게 담았으니, 비슷한 고민을 하고 있는 분들께 조금이나마 도움이 되길 바랍니다.

모바일 앱만 보고 만들었습니다.

프롬의 디자인 시스템 v1은 모바일 앱 중심으로 설계됐습니다. 처음엔 앱에 집중했기 때문에, 모바일 환경에 맞는 컴포넌트와 레이아웃만 정리해도 충분했죠.

하지만 조직이 성장하면서 상황이 바뀌었습니다. 웹 기반의 신규 서비스와 외부 파트너가 사용하는 파트너센터 운영툴 화면까지 확장되기 시작했어요. 서비스 오픈이 긴박하게 진행되는 상황이 많았기 때문에, 고민할 여유보다는 일단 있는 시스템을 빠르게 적용하는 쪽을 선택하게 됐습니다.

“모바일 기준으로 만든 시스템을 웹에도 그대로 써도 될까?”

디자인 시스템 하나로 모든 서비스를 커버할 수 있을지, 직접 부딪히며 실험이 시작됐습니다!

공통 시스템 하나로 쓸 수 있었던 이유

다행히도, 모바일 전용으로 시작한 시스템이었지만 의외로 잘 통했습니다. 이유는 다음과 같습니다.

• 가장 기본적인 컴포넌트와 색상·상태값·간격 등 스타일 토큰이 체계화되어 있었습니다. 덕분에 앱뿐만 아니라 웹과 파트너센터에서도 동일한 기준으로 재사용할 수 있었습니다.
• 모든 서비스에서 동일한 컴포넌트를 사용하다 보니, 빠르게 작업해야 하는 환경에서도 적용이 수월했습니다. 화면 간 전환이나 페이지 제작 시 고민 없이 가져다 쓸 수 있었고, 하나의 컴포넌트로 앱/웹 양쪽의 개발자와 소통하여 효율적으로 작업이 가능했습니다.
• 동일한 컴포넌트를 기준으로 QA를 진행했기에, 앱/웹 모두에서 검수 방식도 일관성이 생겼습니다.

가장 근본이 되는 기본 컴포넌트들이 잘 정의되어 있었기에, 새로운 화면이나 서비스에서도 확장성을 고려한 구조로 컴포넌트 설계할 수 있었습니다. 덕분에 앱,웹,파트너센터 어디에서나 동일한 기준을 유지하며 작업할 수 있었고, 빠른 대응과 큰 틀에서의 일관성도 지킬 수 있었습니다.

하지만 그대로 쓰기엔 부족했던 순간들

물론 한계도 분명했습니다. 특히 모바일과 웹의 사용 환경 차이가 뚜렷하게 드러나는 부분에서요.

• 웹 특유의 인터랙션과 복잡한 UI는 모바일 컴포넌트만으로는 한계가 있었습니다. 운영툴의 테이블, 필터, 정렬 같은 구성은 모바일 기반 시스템으로는 커버가 어려웠고, hover나 focus-visible 같은 마우스 기반 인터랙션도 모바일에선 고려되지 않은 요소였어요.
• 네이밍과 상태값이 웹 관점에서는 어색하거나 적용이 힘든 경우도 있었습니다. 모바일에서 최적화된 컴포넌트가 웹에서는 그대로 쓰기 어렵거나, 상태 정의나 명칭이 혼동되는 경우가 있었어요. 그래서 일부 컴포넌트는 웹용 기준에 맞춰 별도로 정리가 필요했습니다.
• 폰트 크기, 여백, 그리드 시스템 등 웹과 모바일의 시각적 기준이 달랐습니다. 모바일 기준으로 작업했던 스타일이 웹에서는 과도하게 커 보이거나 여백이 비효율적으로 느껴지기도 했어요. 특히 폰트와 레이아웃 구성은 웹 전용 기준이 필요하다는 것을 체감했습니다.

결국, “한 시스템으로는 무리다”가 아니라, 공통은 유지하되 채널별 특성은 분리하자는 결론에 도달했습니다.

그래서 우리 팀은 이렇게 풀었습니다

신규 서비스가 급하게 오픈되는 상황이 반복되다 보니, 저희 팀은 ‘디자인 시스템을 다시 설계하거나 확장한다’기보다는, 기존 시스템 안에서 최대한 활용하는 방식을 선택하게 됐습니다.

• 모바일을 기준으로 한 컴포넌트 구조는 그대로 유지하면서, 웹 환경에 필요한 요소는 논의를 거쳐 최소한으로 추가하는 방식으로 조정해 나갔습니다.
• 반영이 어려운 환경에서는 무리하게 새로 만들기보다는, 기존에 정의된 컴포넌트 내에서 해결할 수 있는 방안을 먼저 모색해 일관된 체계를 유지하고 있습니다.
• 현재 이슈가 되는 사항들은 백로그로 정리해두고, 디자인 시스템 v2에서 해당 내용을 주제로 다루며, 어떤 방식으로 반영하면 좋을지 논의하기위한 FDS_TF를 진행중입니다.

이러한 해결 방안 덕분에 지금까지도 빠르게 화면을 구성할 수 있었고, UX팀은 디자인 시스템을 ‘유지하면서도 유연하게 쓰는 방식’에 익숙해질 수 있었습니다.

이제는 신규 프로젝트가 생기면, 새 컴포넌트를 만들기보다 기존 컴포넌트를 어떻게 확장하거나 응용할지 먼저 고민합니다. 무엇을 새로 만들지가 아닌, 정해진 틀 안에서 어떻게 풀어낼지를 중심으로 접근하고 있습니다.

마무리하며 - 디자인 시스템, 확장이 진짜 실력이다

디자인 시스템은 “딱 정리해서 예쁘게 만드는 것”이 아니라, “계속 쓰이고, 계속 커질 수 있게 설계하는 것”이라는 걸 이번 경험을 통해 배웠습니다.

• 모바일 기준으로 시작해도 괜찮습니다.
• 중요한 건 처음부터 확장성을 염두에 두고 설계하는 것입니다.

디자인 시스템은 툴보다 팀의 습관이고, 확장성은 디자이너의 배려에서 시작됩니다.

현재는 v1에서 정의된 컴포넌트들을 다시 점검하며, 실제 사용되지 않는 요소들을 과감히 축소하고 있습니다. v2에서는 앱과 웹 환경에서 무리 없이 사용할 수 있는 핵심 컴포넌트만을 엄선해, 보다 현실적이고 정제된 디자인 시스템으로 다듬어가고 있습니다.

이 과정은 단순히 정리가 아니라, 일관된 사용자 경험을 제공하기 위한 기반을 재정비하는 일이며, 디자인 시스템이 진짜 실력을 발휘하는 순간은, 처음보다 “계속해서 잘 쓰이는 상태”를 유지할 수 있을 때라는 걸 새삼 느끼고 있습니다.