📸 사진 촬영 및 출력/전송 기능 고도화

📌 프로젝트 개요

• 사진 촬영, 미리보기, 출력, 이메일 및 문자 전송 기능을 포함하는 콘텐츠입니다.
• 로봇에 장착된 웹캠으로 고화질 사진을 촬영하고, 실시간으로 확인 및 공유할 수 있는 기능을 제공합니다.
• 기존에는 미들웨어가 웹캠 이미지를 Base64로 변환해 소켓으로 전달했으나,
  브라우저에서 카메라 스트림을 직접 처리하는 방식으로 전환했습니다.
• 전환 결과 화면 끊김이 사라지고 UHD(4K) 고해상도 촬영이 가능해졌으며, CPU 사용량도 함께 줄었습니다.
• 촬영 화질과 이미지 효과 기본값은 로봇별 설정 파일로 관리하다, 이후 RCMS(Robot Contents Management System)와 연동해
  관리자가 화면에서 직접 지정할 수 있도록 확장했습니다.
• 물리 키보드가 없는 로봇 환경이므로, 가상 키보드와 숫자 패드를 제공해 이메일 주소와 전화번호를 입력받도록 했습니다.

🧑‍💻 주요 기여

• 미들웨어에서 WebSocket으로 Base64 영상을 받아오던 방식을 대체하기 위해,
  MediaDevices API를 도입해 실시간 웹캠 스트리밍 기반 구조로 리팩터링하였습니다.
• 이를 통해 촬영 성능과 화질을 개선하였습니다.
  • Base64 인코딩 과정을 제거해 원본 화질을 그대로 유지하고,
    HD(720p) 한계를 넘어 UHD(4K) 해상도까지 지원하도록 개선하였습니다.
  • 실시간 미리보기는 1080p로 상한을 두고 촬영 결과물만 원본 해상도로 캡처해,
    화면 끊김 없이 이어지면서도 결과물의 화질은 유지되도록 했습니다.
  • 인코딩과 소켓 전송이 사라지면서 CPU 사용량을 20%p 절감하고, 데이터 전송량을 줄였습니다.
• 상하 및 좌우 반전 효과를 화면 표시와 저장본에 서로 다른 방식으로 분리 처리하여,
  실시간 영상에 불필요한 연산이 들어가지 않도록 구성하였습니다.
• 조작 주체를 나누어, 관리자는 촬영 화질과 반전 기본값, 노출할 액자 프레임 목록을 지정하고
  사용자는 촬영 화면에서 제공된 프레임 중 선택하도록 구성하였습니다.
  현장마다 카메라 설치 방향과 운영 방침이 달라, 개발자 수정 없이 조정할 수 있도록 분리하였습니다.
• 촬영된 이미지의 프린터 출력, 이메일 및 MMS 전송을
  미들웨어 명령과 파라미터 규격에 맞춰 전달하는 방식으로 연동하였습니다.
• 물리 키보드가 없는 환경에서 이메일 주소와 연락처를 입력받기 위해
  터치 기반 가상 키보드와 숫자 패드를 직접 구현하였습니다.

🔧 기술 선택 및 설계 고민

문제 상황

• 기존 방식은 미들웨어가 웹캠에서 이미지를 캡처해 Base64 문자열로 변환한 뒤 소켓으로 전송하고,
  프론트가 그 문자열을 받아 화면에 그리는 구조였습니다.
• 미리보기를 위해 초당 수십 번 인코딩과 전송이 반복됐고, 화면이 끊겨 보였습니다.
• Base64는 원본 대비 데이터가 커지기 때문에 해상도를 올릴수록 부담이 커져,
  HD(720p)를 넘는 해상도를 지원하지 못했습니다.

해결 방법

• 브라우저가 카메라에 직접 접근할 수 있으므로, 중간 변환 단계를 없앨 수 있다고 판단했습니다.
  MediaDevices API로 받은 스트림을 <video>에 연결해 미리보기는 브라우저가 그대로 표시하게 하고,
  촬영 시점에만 canvas로 프레임을 캡처하도록 바꿨습니다.
• 인코딩과 전송이 통째로 사라지면서 화면 끊김이 해소되고 CPU 사용량이 20%p 줄었습니다.
  작업관리자와 로봇 모니터링 툴로 확인했습니다.
• 추가로 해상도를 용도에 따라 분리했습니다.
  실시간 스트림을 4K로 돌려보니 체감 화질 차이에 비해 리소스 소모가 커서,
  미리보기는 1080p로 상한을 두고 촬영 결과물만 원본 해상도로 캡처하도록 했습니다.

반전 효과를 두 방식으로 나눈 이유

• 실시간 영상과 촬영 후 미리보기는 CSS transform, 저장되는 이미지는 canvas transform으로
  처리 방식을 분리했습니다.
• 화면에 보이는 것은 CSS로 처리했습니다.
  실시간 영상에 canvas 연산을 걸면 매 프레임마다 픽셀 처리가 들어가지만,
  CSS는 합성 단계에서 처리되므로 부담이 거의 없습니다.
• 반면 저장 파일은 실제 픽셀이 뒤집혀야 하므로 canvas transform으로 그렸고,
  save()와 restore()로 감싸 변환 상태가 다음 촬영에 누적되지 않도록 했습니다.