[UX/UI 사전캠프_14일차] 웹 서비스 홈 화면 분석

자주 사용하는 웹 서비스 홈 화면 분석

- 웹서비스 이름 : 네이버 웹툰
 
1. 웹 서비스 선정

1. 선정 이유 : 클론 디자인을 하기도 했고, 평소 자주 사용하는 서비스여서 선정하였다.
                      주로 앱을 사용하는데, 웹 환경은 어떻게 다른지 궁금했다.
2. 서비스 소개 : 다양한 네이버 웹툰 컨텐츠를 제공

 
2. UI/UX 디자인 분석

1. 화면 구성
   • 요일별 웹툰을 인기순, 업데이트순, 조회순, 별점순으로 나눠서 볼 수 있는 컨텐츠가 제일 상단에 있다.
   • 아래는 인기웹툰, 신작웹툰 등 추천 웹툰으로 구성되어있다.
2. 클릭 시 동작
   • 마우스 Hover시에 웹툰 커버 이미지가 살짝 확대된다.
   • 신작 웹툰은 Hover 할 때도 그림이 확대되지 않는다. 대신 다른 웹툰 커버 이미지와 달리 사각형 박스 형태를 벗어난 캐릭터들이 튀어나와 보이는 효과를 준다.
   • 마우스 클릭시 웹툰 회차가 보이는 페이지로 넘어간다.
3. 인상깊은 UI/UX와 이유
   • 중요도에 따라 네이버 메인 컬러 그린 > 업데이트 알림 레드 > 성인인증 오렌지, 이 3가지 컬러와 흑백으로만 구성되어 있다.
   • 웹툰 커버 이미지들이 화려하기 때문에 정신없어 보일 수 있는데, 다른 요소들은 컬러를 최대한 배제하여 심플해 보인다.

 
3. 개선 아이디어

1. 요일별 웹툰에서 “관심웹툰” 버튼 추가
   • 개선할 점 : 요일별로 모든 웹툰이 다 보여져서 내가 보는 웹툰을 찾기가 힘들다.
                         마이페이지에 있는 관심웹툰은 요일별로 나눠져 있지 않다.
   • 개선 아이디어 :
     1. 요일별 웹툰에서 관심웹툰순으로 볼 수 있는 버튼을 새로 만든다.
     2. 마이페이지에서 관심웹툰을 요일별로 나눠 볼 수 있도록 한다.
2. "UP" 뱃지 개선
   • 개선할 점 : 웹툰 제목 글자 앞에 다 선으로 되어 있어서 조금 복잡해보인다.
   • 개선 아이디어
     1. Filled 형태의 뱃지로 바꾼다.
     2. N 한 글자를 넣고, 원형 뱃지로 바꾼다.

 

기존 홈 화면 이미지

 

개선안A : 요일별 관심웹툰 + Filled된 뱃지 / 개선안B : 요일별 관심웹툰 + 원형의 한글자 뱃지

 
 
WIL (Weekly I learned)

 
FACTS
이번주는 월요일에 휴일이 있어서 일정이 더 바빴던 것 같다.
4주차 강의를 끝으로 PPT보다 쉬운 피그마 강의를 다 끝마쳤다.
UXUI 아티클 스터디로 UI를 위한 색에 대해서 공부했고,
팀원들과 같이 네이버 웹툰 웹페이지 클론 디자인을 했다.
그리고 오늘은 자주 사용하는 웹 서비스 홈 화면 분석을 진행했다.
 
FEELINGS
이번주도 정말 정신이 없었다.
특히 클론 디자인이 어렵고 정신이 없었는데,
원래 이게 이틀동안 하는건데 우리 팀은 하루만에 다 완성해서 더 어려웠던 것 같다.
그래도 다음날에 여유를 조금 즐길 수 있어서 좋았다.
벌써부터 살짝 지치는 느낌이 있지만 더 힘내봐야겠다.
 
FINDINGS

[이번주 강의 내용 정리] * 다양한 플러그인들 : Mockup, Unsplash, Wireframe Designer,     Material Symbols, Product Planner, Charts, Color Palettes * PDF로 묶어서 내보내기 : File > Export frame to PDF * 네이밍 정리 : Crtl+R * 컴포넌트 네이밍 정리 : 레이어명에 "/"로 폴더링 구분 * 레이어 한번에 닫고/열기 : Ctrl + 세모버튼 * 프레임 요소 다 보기 : 레이어 클릭 후 엔터 * 요소들 한번에 정리하기 : 정렬 끝에 Tidy up * 중요한 단축키 R : 사각형 그리기 F : 프레임 생성 I : 스포이드 툴 Ctrl+shift+] : 맨앞으로 가져오기 Ctrl+shift+[ : 맨뒤로 보내기 Ctrl+shift+<,> : 폰트 사이즈 조정 Ctrl+shift+V : 스타일에 맞춰 붙여넣기 Ctrl+G : 그룹 Ctrl+shift+G : 그룹해제 Alt+Double Click : 이미지 자르기 Ctrl+alt+C,V : 속성 복사, 붙여넣기

 
이번주 강의 내용은 엄청 어렵진 않았다.
클론 디자인을 하면서 지금 보니까 오토 레이어를 안한게 많아서
좀 더 수정해야 할 것 같다. 아직도 오토레이어는 어렵다!
웹 분석을 처음 해봤는데 재밌으면서도 어려웠다.
UX 디자이너에게 중요시 되는 분석력을 키워나가는 과정같다.
남들이 발견하지 못한 중요하고도 핵심적인 문제점들을 발견하고 싶다.
해결점까지 잘 떠올릴 수 있도록 아이디어가 샘솟았으면 좋겠다.
계속 많이 경험 해보고 노력하면 늘겠지?
 
FUTURES
여전히 컴포넌트라는 무거운 짐이 남아있다.
언제 다 끝내냐. 사전 캠프 끝나기 전이라도 다하면 좋겠다.
확실히 클론 디자인이 많이 배우는 것 같다.
앞으로 좋은 웹, 앱들을 많이 클론 해봐야겠다.
많이 하면 할 수록 나의 거대한 자산이 될 거 같다.