기획
프로필 화면 어떻게 구성할까?
9분
2021.01.11.3.0K
프로필 화면, 왜 중요할까요?
(에디터, 동동) 저는 서비스에서 제일 재밌는 순간이 프로필을 바꾸는 순간이에요! 메신저의 경우, 사진을 고르고 상대에게 어떻게 표현될지 살펴보는 재미있고요. 프로필의 정보는 나의 정보를 표현하는 것 뿐만 아니라 그 정보가 서비스 내의 어떤 기능과 연결되는지 살펴보면 재밌는 사례가 많습니다! (에디터, 재그마스터) 프로필 - 마이 페이지는 특정 서비스에 자리 잡은 '유일한' 사용자를 위한 공간이에요. 커머스라면 구매한 상품이나 찜한 상품을 볼 수도 있고, SNS라면 내가 업로드 한 게시글을 모아볼 수도 있죠. 또 메신저는 나를 표현하는 공간이 되기도 하고요. 이전 뉴스레터 주제였던 회원가입과 로그인은 상대적으로 서비스 성격을 덜 타지만, 프로필은 서비스 성격에 맞게 구성하는 것이 정말 중요합니다. 또 서비스가 밀어 넣고 싶은 기능과, 사용자와 직접적으로 관련 있는 기능들 간 균형이 필요한 곳이기도 하죠.프로필 화면, 어떻게 구성할까요?
1. 로그인 전후, 데이터 유무에 따라 달라지는 프로필 화면
배달의 민족, 요기요
(에디터, 재그마스터) 배달의 민족과 요기요를 먼저 살펴볼까요? 먼저 공통점 입니다. 위치 : 두 서비스 모두 하단 탭 기준 오른쪽 끝에 위치 표현 : 이름에는 조금 차이가 있지만 MY라는 표현과 서비스명을 함께 활용 찜 : 일반 커머스와 달리 원하는 메뉴를 바로 찾아 결제하는 '즉시성'이 더 크기에 찜한 가게를 별도 메뉴로 활용 이어서, 차이점 입니다. 아이콘 : 텍스트가 함께 있지 않았다면 배달의 민족의 아이콘은 휴리스틱 관점에서 조금 어렵게 느껴짐 우측 상단 : 배달이 민족은 '알림' 아이콘을, 요기요는 '설정' 아이콘을 각각 활용하고 있음 배너 영역 : 배달의 민족은 로그인 후, 비활성화 되며 요기요는 사이즈가 달라질 뿐 계속 유지 등급 안내 : 요기요는 마이페이지 내 페이지 전환 없이 다음 등급까지 남은 주문 횟수를 정보로 보여줌 알림 : 배달의 민족은 쿠폰이 새로 들어왔음에도 하단 탭 내 시각적인 안내가 없지만 요기요는 적극적으로 안내
배달의 민족, 요기요
제가 가장 관심 있게 본 내용은 로그인 전, 후의 데이터 변화입니다. 로그인 전 : '개인정보'에 해당하는 내용을 볼 수 없을 뿐 나머지 공통 메뉴들은 확인 가능 로그인 후 : 등급과 별명을 가장 먼저 보여주며 주문 시 사용 가능한 혜택과 직접 참여한 리뷰 콘텐츠 순으로 배치배달의 민족은 마이페이지 내 사용자 관련 정보를 '숫자'로 표기 하지 않고 아이콘으로 보여주되, 각각을 탭해 상세페이지로 이동해야 합니다. 반면 요기요는 쿠폰, 포인트, 리뷰 관리를 모두 숫자로 처리하고 있어 로그인 전,후의 값이 다르게 나타나죠. 배달의 민족은 마이페이지 내 알림을 확인할 수 있으며, 차이점에서 확인한 바와 같이 하단 탭 내 별도 안내를 해주지 않기에 사용자가 쿠폰을 획득했다 하더라도 쉽게 인지할 수 없습니다.(설정에서 푸시 알림을 On 하지 않는 이상) 하지만 요기요는 로그인 후 바로 사용 가능한 혜택을 수치화 해 보여주고, 데이터에 변화가 있을 때 하단 탭 내 안내해 주기에 더 쉽게 확인이 가능했습니다. 에디터, 재그마스터의 덧붙임 : 서비스 성격을 충분히 고려해야 합니다. 만약 사진을 공유하는 SNS라면 어떨까요? 회원가입 직후 업로드 한 이미지가 없기에 빈화면으로 남을 가능성이 높습니다. 이 경우 업로드를 유도한다거나 다른 사용자들이 올린 이미지를 확인 할 수 있도록 하는 등 행동을 멈추지 않고 이어갈 수 있는 방법을 고려해야 합니다.
2. 서비스 성격에 따라 달라지는 프로필 화면
링크드인
(에디터, 동동) 링크드인은 프로필 화면에 채용과 커리어 관리를 위한 정보를 초기에 입력하도록 유도합니다. 다소 길게 느껴질 흐름이지만 구직 중 상태와 최근 커리어 등 필요한 내용을 짧게 입력 할 수 있도록 구성해 탄탄한 프로필을 입력하게 하는대요. 학생, 직장 등에 따라 입력 받는 값과 과정을 다르게 가져가고, 입력 완료 후에도 홈 화면 상단에 프로필 업데이트 관련 안내를 내보내죠. 사실 이와 같은 과정은 사용자에게 꽤 귀찮게 느껴질 수 있기에 링크드인 각 정보를 왜 입력해야 하는지 끊임없이 알려주는 것이 포인트죠. 서비스에게 꼭 필요한 정보를 사용자로 하여금 어떻게 입력 받을 지 확인 할 수 있는 좋은 사례라고 생각합니다.
카카오톡, 텔레그램, 스카이프, 위챗
(에디터, 동동) 다음은 메신저 사례를 살펴볼게요, 메신저는 프로필로의 진입이 가장 활발한 서비스 중 하나입니다. 나를 표현 할 방법을 계속 고민하는 사용자들로 인해 내 프로필과 지인들의 프로필을 동시에 접하게 되기도 하고요. 국내 대표 카카오톡과 몇 개의 메신저 프로필을 함께 확인해봤습니다.카카오톡 : 나만의 아이덴티티 표현을 위한 '꾸밈, 편집' 기능을 다채롭게 배치(작년 업데이트 된 버전) 텔레그램 : 소개 정보 입력을 위한 가이드(서울에 사는 23살 디자이너입니다 등) 제공 스카이프 : 이름과 프로필 이미지 다음에 공유 기능을 활용 위챗 : QR코드를 통해 사용자 간 네트워크가 더 빠르게 적용 될 수 있도록 유도
번호 기반의 메신저는 프로필 공유보다 본인을 잘 나타내는 방법에 집중한 모습입니다. 반면, 번호 외 계정을 기반으로 하는 메신저는 사용자 간 연결을 위해 프로필 공유에 좀더 신경쓰는 UI를 보여주고 있습니다. 이렇듯 같은 프로필 화면에서도 어떤 데이터가 중심이 되는지에 따라 메뉴 배치는 달라질 수 있습니다. 에디터, 동동의 덧붙임 : 프로필 이미지에서 또 중요한 것은 라운딩 처리입니다. 사용자가 선택한 이미지를 주로 원형으로 크롭을 하는데요. 같은 사이즈 기준, 원형이 시작적으로 더 작게 , 안정적으로 느껴지기 때문입니다. 같은 30px이라 했을 때 사각형보다 라운드 형태가 작아 보여요!
29cm, 쿠팡, 이마트, 신세계 홈쇼핑
(에디터, 재그마스터) 커머스는 마이페이지가 가장 중요한 서비스 중 하나입니다. 위 이미지는 차례로 29cm, 쿠팡, 이마트, 신세계 홈쇼핑마이페이지 모습인데요. 먼저 간략하게 특징을 살펴보겠습니다. 29CM : 사용자 이름과 최근 본 상품, 좋아요 한 상품을 가장 중요한 정보로 생각 쿠팡 : 구매후기, 찜한상품, 최근본상품, 자주산상품 등 사용자의 행동에 따른 데이터를 가장 중요 이마트 : 쿠폰, 신세계포인트, S-머니, S-포켓, 적립 등 쿠팡과 비슷하지만 결제 시 혜택을 더 중요 신세계 홈쇼핑 : 적립금, 쿠폰, 등급, 상품평, 1:1문의 등 결제와 기타 행동에 필요한 주요 기능이 잘 정리된 모습사용자 입장을 완벽하게 대변할 순 없지만 제 기준에서는 신세계 이마트와 홈쇼핑이 더 잘 만들어진 공간이라는 생각이 들었는데요. 결제에 도움이 되는 혜택은 물론 결제 후 배송 과정을 화면 이동이나 내림 없이 한 눈에 파악할 수 있었기 때문입니다. 일반적으로 커머스는 구매를 하러 들어가거나, 배송 상태를 보러 들어가는 경우가 많기 때문이죠. 특히 신세계 홈쇼핑의 경우 아예 '최근본상품'을 과감하게 하단 탭에 적용, 마이페이지에는 사용자와 직접적으로 관련된 기능만 정리해 쓸데없는 정보를 보지 않아도 된다는 점이 좋았습니다.
넷플릭스, 만화경, 삼성 멤버스
(에디터, 재그마스터) 프로필 이미지는 보통 사진을 그 순간 직접 촬영하거나, 촬영된 이미지를 갤러리에서 불러와 선택하게 되는데요. 아무래도 본인을 잘 나타낼 수 있는 방법 중 하나가 좋아하는 사진 또는 셀피를 등록하는 것 이기에 자주 선택되는 방법이라고 할 수 있습니다. 작년, 넷플릭스가 오리지널 콘텐츠에 등장하는 캐릭터들을 프로필 이미지로 활용할 수 있도록 해 좋은 반응을 얻은 바 있었습니다. 계정 타입에 따라 여러개의 프로필을 사용할 수 있는 넷플릭스는 가족 간, 연인 간, 친구 간 나만의 프로필을 명확하게 ‘인식’ 할 수 있는 방법이 필요했기에 이를 더 재미있게 활용할 수 있도록 하는 방법으로 캐릭터들을 활용했던 것이죠. 재치있는 방법이라는 생각이 들었습니다. 서비스의 성격과 구조 내 프로필이 잘 반영된 사례라고 생각했습니다. 국내에서는 만화경과 삼성멤버스에서 재미있는 사례를 발견했는데요. 만화경은 넷플릭스와 비슷한 방법을 활용하고 있었습니다. 만화경 내 작품 캐릭터들을 프로필로 지정할 수 있었는데요. 작품 속 캐릭터를 만나볼 수 있다는 즐거움, 역으로 이 캐릭터가 나오는 만화를 봐야겠다는 생각. 충분히 사용자로부터 이끌어 낼 수 있지 않을까 싶습니다. 마지막으로 삼성 멤버스입니다. 예상 밖이었어요. 만화경이나 넷플릭스처럼 작품 - 캐릭터 형식의 연결고리는 아니었지만 글로벌 서비스 답게 다양한 인종을 캐릭터로 활용하고 있었습니다. 디폴트 이미지라고 하죠. 우리 서비스를 처음 접한 사용자들은 프로필 이미지가 설정 되어 있지 않을 가능성이 높기에, 서비스단에서 미리 정해진 이미지를 기본 프로필로 설정하는 경우입니다. 소셜 로그인을 할테니까- 프로필 이미지는 다 기존 소셜에 저장된 데이터를 쓰겠지. 그냥 사람 모양으로 아이콘 하나 만들어 넣어 두면 되겠지. 라는 생각도 상황에 따라 충분할 수 있다고 생각하지만, 디테일의 간격이라고도 생각해볼 수 있지 않을까요?프로필 화면에 대해 정리하면,
마이페이지가 사용자의 행동 또는 사용자와 밀접하게 관련된 정보(혹은 데이터)를 보여주는 공간이라는 것을 기준으로 한다면! 6가지를 조건을 고려하면 좋습니다!- 사용자들이 마이페이지를 통해 무엇을 할 수 있는지 최초 진입 기준 명확하게 알려주기 - 사용자와 직접적인 관련이 있는 정보를 가장 먼저 보여주고, 중요도에 따라 UI 구성을 달리 가져가기 - 나의 행동에 따라 달라지는 데이터나 등급 등을 한 화면에서 확인할 수 있게 도와주기 - 서비스 성격에 맞는 표현을 활용하기 - 앱 설정 기능과 마이페이지 내 기능을 구분하기 - 일반적인 구성 외, 사용자들을 위한 디테일을 고려하기
로그인하고 자유롭게 의견을 남겨주세요.
