Marketing Design System

SurveyMonkey의 마케팅 웹 생태계에는 홈페이지, 제품 마이크로사이트, 랜딩 페이지와 SEM·SEO 페이지가 함께 있었습니다. 페이지가 늘수록 같은 자산과 레이아웃을 팀마다 다시 만들었고, 시장과 담당자에 따라 품질과 구현 속도도 달라졌습니다.

저는 병목이 개인의 작업 속도가 아니라 함께 사용할 기준이 없다는 데 있다고 봤습니다. 누구나 브랜드를 일관되게 전달하면서도 각 시장과 콘텐츠에 맞게 조정할 수 있는 시스템이 필요했습니다.

기존 마케팅 페이지의 핵심 자산을 요소와 컴포넌트로 나누고, 콘텐츠 분량과 화면 크기가 달라도 안정적으로 작동하도록 변형을 설계했습니다. 접근성, 현지화와 모바일 대응은 마지막 검수 항목이 아니라 처음부터 지켜야 할 조건으로 넣었습니다.

이후 편집 가능한 컴포넌트와 템플릿을 디자인에서 바로 사용할 수 있게 만들었습니다. 한 번의 글로벌 업데이트를 수백 개 페이지에 반영할 수 있었고, Engineering→Design→Web 전체 제작시간은 약 50% 줄었습니다.

재사용·맞춤화·확장 컴포넌트

40+

전체 제작시간 단축

약 50%

글로벌 업데이트 적용 가능 범위

1 → 수백 개

브랜드 가이드라인, 빌딩 블록, 컴포넌트와 리소스를 한곳에 모아 디자인·웹·엔지니어링 팀이 함께 보는 중앙 허브를 만들었습니다. 새 페이지를 시작할 때 무엇을 다시 만들고 무엇을 재사용할지 같은 자료를 보며 판단할 수 있게 했습니다.

라이브러리는 결과물을 보관하는 폴더가 아니라 시스템을 실제 제작 과정에 연결하는 운영 화면이었습니다. Popular Components, Styles와 Resources를 나누어 필요한 기준을 빠르게 찾을 수 있도록 구성했습니다.

시스템이 채택되려면 컴포넌트만 배포해서는 부족했습니다. Jira 요구사항, Zeplin 목업, 교육과 워크숍, 리뷰와 QA를 같은 운영 흐름으로 연결했습니다.

연 2회 수집된 동료 피드백에서는 결과물보다 협업 방식이 반복해서 언급됐습니다. 실명과 사진은 제외하고, 제가 어떤 역할로 기억됐는지만 정리했습니다.

• 콘텐츠 엔지니어링 매니저: 다양한 페이지에 컴포넌트를 재사용하고, 콘텐츠 분량과 브레이크포인트에 맞게 제어 방식을 개선했습니다.
• 웹 프로젝트 매니저: Web·Engineering·Brand·Product 사이에서 의사결정 근거와 협업 과정을 연결했습니다.
• 그로스 프로덕트 매니저: 사용자 관점과 CMS 운영 효율을 함께 이해하는 파트너로 평가했습니다.

좋은 디자인 시스템은 컴포넌트의 모음이 아니라, 서로 다른 팀이 같은 기준으로 판단하고 실행하게 만드는 협업 방식이었습니다.

MDS에서 가장 크게 배운 것은 좋은 컴포넌트만으로는 시스템이 굴러가지 않는다는 점이었습니다. 역할을 나누고, 문서로 남기고, 함께 검토하는 습관은 이후 리서치와 프로젝트 운영, 성과 리뷰에도 이어졌습니다.

처음에는 화면의 일관성을 고민했습니다. 이 경험을 거치며 팀의 판단과 실행이 일관되게 이어지는 방식까지 고민하게 됐습니다.