UIUX부트캠프, 8주 차 공부 기록 (시안 수집 및 키페이지 제작 / OTT서비스 리디자인)

그룹 프로젝트의 마지막 단계, 아니 발표가 남았으니까 아직 끝이라고 할 수 없으려나. 여하튼 이번 주요 과제는 팀의 앱 중 하나를 어떻게 리디자인 할 것인지 관련 시안(레퍼런스)을 수집하고 거기에 따른 키페이지를 제작이었다. 이와 별도로 포트폴리오 사전 과제로 OTT 서비스 중 하나를 골라 홈화면을 리디자인 해야 했다. 총 두 가지 과제! 이번 주도 바쁘다, 바빠!

 

먼저 주과제를 진행했다. 이번에 팀에서 내가 해야 할 앱은 영화관 앱(CGV)이었다. 이전 다른 팀원이 AS-IS 분석한 자료를 토대로 개선 방향을 잡아갔다. 시안에 넣을 이미지는 드리블과 핀터레스트에서 주로 찾는데, 영화관이라는 특수한 앱의 성격 때문인지 생각보다 자료가 방대하다는 느낌을 받진 못했다. 계속 중복된 이미지가 떠 곤혹스러웠다. 최대한 많이 검색해 이미지 별로 폴더 쌓고, 또 정리해나가면서 시안을 완성했다.

시안을 위한 이미지 수집

 

정리한 시안을 토대로 키페이지 3종을 제작해야 했는데, 나는 영화관의 키페이지로 1.홈화면 2. 좌석선정 3. 모바일 티켓 세 화면을 선택했다. 기존 CGV 앱의 홈 화면은 상단에 광고 모듈이 위치해 정작 가장 중요하다고 할 수 있는 영화 정보에 대한 가시성이 뛰어나진 않았다. 탭바도 많고, 카드 모듈도 너무 뻔하다고 느낀 탓에 시안에서 모은 자료를 토대로 레이아웃을 달리해 보면 어떨까 싶었다. 물론 직접 AS-IS 분석을 하지 않았고, 정보 구조적인 면에 대한 고민이 얕은 상태에서 방향을 잡은 거라 정답은 아닐 거라 생각한다.

 

 

시안 페이지

(좌) 기존페이지 (우) 리디자인

 

디자인하는 과정에서 이상과 현실의 차이가 크다고 느껴졌다. 드리블 이미지들이 지나치게 컨셉추얼 해서 일까. 기존 화면을 리디자인했음에도 불구하고 큰 변화를 느끼지 못했다. 기능적인 면이나 컬러 면에서 기존 페이지보다 더 낫다고 할 수 있을까?라는 질문에 스스로 답하지 못했다. 흠...! 그럼에도 불구하고 꿋꿋이 계획했던 방향으로 밀고 나갔다. 중간에 방향을 바꾸기보다는 계획했던 대로 완성한 후 제대로 스스로를 평가하고 싶었다.

최종 키페이지

 

최종 키페이지 작업이다. 글을 쓰고 있는 지금에도 보완사항이 많이 보인다. 이번 작업하면서 가장 어려웠던 건 '크기에 대한 감'이었다. 폰트/카드 모듈/이미지 등에 대한 크기를 어느 정도 잡아야 할까. 8 - 10 - 12 - 8 순으로 폰트 크기를 바꿔가면서 계속 수정했지만 은근히 어려웠다. '이 정도면 잘 보일까? 너무 큰가? 너무 작은가?' 어려웠다. 아무래도 편집 디자인을 오래 해온 영향도 있는 듯했다. 종이에서는 10포인트도 작지 않는데....! 수시로 관찰하고, 따라 하는 수밖에 없구나 싶었다. (멘토 님 피드백 또한 폰트 크기 관련이었다😂) 뿐만 아니라 이제 보니 카드 모듈과 폰트 사이의 간격도 너무 좁다. 프라이머리 컬러가 레드라 그런지 세컨더리 컬러와의 조합도 어려워 결국 단일 컬러만을 사용했다.(또륵) 하면 할수록 배울 게 정말 많다고 느낀다. 그런 의미에서 이번 과제도 쉽진 않았지만, 완성할 때 느낀 성취감과 시안을 만드는 과정에서 적용하고 싶은 요소를 많이 발견해 여전히 재미는 있다.

 

다른 디자인 분야도 마찬가지겠지만 특히 UX분야에서 디테일이 정말 중요하겠구나 느꼈다. 사용자라면 모를 아주 작은 변화 요소를 붙잡고 한참을 씨름한 과정에서 얻은 깨달음이다. 제로베이스에서 제공하는 강의뿐만 아니라 수시로 UX 관련 책과 유튜브로 요즘 트렌드와 정보를 얻어야겠다고 생각했다. 다음 주도 부디 무사히 지나가길! 

 

아, 마지막으로 포트폴리오 사전 과제(OTT 서비스 홈화면 리디자인)으로 티빙을 선택해서 진행했는데 어떠한 분석도 없이 진행하려니 막막했다. 시각적으로 아쉬운 부분은 조금씩 수정했지만 기존 상태인 이유가 있을 텐데...라는 생각에 확 바꾸지 못했다. 역시 조사/분석이 선행되어야 제대로 된 사용자 행동 변화를 유도하는 좋은 디자인을 할 수 있겠구나 싶었다. 

 

티빙 홈화면 리디자인