딛자인 데이 :: 06 User Profile
유저 프로필을 디자인해보자! (feat. 내 책장)
여섯 번째 딛자인 데이는 유저 프로필입니다.
라프텔 앱에서 User Profile이 주가 되는 곳은 '내 책장' 이란 페이지다.
그래서 오늘은! 내 책장을 리디자인 해보려고 한다.
1. 목표
라프텔의 <내 책장> 페이지 리디자인.
2.리서치 내용
라프텔 iOS 앱현재 라프텔 아이폰 앱의 내 책장 모습이다.
먼저 UI 구성을 하나씩 살펴보자면,
1) 상단에 유저 프로필과 닉네임이 나온다. (닉네임은 설정에서 바꿀 수 있고, 프로필 사진 아직 바꾸지 못함.)
2) 오른쪽 상단에 나의 덕력 현황을 볼 수 있는 덕력보고서 버튼이 존재.
3) 그 아래 내가 보고 싶어 한 작품들 / 평가한 작품 / 명작 추천한 작품 / 추천 안 받기 한 작품 / 내가 쓴 리뷰를 볼 수 있는 버튼들이 있다.(생각해보니 iOS는 리뷰 기능이 아직 구현되지 않았다.)
4) 내가 보유한 라프텔 포인트 얼마나 있는지 보여줌.
5) 최근 본 작품 및 구매 작품 목록을 볼 수 있는 버튼 존재.
이제 이것을 어떤 식으로 바꾸면 좋을지 하나씩 생각해봤다.
1) 상단에 유저 프로필과 닉네임이 나온다. (닉네임은 설정에서 바꿀 수 있고, 프로필 사진 아직 바꾸지 못함.)
- 프로필 사진이 보이는 곳의 여백이 상당히 좁아서 답답해 보인다. 여백을 주자.
- 후에 프로필 사진 바꾸는 기능을 감안하여 어떤 사진이던 돋보일 수 있게 무채색 컬러로 지정해주자.
(background는 거들뿐...)
- 프로필 사진과 닉네임을 바꿀 수 있는 것을 대충이라도 알 수 있도록 상단 구석에 설정 버튼을 넣어서 프로필 수정으로 넘어갈 수 있도록 해주자.
2) 오른쪽 상단에 나의 덕력 현황을 볼 수 있는 덕력보고서 버튼이 존재.
- 라프텔은 만화 추천 서비스에서 출발하였는데 덕력보고서가 구석탱이에 짱박혀 있는 모습을 보자니 눈물이(...) 차라리 덕력보고서를 큰 메뉴로 빼서 좀 더 잘 보이게 해주자.
3) 그 아래 내가 보고 싶어 한 작품들 / 평가한 작품 / 명작 추천한 작품 / 추천 안 받기 한 작품 / 내가 쓴 리뷰를 볼 수 있는 버튼들이 있다.(생각해보니 iOS는 리뷰 기능이 아직 구현되지 않았다.)
- 이 부분이 참 뭔가 단조롭다고 느껴졌다. 현재 UI 디자인에서 HOT한 스타일(?)이라 할 수 있는... 누군가가 Complexion Reduction이라 칭하고 있는... 그 디자인을 적용시켜보자.
4) 내가 보유한 라프텔 포인트 얼마나 있는지 보여줌.
- 포인트는 빼버렸다. 내 책장은 작품과 직접적으로 관련된 것만 모아 놓은 페이지라고 정의하고 보자면 포인트가 저곳에 있는 것은 다소 어울리지 않는 것 같다고 생각되었다. 최근에 안드로이드 앱에서도 포인트는 더보기 탭으로 위치를 이동시켰다.
5) 최근 본 작품 및 구매 작품 목록을 볼 수 있는 버튼 존재.
- 최근 본 작품이 있어야 하는 의문점이 들었다. 왜냐하면 홈 화면에서 바로 상단에 보이고 있기 때문이다.
근데 지금 쓰다 보니 생각난 건데, 아직 있는 기능은 아니지만 홈에서 최근 본 작품을 지우는 기능을 넣었을 때,
이 최근 본 작품 페이지에서 삭제를 해야 할 터인데. 그럼 있어야 할 것 같다.
근데 또 생각난 건데... 홈에서 꾸욱- 눌러서 지울 수는 없는 건가? 내일 iOS 개발자한테 물어봐야겠다.
아무튼 결론은 일단 두는 것으로.
+) 추가
6) 이제 곧 서비스에 SVOD, 즉 월정액 서비스가 들어갈 것 같은데... 그때 사용자가 이용권을 사용하고 있다는 것을 Profile 사진에 표시를 해주거나 텍스트로 명시해놔야 할 것 같다.
만약 사진에 표시를 한다면 소셜 로그인한 사람들의 프로필 사진과도 잘 어울려야 하는 UI여야 할 것이다.
3.GUI 작업
따란. (너무 피곤해서) 아주 빠르게 완성해보았다.
1) 여백을 아주 과감하게 주었다. 시원하다.
2) 백그라운드는 현재 안드로이드에서 쓰이는 컬러로 동일하게 맞추었다. 확실히 바뀐 게 어떤 프로필 사진을 가져다 놓아도 안정감 있는 컬러인 것 같다.
3)덕력보고서 버튼이 있던 자리에 설정 버튼을 넣었다. 근데 지금 보니깐 너무 white라서 좀 튀는 감이 없지 않아 있는 것 같다. 오퍼시티를 조금 낮추거나 그레이톤으로 바꿔야겠다.
4) 짱박혀 있던 덕력보고서가 리스트 형식의 메뉴로 탈바꿈. 따따라라따~~~따라라따라라라~
깜찍함을 +1 하기 위해 Pie chart 아이콘도 넣어주었다.
5) 단조웠던 보고싶다, 평가작품, 명작추천을 아주 대빵 크게 세 개를 뙇!! 볼드 하게 가운데에 넣어주었다.
6) '월정액 서비스를 이용 중이다.'라는 것을 어떻게 표현할지 고민이었다.
처음엔 작게 딱지를 넣어봤는데 그 딱지를 뭐라고 네이밍을 해야 할지 애매했다. 프리미엄 서비스면 간지 나게 Premium 이런 식으로 넣었을 텐데. 딱히 생각이 나지 않았다. 조그마한 동그라미를 구석탱이에 찍어보기도 했지만 실패! 결국 유튜브 레드처럼 뭔가 프로필 사진 테두리에 효과를 주는 게 좋을 것 같다고 판단하였다.
컬러는 월정액권 컬러로 밀고 있는 periwinkle과 개이득 이벤트 컬러인 light green을 그라데이션으로 해서 적용해봤다. 근데 생각해보니 그냥 월정액권 컬러만 썼어도 될 것 같다.
(근데 이거 보자마자 한 팀원이 보석의 나라 색깔 같다고.ㅋㅋ 이를 이제부터 보석국 컬러라 칭하겠다.)
4. 결론 및 느낀 점
1) 이렇게 매주 하루는 온종일 개인 작업으로 회사의 서비스를 리디자인하고 있으니,
뭔가 이런저런 많은 일들 속에 파묻혀 있다가 이제야 제대로 거울 속 나 자신을 마주하고 있는 느낌이 든다...
하지만 현실은(...) 더 중요한 것들이...ㅋㅋㅋ작품 상세 페이지도 9월에 시작했는데 뿡빵뀨님 글로벌 페이지 및 월정액 서비스에 밀려...(더 이상의 설명은 생략한다.. 크흡...)
2) 그리고 iOS 앱을 보다 느낀 건데 안 되는 기능이 생각보다 많았다. 예를 들어 최근 본 작품을 삭제할 수 있는 편집 버튼이 분명히 있는데 누르면 무반응이다.(허허) 그리고 내가 쓴 리뷰들을 보는 곳도 현재 버튼 구현은 되어 있지만 리뷰 기능이 아직 준비 중여서 볼 수는 없다. 안 되는 기능을 굳이 넣어놔야 하는 생각도 들었다.
3) 디자인 다 완성하고 나니깐 iOS 하단 탭도 바꿔야 한다는 것을 깨달았다. 그래서 급한 대로 안드로이드의 한단 탭을 캡처해서 가져왔다. 근데 저것은 사실 안드로이드의 하단 탭이지만 당시 iOS를 염두에 두고 만든 것이었다. 하하. 찰떡같이 어울리네. 저것도 얼른...ㅠㅠ...
감사합니다.
