[티클 애널리스트] '티클'의 UX/UI 분석
[2주차] 티클의 브랜딩과 UX/UI 분석
저번 티클 애널리스트 1주차 포스팅에서, 국내 핀테크 시장에서 티클의 포지셔닝에 대해 다뤄보았는데요. 이어서 오늘은 티클의 브랜딩과 UX/UI를 분석해보려 합니다. 티클의 서비스에 대한 소개와 이전 포스팅의 자세한 내용은 아래 글에서 확인할 수 있어요:)
https://brunch.co.kr/@lyi0922/6
티클의 브랜딩
지난 포스팅에서 소개했듯이 티클은 잔돈 저축부터 시작해서 소수점 해외투자까지, 일상에서 쉽게 실천하는 제태크를 도와주는 서비스입니다. 이러한 서비스 특성은 기존에 주식투자를 위한 지식과 자금이 부족한 경향이 높은 밀레니얼 세대에게 크게 어필되었는데요. 때문에 티클의 브랜딩을 쉬운 일상형 제태크라는 서비스 목적과 주 고객층인 밀레니얼 세대를 기준으로 분석하려 합니다.
티클은 난색계열 중 하나인 주황색을 대표 색상으로 선정하여 활기차고 친근한 느낌을 강조하고 있습니다. 이에 더해 돼지 저금통을 어플에서 사용되는 그래픽과 브랜드 캐릭터의 컨셉에도 반영하면서 귀엽고 친근한 이미지를 형성하고 있습니다. 또한 이를 어플 화면 중간중간 적절하게 활용하면서 사용자의 흥미를 자극하고 재미요소를 추가했습니다.
티클 로고반면에 어플의 로고는 이러한 티클의 아이덴티티를 잘 반영하지 못하고 있는데요. 사실상 로고만 보면 이 로고가 어떤 서비스 특성을 반영하는지, 무엇을 의미하고자 하는지 전혀 알 수가 없습니다. 로고의 이미지가 어플에서 주로 사용하고 있는 돼지저금통과 브랜드 캐릭터와도 동 떨어져 통일성을 떨어트리는 요인이 되고있기도 한데요. 이는 브랜드를 대표한다고 할 수 있는 로고의 역할을 생각해보면 치명적인 문제점이 될 수 있습니다. 개인적으로는 동전, 돼지 저금통 등의 이미지와 ‘티클’이라는 서비스 이름을 활용하는 것이 현재의 로고보다 더 적합하지 않을까 싶네요.
티클의 UX/UI
UX?
UX는 사용자가 경험하는 시스템 또는 제품, 서비스 등을 만지고 작동해 보고 사용해보아 직접적이나 간접적으로 느끼는 모든 활동을 말하며 사용자 경험이라고도 합니다.
UI?
UI는 User Interface로 사용자 인터페이스라고 하는데요. 사용자 인터페이스는 어플리케이션 내에 레이아웃, 버튼, 아이콘 등 화면의 모든 표현 방식이라 할 수 있으며, 기기와 사용자간의 상호작용이 나 커뮤니케이션을 그림으로 나타내는 것이 사용자 인터페이스 디자인 즉, UI디자인입니다.
UX/UI의 개념에 대한 자세한 설명은 아래의 포스트를 통해 확인하실 수 있습니다. :)
https://brunch.co.kr/@lyi0922/4
0. IA 분석
먼저 티클의 UX/UI를 살펴보기 위해 UX구조를 나타내는 IA(information architecture) 를 분석하고, 크게이에 따라 티클의 주요 기능을 파악해 보았습니다.
티클의 IA
위 자료는 제가 티클의 서비스를 직접 이용해보면서 파악한 IA입니다. 효율적인 분석을 위해 신규 사용자의 경우는 제외하고 가입을 완료한 사용자를 기준으로 분석을 진행했습니다.
티클의 IA를 보면 티클의 주요 서비스는 크게 ‘티클 해외주식’과 ‘티클 저금통/ 티클 내역’을 중심으로 양분화 되어있다는 것을 알 수 있는데요. 이에 따라 위 두 서비스의 사용 목적과 흐름을 기준으로 티클의 UX/UI가 각 기능별로 사용자의 니즈에 잘 부합하고 있는지 분석하고 개선방향을 제시해보려 합니다.
1. HOME
기존의 많은 서비스에서 그러하듯, 티클의 홈도 주요 기능을 화면 내에서 바로 찾을 수 있도록 정리/노출하는 구성으로 이루어져 있습니다.
HOME
해외 주식투자 대시보드-티클 저금통/챌린지- 티클 즐기기(뱃지)-티클 포스트의 순서로 화면이 구성되어 있는데요. 내 투자 대시보드와 티클 저금통은 주 기능에서 사용자 맞춤화된 정보를 상위노출하고 있는 방식으로 볼 수 있습니다. 이는 서비스의 사용성을 높여주어 ‘홈’의 역할을 잘 수행하고 있는 구성입니다.
홈- 티클 즐기기
그러나 티클 즐기기(티클 뱃지)가 굳이 홈 화면에서 노출되어야 할 정보인지는 의문이 드는데요.
우선 ‘티클 즐기기’라는 목적은 좋지만 단순히 뱃지를 얻는 것 외에 실질적으로 사용자에게 주어지는 보상이 없어 사용자에게 큰 의미를 지니지 못할 가능성이 높습니다. 오히려 저금통 챌린지가 ‘티클 즐기기’의 목적에 더 부합하는 서비스로 보입니다.
또한 주요 기능을 중심으로 깔끔하고 직관적으로 구성되어야 할 ‘홈’에서 투자 대시보드와 티클 저금통 다음으로 배치되어야 할 만큼 중요한 기능인지도 애매합니다.
‘티클 즐기기’를 마이페이지로 이동하고, 그 아래에 위치하고 있던 ‘티클 포스트’의 컨텐츠를 보완해서 강화하는 방식으로 수정된다면 사용자의 니즈에 부합하는 홈 구성이 될 수 있지 않을까 싶습니다.
‘홈’화면 전반의 UI를 살펴보면 미니멀한 화면 UI에 주요 컨텐츠에는 선택적으로 색상을 부여하고 있어 사용성을 높이고 있습니다. 문제는 덜어내려다보니, 오히려 강조되어야 할 요소들 까지도 너무 평면적으로 보인다는 점인데요.
주요 컨텐츠를 표시하고 있는 화면에서 어느 영역을 클릭해야 해당 기능의 페이지로 넘어갈 수 있는지, 클릭은 가능한 것인지 확실히 알 수 없습니다. 즉 단순 상태정보인지 버튼의 기능을 하고있는지 전혀 알 수 없습니다.
테두리나 색상을 통해 컨텐츠 영역을 확실하게 구분해 주거나 입체감을 부여하는 방식 등, 명확한 표현을 해 주어야 할 것 같습니다. 혹은 과하게 강조하지 않더라도 버튼이름 옆에 > 표시정도만 있었어도 충분히 클릭이 가능하다는 것을 표현할 수 있었을 것 같습니다.
하단 바의 아이콘
또한 하단의 아이콘들이 직관적이지 않아 해당 아이콘이 어떤 기능을 의미하는지 명확히 알 수 없는 경우가 발생합니다. 티클 내역을 의미하는 세번째 아이콘을 그예시로 들 수 있습니다.
아이콘 만으로 대다수의 사람들이 이해할 수 있을 정도의 상징성을 지니지 못한다면 이에 대한 설명이 동반되어야 합니다. 아이콘 자체를 수정하지 않더라도 아이콘 하단에 해당 아이콘이 대표하는 기능의 이름이 표시되어 있다면 사용자의 혼란을 덜 수 있습니다.
2. 티클 해외주식
티클 해외주식티클 해외주식 페이지의 컨텐츠는 인기 TOP10 기업- 내가 찜한 기업- 태그- 투자 대시보드의 순서로 구성되어 있습니다.
홈 화면에서 사용자의 개인 투자 현황을 볼 수 있는 투자 대시보드가 상단노출되어 있는데요. 때문에 해외주식 페이지는 투자 대시보드보다 기업 주식들을 살펴보고 매수/매도하는 UX과정을 강조하여 구성한 것으로 보입니다. 티클 해외주식의 플로우(사용 과정)를 내 투자현황을 관리하기/ 새로운 주식을 알아보기로 분류한 결과라고 할 수 있을 것 같습니다.
화면의 최하단에 위치해 있는 투자 대시보드이렇게 역할을 각각 분담하여 배치하는 것은 효율적으로 사용성을 높이는 방식이라고 할 수도 있지만, 사용자에게 가장 중요한 정보라고 할 수 있는 투자 대시보드를 거의 눈에 띄지 않을 정도로 최하단에 배치한 것은 오히려 사용자에게 불편함을 느끼는 원인으로 작용할 수 있습니다. 적어도 사용자가 빠르게 투자 대시보드를 찾을 수 있을 정도의 위치와 시각적 조정이필요할 것 같습니다.
또 다른 문제는 이처럼 투자 대시보드를 극단적으로 미니멀화 한 만큼, 새로운 주식을 알아보고 매수/매도하는 과정에 확실히 높은 사용성을 제공하지 못하고 있다는 점입니다. 사용자가 주식을 둘러보는 과정에서 가장 중요한 정보는 주식의 순위와 주식 기업의 종류라고 할 수 있는데요.
우선 화면의 상단에 인기 TOP 10 기업을 상하로 둥둥 떠있는 듯한 귀여운 인터렉션으로 표현한 것은 흥미를 자극한다는 점에서 긍정적이지만 효과적으로 순위현황을 확인하기에는 무리가 있는데요. 이 외에는 기업의 순위차트를 제공하고 있는 컨텐츠가 노출되어 있지 않아 실용성이 현저히 떨어집니다.
검색화면다음으로는 주식 기업의 종류와 분야별 정보인데요. 우선 앞서 언급한 주식 기업의 인기순위와 함께 TOP10 기업 외에 투자 가능한 기업들의 정보가 모두 우측상단의 검색 아이콘에 숨겨져 있습니다. 때문에 가장 중요한 정보임에도 불구하고 사용자는 검색아이콘을 클릭해보지 않는한 정확한 기업 주식의 인기순위와 모든 기업 정보를 확인할 수 없습니다.
개선 방향으로 첫 화면에서 TOP10 기업을 소개하면서 해당 부분의 하단에 실시간 순위 정보가 차트형태로 노출되어 있다면 유용성을 높일 수 있을 것입니다. 또한 더보기 버튼을 넣어 순위 밖의 기업들도 둘러볼 수 있게해서 사용자가 더 다양한 기업을 탐색할 수 있도록 하는 개선이 필요해 보입니다.
태그
주식 기업의 분야별 분류정보는 ‘태그’를 통해 제공하고 있는데요. 태크라는 제목과 함께 단순히 태그의 형태만 노출되어 있어, 이 기능이 기업의 분야별 분류정보를 제공하고 있는지 확실히 알아보기 힘듭니다.
태그의 개념을 도입한 것은 좋은 시도지만 이를 나타내는 현재의 UX/UI 구성은 오히려 중요하지 않은 정보로 여겨 클릭해보지 않아 놓칠 가능성이 커 보입니다. 때문에 단순히 ‘태그’라는 말 외에 태그의 기능을 설명할 수 있는 정보를 함께 기재하는 등의 최소한의 표현이 필수적이라 생각됩니다.
상세화면
다음은 각 기업의 상세화면인데요. 기본적으로 깔끔한 UI와 전문가의 견해, 기업정보를 간단한 형식으로 제공하고 있는 점이 좋았습니다. 기존에 주식에 대해 잘 모르던 입문자들도 쉽게 정보를 파악할 수 있는 구성으로 보여집니다. 입문자들에게 어렵게 느껴질 수 있는 기존의 주식화면을 간단한 형태로 정리하여 제공하고 있습니다.
주식 차트 클릭 전후그러나 동시에 전문성이 떨어진다는 단점도 가지고 있는데요. 상단에 노출된 주식차트로는 정확한 정보를 파악하기 어렵습니다. 간소화된 차트를 직접 클릭해야 자세한 정보를 파악할 수 있게 설정되어 있는데요. 한눈에 정보를 알아보기 어려울 뿐더러 정보를 확인하는 과정에서 불필요한 과정이 추가됩니다. 기존 주식차트처럼 복잡한 화면까지는 아니어도 기본적인 주요정보는 바로 확인 할 수 있는 형태의 차트를 제공해야 할 것 같습니다.
또한 위의 화면과 같이 수익률을 퍼센트로만 제공하지 않고, 투자금액 대비 실제 수익금액을 확인 할 수 있는 정보를 함께 제공한다면 사용자들에게 더 유용한 서비스로 다가갈 수 있지 않을까 싶습니다.
주식 구매 전/후 상세 화면
마지막으로 구매 전 화면에는 구매하기 버튼만 노출되고, 보유 주식이 있는 경우 구매하기/매도하기로 버튼이 노출되는 방식은 효율적인 UX라고 할 수 있습니다. 한가지 아쉬운점은 단어의 언어적인 통일성이 떨어져 실제 사용자 입장에서 의미가 명확하게 구분되지 않을 수 있다는 것입니다. 구매/판매나 매수/매도 중 한가지 맥락으로 통일하는 것이 더 좋을 것 같습니다.
3. 티클 내역
티클 내역
‘티클 내역’에서 현재 쌓인 티클의 금액 현황과 함께 이전의 내력을 확인 할 수 있습니다. 색감과 장식적인 요소를 최소화하고 깔끔한 타이포 위주의 구성을 통해 정보를 효과적으로 정리하고 있습니다. 동시에 개선이 필요한 부분도 발견할 수 있었는데요. 화면의 상단에 배치된 티클 옵션의 아이콘이 정확히 어떤 아이콘인지 알아보기 어렵다는 점입니다.
티클 옵션, 설정 아이콘
대중적으로 널리 사용하고 있는 설정 아이콘과의 적절한 결합을 통해 상세 옵션을 설정할 수 있다는 의미를 더 강조하거나, + 아이콘을 활용해서 추가적인 옵션기능이라는 점을 설명한다면 더 직관적인 형태의 아이콘이 되지 않을까 싶습니다.
4. 마이페이지
마이페이지
티클의 마이페이지에서는 면과 색을 배재하고 선과 타이포만을 통해 깔끔하게 정보들이 정리되어 있는 UI를 볼 수 있습니다. 현재도 효율적인 UX/UI를 가지고 있는 페이지라고 할 수 있지만, 더보기가 아닌 마이페이지인 만큼 사용자의 정보가 좀 더 강조될 수 있는 구성이어도 좋을 것 같습니다. 앞서 언급했듯이 사용자에 대한 간단한 회원정보와 함께 홈 화면에 있었던 ‘티클 뱃지(티클 즐기기)’가 마이페이지에서 노출되어 있다면 마이페이지라는 기능에 더 적합한 구성이 될 수 있을 것이라 생각합니다.
