Starbucks APP UI 클론 준비

[사전캠프_9/12]

• 클론 디자인 어플 선정
• 클론 디자인 실습

​

​

클론 디자인 어플 선정

​

• 어플 선정 기준
  • 단순하면서 핵심 기능이 명확한 서비스
  • 자주 사용해 본 서비스
  • 메인화면 / 핵심 서비스 화면 / 보조 기능 화면

​

• 스타벅스
  • 음료 주문과 메뉴 확인 등의 주요 기능이 명확
  • 구조적인 UI로 클론 디자인을 진행하였을 때 깔끔하고 정돈된 UI를 실습해 볼 수 있음

​

• 메인화면
  • 고정된 상단의 메뉴바와 하단의 네비게이션 바
  • 상단의 타이포 베너
  • 좌우로 스와이프되는 즐겨찾기 메뉴
  • 상하로 스와이프 되어 나열된 이벤트 정보 블럭들

 

 

​

• 핵심 서비스 화면 - 음료 주문
  • 상단 좌,우에 고정되어 있는 행동 버튼
  • 하단에 고정되어 있는 주문 버튼 바
  • 음료 이미지와 설명글, 음료 옵션 선택 버튼들

 

 

​

• 핵심 서비스 화면 - 음료 목록
  • 상단에 고정된 현재 위치, 메뉴 바, 카테고리 바
  • 하단에 고정된 매장 선택 바
  • 상하 스크롤 메뉴

 

 

​

• 보조 기능 화면 - 결제
  • 위에서 아래로 올라오는 애니메이션 동작

 

 

​

• 보조 기능 화면 - 마이페이지
  • 상단에 고정된 현재 위치, 설정, 알림 메뉴
  • 여러 기능들 정리되어 배치된 UI

 

 

​

>> 스타벅스의 UI를 따라 만들어 보며 전반적인 구조를 학습

>> 화면 목적에 따라 어떤 구조를 가지는지(얼마나 효과적으로 배치되었는지)를 파악하며 실습 예정

>> 스타벅스 어플은 애니메이션 동작이 많이 보이는데, 이는 거의 생략하고 구조나 배치를 우선으로 실습

​

​

클론 디자인 실습

​

메인 화면에서 고정되어 있는 네비게이션 바와 시간과 베터리가 표시되는 바, 메뉴 바를 컴포넌트를 활용하여 제작하였다.

아이콘 플러그인을 활용하여 화면에서 사용되는 아이콘과 유사한 아이콘을 찾아 컴포넌트로 만들어 사용하였다.

어려웠던 점)

프로퍼티로 네비게이션 바의 아이콘과 색, 글자를 바꿀 수 있도록 만들려고 할 때 어려움이 있었다.

색상이 바뀌도록 베리언츠를 만든 뒤, 아이콘을 바꿀 수 있도록 인스턴스 스왑을 설정했다. 복제해 인스턴스를 만들어 아이콘을 변경한 뒤, 색상을 껐더니 아이콘이 다시 바뀌기 전으로 돌아갔다. >> 아이콘 컴포넌트를 두가지 색상 모두 준비해서 인스턴스 스왑 목록에 포함시켜 주고 고르는 것으로 해결했다.(정석적인 방법은 아닌 것 같아 다시 만들어볼 예정)