[클론 디자인]02. 온라인 마켓 스토어 앱 화면 프로토타입 만들기 > 공지사항

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

지난 온라인마켓 시간에 앱 홈 화면까지 만들었는데요.
사실 어제 클론 디자인 포스팅을 못 한 이유가 다른 화면들 만드느라고 힘들어서
포스팅을 못 했습니다...
디자인 카타 밖에 못한 내 자신을 반성합니다... ㅠㅠ

완성한 페이지 화면을 먼저 보여 드리겠습니다!




이렇게 SSG 앱의 온라인마켓 화면을 시나리오 순에 맞게 제작 해보았어요~

특이한 점을 한번 설명해 보고 프로토타입으로 넘어가 보겠습니다.



원래 SSG앱에서는 위에 있는 바텀 시트를 사용해요.
하지만 저는 내 배캠 과제가 라디오 버튼을 사용한 장바구니 담기를 만들어야 해서
바텀시트로 만들어줘 보았습니다.




이렇게 온라인마켓 기존 앱에는 없는 다이얼로그도 제작을 해주었습니다.
모달 요소이기 때문에 이 창이 뜰 때는 뒤에 있는 화면은 선택할 수 없는 영역인 걸 표시하기 위해
반투명한 필터를 씌워 줄 겁니다!

이렇게 완성한 UI요소들을 프로토타입으로 만들어보겠습니다!
프로토타입은 UI디자인에 그렇게 온라인마켓 중요한 작업은 아니라고 합니다.
개발자에게 보여주게 될 때 하나의 스킬이라고 생각하면서 공부를 해보았습니다.







이렇게 간단하게 만들어주었는데요.
더 본격적으로 만들게 되면 얼마나 더 복잡해 질지.. ㅎㄷㄷ;;




첫 번째로 카테고리에 있는 유제품을 클릭하면 리스트 화면으로 넘어갈 수 있도록 온라인마켓 만들어 주었습니다.
갑자기 확 바뀌는 게 아닌 Move in으로 레이어가 위로 쌓아지는 느낌을 주었어요.




이렇게 리스트 화면에서는 Back 아이콘을 누르면 뒤로 돌아갈 수 있게도 만들어주었습니다.





이런 식으로 리스트에서 상세 페이지로도 만들어주구요~




상세화면 밑에 있는 구매하기 버튼을 온라인마켓 누르면 라디오 바텀시트가 올라오게 만들어 주었어요!




이렇게 바텀시트가 올라오도록 만들었어요.





시나리오 순대로 장바구니에서 다이어로그가 노출되도록 만들어주고요.




이렇게 다이어로그가 뜰 거예요.



장바구니 가기를 누르면 이렇게 장바구니 화면이 똭!!

이렇게 프로토타입을 만들고 과제 제출 시간이 다 왔어요...
여러 가지로 미흡한 온라인마켓 부분이 많지만 첫 과제보다는 그래도 잘 진행된 거 같았습니다~



과제 후 미흡했던 부분
1. 화면 늘려놓아야 함 개발자와 소통할 때 화면을 늘려놓고 소통하기 때문 (늘려 놓은 후 프로토 타입에서 아이폰 13 mini 화면으로 지정)2. 온라인마켓 폰트 3가지 이상 색상 3가지 이상 컬러 팔레트 만들어야 함3. 상세화면에 상단 제목 라벨이 빠짐4. 라디오 버튼이 굳이 바텀시트가 아니였어도 됨5. 상세화면 하단 장바구니 담기 고정6. 라디오 버튼 스마트 에니메이트 또는 인스턴스로 온라인마켓 넘어가는 방법7. 홈 인디케이터 있는 버전