Spectrum Con 2019 후기(2/2)

2019. 8. 26. 07:50UI 가벼운 이야기
by 강유정(yujeong.kang)

Spectrum Con 2019 후기(1/2)에 이어 2개의 세션을 소개합니다. 앞선 글에서 라인과 쿠팡의 디자인 팀이 어떻게 UI 디자인을 진행하고 있는지 살펴보았는데요. 이번 글에서는 CFC가 어떤 과정으로 브랜드의 비주얼 랭귀지를 만들어 나가는지, 그리고 프로토파이가 어떤 방식의 협업을 진행하는지 공유합니다.

[ Spectrum Con 2019 후기 시리즈 ]

Spectrum Con 2019 후기(1/2) - 이전 글
Spectrum Con 2019 후기(2/2) - 현재 글

 

 


브랜드 맥락에서 기인하는 visual language - CFC 전채리 님

작성자. 강유정

 

들어가며

세션은 CFC가 진행해온 프로젝트에 대한 소개로 시작되었습니다. 브랜드의 맥락을 발견하고, 이를 시각 언어로 연결하는 프로세스에 대해 다루었는데요. 이러한 과정을 프로젝트와 함께 공유하고자 합니다.

 

CFC

CFC는 브랜드 경험 디자인 프로젝트를 진행하는 디자인 스튜디오입니다. CFC란 이름은 Content Form Context를 표현한 것으로, 주어진 콘텐츠 안에서 맥락을 발견하여 적절한 형태로 담아내는 것을 의미합니다. 이것이 디자인에서 가장 중요한 점이라 생각했기 때문에 스튜디오의 이름으로 정하게 되었다고 하는데요. 현재는 beauty, entertainment, art&space, food 등 다양한 영역에 걸쳐 협업을 진행하며, 그 안에서 오는 시너지를 바탕으로 디자인을 진행한다고 합니다.

<THYANE(좌)>, <SM Entertainment(우)>, ⓒ CFC
nonprofit project <바라는 바다>, ⓒ CFC

 

브랜딩에서 가장 중요한 것

연사님은 브랜딩에서 가장 중요한 것은 'Being Recognized, 인식되는 것'이라고 설명했습니다. 여기에서 인식은 브랜드가 고객에게 비주얼 랭귀지를 통해 인지되는 것을 의미합니다. 비주얼 랭귀지는 선과 표식으로 이루어진 시각적 구성단위가 모여 형성된 의미 있는 형태와 구조, 신호인데요. 우리가 미켈란젤로와 피카소의 작품을 보고 서로 다른 그림이라고 인식하는 것처럼, 여러 브랜드의 비주얼 랭귀지를 보았을 때 또한 서로 다른 것으로 인식할 수 있음을 뜻합니다.

브랜드 비주얼 랭귀지를 이루는 요소로는 Mark와 Color system, Form, Typography 4가지가 있습니다. 2017년에 CFC에서 진행한 BEAT 360 프로젝트의 요소를 살펴보면, 비트감 있는 타이포그래피로 구성된 워드 마크는 Mark, 워드 마크에서 추출한 Form을 적용한 픽토그램과 윈도 그래픽은 랭귀지가 됩니다.

<BEAT 360>의 pictogram과 window graphic, ⓒCFC

 

이러한 비주얼 랭귀지를 개발하기 위해서는 '브랜드의 맥락 파악'이 선행되어야 하는데요. BEAT 360 프로젝트에서는 '기아자동차의 브랜드 에센스'와 '공간 컨셉', 두 가지 맥락을 유기적으로 결합하여 일관된 비주얼 랭귀지를 추출했다고 합니다.

기아자동차 브랜드 에센스와 BEAT 360의 공간 컨셉

 

브랜드 맥락이 담긴 디자인

그렇다면 이러한 맥락을 어떻게 비주얼 랭귀지로 연결할까요? 먼저 주어진 문제를 성실히 검토해 본 후, 그 안에서 브랜드가 가진 여러 맥락을 발견합니다. 그리고 발견한 맥락을 끝까지 파헤치며 유사성을 발견하기 위해 노력합니다. 맥락을 발견했다면, 이들을 엮어 브랜드만의 비주얼 랭귀지를 만드는데요. 이 전체의 과정에서 논리가 처음부터 끝까지 촘촘하게 이어지며, 심미성과의 조화를 잃지 않는 것이 중요합니다. '한섬 하우스'와 'TSP 737' 프로젝트를 통해 이 과정을 어떻게 적용하는지 살펴봅니다.

 

1) 더 한섬 하우스

Context of The Handsome haus
한섬은 TIME과 MINE, SYSTEM 등의 의류 브랜드를 유통하는 회사입니다. '더 한섬 하우스'는 한섬에서 기획한 컨셉 스토어인데요. 서로 다른 브랜드의 제품을 엄선하여, 최신 트렌드와 매장 콘셉트에 맞춰 한 공간에 배치하고 큐레이션을 제공하는 새로운 형태의 매장입니다.

프로젝트를 시작하기에 앞서 브랜드를 파악하기 위해, 더 한섬 하우스를 표현할 수 있는 키워드를 정의했습니다. 한섬의 패션 전문가들이 고객의 라이프스타일과 취향에 따라, 제품을 엄선하여 한섬만의 큐레이션을 보여준다는 점을 비주얼 아이덴티티의 핵심으로 꼽았습니다.

‧ 한섬다움: 브랜드를 떠올리면 느껴지는 톤앤매너를 따라야 한다. 현재는 개별 브랜드가 더 잘 알려졌지만, 앞으로는 한섬이라는 브랜드로 적극적으로 소통하려는 목적이 있다.

‧ 편집숍: 소속된 브랜드를 돋보이게 하는 그릇의 역할을 해야 한다.

‧ 큐레이션: 다른 편집숍과는 다르게 수많은 브랜드를 수십 년간 보유하며 운영해온 노하우를 바탕으로 지역별, 타겟별 브랜드 큐레이션이 가능하다.

 

MOTIF

H를 결합하여 만든 그래픽 모티프, ⓒCFC

'더 한섬 하우스 The Handsome Haus'의 머리글자인 두 개의 H를 결합하여 '사각형의 공간'을 만들었습니다. 이 공간은 확장되어 TIME과 같은 브랜드가 위치하기도 하고, 상황에 따라 다른 요소와 결합하기도 합니다. 모티프와 워드 마크가 분리되는 형태로 디자인된 만큼, H가 유연하게 변화하며 다양한 콘텐츠를 전달합니다. 즉, 'H 프레임 내의 사각형 조합'이 이루는 패턴이 변주되며 하나의 상징성 있는 형태를 이루는 것입니다. 더불어 다양한 브랜드를 포용할 수 있는 화이트와 블랙을 중심으로 컬러 시스템을 구축했습니다.

 

APPLICATION

ⓒCFC

 

2) 투썸 플레이스 TSP 737

Context of TSP 737
'TSP 737'은 투썸 플레이스에서 새롭게 시도하는 한남동에 위치한 작은 규모의 컨셉 스토어입니다. 유러피안 광장을 모티프로 인테리어 되었으며, 에스프레소 기반의 음료만 판매하는 특징을 갖고 있습니다. 이 프로젝트 또한, 브랜드 맥락을 이해하는 것으로 시작했습니다.

‧ 투썸 플레이스: '투썸 플레이스 다움'을 내포해야 한다.

‧ 한남동: 상업적이기 보다는 실험적인 공간이라는 이미지를 가진다.

‧ 광장: 공간의 컨셉에 충실해야 한다.

‧ 에스프레소: 에스프레소 스탠드라는 컨셉이 녹아 있어야 한다.

 

MOTIF
브랜드 맥락에서 추출한 4개의 키워드에서 '사각형의 형태'와 '실험적인 표현법을 추출했습니다. 사각형은 광장의 이미지와 투썸 플레이스의 엠블럼을, 실험적인 표현법은 한남동의 성격을 반영한 것인데요. 여기에서 '무엇을 실험적인 그래픽으로 표현할 수 있을까'를 고민하던 끝에, 광장의 에너지와, 커피를 압착시켜 빠른 속도로 추출하는 에스프레소의 물성이 'Vive'라는 공통적인 맥락을 갖는 것을 발견하였습니다. 그리고 이러한 맥락을 질감과 밀도, 리듬감이 있는 비주얼 랭귀지로 표현하였습니다.

이를 위해 압착된 원두, 밀집된 사람들을 상징하는 찍어낸 듯한 질감, 그리고 광장에서 보이는 물과 구름, 대리석 등을 캡처한 이미지를 활용했습니다. 더불어 광장에서 사람들이 목소리를 내는 느낌과 에스프레소의 물성이 가진 느낌을 타이포그래피에 활용하였습니다. 컬러 시스템은 투썸 플레이스 브랜드 컬러인 절제된 그레이와 빨간색으로 구성하였습니다.

 

APPLICATION
모든 어플리케이션은 밀도 있는 그래픽을 통해, 서로 다른 형태지만 같은 소리를 내는 방식으로 디자인되었습니다.

 

마치며

"브랜드의 맥락이 자연스럽게 스민 비주얼 랭귀지는 그 자체로 강력한 컨셉이 되며,
다양한 방식으로 하나의 맥락을 이야기하는 비주얼 랭귀지가 중요하다."

'아는 만큼 보인다.'라는 말이 있듯이 '알고 있는 것 사이의 관계를 발견하는 것'이 중요하다는 말이 인상적이었습니다. 아무리 많은 정보를 알고 있어도 정보 간의 연계성을 파악하고, '나만의 맥락'으로 만들어내지 않으면 무의미한 정보가 된다는 것인데요. 연사님도 TSP 737 프로젝트에서 광장과 에스프레소 사이의 보이지 않는 Vive라는 맥락을 발견한 후, 많은 아이데이션을 할 수 있었다고 합니다.

Marion은 The branding journal에서 브랜딩이란, '소비자의 마음에 브랜드를 만들고 형성함으로써 특정 제품 또는 서비스에 의미를 부여하는 프로세스'라고 표현합니다. 브랜드를 식별할 뿐만 아니라, 경험할 수 있도록 돕는 역할을 한다는 것인데요. 이번 세션을 통해 브랜드 맥락을 반영한 비주얼 랭귀지가 어떻게 브랜드의 아이덴티티를 확고히 하는지를 확인하며, 시각적인 결과물로의 확장뿐만 아니라 맥락 발견의 중요성 또한 상기해볼 수 있었습니다.

 

 


프로토파이 디자이너들의 팀 빌딩과 협업
<따로 또 같이, 함께 일하기> - 신해나, 임세희, 서예훈 님

작성자. 박나영

 

들어가며

프로토파이 디자인팀의 팀 빌딩 과정과 그 안에서의 협업 이야기를 소개하고자 합니다.

1. 함께하고 싶은 팀 만들기
2. 즐겁게 일할 수 있는 문화 만들기
3. 현 상황에 맞는 디자인 도구의 점진적 개선

 

1. 함께하고 싶은 팀 만들기

프로토파이는 스타트업의 특성상, 초기에는 신해나 님 혼자 디자인 업무를 담당했습니다. 이후 해나 님에게 부족한 부분을 채워줄 수 있는 디자인팀 동료가 필요했고, 개발 쪽 지식이 많은 예훈 님을 동료로 채용하게 되었습니다. 이후에 서비스가 성장하면서 트렌드 파악 등 리서치 업무도 필요성을 느껴, 그러한 분야에서 경력과 장점을 지닌 세희 님이 합류해 현재의 프로토파이 디자인팀이 구성되었습니다. 그 결과, 각자가 가지고 있지 않은 스킬을 보유한 동료들이 팀을 이뤄 부족한 부분을 상호보완하는 효율적인 조직을 갖출 수 있었습니다.

프로토 파이의 Party 업무 시스템

프로토파이는 '스튜디오, 플레이어, 클라우드'로 이루어진 3개의 파티(Party) 안에 각 디자이너가 1명씩 속해있는 구성으로, 다른 직군들 사이에서 디자이너가 독자적으로 일하는 시스템으로 운영되고 있습니다. 이러한 시스템은 각각의 파티 내에서 빠르고 효율적으로 의사소통을 진행할 수 있다는 장점이 있지만, 디자이너가 고립될 수 있다는 단점이 있습니다. 또한 구현해야 하는 프로덕트의 특징 때문에 직군 간의 크고 작은 견해 차이와 논쟁이 있을 수밖에 없고, 이로 인해 디자이너가 겪는 고충이 적지 않습니다. 이러한 단점을 보완, 개선하고자 몇 가지 제도를 시행하고 있습니다.

 

2. 즐겁게 일할 수 있는 문화 만들기

디자인 오피스 아워

먼저 각자의 고민 사항을 다른 스킬을 가진 팀원에게 빠르고 편하게 물어보는 문화를 만들어나갔습니다. 의문 사항은 언제나 편하게 묻고, 쉽게 도움을 요청하며, 서로가 같이 고민하는 부분을 공유하는 디자인 위키피디아와 같은 시스템과 분위기를 추구했습니다. 또한, 자체적으로 해결하기 어려운 문제들은 외부의 전문가를 초빙하여 도움을 받았습니다. 디자이너의 주도로 전문가를 선정·초청하지만, 타 직군도 함께 참여하여 다른 동료들의 고민을 이해하고자 노력하는 자리가 되었습니다.

'디자인 바이 위클리'라는 제도를 통해 2주에 한 번씩 서로의 작업과 앞으로의 계획을 공유하는 시간을 가지며, 각자의 디자인을 객관적으로 평가했습니다. 이러한 제도가 직무 자존감을 높이는 데 큰 역할을 하였습니다. 정기적으로는 '해피니스 타임'을 통해 2주간의 정신적, 육체적 환경적 상태에 대한 정보를 공유하여 정서적 연대감을 키워가고 있습니다.

디자인 스펙트럼: 하경제 님의 '좋은 팀을 만들기 위한 디자이너의 시선', 2017년

해피니스 타임은 지난 2017년에 진행된 디자인 스펙트럼의 '좋은 팀을 만들기 위한 디자이너의 시선' 세미나에서 '하경제'님의 이야기에서 영감을 받았습니다. 매일 3분간의 이야기를 하며, 일에 대한 공유와 우리의 상태에 관해 이야기를 함으로써 팀원에 대해 알고 이를 통해 동료들과 긴밀한 관계를 유지할 수 있다는 것인데요. 정서적인 교류를 통해 서로의 감정적인 부분을 챙기며 각자가 업무에 집중하고 즐겁게 일할 수 있는 문화를 만들고자 했습니다. 이러한 제도들을 통해 서로의 스킬을 공유하고, 정서적인 연대감을 이루는 동시에 긴밀한 싱크업을 통해 깊이 있는 피드백과 각 파티의 컨텍스트를 이해하고자 했습니다.

 

3. 현 상황에 맞는 디자인 도구의 점진적 개선

각 파티가 유기적으로 연결되려면, 긴밀한 싱크업을 도와주는 툴이 필요한데요. 이러한 작업을 도와주기 위해 퍼소나를 개발했습니다. 프로토파이의 퍼소나는 에밀리와 댄으로 나누어집니다. 쉽게 말해 인터렉션의 초심자인 에밀리와 상급자인 댄으로 구성된 개념입니다. 이러한 퍼소나 기준에 맞추어 프로토파이의 스펙이나 피처를 정하게 됩니다.

퍼소나 '에밀리와 댄'

 

또한 드롭박스의 UX 도큐먼트를 참조해 레이블의 보이스 톤을 맞추고, 기준을 설정합니다. 새로운 레이블이 필요할 경우, 정해놓은 규칙에 따라 드래프트를 만들고 2~3차의 리뷰를 통해 보이스 톤을 맞추는 과정을 거칩니다.

Dropbox UX Guideline

하지만 프로덕트가 고도화됨에 따라 퍼소나 역시 성장하기 시작했고, 유저층 역시 다양해져 에밀리와 댄 외에 제 3, 제 4의 퍼소나가 필요한 상황에 이르렀습니다. 그런 연유로 퍼소나 롤을 좀 더 세분화, 다각화하는 연구와 개발을 진행할 예정이며, 다국어 대응을 위한 UX Writing 문서 시스템을 재정비할 계획입니다. 또한, 현재 피그마에서 관리하고 있는 프로토파이의 디자인 시스템을 고도화하고, 문법과 용어의 도큐먼트를 정리해나 갈 계획입니다. 이러한 방법들을 통해 긴밀한 협업을 이루어 나가며, 프로세스들을 좀 더 고도화하여 빠르게 변화하는 스타트업의 상황에 대응해 나아갈 예정입니다.

1년을 마무리하며 디자인 팀에서 각자 평가하고 있는 항목

 

마치며

비록 3명의 디자이너가 한 팀을 이루는 작은 규모이지만 효율적인 협업과 공유를 위한 다양한 제도들이 마련되어 있는 점이 인상적이었고, 단순 업무 공유를 넘어 '해피니스 타임'등을 통한 정신적, 감정적 교류가 이뤄지는 것이 보기 좋았습니다. 타 직군뿐 아니라, 같은 디자인 직군의 사람들이 어떻게 효과적으로 협업할 수 있는지에 대한 여러 사례 및 이야기를 들을 수 있어 매우 의미 있는 시간이었습니다.

 

 


이미지 출처
cfc 홈페이지: https://www.contentformcontext.com/
cover: https://www.wanted.co.kr/events/spectrumcon2019
좋은 팀을 만들기 위한 디자이너의 시선:https://www.designspectrum.org/spectrumday-e6