[Starbucks App UI 클론]
- UI 패턴
- 프로토타이핑
UI 패턴
1. 메인 화면(홈 화면)
2-1. 음료 주문 화면
2-2. 음료 옵션 선택 화면
3. 음료 목록 화면
4. 결제 화면
>> UI 클론 작업 과정
먼저 하단바나 버튼바 같이 반복되서 사용되는 바들의 컴포넌트를 제작하여 작업하였다.
하단바의 경우 컴포넌트 프로퍼티를 활용하여 컬러, 라벨 텍스트, 아이콘의 모양을 바꿀 수 있도록 설정하여 사용하였다.
Starbucks의 UI를 클론하며 다양한 아이콘들이 사용된다는 것을 알게 되었는데, 클론 과정에서는 아이콘을 직접 만들진 않고 플러그인을 활용하였다.
아이콘의 무게(Weight), 외곽선 등을 조절할 수 있는 'Material Symbols' 플러그인과 둥글고 부드러운 외곽을 가진 'MingCute Icon' 플러그인에서 Starbucks가 사용하는 아이콘과 비슷한 것들을 활용해 작업하였다.
(--> 실무에서도 이런 무료 플러그인을 사용하는지 궁금증이 생겼다.)
*어려웠던 점
오토레이아웃에 익숙해지고자 적극적으로 활용하려고 노력하였다. 다만 일정한 간격을 가지고 있는 부분에선 유용했지만 스타벅스의 경우 각각 다른 간격을 가지고 있는 부분들이 많아서 이 때에는 어떤 방식으로 작업하는게 효과적일지 고민이 들었다. 이번 클론에서는 그냥 프레임으로 묶어서 작업한 부분이 있어서 다음에는 오토 기능을 더 사용할 수 있도록 연구해야겠다.
*회고
Starbucks UI 클론을 진행하면서 버튼들을 활용하는 방법이나 보여주고자 하는 정보들을 어떻게 나열하는지에 대한 감을 조금 익힐 수 있었다.
블럭이나 바 같은 요소들을 강조하거나 분리되어 보이게끔 하기 위해 사용하는 그림자 효과등의 디테일한 디자인 요소들도 평소에 어플을 사용할 땐 인지하지 못했던 부분이라서 흥미로웠다.
프로토타이핑
>> 프로토타이핑 클론 작업 과정
버튼을 눌렀을 때 'Navigate to - Move in, Slide in' 을 사용하였고
하단바에서 화면을 이동할 때 'Navigate to - Smart animate' 를 사용하였다.
화면 위로 올려지는 'Open overlay'도 사용해 보았다.
*어려웠던 점
화면 전체가 슬라이드되는건 가능했지만 특정 프레임만 슬라이드되는 방법은 찾지 못했다.
그래서 빈 화면에 슬라이드 되고자하는 프레임을 올려 오버레이 액션을 사용해서 해결하였지만 고정되어야 할 부분까지 같이 슬라이드되어 완벽한 해결법은 아니었다. 이러한 다양한 액션에 대한 연구가 필요할 것 같다.
*회고
고정되는 프레임들과 스크롤되는 프레임들의 개념을 이해할 수 있었다.
스타벅스는 다양한 액션들을 어플 내에서 사용하고 있어 여러 종류의 액션을 파악할 수 있었다.
스타벅스의 UI 움직임을 완벽히 똑같이 구현하기는 어려웠지만 프로토타이핑을 하며 피그마의 액션과 애니메이트를 공부할 수 있었다.
'2025 내일배움캠프' 카테고리의 다른 글
| 내일배움캠프_본 캠프 OT (0) | 2025.09.22 |
|---|---|
| Figma로 예매 화면 리디자인 (1) | 2025.09.22 |
| Starbucks APP UI 클론 준비 (1) | 2025.09.22 |
| 피그마 프로토타이핑과 디자인 핸드오프 알아보기 (1) | 2025.09.22 |
| 컴포넌트 프로퍼티 실습과 합성 컴포넌트 알아보기 (0) | 2025.09.22 |