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