상세 컨텐츠

본문 제목

택슬리 브랜드 일러스트레이션 제작기

Design

by 양진 2021. 10. 26. 18:43

본문

왜 일러스트?

톤앤매너가 일관된 일러스트는 브랜드의 아이덴티티 확립에 효과적인 도구이며, 사용자에게 전달하고자 하는 메세지를 효율적이며 감성적으로 전달할 수 있는 커뮤니케이션 수단입니다.

 

처음 택슬리라는 브랜드를 만들 때, 컬러 이외의 그래픽 요소를 어떻게 가져갈지 고민해야 했습니다. 보통의 많은 세무 서비스들처럼 스톡으로 채워 넣을지, 아니면 그래픽 패턴을 활용할지, 또 아니면 일러스트레이션을 활용할지.

 

저는 택슬리라는 서비스가 다른 (딱딱한) 세무 서비스보다 조금 더 부드럽고 친숙한 느낌으로 다가왔으면 했습니다. 택슬리의 브랜드 에센스는 당시 정확히 확립이 되진 않았었지만 '수수료가 낮은, 가까이 있는, 전문가를 위한, 고객을 위한' 같은 따뜻한 느낌이었고, 그걸 가장 잘 표현할 수 있는 방법은 일러스트레이션이라고 생각했습니다.

 

 

보통의 세무서비스는 이런 스톡이미지들을 많이 사용합니다. (이미지 출처 : pixabay)

 

어떤 일러스트?

우리 서비스는 어떤 서비스인지? 이 메뉴는 어떤 기능을 하는지? 그런 설명을 위해서는 캐릭터를 만들어서 그 캐릭터들이 직접 상황을 보여주는 게 효과적이라고 생각했습니다.

 

캐릭터의 형태는 친숙한 느낌을 주기 위해 딱딱하고 직선적인 느낌보단 라운드가 많이 들어가고 통통한 느낌으로 디자인했습니다.

 

기존 구현된 메뉴들에 맞는 상황, 그리고 마케팅, sns에 사용할 상황들을 스케치해서 작업을 들어갔습니다.

 

스케치, 초기 일러스트

 

더 다듬기

일러스트를 활용해서 사이트의 초안을 만들었습니다. 실제 사이트에 적용해 보니 일러스트의 콘트라스트(대비)가 강하고 크기도 너무 커서, 정작 중요한 메뉴들보다 일러스트에 시선이 가는 현상이 있었습니다.

 

초기 형태의 택슬리, 처음엔 택톡이란 이름으로 시작했다
처음 만든 일러스트들

 

서비스의 기능이 하나씩 구현되고 메뉴들이 추가되면서 서비스의 디자인 시스템도 조금씩 구축됩니다. 보통의 전통적인(?) 기업이라면 디자인 시스템을 구축한 후 서비스를 만들어가겠지만, 스타트업은 기능이 하나씩 만들어지면서 서비스의 방향도 뒤바뀌는 경우가 많기 때문에 꽉 잡힌 디자인 시스템을 만들어놓고 틀 안에서 서비스를 만들어가기는 어렵다고 생각합니다.

 

택슬리는 서비스와 기능이 올라가면서 디자인 시스템도 같이 올라갔습니다.
컬러 시스템 변화

 

기능이 늘어남에 따라 버튼이나 정보의 레벨을 나눠야 할 필요성이 생겼고, 블루톤 안에서 컬러도 다양하게 사용되기 시작했습니다. 늘어난 컬러 시스템에 맞춰서 일러스트의 컬러를 설정했는데 콘트라스트를 줄이기 위해 일러스트에서 블랙 컬러는 사용하지 않게 되었습니다.

 

콘트라스트를 줄이기 위해서 블랙을 사용하지 않고 블루톤 안에서 베리에이션된 컬러를 사용
버튼이나 주요정보에는 네이비나 블랙컬러를 사용하고 일러스트레이션은 컬러 1-5까지만 사용
버튼이나 주요정보에는 네이비나 블랙컬러를 사용하고 일러스트레이션은 컬러 1-5까지만 사용

 

더 만들고 완성하기

일관성을 최대한 유지하면서 서비스에 필요한 일러스트레이션을 추가해 갑니다. 캐릭터 일러스트 뿐 아니라 아이콘이나 다른 그래픽들도 일러스트의 톤앤매너를 지켜서 완성합니다.

 

완성된 일러스트레이션들
아이콘, 그래픽들

 

 

 

 


IT기술을 통해
사람과 사람의 연결을 돕고
함께 성장해나가는
서비스를 만들어 갑니다.

브릿지코드(BRIDGE CODE)는 대기업 및 금융업 종사자들과 함께 시작, 팀은 웹 애플리케이션 개발에 대한 깊은 노하우를 보유중에 있습니다. 국내 리걸테크 및 핀테크 서비스를 제공하는 스타트업입니다. "사람과 사람의 연결"을 기술을 통해 만들어나가고 있습니다.

 

 

택슬리 바로가기

 

택슬리 :: SIMPLY.TAXLY

세금은 어렵지만 TAXLY는 쉬워요

taxly.kr

브릿지코드 바로가기

'Design' 카테고리의 다른 글

택슬리 브랜드 디자인 가이드  (0) 2021.12.06
택슬리 브랜드 일러스트레이션 제작기  (2) 2021.10.26

관련글 더보기

댓글 영역