UX(User Experience): 사용자가 제품이나 서비스를 이용하면서 느끼는 전반적인 경험을 의미한다. 이는 사용자의 감정, 태도, 행동 등을 포함하며, UX 디자이너는 이러한 경험을 향상시키기 위해 사용자 조사, 정보 구조 설계, 와이어프레임 및 프로토타입 제작 등의 작업을 수행한다.
UI(User Interface): 사용자가 제품과 상호작용할 때 직접적으로 접하는 화면, 버튼, 아이콘 등의 인터페이스 요소를 디자인하는 것을 의미한다. UI 디자이너는 색상, 레이아웃, 아이콘, 버튼 등 시각적 요소를 활용하여 사용자가 제품을 직관적으로 이해하고 사용할 수 있도록 돕는다.
< UX와 UI의 차이점 및 관계 >
UX 디자인은 사용자의 전반적인 경험을 개선하는 데 초점을 맞추며, UI 디자인은 이러한 경험을 시각적으로 구현하는 역할을 한다. 두 분야는 상호 보완적이며, 협업을 통해 최적의 사용자 경험을 제공할 수 있다. 이 때문에 많은 기업에서는 UX와 UI를 통합하여 UX/UI 디자이너로 부르기도 한다.
< UX/UI 디자인 프로세스 단계 >
아이디어 구현 및 정의: 제품 또는 서비스의 비즈니스 목표를 이해하고 전략을 정의한다.
연구조사: 사용자 인터뷰, 설문 조사 등을 통해 사용자의 행동, 요구사항, 선호도를 파악하고, 시장 조사를 통해 경쟁사와 시장 동향을 분석한다.
분석: 수집한 정보를 바탕으로 현재 제품이나 서비스의 문제점을 분석하고, 사용자 여정 지도를 활용하여 문제를 시각화한다.
디자인: 와이어프레임과 프로토타입을 제작하여 디자인을 구체화한다.
테스트: 제작한 디자인을 사용자에게 테스트하고 피드백을 수집하여 문제점을 파악한다.
완료, 실행, 반복: 테스트 결과를 반영하여 제품을 수정하고 개선하며, 이러한 과정을 반복하여 제품이나 서비스를 지속적으로 발전시킨다.
[ 디스커션 ]
: 이 글을 통해 UX와 UI 디자인의 명확한 정의와 차이점을 이해하게 되었다. 사용자의 전반적인 경험을 고려하는 UX와, 이러한 경험을 시각적으로 구현하는 UI의 협업이 얼마나 중요한지 깨달았다. 특히, 디자인 프로세스의 각 단계가 체계적으로 연결되어 있어, 사용자 중심의 제품이나 서비스를 개발하는 데 큰 도움이 될 것 같다. 앞으로 UX/UI 디자인을 공부하고자 하는 사람들에게 이 글이 유용한 가이드가 될 것 같다.
: 이 글에서는 스티브 크룩의 저서 '(사용자를) 생각하게 하지 마!' 를 기반으로 UX 디자인의 핵심 원칙을 설명한다. 사용자는 웹사이트를 방문할 때 모든 내용을 꼼꼼히 읽지 않고, 필요한 정보를 빠르게 찾기 위해 훑어보는 경향이 있다. 따라서 중요한 정보는 눈에 띄게 배치해야 하며, 사용자가 고민하지 않고 즉각적으로 이해할 수 있도록 해야 한다.
또한, 웹사이트의 내비게이션과 인터페이스는 사용자가 직관적으로 탐색할 수 있도록 설계해야 하며, 불필요한 클릭을 줄이고 핵심 기능에 쉽게 접근할 수 있도록 만들어야 한다. 디자인에서 널리 사용되는 패턴과 관례를 따르면 사용자는 익숙함을 느끼고 더 빠르게 적응할 수 있다.
마지막으로, 좋은 UX는 이론이 아니라 실전에서 검증되어야 한다. 따라서 사용성 테스트를 지속적으로 진행하며, 실제 사용자의 피드백을 바탕으로 개선해 나가는 과정이 필수적이다.
[ 디스커션 ]
: 이 글을 읽고 UX 디자인에서 어떤 점들이 필요한지에 대해 알게 되었고 더 자세한 내용을 보기 위해 바로 책을 구입했다.
이 책에서는 사용자가 웹사이트에서 정보를 찾을 때 빠르고 직관적인 경험을 원하기 때문에, 불필요한 요소를 제거하고 핵심적인 정보만을 강조하는 것이 필수라고 이야기 하고 있다. 그리고 관례를 따르는 것이 혁신적인 디자인보다 더 효과적일 수 있음을 알게 되었다. 앞으로 UX 디자인을 할 때 사용자가 생각하지 않아도 자연스럽게 원하는 기능을 사용할 수 있도록 직관적인 인터페이스를 설계해야겠다.
: 포트폴리오 주제로 요양보호사(헬퍼)와 시니어(또는 보호자)를 매칭하는 플랫폼을 개발하기로 결정했다. 어릴 때부터 요양보호사로 일하는 아버지를 따라다니며 자연스럽게 보호사와 시니어들의 니즈와 페인포인트를 접하게 되었고, 고령화 사회에 꼭 필요한 플랫폼을 만들어보고 싶다는 생각으로 이 주제를 선택했다. 프로젝트를 구성하는 과정에서 유사 서비스 분석이 필요하다고 판단했고, 그 과정에서 국내 대표 간병인 매칭 플랫폼인 토닥씨를 알게 되었다.
토닥씨는 국내 대표 간병인 매칭 플랫폼으로 성공적인 사용자 경험을 제공하고 있다. 간병 서비스는 신뢰와 접근성이 중요하기 때문에, 토닥씨의 신원 인증, 리뷰 및 평점 시스템 등의 기능이 어떻게 구성되어 있는지 참고하고, 그 외에도 맞춤형 필터, 실시간 상담 시스템 등 사용자 중심의 기능이 잘 갖춰져 있는 것으로 판단되어 추후 작업될 나의 프로젝트에도 반영할 UX 요소를 분석하는 데 유용할 것이라고 생각했다.
> 토닥씨 구조
: 토닥씨 플랫폼은 4개의 탭으로 이루어져있다. 메인 탭인 홈에서 돌봄 대상의 정보를 등록할 수 있고, 등록 후에는 해당 화면에서 주기능들을 사용할 수 있게 했다. 마찬가지로 주요 기능으로 볼 수 있는 돌봄 이력 관리 기능과 근무일지(토닥노트) 관리 기능을 탭으로 각각 나누어 놓아, 직관적이고 불필요한 화면 이동이 없이 서비스를 이용할 수 있도록 했다. 이제 각각의 탭들을 하나씩 분석해보자.
1. 홈
일부 이미지 출처 - 토탁씨 홈페이지
- 플랫폼 사용을 시작하면 홈 탭으로 연결된다. 케어 받을 대상을 등록하지 않은 상태에서는 주황색의 포인트 컬러를 사용하여 '가족등록' 버튼을 강조하여 사용자에게 특정 행동(가족등록)을 유도하고 있다.
- '가족등록' 버튼을 누르면 케어 대상의 기본 정보를 등록할 수 있는 화면으로 연결된다. 이름, 생년월일, 연락처 등의 기본적인 내용과 해당 플랫폼을 더욱 빠르고 편리하게 사용하기 위한 정보(관계, 장기요양등급)도 등록할 수 있게 하여 추후에 케어 서비스를 신청할 때 추가로 정보를 더 작성하지 않아도 된다는 편리함을 주고 있다.
- 사용자에게 익숙하지 않을 수 있는 질문에 대한 내용은 툴팁을 활용하여 사용자가 플랫폼을 이탈하지 않고도 관련 정보를 얻을 수 있게 편의성을 주었다.
- 토닥씨 어플 특성상 시니어 외에도 많은 사용자들이 사용하기 때문에 폰트 크기 문제가 되지는 않지만 나의 프로젝트에서는 시니어층도 고려하여 16-18sp 의 폰트 크기로 적용해야겠다는 생각을 했다.
2. 돌봄내역
- 두번째 탭인 돌봄내역의 화면이다. 본인은 아직 케어 대상이 정해지지 않았기 때문에 홈 탭에서 케어 대상이 보이지 않는다. 이렇게 케어 대상을 정하지 않은 상태에서 '돌봄신청' 버튼을 누르면 홈 탭에서 '가족등록' 버튼을 눌렀을 때와 동일하게 케어 대상의 기본 정보를 등록할 수 있게 했다. 이런 구성으로 사용자가 돌봄내역 탭을 이용하고 싶은데 케어 대상이 등록되지 않았을 경우 다시 홈 탭으로 이동하는 불편함 없이 해당 화면에서도 동일한 기능을 주어 편의성을 주었다.
- 케어 대상이 등록된 후, '돌봄신청' 버튼을 누르면 신청 정보를 등록할 수 있는 폼으로 연결된다. 해당 폼에서도 사용자에게 편의성을 주는 포인트들이 있다. 위의 폼에서 '돌봄일정' 부분을 보면 사용자가 원하는 일정을 선택할 수 있고, 설정된 날짜에 맞춰 우측 상단에 날짜가 계산되고 있어 사용자가 직접 체크하지 않아도 확인할 수 있도록 했다.
- 또한 '돌봄장소'를 등록하는 폼에서도 사용성을 중요시한 부분이 있다. 병원에서 간병 서비스를 이용하는 경우 배정된 병원이나 호실이 존재하지 않는 경우도 체크할 수 있도록 했다.
이미지 출처 - 토탁씨 홈페이지
- 또한 케어 대상의 '문진정보'도 등록할 수 있는 폼이 있어, 추후에 헬퍼와 매칭이 되었을 때도 헬퍼와 케어 대상과의 추가 문의, 추가 질문 등이 없어진다는 장점이 생긴다.
- 질문에 대한 답변을 선택했을 때에는 대체적으로 포인트 컬러를 사용하여 사용자가 헷갈리지 않게 했고, 질문과 관련된 이미지를 같이 첨부하여 사용자의 이해를 돕고 있다.
- 디테일한 정보가 필요한 질문에 대해서는 사용자가 주관식으로 입력하지 않고 객관식 형식으로 사용하여 사용자의 편의성을 주고 있다. 답변지를 작성하는 데에 드는 시간을 줄일 수 있다.
- 객관식 질문 형식은 답변을 선택하면 글씨의 색상이 토닥씨 포인트 컬러로 변하는데, 해당 컬러로 변하게 되면서 갑자기 가독성이 떨어지고 있다.(개선사항)답변을 클릭했을 때 테두리 색상은 포인트 컬러로 적용하되, 글씨는 어두운 회색 또는 검정색으로 변경되게 하면 가독성에 문제가 없을 것으로 판단했다.
이미지 출처 - 토닥씨 홈페이지
- 마지막에는 본인이 선호하는 헬퍼의 정보를 지정할 수 있다.
이부분은 그저 봉사하는 과정에서는 알 수 없었으나, 프로젝트 주제를 정하고 난 후 요양보호센터에 직접 방문하여 인터뷰를 진행할 때 알게 된 사실이다.케어 대상도 그렇고 헬퍼 또한 본인이 선호하는 대상이 있다는 것이었다.
토닥씨에서는 해당 사항을 고려하여 사용자들에게 맞춤형 선택을 할 수 있도록 도왔다.
3. 토닥노트
이미지 출처 - 토탁씨 홈페이지
- 돌봄노트는 헬퍼와의 매칭 후 케어 서비스가 끝나면 근무 일지를 보고 받을 수 있고, 작성된 보고 내역서를 확인할 수 있다.
- 아직 디테일한 서비스 사용은 못 해보았기 때문에 정확하지 않지만, 일지에 대한 구분을 색상 표시로 구분할 수 있게 했고, 하나의 일지를 클릭하여 세부 서비스 이력을 볼 수 있게 했다.
- 이해를 도울 수 있는 이미지를 활용하여 보다 직관적으로 볼 수 있게 했고, 주제에 따른 색상을 다르게 표현하여 구분지어 볼 수 있도록 했다.
- 일부 화면에서 배경 색상과 텍스트 색상의 차이가 없어서 텍스트를 읽는 데에 가독성이 떨어진다는 불편함이 있다. (개선사항)해당 부분은 텍스트 색상을 다르게 주어(진한 회색 또는 검정색) 배경에 묻히지 않고 눈에 잘 띄는 색상으로 반영하면 개선될 것이라 생각한다.
4. 마이돌봄
- 마지막 탭인 '마이토닥'에서는 사용하고 있는 본인의 정보를 수정할 수 있는 부분이 가장 상단에 있다.
- '자주 묻는 질문' 탭을 사용하여 사용자들이 많은 궁금증을 가지고 있는 부분에 대해서는 직접 설명하지 않아도 해소될 수 있도록 했다.
- 해당 플랫폼은 목적이 뚜렷하게 하나로 되어 있기 때문에 설정에 대한 요소들이 많이 없어도 된다. 그래서 간단하게 구성되어 있는데, 이게 불필요함은 덜고 필요한 부분으로만 구성되어 있는 것처럼 느껴져서 깔끔함을 주고 있다.
- 궁금증에 대한 부분이나 불편함에 대한 도움을 받고 싶으면 하단에 큰 영역으로 문의를 하거나 전화를 직접 연결 할 수 있도록 배치한 것은 사용자에게 편의성을 주고 있다.
> 개선 방안
: 일부 화면(토닥노트 탭)에서 여러가지 색상을 사용하여 카테고리화 되도록 했는데, 너무 많은 컬러가 사용되어 사용자에게 혼란을 줄 수 있다는 생각을 했다. 컬러를 정제하여 사용자에게 필요한 내용만 인지할 수 있게 유도하면 개선될 것 같다. 그리고 강조되어야 할 텍스트 색상과 배경 색상의 톤이 너무 비슷하여 가독성이 떨어지는 부분은 텍스트 색상을 진한 회색이나 검정색을 사용하여 가독성을 높이도록 플랫폼 사용에 더욱 도움이 될 것이라 생각한다.
: 위 글에서는 사용자 경험(UX)이 반드시 사용자의 편의성만을 추구하는 것이 아니라, 기업의 비즈니스 모델과 부합해야 한다는 점을 강조한다. 예를 들어, 써브웨이의 주문 방식은 처음에는 다소 불편하게 느껴질 수 있지만, 고객이 자신의 기호에 맞게 샌드위치를 커스터마이징할 수 있는 경험을 제공함으로써 차별화된 비즈니스 모델을 구축했다. 이러한 커스터마이징 경험은 써브웨이의 핵심 가치이며, 이를 단순화하거나 제거하면 브랜드의 정체성이 훼손될 수 있다. 따라서 UX는 기업의 수익 모델과 조화를 이루어야 하며, 단순히 사용자의 편의성만을 고려해서는 안 된다고 말하고 있다.
[ 디스커션 ]
: 이 글을 통해 UX 디자인이 단순히 사용자의 편의성을 높이는 것뿐만 아니라, 기업의 비즈니스 모델과 긴밀하게 연계되어야 한다는 점을 깨달았다. 써브웨이의 사례를 통해 다소 불편한 사용자 경험이 오히려 브랜드의 차별화 요소로 작용할 수 있음을 알게 되었다. (본인도 써브웨이 첫 주문이 어려워 그냥 옆사람을 따라 주문했던 기억이 있다) 따라서 UX 디자이너로서 사용자의 편의성뿐만 아니라 기업의 비즈니스 목표와 전략을 깊이 이해하고, 두 요소의 균형을 맞추는 디자인을 고민하는 것을 연습해야겠다.
: 이 글에서는 UX 디자인에서 활용되는 '더블 다이아몬드(Double Diamond)' 모델을 설명하고 있다. 더블 다이아몬드는 영국 디자인 카운슬에서 제시한 모델로, 디자인 프로세스를 ‘발견(Discover)’, ‘정의(Define)’, ‘개발(Develop)’, ‘전달(Deliver)’의 네 단계로 나누어 사고의 확산과 수렴을 반복하는 구조를 가진다.
발견(Discover) : 제품이나 서비스의 문제점을 파악하기 위해 자료 조사, 시장 조사, 경쟁사 분석, 사용자 조사를 수행한다. 사용자 조사는 정량적 방법(설문조사, A/B 테스트, 아이 트래킹)과 정성적 방법(인터뷰, 현장조사, 카드 소팅)으로 나눌 수 있다.
정의(Define) : 수집된 자료를 바탕으로 문제를 명확히 정의하고 시각화한다. 이 과정에서 페르소나(Persona), 고객 여정 맵(Customer Journey Map), 이해관계자 맵, 어피니티 다이어그램(Affinity Diagram) 등의 도구를 활용하여 사용자와 서비스의 상호작용을 분석한다.
이러한 방법론을 통해 UX 디자이너는 사용자 중심의 사고를 구조화하고, 문제 해결을 위한 체계적인 접근을 할 수 있다.
[ 디스커션 ]
: 더블 다이아몬드 모델은 UX 디자인 프로세스를 체계적으로 이해하고 적용하는 데에 도움이 된다. 각 단계에서 수행해야 할 작업과 활용할 수 있는 도구들이 명확히 정리되어 있어, 디자인 과정에서 방향성을 잡는 데 유용했다.
특히, 발견 단계에서 철저한 사용자 조사를 통해 문제를 명확히 정의하고, 이를 기반으로 해결책을 개발하는 과정이 중요하다는 것을 다시 한번 깨달았다. 앞으로 UX 디자인을 진행할 때 이 모델을 참고하여 체계적인 접근을 시도해야겠다.
UX 디자이너는 단순히 화면을 디자인하는 것이 아니라, 사용자 경험을 개선하기 위해 기획, 리서치, 프로토타이핑, 테스트 등을 수행하며, 제품이 사용자 친화적으로 작동하도록 만든다. 또한, 회사의 규모와 조직 문화에 따라 UX 디자이너의 업무 범위가 달라진다. 스타트업에서는 기획부터 디자인, 테스트까지 폭넓은 역할을 수행하는 반면, 대기업에서는 보다 세분화된 업무를 맡는다.
특히, UX 디자인에서 중요한 요소로는 사용자 중심 사고, 다양한 이해관계자와의 원활한 커뮤니케이션, 데이터 분석을 통한 의사결정 능력이 있다. UX 디자이너는 사용자와 비즈니스 사이의 균형을 맞추며 최적의 솔루션을 찾아내는 문제 해결자의 역할을 수행해야 한다.
[ 디스커션 ]
: UX 쪽에 흥미가 생기던 이유 중 하나는 UX 디자이너는 단순히 예쁜 디자인을 만드는 것이 아니라, 사용자와 비즈니스의 균형을 맞추며 최적의 솔루션을 찾아야 한다는 점이었다. 디자인뿐만 아니라 기획, 리서치, 테스트 등 다양한 업무를 수행해야 하며, 이를 위해 논리적인 사고와 문제 해결 능력이 필수적이라는 것을 깨달았고 이 점에 매력을 느꼈다.
또한, UX 디자이너가 다양한 이해관계자와 원활하게 소통하는 것이 중요하다는 점을 다시 한번 느낀다. 단순히 개별적인 작업을 하는 것이 아니라, 개발자, 기획자, 마케터 등과 협력하며 사용자의 입장에서 최적의 경험을 설계해야 한다. 앞으로 실무 중심의 경험을 쌓고, 사용자 중심 사고를 더욱 발전시켜야겠다고 다짐한다.
: 3년 전만 해도 일주일에 두세번은 배달 음식을 시켜먹었고, 그 중에서도 맵고 짠 자극적인 음식들만 골라 먹었었다. 그 당시에는 몰랐는데 그 습관들이 쌓여 신체적으로 느껴지기 시작했다. 건강이 안 좋아지는 것을 느끼고 나는 운동을 시작했다. 운동을 시작하면서 자연스럽게 식단 관리에도 관심을 가지게 되었고, 그러면서 배달 음식을 시켜먹는 데에 쓰던 비용을 닭가슴살을 대량으로 구매하는 데에 쓰게 되었다.
랭킹닭컴은 건강식품 및 간편식을 주로 판매하는 플랫폼으로, 약 1천개의 브랜드와 약 2만개의 제품을 취급하고 있다. 전체적으로 사용자 경험을 고려하여 직관적인 인터페이스를 제공하고 있고, 최근에는 AI 관련 기능도 도입되었다고 하여 관련 기능도 알아볼 겸 레퍼런스 분석용으로도 살펴보려고 한다.
> 랭킹닭컴의 구조
: 랭킹닭컴의 화면 구성은 홈 / 카테고리 / 쿠폰 / 마이랭킹 / AI식단 이렇게 5개이다. 하지만 화면 우측 하단에 '피트니스' 버튼을 두어 사용자가 해당 버튼을 선택하면 마치 다른 어플을 실행한 듯 하게 전체적인 UI 화면들이 바뀌고 기능 또한 다르게 보여진다.
그리고 다른 플랫폼과 다르게 화면을 구성하고 있는 탭의 위치가 다르다. 보통 사용자 관련 정보를 보여주는 '내정보'의 탭은 가장 오른쪽에 배치되어 있는데 랭킹닭컴에서는 가장 오른쪽엔 새로 도입된 기능인 'AI식단' 탭이 있고 그 왼쪽에 '마이랭킹' 탭이 있다는 특징이 있다.
또한 선택하면 다른 어플리케이션을 보여주는 듯한 '피트니스'에 대한 버튼도 화면 하단 내비게이션 바에 있지 않고 실행 화면 우측 하단에 배치되어 있다는 점이 특이하다.
1. 홈
- 어플을 처음 실행하면 보이는 홈 화면에는 상단(새해 특가 골라담기 영역)에 할인 정보와 특가 상품에 대한 이벤트 정보를 배치하여 사용자들이 플랫폼 실행과 동시에 해당 플랫폼에서 많은 혜택을 제공 받고 있다는 점을 인지하게 하고 있다.
- 하단에는 상품 카테고리와 각종 이벤트의 내용을 아이콘화 하여 2줄로 나열했다. 캐러셀 형식의 아이콘들을 오른쪽으로 넘기다 보면 가장 아래쪽에 '전체보기' 버튼이 있고 이 버튼을 누르면 화면 이동이 발생하며 상품에 대한 전체적인 카테고리는 하단에, 각종 이벤트 정보는 상단에 볼 수 있도록 배치했다.
- 이벤트에 대한 정보와 상품 카테고리에 대한 정보를 같은 영역에 캐러셀 형식으로 나열하여 한 눈에 볼 수 있다는 장점이 있었지만, '전체보기' 버튼을 선택한 뒤로 화면이 이동되면 눈에는 이벤트에 대한 정보는 한 눈에 보이지 않아, 찾는 데에 시간이 걸린다는 단점이 있었다. (개선점) 해당 부분은 상단에 캐러셀 형식으로 따로 분리해놓은 이벤트 관련 정보를 없애고 '닭가슴살' 탭 위에 '이벤트' 탭을 하나 생성하여 상품 카테고리와 같은 형식으로 볼 수 있도록 수정하는 것이 더 한 눈에 보기 좋을 것 같다.
- 다시 홈화면으로 돌아와서 하단으로 내리다보면 각각 이벤트 중인 상품들을 볼 수 있는데 각 상품 성격마다 하단에 배치되는 이미지 영역이 달라 통일성이 없어 가독성이 떨어지는 느낌도 있다.
- 화면을 하단으로 내리다 보면 '오늘의 검색 랭킹' 영역이 보인다. 해당 부분은 물음표 툴팁을 사용하여 어떤 기준으로 랭킹 차트가 설정되고 있는지에 대한 궁금증을 해소하고 사용자에게 믿음을 주고 있다.
- '더보기' 버튼을 선택하면 관련 상품들을 더욱 자세하게 확인할 수 있도록 이미지 영역과 상품 상세 영역을 확대하여 가독성을 높혔다.
- 홈 화면에서 가장 상단에 있던 탭 버튼 네비게이션들을 눌러보면 각자 다른 화면 UI 구성을 보여준다.
- '랭킹' 탭에서는 가장 상단에는 '가장 인기 있는 전체 제품은?' 이라는 문구 중간에 체크 박스를 넣어 사용자가 찾고 있는 상품을 빠르게 찾을 수 있도록 편의성을 주었다.
- 하지만 '특가' 탭에서는 '랭킹' 탭에서는 볼 수 있었던 상단 검색 필터링 탭을 볼 수가 없어서 찾는 데에 다소 불편함이 있다.
- '1팩 담기' 탭에서도 위와 같은 문제가 있다. 또한 해당 탭을 선택하면 화면 하단에 있던 내비게이션 바가 사라지면서 화면 이동에 대한 불편함이 있다.
- 전체적으로 이미지 영역이 달라서 가독성을 떨어지게 한다는 점과 어느 화면에는 필터링 기능이 구성되어 있고 어느 화면은 안 되어 있고 등의 불편함이 있는 것을 볼 수 있다.
2. 카테고리
- 카테고리 화면에서는 특정 상품을 찾는 사용자들에게 편의성을 줄 수 있는 요소들을 볼 수 있다.
- 해당 화면에서 대분류/중분류/소분류의 구분을 세부적으로 모두 볼 수 있어서 특정 상품을 찾고 있는 사용자들에게는 불필요한 화면 이동 없이 본인이 찾고 있는 기능을 수행할 수 있다는 장점이 있다.
3. 쿠폰
- 쿠폰 화면에서는 사용자들이 적용할 수 있는 쿠폰들을 화면 안에 모아두었다.
- 우측에 있는 '전체받기' 버튼을 선택하면 하나씩 선택해야 하는 번거로움 없이 쿠폰을 다운로드 받을 수 있다.
- 하지만 이미 받은 쿠폰에 대한 정보를 색상 표시나 알림 메세지를 통해 알려주지 않아 혼동을 준다.(다시 다운로드 버튼을 눌러 내가 다운로드를 했는지 안 했는지 확인해야 한다)
- 회원 등급 정보에 따라 색상을 나누어 차별화를 두기는 했지만 등급 정보에 대한 구분 뿐이다.
- (개선점)'전체받기' 버튼을 누르기 전에는 다른 색상으로 표기하고, 사용자가 해당 버튼을 누르거나 하단에서 쿠폰을 선택하여 다운로드 했을 때, 쿠폰 영역에 대한 버튼 색상을 다르게 하여 버튼을 다시 누르지 않아도 눈으로 확인할 수 있도록 수정한다.
- 화면을 아래쪽으로 슬라이드 하면 위로 올라가는 버튼이 생성되도록 하여 사용자가 위로 직접 올리지 않아도 올라갈 수 있도록 편의성을 주었다.
4. 마이랭닭
- 사용자 정보가 포함되어 있는 '마이랭닭' 화면에서는 상단에 사용자 정보를 배치하고 하단에 '나의 권장 칼로리/식단'을 받아볼 수 있는 기능을 제공하고 있다.
- 해당 플랫폼을 사용하고 있는 사람들은 주로 운동을 하거나 건강 관리를 하고 있는 사용자들이 많다. 하지만 본인에게 맞는 식단과 권장 칼로리를 몰라 아무렇게나 섭취하고 있는 사람들도 있을 것이다. 해당 사람들을 위한 기능으로 따로 PT를 받지 않는 사람들이나 관련 정보가 없는 사람들에게도 보다 쉽게 관련 정보를 파악할 수 있도록 편의성을 주었다.
- 화면 하단에 배치되어 있는 '오렌지 멤버스' 같은 경우는 해당 멤버십에 가입하면 받을 수 있는 혜택을 툴팁 형식으로 배치하여 가입을 유도하고 있다.
5. AI 식단
- AI식단 탭에서는 해당 기능에 대한 내용을 화면 가운데에 보여주고, 하단에 '사용법 보기' 버튼을 눌러 처음 사용해보는 사용자들에게 사용법을 제공하고 있다. 버튼을 선택하면 동영상이 재생되고 해당 동영상에서는 관련 기능에 대한 정보와 설명을 자세하게 하고 있다.
6. 피트니스
- 플랫폼 우측 하단에 있는 '피트니스' 버튼을 선택하면 연결되는 화면이다.
- 전체적인 색상과 화면 UI들, 하단 내비게이션 바 구성까지 모두 바뀌면서 다른 플랫폼에 들어온 듯 한 느낌을 주고 있다. 해당 기능을 실행해본 본인의 생각으로는 앞으로는 눌러보지 않을 것 같은 생각이 들었다. 화면에 구성되어 있는 기능들이 '닭가슴살, 건강식품 판매'가 아닌 '운동'으로 전환되면서 혼란을 준다는 느낌이 있다. 특정 마니아층은 자주 사용할 것 같다는 생각은 있지만 이들도 굳이 랭킹닭컴을 눌러 들어온 후 다시 '피트니스' 버튼을 눌러서 해당 서비스를 이용할지, 번거로운 경로로 이용하는 기간이 줄어들지는 않을지에 대한 의문이 있다.
: 요즘은 정말 다양한 취미와 액티비티, 클래스 등을 하고 싶다는 마음만 있으면 어플리케이션 하나만으로도 참여해볼 수 있는 기회가 많다. 본인도 이 전에 프리다이빙을 배워 보고 싶어서 취미 여가 탐색 플랫폼을 찾다가 프립을 알게 되었다. 그때부터 작은 클래스들부터 강좌들까지 이용해보았고, 앞으로도 종종 건강한 여가 생활을 위해 이용할 예정이다. 새해를 맞이하고 또 다른 클래스가 있나 찾아보던 중 레퍼런스 분석용으로 좋을 것 같다는 생각에 분석해 보려고 한다.
> 프립의 구조
: 어플 화면 하단에는 다섯개의 탭으로 분류되어 있고, 전체적으로 심플하게 탭이 나뉘어져 있다.
주로 사용자들은 홈 화면에서 본인이 참여하고 싶은 클래스나 체험을 찾을 수 있다.
나열되어 있는 상품들은 각각 호스트가 배정되어 있고, 고객들은 본인이 원하는 상품을 골라 결제한 후 이용하는 구조이다.
1. 홈
- 어플리케이션의 시작화면인 홈 화면은 상단에 검색 필터가 위치해 있고, 하단에는 카테고리 별로 상품들을 분류하여 아이콘화 하여 나열했다.
-가장 상단에 있는 카테고리와 하단에 있는 카테고리의 버튼들은 아이콘과 텍스트의 묶음으로 조합되어 있다는 공통점은 있지만 크기와 가로로 나열한 것인지 세로로 나열한 것인지에 대한 차이점이 있다. UI 적으로 차이가 나기 때문에 서로 가지고 있는 성격이 다르다는 느낌을 주어 가독성이 좋지만, 어떤 기준으로 분류되어 있는지는 파악하기 어렵다.
- 상단 카테고리 아이콘들을 왼쪽 방향으로 슬라이드 하면 '전체보기' 를 선택할 수 있다. (두번째 캡쳐화면)
해당 화면에서도 유형에 따라 버튼의 크기와 모양, 배열을 다르게 하여 분류했다. UI 적으로 보았을 때 유형마다 그룹을 나누기 좋았지만, 같은 유형 안에서의 배치되어 있는 버튼들의 사진들을 보면 색상이 다양한데 글씨도 작고 흰색이라 가독성이 떨어진다는 단점이 있다.
- 홈 화면에서 추천 프립 영역에 있는 '더보기' 버튼을 누르면 다양한 상품들을 볼 수 있다. 해당 화면에서는 각 상품마다 사진들을 여러장 볼 수 있도록 이미지 영역을 작게 배치했고, 하트 이모티콘의 개수와 별표 이모티콘의 점수와 개수를 숫자로 표기하여 상품에 대한 사용자들의 평가를 한 눈에 볼 수 있다.
- 전체적으로 상품에 대한 대표 이미지들을 1:1 비율로 통일성을 주어 이미지 비율만 봐도 상품에 관련된 이미지임을 인식할 수 있었다.
- 상단에 있는 검색 영역에 있는 햄버거 아이콘을 눌러도 위에서 언급했던 것처럼 '전체보기' 버튼을 눌렀을 때와 동일한 화면이 나온다. '전체보기'에 대한 버튼은 화면 안에서 바로 보이지 않기 때문에 햄버거 아이콘을 눌렀을 때에도 동일한 화면으로 연결시키도록 의도한 것 같아 보인다.
- 하지만 화면이 이동되면 하단에 있는 내비게이션 바가 사라져서 탭을 이동하고 싶을 때 불편함이 있다.
2. 찜
- 찜 화면에서는 상품에 대한 찜 탭과 호스트에 대한 찜 탭으로 구분되어 있다. 한 명의 호스트가 여러개의 상품을 등록할 수 있기 때문에 해당 호스트에 대한 믿음이 생긴다면 호스트가 운영하고 있는 모든 상품을 각각 찜 하는 방식이 아닌 호스트를 찜하게 하여 그 호스트가 판매하고 있는 상품들을 한 번에 볼 수 있도록 했다.
- 찜 화면에서도 상품에 대한 이미지 영역은 1:1로 홈 화면과 통일성을 주었고, 하단에 상품에 대한 설명과 상품평, 후기 내용을 표기하여 사용자가 굳이 상품을 클릭해서 확인하지 않아도 볼 수 있도록 했다.
3. 피드
- 피드 화면은 상품을 직접 결제하고 이용해본 고객들의 활동을 모아볼 수 있는 화면이다.
- 취미 여가 플랫폼에서의 '피드' 라는 탭이 어떤 기능을 하고 있는지에 대한 궁금증이 있었는데 화면 가장 상단에 '도움말' 버튼을 활용하여 사용자들에게 해당 화면에 대한 설명을 제공했다.
- 피드에 올라오는 이미지의 영역을 크게 설정하여 한 화면에 하나의 피드가 가득 차도록 하여 상품에 대한 집중도를 높였다. 그리고 하단에 어떤 상품에 대한 피드인지 클릭할 수 있는 상품 영역도 배치하여 해당 게시물을 올린 사용자에게 직접 물어보지 않아도 확인 할 수 있도록 편의성을 제공했다.
4. 메세지
- 메세지 화면에서는 사용자와 호스트 간에 나눈 대화 내용을 확인할 수 있도록 되어있다.
- 참여 중인 채팅방이 없다면 하단 텍스트에 클릭 이벤트를 주어 자연스럽게 상품을 볼 수 있도록 유도하고 있다.
- 어플리케이션을 설치하고 처음 실행하면 기기 알림에 대한 설정을 할 수 있었는데, 해당 알림이 꺼져 있어서 메세지 확인이 어려울 상황을 대비하여 하단에 붉은 색으로 기기 알림 설정에 대한 여부를 알려주어 인식할 수 있도록 했다.
5. 마이프립
- 마이프립 화면에서는 본인 계정에 대한 정보와 내 활동, 고객센터 등의 서비스를 볼 수 있다.
- 만약 본인이 호스트로 등록해야 하는 경우를 위해 상단에 비교적 넓은 영역으로 버튼을 배치했고, 사용자의 시선 이동을 생각하여 해당 버튼에 대한 설명을 왼쪽에 배치하고 관련 아이콘을 오른쪽으로 배치하였다.
> 개선 방안
- 컬러 팔레트와 서브 카테고리 구분을 더 일관되게 만들어 시각적 복잡성을 줄이고, 가독성을 높이기 위해 텍스트 크기와 대비를 조정한다. (햄버거 버튼을 눌렀을 때 이동되는 화면)
- 개인 추천 시스템을 개선해 사용자의 다양한 관심사를 반영한다.
- 필터링 옵션을 상품 검색창 안에 간단하고 배치하여 상품 카테고리에 대한 접근이 더욱 간편하도록 한다.
- 햄버거 버튼을 눌렀을 때 이동되는 화면이나 검색창을 눌렀을 때 화면이 연결되면 화면 하단에 내비게이션 바가 사라져서 생기는 불편함을 줄이기 위해 내비게이션 바는 항상 고정되도록 한다.
> 여러 이커머스 어플들에서의 공통점을 찾고 그 중 가장 매력적이라고 생각한 화면을 클론디자인 하기
[ 피그마에서 작업한 화면 ]
개인 정보는 도형으로 가림
[ 해당 화면이 매력적이라고 느꼈던 이유 ]
: 장바구니 화면에서 이미 사용자가 상품에 대한 정보를 확인했다는 가정 하에 결제화면에서는 해당 정보를 접혀 있는 상태로 볼 수 있도록 했고, 필요에 의한 사용자는 클릭하여 펼쳐서 볼 수 있도록 했다. 그리고 가장 중요한 주소 정보를 상단에 배치하여 사용자가 본인의 거주지를 가장 먼저 확인할 수 있도록 했다. 결제 수단도 ‘카카오페이/계좌 간편결제/일반결제’ 의 내용을 한 줄씩 배치하여 가독성을 높였고, 해당 어플의 주 사용자 층이 젊은 여성이기 때문에 해당 연령층이 자주 사용하는 결제 방식인 ‘카카오페이’ 결제 방식을 상단에 배치하였다.
> 여러 이커머스 어플들에서의 공통점을 찾고 그 중 가장 매력적이라고 생각한 화면을 클론디자인 하기
[ 피그마에서 작업한 화면 ]
좌 - 원본, 우 - 클론 디자인
[ 해당 화면이 매력적이라고 느꼈던 이유 ]
: 사용자가 혹시나 놓친 쿠폰에 대한 정보를 장바구니 화면에서 다시 확인할 수 있도록 하여 해당 어플에 대한 이용 신뢰도를 높였고, 상품에 대한 옵션 정보(오트밀/ver.155 ~)를 하단에 다른 색상으로 표기하여 사용자가 어떤 옵션의 상품을 선택했는지 정확하게 인지할 수 있게 했다. 그리고 하단에 ‘옵션변경’ 버튼과 상품 개수를 볼 수 있게 해서 장바구니 화면 안에서 옵션과 상품개수를 화면 이동 없이 수정할 수 있도록 했다.
