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

핵심 성과

구조

앱을 화면, 백엔드, 장치 제어로 나누고 미리 허용한 통로로만 통신하게 했다.

• 화면 — 재사용 가능한 컴포넌트로 구성하고 카메라 미리보기·효과를 처리
• 중간 연결층 — 검증된 기능만 화면에 노출해 권한을 최소화
• 백엔드 — 미디어 처리·장치 제어·외부 연동·로컬 저장을 담당

카메라·미디어 처리

여러 카메라의 미리보기·사진 촬영·장시간 녹화를 하나의 처리 흐름으로 다룬다.

• 촬영·요청마다 고유 키를 붙여 중복 실행을 방지
• 세션·사진·처리 기록을 로컬 DB에 저장해 네트워크가 끊겨도 데이터 유지
• 운영체제별 카메라 차이를 감춰 같은 방식으로 제어

외부 AI 연동

외부 AI 분석을 단계별로 나누고 나머지 코드와 분리했다.

• 전처리 → 업로드 → 요청 → 결과 수집을 단계별로 분리
• 공급자를 바꿔도 다른 코드에 영향이 없도록 연동 부분을 격리
• 결과는 로컬에 먼저 저장한 뒤 화면에 반영

기술 스택

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