'삐약삐약' 서비스 디자인 분석
귀여움과 기능성의 접점
코로나19 팬데믹 이후, 건강과 웰빙에 대한 사람들의 관심이 크게 증가했다. 사람들의 관심은 지금까지도 이어져 건강과 영양에 대한 관심이 날로 증가하고 있으며 특히, 개인 맞춤형 영양 관리의 중요성이 부각되면서, 사람들은 자신의 건강 상태와 필요에 맞는 영양제를 찾는 데 더 많은 노력을 기울이고 있다.
실제로, 이러한 건강에 대한 증가된 관심을 반영하듯이, 시장에서는 다양한 영양제 관련 서비스들이 출시되고 있으며, 이들은 지속적으로 성장하고 있다. 대표적인 예로는 필라이즈, 삐약삐약, 야기야기와 같은 서비스들이 있다. 이들 서비스는 개인의 건강 상태와 필요에 따라 맞춤형 영양제를 제공함으로써 현대인들의 건강 관리에 새로운 방향을 제시하고 있다.
해당 서비스 외에도 다양한 영양제와 관련된 서비스가 있으며 다양한 서비스 중 이번 글에서는 2023년 9월에 출시된 따끈따끈한 삐약삐약 서비스 어플리케이션에 대해 알아보려 한다.
서비스 소개
삐약삐약은 현대인의 개별 건강 요구를 충족시키기 위해 설계된 영양제 추천 서비스다. 이 서비스는 사용자의 건강 검진 데이터, 생활 습관, 식습관 등 다양한 건강 관련 정보를 종합적으로 분석 후, 이를 통해 개인의 건강 상태와 목표에 맞는 맞춤형 영양제 조합을 제안하며, 영양 결핍이나 과잉 섭취를 방지하는 데 중점을 두고 있다. 또한, 앱 내의 스마트 복용 관리 시스템은 사용자가 영양제를 규칙적으로 섭취할 수 있도록 도와주며, 이는 장기적인 건강 유지에 크게 기여한다.
커뮤니티 섹션은 영양제와 관련된 경험과 정보를 공유하는 공간으로, 사용자들이 상호 작용하며 건강 관련 지식을 넓히는 데 이바지한다. 삐약삐약은 이러한 기능들을 통해 개인의 건강 관리를 한 단계 높은 수준으로 이끌며, 건강한 삶을 지향하는 현대인에게 필수적인 도구가 되고자 노력하고 있다.
그렇다면 삐약삐약의 디자인은 어떠할까?
삐약삐약 어플을 처음 접하게 된 것은 인스타그램 광고를 통해서였다. 그러나 삐약삐약의 콘텐츠 디자인은 다소 혼란스러움을 느끼게 하고 있었는데, 귀여운 캐릭터 기반의 디자인이 있는가 하면, 레트로 스타일이나 영양제와 관련 없어 보이는 패딩 콘텐츠 등 다양한 스타일이 혼합되어 있어 통일성이 떨어진다는 느낌을 받았다. 이로 인해 자연스럽게 앱의 UIUX 디자인에 대한 기대감이 낮아지게 되었다.
삐약삐약 인스타그램 / https://www.instagram.com/ppiyak_official/삐약삐약 UIUX 디자인
하지만 실제로 삐약삐약의 UIUX 디자인을 살펴보니, 생각과 달리 클린한 UI와 다양한 디자인 요소들이 여러 접점에서 조화롭게 설계되어 있는 부분이 많았다. 이러한 요소들을 하나씩 살펴보며 어떻게 앱의 전반적인 사용자 경험을 향상시키는지 소개해 보고자 한다.
Good Point
1. 컬러와 폰트의 최소화
삐약삐약의 서비스 디자인에서 두드러지는 특징 중 하나는 폰트와 색상 사용에 있다. 이 서비스는 통일성과 명료성을 위해 '프리텐다드' 폰트를 국문, 영문, 숫자에 걸쳐 일관되게 사용하여, 폰트의 종류를 최소화했다. 컬러 그레이 스케일의 단계를 5단계로 사용해, 깔끔하고 전문적인 느낌을 제공하며, 이러한 접근은 개발 친화적인 환경을 조성하고, 유지 보수의 효율성을 높이는 데 중점을 둔 것으로 보인다.
사용자 입장에서도 일관된 폰트 사용은 정보의 가독성을 높이고 사용자가 내용을 더 쉽게 이해하도록 도울 수 있다. 또한, 한정된 색상 팔레트의 사용은 시각적 혼란을 줄이고, 사용자의 주의를 중요한 기능이나 정보에 집중시키는 데 도움이 될 수 있다. 이런 디자인 접근 방식은 사용자 경험을 단순화하고 명확하게 만들어, 전체적인 사용자 인터페이스의 직관성과 효율성을 향상시킨다.
2. 컨셉의 조화
삐약삐약의 디자인에서 사용된 아이콘, 그래픽, 컴포넌트, 인터렉션들은 전반적으로 통일성을 가진 에셋을 사용함으로써 일관된 브랜드 이미지를 구축하고 있다. 삐약삐약은 귀여운 그래픽과 친근한 인터렉션을 통해 영양제 섭취를 보다 쉽고 재미있게 만들어, 사용자들이 건강 관리를 지속할 수 있도록 독려하고 있다.
개인적으로 삐약삐약 앱의 왼쪽 상단에 위치한 이미지가 매우 매력적이다. 이 이미지는 사용자가 영양제를 섭취할 때마다 병아리가 성장하고 앞으로 나아가는 모습을 보여주는데, 이러한 귀여운 시각적 요소는 영양제를 꾸준히 섭취하고 싶은 동기를 부여하며, 어떻게 변할지 궁금증을 유발하여 사용자가 앱을 다시 방문하게 만들어준다.
3. 가독성과 접근성을 고려한 폰트 크기
구글 머티리얼 디자인과 휴먼 인터페이스 가이드라인은 모바일 환경에서의 폰트 사이즈에 대해 명확한 권장 사항을 제시한다.
본문 16px~18px
캡션 10px~12px
타이틀 18px~32px
의 크기를 권장하며, 10px 이하의 폰트 크기 사용을 지양할 것을 명시해 두었다.
나는 서비스 디자인 분석을 진행하기에 앞서 클론 디자인을 먼저 진행 후 서비스 분석을 한다.
다양한 서비스의 클론 디자인을 진행하는 과정에서 많은 서비스가 10px 폰트를 사용하는 것을 발견했지만, 삐약삐약은 이러한 OS 가이드라인에 부합하는 폰트 크기를 사용하여 설계된 것을 확인할 수 있었다.
이는 삐약삐약이 사용자 경험과 가독성을 최우선으로 고려한 디자인 접근 방식을 채택했음을 보여준다.
(물론, 10px 이하의 폰트를 사용하는 서비스는 정보의 양이 매우 많거나, 서비스의 구조가 복잡한 서비스들이 많이 사용한다. 삐약삐약도 서비스 규모가 커지고 전달해야 하는 정보가 많아지면 지금과 같은 폰트 시스템을 유지하기 어려울 수 있다.)
아쉬운 점
1. 맥시멀한 디자인
삐약삐약의 디자인을 분석해 보면, 그래픽과 아이콘 사용에서 일관된 컨셉을 유지하고 있음에도 불구하고, 일부 영역에서 과도한 그래픽과 컬러의 사용으로 인해 맥시멀한 인상을 준다. 또한, 라이트한 폰트 패밀리 보다 헤비한 폰트 패밀리의 사용은 이러한 느낌을 가중시킨다.
이전에 언급했듯이, 이런 그래픽 요소들은 사용자에게 쉽고 재미있는 경험을 제공하여 건강 관리를 지속하도록 독려할 수 있지만, 너무 많은 시각적 요소가 화면을 지배할 경우 시각적 피로감을 유발할 수 있다. 이는 결국 사용자 경험의 피로도로 이어지며, 디자인이 전달하고자 하는 핵심 가치를 희석시킬 위험이 있다.
2. 시선의 분산
삐약삐약의 특정 스크린과 컴포넌트에 대한 분석을 통해, 정보의 흐름과 시선의 분산 문제를 확인할 수 있었다. 사용자마다 정보의 우선순위에 따라 시선이 향하는 곳이 다르겠지만, 나는 처음 태스크 수행을 위해 정보들을 보았을 때 이미지와 같이 시선이 흐르게 되어 어떤 정보에 집중해야 할지 우선순위를 정하지 못했다.
기본적으로 좌측 정렬과 가운데 정렬이 혼합되어 사용된 것이 시선을 분산시키는 가장 큰 이유겠지만 부분적으로 폰트의 컬러감도 관련이 있다. 삐약삐약은 그레이 스케일을 최소화했지만, #121212 (가장 어두운 색) 이후의 톤이 #88898D로 넘어가면서 정보의 위계가 약하게 설정되었다. 그렇기에 #121212의 강한 블랙톤이 폰트의 크기 차이로만 설계되어 시선이 정리되지 않는 느낌이 들었다.
또한, 필요 없는 부분에 추가된 아이콘(컨디션 부분의 배터리)이 정보 이해보다는 사용자의 시선을 분산시키는 역할을 하고 있다. 이는 사용자 경험의 효율성을 저해하고 정보의 명료성을 감소시키는 요인으로 작용할 수 있다.
삐약삐약이 시장에 나온 것은 올해 9월이었지만, 이 서비스는 린 스타트업이 지향하는 최소 기능 제품(MVP)의 경계를 넘어선 듯하다. 출시 이후의 업데이트는 주로 버그 수정과 디자인 개선에 집중되어 있으며, 이는 초기 제품이 이미 시장의 필요를 충분히 충족시키고 있음을 시사한다.
MVP가 시장 반응에 따라 핵심 기능을 점진적으로 개선해 나가는 방식과는 달리, 삐약삐약은 처음부터 사용자의 기대를 뛰어넘는 기능성을 갖추고 출시된 것으로 보여, 궁금증을 갖고 삐약삐약과 관련된 기사나 글을 찾아보려 했지만 아직까진 삐약삐약과 관련된 소식을 검색을 통해선 찾기 어려웠다.
이번 분석을 통해 삐약삐약의 스토리와 서비스의 핵심 가치나 비전을 알고 싶다는 생각을 갖게 되었고, 서비스에서 귀여운 병아리가 영양제를 꾸준히 먹으면 성장하듯이 삐약삐약 서비스 또한 꾸준한 성장을 이뤄내 나의 궁금증을 해소할 수 있는 날이 오길 기대하며 이번 분석을 끝을 내겠다.
https://ppiyak.co.kr/app/landing
