Architecture Deep-Dive · WPF Desktop Application
주문 키오스크 App 시스템 아키텍처
MVVM 패턴 · 비동기 처리 · 서버 API 연동 · 시리얼 디바이스 통신
WPF / C# .NET Framework MVVM Pattern async / await Serial COM
02 / 06 — OVERVIEW
전체 구조
한눈에 보기
Architecture
MVVM 레이어
View, ViewModel, Model을 명확히 분리해 UI 로직과 비즈니스 로직이 섞이지 않도록 설계.
서버 API 연동
백엔드 REST API와 통신. 메뉴 조회, 주문 전송.
비동기 처리
async/await 패턴으로 UI 스레드 블로킹 없이 모든 I/O 작업 처리. Task 기반의 일관된 비동기 흐름 유지.
시리얼 디바이스
영수증 프린터, 카드 리더기, 리니어 장치 등 다수의 하드웨어와 동시 통신.
결제처리 트랜잭션 처리
원자성을 보장하기 위한 결제 정보 log(redo/undo) 기반으로 결제 이후 문제 발생시 자동 결제 취소 및 롤백 처리
로컬 캐시 / 상태
로컬 캐시 전략
InMemory
03 / 06 — PATTERN
MVVM
설계 구조
MVVM
View
Region 처리 방식으로 미리 설계된 화면 레이아웃에 뷰모델만을 연결해서 컨텐츠 표시
사용자 액션은 최대한 Behaviors 사용으로 ViewModel에 의존
팝업 화면을 위한 Dialog Service 구현 사용
성능을 위해 UI Virtualization 구현 사용
모바일 UI/UX 커스텀 컨트롤 구현
↑ Command
Binding ↓
ViewModel
뷰 영역과 ViewModel 간의 데이터 바인딩을 통해 UI와 로직을 분리
ObservableCollection,
RelayCommand,
INotifyPropertyChanged
↑ Result
Call ↓
Model
각 도메인 역할별 Service
서버 API 연동
하드웨어 연동 Service
04 / 06 — VIRTUALIZATION & ASYNC
UI 가상화 & 비동기 처리
전략
async / await
UI 렌더링
UI 가상화 (Virtualization)기반으로 지연 없는 랜더링 처리 Virtualization
데이터 병렬 처리
썸네일 이미지 Download / 메뉴 정보 / 기타 정보 조합(이벤트, 할인 등) Parallel
이벤트 수신
실시간 이벤트 수신 처리(취소 요청, 재고부족 처리 등) WebSocket
05 / 06 — SERIAL
하드웨어 시리얼
통신 연동
Serial COM
카드 결제 단말기 (VAN)
COM
영수증 프린터
COM
높낮이 조절 리니어 장치
HID
카메라
COM
통신 아키텍처 패턴
01 각 장비를 ISerialDevice 인터페이스로 추상화 — 교체·테스트 용이. 새 단말기가 와도 구현체만 교체.
02 SerialPortManager가 모든 포트를 중앙 관리. 연결 해제/재연결 자동 처리 및 포트 충돌 방지.
06 / 06 — SUMMARY
기술 스택
요약
Summary
MVVM
View / ViewModel / Model 분리
비동기 처리
UI 스레드 블로킹 Zero
실시간 이벤트 처리
WebSocket 기반 실시간 통신
하드웨어 연동
시리얼 / HID 장비 동시 연동
인터페이스 추상화
1 / 8
← → Space