Kwantae Kim
Product Design Leadership로 돌아가기

04 - 디자인 시스템 (디자인 시스템, 웹 디자인, 비주얼 디자인, 직군 간 협업)

마케팅 디자인 시스템

마케팅 웹페이지에서 반복되는 디자인을 40개 이상의 컴포넌트로 정리했습니다. 디자인·웹·엔지니어링 팀이 함께 사용하며 내부 전후 비교에서 전체 제작 시간을 50% 줄였습니다.

역할과 기여

역할
디자인 시스템 구축 제안 · 디자인 코어·컴포넌트 제작
직접 기여
흩어진 디자인 패턴을 개발팀과 시스템으로 통합하고 디자인 코어·컴포넌트 라이브러리를 직접 제작. 오피스아워와 주간 피드백 회의로 다음 업데이트 결정.
협업
개발팀: 공동 구축 및 가이드·문서 배포 · CMS 매니저: 컴포넌트 적용 · MDS 팀: 주간 피드백과 개선 논의.
범위
SurveyMonkey 마케팅 웹 시스템 · 40개 이상 컴포넌트 · 구축부터 적용·지속 업데이트까지.

페이지마다 같은 브랜드 경험을 제공하려면

홈페이지부터 제품 소개, 캠페인, 검색 광고용 랜딩 페이지까지 같은 브랜드 기준을 적용해야 했습니다. 저는 반복되는 요소를 정리하고, 현지화와 모바일 대응이 가능한 마케팅 디자인 시스템을 맡았습니다.

제가 맡은 일

흩어져 있던 디자인 패턴을 통합하자고 제안하고, 개발팀과 MDS 구축을 시작했습니다. 디자인 코어와 컴포넌트 라이브러리를 직접 제작했고, 개발팀은 가이드·문서 배포를, CMS 매니저는 컴포넌트 적용을 맡았습니다.

Momentive 브랜드를 웹페이지에 반영하면서 공통 기준을 정비했습니다. 출시 후에는 디자인 시스템 오피스아워를 운영하고, MDS 팀과 주간 피드백 회의에서 사용 중 생긴 문제를 검토해 다음 업데이트를 결정했습니다.

설계 역할 아이콘

페이지별 활용에 필요한 변형을 포함해 40개 이상의 컴포넌트를 설계했습니다.

퍼실리테이션 역할 아이콘

협업 세션에서 컴포넌트 사용 중 생긴 문제와 개선 항목을 정리했습니다.

기획 역할 아이콘

컴포넌트 개선 과제를 기획하고 관련 팀의 작업을 조율했습니다.

협업 역할 아이콘

아이디어 검토부터 QA까지 웹·개발·브랜드 팀과 협업했습니다.

교육 역할 아이콘

변경 내용을 공유하고 사용 방법을 익히는 교육과 워크숍을 진행했습니다.

페이지마다 다시 만들던 요소를 공통 컴포넌트로

기존 페이지의 반복 요소를 컴포넌트로 만들고, 접근성·현지화·모바일 대응에 필요한 변형을 정리했습니다.

디자이너가 Library에서 바로 가져다 쓸 수 있도록 템플릿도 제작했습니다. 팀은 공통 컴포넌트를 조합하고 페이지에 필요한 부분을 조정하는 방식으로 작업했습니다.

Eng > Design > Web 전체 제작 시간 단축
50%
재사용·맞춤화·확장이 가능한 컴포넌트
40+
한 번의 글로벌 업데이트로 수백 개 페이지에 적용
1
당시 진행 중인 테스트 · 종료 55건
41

MDS Library

브랜드 가이드라인과 컴포넌트 사양을 한곳에 정리했습니다. 디자인·웹·엔지니어링 팀이 같은 기준을 확인하며 작업하는 내부 라이브러리입니다.

동료 피드백

SurveyMonkey의 정기 동료 평가에서 받은 협업 피드백입니다.