[Design Article] 마케팅 팀에게 권한을 주는 디자인 시스템을 구축하는 방법

 

Webflow Blog에 작성된 Leo Zakour의 아티클을 해석해 보았습니다

 

사전 지식 Webflow
코드없이 반응형 웹사이트 제작을 구현하는 소프트웨어

시중에 많이 알려진 윅스와 스퀘어스페이스의 기능적 제약을 해결하고 워드프레스와 같은 CMS 기반 웹사이트 보다 효과적인 콘텐츠 솔루션을 제공합니다

 

작성자 Leo Zakour

30명 이상의 디자이너와 개발자로 구성된 선두적인 디지털 에이전시 Bons의 공동 창업자 겸 CEO

---

👇노션에서 보기

bit.ly/kimmyarticle03

How to build design systems that empower marketing teams

---

마케팅 팀에게 권한을 주는 디자인 시스템을 구축하는 방법

마케팅 팀을 위한 디자인 시스템을 구축하면 스스로 페이지를 더 빠르게 구현할 수 있습니다.

디자인 시스템은 일반적으로 디자이너와 개발자 사이의 격차를 해소하는 것으로 생각됩니다. 그러나 이 문장에는 오류가 있습니다 : 왜 마케팅 담당자를 제외시키는 거죠? 여러분의 웹 사이트는 최고의 마케팅 도구입니다. 마케팅 담당자가 직접적으로 관여하는 것은 타당합니다, 그렇죠? 이것이 우리가 마케팅 팀을 염두에 두고 디자인 시스템을 구축해야하는 이유입니다. 하지만 마케팅 팀은 디자인 시스템을 어떻게 사용할 수 있을까요? 그리고 이것이 기업의 투자 수익에 어떤 의미가 있을까요?

 

만약 마케팅 담당자들이 디자인을 하거나 코딩을 할 수 없다면, 어떻게 웹사이트 개발에 기여하는 방식으로 전략과 비전을 전달할 수 있을까요?

 

우리는 이 모든 질문에 대답할 시간을 가지도록 하겠습니다. 하지만 우선, 디자인 시스템이 실제로 무엇인지 파악해 봅시다.

디자인 시스템이란 무엇입니까?

디자인 시스템이 무엇인지에 대해서 많은 혼란과 엇갈린 메시지들이 있습니다. 동일한 페이지에 있는지 확인하기 위한 정의는 다음과 같습니다 : 디자인 시스템은 사용자들에게 만족스럽고 일관된 경험을 제공하는 프로덕트 및 마케팅 웹 사이트를 디자인, 개념화 및 개발하는 데 도움이 되는 요소를 포함하는 단일 소스 입니다.

 

이러한 요소에는 다음이 포합됩니다 (그러나 이에 국한되지는 않습니다)

 

• 브랜드 가이드 라인
• 디자인 원칙
• 타이포그래피
• 컬러
• 레이아웃
• 재사용 가능한 구성 요소
• 웹플로우 구현 가이드라인
• 디자인 구현 가이드라인

이러한 요소는 프로덕트 또는 웹 사이트를 하나의 솔루션으로 연결하여 타겟 고객을 기쁘게 하고 그들을 지원하는 데 도움이 됩니다.

 

전반적으로 디자인 시스템은 다음을 수행합니다.

 

• 디자이너, 개발자 및 마케팅 담당자를 위한 공유 언어를 제공
• 디자이너, 개발자 및 마케팅 담당자들이 이미지, 버튼. 코드 및 스타일을 즉시 재사용할 수 있도록 허용
• 프로덕트 및 웹사이트 구축에 대한 모듈식 접근을 권장

우리가 이런 비유를 처음하는 것은 아니지만, 디자인 시스템이 어떻게 작동하는지 이해하기에 좋은 방법은 그것들을 레고 블록과 비교하는 것입니다. LEGO 블록과 마찬가지로 디자인 시스템은 모든 요소들이 어떻게 결합되는지 모든 사람들에게 직관적으로 이해할 수 있는 방식으로 전체를 구축 할 수 있는 구성 요소를 제공합니다.

 

디자인 시스템이 마케팅 팀을 위해 무엇을 할 수 있을까요?

마케팅 팀에게 그들의 아이디어를 시각적 형태로 변환할 수 있는 플랫폼을 제공하세요. 그러면 마케팅 팀은 KPI를 달성할 가능성이 훨씬 높아집니다. 이것은 마케팅과 잠재 고객 발굴 목표를 달성하는데 도움을 줄 수 있습니다.

 

결국, 마케팅 담당자는 고객의 니즈를 파악하고 그 니즈를 충족시키는 브랜드 스토리를 구현하는 데 큰 역할을 합니다. 마케팅 담당자는 인구통계학이나 페르소나의 관점에서 생각하는데, 이러한 지식은 고객이 좋아할 만한 디지털 프로덕트를 만드는데 유용할 것입니다. 그들은 당신의 웹사이트가 잠재 고객과 공감하고 있는지, 그리고 회사의 브랜딩 목표를 시행하고 있는지 여부를 지적할 수 있는 사람들입니다.

 

마케팅 담당자는 대부분 KPI, 브랜드 메시지, 마케팅 터치 포인트를 다루지만 마케팅 담당자가 시각적으로 생각할 수 없다는 것을 의미하지는 않습니다. 마케팅 담당자(또는 그들 중 일부)는 UI와 UX 디자인에 대한 지식이 제한적일 수 있을지라도, 좋은 디자인 시스템을 손에 넣으면 그들은 곧 전문 디자이너와 같은 웹 사이트를 만들 수 있을 것입니다.

 

디자인 시스템 투자 사례

의심할 여지 없이, 디자인 시스템이 만약 잘 구현된다면, 투자 수익을 크게 높일 수 있을 것입니다. 특히 (기업에서 가능한 한) 여러 마케팅 팀의 손에 들어갈 때 말이죠.

 

다만, 디자인 시스템이 조직에 미치는 영향을 측정하는 것은 쉽지 않습니다. 디자인 시스템에 상당한 투자가 필요하다는 사실을 추가하면, 왜 일부 경영진과 주요 이해관계자가 큰 도약을 주저하는지 쉽게 알 수 있습니다.

 

동의를 얻기 위해서, 당신은 더 열심히 일해야 합니다. 디자인 시스템이 어떻게 모든 사람의 삶을 더 쉽게 만들어 주는지 보여주는 것에 그치지 마세요 - 다각도로 조직에 이익이 될 수 있는 많은 방법을 보여 주어야 합니다. 이를 위한 좋은 방법은 모든 사람을 본격적인 discovery process에 참여시키는 것입니다. 광범위하고 관련성이 높은 데이터에서 추론하여, 당신은 놀라운 결과를 도출할 수 있습니다.

 

만약 당신이 그것을 잘 수행한다면, 생산성, 효율성 및 품질 향상이 수익에 미치는 복합적인 영향이 날이 갈수록 분명해질 것이며, 이는 앞으로 나아가는 데 필요한 동의를 얻을 것입니다.

 

마케팅 팀을 위한 디자인 시스템의 이점

디자인 시스템이 마케팅 팀에게 어떤 혜택을 줄 수 있는지 자세히 알아봅시다.

 

1. 협업 개선

마케팅 담당자들은 브랜드 메시지, KPI, 마케팅 전략등에 신경을 쓰지만, 비주얼 형태로 그들의 아이디어를 표현할 수 있는 툴을 주는 것은 유용할 수 있습니다. 디자인 시스템을 마음대로 사용할 수 있는 마케팅 팀은 불필요한 작업을 없애서 보다 상세하고 고객이 구매에 가까운 행동을 할 수 있는 웹 사이트를 만들 수 있습니다.

 

마케팅 팀이 간단한 웹 사이트를 쉽게 만들 수 있는 디자인 시스템을 구현해서 디자이너와 개발자들은 반복적인 작업 보다 더 많은 가치를 얻을 수 있는 새로운 구성 요소와 커스텀 생성에 집중할 수 있습니다.

 

2. 일관되고 더 나은 사용자 경험

마케팅 담당자에게 회사의 핵심 목표에 따라 아이디어를 시각적으로 전달할 수 있는 플랫폼을 제공하는 것은 협업을 개선할 뿐만 아니라 더 나은 사용자 경험으로 이어집니다.

 

사전 승인된 컴포넌트와 에셋을 포함하는 중앙 집중 방식의 시스템을 갖추게 되면, 마케팅 담당자들은 시각적 일관성을 훼손하지 않고 웹 페이지와 유저 인터페이스를 만들 수 있어 더 나은 경험을 제공하는 솔루션을 만들 수 있습니다.

 

3. 효율성 향상 및 비용 절감

디자인 시스템에는 마케팅 담당자, 디자이너 및 개발자가 웹 페이지를 만들기 위해 사용할 수 있는 재사용 가능한 에셋과 컴포넌트가 포함되어 있습니다. 마케팅 담당자, 디자이너와 개발자가 필요한 모든 것이 디자인 시스템 안에 있습니다.

 

즉, 중복된 에셋에 낭비되는 리소스가 더 이상 없다는 것을 의미합니다. 그리고 모든 것이 시스템에 통합되어 있기 때문에 회사는 디자인 빚(간단히 말해서, 단기적인 목표에 도달하기 위해 건너 뛴 좋은 디자인 개념이나 해결책)을 덜 발생시켜 모든 사람이 각자의 작업을 보다 효율적으로 완성할 수 있게 합니다.

 

디자인 시스템을 구현하고 유지하는 것은 리소스가 필요하지만, 전반적으로 효율성을 창출하는 단일 소스가 있는 경우, 긍정적인 면이 부정적인 면보다 훨씬 큽니다.

 

비록 당신의 내부 팀이 웹 사이트를 만드는 노하우가 부족하거나 혹은 너무 바빠서 그것에 대해 배울 수 없을 지라도, 당신은 항상 Bons와 같은 에이전시로부터 도움을 받을 수 있습니다.

 

4. 누구에게도 의존하지 않고 스스로 창조하는 능력

당신이 최고의 프로덕트를 가지고 있을 지라도, 경쟁 업체가 출시하기 전에 그것을 출시할 수 없다면 당신은 거의 매번 패배할 것입니다. 오늘날 급변하는 경쟁적인 환경에서 만약 당신이 빠르게 움직이지 않는다면, 기회, 고객, 시장 점유율을 잃게 된다는 사실을 기억하세요.

 

요점은 만약 비슷한 프로덕트가 이미 시장에서 인기를 얻고 있다면, 당신의 마케팅 팀은 디자인 팀의 개입을 기다리는 여유가 없을 것입니다. 디자인 시스템을 구축하면, 당신의 마케팅 팀은 현재의 트렌드를 활용할 수 있고 디자인팀을 기다리지 않고도 마케팅 캠페인을 시작함으로써 앞서 나갈 수 있습니다.

Bons가 마케팅 팀을 위한 디자인 시스템을 만드는 방법

Bons에서는 검증된 방법론을 사용하여 마케팅 팀의 역량을 강화하는 디자인 시스템을 만듭니다. 우리는 우리가 만드는 것이 영향력 있고, 지속가능하며 고객의 요구와 관련이 있는지 확인하기 위해 이 과정을 채택했습니다. 또한 마케팅 팀이 쉽게 사용할 수 있는 디자인 시스템 구축을 목표로 합니다.

 

우리는 우리의 과정을 다섯 단계로 나누었습니다 : 발견, 전략, 디자인, 웹플로우, 워크숍

 

1. 발견

우리는 고객의 비즈니스에 대해 최대한 많이 배우는 것으로부터 일을 시작합니다. 그들의 사업 목표는 무엇입니까? 타겟 고객의 니즈는 무엇입니까? 그들의 현재 전략은 무엇입니까?

 

고객의 마케팅 팀과 인터뷰를 진행하는 것 이외에도, 우리는 고객의 현재 웹 사이트를 검토하여 개선할 수 있는 것이 무엇인지 확인하고, 비즈니스 성과에 해를 끼칠 수 있는 잠재적인 이슈와 격차를 파악합니다.

 

2. 전략

필요한 모든 정보를 수집하고 검토한 후에 우리는 전략 단계로 들어갑니다. 여기서 우리는 모든 사람들이 어떻게 무엇을 만들 것인지 이해하는데 도움이 되는 시각적 에셋과 문서를 만듭니다. 여기에는 다음이 포함됩니다 :

- 무드보드 : 특정 주제를 설명하기 위해 텍스트, 이미지, 개체 등을 결합하여 보여주는 보드
디자인 시스템 프로젝트는 고객의 디자인을 개선하고 높은 단계로 이동할 수 있는 좋은 기회를 제공합니다. 그러나 브랜드 일관성을 유지하기 위해서 브랜드의 시각언어를 정의할 기준을 만들어야 합니다.

우리는 정확한 목적을 위해 무드보드를 만듭니다. discovery session에서 고객으로부터 수집한 모든 정보를 검토해서 고객의 브랜드 성격을 정확하게 표현하고 전달하는 무드보드를 만들 수 있습니다.

최고의 시각적 아이디어를 내기 위해, 우리는 고객에게 브레인 스토밍에 참여할 것을 요청합니다. 그런 다음 우리는 최고의 아이디어를 탐색하여 이해하기 쉬운 방식으로 분류합니다.

 

- 와이어프레임 : 화면 단위의 레이아웃을 설계하는 작업
우리는 와이어프레임을 만들어 고객에게 공유합니다. 와이어 프레임은 기본적으로 디자인 시스템의 모습을 스케치한 것입니다. 이 단계는 고객의 기대를 불러일으키고, 앞으로 나아갈 방법에 대한 합의를 도출하는 데 도움이 되기 때문에 중요합니다. 고객에게 와이어 프레임을 보여주고 피드백을 요청함으로써, 우리는 디자인 및 개발 작업을 하기 전에 필요한 레이아웃과 구조 변경을 실행할 수 있습니다.

다음으로 우리는 고객과 협력하여 디자인 시스템의 레이아웃과 구조를 개념화하고 진행하면서 필요한 사항을 변경합니다.

 

- Webflow 구현 가이드라인
디자인 시스템의 전체 구조에 동의하면, Webflow 안에서 이것이 어떻게 구현될지 정의합니다. 우리는 class의 이름을 정의하고, 컴포넌트를 구성하고, 템플릿과 예제를 설정하여 이를 수행합니다. 우리는 또한 디자인이 어떻게 구현될 것인지에 대해 모든 사람들이 조정할 수 있도록 문서를 통해 제공합니다.

 

3. 디자인

이제 디자인 단계로 넘어갑니다! 여기서 우리는 디자인 시스템의 형태나 느낌을 정의하고 컴포넌트 유저 인터페이스를 만들며 디테일을 더해 최종적으로 다듬습니다. 우리는 피그마에 스타일 가이드를 만들어 고객의 팀과 공유하고 협업을 도모합니다.

스타일 가이드가 마련되어 있으면 우리는 Webflow를 시작하기 전에 피그마에서 디자인 시스템을 계속 다듬을 수 있습니다. 우리는 피그마에서 새로운 웹사이트를 구축하기 위한 재사용 가능한 컴포넌트를 갖게 될 뿐만 아니라 향후 새로운 컴포넌트를 만들 수 있는 수단도 얻게 됩니다.

 

- UI 디자인 : 사용자가 마주하게 될 시각적인 디자인
우리는 모든 페이지와 구성요소에 대한 시각적 디자인을 만듭니다. 또한, 아이콘, 일러스트레이션 및 애니메이션 그래픽을 추가하여 사용자에게 전반적으로 훌륭한 경험을 제공합니다.

 

- 개발을 위한 핸드오프 : 개발자들이 완성된 디자인을 구현하는 프로덕트 개발 프로세스의 한 지점
이제 모든 기술 사양이 명확하고, 디자인 시스템이 완전히 승인되었으며, 모든 문제들은 이미 해결되었습니다. 일단 이 조건들이 충족되면, 개발팀은 Webflow를 실행할 수 있습니다.

 

4. Webflow

우리는 견고한 토대를 가지고 좋은 품질의 프로덕트를 만드는 것을 믿습니다. 그래서 우리는 표준과 프로세스에 대해 깊은 관심을 가집니다. 그렇기 때문에 우리는 최신 기술을 수용하고 지속적으로 기술 스택을 개선합니다. 사실, 지난 7년간 우리가 만든 모든 마케팅 웹사이트는 Webflow에서 만들어졌습니다.

Webflow는 디자인 시스템을 만드는 데 가장 완벽한 도구로, 마케팅 팀이 브랜드의 시각적 정체성이나 핵심 가치를 훼손하거나 희석하지 않고 빠르게 웹을 구축하는데 도움이 되는 디자인 시스템을 만들 수 있습니다.

 

- Webflow 심볼
이전에 우리는 여러 페이지에서 심볼들을 재사용할 수 있었지만, 정확히 동일한 콘텐츠를 가져야만 했습니다. 이제 우리는 심볼을 추가하고, 각 콘텐츠 노드(텍스트, 이미지, 링크)에 바인딩 가능한 필드를 만들고, 각 인스턴스에 콘텐츠 오버라이드를 추가할 수 있습니다. 즉, 제목 요소와 이미지, 텍스트 블록이 있는 카드 컴포넌트를 만들 수 있으며 그것을 다른 텍스트와 미디어가 있는 페이지에서 재사용할 수 있다는 것을 의미합니다.

이 뛰어난 개선 덕분에 이제 Webflow를 사용하여 디자인 된 모든 컴포넌트를 재사용 가능한 심볼로 구현할 수 있습니다. 이것은 마케팅 팀의 삶을 훨씬 더 쉽게 만듭니다. 웹 사이트를 만들고 콘텐츠를 업데이트하기 위해 마케팅 팀이 해야할 일은 우리가 만든 재사용 가능한 심볼을 캔버스에 드래그하고 콘텐츠를 편집하는 것입니다.

우리는 마케팅 팀이 웹 사이트를 더 빨리 만들 수 있도록 도울 뿐만 아니라, 그들이 만들고 있는 페이지에서 마케팅 아이디어를 실행할 수 있도록 디자인 시스템을 구축합니다. 이를 위해서, 우리는 심볼이 다음과 같은 두 가지 주요 특성을 가지고 있는지 확인합니다.

[유연성] 우리는 다양한 유스케이스(Use-cases : 사용자의 입장에서 시스템의 동작을 표현한 시나리오로 시스템에 관련된 사용자의 요구사항을 알아내는 과정)에서 작동하는 심볼을 만듭니다. 이렇게 하면 디자인 시스템이 필수 구성 요소로 분리되어 마케팅 팀이 보다 쉽게 필수 컴포넌트를 탐색할 수 있습니다.

[표준화] 디자인 시스템의 주요 이점 중 하나는 마케팅 팀이 동일한 컴포넌트로 그것을 만들 수 있도록 한다는 것입니다. 글꼴, 색상, 버튼, 아이콘 사용을 표준화해서 당신의 팀은 동일한 언어로 말할 수 있어, 의사결정 및 과정에서의 추측과 모호성을 없앨 수 있습니다. 이것은 생산성, 효율성, 업무 만족도를 높입니다.

 

- 템플릿
디자인 시스템을 갖추는 것은 좋습니다. 그러나 디자인 배경지식이 없는 사람들은 빈 페이지를 마주하는 순간, 막막함을 느낄 수 있습니다. 그들에게 좋은 출발점을 주기 위해서, 우리는 가장 많이 사용하는 컴포넌트와 조합을 검토한 다음, 그것들 중에서 템플릿 페이지 세트를 만듭니다. 일단 이러한 템플릿이 디자인 시스템에 추가되면, 마케팅 팀은 간단한 랜딩 페이지를 더 빠르고 쉽게 만들 수 있습니다.

 

- 검색엔진 최적화(SEO)와 페이지 스피드
심볼을 미리 정의하여 성능을 최적화하고 개선할 수 있는 더 많은 공간을 확보합니다. 또한 SEO 모범 사례에 적합하도록 합니다. 우리는 고객들이 검색엔진 결과에서 높은 순위를 차지할 웹 페이지를 쉽게 만들 수 있기를 원합니다.

 

5. 워크숍

강력한 디자인 시스템은 투자수익률을 높일 수 있지만 그것만으로는 고객의 조직을 변화시키기에 충분하지 않습니다. 우리는 단순히 디자인 시스템을 넘겨주고 고객이 적절한 교육과 지침 없이 그것을 실행하도록 내버려 두지 않을 것입니다.

이것이 우리가 Webflow Workshop을 실시하는 이유입니다. 고객에게 맞춤형 디자인 시스템을 사용하는 방법을 교육하는 것 외에도, 우리는 고객들이 프로세스를 맞춤화 할 수 있도록 디자인 철학을 재정립하는 것을 돕습니다.

이러한 워크샵은 마케팅 팀이 Webflow의 컴포넌트 라이브러리를 최대한 활용할 수 있도록 돕는데 중요한 역할을 합니다. 또한, Webflow와 Bons와 같은 디지털 솔루션에 의해 제공되는 무한한 가능성을 최대화하는 데 필요한 지식을 마케팅 팀에게 제공합니다.

다음은 무엇인가요?

마케팅 팀에게 진정으로 권한을 부여하려면, 그들에게 무언가를 구축하도록 하세요. 마케팅 팀이 항상 화이트보드에 그림을 그리도록 두지 마세요. 마케팅 팀에게 필요에 맞는 디자인 시스템을 제공하고 그들에게 그것의 이점을 극대화할 수 있는 교육을 제공한다면, 그들은 훌륭한 일을 성취할 것입니다. 그러면 이는 브랜드를 높이고 당신의 투자수익률 목표를 깨는 데 도움이 될 것입니다.

---

👇원문기사로 이동하기

bit.ly/3mFsDSy

How to build design systems that empower marketing teams | Webflow Blog

---