모달 요소이기 때문에 이 창이 뜰 때는 뒤에 있는 화면은 선택할 수 없는 영역인 걸 표시하기 위해
반투명한 필터를 씌워 줄 겁니다!
이렇게 완성한 UI요소들을 프로토타입으로 만들어보겠습니다!
프로토타입은 UI디자인에 그렇게 중요한 작업은 아니라고 합니다.
개발자에게 보여주게 될 때 하나의 스킬이라고 생각하면서 공부를 해보았습니다.
이렇게 간단하게 만들어주었는데요.
더 본격적으로 만들게 되면 얼마나 더 복잡해 질지.. ㅎㄷㄷ;;
첫 번째로 카테고리에 있는 유제품을 클릭하면 리스트 화면으로 넘어갈 수 있도록 만들어 주었습니다.
갑자기 확 바뀌는 게 아닌 Move in으로 레이어가 위로 쌓아지는 느낌을 주었어요.
이렇게 리스트 화면에서는 Back 아이콘을 누르면 뒤로 돌아갈 수 있게도 만들어주었습니다.
이런 식으로 리스트에서 상세 페이지로도 만들어주구요~
상세화면 밑에 있는 구매하기 버튼을 누르면 라디오 바텀시트가 올라오게 만들어 주었어요!
이렇게 바텀시트가 올라오도록 만들었어요.
시나리오 순대로 장바구니에서 다이어로그가 노출되도록 만들어주고요.
이렇게 다이어로그가 뜰 거예요.
장바구니 가기를 누르면 이렇게 장바구니 화면이 똭!!
이렇게 프로토타입을 만들고 과제 제출 시간이 다 왔어요...
여러 가지로 미흡한 부분이 많지만 첫 과제보다는 그래도 잘 진행된 거 같았습니다~
과제 후 미흡했던 부분
1. 화면 늘려놓아야 함 개발자와 소통할 때 화면을 늘려놓고 소통하기 때문 (늘려 놓은 후 프로토 타입에서 아이폰 13 mini 화면으로 지정) 2. 폰트 3가지 이상 색상 3가지 이상 컬러 팔레트 만들어야 함 3. 상세화면에 상단 제목 라벨이 빠짐 4. 라디오 버튼이 굳이 바텀시트가 아니였어도 됨 5. 상세화면 하단 장바구니 담기 고정 6. 라디오 버튼 스마트 에니메이트 또는 인스턴스로 넘어가는 방법 7. 홈 인디케이터 있는 버전
