2019 스펙트럼콘/SPECTRUM CON : Joy of Design (2) — CFC, 텐센트, 프로토파이, 토스

Yujin Kim
15 min readJul 20, 2019

--

자세한 컨퍼런스 정보 👉https://www.wanted.co.kr/events/spectrumcon2019

해당 내용은 노션에서도 편하게 보실 수 있습니다 👉 https://www.notion.so/SPECTRUM-CON-2019-Joy-of-Design-812f22b52e76428fae29c69f9fd1647d

스펙트럼콘 2부 — Overview

04. Lightning Talk | 이영진, 김지홍, 김성호 디자이너

05. 전채리 |CFC 디렉터

06. 김유라 | 텐센트, 전 PlusX 디자이너

07. 신해나, 임세희, 서예훈 | 프로토파이 디자이너

08. 강수영, 정희연 | 토스 플랫폼 디자이너

04. Lightning Talks | 이영진, 김지홍, 김성호 디자이너

더 나은 환경에서 디자인하기 위해 바뀌어야 할 것들

이영진ㅣ ZEPL 디자이너

김지홍ㅣ 디자인스펙트럼 파운더

김성호ㅣ 하이퍼커넥트 디자이너

이영진 ㅣ ZEPL 디자이너

스타트업 디자이너 챌린지 — 함께 빠르게 멀리 가는 법

  • 스타트업 1인 디자이너로 어떻게 문제를 직면하고 해결했는가
  • 건강한 커뮤니케이션, 효율적인 업무환경, 성취감을 느낄 수 있는 분위기

문제1. 커뮤니케이션

‘ 돌려 말하지 않고 본질에 집중하는 대화 ‘

  • 11명의 개발자와 함께 일함 : 폰트, 컬러, 여백에 대한 이야기는 안함
  • 객관적 근거를 기반에 둠 > 객관적 근거 기반 (디자이너가 놓칠수 있는 시스템적인 부분에 대해 관심을 갖고 알려줌)
  • 제품 방향성 고려 (나중에 코드를 고쳐야할 수도 있을 거 같아 > 어떻게 대비해야할까)

문제2 . 업무량

  • 미국의 컨퍼런스 일정을 맞춰서 1달의 스프린트를 가지고 작업을 함 → 어떻게하면 업무효율을 높일 수 있을까 → 집중할 수 있는 환경을 맞춤
  • 논의가 필요할 때 화상미팅을 적극적으로 활용 → 출퇴근시간은 아예 정해져 있지 않음
  • 업무 효율 → 사람마다 집중하는 시간이 달라 적극적으로 활용함 (미국 마케팅팀 : 9–11시 근무, 개발팀 온라인 : 1–5시 근무)
  • 스프린트 100으로 보았을 때, 리서치 20 — 기획설계 40 — 디자인25 — 기타15
  • 효율을 높이는 공간관리 → 소통이 필요할때는 공용공간에서 집중을 해야할때에는 개인의 공간에서

문제3. 번아웃

  • 사내 해커톤 진행→ 재미있는 일, 하고싶었던 일
  • 성취감을 통해 얻는 원동력 → 해커톤을 통해 적용했던 것들이 적용이 되었을 때 성취감
  • 어떻게 하면 더 개발비용을 줄일 수 있을까, 우리 제품은 어떤 방향으로 나아가야 할까가 중요
  • 지치고 포기하고 싶을 때 성취감을 주자!

김지홍 ㅣ 디자인 스펙트럼

배경 : 삼성전자UX 디자이너 6년차 > 디자인 스펙트럼 3년 시작

디자인 스펙트럼 계기

1. 디자인 필드 / 테크 디자인 필드 쪽에서 정보의 흐름이 없다.

  • 내 옆자리 사람이 어떤 문제를 고민하고, 무엇을 해결하고 싶은지 알고 싶은데 알 길이 없다.
  • 디자이너 전체한테 좋지 않은 영향을 끼칠 것이다 (공유 안하는 것 )
  • → 더 많은 이야기의 단초를 주는 것이 중요하고 더 나은 디자인, 스스로가 행복하게 디자인 할 수 있겠다고 생각

2. 멤버들이 공통적으로 처하는 상황

  • 제가 거기 나가도 될까요?, 제 글이 올라가도 괜찮을까요?
  • 자격에 대해 묻는 건가? > 공적인 자리에 대한 두려움
  • 자신이 이야기하는 것이 정답이 아닐까봐 걱정함
  • 상황에 맞는 답이라고 생각함 (정답은 없음)

김성호ㅣ 하이퍼커넥트 디자이너

시니어 디자이너로서 개인의 생각들을 이야기하고 싶어서 나옴

더 나은 환경에서 디자인하기 위해 바뀌어야할 것들 : 나

  1. 모바일 UI작업을 일러스트로 하는 회사 (S회사)
  • 회사의 사수(팀장)가 그래픽 디자이너 → 팀원모두가 일러스트레이션을 사용하여 디자인
  • 디자인 시스템에 대한 에이전시 문의 (이미 디자인은 모두 있음)

2. 일하는 방법을 바꾸니 시간 리소스를 줄인 회사 (H회사)

  • 2명의 디자이너가 160시간을 일함 → 1명의 디자이너가 8시간만에 할 수 있게 됨
  • 심볼화, 라이브러리화, 컴포넌트화, 파일 버전관리를 통해 디자이너 시간 리소스를 줄임
  • high-fidelity prototyping이 가능해져 모든 프로세스에 프로토타이핑을 하고 있고, 일부러 안하는 경우도 있음
  • (시간이 남으니까)아이디어 리서치, 가설 인사이트, 설계, 시각화, 검증을 시도 → 사용자에 대해 더 많이 이해할 수 있는 기회를 얻게 됨

→ 이 모든 환경의 효율적 변화업무 영역의 다양화를 가져오게됨.

→ 사용자를 좀 더 생각하고 좋은 프로덕트를 만들 수 있어짐

결론 : 디자인 리드들이 최신의 툴과 효율을 높일 수 있는 다양한 방법을 궁리하고 공부해야한다!

05. 전채리 ㅣ CFC 디렉터

-

CFC 포트폴리오

브랜드 맥락에서 기인하는 Visual Language

CONTENT FORM CONTEXT (C.F.C.) : 주어진 콘텐츠 안에서 맥락을 발견하여 이를 적절한 형태로 담아내는 것을 의미합니다.

01. 브랜딩

  • Being Recognized(인식되는 것) → 고객에게 인지되는 것 → Visual Language
  • 선과 표식으로 이루어진 시각적 구성 단위가 모여 형성된 의미 있는 형태와 구조, 신호
  • Mark, Color,Form, Typography 등으로 구성
  • 일관된 Visual Language를 보여주기 위해서는 컨셉이 필요

02. 맥락에서 기인하는

The Handsome Haus

작업물 : https://www.behance.net/gallery/82950507/The-Handsome-Haus

한섬다움 -대표성을 가지는 현재 부재한 한섬만의 상징

편집숍- 셀렉샵다움 다양한 브랜드를 담아내는 그릇의 역할

큐레이션- 한섬이 보유한 브랜드의 조화를 이루는, 취향과 라이프 스타일에 맞는 상품 큐레이션

  • 두개의 H가 만나는 미니멀한 상징을 다양한 곳에 활용
  • 브로셔, 매장, 쇼핑백, 사이니지, 브랜드 무비, 매장 로고, 메뉴판, 박스
  • 결과
  • 브랜드를 구성하는 다양한 요소가 유기적으로 결합되어 하나의 상징성있는 형태가 되는 것
  • 브랜드의 맥락이 자연스럽게 스민 비주얼 랭귀지가 그 자체로 강력한 영향을 줌

TSP737 Espresso Stand : 투썸 플레이스 한남동 컨셉 스토어

작업물 : https://www.behance.net/gallery/81266539/TSP737-Espresso-Stand

투썸플레이스 -투썸다움, 사각형 형태 엠블럼, 레드, 그레이한남동 -실험적, 힙플레이스광장 & 에스프레소 -광장와 에스프레소의 공통점

  • 에스프레소와 광장의 공통점
  • square+espresso → vibe(텍스쳐, 밀도감, 리듬감)
  • 광장: 굉장히 많은 사람이 모여있음 (음식 먹기, 스케이트 보드 타기, 이야기를 나눔, 분수, 풍경 → 에너지 넘침)
  • 에스프레소: 커피빈을 압축시켜서 빠르게 추출 → 바이브가 느껴지는 행위
  • 결과
  • 보이지 않던 맥락을 발견해내는 것 (공통점 추출)
  • 다양한 방식으로, 그러나 하나의 맥락을 이야기하는 비주얼 랭귀지

파라다이스 아트 스페이스

작업물 : https://www.behance.net/gallery/77683797/Paradise-Art-Space

아트스페이스- 화이트 큐브 , 갤러리 공간성

공간과의 조화- 네개의 아치 , 고전적이지만 현대적인

현대미술- 혁신적이고 새로운 , 장르의 경계가 허물어지는 , 해체되고 조명되는

  • 결과
  • 서로 다른 맥락을 엮어내는 과정에서 발생하는 오리지널리티
  • ‘다움’을 잃지 않는 것
  • 이 공간이 특징이 브랜딩에 스며들어야 함
  • 아는 만큼 보인다 : 알고 있는 것들 사이의 관계를 발견하는 것

03. From Context to Visual Language

  • 주어진 문제를 성실하게 검토하는 것
  • 그 안에서 맥락을 발견하는 것
  • 문제 해결을 위한 몇개의 맥락을 끝까지 파헤치는 것
  • 그리고 그것을 엮어 비주얼 랭귀지를 설계하는 것
  • 이 모든 과정에 있어 논리와 심미성의 조화를 잃지 않는 것

06. 김유라 ㅣ 텐센트, 전 PlusX 디자이너

Stateless Design Experience : 국경없는 디자인

한국 브랜드 디자이너, 중국에서 디자인하기

“플러스엑스 재직 당시 중국의 오디션 프로그램인 명일지자 프로젝트(텐센트)를 2017년에 진행하면서 중국을 처음가보고, 처음 중국 IT 대기업과 함께 일해보았습니다. 그 이후 텐선트에서 오퍼를 받았습니다. 아는 분도 없었고, 커뮤니케이션 문제로 고민했지만 용기내여 이직하게 되었습니다.”

1. 성장 (China)

  • 인구 추정 14억, 어딜 가도 비행기를 타야할 만큼 대륙
  • 인구와 영토를 기반으로 빠르게 성장
  • GDP뿐만 아니라 IT회사도 빠르게 성장 → 2019 글로벌 시가총액 (7,8위 — 알리바바, 텐센트)

2. 도약 (IT Industry)

  • QR의 천국. 모바일이 매우 발달 되어 있어 현금을 사용해본 적이 없음.
  • IT의 회사의 발전 현황 (텐센트)
  • 시가총액 500조 — 2019 텐센트 글로벌 시가총액 500억
  • 한해 매출 52조 — 2018 매출액 52조 (서울시 한 해 예산 32조)
  • 유저수 11억 — 위챗의 MAU (카카오 MAU 5천만)
  • 설립 1998년 — 텐센트 창립년도

3. 제약과 자유로움 (Design)

  • 문화가 달라 디자인적으로 제약점도 다르고 자유로움도 다름
  • 정말 다른 서비스인데, 보여주는 Look 과 배치가 비슷

1. 구조적 제약

  • 유저수가 너무 많고 연령대도 다양하고 교육수준도 달라 처음의 구조를 바꾸는데 굉장히 큰 제약이 있음
  • 텐센트 뮤직에서 만드는 QQ뮤직은 젊은층에 제한되어 있기 때문에 조금 더 과감한 시도중

2. 컬러의 제약

  • 선호하는 컬러에 대한 제약 : 빨간색을 매우 선호, 명/채도가 뚜렷한 컬러를 선호
  • 컬러를 자유롭게 사용 → 선택의 자유가 있음
  • 회의를 자유롭게 캐주얼하게 모여서 회의를 함 → 기업문화가 자유롭게 형성되어 있음
  • 하나의 전문가로 존중받으면서 일할 수 있는 분위기

4. 시작, 가능성 (Brand Design)

  • 중국의 브랜드디자인은 시작 단계로 발전의 여지가 있음
  • 알리바바 캐릭터 QQ. 중국에선 캐릭터가 굉장히 중요
  • 섬세한 브랜딩에 익숙하지 않아서 컬러, 캐릭터 같은 식별성이 강한 부분에 있어서 브랜딩이 이뤄지고 있음
  • 텐센트는 팬톤과 컬러 협업, 모노타입과 협업하여 서체도 제작.
  • 시작단계이지만 많은 관심이 있기 때문에 발전할 가능성이 있다고 생각함.

5. 하루하루 성장하는 디자이너

  • 디자이너로서 새로운 환경과 문화를 접하면서 하루하루 더 성장하는 디자이너가 되어가고 있다.
  • 하루하루 달라지는 자신의 모습을 보여주고 싶어 전달하게 됨

07. 신해나, 임세희, 서예훈 ㅣ 프로토파이 디자이너

프로토파이 디자이너들의 팀빌딩과 협업

: 따로 또 같이, 함께 디자인하기

저는 저에게 없는 무기를 가진 사람과 함께 일하고 있습니다. 그리고 나의 부족함에 있어 도움을 청할 때 위축되지 않는 문화를 갖고 있어 즐겁게 일을 할 수 있습니다.

신해나님-툴 / 서예훈님-모바일 / 임세희님-협업툴 담당

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

내게 없는 무기를 가진 사람과 함께 일하기

  • 서로의 강점과 약점을 정확하게 파악하고 팀빌딩을 함
  • 각 파티 내에 디자인 1명-개발자 다수
  • 함께 프로덕트를 만드는 사람과의 의사소통을 촉진하기 위한 구성
  • 디자이너로서 유저를 대변해야하는 날이 많아 힘이 들었다는 단점
  • 특정 분야의 목소리에 무게를 두지 않고 팀끼리의 의사소통을 통해 의사결정을 빠르게 하려고 함 하지만 각 팀내 디자이너가 한명이다보니 자칫잘못하면 중심을 잃을 수 있는 단점이 있긴 함

-

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

스킬셋 공유 / 정서적 연대 / 긴밀한 싱크업

  • 각자 Party에서 작업을하다 서로 질문을 통해 문제를 해결하려고 함
  • 고민사항이 있을 시 외부에서 도움을 얻으려하고 모든 팀과 함께 나누며 누가 무엇을 고민하고 있는지를 나눔
  • 다른 공간에 있는 디자이너에게 질문을 하는 부담감을 줄이기위해 오피스 아워를 진행함
  • 디자인 바이 위클리 — 2주에 한번 씩 모여 회의 (앞으로 어떤 작업을 진행할 지까지 이야기)
  • 정기적으로 해피니스 타임을 갖음

일하는 맛을 더해주는 디자인 도구들

-

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

  • 처음 정의 내린 퍼소나 → 서비스가 구체화되면서 점점 더 다양한 퍼소나가 등장
  • 해피니스 타임 에서 ‘일의 속도가 난다’항목 제거
  • 속도에 집중하기보다 디자인퀄리티에 집중하는 방향

08. 강수영, 정희연 ㅣ 토스 플랫폼 디자이너

4000시간을 절약해준 디자인 시스템

  • Toss Design System (TDS)

“ 보수적으로 산정하더라도 디자인 시스템을 구축한 후 토스 메이커들이 하루에 1시간을 줄일 수 있었습니다. 토스 메이커는 56명이고, 이를 계산해보면 1년에 1855일을 절약할 수 있었던 셈입니다. ”

1. 토스 디자인 시스템 (Toss Design System, TDS)

  • 최근 핫한 키워드인 ‘디자인 시스템’, 많은 회사들에서 적용하고자 하고 있음.
  • 토스 앱의 70%의 디자인시스템을 적용하는 것에 1년의 시간이 들었다.
디자인 시스템 테스트 — ‘?’ 에 들어갈 숫자를 모두 곱해본다.
  • 나는 같은버튼을 N곳에 쓰고 있다
  • 나의 회사나 팀에는 디자이너가 N명이다
  • 내가 만드는 제품의 페이지는 N개이다

→ N x N x N = 0 이상인 회사는 디자인 시스템을 만들어야한다!

  • 토스의 모든 버튼을 정의해놓은 화면 (TDS)
스케치 뿐만아니라 코드로도 구현 가능한 것을 설명하는 화면
  • Sketch의 시스템과 다르게 디자인을 넘어 개발까지 적용되어 있는 디자인 시스템 (스케치, 안드로이드, X코드, 리액트까지)

2. 제품 규모에 따른 관리비용

  • 디자인 시스템은 제품의 규모가 커질수록 시간을 줄여주고, 그 시간을 혁신을 할 수 있는데 집중할 수 있게 해줌
  • 그러나 제품의 규모가 작을때부터 디자인 시스템을 적용하려고 한다면 시간도 들고 인력도 더 필요해서 쉬운 결정은 아님
  • 하지만 크게 본다면 어느 순간 제품의 규모가 점점 커지면 관리비용이 더 들어가게 되는 날이 오게됨

-

3. 디자인 시스템 라이브 데모

Sketch에서 Symbol을 사용하여 4분안에 디자인, Symbol을 Ctrl + C,V로 복붙하며 빠르게 디자인 가능

-팀쿡 등장

  • 라이브 데모중 Facetime이 걸려오며 팀쿡(토스 박종대님)이 디자인을 빨리 하라며 바로 주지 않으면 앱스토어에서 토스를 내려버리겠다며 협박한다.
  • 7월 카드값 페이지를 디자인하라며 요청을 한다. (메소드 연기…👍)
  • 그러더니 갑자기 카드가 너무 Old~하다며 요즘 사람들이 좋아하는 고양이로 카드 이미지를 바꿔달라고 한다. (갑분냥 🐈 ㅋㅋㅋ)
  • 라이브 데모로 디자인 시스템의 효율성도 강조하고, 토스팀의 문화까지 보여주는 신선하고 재밌는 발표 방식이었다.

-

4. 마무리 하며

  • ‘디자인 시스템을 만들면 디자이너가 일자리를 뺏기는거 아닌가?’ 라고 생각할 수 있으나, 디자인 시스템은 보조수단으로 일자리를 뺏지는 않을 것.
  • TDS는 Open Source로 공개할 생각 → Google, Airbnb, Spotify도 아닌, TDS를 전세계사람들이 떠올리는 것이 목표
  • TDS Early Access는 career.toss.im 에서 확인가능

여기까지 ‘SPECTRUM CON 2019 : Joy of Design (1) — 라인, 마켓컬리, 쿠팡, 커리어 코칭’ 이었습니다.

1부 👉 1부 보러가기

혹시나 틀린 정보가 있거나, 추가적인 정보가 있다면 댓글 또는 아래의 메일로 알려주세요 :)

박수는 저에게 큰 힘이 됩니다! 2번, 3번 많이 많이 쳐주세요!! X)

--

--

Yujin Kim

A designer who democratizes technology through design.