① 동기

최근 레스토랑과 카페 업종에서도 디지털 전환이 빠르게 이루어지며, 고객 경험 향상이 중요한 과제가 되었습니다.

G-Order는 이러한 디지털 트렌드에 맞추어, 고객이 보다 빠르고 효율적인 주문을 할 수 있도록 개발된 시스템입니다.

고객이 직접 기기를 활용해 테이블에서 주문함으로써 대기 시간과 주문 오류를 줄이고, 만족도를 높이는 것을 목표로 합니다.

또한, 이전에 중간 과제에서 진행했던 COFFEE 프로젝트에서의 컴포넌트들을 재사용해 개발 효율성을 높이고자 기획되었습니다.
(이전 프로젝트의 연장선에서 실질적인 서비스 구현으로 확장)

② 목표 및 필요성

.

첫번째, 사용자 친화적인 UI/UX 설계를 통해 누구나 쉽게 접근하고 사용할 수 있는 인터페이스를 제공하고자 했습니다.

두번째, 실시간 데이터 분석을 통해 주문흐름 빠르게 파악하고, 효율적인 서비스 운영이 가능하도록 설계했습니다.

세번째, 비대면 서비스 수요 증가에 대응하여, 별도의 대면 없이도 주문 및 결제가 가능하도록 기능을 강화하였습니다.

마지막으로, 사용자의 니즈에 맞춘 다양한 편의 기능을 탑재해, 사용자에게 더 나은 경험을 제공하는게 목표입니다.

③ 팀 구성 및 역할

권혁원 (팀장) @ambition-kwon	김재형 @21divcert	정그린 @Green-JEONG	김지혁 @kjeok00

④ 개발 프로세스

.

위 화면과 같이 순환적인 워크 플로우를 기반으로 진행되었는데요!

초기 기획과 디자인 단계에서 반복적으로 피드백을 주고받으며 방향성을 구체화했고,

Ezy-Library는 개발 단계에서 핵심 컴포넌트로 활용되어 생산성을 높이는 데 큰 기여가 되었습니다.

이로써, 최종 통합 이후에도 유지관리 단계를 통해 지속적인 개선이 가능하도록 노력했습니다.

⑤ 문제 발견

.

기존 테이블 오더 시스템에서는 알러지 정보가 명확히 표시되지 않아, 고객의 건강을 위협할 수 있으며, 잘못된 주문 가능성도 존재한다는 점에 주목했습니다.

또한, 재고 관리가 수동으로 이루어져 시간 소모가 크고 실시간 반영이 되지 않는다는 불편이 발생합니다.

이러한 문제점들을 해결하기 위해, 디지털 기반의 정확한 정보 제공과 효율적인 재고 연동의 필요성을 느꼈습니다.

⑥ 개선점

.

G-Order는 고객의 알러지 정보를 사전에 등록하고, 메뉴 선택 시 이를 시각적으로 표시해 안전한 식사 환경을 제공하고자 했습니다.

또한, 경고 메시지를 통해 알러지 유발 메뉴를 안내하여 미리 고객의 건강을 보호합니다.

재고 관리 측면에서는, 주문과 동시에 재고가 자동 차감되고, 재고 소진 시 해당 메뉴는 자동 비활성화되어 운영 효율을 높일 수 있습니다.

실시간 모니터링을 통해 관리자는 빠르게 대응이 가능해 재고 부족으로 인한 불편을 크게 줄일 수 있습니다.

⑦ 기술 스택 및 아키텍처

.

본 프로젝트는 GibHub Pagaes를 통해 React 기반의 프론트엔드를 간편하게 배포하고,
Supabase를 통해 실시간 데이터베이스 관리 및 인증 기능을 구현하였습니다.

⑧ UIUX

.

초기 화면은 서비스의 시작을 나타내고,

두번째 화면은 알러지 정보 수집을 위한 버튼이 구성되어 있으며,

세번째 화면에서는 재고 현황이 반영된 식사 메뉴를 주문할 수 있고

네번째 화면은 사용자가 선택한 식사의 영양 상태를 인원 상태에 분석하여 시각화한 것이고

다섯번째와 마지막 화면에서는 주문이 완료된 상태와 영수증을 보실 수 있으며, 추가적인 서비스로 적립된 스탬프 수량을 보실 수 있습니다.

⑨ 사용자 시나리오

.

사용자는 시작화면에서 서비스를 시작한 후,

자신의 알러지 정보를 선택하고, 해당 정보에 따라 음식을 주문하게 됩니다.

주문 후에는 영양소 분석 화면을 통해 식단의 영양 정보를 확인할 수 있으며,

주문 완료 및 회원 가입 화면에서 결제를 마치고 회원 정보 등록까지 진행할 수 있습니다.

각 단계는 상호적으로 연결되어 있어서 필요한 경우, 뒤로가기 버튼을 통해 이전 단계로 자유롭게 돌아갈 수 있도록 설계했습니다.

①⓪ 컴포넌트 목록

.

왼쪽	오른쪽
알림창과, 버튼, 입력 필드의 컴포넌트의 요소를 확인할 수 있고,	주문 완료 후의 페이지 구성입니다.

왼쪽	오른쪽
주문 완료의 두 번째 화면의 페이지 구성입니다.	알러지 선택 페이지의 구성입니다.

왼쪽	오른쪽
영양소 분석 페이지에 해당하는 구성입니다.	백엔드 컴포넌트 중, 로그인 기능에 대한 명세입니다.

왼쪽	오른쪽
사용자 알러지 정보에 따른 메뉴 데이터를 전달하는 API 기능 설명입니다.	사용자가 주문한 메뉴 기반의 전체 영양 성분을 계산해주는 API 기능 요약입니다.

왼쪽	오른쪽
사용자의 주문 데이터 바탕의 영수증을 생성하는 기능을 설명합니다.	회원가입 기능에 대한 API 명세입니다.

Skill & Tool

🤩 시연영상

G-Order.mp4