얼굴이 이모지가 되는 순간

카메라 앞에서 네 장의 사진을 찍고 나면, 화면은 내 표정을 분석해 일곱 가지 감정 중 하나를 이모지로 골라 돌려줍니다. 이번 포스팅에서는 '마음이 궁금해' 콘텐츠의 기술적인 구현 과정을 공유합니다.

1. 시스템 아키텍처 개요

본 프로젝트는 크게 세 가지 단계로 구성됩니다.

- 얼굴 촬영: 키오스크 웹캠으로 정사각형 크롭된 얼굴 이미지를 650×650 해상도로 네 장 수집합니다.

- 감정 분석: 각 사진을 DeepFace HTTP 서버로 보내 일곱 가지 감정 중 가장 지배적인 하나dominant_emotion)를 얻어 이모지로 매핑합니다.

- 공유와 반출: 사용자의 선택에 따라 결과를 전시실 상단 전광판으로 TCP 스트리밍하고, 클라우드 오브젝트 스토리지에 업로드해 QR 코드로 출력합니다.

메인 플랫폼은 Unity 클라이언트 + 별도 전광판 서버이며, 감정 분석은 외부 DeepFace Python 서비스와 HTTP 로 연결됩니다.

2. 주요 기술적 구현

2.1 웹캠 촬영과 감정 분석 CameraManager.cs, DeepFaceManager.cs)

CameraManager.cs 가 Unity 의 WebCamTexture 첫 장치를 자동으로 잡아 오고, uvRect = new Rect(1, 0, -1, 1) 로 좌우를 반전시켜 사용자에게 거울처럼 자연스럽게 보이도록 합니다. 캡처 시점에는 정사각형으로 크롭한 뒤 650×650 으로 리사이즈해 모델 입력 규격을 통일합니다.

DeepFaceManager.cs 는 PNG 로 인코딩한 텍스처를 {url}/checking 엔드포인트로 POST 하고, 서버 응답의 dominant_emotion 필드를 EEMOTIONSPRITE enum 으로 변환합니다. happysadangryfearsurpriseneutralbored 일곱 가지를 정식으로 수용하고, disgust 는 NEUTRAL 로 매핑하여 UI 공백이 뜨지 않도록 방어했습니다. 네트워크 타임아웃은 20초로 넉넉히 두고, 실패 시 RetryCurrentSlot() 으로 같은 슬롯만 다시 찍도록 설계했습니다.

2.2 네 장 촬영 루프와 이모지 토글 QuestPanelManager.cs, PictureManager.cs)

QuestPanelManager.cs 는 4초 카운트다운과 촬영을 네 번 반복하는 루프로 이루어져 있으며, 매 슬롯마다 DeepFace 응답을 받아 PictureManager.cs 에 데이터를 넘깁니다. 슬롯 UI 는 사진과 이모지를 동일한 위치에서 토글할 수 있도록 설계되어, 사용자가 결과 화면에서 "사진 그대로 둘지, 이모지로 덮을지"를 즉흥적으로 선택할 수 있습니다.

성별 선택 버튼을 함께 제공해 ResourceManager.RandomEmoji(emotion, isBoy) 가 감정 × 성별 조합의 스프라이트 풀에서 랜덤 이모지를 골라 오는 구조로, 같은 '행복' 결과라도 매번 다른 이모지가 뜨며 리플레이성을 확보했습니다.

- 촬영 횟수: 4회

- 이미지 해상도: 650×650

- 감정 카테고리: 7종

2.3 QR 코드 생성과 전광판 공유 QRManager.cs, NetworkManager_MakeEmotion_Client.cs)

사용자가 공유에 동의하면 PictureManager.CaptureSelf() 로 결과 화면을 캡처해 클라우드 오브젝트 스토리지에 PNG 로 업로드하고, 돌아온 객체 URL 을 ZXing 라이브러리의 BarcodeWriter 로 256×256 QR 이미지로 인코딩합니다. QR 주변에 paddingRatio = 0.5 만큼의 화이트 패딩을 자동으로 덧대어, 스마트폰 카메라 인식률을 안정적으로 확보했습니다.

동시에 NetworkManager_MakeEmotion_Client.cs 가 선택된 사진을 [4바이트 길이][PNG 바이트] 형식의 프레임으로 TCP 서버에 올려, 전시실 상단 전광판 씬의 CameraController 가 수신 큐에서 꺼내 크로스페이드로 슬롯에 띄웁니다. 공유를 택한 관람객의 얼굴이 키오스크에서 전광판으로 이어지는 "내 얼굴이 머리 위로 올라간다"는 연출이 이 파이프라인으로 완성됩니다.

3. 사용자 경험(UX) 최적화

거울 같은 프리뷰 : 웹캠 영상을 좌우 반전해, 사용자가 손을 드는 방향과 화면 속 움직임이 일치하도록 맞추어 첫 조작의 어색함을 없앴습니다.

네 장 연속 촬영 : 한 번의 표정이 아닌 네 번의 표정을 수집해, 아이들이 한 장 실패해도 결과 화면에서 가장 마음에 드는 장면을 고를 수 있도록 여지를 남겼습니다.

사진과 이모지의 자유 선택 : 초상권이 걱정되는 관람객도 사진 대신 이모지로 완전 대체해 결과를 남길 수 있도록, 공유 단계에서 동일 슬롯 토글을 제공했습니다.

전광판으로 이어지는 확장 : QR 다운로드와 별도로, 동의한 사용자의 사진을 전시실 상단 전광판으로 TCP 스트리밍해 공간 전체로 확장되는 체험을 만들었습니다.

4. 마치며

기술적으로 이 프로젝트는 Unity 클라이언트를 가운데 두고 DeepFace HTTP 서버, 클라우드 오브젝트 스토리지, 전광판 TCP 서버를 병렬로 연결한 다중 파이프라인 사례입니다. 각 외부 서비스를 느슨하게 분리한 덕에, 한 서비스가 일시 장애에 빠져도 해당 단계만 재시도하거나 건너뛸 수 있는 유연한 플로우를 확보했습니다.

향후에는 클라우드 자격증명을 클라이언트 소스에서 떼어내 서버 측 프록시로 이전해, 배포 환경에 따라 버킷과 키를 안전하게 교체할 수 있는 구성으로 개선할 예정입니다. 또한 disgust 등 일부 감정에 전용 이모지 세트를 신규 추가해, 현재 매핑으로 처리되는 카테고리 없이 일곱 감정을 모두 고유한 시각 언어로 표현할 수 있는 구조로 확장할 계획입니다.