메이커를 위한 메이커
원티드 디자인 시스템 TF 구성원 인터뷰
빠르게 성장하는 조직일수록 속도와 효율이 중요합니다. 하지만 일정한 성장 단계에 이르면, 속도는 점차 느려지고 제품의 일관성도 서서히 흐트러지기 마련이죠. 원티드는 지난 10년간 채용 시장의 변화를 함께 만들어왔습니다. 그 과정에서 우리 역시 같은 문제와 마주하게 되었고, 그 해답을 찾는 과정에서 고민에 대한 답으로 탄생한 것이 바로 원티드 디자인 시스템 ‘몽타주(Montage)’입니다. 이번 인터뷰는 그 ‘몽타주’를 함께 만들어온 여섯 명의 팀원들의 질의응답으로 구성되어 있습니다. 인터뷰에서는 서로 다른 팀원들이 ‘같은 언어로 일하는 방법’을 찾아나간 여정이 담겨 있으니 부디 즐겁게 봐주시길 바랍니다.
질문 1: 원티드 디자인 시스템 TF의 구성원들이 궁금해요.
석희: 프로덕트 디자인 리드를 맡고 있으며, 원티드의 디자인 시스템을 아주 오랫동안 만들고 있습니다.
명윤: 안드로이드 개발을 맡고 있습니다. TF 만들어질 때 합류했습니다.
승호: 디자인시스템 웹 개발을 맡고 있습니다. 생산성을 높일 수 있는 방법에 대해 관심이 많아요.
도은: 안녕하세요. 저는 지난 6월부터 플랫폼 디자이너로 TF에 합류하게 되었어요. 원티드 라이브러리로 디자인 시스템을 공부하던 성덕입니다 ㅎㅎ
채리: 프로덕트 디자이너로 입사했지만 어쩌다 보니 디자인 시스템을 하고 있는 프로덕트 디자이너입니다.
삼열: iOS 개발하고 있습니다. 디자인 시스템은 원티드에서 처음 경험해 보네요.
인터뷰를 진행 중인 디자인 시스템 TF질문 2: 디자인 시스템을 만들게 된 가장 큰 계기는 무엇이었나요?
석희: 원티드는 10년 차 채용 스타트업으로, 지난 10년 동안 조직과 사업 전반에서 빠른 성장을 이뤄왔습니다. 그 과정에서 자연스럽게 제품 내 디자인의 파편화가 진행되었는데요. 이는 작업자 개개인의 성향 차이와 다양한 비즈니스 이슈가 맞물리며 나타난 복합적인 결과였습니다. 결국 이러한 문제를 해결하고 제품 제작 과정의 효율성을 높이기 위해 내부에서는 점차 디자인의 일관성과 생산성을 확보할 수 있는 방안에 대한 논의가 활발해졌고, 그 결과 탄생한 프로젝트가 바로 디자인 시스템 구축 프로젝트였습니다.
명윤: 비슷한 UI가 사용되었지만 일관성이 없이 구현되었고 유지보수가 어려워졌습니다. 코드에서 임의로 컴포넌트를 만들어서 사용한 것도 있지만 가이드가 조금이라도 달라지면 해당 컴포넌트를 사용 못 했기 때문에 유지보수 측면에서 필요하다고 느꼈습니다.
승호: 여러 프로젝트가 병행되면서 사소하게 다른 버튼들이 각 코드베이스에 제각각 구현 및 축적되기 시작했고, 그 결과 동일한 UI의 재사용이 어려워져 일관성과 개발 효율이 눈에 띄게 떨어졌어요. 이 문제를 근본적으로 해결하기 위해 표준화된 컴포넌트와 가이드라인을 제공하는 디자인 시스템의 도입 필요성이 커져 진행하게 되었던 것 같아요.
채리: 저는 사실 큰 계기랄 게 없었어요. 원티드에 합류하고 보니까 다들 시스템의 필요성을 느껴서 만들고 계셨었거든요. 그래서 그 자리에서 제가 기여할 수 있는 부분을 찾아서 하다 보니 여기까지 오게 되었던 것 같아요.
삼열: 저는 처음에 디자인 시스템 개발에 반대했었습니다. 디자인 시스템이 도입되면 디자이너의 창의성을 제한하고 개발자 입장에서는 구현상의 유연성을 떨어뜨리는 측면이 있다고 생각되었거든요. 디자인 시스템을 본격적으로 시작하기 직전의 상황은 디자인 시스템 컴포넌트가 있지만 거기서 폰트나 색상 등이 조금씩 달라지는 디자인 요구사항들로 인해 논란이 많았었거든요. 어차피 디자인 시스템이 있어도 예외가 자꾸 생길 바에는 차라리 디자이너들이 마음껏 디자인할 수 있도록 열어두고 개발자들은 그 안에서 알아서 코드의 유연성을 확보하면서 코딩할 수 있도록 하는 것이 낫겠다는 생각이었어요. 그런데 어쨌든 대세는 디자인 시스템을 더욱 확장하기로 결정이 되었고 저의 의지와는 상관없이 합류하게 되긴 했어요. 그런데 지금은 우려했던 점들보다 디자이너와 개발자 모두 생산성이 향상되었다는 평가가 훨씬 많은 것 같아서 결과적으로 보면 아주 잘한 결정이었던 것 같습니다.
질문 3: 원티드 디자인 시스템이 담고 있는 철학이나 방향성은 무엇인가요?
석희: 원티드 디자인 시스템은 처음부터 제품 제작의 속도와 퀄리티를 함께 높이자는 목표로 시작했습니다. 하지만 두 가지를 동시에 완벽하게 잡는 건 생각보다 쉽지 않았어요. 효율을 높이면 완성도가 아쉽고, 퀄리티를 챙기면 자연스럽게 시간이 더 걸리곤 했죠. 이런 시행착오를 겪으면서 우리는 점점 확신하게 됐어요. 결국 우리가 진짜로 지켜야 할 가치는 ‘작업의 균형’이라는 것을요. 그래서 원티드 디자인 시스템은 정해진 규칙 안에서 자유롭게 움직이되, 동시에 모두가 하나의 큰 원칙 안에서 일하는 균형 잡힌 상태를 지향합니다. 우리에게 디자인 시스템의 규칙은 제약이 아니라, 더 빠르고 일관된 판단을 돕는 도구이자 문화예요. 완벽한 정답을 찾기보다, 상황에 맞게 적절한 균형점을 찾아가는 유연함을 중요하게 생각합니다. 속도와 완성도, 창의성과 일관성 사이의 균형을 고민하며, 팀 전체가 같은 언어로 생각하고 협업하는 것 — 그것이 바로 원티드 디자인 시스템이 추구하는 방향입니다.
명윤: 일부는 제약하되 어느 정도는 자유롭게 구현할 수 있도록 ‘자유도’를 보장하는 것이라고 생각합니다. 너무 많은 것을 제약을 하게 되면 사용을 많이 하지 않을 것이라고 생각했습니다.
도은: 원티드 디자인 시스템의 방향성은 ‘자유도’라고 생각했어요. 원티드 디자인 시스템은 제품을 만드는 디자이너와 개발자의 창의성을 존중하며 최대한의 자유도를 보장하는 것을 지향하고 있어요. 그러다 보니 디자인 시스템 자체의 엄격한 규칙보단, 사용자들의 편의를 보장하기 위한 방향으로 발전하고 있어요. 그리고 이런 방향성을 통해 원티드 제품을 사용하는 엔드 유저에게 더 나은 사용 경험을 제공할 수 있다고 믿습니다.
채리: 맞아요.. 도은님이 말씀하신 것처럼 정해진 규칙 안에서의 ‘자유도’인 것 같아요. 디자인시스템을 사용하는 구성원들이 UX를 설계할 때 편리함을 느껴야 시스템을 계속 확장할 수 있다고 생각했거든요. 그리고 그 안에서 더 좋은 UX를 만들어 내야 시스템의 가치가 더 올라간다고 보고 있어요.
삼열: 저는 처음에 디자인 시스템과 UI 프레임워크의 차이를 이해하지 못했던 것 같아요. 시간이 지나면서 UI 프레임워크는 ‘무엇이든 만들 수 있는 재료 세트’에 가깝다면 디자인 시스템은 그 재료를 이용해서 ‘우리 브랜드와 제품 철학에 맞게 정리한 설계 원칙’에 가깝다는 걸 알게 된 것 같습니다. 즉 디자인 시스템은 ‘우리는 이렇게 만든다’는 팀의 공통 언어인 셈이죠. 그래서 작업 후반부로 갈수록 디자인 시스템이 실제 제품을 만드는 팀에게 도움이 되도록 만드는 데에 더 집중하려고 했던 것 같아요.
디자인 시스템 TF는 팀 전체가 사용하는 공통의 언어를 만들기 위해 부단히 노력했습니다.질문 4: 다른 조직의 디자인 시스템과 차별화되는 지점은 무엇이라 생각하시나요?
석희: 원티드의 웹 서비스가 반응형으로 되어 있다 보니, 디자인 시스템도 자연스럽게 반응형 대응을 중심으로 설계되었어요. 보통 다른 서비스들은 앱용과 PC용 시스템을 따로 두는 경우가 많지만, 우리는 하나의 디자인 시스템으로 두 플랫폼을 모두 커버한다는 점이 큰 특징이에요.
채리: 제가 생각하기에는 두 가지 정도가 있는 것 같은데, 첫 번째로는 Custom 요소를 컴포넌트마다 지정해 놓고 열어둔 것, 두 번째는 컴포넌트의 시각적 디테일함인 것 같아요. 저는 이전 경험에서는 항상 컴포넌트를 지정해 놓은 것만 사용해야 한다 주의였고, 그러다 보니 디자이너들이 잘 쓰지 못하기도 했었거든요. 여기서는 어느 정도의 자유도가 허락되니 그 안에서 잘 유용하게 사용해 주시는 것 같아요. 그리고 이전에는 컴포넌트들이 만들 땐 모르는데 막상 디자인에 앉혀보면 좀 화면에 어울리지 못할 때도 있었는데 원티드의 컴포넌트는 모두의 디자인을 모아놓고 절충안을 찾고, 베리언트를 만드는 과정을 가지다 보니 보정이 잘 적용되어 있어서 좀 더 유려한 느낌이 있다고 생각해요.
승호: 저희 디자인 시스템은 사용하기 편한 것에 중점을 두었다고 생각해요. 반응형 크기 변경에 대해 유연하게 대응하기 위해 스타일 Override를 하는 것이 아닌 정해진 breakpoint에서 컴포넌트의 개발 옵션만으로 손쉽게 대응할 수 있도록 했어요. 컴포넌트에서 정의된 사이즈 등을 화면별로 마음대로 왔다 갔다 할 수 있는 점이 좋은 것 같아요.
도은: 채리님께서 말씀 주신 것처럼 디테일함이 차별점이라고 생각해요. 아이콘 제작 시 Path 대칭을 맞춘다거나, 피그마 상 미세한 오류를 조정하기 위한 Ratio, Filler 같은 장치를 컴포넌트에 두는 등 디테일한 부분까지 챙기고 있어요. 또, 구성원들이 사용하기 쉽도록 피그마에서 검색이 용이한 방식으로 컴포넌트를 그룹화하는 등 시스템으로서 잘 동작할 수 있도록 깊은 고민을 하는 점이 차별점을 만들고 있다고 생각해요.
질문 5: 협업하면서 인상 깊었던 순간이나 팀워크가 잘 드러났던 사례가 있었나요?
석희: 디자인 시스템 가이드를 정리하면서 용어 통일이나 플랫폼별 차이를 정리하는 과정이 쉽지는 않았습니다. 그때마다 팀원들과 함께 치열하게 논의하며 더 나은 방법을 찾아갔어요. 보통 이런 상황에서는 논의가 격해지다 보면 누군가 힘들어하거나 감정이 상하기도 마련인데, 다행히 저희 팀은 치열하게 토론하되, 결정된 사항에 대해서는 모두가 깔끔하게 수용하고 함께 나아갔던 것 같아요. 그 덕분에 “팀워크가 정말 잘 맞는 팀이다”라는 생각을 자주 하게 되었습니다.
명윤: 지금 생각해 보면 미팅이 길어질 때 2~3시간 이상 컴포넌트에 대해 논의한 것들이 인상 깊었습니다. 슬랙 스레드가 100개가 넘어가는 경우도 많았습니다. 항상 많은 커뮤니케이션이 이루어졌고, 필요시 업데이트도 있긴 했지만 서로생각하는 의도가 달라 다시 작업하는 일이 거의 없었습니다.
도은: 한 가지 사례보다는 늘 올라오는 슬랙 채널이 인상 깊었어요. 디자인 시스템 팀 채널에 올라오는 메시지는 스레드가 매우 길다는 특징이 있는데요. 늘 100개를 거뜬히 넘어가는 스레드가 어떤 논의라도 누구 한 명 대충 넘어가지 않고, 열정적으로 임한다고 느껴지는 지점이었어요. 이렇게 각 파트에서 최선의 결론을 도출하기 위해 항상 진심인 태도가 서로에게 좋은 동기 부여가 되고 있다고 생각합니다.
채리: 저한테 가장 인상 깊었던 건.. 사실 원티드에서 디자인 시스템을 담당하게 된 순간이었던 것 같아요. 예측하지 못했어서 그런가.. 그런데 또 의외로 하다 보니까 적성에 꽤나 잘 맞았던 것 같습니다. 팀워크는 일하는 매 순간순간 느끼지만 정말 잘 맞는다고 생각이 들어요. 팀원이 총 6명인데 어느 순간 각자 맡은 포지션이 생겼다고 느낍니다. 발산하는 사람, 수렴하는 사람, 직언을 하면서 방향성을 만들어가는 사람, 디테일을 챙기는 사람 등등.. 가끔 생각하다 보면 어떻게 이렇게 다른 사람들이 모여서 참 다행이다라는 생각도 합니다.
승호: 결정이 필요한 사항이 있을 때 작은 하나라도 어떻게 하면 개발, 디자인 영역에서 모두 납득할 수 있을지 치열하게 논의를 하면서 디테일들을 맞추어 나갔던 과정이 인상 깊었던 것 같아요. 덕분에 타 플랫폼에 대한 이해도가 쌓이기도 했고 서로의 열정으로 인해 많은 동기부여가 되었다고 생각합니다.
삼열: 채리님 이야기를 들으니 저는 어떤 유형인지 궁금하군요. 서로 다른 사람들이 첨예하게 대립하며 수긍하는 가운데 모난 돌이 깎여 나가듯 팀이 성숙해지고 하나의 결과물을 만들어낸 것이 신기하기도 하고 뿌듯하게 느껴집니다. 다른 분들도 말씀하셨다시피 다른 어떤 조직보다도 슬랙 스레드가 길고 오프라인 소통도 많이 하는 팀인데 저는 사내 모든 조직이 이렇게 소통할 수 있었으면 하는 생각도 해봅니다.
원티드 디자인 시스템은 운영과 고도화를 계속 진행 중에 있습니다.질문 6: 추후 개선하거나 확장하고 싶은 영역이 있다면 무엇인가요?
석희: 디자이너들이 제품을 만들면서 늘 고민하는 인터랙션이나 UX 라이팅 영역도 앞으로는 시스템 안에 자연스럽게 녹여낼 수 있는 방법을 모색 중이에요. 요즘은 하루가 다르게 새로운 AI 기술이 등장하고 있으니, 머지않아 이러한 부분들도 빠르게 적용해 볼 수 있을 것 같네요.
명윤: 사용하는 컴포넌트뿐만 아니라 애니메이션도 만들어서 조금 더 부드러운 사용 경험을 제공할 수 있으면 좋을 것 같다고 생각합니다.
도은: 원티드 디자인 시스템은 지금 정적인 UI를 제공하고 있는데, 추후엔 각 UI 요소의 동작이나 전환이 더 조화롭도록 돕는 인터랙션까지 확장하고 싶어요. 원티드 디자인 시스템 이름 ‘몽타주’에 담긴 의미처럼, UI 요소들이 조화롭고 아름답게 연결되어 더 나은 사용 경험을 제공할 수 있도록이요.
채리: 이거 관련해서 도은님과 대화를 했었던 것 같은데, 인터랙션도 그렇고 컴포넌트들이 모여서 어떠한 패턴을 이루기 마련인데, 저희는 사실 아직까지 패턴 단계로 만들어놓지는 못했거든요. 그러다 보니 정말 동일한 UX여도 디자이너들의 성향에 따라서 조금씩 차이가 생기는 부분이 있더라고요. 그런 부분들도 챙기고 효율화를 가져가고 싶습니다.
승호: AI와 손쉽게 통합할 방법을 찾고 있어요. 피그마 디자인을 제공하면, 디자인 시스템을 활용하여 컴포넌트 옵션들을 사용하고, 커스터마이즈 된 영역을 찾아 커스텀 스타일을 주입하도록 100% 전환되는 그림을 그리고 있어요.
삼열: 솔직히 말하면 이제 그만하고 싶네요^^ 다 끝난 거 아니었나요? 말은 이렇게 했지만 iOS는 접근성 대응이 안되어 있는 문제도 있고 일부 컴포넌트는 구현상의 미흡함들이 있어서 그런 부분들 개선해야 하고 일부 iOS 플랫폼에서 제공하는 UI 컴포넌트를 그대로 사용하다 보니 의도치 않게 리퀴드 글라스가 부분적으로 적용되는 문제들도 있어서 그런 부분을 정리해야 하는 과제들이 남아있습니다. 그리고 연내 오픈소스 화하는 것도 생각하고 있습니다.
인터뷰를 마치며
인터뷰를 마치고 원티드 사무실에서 바라본 잠실 석촌호수의 전경인터뷰 즐겁게 보셨나요? 원티드 디자인 시스템 ‘몽타주(Montage)’는 오늘도 끊임없이 발전하고 있습니다. 더 나은 제품 경험을 위해 새로운 시도와 개선을 멈추지 않으며, 디자이너와 개발자, 그리고 사용자 모두가 함께 성장할 수 있는 방향을 고민하고 있습니다.
앞으로 이어질 원티드 디자인 시스템 TF의 여정에도 많은 관심과 응원 부탁드립니다.
여러분의 피드백과 시선이 저희에게 큰 힘이 됩니다.
