동행

27개 화면에서 음성, 자막, 3D 애니메이션이 함께 실행됐습니다. 화면마다 재생 시점과 종료 처리 방식이 달라 같은 제어 로직이 반복됐고, 화면이 늘어날수록 수정 범위가 커지며 중복 실행이나 재생 누락 관리도 어려웠습니다.

각 화면은 '지금 이 액션을 재생할지'와 '끝나면 무엇을 할지'만 전달하도록 설계했습니다. 재생 조건은 하나로 통일하고, 이미 실행한 작업은 ref로 기억해 중복 실행을 차단했습니다. 음성 종료 후 분기는 onComplete로 연결해 화면마다 타이머와 후속 처리 로직이 흩어지지 않도록 정리하고, 공통 재생 상태와 제어 함수는 Context로 묶어 여러 화면이 같은 방식으로 연결되도록 통일했습니다.

개선 전에는 화면마다 오디오 실행, 애니메이션 제어, 종료 처리, 정리 로직을 직접 작성했습니다. 개선 후에는 화면에서 재생 조건과 완료 이후 동작만 넘기면 같은 패턴으로 연결 가능. 비동기 충돌과 중복 실행을 줄이고, 새 화면 추가 시에도 훅 호출 규칙만 맞추면 바로 붙일 수 있는 구조를 확보했습니다.

선언형 API — shouldActivate 조건만 명시

interface UseActionPlayOptions {
  audioFile?: string;      // 재생할 음성 파일
  dialogue?: string;       // 화면에 표시할 자막
  avatarState?: AvatarState; // Three.js 애니메이션 상태
  shouldActivate?: boolean;  // 선언형: 외부에서 조건만 명시
  animationDelay?: number;
  onComplete?: () => void;   // 완료 후 체이닝
}

// ref 기반 Idempotency Guard — 중복 실행 방지
const hasPlayed = useRef(false);

useEffect(() => {
  if (shouldActivate && !hasPlayed.current) {
    playAudio();
    setDialogue(dialogue);
    setAvatarState(avatarState);
    hasPlayed.current = true; // 동일 액션 재실행 차단
  }
}, [shouldActivate]);

실제 ATM은 메인 디스플레이와 숫자 패드가 물리적으로 분리된 구조로, 이를 소프트웨어로 재현해 실제 ATM에 가까운 사용자 경험을 만들자는 방향으로 기획했습니다.

Screen.getAllDisplays() API를 활용하여 연결된 디스플레이를 실시간으로 감지하고, 단일/듀얼 모니터 환경에 따라 자동으로 윈도우를 배치하는 시스템을 구축했습니다. Main / Renderer / Preload 프로세스를 분리하고 Context Bridge를 적용하여 보안 아키텍처를 설계했습니다. IPC 통신 구조를 설계하여 메인(뱅킹 서비스)과 서브(키패드) 윈도우 간 안정적인 양방향 데이터 동기화를 구현했습니다.

메인 화면과 입력 화면이 실시간 동기화되는 듀얼 윈도우 키오스크를 구현했습니다. Electron의 Main / Preload / Renderer 구조에 대한 이해를 얻었습니다.

시니어 사용자에게 실제 은행원과 대화하는 듯한 친밀감 있는 경험을 제공하고자 했으며, 애니메이션 부재로 인한 몰입감 저하를 개선할 필요가 있었습니다.

Blender를 활용하여 3D 은행원 모델링을 수정하고, 키프레임 애니메이션(idle, walk, bow 등)을 제작했습니다. Three.js를 통해 제작한 3D 모델과 애니메이션을 프로젝트에 적용했습니다.

시니어 사용자에게 실제 은행원과 대화하는 듯한 몰입감 있는 경험을 제공했습니다.