자바

[자바로 간단한 키오스크 시스템 구현해보기] 1편 UI 화면 구성

parkhesse7 2025. 5. 20. 23:03
반응형

 

키오스크 관련한 아이디어들이 떠오른 게 있어서 한 번 모델링을 해봐야겠다는 생각을 하고 있었는데,

마침 진행하고 있는 부트캠프에서 자유 주제로 기회가 주어져 팀원들과 간단한 햄버거 키오스크 시스템 모델링을 해보았습니다.

 

mysql + 자바 콘솔 jdbc로 간단하게 구현해 볼 것입니다.

 

1편에서는 UI 화면 구성

2편에서는 모델링

3편에서는 JDBC 구현을 다루겠습니다.

 

UI 화면 구성 툴은 Canva를 이용하였습니다.

모델링과, JDBC 구현에 초점을 맞추었기 때문에

UI는 콘솔 흐름만 나타내서 예쁘진 않은 점 양해 부탁드립니다 (수정 예정)

 

요즘 다 뷰나 리액트, 타임리프, 자바스크립트 등을 활용해서 화면을 나타내는데

콘솔도 해보려고 하니 과거로 돌아간 기분이어서 재밌네요 

 

 

메인화면 / 주문하기 진입 시 화면

 

https://www.text-image.com/convert/ascii.html

https://wepplication.github.io/tools/asciiArtGen/

https://www.ascii-art-generator.org/

 

그래도 나름 콘솔을 꾸미기 위해 ascii-art generator로 메인 화면을 꾸미기로 했습니다.

메인화면과, 주문하기 진입 시 화면입니다.

 

먹고가기, 포장하기 진입 시 카테고리 선택 화면 / 카테고리 선택 진입 시 화면

 

테이크아웃 여부를 결정하고 난 후의 화면과, 카테고리 화면입니다.

첫 번째 사진에서 괄호를 넣은 이유는 담은 상품이 없는, 처음 진입 시에는 해당 내용이 뜨지 않아도 되기 때문입니다.

 

 

음식 선택 화면 1

 

음식 선택 화면 2

 

카테고리 별 상품 선택 화면입니다.

상품 선택 시에는 "~~ 가 장바구니에 담겼습니다"라는 메시지가 뜨고, 다른 음식 선택을 위해 다시 카테고리 선택 화면으로 이동합니다.

 

담은 상품 (장바구니) 결제 화면

 

아까 화면에서 담은 상품이 없을 경우에는 괄호로 출력해 주지 않겠다는 "담은 상품 결제"가 화면에 있었죠?

담은 상품 결제로 진입 시 나오는 화면입니다. 담은 상품을 취소할 수 있고, 담은 상품의 총액을 확인할 수 있습니다. 

모두 취소를 해 장바구니가 빌 시에는 메인으로 이동하게 됩니다.

 

포인트 적립 화면

 

담은 상품을 확인하고 결제로 진입 시 포인트 적립 화면입니다.

 

결제수단 선택 화면

 

결제수단 선택 화면입니다.

카드나, 페이로 결제를 할 수 있습니다.

 

결제 방법 선택 화면

 

 

포인트 확인 후, 사용할 금액을 100원 단위로 입력하면

결제 화면으로 이동합니다.

사용하지 않고 다시 0을 입력해 뒤로 갈 수 있습니다.

 

 

영수증 출력 선택 화면 / 주문내역 화면

 

영수증 출력 선택 화면과, 주문 내역 화면입니다.,

주문 내역 화면에서는 5초 뒤 자동으로 메인화면으로 이동합니다.

 

화면 수정은 조금 더 필요할 것 같습니다.

 

 


이렇게 화면 구성에 대해 알아보았는데요, 다음 시간에는 이 화면을 바탕으로 모델링을 진행해 보겠습니다.

 

모델링, JDBC 구현 방법에 대해서 알아보는 것이 목적이기 때문에

카드, 페이 등과 같은 내용에 대해서는 해당 API를 사용했다고 가정하고 진행할 것입니다.

 

중요한 점은 키오스크 시스템은 쿠팡, 마켓 컬리와 같은 장바구니 시스템과 다른 점이 있습니다. 

쿠팡과 마켓 컬리와 같은 시스템에서는 물건을 장바구니에 담게 되면, 물건 담았어. 기록해 돌라는 POST 요청이 서버로 전달되게 됩니다. 그래서 유저가 로그아웃을 하고 다시 접속하거나, 화면을 껐다 켜도 그대로 물건이 장바구니에 남아있게 됩니다.

 

하지만 키오스크 시스템에서는 유저가 물건을 담고, 취소를 하는 일이 빈번하고, 물건을 담는 순간 그 자리에서 산다는 차이점이 있습니다. 그래서 담은 물건들을 리스트와 같은 형태로 프로그램 내에서 관리하다 "결제 완료 시"에 거의 모든 데이터를 서버로 전송을 하게 해야 할 것 같습니다.

 

초기 화면에서, 서버 DB에서 불러와야 하는 것은 카테고리, 음식 정보들이 있을 것 같습니다.

 

포스팅 읽어주셔서 감사하고, 자바로 간단한 키오스크 시스템 구현해 보기 2편 모델링으로 찾아뵙겠습니다.

반응형