[ 토스 디자인 컨퍼런스 ] Simplicity 21: 3일차 내용 정리

도입

이번 2021년 8월 30일 월요일부터 9월 2일 목요일까지, 4일 동안 토스에서 Simplicity 21이라는 주제로 디자인 컨퍼런스를 진행한다.

아래는 해당 컨퍼런스에서 공개한 영상 내용을 정리하고 관련된 개인 의견을 작성한 글로, 오늘은 3일차 영상 관련 글이다.

 

1-2일차 영상 관련 글의 경우 아래 URL을 클릭해서 확인해볼 수 있다.

2021.08.30 - [강연 및 컨퍼런스/디자인] - [ 토스 디자인 컨퍼런스 ] Simplicity 21: 1일차 내용 정리

[ 토스 디자인 컨퍼런스 ] Simplicity 21: 1일차 내용 정리

 

2021.08.31 - [강연 및 컨퍼런스/디자인] - [ 토스 디자인 컨퍼런스 ] Simplicity 21: 2일차 내용 정리

[ 토스 디자인 컨퍼런스 ] Simplicity 21: 2일차 내용 정리

 

<새로운 경험의 공간, 홈페이지>

내용 정리

홈페이지를 처음 공개하는 건 마치 팝업스토어를 오픈하는 것과 같다. 명확한 컨셉으로 강렬한 경험을 선사해야 하기 때문이다.

 

토스 NEXT 채용 관련 홈페이지를 제작할 당시 블라인드 채용을 진행할 예정이었다. 그런데 이러한 채용 과정은 이미 많은 기업에서 진행 중이었고, 구직자들은 블라인드 채용이 사실은 허울만 존재하고 실제로 학력, 경력 등을 보는 것은 아닌지 의심이 많은 상황이었다. 그래서 이를 확실하게 보여줄 수 있는 방법을 고민하다 '경력보다 실력'이라는 컨셉 겸 키 카피(Key Copy)가 나왔다.

 

경험은 첫 인상에서 시작된다. 그래서 역동적인 이미지로 강한 인상을 주려고 노력했다. 토스에서는 공(Ball) 메타포를 자주 사용하는데, 공이 굴러가면서 길을 만드는 형태로 코딩을 표현하고 나아가 새로운 길을 스스로 만들어나가는 역동적인 모습도 표현했다. 다크 모드는 이 이벤트를 강조하기 위한 추가 장치였다.

 

더욱이 세세한 메시지와 흐름도 잡아나갔다. 대표적으로는 '실력 중심 전형'을 강조하기 위해 <간편 지원하기>라는 버튼을 <코딩테스트 신청하기>로 변경했다.

 

구직자들 입장에서는 토스에 잘하는 사람들이 많기 때문에 입사 이후 적응을 잘 하지 못하는 등 합격 이후의 걱정이 있을 수 있기 때문에 토스피드라는 인터뷰를 제작하고 연차에 상관 없이 실력 있고 동료의 신뢰만 얻으면 업무, 역할을 얼마든지 확장할 수 있다는 내용을 곧곧에서 확인할 수 있게 하였다.

 

해당 채용 이벤트 이후 조금 더 장기적인 경험을 선사하기 위해 채용 페이지 자체를 개선했다. 채용 페이지는 회사의 일하는 방식을 보여주는 곳이기에, '몰입'이라는 키워드를 잡고 이야기를 만들기로 했다. 그래서 처음에 관심을 확 끌기 위해서 "당신에게도 깊게 몰입했던 무언가가 있나요?"라는 질문을 던졌다. 

 

문구 뿐만 아니라 디자인에서도 이 몰입의 경험이 이어질 수 있게 스크롤을 통해 화면을 내릴 수록 더 어두워지게, 그리고 중간에 인터뷰를 넣어 사실감을 더했다.

 

채용 관련 홈페이지 뿐만 아니라 사용자가 토스에게 하고 싶은 말을 할 수 있는 공간도 기획하고 제작하였다. 그래서 '금융이 불편한 순간'이라는 프로젝트를 진행했는데, 이 과정에서 처음에 창구를 만들었을 때 참여율이 저조했다. 고민 끝에 아무나 와서 아무 말이나 할 수 있는 열린 공간을 만들 필요성을 느꼈고, 그래서 선택한 게 메모지 컨셉의 게시판이었다.

 

콘텐츠에서도 사람들과의 인터랙션을 조금 더 강조하고 싶었다. 그래서 몇 가지 질문에 미리 답했다. 밖에서 사람들이 이 프로젝트를 봤을 때 왜 토스가 금융이 불편한 순간을 수집하는 지 의문이 들 수 있다. 그래서 캠페인 기획 의도에 '초심'이라는 키 메시지(Key Message)를 담았다.

 

토스의 첫 시작 <간편 송금> 기능부터 지금까지 초심을 지키고 있는 사례를 모아보았다. CS(Customer Service) 팀에 가서 고객 의견이 어떻게 서비스에 반영됐는지 구체적인 사례를 수집하고, 오랫동안 진행됐던 사용자 인터뷰도 찾아보았다. 이를 통해-예를 들어-토스 초기에 이모티콘을 넣고 싶다던 문의 사항이 적용된 것처럼 여러 '초심'을 지키고 있는 사항들을 찾을 수 있었고, 말로만 고객들의 불편을 고려하는 게 아닌 실제로 행동(Action)으로 이를 개선하고 있다는 걸 보여줄 수 있게 되었다.

 

끝으로 사용자들이 궁금해서 한 번 더 들르게 하였다. 본인이 올린 의견에 얼마나 많은 사람들이 공감하였는지, 그리고 해당 불편함이 어떻게 빠르게 서비스에 반영되었는지 사례를 보여주었다.

 

개인적 의견

아래 대표적인 금융 기업 신한은행과 토스의 채용 페이지를 한 번 비교해보자.

 

신한은행과 토스의 채용 페이지

 

토스를 보는 순간 "토스다움"이라는 용어가 떠오르고, 신한은행의 경우 다른 기존 중견-대기업들과의 이미지 차이점을 떠올리기 힘들다. 단순한 채용 페이지의 첫 인상(First Impression)인데 기업에 대한 이미지 자체가 확연히 다르게 받아 들여지는 것이다.

 

아주 사소하고 단순한 단어, 문장 구조, 이미지 사용이 사용자 입장에서는 하나씩 쌓여 결국에는 엄청나게 큰 인터랙션을 일으킨다. 그리고 기업이 제공하는 가치(Value)라는 건 이러한 인터랙션이 무의식에 쌓여 결론적으로 나이키(Nike)하면 "Just Do It."을 떠올리게 만드는 것처럼 하나의 성공적인 브랜드로 자리잡는다.

 

<프로덕트 오너>라는 책의 서두에서 우버(Uber)가 차량의 색깔과 애플리케이션 아이콘의 색깔을 동일하게 하여 사용자가 승차해야 할 차량을 쉽게 인지하고 제품이 아닌 기업 자체에 큰 감동을 받게 된 사례는 작은 인터랙션이 가져오는 커다란 영향에 대한 대표적인 예다.

 

아래는 영상에서 언급된 프로젝트 <금융이 불편한 순간>이다. 한 번 접속해서 확인해보면 좋을 것 같다. 메모지 형태의 아이디어를 통해 열린 공간 느낌을 준 게 무척이나 인상 깊다. 금융 기업이 제시해야 할 신뢰성을 토스는 이러한 방식으로, "토스다운" 재치와 함께 제공하고 있다. 사용자는 이러한 경험을 통해 다시 한 번 "토스다움"을 자각하는 것이다.

 

토스: 금융이 불편한 순간

금융이 불편한 순간

 

 

 

<인터랙션, 본능을 움직이다>

내용 정리

단순히 이미지와 텍스트를 통한 설명이 아닌 스크롤 액션이 발생할 때 텍스트가 보이고, 영상이 시작되는 등의 인터랙션으로 흥미로움을 유발했다. 그리고 이를 위해 프레이머(Framer) 라이브러리를 활용했다.

 

토스에서는 효율적인 개발을 위해 라이브러리 관리를 중요하게 생각하는데, 라이브러리를 통해 빠른 인터랙션 시도가 가능해지기 때문이다. 예를 들어 단순히 숫자가 증가하고 감소하는 퍼블릭 라이브러리를 사용하던 예전과 달리 이제는 다양한 옵션을 고려하여 라이브러리를 직접 만들기 시작했다. 디테일에 집작한 것이다.

 

이전의 토스는 점과 점 사이의 이동이었는데 인터랙션은 이것을 연속적이고 자동화되게 바꿨다. 그리고 이는 나아가, 동적인 인터페이스가 결국 금융의 문제까지 해결하기에 이른다. 바로 보험 개발 사례다.

 

보험 계약 과정에 있어 스크립트를 사용자가 모두 읽게 만들어야 했는데, 이를 위해 적합한 UI는 물론 TTS(Text To Spech) 및 속도 제어와 음소거 기능을 접목해서 사용자에게 스크립트를 제공했다. 단순히 스크립트를 통해서는 사용자의 계약에 대한 인지를 판단하기 어렵다는 피드백을 받은 뒤로는 <밀어서 동의하기>라는 제스처를 추가 및 제안하였고 결과적으로는 금융규제 샌드박스 승인을 받을 수 있었다.

 

인터랙션의 범위를 생각할 때면 제품, 규제, 사용자에 따라서 너무나도 다양한 인터랙션이 존재했다. 그래서 개인적인 프로젝트로 [ 인터랙션 101 ]이라는, 마이크로한 아이콘 인터랙션부터 신규 제품을 위한 선제적 프로토타입까지의 작업물들을 GIF 형식으로 모두 모아두는 작업을 진행 중이다. 이를 통해 통찰력을 얻을 수 있을 것이라 생각했기 때문이다.

 

개인적 의견

라이브러리를 직접 만들어 통일하는 게 무척이나 인상 깊었다. 사실 개발 작업을 하다보면 다른 사람들이 만든 퍼블릭한 라이브러리, 다시 말해 오픈 소스를 그대로 사용하는 경우가 많다. 해당 코드 등을 커스텀하는 것은 개발 일정 등을 고려 했을 때 불필요하게 느낄 수 있다. 외부적인 통일성은 물론 모두가 중요하게 공감할 수 있지만 내부적인 통일성, 다시 말해 라이브러리를 아예 직접 만들어 해당 서비스만의 고유하고 통일화된 코드 및 기능을 만들어간다는 게 사실은 그리 중요하지 않은 작업으로 치부될 수 있기 때문이다.

 

좋은 서비스를 위한 과정에는 보여지는 부분 뿐만 아니라 내부적인 노력도 많이 필요하다는 걸 다시금 깨닫게 되었다. 간단한 라이브러리 정도는 한 번 커스텀해보는 것도 굉장히 좋은 도전이 될 것 같다.

 

<모두를 위한 단 하나의 서체>

내용 정리

토스 내에서 같은 TDS(Toss Design System)를 써도 운영체제마다 폰트가 항상 달랐다. 그래서 서체를 직접 만들기로 했다.

 

그런데 서체를 만드는 데 시간이 오래 걸리기 때문에, 빠르게 만들고 점차 개선해가는 효율적인 방향으로 진행하는 게 좋을 것이라 판단하여 기존에 있던 서체 중 국문이 가독성 좋은 서체를 선택하여 영어, 숫자, 기호만 새로 제자해서 합쳤고 현재까지 주기적으로 개선사항을 모아 업데이트 중에 있다.

 

서체에서의 핵심은 모바일에서의 균형이었다. 기존 서체들은 한글에 비해 숫자, 영문, 기호가 조금 더 두껍고 작다. 한글은 획이 많기 때문이다. 이는 텍스트의 호흡이 긴 지면에서는 별 문제가 되지 않지만 호흡이 짧은 모바일에서는 어색하게 느껴졌고 이를 해결하기 위해 균일한 모든 걸 크기로 만들었다.

 

크기를 맞춘 이후에는 위치와 여백에 집중했다. 기호와 글자 사이가 너무 좁거나 미묘한 어긋남이 존재했는데 단어가 나열되는 환경에서는 이러한 작은 요소들도 크게 느껴지기 마련이었다. 그래서 여백과 위치, 두께를 해결하기 위해 집요하게 팠고 모든 기호들이 같은 두께처럼 느껴지고, 정확한 위치에 올 수 있게 만들고 있는 중이다.

 

또 맥락(Context)도 중요하다. 금융이라는 맥락에서는 보통 숫자와 기호를 많이 사용한다. 일반적인 서체에서는 특수문자로, 아이콘이 아닌 글자 중 하나로 기호를 사용하는데 이를 UI의 일부로 만들었다. 자주 사용하는 기호들을 UI에 맞게 다시 그렸고, 글자는 더이상 글자가 아닌 UI의 일부분이 되었다. 숫자 또한 큰 수를 비교하거나 실시간 변동 수치를 확인해야 하는 경우가 존재했기 때문에 맥락에 따라서 다양하게 보일 수 있게 노력했다.

 

서체는 개성이 무척 강하다. 그래서 인상보다는 내용에 집중하게 할 수 있게 중립적인 서체를 선택했다. 또한 작은 화면 내에서 글자가 뭉치는 걸 막기 위해 노력했다. 이 과정에서 숫자가 특히나 중요했는데, 예를 들어 숫자 4는 위로 좁아지는 형태이기 때문에 다른 숫자보다 작아보이는 경우가 많다. 따라서 속공간과 무게가 맞아보이게 조절하였으며, 잉크트랩 또한 안이 아닌 밖으로 파서 시원한 느낌을 주었다.

 

추가적으로 쉼표의 경우 아주 작은 기호인에 큰 수를 구분하는 용도로 자주 사용되기 때문에 더 길고 크게 만들면서 여백도 많이 확보하게 바꾸었다. 

 

이러한 과정들을 통해 제작된 프로덕트 산스(Product Sans)를 결론적으로 모두가 다 잘 쓰고 있다. 하지만 편하게 쓰는 것은 또다른 문제다. 그래서 특수문자를 더 쉽게 사용할 수 있도록 프레이머에 마크다운 룰을 만들어도 텍스만으로 특수문자를 불러올 수 있게 만들었다.

 

 

개인적 의견

실제로 긴 호흡의 텍스트를 읽을 때와 짧은 호흡의 텍스틀 읽을 때, 단순히 국문으로만 이뤄진 글을 읽을 때와 숫자, 영문, 기호로 함께 작성된 글을 읽을 때 폰트의 미묘한 어색함이 극명하게 차이나는 것 같다. 모바일 애플리케이션 같은 경우 이탈률을 줄이기 위해 빠른 호흡과 시각적인 기호를 많이 사용하게 되는데 폰트까지 고려해가며, 이를 아예 새로 만들어가며 서비스를 만들어가고 있다는 사실이 충격적이었다.

 

보이지 않는, 잘 드러나지 않는 곳에서의 노력이 지금의 "토스다움"을 만든 것이라 생각한다.

 

 

728x90

 

반응형

 

<그래픽, 보이는 아름다움 그 너머>

내용 정리

보통 그래픽 디자인을 떠올렸을 때 심미성만 추구하는 걸로 오해한다. 하지만 규칙과 제약 내에서 다양한 시도를 통해, 다양한 문제를 해결하려 노력한다.

 

아트보드에는 레이아웃, 텍스트, 이미지가 함께 들어 있고 이를 컴포넌트(Component)라고 한다. 그래픽을 만들 때 해당 컴포넌트를 무시하고 만들 수가 없다. 그래서 이질감 없이 그래픽을 만들기 위해 반사광을 활용했다. 예를 들어 CTA(Call To Action) 버튼이 일관된 디자인으로 화면 맨 밑에 존재하는데 그래픽의 아래쪽에 반사광으로 비춰지게 만들어 컴포넌트와 그래픽이 마치 한 공간 안에 있는 것처럼 보이게 하였다.

 

다음으로 토스의 그래픽 기조가 3D였기 때문에 평면이 아닌 입체적 관점에서 문제를 해결해야 한다. 이때 모바일 환경에서의 다크 모드 같은 경우 3D 애니메이션은 배경을 투명하게 할 수 없어서 매번 두 개씩 제작을 해야 했고 렌더링(Rendering) 과정과 시간을 고려하면 너무나도 비효율적인 작업이었다.

 

문제를 해결하기 위해 배경을 투명하게 할 수 있는 방법을 찾아야 했고, 이 과정에서 APNG 포맷을 사용하게 되었다. 바로 적용하는데 어려움이 있을 수 있었는데 개발자들의 도움으로 쉽고 빠르게 도입할 수 있었다. 여러 이슈를 개발자들이 해결해주었고, 역재생 같은 커스텀 제안도 해주었기 때문이다.

 

서비스를 소개하는 인트로 화면은 보통 한 서비스에 4-5개의 그래픽이 사용된다. 서비스 런칭 때마다 그러면 매번 5개 정도의 그래픽을 만들어야 한다는 이야기인데 너무 비효율적으로 느껴져서 하나의 타임라인으로 이어 클립보드처럼 만들었다. 원 페이지 인트로 애니메이션을 시도한 것이다. 위치, 스캔, 확인이라는 중요한 세 가지 포인트를 중점으로 일부 요소에만 차이점을 둔 3개의 영상을 제작한 다음 이를 같은 위치에 두고 스크롤에 따라 명도(Opacity)가 변화되도록 하였다.

 

그래픽도 결국 제품에 잘 쓰여야 한다. 그래서 토스는 그래픽 자산 관리 시스템을 운영한다. 누구나 자유롭게 사용 가능한데, 이 리소스 센터의 핵심은 제품의 그래픽을 업데이트하려면 리소스 센터의 그래픽 자체를 업데이트해야 한다는 것이다. 따라서 매 작업을 따로 외주 업체에 맡기는 것이 아닌 인하우스(In-house) 작업으로 진행되고 결과적으로 더 "토스다움"을 보여줄 수 있게 된다.

 

개인적 의견

그래픽 작업에 관해서는 단순히 렌더링 시간이 무지막지하게 오래 소요된다는 것만 알고 자세히 어떤 방식으로 진행되는 지 잘 몰랐다. 특히 MOV 포맷은 투명한 배경이 지원이 되지 않아 다크 모드 기능에 따라서 작업량이 배로 늘어난다는 사실이 조금 충격적이었다.

 

놀라웠던 건 이를 해결하기 위해 APNG 포맷을 도입했을 때 개발자들이 이슈를 해결하기 위해 노력하여 빠르게 해당 포맷을 적용할 수 있었다는 부분이었다. 이 과정에서 어떤 방식으로 협업을 진행했는지, 이슈가 발생했을 때 이를 해결하기 위한 과정에 대한 언급이 영상에서 조금 더 있었으면 좋았을 것 같다. 개발자가 역으로 제안한 커스텀 등도 어떤 방식을 거쳐 적용되었는지, 해당 개발자는 어쩌다가 그런 제안을 하게 되었는지도 궁금하다.

 

영상에서 언급 된 반사광이나 특히 리소스 센터는 무척 좋은 아이디어라 생각된다. 이를 통해 인하우스 작업을 진행하고 조금 더 "토스다운" 서비스를 사용자에게 제공할 수 있기 때문이다. 더욱이 디자이너 입장에서도 본인이 구현하고 싶은 아이디어를 마음껏 도전해볼 수 있으면서도, 이를 조금 현실적인 방지턱으로 제품의 그래픽 업데이트가 리소스 센터의 그래픽 업데이트로 이어지게 만든 것이 매우 창의적이고 좋았다. 하지만 토스 정도의 규모와 자본이 있기에 가능한 문화이자 기능이라 생각한다. 초기 스타트업의 경우 외주 업체를 통해서라도 빠르게 서비스를 론칭하는 게 우선인 경우가 많기 때문이다. 관련한 부분들은 어쩌면 어느 정도 안정화된 곳에서 더 나은 서비스 및 사용자 경험을 제공하기 위해 시도해볼 자기 파괴적 혁신이라 생각된다.

 

<사용자를 넘어 팬으로>

내용 정리

토스의 브랜드 플랫폼 팀은 토스의 팬을 만들기 위해 노력한다. 처음 해당 팀을 꾸렸을 때, 토스를 아는 사람은 많아도 선호도는 많지 않았다. 그래서 팬을 만들기로 결심한다.

 

가수와 팬의 첫 만남, 가수의 첫 데뷔곡이 중요한 것처럼 첫 브랜드 활동이 무척 중요하다. 그래서 토스의 어떤 모습을 보여야 할지 고민했고, 솔직하게 스스로를 드러내고 가치관을 보여주면 이에 공감하는 사람들이 팬이 된다는 근본적인 가치를 따르기로 결정했고 토스의 가치관과 비전을 통해 명확하게 누구인지 보여줬다.

 

이 과정에서 나온 게 문샷(Moonshot) 캠페인이다. 토스가 지금까지 한 것들을 키워드로 뽑아내고 그룹핑하면서 점점 좁혀나가니 '대단함'과 '집요함'이라는 키워드가 나왔다. 그리고 이를 광고에 담기로 했다. 이 과정에서, 광고를 아이데이션(Ideation)하는 과정에 있어 지키기로 한 세 가지 원칙이 있다.

 

1. Big Impact
2. No Cliche
3. Deep Emotion

 

그리고 여기에 선언적인 카피를 추가하여 여의도 옥외 광고를 시도했다. 결과는 나쁘지 않았다.

 

다음으로는 금융을 바꾸겠다는 토스의 포부에 대해 어떻게 바꿀 것인지 궁금해하는 소비자들에게 답을 제시하며, 동시에 그들을 팬으로 만들 수 있는 방법을 궁리했다. 그래서 기존 금융 생활을 더 좋게 바꾼 토스의 서비스를 소재로 브랜드 광고를 시도했고, 이때 서비스를 경험한 사용자들이 실제로 이전보다 더 좋아졌다는 것을 체감하고 나아가 팬이 될 수 있을 정도의 파워풀한 소재만을 선택했다. 그 결과 소비자의 의견을 추적하여 대중적인 소재를 찾게 되었고, 바이럴이 많이 되었으며 브랜드 선호도도 함께 상승하였다.

 

이 성공의 비결에는 세 가지 이유가 있다고 생각한다.

 

1. 대중에게 워킹하는 좋은 서비스
2. 차별성 있는 광고 크리에이티브
3. 시의성 있는 빠른 실행 속도

 

그리고 이를 가능하게 하는 것은 DRI(Directly Responsible Individual)라는 최종 결정권이 철저하게 담당자에게 있는 토스의 문화 덕분이다. 이를 통해 빠른 속도로 실행에 옮길 수 있었다.

 

 

개인적 의견

영상을 보고 가장 먼저 떠오른 건 스티브 잡스의 연설 "다르게 생각하라(Think Different)"였다. 아래는 해당 연설 영상이다.

 

 

 

연설의 핵심은 간단하다. 나이키(Nike)를 떠올렸을 때 단순히 운동화보다 "Just Do It."이라는 슬로건이 떠오르는 것처럼 가치(Value)를 판매해야 한다는 것이다. 애플(Apple)만 하더라도 그들의 제품, 광고, 웹 페이지 등을 보면 "애플다움" 또는 "역시 애플"이라는 단어가 자연스레 같이 떠오른다.

 

토스도 이처럼 브랜드를 판매하는 데 노력하고 있다고 생각된다. 단순히 금융 서비스라는 모델로 사용자에게 인식되기 보다는 영상에서도 자주 언급되는 "토스다움"이 점점 사용자들에게 부각되고 있다고 생각된다.

 

무엇보다 놀라웠던 건 바로 역할 중심 조직(Role Driven Organization)을 지향하기 위해 필요한 원칙 중 하나인 책임의 소재였다. 담당자에게 최종 결정권을 부여한다는 게 사실 조직의 규모가 점차 커지고 이미 안정적인 서비스가 존재하는 기업에서는 쉽지 않은 일이라 생각한다. 어떠한 방식으로 의사 결정이 진행되는지 조금 더 구체적인 과정이 궁금해졌다.

 

---

Simplicity 21

https://toss.im/simplicity-21

토스 디자인 컨퍼런스 Simplicity