[미니프로젝트] 팀 소개 페이지 제작 (3)

오늘(5/29) 팀소개 페이지 디자인 수정과 프로토타입 연결을 했다. 발표(5/31)때 쓸 ppt를 제작하는 것이 목표였으나, 우리 팀원들은 디자인에 대한 열정이 커서 ppt 제작은 내일의 일로 두었다. 오늘은 수정에 수정을 거치고 기존 페이지에 변화를 주기 위한 새로운 시도도 있었다.
 
 
오늘 새롭게 알게 된 내용은 다음과 같다. 
 
① 하이퍼링크 연결
블로그 링크를 이름 옆 네잎클로버에 넣기로 하고, 링크 연결을 했더니  blog에 밑줄이 그어졌다. 알고보니 그 방법은 텍스트 링크 연결이었는데, 구글링을 통해 네잎클로버 자체에 링크를 연결할 수 있는 방법을 찾았다.   

변경 전

변경 후

 
개체 클릭 후 ---> 우측 디자인 툴 Prototype 클릭 ---> Interactions 의 + 클릭 --->  None - On click - Open link 클릭 ---> 링크삽입 하면 된다. 

링크 삽입 방법

 
 
② 전체 페이지 제작 후 전체 프로토타입을 실행했을 때, A 팀원 페이지에서 B 팀원의 소개페이지로 넘어가도록 제작한 의도와 달리 '키보드 좌우 자판을 누르면' 엉뚱한 페이지로 연결이 됐다. (물론 이것도 프로토타입핑에 의해서이다.)  
 
이때 알게 된 점은 프로토타입 실행 후 키보드도 한번 눌러보면서 페이지가 의도한대로 연결되었는지 확인하는 작업을 거쳐야 겠단 것이다. 아직 어떻게 다른지 명확히 말로 풀어내기는 어렵다.

팀원 페이지 이동을 위한 버튼

 
 
③ 마지막으로, 사용자의 입장에서 화면이 어떻게 비추어지는지 의식적으로 생각하고, 이를 고려해 제작해야 한다.
 
페이지를 제작할 때는 눈에 들어오는 '한'페이지만을 보게 돼서 제작자의 의도대로 사용자의 입장에서 바라보면 연결이 끊켜지는 부분이 있다는 것을 알게됐다. 아래 이미지가 그 내용인데, 원래는 각 팀원소개 페이지에서 아래로 스크롤 하면 목표페이지로 연결됐다.
 
이때 문제점은, 사용자의 화면이 위페이지와 아래페이지 사이에 걸쳐 있을 때 발생한다. 아래의 목표 페이지에도 헤더와 연결 버튼인 로고(LUCK)가 있으므로, 이 점이 어색하게 다가올 것이고, 동떨어진 화면을 억지로 연결해 놓은 듯한 느낌을 받을 수 있다. 

위 - 팀원 소개 페이지, 아래 - 목표 페이지

 
 
그래서 이 어색한 부분을 수정하고자 팀원소개페이지에서 목표페이지로의 스크롤 연결은 과감히 삭제하기로 하였다. 
나아가 목표 페이지를 어디에 연결하는 것이 좋을지 고민했다. 
 
이 과정에서 새로운 페이지가 탄생하는데, (좌측 이미지)중앙의 클로버를 클릭하면 (우측 이미지) 팀원들의 의지를 담은 메세지가 보여진다. 그럼 기존의 목표 페이지는 어떻게 연결되냐고 ??? 
이 부분은 메세지를 담은 페이지(우측 이미지)를 아래로 스크롤 하면 마지막을 장식하듯 해쉬태그 가득한 목표 페이지로 연결된다.

목표 페이지 - 클로버 버튼 클릭하면 우측의 메세지 화면이 보여진다.

 
 
 
'마지막을 장식한다'는 의미는 해쉬태그로 표현된 우리들의 목표가 옆으로 흘러가는 모션을 취해서이다.
페이지 연결은 아래와 같다. + footer까지 완성 ! 

 
 
나는 목표 페이지의 메인을 차지한 네잎클로버가 이모티콘인 것에 아쉬움이 있었고, 피그마 펜툴 기능을 이용해 외곽을 땄다. 
포토샵 펜툴 잘 쓰려고 메이플스토리 캐릭터로 연습 했었는데 그게 여기서 쓸모 있었다. 

 
 
 
팀원들의 도움으로 더 아름다운 네잎클로버 버튼이 만들어졌다. 
그리고 오늘의 최종 페이지는 아래와 같다. 
 

 
 
 
 
 
좌측 이미지는 유저플로우이다. (목표 페이지에 새롭게 변화를 시도하고 아직 결정이 안된 부분이 있어서 그 전까지의 유저플로우를 게시해 놓는다.) 우측은 우리 팀이 사용한 컬러와 폰트 아이콘 등을 정리해 놓은 것이다.

 
 
 
본 미니 프로젝트의 궁극적인 목표는 !
피그마로 우리 팀의 이야기를 자유롭게 구성한 '팀 소개 페이지'를 만들어 보는 것이고, 
작은 목표는 피그마 작업 환경에 익숙해지고, 오토레이아웃과 컴포넌트 속성을 이해하며, 프로토타이핑을 만들어보는 것이다. 
 
다짐 : 
아직 다루기 어려운 기능들이 있다. 본 프로젝트가 끝나고 해당 내용을 잘 이해하고 있는지 스스로 점검이 필요하겠다.