디자인 집중도 향상 시키기
프립 디자인 분석을 통한 집중도 향상 포인트
21세기 현대사회에서 기존의 여가생활 패턴이 새로운 차원으로 진화하고 있다. 특히, 젊은 세대인 MZ세대는 개성과 경험을 중시하며 취미와 여가를 더욱 다양하고 의미 있는 방식으로 즐기고자 한다. 이러한 시대적 및 세대적 특성을 반영하여 부상한 플랫폼 중 하나가 '프립'이다. 프립은 참신한 취미 여가를 경험하고 싶어 하는 이들에게 적합한 새로운 서비스를 제시하며, 그 인기와 영향력은 더욱 커져가고 있다.
https://www.dailypop.kr/news/articleView.html?idxno=64765이러한 변화 속에서 프립은 차별화된 서비스로 취미와 여가를 새롭게 정의하고 있다. 특히, MZ세대의 특성을 반영하여 '탐험'을 슬로건으로 삼아 브랜드를 리브랜딩 했으며, 신규 카테고리인 '여행'과 '프립 오리지널'을 도입하여 다채로운 경험을 제공하고 있다.
뿐만 아니라 누구나 호스트가 될 수 있는 시스템을 통해 창의적이고 다양한 활동을 주관하는 기회를 제공하고 , 개인의 특기와 재능을 공유하며 함께 즐길 수 있는 다양한 모임과 활동은 사용자들에게 새로운 소통과 경험의 창구를 열어주고 있다.
https://platum.kr/archives/182938MZ세대의 높은 관심을 받아 현재까지 1만 7000명을 넘는 호스트와 120만 명을 넘는 회원을 확보한 프립은 국내 여가 시장의 중심에서 취미와 여가의 방식을 재정의해 트렌드를 주도하는 서비스로 지위를 강화해 나가고 있다.
이렇게 시장에서 영향력을 발휘하고 있는 프립의 UIUX디자인을 어떠할까?
https://m.ekn.kr/view.php?key=20220921010003525프립의 전체적인 디자인을 스크린 별로 공통된 컴포넌트를 사용했으나 그 컴포넌트 내의 구성과 스크린을 봤을 때 집중도가 많이 떨어지는 것을 확인할 수 있었다. 지금부터 그 이유를 살펴보자
01
잉여 여백
프립의 메인 홈 및 카테고리 화면을 자세히 살펴보면 여백의 활용에 관한 몇 가지 개선 사항이 보인다. 좌측 스크린에서는 섹션들 간의 구분을 위해 여백을 활용하고 있지만, 이 여백의 양이 다소 과도한 편이다. 실제로 클론 디자인을 진행하며 확인해 본 결과 56px이라는 여백을 사용하고 있었다. 섹션 간의 구분을 명확히 하기 위해서는 여백을 사용하는 것이 효과적이지만, 지나치게 큰 여백은 스크린 전체에 대한 집중도를 낮출 수 있습니다.
또한, 우측 스크린에서는 사진 하단에 나오는 정보들이 개별 요소로 흩어져 있다. 이는 정보의 복잡성을 증가시키고 연관성을 갖추기 어렵게 만들 수 있는데, 이는 게슈탈트 이론의 근접성의 법칙을 위배했다 볼 수 있다.
근접성의 법칙은 서로 가까이 배치된 요소들은 관련성이 높다 생각하는 심리이론으로 간격으로 형성된 급접성은 요소 간의 관련성을 표현하는 가장 강력한 법칙이다.
(해당 법칙은 게슈탈트 이론에 대한 내용인데 게슈탈트 이론에 대한 내용은 나의 블로그에 클론 디자인을 했던 리소스를 활용해 정리해 둔 글이 있다. 관심 있는 분들은 확인해 주시면 감사하겠습니다^^)
좌측은 기존 프립의 디자인, 우측은 근접성의 법칙을 고려해 서로 유사성이 있는 것들의 간격을 조정하고, 정보를 복잡하게 만드는 디바이더 제거, 가격 정보 강조를 통해 정보 간의 그룹핑을 명확하게 해 준 것이다. 해당 레이아웃으로 수정하면 정보가 하나의 컴포넌트로 묶이고, 사용자들이 정보를 쉽게 파악하게 도움을 줄 수 있다. 또한 앞서 문제점으로 이야기했던 스크린 내에서 잉여 여백을 많이 줄일 수 있다.
02
불명확한 마진
메인 홈 화면에서는 18px의 마진 시스템을 통해 디자인을 구성하고, Radius 값이 적용된 사각 박스에서는
형태의 안정성을 위해 텍스트 영역을 4px 정도 안으로 조절하는 좋은 예시를 찾을 수 있었다.
그러나 우측 스크린에서는 헤더부터 콘텐츠까지 마진이 일관성 없이 들쑥날쑥한 것을 확인할 수 있다. 탑 부분의 탭 버튼들을 우측으로 스크롤할 수 있는 영역이라서 그나마 커버가 된다고 하더라도 콘텐츠 영역부터의 정보들은 마진이 일관성 없이 구성되어 있으면 사용자의 집중도가 감소할 뿐만 아니라, 제작자 입장에서도 각 영역의 마진이 상이하면 효율성과 추후 유지보수에서 어려움을 겪을 수 있다.
우측 스크린의 이미지는 마진 영역을 고려하지 않고 사이드에 붙여서 제작한 케이스인데 홈화면의 디자인을 계승해서 Radius 사각 박스와 일관된 마진 값을 유지한 레이아웃으로 수정해 보았다.
프립의 홈 화면 UI는 전체적으로 안정감 있고 완성도가 높게 설계되어 있다. 이러한 특성을 활용하여 홈 화면의 UI 요소와 형태를 다른 스크린에도 효과적으로 적용한다면, 제작과 유지 보수의 효율성이 향상될 뿐만 아니라, 나아가 추후에는 UX/UI 디자인에 브랜드 아이덴티티를 가미하는 데도 용이할 것이라 생각한다.
03
기타 등등
프립의 피드 스크린에선 사용자들이 게시한 이미지의 화질 저하가 심하게 돼서 스크린에 송출되고 있었다. 이러한 부분은 사용자의 집중도를 떨어뜨리면 전체적인 디자인 완성도를 저해시킬 수 있다.
프립의 폰트 시스템이 일관성을 갖지 못하고 있다. 특정 스크린에서는 '나눔 스퀘어 바른 고딕'을 사용하고, 다른 스크린에서는 '프리텐다드' 폰트를 사용하고 있는데, 이러한 일관성 없는 폰트 사용은 사용자에게 시각적인 불편함을 줄 수 있다.
종종 서비스 내에서 폰트가 다르게 사용된 케이스를 확인할 수 있는데 그 이유는 크게 2가지로 분류된다.
국문폰트와 영문/숫자 폰트를 의도적으로 다르게 사용한 경우
네이티브 개발과 웹뷰를 통한 폰트 렌더링이 서로 다른 경우
프립의 경우는 두 번째의 경우로 확인되는데 이런 차이는 보편적으로 특정 부분(상단 네비, 특정 버튼)에 나타나는 현상이지만 프립은 스크린 전체에 걸쳐 나타나고 있다. 폰트의 일관된 사용은 매일 많은 양의 텍스트를 읽는 사용자들에게 시각적인 일관성을 제공하고 서비스의 전체적인 가독성을 향상할 수 있다. 이 문제가 개선된다면 프립의 디자인은 더욱 일관된 사용자 경험과 높은 완성도를 가진 디자인으로 발전할 수 있을 것이다.
지금 까지 프립의 스크린을 확인해 보면서 전체적인 집중도를 떨어뜨리는 요소들에 대해 살펴보며 간단한 수정을 진행해 봤다. 지금 작성한 내용을 확인해 보니 프립에 대해 너무 안 좋은 글들만 작성한 거 같다. 하지만 프립의 디자인에는 개선의 여지가 필요한 부분들이 많이 보였기에 해당 정보들을 글로 담아내면서 우리가 디자인을 전개할 때 피해야 할 실수들을 되새길 수 있었고, 어떻게 하면 디자인을 수정해 집중도를 높이고 효율적으로 디자인을 풀어낼 수 있을까에 대해 고민할 수 있는 시간이었다.
프립의 스크린을 통해 확인한 디자인 요소들을 간략히 정리하면, 과도한 잉여 여백, 불명확한 마진 설정, 이미지 화질 저하, 그리고 일관성 없는 폰트 사용 등이 도드라진다. 이러한 디자인적인 고려사항을 바탕으로 조정이 이루어진다면, 프립은 더 높은 집중도와 사용자 경험을 제공할 수 있을 것으로 기대된다.
