brunch

You can make anything
by writing

C.S.Lewis

by 태석 Dec 15. 2023

카카오 헤어숍 서비스 종료

카카오 헤어샵 디자인 분석

카카오 헤어숍은 사용자들이 손쉽게 미용실을 찾고 예약할 수 있는 서비스다. 서비스는 다양한 헤어스타일 옵션과 스타일리스트 정보를 제공하며, 사용자 리뷰와 평점 시스템을 통해 소비자들에게 신뢰할 수 있는 선택을 가능하게 한다. 카카오 헤어숍은 편리한 예약 시스템과 함께 모바일 애플리케이션을 통한 사용자 경험을 강조하며, 전통적인 미용 업계에 디지털 혁신을 가져왔다.


하지만 이런 디지털 혁신은 카카오 헤어숍에 복잡한 이슈들을 가져왔다. 서비스의 확장 과정에서 발생한 골목상권 침해 논란은 지역 미용실들은 고객 감소와 경쟁 심화를 야기했고, 이러한 변화는 소규모 지역 사업자들의 생존 문제를 일으키며 이에 대한 사회적인 우려가 제기되었다.


카카오는 이러한 논란에 대응하여 최종적으로 사업 철수를 결정했으며, 이러한 결정은 투자자들과의 금융적인 문제를 수반하며, 카카오인베스트먼트는 와이어트의 투자자들에게 상당한 금액을 지불해야 하는 상황에 직면했다.


카카오 헤어숍의 철수는 많은 이들에게 아쉬움을 남겼다. 편리하고 혁신적인 이 서비스는 고객들에게 새로운 미용실 예약 경험을 제공했으나, 여러 사회적인 이슈로 인해 마감을 하게 되어, 아쉬움과 디자인 적으로도 참고할 것이 많은 서비스를 브런치를 통해 기록을 남기려 한다. 







01

카카오 헤어숍 폰트

출처: https://brunch.co.kr/@purpledev/23

카카오 헤어숍에 사용된 폰트는 KHDS폰트(안드로이드 기준) 카카오 헤어숍 내에서 자체적으로 개발한 폰트 시스템이다. 해당 폰트는 'Spoqa Han Sans Neo'와 'Inter' 폰트를 계승해 도출해 낸 폰트이다.


카카오 헤어숍이 자체적으로 폰트를 개발한 이유는 다음과 같다.

처음 후보지에 오른 폰트는 Noto Sans Kr과 Spoqa Han Sans Neo폰트였다.

Noto Sans Kr은 국문 폰트는 디자인에 잘 맞게 나오지만 영문, 숫자인 경우는 전체적인 디자인과 어울리지 않아, 한글과 영문, 숫자 폰트를 따로 관리해야 하는 이슈가 생겼다.

Spoqa Han Sans Neo는 웹에서 보편적으로 많이 쓰이는 폰트라 디자인에 적용하는데 이슈가 되지 않고 국문, 영문, 숫자 모두 하나의 폰트로 관리할 수 있는 유지보수에 특화된 폰트 시스템이었지만, 자사 측에서 맘에 들지 않았나 보다...

그렇게 해서 카카오 헤어숍은 커스텀 폰트를 개발하게 되었고 그것이 현재 앱에 적용된 KHDS 폰트다.

해당 폰트는 우리가 웹에서 자주 경험해 왔고 가독성과 판독성이 뛰어나 많은 디자이너들이 선호하는 폰트('Spoqa Han Sans Neo'와 'Inter')를 계승해 만들어 이질감 없이 앱 내에서 정보전달을 명확히 하고 있었다.




02

카드 UI

카카오 헤어숍의 메인홈은 정보의 탐색이 이뤄지는 첫 화면이다. 그렇기에 다른 스크린 보다 정보의 탐색이 명확해야 한다는 점을 잘 살려 배경색과 대비되는 화이트 카드 컴포넌트를 활용해 정보를 전달하고 있었다.

해당 카드 컴포넌트를 사용해 정보와 정보 간의 그룹핑을 명확하게 하고 카드 UI내의 요소들은 레이아웃, 컬러 등을 간소화하여 정보의 복잡성을 줄여주고 있다.


카드 UI로 이미 묶여있는 상태에서 안의 요소들도 복잡하게 구성했더라면 디자인이 매우 쪼개져 보이고 복잡해 보여서 카드 UI의 장점을 살리지 못했을 텐데 카카오 헤어숍은 장점을 잘 이용해 사용자들에게 명확한 정보를 전달하고 있었다.




03

마이크로 인터렉션

카카오 헤어숍의 다양한 접점에서는 사용자 편의성을 고려한 인터렉션이 중점적으로 설계되어 있다. 이러한 인터렉션은 단순히 디자인의 컨셉이나 톤 앤 매너를 형성하는 것을 넘어서, 사용자들에게 실질적인 편의를 제공하기 위한 목적으로 사용되고 있다. 빨간 박스를 친, 200개의 매장이 검색되었다와 하단 지도 보기 플로팅 버튼들의 인터렉션을 살펴보면


"내 주변" 탭에 진입하면 "200개 매장이 검색되었다"는 알림이 잠깐 나타났다 사라진다. 이후 매장 정보는 하단에서 적절한 간격으로 재배치된다. 이는 사용자에게 최적화된 정보 전달과 스크린 내 우선순위를 명확히 하는 방식이다. 스크린에서는 사용자 편의를 위한 필터 버튼과 중요한 매장 정보에 집중할 수 있도록, 검색된 매장 수에 대한 정보는 일시적으로만 표시되고 사라지도록 해 스크린 영역을 효과적으로 활용하고 있다.


하단에 고정된 '지도 보기' 플로팅 버튼은 스크롤 시 원형 버튼으로 변하며 바텀 내비게이션과 함께 사라진다. 이는 스크린의 고정 영역을 최소화하여, 사용자들이 제한된 화면에서 정보를 더욱 편안하게 볼 수 있도록 설계된 인터렉션이다.


오히려 최상단에 배치된 토글 버튼에 인터렉션을 부여해 서비스의 톤과 매너를 나타낼 수도 있었으나, 이런 영역에 인터렉션을 과감히 제거하고, 사용자의 편의성을 보장할 수 있는 영역과 요소에만 인터렉션을 집중했다. 이러한 결정은 인터렉션의 선 기능을 강조하며, 디자인이 단순히 이쁘고 멋있는 것이 아닌 사용자를 최 우선시해야 한다는 경각심을 일깨워주게 만든다.




04

기타

이외에 카카오 헤어숍의 스크린을 살펴 보면 홈 화면에서의 대비가 강하게 사용되거나 카드 UI를 컨셉으로 보여주는 것과 달리 사용자에게 필요한 핵심 정보를 간결하게 전달하는데 중점을 두고 있다. 포인트 컬러를 화면 내에서 5~10% 선에서 유지해 포인트 컬러의 역할을 확실하게 수행하고 있으며, 정보의 위계질서를 명확히 부여하여 시선의 흐름이 자연스러운 것도 특징이다.


특히 카카오 헤어숍은 폰트 크기를 작게 사용하지 않아서 접근성이 매우 좋았다. 서비스가 고도화되고 다뤄야 하는 내용이 많아지면 자연스럽게 폰트의 크기가 작아지는 서비스들을 많이 봐왔는데 카카오 헤어숍은 폰트의 적정 크기를 모든 접점에서 유지하여 접근성과 사용성을 보장하고 있었다.






카카오 헤어숍은 사용자 편의성을 극대화하는 서비스로, 디지털 시대의 미용 업계에 새로운 바람을 일으켰다. 그러나 골목상권 침해 논란 등의 이유로 서비스가 종료를 결정하면서, 이러한 서비스를 더 이상 이용할 수 없게 되어 아쉬움을 남는다. 서비스의 종료는 단순히 또 하나의 앱의 종료를 넘어, 디지털과 전통 상권 간의 균형과 상생이라는 더 큰 이슈에 대한 고민을 남긴다.



매거진의 이전글 '못난이 마켓' 디자인 분석
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari