brand-identity

토스의 새로운 얼굴 만들기 (새 탭에서 열림)

토스는 서비스의 인상과 신뢰감을 효과적으로 전달하기 위해 기존의 인물 그래픽을 고도화했습니다. 기존의 귀엽고 어린 이미지를 탈피하여 똑똑하고 믿음직한 '토스다운' 인상을 구축하고, 글로벌 확장에 발맞춰 다인종·다문화 환경을 포용할 수 있는 보편적인 디자인 체계를 마련하는 데 집중했습니다. 이를 통해 어떤 화면에서도 완성도를 유지하며 사용자에게 친근하면서도 전문적인 가치를 전달하는 새로운 페르소나를 완성했습니다. **토스다운 신뢰감을 주는 인물 비율 조정** - 기존 그래픽은 얼굴의 세로 비율이 짧아 다소 어려 보이고 신뢰감이 부족하다는 피드백이 있었습니다. - 얼굴 형태를 크게 바꾸어 이질감을 주는 대신, 눈·코·입의 배치와 표현을 미세하게 조정하여 지적이고 성숙한 인상의 균형점을 찾았습니다. - 도형을 단순히 이어 붙인 구조에서 탈피하여 목과 어깨의 곡선을 다듬고 입체감을 더해 조형적 완성도를 높였습니다. - 단정하고 전문적인 분위기를 자아낼 수 있도록 과한 디테일이 배제된 짧은 목폴라 형태의 의상을 기본 착장으로 설정했습니다. **성별과 인종의 경계를 허무는 중립적 디자인** - 특정 성별로 치우치지 않는 중성적인 헤어 스타일을 개발하여 성별 중립적인 인상을 구현했습니다. - 헤어의 부피감을 보완하고 라인을 정돈하여 화면 크기가 커지더라도 그래픽의 밀도가 떨어져 보이지 않도록 개선했습니다. - 단일한 스킨톤에서 벗어나 이모지의 표준을 참고한 다섯 가지 스킨톤 체계를 정의함으로써 다양성을 수용했습니다. - 여러 인물이 등장하는 화면에서는 다양한 스킨톤을 섞어 배치할 수 있도록 가이드를 마련하여 유니버설 디자인의 가치를 투영했습니다. **글로벌 확장을 고려한 포용적 그래픽 시스템** - 한국 중심의 서비스에서 글로벌 시장으로 확장함에 따라 특정 문화권에 국한되지 않는 보편적인 얼굴이 필요해졌습니다. - 노란색과 같은 추상적인 중립 컬러 대신 실제 인종의 다양성을 반영한 컬러 시스템을 선택하여 사용자들의 공감을 유도했습니다. - 디자인 개선 후 실제 앱 적용 시 주변 인터페이스 요소들과 자연스럽게 어우러지며 브랜드의 지향점을 명확히 드러내고 있습니다. 이러한 개편은 단순한 시각적 변화를 넘어 토스가 지향하는 포용성과 신뢰라는 브랜드 가치를 사용자에게 더 가깝게 전달하는 역할을 합니다. 향후에도 인종, 성별, 연령에 관계없이 누구나 자신을 투영할 수 있는 중립적이고 포용적인 그래픽 시스템을 지속적으로 확장해 나갈 것으로 기대됩니다.

토스의 브랜드 심볼을 찾아서 (새 탭에서 열림)

토스가 오프라인 시장으로 확장하며 브랜드 인지도를 높이기 위해 사용자의 무의식 속에 자리 잡은 '진짜 얼굴'을 탐색한 과정을 다룹니다. UX 리서치를 통해 파란색 로고 자체보다 '흰 배경의 앱 아이콘' 형태와 '검정 영문 폰트'의 조합이 브랜드 정체성의 핵심임을 발견했습니다. 이를 통해 추상적인 브랜드 이미지를 구체적인 디자인 원칙으로 정립하여 오프라인 접점과 제품 디자인에 성공적으로 적용한 사례를 제시합니다. **오프라인 확장을 위한 브랜드 심볼의 재정의** * 온라인과 달리 맥락이 부족한 오프라인 환경(편의점 댕글러, POS 단말기 등)에서 사용자가 토스를 즉각적으로 인지할 수 있는 시각적 단서를 찾는 것이 과제였습니다. * 단순히 '어떤 로고가 예쁜가'를 넘어, 사용자가 낯선 환경에서도 토스를 토스로 인식하게 만드는 핵심 자산이 무엇인지 파악하기 위해 리서치를 시작했습니다. **심층 인터뷰를 통한 브랜드 이미지 탐색** * 브랜드에 대한 추상적인 인상을 명확한 언어로 표현할 수 있는 사용자를 선별하여 심층 인터뷰를 진행했습니다. * 사용자들이 느끼는 토스의 핵심은 시각적 요소가 아닌 '군더더기 없는 실용성'과 '편리한 경험'에 집중되어 있음을 확인했습니다. * 구체적인 시각적 심볼이 부족하다는 문제점을 발견하고, 이를 해결하기 위해 폰트, 컬러, 로고라는 세 가지 요소로 나누어 분석했습니다. **데이터로 찾아낸 세 가지 핵심 단서** * **폰트:** 사용자는 앱 내부의 국문 폰트보다 뉴스나 광고 등 외부 매체에서 자주 접한 '검정색 영문 toss'를 브랜드의 대표 폰트로 인지하고 있었습니다. * **컬러:** 사용자에게 각인된 토스의 컬러는 단일 '파란색'이 아니라, '흰 배경과 파란 로고'가 만나는 조합 그 자체였습니다. * **로고:** 로고를 직접 그려보게 한 결과, 사용자는 로고 단독 형태가 아니라 스마트폰 화면 속 '네모난 앱 아이콘(흰 바탕 + 파란 로고 + 사각 배경)' 구성을 브랜드의 얼굴로 기억하고 있었습니다. **리서치 인사이트의 실전 적용** * 리서치로 정의한 '진짜 심볼(앱 아이콘 형태 + 검정 영문 폰트 + 흰/파/검 조합)'을 실제 디자인에 반영했습니다. * **토스 10주년 캠페인:** 파란 배경 대신 사용자가 가장 토스답다고 느끼는 흰 바탕에 검정 글씨와 파란 로고 조합을 메인으로 사용했습니다. * **토스페이 결제 화면:** 전면 파란색 배경 시안을 걷어내고, 리서치로 검증된 시각적 공식을 적용하여 브랜드 인지도를 높였습니다. 브랜드 리서치는 추상적인 감각과 인식을 다루기에 결과물이 모호해질 위험이 있지만, 이를 구체적인 시각적 요소로 분해하여 분석함으로써 실질적인 프로덕트 개선과 일관된 브랜드 경험을 설계할 수 있습니다.

아트 디렉션의 기술 | (새 탭에서 열림)

피그마(Figma)의 브랜드 스튜디오 팀은 아트 디렉션을 브랜드의 개성과 디렉터의 취향, 그리고 협업자의 스타일 사이에서 정교한 균형을 잡는 소통의 기술로 정의합니다. 이들은 단순히 시각적 결과물을 통제하는 것이 아니라, 창작자에 대한 깊은 신뢰를 바탕으로 복잡한 기술적 개념을 신선하고 추상적인 시각적 메타포로 변환하는 과정을 중시합니다. 결국 훌륭한 아트 디렉션은 디렉터가 최종 결과물을 미리 단정 짓기보다, 협업자가 창의적인 역량을 최대한 발휘할 수 있도록 유도하고 그 과정에서 발생하는 의외성을 수용하는 데서 완성됩니다. **아트 디렉션의 숙련과 감각의 훈련** * 아트 디렉션에서의 숙련도는 발레 무용수가 반복 연습을 통해 무대 위에서 자유를 얻듯, 수많은 반복과 시도를 통해 도구를 능숙하게 다루는 과정에서 시작됩니다. * 디렉터의 핵심 역량은 세상을 바라보는 눈을 훈련하는 것이며, 주변의 수많은 요소 중 자신과 브랜드에 공명을 일으키는 것을 선별하고 편집하는 능력이 곧 의사결정의 근간이 됩니다. * 아트 디렉션은 본질적으로 언어와 소통에 기반한 협업의 과정이며, 프로젝트의 시작점을 올바르게 설정하고 끝까지 이끌어가는 능력이 중요합니다. **적합한 협업자 선정과 창의적 신뢰** * 일러스트레이터를 선정하는 과정은 영화의 캐스팅 디렉터와 유사하며, 자신의 스타일이 확고하면서도 메시지를 예상치 못한 방식으로 전달할 수 있는 작가를 찾는 데 집중합니다. * 기초적인 아이디어가 확립된 후에는 협업자의 작업에 과도하게 개입하지 않고 신뢰를 보내는 것이 중요하며, 창작자가 개인적으로 몰입할 때 가장 흥미로운 결과물이 나옵니다. * 때로는 특정 분야의 경험이 없는 작가에게 새로운 시도를 맡겨 제약 조건 속에서 의외의 도약을 이끌어내는 '드라마틱한 긴장감'을 활용하기도 합니다. **추상적 메타포를 통한 기술적 개념의 시각화** * 엔지니어링과 같은 복잡하고 기술적인 주제를 다룰 때, 이를 문자 그대로 설명하기보다 서사 중심의 작가를 섭외하여 추상적인 비주얼로 풀어내는 방식을 선호합니다. * 복잡한 개념을 간결한 메타포로 응축하는 과정이 핵심이며, 추상적인 접근 방식은 관찰자에게 해석의 여지를 남겨 더 깊은 울림을 줍니다. * 예를 들어, 엔지니어링 피드백 문화를 '정원 가꾸기'로 시각화하거나 컨퍼런스의 주요 내용을 기이한 형태의 토마토 모델링으로 표현함으로써 단순한 설명을 넘어선 미적 경험을 제공합니다. **창작자 경험이 아트 디렉션에 미치는 영향** * 아트 디렉터 본인이 일러스트레이터나 애니메이터로서 실무 경험을 갖추면, 창작 과정의 고충과 필요한 시간을 깊이 이해하게 되어 더 높은 공감대와 신뢰를 형성할 수 있습니다. * 실무 경험은 협업자에게 현실적이고 구체적인 피드백을 줄 수 있는 기반이 되며, 이는 작가가 자신의 작업을 한 단계 더 발전시키도록 자극하는 역할을 합니다. * 경험이 쌓일수록 디렉터는 초기 단계에서 결과물을 미리 상상하며 통제하려는 습관을 버리고, 협업자가 이끄는 창의적인 여정 자체를 신뢰하며 즐기게 됩니다. 성공적인 아트 디렉션을 위해서는 결과물을 완벽히 통제하려는 욕심을 내려놓고, 협업 작가가 프로젝트에 개인적인 열정을 투여할 수 있는 환경을 조성해야 합니다. 기술적인 주제일수록 정교한 메타포를 활용해 시각적 여백을 만들어내고, 디렉터와 작가 사이의 긴밀한 소통을 통해 예상치 못한 창의적 결과물을 수용하는 유연함이 필요합니다.

Figma에서 디자인 시스템 워 (새 탭에서 열림)

eBay는 브랜드 아이덴티티와 제품 UI 사이의 간극을 좁히기 위해 Figma의 최신 기능을 활용한 차세대 디자인 시스템 'Evo'를 구축했습니다. 이들은 정적인 스타일 가이드를 넘어, 브랜드의 감성과 제품의 기능성을 동시에 수용할 수 있는 유연한 토큰 시스템을 설계하여 전사적인 일관성을 확보했습니다. 결과적으로 디자인과 개발 전반에 걸쳐 브랜드 경험을 효율적으로 확장하고 관리할 수 있는 가교를 마련했습니다. ### 브랜드와 제품 디자인의 단절 해소 * 기존에는 브랜드 마케팅 팀과 제품 디자인 팀이 서로 다른 언어와 자산을 사용함에 따라 시각적 불일치가 발생하고 협업 효율이 저하되었습니다. * 브랜드의 감성적인 '표현력(Expressiveness)'과 제품의 '기능적 제약(Functional constraints)' 사이의 균형을 맞추기 위해, 두 영역을 통합할 수 있는 시스템적 접근이 필요했습니다. * 단순한 로고 배치를 넘어, 색상, 타이포그래피, 간격 등 디자인의 기본 요소들이 브랜드의 성격(Brand DNA)을 자연스럽게 반영하도록 기획되었습니다. ### 계층형 디자인 토큰 구조 (Token Architecture) * **Global Tokens:** 원색(Palette)이나 기본 폰트 크기 등 가장 기초적인 값을 정의하며, 시스템의 원천이 되는 데이터 계층입니다. * **Semantic Tokens:** 'Action-primary', 'Background-subtle'과 같이 디자인의 '의도'와 '맥락'을 담아 추상화함으로써, 특정 값이 변경되어도 전체 시스템의 의미적 일관성을 유지합니다. * **Brand/Component Tokens:** 특정 브랜드 테마나 개별 컴포넌트에 최적화된 값을 적용하여, 동일한 구조 안에서도 다양한 시각적 변주가 가능하도록 유연성을 확보했습니다. ### Figma Variables와 Mode를 활용한 가변성 제어 * Figma의 **Variables** 기능을 도입하여 색상, 수치 등 모든 디자인 속성을 데이터화하고 이를 코드와 동기화할 수 있는 기반을 만들었습니다. * **Modes** 기능을 사용하여 'Standard(표준)'와 'Expressive(표현 중심)' 모드를 설정하고, 클릭 한 번으로 전체 UI의 분위기를 전환할 수 있는 환경을 구축했습니다. * 이를 통해 마케팅 페이지에서는 브랜드 색채가 강한 UI를 적용하고, 결제나 설정 등 기능적 페이지에서는 가독성 중심의 절제된 UI를 동일한 컴포넌트 세트로 구현합니다. ### 디자인과 엔지니어링의 워크플로우 통합 * 디자인 토큰을 코드 저장소와 직접 연결하여, 디자이너가 Figma에서 변수값을 수정하면 개발 환경에도 즉각 반영되는 '단일 진실 공급원(Single Source of Truth)'을 실현했습니다. * 엔지니어는 수치(Hard-coded values) 대신 토큰 이름을 사용함으로써 협업 과정에서의 커뮤니케이션 오류를 줄이고 유지보수성을 극대화했습니다. * 시스템 구축 초기부터 엔지니어링 팀과 긴밀히 협업하여, 실제 프로덕션 환경에서 토큰이 어떻게 소비되고 구현될지를 고려한 설계를 진행했습니다. 성공적인 디자인 시스템은 단순한 컴포넌트 라이브러리가 아니라 브랜드 가치를 제품에 투영하는 '살아있는 언어'가 되어야 합니다. 디자인 토큰을 활용한 계층 구조를 먼저 설계하고, Figma의 모드 기능을 통해 다양한 브랜드 맥락을 수용함으로써 확장 가능하고 견고한 제품 경험을 구축할 수 있습니다.