[TIL 5주차 화요일] 커머스앱 프로토타입 만들기
오늘은 어제 만든 UI킷을 통해 프로토 타입을 제작해 볼 것이다. 프로토타입에 주어진 시나리오에 맞게 제작해야 하여 우선 프로토타입 시나리오 구성을 살펴 보겠다
먼저 홈화면을 시작으로 홈화면안에 있는 유제품 카테고리를 골라 유제품 목록 화면으로 넘어가서 스파르타 우유 상품을 선택하면 해당 제품의 상세설명화면으로 넘어가야 한다 이 때 수량을 2개 고를 수 있도록 설정하고 장바구니에 담아
장바구니에 바로가기 다이얼로그가 생성되고 장바구니 바로가기 선택을 하면 종료가 되도록 설정하는 것이다.
글로 설명하면 어려워 이렇게 시나리오를 작성하고 프로토타입을 제작해야 제작자가 혼동없이 화면을 제작할 수 있다.
우선 가장 먼저 나오는 홈화면을 만들어 볼 것이다. 내가 만든 홈 화면은 다음과 같다
상단 앱바와 메인 배너 그리고 카테고리 항목들을 만들었다. 시나리오에 나왔다 시피 유제품 카테고리가 필요하여
유제품카테고를 넣었으며 유우사진을 통해 해당 카테고리가 유제품인 것을 시각적으로 강조하여 설계하였다.
다음은 유제춤 목록화면이다.
위와 같이 10개의 유제품 항목을 만들었다 사진은 무료 사진 자료 사이트에서 구해 기입했으며 스파르타우유 외에 입의 9가지의 우유 목록을 만들었다 그 다음 스파르타우유 상세 정보 페이지을 만들어 볼 것이다.
시나리오 대로라면 상세정보에서 수량을 고를 수 있도록 설계해야 한다. 그래서 나는 이를 라디오 버튼을 이용하여 제작할 것이다.
다음과 같이 제작했으며 라디오 버튼을 클릭하면 변경되는 형식으로 제작하게 되었다 이제 장바구니에 담으면 생성되는 다이얼을 제작하고 장바구니 페이지를 제작해 볼 것이다.
이렇게 해서 필수제출과제를 마무리 하게 되었다. 이것을 이제 프로토 타입 실행하면 되는데 이는 내가 직접 설계하여 화면이 어떻게 넘어가게 하는지 설계할 수 있다.
이런식으로 화면을 직접 연결하여 화면이 시나리오대로 흘러가게 끔 설계했다 그럼 영상으로 살펴보자
이렇게 필수제출을 마무리 하게 되었다,
한 과정의 프로토타입을 제작하면서 넣고 싶은 기능도 있었지만 아직 미숙하여 많이 넣지 못했으며 기존 디자인 조차 약간 만족스럽지 못하게 만들게 되어 많은 아쉬움이 남게 되었다. 하지만 이번을 계기로 피그마 사용이 조금 더 익숙해졌기에 다음에는 더 좋은 결과물을 노려보도록 해야겠다.