StarbucksSiren119
스타벅스 Siren119
스타벅스 Siren119는 매장·본사 직원이 현장에서 사고·이슈 보고 등 업무를 처리하는 하이브리드 웹 서비스입니다. PC 중심 UI를 그대로 옮기면 현장에서 입력·확인이 어렵고, iOS Safari 등 모바일 환경에서의 안정성도 별도 과제였습니다. 현장 직원이 이동 중에도 업무를 끊기지 않고 처리할 수 있는 모바일 UI가 필요했습니다.
- Client
- Starbucks Korea
- Role
- UI ENGINEER · 임직원 하이브리드 앱 퍼블리싱
- Period
- 2024
- Platform
- Hybrid Web App
- Tech Stack
- HTML, SCSS, JavaScript, GSAP, jQuery
Case Study
Role
UI ENGINEER · 임직원 하이브리드 앱 퍼블리싱
Contribution
- 현장 사용 맥락을 기준으로 모바일 업무 UI 패턴 정립 — 터치·스크롤·입력 흐름 우선 설계
- 복잡한 입력·선택이 필요한 화면에 바텀시트·GSAP 인터랙션 적용, 화면 전환 부담 최소화
- iOS Safari 등 하이브리드 앱 WebView 환경 QA 및 렌더링 이슈 대응
- 업무 화면 간 공통 컴포넌트·레이아웃 규칙 정리 — 신규 화면 추가 시 동일 패턴 재사용
- 웹표준·웹접근성 기준에 맞춘 폼·네비게이션 UI 품질 관리
Tech Stack
- HTML
- SCSS
- JavaScript
- GSAP
- jQuery
Key Features
- Field Mobile UX
- Bottom Sheet Pattern
- Hybrid WebView QA
- Shared UI Components
- Accessible Forms
Achievements
- 30+모바일 업무 화면 구축
- 인터랙션GSAP 기반 구현
- 하이브리드앱 환경 대응
- 업무 프로세스최적화
Outcome
현장 중심의 모바일 업무 환경을 고려해 주요 업무 흐름을 단순화하고, 바텀시트와 공통 인터랙션 패턴을 컴포넌트 단위로 설계했습니다. 이를 통해 신규 화면이 추가되더라도 일관된 사용자 경험을 유지할 수 있는 확장 기반을 마련했으며, 운영 단계에서는 공통 패턴 재사용을 통해 QA 및 유지보수 효율을 높였습니다.Gallery
