[Project] 맛있는 외식의 시작, '미리'

 

'미리' 유저 인터페이스, 관리자 및 가맹점 사장님 인터페이스

 

 

✓ What Project?

"지역 소상공인 식음료매장들의 당일 재고 상품을 파격적인 할인가로 제공하는 O2O 커머스 서비스" 

 

코로나로 인해 전국의 학교들이 비대면수업을 하면서 지역 경제가 침체되던 때가 있었습니다. 학생들이 학교에 찾아오는 일이 드물어 졌고 인근 가게는 장사가 잘 되지않았습니다.

 

사장님들의 가장 큰 고민 거리는 재고 처리였습니다. 장사를 위해 재료를 늘 구비해두는데 구매자가 줄어드니 준비해둔 식자재의 유통기한이 지나 그대로 폐기해야하는 일이 계속 악순환 되고 있었죠.

 

이렇게 남은 재고를 어떻게 처리할지 고민하는 사장님들의 '니즈'와 저렴하게 식음료를 구매하고싶은 자취생들을 위해 당일 재고 할인 판매 서비스를 생각하게되었습니다.

 

처음엔 카페 예약이 있는 커머스 앱을 만들 생각이었습니다. 하지만 생각보다 저조한 시장 반응과 투자자 반응, 자리를 정확하게 배정하기 위해 물리적 장치가 필요하다는 리스크 등의 이유로 고민에 빠진 무렵, 앱 이벤트의 한 부분으로 넣을 계획이었던 위의 프로젝트가 학생들과 가게 사장님들의 반응이 뜨겁자 곧바로 팀의 메인 서비스로 자리 잡게 되었습니다.

 

 

✓ What's my Role?

저는 클라이언트단 개발자로서 Flutter를 이용한 앱 제작,

개발팀장으로서 앱·웹 기획과 팀원 관리, 간단한 CI/CD 등을 담당했었습니다.

 

📌  크로스플랫폼 개발자

• 제작: 어플리케이션의 모든 UI 제작과 api 연동, 추후 오픈마켓에 배포 등 Client단의 모든 부분을 담당
• 협업
  • 앱 서버(nestjs) 개발자와는 필요할때마다 곧바로 연락을 취하는 형태로 진행
  • UI/UX 디자이너와 주 1회 1시간정도 ui 변경사항이나 앱 개발 진행상황을 체크했으며, 주로 사용자 경험 관점에서 고민하며 와이어프레임 및 ui를 개선에 대한 의견을 주고 받음

 

📌  초기 창업 멤버

• 기술 설정: 서비스에 가장 적합한 프레임워크와 기술들을 조사하고 채택함
• 서비스 구체화: 사업 아이템을 앱에 풀어내면서 기능들과 정책(ex.광고 등)들을 명확히 하는 작업에 참여
• 와이어프레임 제작: 사용자 경험 관점, 기획의 요구사항, 앱의 슬로건 또는 분위기 등을 고려하면서 초기 와이어프레임 제작에 아이디어를 제공

 

📌  개발 팀장

• 회의: 서버-서버, 서버-프론트 등 모든 개발 회의에 참여하며 의견을 피력하고 회의를 진행함
• 팀 관리: 팀원의 목표와 프로젝트의 방향을 체크하고 애로사항을 해결하는 역할을 하였음
  (ex. 웹 개발자들의 협업을 위한 도커 이미지 배포 자동화, 팀원이 원하는 기술 도입 등)
• 서비스 개선: 웹과 앱의 와이어프레임에서 누락된 기능이나 모호한 기능들을 수정 및 개선
• 앱·웹 기획: 새로운 기획과 디자이너의 요구사항을 분석하여 최대한 UI/UX를 헤치지않는 선에서 기능을 기획하고 설계함
• 기타: 발표 및 시연

 

 

✓ What's Used?

• Web: 사장님들을 위한 점포관리, 메뉴관리, 주문관리, 매출확인 등을 할 수 있는 시스템과 이러한 가맹점들을 관리, CS처리 등의 시스템이 있는 웹사이트
  • React, Spring boot
• APP: 사용자 근처에 있는 가게들을 대상으로 할인된 가격의 식료품 구매를 도와주는 메인 서비스 애플리케이션
  • Nestjs
  • Flutter
    • HTTP 통신: Dio
    • 아키텍처 패턴: 리버팟 패턴(Repository 패턴 활용)
    • 디자인 패턴: Result 패턴, 싱글톤 패턴
    • 상태관리: Riverpod v2
    • 라우트 관리: go_router
    • 내장DB: isar, secure_storage
    • 외부 API
      • 주소·좌표 검색: 카카오 로컬
    • SDK
      • 지도: 네이버 맵
      • 소셜 로그인: 카카오, 네이버, 애플
      • 결제: 토스페이먼츠
    • 그 외
      • Push: FCM
      • 공유: Dynamic Link
      • 프로필 업로드: AWS Amplify S3
• Cooperation
  • 형상관리: GitHub
  • 소통: Notion, Discode, Meet
• 기타
  
  • RabbitMQ, MySql, ERD Cloud, Elastic search

 

 

✓ What Made?

저는 유저들이 상품을 구매할 수 있는 앱을 제작했습니다.

자동로그인부터 구매 후 리뷰작성까지 전형적인 커머스 형태의 앱이지만 실제 서비스를 생각하면서 개발을 해보니 작은 기능들도 대충 만들 수가 없었습니다. 생각지도 못한 부분에서 일주일을 고생한적도 있고, UI제작부터 api연동까지30분도 안걸려서 끝난 경우도 있었습니다.🥲

 

볼륨이 커질수록 복잡해져가는 프로젝트 구조때문에 상태관리와 디자인패턴에대해 많은 고민을 했었고,
최대한 명확하게 관심사를 분리하고 프로젝트 전체 구조가 일관적인 느낌을 줄 수 있도록 노력했습니다.

 

또한 사용자에게 친숙하고 부드러운 느낌의 인터페이스를 제공하면서 '미리'만의 서비스를 잘 보여줄수있도록 UI를 지속적으로 개선하고 성능을 최대한 고민하며 설계 및 개발을 진행했습니다.

 

 

 

 

 

 

 

*로고 출처: 미리

 

---

 

✓ What to Say?

 

개발을 할때 가장 큰 고민이 "설계" 였습니다.

물론 외부 API나 SDK를 연결하는 부분도 골치아픈 적이 많았지만

• 아키텍쳐를 프로젝트에 맞게 적용하기
• Oauth와 JWT를 이용하여 회원가입부터 자동로그인까지 매끄럽게 설계하기
• 성능 측면에서 API 요청 타이밍 고려하기
• 사용자 경험을 고려한 효율적인 UI 배치

등과 같이 설계는 고려해야하는 부분들이 각양각색이며 디자이너와 기획의 요구사항까지 생각해야하는 부분이기때문에

개발적 브레인스토밍이 활발히 일어나서 돌아보면 개발 과정중에 가장 고민하고 재밌게 참여했던 파트였던 것 같습니다.

그래서 블로그를 시작한다면 이런 부분들을 다루면 좋겠다고 생각했습니다.

 

앞으로 기능 설계를 중심으로 프로젝트진행 과정중에 얻었던 인사이트들을 정리하는 방법으로 포스팅을 할 예정입니다.

부족하기때문에 많은 피드백 부탁드립니다.

감사합니다.