[02/24 부트캠프] 최종 프로젝트: PC ver. 디자인(포기)

 

내일배움캠프 D-83 (18주차)

 

📌To Do List

* pc버전 디자인 ✅

* pc/앱 사례 분석 ✅

 

 

 

 

01 PC버전 디자인

✏️PC버전은 못하게되었다ㅠㅠ

오전까지 시안 만들어서 튜터님께 갖고갔다.

이번엔 정말 레퍼런스를 더 많이 찾았고 괜찮겠지? 하고 만들었던 디자인 모두 어색했나보다.

웹 pc로 최종발표까지 하기 어려울 것 같다는 말을 들었고

기초가 없는 것 같으니 다시 처음 와이어프레임을 그리는 것을 하라고 하셨다.

 

pc버전을 끝까지 끌고 못간다는게 너무 아쉬웠다.

할 수 있을 것 같은데 감이 잡히지 않는다 ㅠㅠ

 

나름 괜찮다고 생각한 디자인 시안도

튜터님께서 다 똑같다고 하셨다.

디자인만 다를 뿐이지 다 똑같다고 하셨다.

 

 

나름 괜찮게 했다고 생각했는데

우리 앱 디자인과 통일성이 없게하긴했다..ㅋㅋ ㅠㅠ

네이버 홈페이지보고 참고했는데 마냥 참고하기만 한다고 되는게 아닌 것을 알았다..

앱디자인할때는 잘했는데, pc디자인은 너무 어려웠다 ㅠㅠ

 

 

 

✏️지친 팀원들 ㅋㅋㅠㅠ

나는 총 2번의 시안을 만들었지만

팀원들은 3번의 시안을 제작한 셈이다.

다들 지쳐서 자기는 와이어프레임도 못할 것 같다는 말을 했고

할 사람만 pc버전을 해보기로했다.

목표는 취업으로 잡고, 일단 캠프에서 해볼 수 있는데까지 해보기로했다.

 

이걸 모른 상태로 캠프가 끝난다면 너무 너무 아쉬울 것 같았다 ㅠㅠㅠ

 

팀원들한테 거의 2-3차례 물어본 것 같은데

3명의 팀원들이 포기했고

나머지 부리더와 나만 pc버전을 뜯어보기로했다.

 

 

✏️홍튜터님 한 번 더 방문

다른 튜터님은 어떤 식으로 피드백을 주실 지 궁금하기도하고

강튜터님께서 하신 말씀의 감을 잡아보고자

홍튜터님을 찾아뵈었다!

 

구체적으로 어떤 부분이 부족한지 여러가지 물어봤다.

정말 부족한 부분이 많았다 ㅋㅋㅋ ㅠㅠ

 

먼저 우리 앱에서 가장 중요한 핵심기능이 pc버전에서는 잘 안보인다고 했다.

그래서 pc환경과 모바일 환경의 차이를 이해하는 것이 중요하다고 말씀해주셨다...ㅋㅋ

💁‍♂️홍튜터님 피드백

- 중복기사를 요약해서 만든 뉴스인지 pc버전에서는 확인 불가.
- 핵심기능이 동일하게 보여져야함. 몇개의 기사가 취합된걸까? 원본기사 보려면 어떻게 해야할까? 모바일, PC연관성이 없어보인다.
- 그냥 리스트라고 말씀하신 부분 → 모바일에서 보여주고자하는 기능? 같은거를 보여주면됨 (핵심기능이 잘보여줘야한다!!!)그 다음이 UI.
- 점을 찍더라도 왜 찍었는지 이유가 있어야한다. (이 부분은 처음 캠프에 왔을 땐 잘 인지됐었지만 지금은 까먹고 그냥 디자인만 하고있었는데 또 들으니까 그 기억이 다시 상기됐다. 아 맞아.. 그랬었지!)
- 디바이스의 환경 잘 이해하기. 대신 핵심기능을 잘 보이게. pc로 옮길때 핵심 기능, 메시지로 옮길수있도록 해야한다. 많이 직접 만들어보는 게 좋다. 좋은 방법은 PC와 모바일 서비스를 같이하는 서비스 선정하기. 모바일이 pc로 어떻게 확장되는지, pc에서 모바일로 어떻게 확대되는지pc에서 작업하든, 모바일에서 작업하든 똑같은 환경을 만들어줘야한다.
- 어려운 작업 맞다. (이것저것 고려해볼 사항들이 많았다. 글자 수도 모두 API이기 때문에 만약 글자 수가 오버돼버렸을 때 디자인이 틀어지는 부분은 없는지도 고려해봐야한다고 하심)
- 예전엔 모바일, pc디자이너 구분이 있었지만...연습해보는방법밖에 없다! 각 디바이스 환경을 이해하는게 첫번째!
ex. 모바일: 가로폭 좁고, 터치영역, 리스트를 캐러셀로 표현.pc: 가로폭이 넓다, 캐러셀이 아닌 더보기 버튼 이용한다던지 캐러셀 표현할수도있긴함.
- 폰트 크기, 분석하기. 왜 이렇게 했는지 사용자 입장에서 어느정도 유추가 가능해야한다. (이 ui를 사용한 이유가 이것이었구나! 해야하는데 왜 이렇게 만들었지? 하는 생각이 들면X)그냥 하는 디자이너는 없음. 이거 왜 이렇게 했나요? 했을 때 대답할수있어야한다. (그냥 네이버에서 이렇게 했어요 → 납득할수 없는 디자인이기때문에 바뀌어야함)네이버에서 어떤 의도로 이런 디자인을 했을까? 어느정도 추측해야한다. 그 후에 우리 서비스에 의도를 갖고 그 ui대입할 때 문제없는지. (예측 가능성있는 디자인)

<내 시안에 대한 피드백>
- 축약해주고 요약하는 서비스인데 여기안에서도 어떤 서비스인지? 무슨 기준으로 나뉘어져있는지? 인기태그는 무슨 기준인지? 의문이 들어서 혼란스럽다 → 정리됐으면 함. 정말 사용자가 원하는 것이 카테고리의 태그가 맞는지? 사용자가 원하는기준으로 태그 정리하면 좋을 것 같다.(우리가 원하는게 아닌)
- 그룹핑이 더 디벨롭 돼야할 것 같다. 누가봐도 이 태그는 이 기사에 대한 내용이다!
- 메인 태그가 같은 라인에 같은 레이아웃으로 있는게 맞을까? 세개 정렬, 디자인이 다 다르고 기능도 다르다 → 복잡함. 이 레이아웃이 맞을까!? 고민하기.
- TOP 8 워딩 애매하다.
- 프라이머리 컬러가 너무 많이 쓰였다.
- 메인 태그의 볼륨을 크게 해서 가져가는게 맞나? 싶다. 시각적 위계 봤을 때 한눈에 보는 top8이 먼저 눈에 들어와야한다.
타이틀이 안보일정도로 태그영역이 너무 눈에 들어온다. 그래서 프라이머리컬러가 너무 많이 들어간것처럼 느껴짐.
면적의 범위를 조절해보는게 좋을 것 같다.
태그의 기준 잡았다면 동일하게 적용되는게 좋다. 리스트 좌우마진 태그 영역, 상단 태그 영역의 통일감있게 가져가기.
- 기준을 정했으면 ui마진, 컬러 등은 일관되게 넣어주는 게 좋다. (카테고리 영역이 타이틀과 상세영역이 왜 다른가?) -> 이유가 있어야함!

 

뭐 이런 피드백을 듣고

마지막으로 클론디자인 같은 것을 해보라고 하셨다.

눈으로 보는 건 절대로 나아질 수 없다.

직접 해봐야한다는것.

눈으로 본다고 다 아는것이라고 생각하는데

막상 그렇지 않다는 걸 다시한번 느꼈다.

아는데도 자꾸 눈으로만 보는것도 공부라고 생각하는..ㅋㅋ

직접 해보는게 더 중요하다!

 

 

 

 

 

 

 

02 PC/앱 사례 분석

✏️쿠팡플레이 분석

와이어프레임을 만들기 전에 먼저 앱에서 웹pc로 만든 사례가 있는지 먼저 분석하고

그 다음에 와이어프레임을 만들어보기로 했다.

 

일단 쿠팡플레이의 경우 앱, 웹 모두 지원된다.

ui의 구조를 뜯어보듯이 하나하나 뜯어보기로했다.

 

주로 분석되는 내용은 이런것이었다.

웹에서는 가로, 모바일에서는 세로로된 콘텐츠가

웹pc버전에서 어떤 부분은 세로인게 존재한다.

어떤 의도가 담겨있는것인지 혼자 유추해봤다.

아마 가로로 긴 pc환경 특성상 가로 콘텐츠로 하여금 공간을 확보해야했을 것이고

특정 부분만 세로 사이즈의 콘텐츠로 만든 이유는

10개의 콘텐츠를 한 화면안에 모두 보여주고자 하는 의도가 담겨있는게 아닐까 싶었다.

 

전체적으로 봤을 때 pc와 모바일의 특징이 하나하나 보이기 시작했다.

 

 

쿠팡플레이 모바일의 경우, 영상이 재생될때 하단에 평점, 액션, 시청시간 텍스트가 아래로 사라지면서 플레이된다.

내가 추측한것은.. 영상에 집중하기위해 정말 필요한 기능만 남겨둔 게 아닐까 했다.

 

그리고 어떤 부분은 콘텐츠 타이틀이 있지만 웹에서는 없었다.

도대체 왜...? 하는 의문점들이 정말 많았다.

모바일로 했을 때 이해가 되는 부분이 있고 웹으로 했을 때 이해가 되는 부분이 있다보니

이게 필요할 때가 있고 안 필요할 때가 있고 그렇다고 생각됐다.

 

분석을 한참 하다보니 생각드는것은

내가 모바일은 어느정도 알고있지만 pc환경에 대한 파악을 아예 못한다는 생각이 들었다.

폰트, 이미지사이즈, 등.. 어떤게 큰 사이즈이고 작은사이즈인지 판단하지 못하기도하고

무엇보다 그게 가장 부족했다.

 

예측 가능성.

 

 

사용자로 하여금 사용자가 이걸 눌렀을 때 예측이 가능하게 만들어야하는데

마우스 포인터로만 눌렀을 때 어떻게 해야 다음행동에 대한 예측이 가능할지

기본기가 많이 부족한 느낌이었다.

 

홍튜터님께서 말씀해주셨을때 그냥 디바이스의 차이라고 하셨다.

디바이스마다 환경이다르고 어떤건 터치, 어떤건 클릭인데

그거를 잘 활용해야한다고 하셨다.

 

당연한 말이지만 작업하다보면 까먹곤 한다...

 

 

이런 부분이 부족한 것 같아서

나는 UX집중반이었지만 UI집중반 강의영상을 빠르게 훑어봤다.

우리는 예쁘게 꾸미려고 하면 안된다면서

사용자와 어떻게 소통을 할지 규칙을 정하고 소통하는거라고 하셨다.

이 파일은 잘 다운받았고 강의영상 중 중요한 멘트는 받아적었다.

 

또 하나 웃긴거는 모바일에서 시청중인 콘텐츠는 가로콘텐츠로 제공한다는 것이었다.

다 세로콘텐츠로 제공하는데 이거는 왜 가로야 또...? ㅋㅋㅋㅋ

왜그럴까? 를 계속 생각해보며 한 결과

어떤 원리인지는 잘 모르겠지만 추측해보자면

우리가 플레이를 하면 멈춘 부분을 자동으로 캡쳐하고

그 캡쳐된 화면대로 나타내려면 가로화면이 좋다고 생각해서 그런것이라고 생각했다..ㅋㅋ

이유있는 디자인을 만들기란 참 어려운 작업인 것 같다 ㅠㅠ

이러한 부분에서 전반적으로 쿠팡에서 만든 ui가 전반적으로 괜찮다고 생각했다.

 

 

홈화면 외에도 검색창, 상세 페이지 등을 비교분석하였다.

처음엔 왜 그랬는지 잘 모르겠다가도 다른걸 분석하다가 다시 내가 풀지못한 문제를 봤을 때

풀리는 경우도 잇었다. 혹시..이런이유로 이렇게 한건가? 하고...ㅋㅋ

이렇게 문제를 하나하나풀 때 쾌감이 들면서 뭔가 해낸 기분도 들었다 :)

 

 

 

쿠팡 다음에 마이리얼트립을 분석했는데

홈화면이 전체가 다 달라서 당황함...

쿠팡볼 땐 다 이유가 보이고 왜 저기에 배치되었는지 어느정도는 유추가 가능했지만

마이리얼트립은 쉽지 않았다 ㅋㅋㅋ ㅠㅠㅠ

 

 

 

 

✏️마이리얼트립 분석

처음에 호기롭게 시작했다가 엥? 에엥??했다 

웹화면에서 있는게 모바일에서는 아예 존재하지가 않았다.

도대체 왜??? 어떤 의도로 이거를 넣은거지? 좀처럼 판단되지 않아서

다시 처음부터 모바일 화면의 구성을 보기시작했다.

하나하나 보다보니 카테고리가 2개 3개 있는 마이리얼트립이 웹페이지에서 왜 이 콘텐츠를 넣지않았는지

그 이유를 확인할 수 있었다.

 

저 우측 봄맞이 숙박세일 페스타라고 하는 부분은 모바일에서 분명히 중요하다고 판단해서

가장 메인에 넣은 것일텐데 이게 왜 웹pc에서는 없는가? 

계속 둘러보다가 내린 결론은

이 콘텐츠의 목적은 오픈 알림 신청하기라는것.

기본적으로 오픈 알림은 앱푸시를 받아야하는 영역인데 이 영역은 어디에있다?

모바일에서만 있다..... ^^ 그래서 웹pc에서는 없는것.이라고~? 추론했다.

 

그리고 한가지 더.. 

모바일 에서 있는 이 이벤트가 왜 .. pc에서 없을까?

여기서 중요한 것은 버튼으로 가있을텐데하면서 버튼을 봤는데

목적은 쏘카 예약이다.

쏘카를 예약하기 위해서는 앱이 연동돼야하는데 이게 가능한 기기는? 모바일! 

pc에서는 불가능하다고 생각됐다.그래서 pc에서는 뺀거구나! 하는 분석을 해봤다.

 

 

 

 

마무리하며...

오늘 하루종일 나는 무엇을 했는가..생각해봤는데

많은 것을 한 것 같다.

1. 시안을 일단 최선을 다해서 만들었다.

2. 튜터님한테 가서 모르는 부분에 대해 물어봤다.

3. 모르는 부분을 보충하기위해 서비스 ui를 분석했다.

 

 

이것만 해도 난 오늘 하루 성공했다고 생각해. (갑자기 반말)

목요일까지 3일 남았다.

아니지 금요일 마지막날까지 최선을 다해서 캠프를 잘 마무리하고 여행을 갔다오려고한다.

여행 가기 전에 포폴을 잘 정리해두고 여행갔다온 후에 뭐를 해야할지 계획을 세워보려고한다.

 

여행갔다와서 더 하기싫은 건 아니겠지 ^^

 

암튼 오늘 나 정말 수고 많았고 고생했다!

12시간동안 잘 버텼으니 이번 주도 잘 버틸수있을거다!

 

 

내일은 발표 준비와 질문준비에 대처해보고

다시 웹pc버전 만드는것에 집중해야겠다.