고객이 QR-Code로 모바일 주문하고 점주가 POS로 실시간 관리할 수 있는 음식점용 통합 시스템 구축
- 프로젝트명: Kible: 음식점 QR-Code 모바일 주문 시스템
- 목표: 고객이 QR-Code로 모바일 주문하고 점주가 POS로 실시간 관리할 수 있는 음식점용 통합 시스템 구축
- 작업기간: 2021-01-01 ~ 2021-11-26
- 총 인원: 2명
- 인력구성: PM·FullStack-1명, FullStack-1명
- 대다수의 패스트푸드점이나 카페 같은 곳에서는 COVID-19를 기점으로 Kiosk를 확충함.
- 일반음식점은 테이블에서 태블릿을 활용하여 주문하는 시스템이 보급되고 있음.
- 테이블에서 태블릿을 활용하여 주문하는 시스템의 경우, 점주의 입장에서 관리 및 비용적인 부분에 많은 투자를 필요로 함.
- 네이버 주문과 같은 서비스의 경우 이 프로젝트와 맥락은 같으나, 식사를 하면서 추가 주문을 하고, 최종적으로 결제를 하게 되는 일반음식점의 환경과 맞지 않음.
- QR코드를 스캔하여 모바일로 주문할 수 있는 Mobile 환경 제작
- 주문을 실시간으로 수신하고, 관리할 수 있는 POS 시스템 제작
- Mobile과 POS 간의 양방향 실시간 통신 및 데이터 관리를 위한 Sever 제작
| Period | Phase | Key Tasks |
|---|---|---|
| 2021.01 ~ 02 | 선행 연구 |
• React Library 연구 • Express Framework 분석 • ORM 학습 |
| 2021.03 ~ 04 | 프로젝트 설계 |
• UI/UX 및 ERD 설계 • FE / BE Architecture 설계 |
| 2021.05 ~ 08 | 프로젝트 구현 |
• FE(POS, Mobile) & BE 개발 • HTTP 통신 및 Logging 시스템 구축 |
| 2021.09 ~ 10 | 실시간 통신/배포 |
• Socket.IO 기반 실시간 기능 구현 • AWS EC2, NGINX 배포 (SSL 적용) • Docker 기반 Database 컨테이너화 |
| 2021.11 | 유지보수 |
• QA 및 버그 수정 • 의존성 관리 및 서버 보안 강화 |
| POS 메인화면 | 메뉴 관리 화면 |
|---|---|
|
|
| 메뉴 선택 및 찜목록(카트) 화면 | 주문서 및 결제 화면 |
|
|
| 메뉴 선택 화면 | 찜목록(카트) 화면 | 주문서 화면 |
|---|---|---|
|
|
|
| Domain | Method | Endpoint | Description |
|---|---|---|---|
| TableMgnt | GET | /api/table-mgnt |
전체 테이블 목록 조회 |
| POST | /api/table-mgnt |
테이블 정보 등록 (table_no, table_name) | |
| MenuMgnt | GET | /api/menu-mgnt |
전체 메뉴 관리 목록 조회 (가격, 재고 포함) |
| SOCKET | /api/menu-mgnt |
메뉴 관리 조회 시 실시간 이벤트 전송 (GET /api/menu-mgnt Success) | |
| MenuSlct | GET | /api/menu-slct |
전체 메뉴 목록 조회 (가격, 재고 포함) |
| SOCKET | /api/menu-slct |
메뉴 조회 시 실시간 이벤트 전송 (GET /api/menu-slct Success) | |
| POST | /api/menu-slct |
메뉴 등록 (이름, 가격, 재고) | |
| PATCH | /api/menu-slct |
메뉴 재고 수정 | |
| DELETE | /api/menu-slct |
메뉴 삭제 | |
| WishList | GET | /api/wishlist/{table} |
특정 테이블의 위시리스트 목록 조회 |
| SOCKET | /api/wishlist |
위시리스트 조회 시 실시간 이벤트 전송 (GET /api/wishlist Success) | |
| POST | /api/wishlist/{table} |
테이블에 메뉴 추가 (기본 수량 1) | |
| PATCH | /api/wishlist/{table} |
위시리스트 메뉴 수량 변경 | |
| DELETE | /api/wishlist/{table} |
특정 메뉴 삭제 | |
| DELETE | /api/wishlist/reset/{table} |
테이블 위시리스트 전체 초기화 | |
| OrderSheet | GET | /api/ordersheet/{table} |
특정 테이블의 주문 목록 조회 |
| SOCKET | /api/ordersheet |
주문 조회 시 실시간 이벤트 전송 (GET /api/ordersheet Success) | |
| POST | /api/ordersheet/{table} |
테이블에 주문 메뉴 추가 | |
| PATCH | /api/ordersheet/{table} |
주문 메뉴 수량 변경 | |
| DELETE | /api/ordersheet/{table} |
테이블 주문 내역 전체 삭제 | |
| DailySales | GET | /api/dailysales |
일일 메뉴별 판매 내역 조회 (총 매출 포함) |
| SOCKET | /api/dailysales |
일일 매출 조회 시 실시간 이벤트 전송 (GET /api/dailysales Success) | |
| POST | /api/dailysales |
메뉴별 일일 판매 수량 등록 | |
| PATCH | /api/dailysales |
메뉴별 일일 판매 수량 수정 | |
| DELETE | /api/dailysales |
일일 매출 데이터 전체 초기화 |
 |
이현준 PM, FullStack, UI/UX설계, 문서화 |
 |
김준기 FullStack, ERD설계, 자료조사 |
- 프로젝트 일정 관리 및 조율 (Daily Scrum Meeting, 회의록 작성 등)
- Figma를 활용해 POS, Mobile의 UI/UX 프로토타입 제작.
- Full-stack 아키텍처 설계 및 기술 스택 선정
- React로 POS 시스템 및 Mobile 주문 사이트 구현, Express로 Server 구현
- Socket.IO로 Server-POS, Server-Mobile 간 실시간 양방향 통신 구현
- AWS EC2에 NGINX Reverse Proxy 및 SSL(Let’s Encrypt) 적용하여 배포
- Docker로 Database 컨테이너화 및 AWS EC2 배포
- AWS EC2 보안 그룹 및 서버 보안 정책 관리
첫 프로젝트였던 Kible은 음식점 주문이 들어와서 처리되기까지의 과정을 직접 구현해 본 경험이었습니다. 점주가 POS로 주문을 확인하고, 고객이 모바일로 추가 주문을 하는 실제 사용 흐름을 그려보면서 단순히 기능을 붙이는 게 아니라 사용자 맥락에 맞춰 설계해야 한다는 걸 배웠습니다.
Figma로 화면 구조를 잡고 ERD를 그리면서 “어떤 화면에 어떤 데이터가 필요한가”를 먼저 정의했고, 그 과정에서 주문 내역처럼 즉시 확인이 필요한 데이터는 Socket.IO로 실시간 푸시하고 메뉴 조회처럼 변경 빈도가 낮은 데이터는 REST API로 처리하는 식으로 통신 방식을 나눴습니다. 이론으로만 알던 실시간 통신과 HTTP의 차이를 실제 사용 시나리오에 맞춰 적용해 보는 기회였습니다.
배포 단계에서는 NGINX 설정 하나가 잘못되어도 서비스 전체가 멈춘다는 걸 직접 겪으면서 코드를 잘 짜는 것만큼이나 안정적으로 운영하는 것도 중요하다는 걸 체감했습니다. PM 역할을 병행하면서는 두 명이서 11개월 안에 무엇까지 구현할 수 있을지 현실적으로 판단하고 우선순위를 조율하는 연습을 했는데, 설계나 코드 품질 면에서 아쉬운 부분도 많았지만 서비스를 처음부터 끝까지 만들어 본 경험이 이후 프로젝트의 기준이 되었습니다.