1. 꽃다발 방명록 인터랙션 프로젝트, 어떤 기술을 사용할까
2025년 6월 3일
부분을 클로즈업하면 관람객의 방문록이 보이고, 전체를 보면 큰 그림이 보인다. 처음엔 아무것도 보이지 않는다. 하지만 흔적이 모이며, 보이지 않던 형태가 드러난다. 이것은 우리가 무언가를 클로즈업해서 보게 될 때, 처음엔 이해할 수 없지만 시간이 지나고 시선이 넓어질수록 점점 그 의미를 알아가는 과정과 닮아 있다.
이 프로젝트는 전시 공간에서 방문객이 음성으로 남긴 메시지를 꽃 모양 캔버스에 채워 넣는 인터랙티브 아트 워크입니다.
디자이너 : 박세은
엔지니어 : 김도완
핵심 컨셉
"각각이 모여 낱개의 글, 하나로 하나의 이미지"
- 클로즈업: 개별 방명록 텍스트
- 전체: 하나의 꽃 이미지
- 시간에 따라 메시지가 쌓이며 형태가 드러남
이 컨셉은 클로즈업과 전체 보기, 시간의 흐름을 동시에 보여주는 인터랙티브 경험입니다.
프로젝트의 목표
1. 전시 공간에서의 자연스러운 인터랙션
- 버튼 없이 음성으로 시작
- 방문객이 쉽게 참여
- 기술적 장벽 최소화
2. 시각적 아름다움과 의미의 조화
- 꽃 모양 안에 텍스트가 자연스럽게 흐름
- 개별 메시지와 전체 이미지의 이중 해석
- 시간에 따라 변화하는 작품
3. 장시간 무인 운영
- 전시 기간 동안 안정적 동작
- 다양한 사용 패턴 대응
- 자동 복구 및 오류 처리
기술 스택 선택의 여정
React를 선택한 이유
복잡한 상태 관리의 필요성
음성 인식 워크플로우는 여러 상태를 동시에 관리해야 합니다:
- 대기(idle) → 듣기(listening) → 완료(done) → 렌더링(rendering) → 정리(clearing) → 대기(idle)
- 볼륨 모니터링, 침묵 타이머, 애니메이션 진행 상태 등
React의 상태 관리와 useRef로 이런 복잡성을 체계적으로 다룰 수 있다고 생각하여, 리액트를 선택하게 되었습니다.
실시간 UI 업데이트
음성 인식 중 오버레이 표시, 텍스트 확인 화면, 캔버스 페이드 애니메이션 등이 React의 선언적 렌더링과 상태 변화에 따라 자연스럽게 업데이트됩니다.
SPA(Single Page Application)를 선택한 이유
전시 환경에서의 연속성
- 페이지 리로드 없이 연속적인 경험 제공
- 음성 인식 세션 중단 방지
- 캔버스 상태 유지
빠른 상태 전환
음성 인식 → 확인 → 렌더링 → 대기 사이클이 페이지 전환 없이 즉시 진행됩니다.
로컬 저장소와의 통합
localStorage로 새로고침 후에도 방명록이 유지됩니다.
서버를 사용할지 로컬스토리지를 사용할 지 고민이 되었습니다.
하지만 전시장 와이파이 환경이 불안정함을 미리 알고 있었고, 또한 사용자가 일부러 이상한 욕설같은 말을 했을 때, 이를 필터링 한다고 해도 욕설 인식 로직이 제대로 파악하지 못하고 들어갈 수 있어, 사용자 개인이 자신의 모바일이나 개인 컴퓨터에서 이 프로그램을 사용할 때 욕설이 생기면 이를 제어하기가 힘들 뿐 아니라, 온갖 환경에서 인식되는 음성데이터가 꽃에 쌓이면 처음에 의도한 전시장에 온 사람들이 축하하는 말이 모여서 꽃을 이룬다는 의미가 퇴색될 가능성이 굉장히 크다고 생각했습니다. 이에 로컬 스토리지에 방명록 데이터를 저장하기로 결정했습니다.
브라우저 네이티브 API 선택 이유
Web Speech API
- 별도 서버/API 키 불필요
- 실시간 음성 인식
- 연속 모드(
continuous: true)로 긴 문장 처리
사실 더 성능이 좋은 STT 기술을 사용하고자 하였습니다. 하지만 교수님의 피드백은, 일부러 STT 기술의 성능을 낮추면, 사용자가 이 전시작품을 사용할 때 오히려 더 재미있다고 느끼는, 즉 어느정도의 이상한 음성인식은 오히려 사용자의 집중도를 높일 것이라는 의견을 주셨습니다. 이는 전시작품에 사용자 체험 시간을 의도적으로 증가시키기도 하고, 흥미도 높일 수 있어 다운그레이드 하여 Web Speech API를 사용하기로 했습니다.
Web Audio API
- 실시간 볼륨 측정으로 자동 시작
Canvas API
- SVG 경로 기반 텍스트 배치
기술 선택 및 추후 개발시 핵심 고려사항
1. 전시 환경의 제약
- 장시간 무인 운영
- 다양한 사용자 패턴
- 네트워크 불안정 가능성
2. 사용자 경험 최우선
- 버튼 없이 자동 시작
- 자연스러운 침묵 처리
- 부드러운 애니메이션
3. 유지보수성
- 상수 분리 (현장에서 수치 조정해야할 가능성 농후.)
- 유틸리티 분리
- JSDoc 주석
이 기획과 기술 선택 및 로직을 바탕으로 앞으로 구현을 진행할 예정입니다.
만관부