[인사이트]아임웹은 왜 디자인 인프라에 주목할까?



IT 프로덕트를 만드는 기업에 '사용자 경험(UX, User eXperience)'은 놓칠 수 없는 중요한 요소예요. 좋은 사용자 경험은 고객 만족도를 높이고, 제품의 가치를 증대시키며, 장기적으로 기업의 성장과 경쟁력 확보에 결정적인 역할을 하거든요. 이러한 사용자 경험의 핵심에는 바로 '디자인'이 있죠.

우수한 디자인은 제품의 사용성을 높이고 브랜드 가치를 강화하는 데 기여합니다. 하지만 기업이 단기적인 매출 성과에 집중하다 보면 이런 부분이 후순위로 밀리기도 쉽죠. 고객 관점에서 그 중요성을 제대로 이해하고, 장기적 안목으로 체계적인 투자를 하는 기업이 드문 이유이기도 해요.

아임웹은 디자인에 남다른 열정을 가진 기업 중 하나인데요. 디자인이 심미성, 사용성, 비즈니스 측면에서 얼마나 큰 영향을 미치는지 누구보다 잘 알고 있거든요. 디자인에 대한 아임웹의 진심이 인프라 측면에서 어떻게 구현되고 있는지, 그리고 아임웹 동료들이 이를 얼마나 잘 활용하고 있는지 들여다봤어요.



1. 사용자 경험의 일관성을 조직적으로 빌드업!
  • 디자인 시스템 ‘전담 스쿼드’ 출범


“디자인 시스템은 기본, 지원 조직까지 있으니 든든해요”



‘디자인 시스템(Design System)’은 일관된 사용자 경험을 제공하기 위해 재사용 가능한 디자인 요소, 패턴, 가이드라인의 집합을 말하는데요. 단순한 스타일 가이드를 넘어서 제품의 디자인 철학과 원칙을 담고 있기도 해요. 어느정도 규모와 체계가 있는 IT 스타트업이라면, 디자인 시스템은 기본적으로 갖추고 있을 거예요.

하지만 문제는 디자인 가이드만 있거나, 디자인한 대로 개발이 되지 않거나, 팀마다 각자 개발된 디자인이 만들어져 코드가 파편화되는 경우가 많다는 점이에요. 디자인 가이드를 실제 개발 컴포넌트와 이어서 ‘생산성’까지 만들어내는 경우는 드물기도 하고요.



그런 면에서 아임웹은 전담 조직인 ‘디자인 시스템 스쿼드(이하 DS 스쿼드)’가 따로 있을 정도로, 사용자 경험의 일관성과 디자인-개발 간의 일치를 위한 전사적인 컨센서스가 잘 이루어져 있는데요. 현재 DS 스쿼드는 아임웹의 프로덕트와 커뮤니케이션 생산성 전반을 한 차원 더 높이는 든든한 지원군으로 활약하고 있습니다.

한편, 디자인 시스템은 완성도도 중요하지만 결국 구성원들이 얼마나 잘 활용하는지도 중요해요. DS 스쿼드에서는 매분기마다 디자인 시스템의 주 사용자인 아임웹 프로덕트 디자이너와 개발자들을 대상으로 설문 조사를 실시하고 있는데요. 이를 통해 디자인 시스템의 사용성과 만족도, 커뮤니케이션과 협업의 원활함 등을 꼼꼼히 체크하며 작업 환경을 개선해나가고 있죠.




2. 누구나, 쉽고, 빠르며, 아름답게!
  • 아임웹 디자인 시스템의 특장점 4가지


“클레이요? 없으면 큰일나죠”


아임웹의 디자인 시스템은 '클레이(Clay)'라 불리고 있는데요. 점토처럼 유연하게 형태를 만들어갈 수 있다는 의미를 담고 있어요. 클레이는 디자이너와 개발자에게 일관성 있고 효율적인 작업 환경을 제공하는 동시에 아임웹 고객들에게는 직관적이고 일관된 UI/UX 경험을 선사하고 있는데요. 제품 개발 속도를 높이고 품질을 향상시키는 데 큰 역할을 하고 있기도 해요.

아임웹의 프로덕트 디자이너와 개발자들에게 클레이의 특장점을 물었더니, 4가지로 의견이 모였습니다.


Quality : 디자이너-개발자 간 긴밀한 소통으로 구현하는 편차 없는 퀄리티

“아임웹의 경우 디자인 시스템의 구현 기획 단계부터 디자이너와 개발자가 긴밀하게 소통하고 있기 때문에, 디자인 아웃풋과 개발 컴포넌트 사이를 편차없이 동일하게 구현해나가고 있는 점이 특징이에요. 분산된 서비스에 같은 디자인을 유지할 수 있어 전반적인 통일성을 가져갈 수 있죠. 디자이너 간 혹은 디자이너와 개발자 간에 약속된 규율만 지키면 되기 때문에 소통 비용도 많이 절감돼고요”


Aesthetic : 최적의 간격과 레이아웃 갖춘 심미성 있는 컴포넌트들

“아임웹의 디자인 시스템은 ‘심미성’이 남다른 것 같아요. 클레이를 쓰면서 항상 아름다운 컴포넌트를 만들기 위해 정말 많이 노력했다는 점이 느껴져요. 최적의 간격과 레이아웃에 대한 연구가 이루어져 있거든요. 이런 아름다운 컴포넌트를 바로 사용할 수 있다는 점이 아임웹을 다니면서 느끼는 가장 큰 장점 중 하나가 아닐까 생각해요”


Collaboration : 아입웹 구성원이라면 누구나 기여 가능한 개방성

“다양한 아이디어로 더 나은 제품을 만들기 위해 아임웹 구성원이라면 누구나 디자인 시스템에 기여할 수 있도록 하고 있어요. 디자이너부터 PO, 프론트, 백엔드 개발자분들까지 다양한 스쿼드 소속의 동료분들이 직군을 가리지 않고 의견을 내죠. 함께 새로운 컴포넌트를 빌드하거나 업데이트하기도 하고요. Figma 디자인 파일 및 코드 개발의 모든 과정을 검토하고 최종 점검까지도 함께 하고 있어요. 버그를 발견하면 슬랙에서 다같이 문제를 적극적으로 모니터링하기도 하고요.”


Documentation : 신규 입사자도 빠르게 얼라인 가능하도록 문서화

“컴포넌트 사용 방법과 사용 케이스를 담은 공식 문서 ‘Clay ground’를 상시 업데이트 하고 있어요. 새로운 컴포넌트를 등록하거나 가이드를 고칠 때 기존 시스템에 위배 되지 않는지, 기존 룰에 익숙해져있는 구성원들에게 혼란을 주지 않을지 고려하며 업데이트를 진행하죠. 변경이 있을 시 디자인 챕터의 크리틱 시간에 공유하고 신규 입사자 대상으로는 온보딩 과정을 통해 얼라인하고 있어요.”


이처럼 아임웹의 디자인 시스템 'Clay'는 단순한 도구 이상의 의미를 지니고 있는데요. 품질, 심미성, 개방성, 그리고 체계적인 문서화를 통해 아임웹의 디자인 철학을 구현하는 핵심 인프라로 자리잡았어요. 단기적으로는 업무 효율성을 높이고, 장기적으로는 일관된 사용자 경험을 제공하며 아임웹의 브랜드 가치를 높이는 데 큰 역할을 하고 있죠. 더불어 구성원들의 적극적인 참여와 지속적인 개선 노력을 통해 Clay는 계속 진화하고 있습니다. 이러한 노력들이 모여 아임웹이 추구하는 최고의 사용자 경험을 만들어가는 원동력이 되고 있고요.




3. 비즈니스 임팩트에 더 집중하도록!
  • ‘생산성’ 올리는 디자인 시스템과 전용 플러그인


“Clay로 UX 잡고, Grim으로 BX 잡아요”


아임웹 팀에게 ‘생산성’은 중요한 이슈입니다. 단순 반복적인 업무를 줄일 수 있다면 비즈니스 임팩트에 기여하는 더 복잡하고 어려운 문제 해결에 집중할 수 있기 때문이죠.


Clay 덕분에…컴포넌트 구성 시간 ‘30분→38초’로 단축

디자인 시스템을 통한 생산성이 비즈니스에는 어떤 도움이 될까요? 아임웹 프로덕트 디자이너들은 “UI 구현에 시간을 쏟지 않고, 문제 해결 자체에 집중할 수 있기에 빠른 피드백 반영과 신속한 실험이 가능해진다”고 입을 모았어요.

특히 Commerce BO 소속 프로덕트 디자이너인 이삭님의 경우, 신규 주문관리 시스템 리빌딩을 위한 TF가 구성됐을 때부터 Clay를 사용하기 시작했었는데요. 이때 Clay의 생산성 효과를 온몸으로 체감했다고 해요.


“Clay를 통해 화면 구성에 필요한 UI 컴포넌트 제작 시간이 비약적으로 단축됐어요. Clay가 없을 때는 컴포넌트 하나를 만들거나 사용하기까지 2단계의 과정이 있었는데요. 먼저, 피그마 작업 파일을 탐색해서 제작된 컴포넌트 찾아야 했어요. 그 다음에는 실제로 구현된 것과 동일한 UI인지 검증해야 했죠. 이 과정을 거치면서 드는 제작 및 커뮤니케이션 비용이 약 30분 정도로 매우 비싼 비용으로 화면을 구성해나가고 있었는데요. Clay의 통일화된 컴포넌트를 Figma 에셋으로 관리하기 시작하면서 약 38초의 시간으로 하나의 컴포넌트를 구성할 수가 있게 됐어요.”


이처럼 화면 구성 비용이 줄어들면 당연하게도 다방면의 시안을 빠르게 제작해보고 피드백을 받아볼 수가 있는데요. 피드백을 통해 사용자에게 유용한 경험을 제공하지 않는 것을 빨리 검증해낼 수 있게 됩니다. 절약한 시간으로 고객에게 최적의 사용자 경험을 제공하는 디자인을 찾는 것에 더 집중할 수 있게 되는 거죠.



UX - BX 간 생산성을 위한 전용 플러그인까지



한편 아임웹만의 고유한 브랜드 경험을 프로덕트에 일관성 있게 녹여내는 것도 중요한데요. 프로덕트에 필요한 일러스트, 그래픽 요소들을 반영함에 있어 프로덕트 디자이너와 BX(Brand eXperience) 디자이너들의 협업이 긴밀하게 진행되고 있는 이유에요.

현재와 달리 과거엔 이 협업이 매끄럽지만은 않았는데요. 프로덕트 디자이너들이 디자인 리소스를 찾을 때마다 BX팀의 피그마 페이지를 찾아 헤매거나, 다른 프로덕트 디자이너의 작업물에서 일러스트 디자인을 찾아야 했거든요. 매번 찾는 것이 불편했는데 크기, 컬러 등도 일관되게 전달되지 못하고 있었어요. 사용법을 BX팀에 물어봐야 할 때도 있었고요.

이런 문제를 해결하기 위해 DS 스쿼드에서는 BX팀과 협업하여 플러그인으로 일러스트를 사용할 수 있는 에셋을 만들었어요. 바로 Grim이라는 아임웹 일러스트 플러그인인데요. Integration 스쿼드 소속 프로덕트 디자이너인 혜민님은 전용 플러그인 덕분에 업무 효율성을 크게 높였다고 해요.


“비공개 플러그인이라 내부에서만 사용할 수 있지만, 이 플러그인이라는 생산 도구 덕분에 아주 빠르게 필요한 일러스트를 찾을 수 있게 되었고 작업 효율성이 높아졌어요. 모든 프로덕트 디자이너들의 아웃풋에서 에셋을 일관되게 사용하고 있다는 점은 프로덕트 퀄리티에 굉장히 기여하고 있다고 생각해요.”


이처럼 아임웹의 디자인 시스템 'Clay'와 전용 플러그인 'Grim'은 단순히 디자인의 일관성을 유지하는 도구를 넘어서, 아임웹 팀의 생산성과 효율성을 획기적으로 향상시키는 핵심 인프라로 자리잡았습니다. 컴포넌트 구성 시간의 대폭 단축, 빠른 피드백 반영, 일관된 브랜드 경험 제공 등은 아임웹이 더 나은 제품을 만들고 사용자 경험을 개선하는 데 큰 도움이 되고 있죠.






지금까지 아임웹의 디자인 인프라 전반에 대해 살펴보았어요. DS 스쿼드라는 조직적인 지원을 토대로 'Clay'와 'Grim'을 통해 구현된 작업 환경까지. 아임웹의 디자인 시스템은 단순히 시각적 일관성을 유지하는 것을 넘어, 아임웹의 사용자 경험을 강화하는 전략적 투자로 자리 잡았습니다.

특히 이런 디자인 인프라는 내부 효율성 제고에만 국한되지 않고, 디자이너와 개발자들이 반복적인 작업에서 벗어나 고객의 실질적인 문제를 해결하는 본질적인 업무에 더 집중할 수 있도록 하고 있는데요. 디자인 시스템을 통한 업무 효율화가 결과적으로 사용자들에게 더 나은 서비스 경험을 제공하는 선순환으로 이어지고 있는 이유예요.

앞으로도 아임웹은 이러한 선순환을 더욱 강화하며, 디자인과 기술의 시너지를 통해 이커머스 SaaS 시장을 선도하는 대표 기업으로 자리매김할 수 있도록 노력할 예정이니, 많은 관심 부탁드립니다!



💡 함께 보면 좋을 아임웹 콘텐츠



아임웹 팀과 성장의 여정을 함께하고 싶다면?

아임웹 합류하기



by communications 수빈









상호명 (주)아임웹  l  대표이사 : 이수모  l 개인정보책임자 : 김형섭
사업자등록번호 : 105-87-83592
통신판매업신고번호 : 제 2023-서울강남-02377
서울특별시 강남구 테헤란로 501 VPLEX
채용문의 : join@imweb.me
Made by Imweb Corp.