TL;DR

• YouCam AI Clothes API를 사용하여 「옷을 갈아입지 않고 조합을 시도하는」 Flutter 앱을 만들었다
• 과거의 착용 사진을 BASE/REF로 선택하고, 변경할 부위를 지정하여 이미지를 생성한다
• 자세가 다른 사진들을 조합해도 위화감이 없는 이미지가 만들어졌다
• API 전송 전에 얼굴 모자이크 및 배경 마스크 전처리를 클라이언트 측에 포함하여 프라이버시를 고려했다
• Flutter이므로 iOS, Android, Web에서 동작한다

만든 것

YouCam AI Clothes API를 사용하여 옷의 조합을 시도해 볼 수 있는 앱을 만들었습니다.

아침에 집을 나서기 전, 거울 앞에서 옷 조합 때문에 고민한 적 없으신가요?

전부 내 옷이고 몇 번이나 입었는데도, 조합하면 묘하게 어울리지 않는다.

한 번 입어보고, 거울을 보고, 미묘하다고 생각해서 갈아입는다.

그러면서도 "아까 것이 더 나았을지도"라며 되돌아가고 싶어진다.

그래서 과거의 착용 사진을 사용하여 옷 조합 이미지를 직접 만들 수 있는 앱을 만들었습니다.

한 번 자신이 입었던 옷을 바탕으로 이미지를 생성합니다.

따라서 옷의 사이즈감이 실제 옷과 달라서 "뭔가 다르다" 라고 느끼는 일이 잘 발생하지 않으며, 생성 정밀도를 높이기 위한 파라미터 튜닝도 필요 없습니다.

한 일

이번에는 Codex를 이용하여 작성했습니다. 사전에 결정한 사항은 다음과 같습니다.

• iOS, Android, Web에서 동작시키고 싶으므로 Flutter로 만든다
• DRY 원칙, Clean Architecture를 의식한다
• MVP(Minimum Viable Product)이므로 기능을 너무 많이 늘리지 않는다

요구사항, 설계 방침, 디자인 방향성을 전달하여 Codex가 구현하도록 했습니다.

아키텍처

현재 기능은 크게 보면 두 가지만 있습니다.

• 사진을 추가한다
• 두 장의 사진으로부터 새로운 이미지를 생성한다

구현에서는 Clean Architecture를 의식하여 조금 세분화했지만, 이번 규모에서는 너무 많이 나눈 부분도 있었습니다.

이 정도 규모라면 본래는 더 얇은 구성으로도 충분했습니다.

생각하는 방식만 단순화하면 다음과 같습니다.

• 화면은 입력을 받습니다.
• UseCase 측에서 생성 처리를 실행합니다.
• 사진을 추가할 때는 API로 보내기 전에 Privacy Preprocessor로 전처리를 합니다. (후술)
• Repository 측에서 전처리된 사진 데이터와 생성 결과를 다룹니다.
• YouCam API와의 통신은 API Client 측에 가두었습니다.

실제 구현에서는 API Key는 flutter_dotenv 등을 사용하여 환경 변수로부터 읽어오도록 하여, 소스 코드에 하드코딩하지 않도록 주의하고 있습니다.

이러한 분리 방식을 통해 UI와 API 연동을 직접 연결하지 않을 수 있었습니다.

다만, MVP로서 재현성과 속도를 우선한다면 UI(Controller) -> Repository의 2계층으로도 충분했을 것이라고 생각합니다. 이번에 "향후 확장이 용이한 형태"를 우선하여 4계층으로 만든 것은, Codex에게 "Clean Architecture를 의식해서"라고 전달한 영향이 큽니다. 다음에 비슷한 규모로 만든다면 2계층부터 시작하겠습니다.

디자인은 Figma

디자인은 Figma로 만들었습니다.

그 후 MCP를 통해 Codex로 가져와 구현했습니다.

디자인에서는 약간 잡지 같은 분위기를 의식했습니다.

Popeye나 Brutus처럼 일상적인 옷을 다루는 텐션입니다.

MVP에서 남긴 기능

처음에는 옷을 DB화하는 안도 생각했습니다.

• 자신이 가진 옷을 등록
• 상의, 하의, 신발 등으로 분류
• 거기서 옷을 선택하여 가상 착용

하지만 MVP로서는 조금 무겁다고 느꼈습니다.

왜냐하면 옷을 한 벌씩 등록해야 하고, 옷의 카테고리 관리도 필요하며, 옷의 누끼(배경 제거)나 보정도 필요할 것 같았기 때문입니다.

이번에 검증하고 싶은 것은

"과거의 착용 사진으로부터 새로운 조합의 이미지를 만들 수 있는가"

였습니다.

그래서 MVP에서는 옷 DB를 제외했습니다.

최종적으로 수행하는 작업은 이것뿐으로 정했습니다.

• 베이스가 되는 착용 사진을 선택한다
• 참고할 사진을 선택한다
• 변경할 부위를 선택한다
• 이미지를 생성한다

먼저 용어를 통일해 두겠습니다.

이용한 엔드포인트는 다음과 같습니다.

이미지 업로드는 2단계로 이루어집니다.

먼저, /s2s/v2.0/file/cloth에 이미지의 메타 정보(이미지 본체는 아직 보내지 않음)를 보냅니다. 내용은 다음과 같습니다.

응답(Response)으로 file_id와 upload URL이 반환되므로, 해당 upload URL(YouCam API의 일반적인 엔드포인트가 아닌 일시적인 업로드 대상)로 PUT을 통해 이미지 바이너리를 보냅니다. 이 과정을 BASE 이미지와 REF 이미지에 대해 각각 두 번 수행하면, src_file_id와 ref_file_id를 얻을 수 있습니다.

task 생성 시에는 다음 값들을 전달했습니다.

인증은 Authorization: Bearer <API Key>로 전송합니다.

생성 시의 흐름은 다음과 같습니다.

구현 시에는 API 연동에 실패하면 짧은 에러 메시지를 표시하고, 폴링(Polling)은 일정 횟수 도달 시 타임아웃으로 처리했습니다.

주의했던 점

이 앱에서는 이미지를 한 번 YouCam API 서버로 전송합니다. 옷 조합을 시도하려면 전신 사진이 필요하지만, 전신 사진에는 얼굴이나 방 안, 촬영 장소를 알 수 있는 배경 등 옷 이외의 정보도 포함되기 쉽습니다.

이 점이 신경 쓰여서 중간 단계부터 최소한의 개인정보 보호 기능을 넣었습니다. 이미지를 불러오는 시점에 TFLite 기반의 전처리를 거칩니다.

구체적으로는 다음과 같은 작업을 수행합니다.

• 얼굴 검출(Face Detection)의 bbox를 사용하여 얼굴 주변을 모자이크 처리
• PPHumanSeg로 인물 영역을 추정
• 인물 이외의 배경을 마스킹(Masking)

처리 흐름은 다음과 같습니다.

배경 제거의 강도는 이미지마다 조금씩 조정할 수 있습니다. 모델은 용도별로 나누었으며, 얼굴 검출에는 face_detection_tflite를, 배경 세그멘테이션(Segmentation)에는 SuperPinto님의 PINTO_model_zoo에 있는 196_human_segmentation_pphumanseg를 이번에 사용했습니다.

YouCam API와 같은 이미지 생성 API를 사용할 경우, API의 정확도뿐만 아니라 전송하기 전의 이미지를 어떻게 다루느냐도 중요하다는 것을 느꼈습니다.

요약

YouCam AI Clothes API와 Codex를 사용하여 옷 조합을 시도해 볼 수 있는 Flutter 앱을 만들었습니다. Flutter이므로 iOS, Android, Web으로 배포하기 쉬운 구성입니다.

YouCam API의 1회 실행당 2크레딧이 소비되었습니다.

또한 완전히 동일한 자세가 아니더라도 옷을 잘 인식하여 합성해 주는 점이 사용하기 편리했습니다.

완벽한 가상 피팅(Virtual Try-on)은 아니지만, 아침에 "옷을 갈아입기 전에 살짝 확인해 보고 싶다"는 니즈에는 상당히 잘 맞는 것 같습니다. 아침에 양치하면서도 할 수 있을 것 같네요!

그럼 🖐️

참고 URL

Discussion