ProtoPie의 브랜드 시스템 만들기
ProtoPie, ProtoPie 팁, 프로토타이핑
Free Your Ideas, ProtoPie
우리는 리브랜딩이라는 큰 리뉴얼 이후 많은 변화 속에서 ProtoPie라는 브랜드를 알리기 위해 노력해왔습니다.
제품을 알리기 위한 광고, 다양한 소셜 채널의 컨텐츠, 우리 제품을 보여주고 해보고 싶게 만들기 위한 웹사이트, 그리고 우리 제품을 더 잘 사용할 수 있도록 도와주는 교육 프로그램 등 까지 눈으로 보고 체험하고 느끼고 그리고 구매까지 이어질 수 있도록 우리는 다양한 영역에서 우리 브랜드를 알리고 홍보하고 있습니다.
하지만 우리는 점점 복잡해져가고 커져가는 브랜드를 관리하고 만들어가는 입장에서 몇가지 문제점을 발견하게 되었습니다. 대체적으로 아래와 같은 문제들이죠.
- 우리는 대체 어떤 브랜드일까?
- 우리의 브랜드 철학이 제품과 디자인 속에 녹아져 있을까?
- 우리의 디자인이 유저들한테 일관된 이미지로 전달되고 있을까?
- 우리의 제품과 브랜드가 같은 길을 걷고 있을까?
- 우리의 비주얼 메세지가 오해없이 올바르게 전달되고 있는 것일까?
우리가 그동안 하고 있었던 각기 다른 채널의 디자인을 유기적으로 통합하고, 일관된 브랜드 톤으로 우리가 누구인지 보여주는 것 이를 위해 브랜드 팀과, 제품을 만드는 디자이너들까지 한데 모였습니다. 우리는 몇 주 동안 작고 끈질기게 우리 브랜드를 정의하는 워크샵을 진행했습니다. 워크샵의 주제와 참여 인원은 매번 달랐습니다.
- 브랜드 퍼스널리티 정의하기
- 디자인 프린시플 합의하기
여러번의 워크샵을 통해서 우리는 아래와 같이 우리 브랜드에 대한 정의를 내렸습니다.
Step 1.
Brand Personality Keyword
(Tone of Voice)
Approachable, Inspirational, Nurturing
우리의 모습과 성격을 표현하는 키워드로 위 3가지 단어를 선택했습니다.
우리는 유저들로 하여금 다가가기 쉽고, 영감을 제공하며, 언제나 세심하게 돌봐주는 친근한 브랜드로써 포지셔닝 한다고 정의했습니다. 일반적인 소프트웨어나 SaaS Company가 보여주는 Personality와는 조금 거리가 멀죠. 하지만 우리는 ProtoPie를 만들고 있는 우리의 모습에서 우리 브랜드의 성격을 비춰보게 되었고, 이런 우리 모습을 투영하여 우리 제품을 좀 더 인간적으로 느낄 수 있도록 성격을 부여했습니다.
물론 우리의 제품까지 이렇게 말랑말랑 한 것은 아닙니다. ProtoPie라는 제품 그 자체는 항상 강력하고, 즐거우며, 직관적으로 (Powerful, Enjoyable, Intuitive) 만들기 위해 노력하고 있습니다.
그렇다면 우리가 표현하고자 하는 Approachable, Inspirational, Nurturing은 대체 무엇이고 이것을 표현하기 위해 우리는 어떠한 원칙을 가지고 디자인 해야하는걸까요?
이 고민은 디자인 프린시플 워크샵으로 이어집니다. 처음 디자인 프린시플 워크샵은 브랜드—제품 디자이너들이 모두 모여 '일관된 ProtoPie 디자인을 하려면 어떤 원칙이 필요할까?' 에서부터 시작되었습니다. 이를 위해 우리는 브랜드—제품을 모두 아우를 수 있는 더 큰 차원의 키워드가 필요하다고 생각했습니다.
결과적으로 이 키워드가 우리를 대표하는 단어로 사용하지는 않지만 워크샵을 통해 함께 찾은 Clever, Caring, Magical 이라는 키워드와 이를 표현하기 위해 우리가 논의한 디자인 프린시플은 아래 브랜드 관점에서 정리된 ProtoPie의 디자인 프린시플의 기초가 되었습니다.
Step 2.
ProtoPie Design Principle
이해하기 쉬워야한다.
→ 제품, 기능, 메세지, 그래픽, 그리고 모든 시각 자료는 누구나 의심의 여지 없이 받아들일 수 있도록 명확하게 표현합니다.
작은 움직임을 더해 살아있게 만든다.
→ 멈춰있는 오브젝트를 인터렉티브하게 만들어 주는 ProtoPie를 보다 잘 표현하는 방법은 과장되지 않은 인터렉션과 절제된 모션을 더하는 것입니다.
함께 하고 싶게 만든다.
→ 밝고 따뜻한 모습, 친절한 태도, 올곧은 어조로 우리에게 다가오고 싶게 만들며, 브랜드 DNA가 담긴 시각적 디테일을 더하여 매력적으로 보여줍니다.
유저의 상상력이 더해질 수 있는 공간을 제공한다.
→ 우리로 하여금 유저가 빛날 수 있도록 우리는 가장 중요한 것에 집중된 디자인을 합니다. 장식적인 요소를 배제하고 그 남은 공간에 유저의 상상력을 제공하기 위한 캔버스를 제공합니다.
앞에서 차근차근 우리의 성격을 정의하고 어떻게 그 성격을 보여줄 수 있을지 정했습니다. 그렇다면 구체적으로 우리의 모습을 형상화하는 단계가 되었습니다. 이것이 앞으로 우리만의 비주얼 언어로써 ProtoPie를 표현하는 핵심 디자인 모티프가 될 것입니다.
Step 3.
Brand DNA (Design Motif)
ProtoPie는 움직임을 만들어냅니다. 멈춰진 것, 머리속의 생각, 말로 표현하기 어려운 것들을 꺼내어 살아있고 표현 가능하게 만들어줍니다. 멈춰있던 모든 것들을 우리의 작은 터치만으로 새로운 반응을 만들어내도록 도와주죠. 이것은 우리가 가지고 있는 3가지의 Object, Trigger, Response의 결합이라는 컨셉모델과 일맥상통합니다.
우리가 만드는 인터렉션은 이렇게 하나의 작은 움직임을 만들어 내는 것에서 시작하며, 이 움직임이 연속된 반응을 이끌어내며 더 큰 움직임으로 퍼져나가는 파동을 연상시킵니다.
그리고 이 파동은 우리 제품안에서 표현하는 인터렉션 피스의 리스팅 방식과도 같다는 것을 알게되었습니다. 층층이 쌓여진 블록처럼 움직임에 움직임을 더해 더욱 풍부한 인터렉션으로 만들어 주는 것, 이에 더해 우리의 Personality를 부드럽게 스며드는 그라디언트와 둥글게 이어지는 3D illustration로 시각화 한 형태가 바로 우리가 표현하고자 하는 브랜드 DNA이고, 이를 담아 아래 3가지 디자인 모티프를 정의하였습니다.
Act & React
우리는 하나의 작은 움직임으로 부터 시작하여 더 큰 리엑션으로 반응하고 연속적으로 퍼져나가는 인터렉션을 핵심 비주얼 모티프로 사용합니다.
Layered Block
ProtoPie만이 가진 논리적인 인터렉션의 결합을 형상화하여 층층이 쌓여진 블록으로써 비주얼 엘리먼트를 표현합니다.
Unified harmony
색이 다른 색으로 스며드는 그라디언트, 둥글게 이어지는 형태들의 조화는 어디에든 잘 섞일 수 있는 ProtoPie의 성격을 표현합니다.
Step 4.
Design Execution - Visual Elements
Inspired by our product
ProtoPie라는 브랜드의 DNA를 정의했다면 그 다음은 브랜드DNA를 입힌 비주얼 엘리먼트를 스케치할 차례입니다. 그동안 우리는 ProtoPie 고유의 비주얼 엘리먼트가 무엇이 있을지 고민해왔습니다. 기존에는 Free Your Ideas 브랜드 캠페인과 결을 맞추어 브랜드 에셋들을 제작해왔습니다. 딱딱했던 브랜드를 소프트하게 커뮤니케이션하려는 움직임으로써 은유적인 표현방식을 채택한 것입니다.
인터랙션과 움직임을 추상적으로 표현한 계단 모양의 모티프
아이디어를 표현하는 구름BEFORE
이번 프로젝트를 통해서는 그동안 추상적이고 은유적으로 표현했던 비주얼 커뮤니케이션의 한계에서 벗어나 제품과 브랜드가 주는 이미지의 괴리를 줄이고, 보다 직관적으로 제품을 브랜드에 녹이고 싶었습니다. 따라서 Layered Blocks이라는 Brand DNA와 더불어 Timeline Handlebars, Touch Wave 라는 비주얼 모티프를 더하여 우리다움을 표현하고자 했습니다.
Layered blocks
트리거, 리스폰스 등의 인터랙션 피스들은 다른 프로토타이핑 툴에서는 볼 수 없는 ProtoPie만의 고유한 아이덴티티입니다. 우리는 하나의 트리거로 인해 다양한 리스폰스 액션이 결합되는 ProtoPie의 인터랙션 방식을 층층이 쌓인 블록으로 형상화했습니다. 이는 트리거라는 Act로 리스폰스가 React됨으로써 Act&React라는 우리의 DNA를 모션으로 표현하기도 합니다.
timeline handlebar
인터랙션 블록의 듀레이션을 조정하는 타임라인 핸들바 또한 ProtoPie만이 가지고 있는 고유한 개념입니다. 우리는 이러한 개념으로부터 차용해 라인 디자인 모티프를 뽑아냈습니다. 인터랙션이 진행되는 과정을 표현한 타임라인 핸들바 모티프는 '작은 움직임을 더해 살아있게 만든다'는 ProtoPie의 디자인 원칙을 따라 디자인한 결과물입니다. 아래 예시와 같이 두 가지 이상의 라인 스타일을 한 프레임에 사용할 수 있습니다.
Touch Wave
터치 웨이브는 프로토타입을 플레이어에서 테스트할 때 꼭 필요한 '터치 포인트'로부터 아이디어를 차용했습니다. 그라디언트가 번져나가는 모션은 터치 인터랙션을 생동감있게 표현합니다. 터치 웨이브는 아래 예시와 같이 텍스트의 하이라이팅에 사용되거나, 백그라운드 요소 등으로 다양하게 활용할 수 있습니다.
Step 5.
Design Execution - Style Guide
앞서 정의한 비주얼 엘리먼트를 통일된 스타일로 디자인하기 위해 컬러나 무드에 대한 스타일 가이드도 지정했습니다.
Color
ProtoPie Color System에는 프로덕트와 함께 사용하는 11종류의 컬러 스펙트럼이 있습니다. 그 중 난색 계열의 6가지 컬러를 브랜딩 컬러로 지정하여 일관된 디자인 톤앤매너를 유지하고자 했습니다.
이와 더불어 ProtoPie만의 Unified Harmony Color System은 두가지 이상의 컬러와 그라디언트의 조합으로 어디에든 부드럽게 스며들어 어울어질 수 있도록 만들었습니다. Base Color와 Overlay Color로 이루어진 두 레이어가 겹치면서 섞이는 Unified Color는 브랜드와 프로덕트 사이의 균형과 조화를 이루며, 유저로 하여금 디자인적인 영감을 불러 일으키고 ProtoPie의 친근한 무드를 느낄 수 있도록 만들어졌습니다.
3D Mood
마지막으로 ProtoPie에서 빼놓을 수 없는 3D 그래픽 스타일도 브랜드 프린시플에 맞게 정의했습니다. ProtoPie에서 디자인하는 3D 에셋은 편안하고 햇살이 잘 드는 가정집의 조명을 사용하고, 각이 없는 둥근 형태의 3D 일러스트레이션으로 밝고 기분좋은 분위기를 나타냅니다. 인터랙션과 프로토타입을 3D와 결합할 때 자주 등장하는 '손'은 다양한 인종의 스킨 톤을 사용함으로써 다가가기 쉽고 친근한 브랜드의 느낌을 살렸습니다.
Step 6.
디자인 적용하기
브랜드 시스템을 세웠다면, 앞으로 이 시스템을 웹사이트, SNS, 교육 콘텐츠 등 ProtoPie를 이루는 다양한 브랜드 영역에 녹여내는 것이 우리에게 남은 숙제입니다. 유저들이 일관된 톤의 메시지와 룩앤필을 접하면서 궁극적으로는 ProtoPie가 유저들에게 다가가기 쉽고, 영감을 제공하며, 언제나 세심하게 돌봐주는 친근한 브랜드가 되는 것을 목표로 합니다.
마무리하며
브랜드 시스템은 우리만의 일관적인 이미지와 성격을 부여하기 위해, 그리고 팀 내 다양한 디자이너들이 'ProtoPie'라는 동일한 톤앤매너로 디자인하기 위해 만들어진 체계입니다.
따라서 브랜드 디자인은 시스템을 정립해 본 몇 번의 워크샵으로 그 여정이 끝나는 것이 아니라 앞으로도 계속되고 디벨롭될 과정인 것입니다. ProtoPie만의 아이덴티티를 강화/유지 하기 위한 여정을 함께 지켜봐주세요!
