뷰티 매장 키오스크 — SW 아키텍처

핵심 성과

계층 구조

Electron 앱을 UI(Renderer) · 백엔드(Main) · 디바이스 헬퍼로 분리하고, 각 계층은 화이트리스트 기반의 안전한 IPC 경계로만 통신하도록 설계했다.

• Renderer (UI) — 재사용 가능한 컴포넌트 계층으로 화면을 구성하고, 카메라 스트림과 미리보기 효과를 후처리 파이프라인에서 처리
• Preload (Context Bridge) — 검증된 IPC 헬퍼만 렌더러에 노출해 권한을 최소화 (채널 화이트리스트 + 인자 검증)
• Main (백엔드) — 미디어 작업·디바이스 제어·외부 연동·로컬 저장을 담당

미디어 · 디바이스 처리

멀티 카메라 프리뷰·스틸 캡처·장기 녹화를 미디어 파이프라인으로 처리하고, 카메라 장치 식별과 권한 변경을 한 곳에서 일관되게 관리했다.

• 멱등 처리 — 캡처·요청 명령에 고유 키를 부여해 중복 실행을 방지
• 오프라인 무결성 — 세션·미디어·처리 기록을 로컬 DB에 저장해 네트워크 단절에도 데이터를 잃지 않도록 설계
• 디바이스 추상화 — 운영체제별 카메라 장치 차이를 흡수해 동일한 인터페이스로 노출

외부 연동

외부 AI 연동은 전처리 · 업로드 · 요청 · 결과 수집의 단계로 분리하고, 공급자 교체가 나머지 코드에 파급되지 않도록 연동 계층을 격리했다. 결과는 로컬에 저장한 뒤 화면 상태로 반영한다.

기술 스택

• Electron
• React / TypeScript
• IPC (Context Bridge)
• 미디어 파이프라인
• WebGL / WebGPU
• 로컬 DB