아내가 사진을 튀기는 앱이라는 아이디어를 줬습니다. 재밌어 보여서 만들어보기로 했고, Codex로 구현한 토스 미니앱이 뭐든지 튀겨드립니다입니다. 사진을 골라 튀김기에 넣은 뒤 조리 버튼을 누르고 있다가 손을 떼면 튀김 사진이 완성됩니다.
만들면서 가장 많이 고민한 건 디자인이었습니다. 튀김처럼 보이면서도 원래 무슨 사진인지 알아볼 수 있어야 했습니다. 화면은 재밌어 보이면서 무엇을 누르면 되는지 바로 알 수 있게 만들고 싶었습니다. 지금도 훌륭한 디자인이라고 생각하지는 않지만, 이 두 가지를 맞추려고 여러 번 고쳤습니다.
사진이 비치는 튀김옷으로
조작은 타이밍 놀이에 가깝습니다. 누르고 있는 동안 반죽이 노릇해지고, 손을 떼는 순간 조리가 끝납니다. 너무 빨리 떼면 덜 익고, 오래 누르면 까맣게 탑니다. 적정 시간은 시도할 때마다 달라집니다. 정답 시간을 미리 보여주지 않고 색 변화와 익힘 안내를 보고 꺼내도록 했습니다. 손을 계속 누르고 있어도 적정 시간의 두 배가 되면 자동으로 조리가 끝납니다. 완성한 사진은 원본과 비교하거나 PNG로 저장할 수 있습니다. 같은 재료로 다시 튀길 수도 있습니다.
사진에 노란색이나 작은 점 무늬를 얹는 것만으로는 튀김의 형태가 잘 드러나지 않았습니다. 그래서 사진 안쪽의 색만 바꾸는 대신 바깥으로 튀김옷이 부풀어 나오는 형태를 검토했습니다. 테두리만 두르거나, 사진 전체를 감싸거나, 큰 튀김 덩어리로 덮는 시안을 비교했습니다.
제가 고른 건 사진 전체를 덮되 원본이 비치는 튀김옷이었습니다. 반투명한 시안 중에서도 사진과 튀김이 반반 보이는 것보다 조금 더 투명한 쪽을 택했습니다. 얼굴과 옷, 사진의 색은 남기고 바깥 윤곽에서는 튀김옷의 두께가 드러나도록 안쪽과 가장자리를 다르게 합성했습니다.
두께와 재질도 다시 손봤습니다. 처음에 쓴 큰 빵가루 조각과 깊은 갈색 골은 실제로 합성하니 너무 거칠었습니다. 새우튀김 사진을 참고해 밝고 고운 반죽으로 바꾸고, 외곽을 얇게 줄였습니다. 울퉁불퉁한 윤곽은 부드럽게, 그림자는 옅게 바꿨습니다.
생성 이미지는 방향을 정할 때 시안으로 쓰고, 최종 효과는 앱에서 Canvas로 합성한 결과를 보며 고쳤습니다. 조리 중 미리보기와 저장할 PNG에는 같은 픽셀 처리 함수를 사용합니다.
설명보다 먼저 넣을 곳이 보이도록
화면은 작은 튀김가게처럼 꾸몄습니다. 줄무늬 차양과 조리대, 주문서, 체크 포장지를 사용하고, 완성한 사진은 트레이 위에 올렸습니다. 사진의 배경을 지우는 메뉴에도 가게의 콘셉트에 맞춰 재료 준비실이라는 이름을 붙였습니다.
처음에는 소개가 길었습니다. 사진 한 장을 넣고 튀기는 미니앱에 맞게 소개를 줄이고 반복 문구를 걷어냈습니다. 도움말과 배경 제거는 필요할 때 여는 별도 화면으로 옮겼습니다. 샘플 사진으로 먼저 해볼 수도 있게 했습니다.
사진을 고르는 위치도 바꿨습니다. 첫 화면 아래에 따로 있던 사진 선택 버튼을 튀김기 안으로 옮기고, 기름통 중앙에 사진 넣기 문구를 넣었습니다. 튀김기 이미지 어디를 눌러도 사진을 고를 수 있게 했습니다. 사진을 고르면 화면 아래에 조리 버튼이 나타나고, 완성한 뒤에는 저장 버튼으로 바뀝니다.
재료 준비실이라는 이름만으로는 무슨 기능인지 알기 어려워 인물 배경 지우기라는 설명도 붙였습니다. 가게의 콘셉트를 살리면서도 버튼이 하는 일은 알 수 있게 했습니다.
작은 화면에는 광고까지 들어가야 했습니다. 배너를 임의로 줄이거나 자르는 대신 광고와 조작 버튼의 공간을 먼저 확보하고, 남은 높이에 맞춰 조리 영역을 줄였습니다. 길게 누르기 외에 탭으로 시작하고 끝내는 방식과 키보드 조작도 유지했습니다.
튀김 효과와 인물 분리는 다른 처리다
화면과 앱 흐름은 React, TypeScript, Vite로 만들고 앱인토스 SDK를 연결했습니다. 튀김 효과는 기기 안에서 Canvas로 처리합니다. 미리 준비한 튀김옷 재질을 사진 위에 합성하고, 조리 정도에 따라 색과 질감을 바꿉니다. 이때 생성형 이미지 API에 사진을 보내지는 않습니다. 이미지 생성은 가게 이미지와 재질을 준비할 때 활용했습니다.
재료 준비실에서는 인물 분리 모델을 써서 배경을 지웁니다. 직접 만든 모델은 아니고, MediaPipe Image Segmenter의 Selfie Segmenter 모델을 사용했습니다. 모델이 구분한 인물 영역에 맞춰 사진의 투명도를 조절해 사람을 남깁니다. 일반 사물이나 반려동물의 배경까지 지워주는 기능은 아닙니다.
이 과정도 기기 안에서 처리하며 사진을 서버로 업로드하지 않습니다. 모델과 실행 파일은 앱에 포함하고, 배경 제거를 실행할 때 읽습니다. 손질한 사진은 투명 PNG로 저장하거나 그대로 튀김기에 넣을 수 있습니다.
배경 제거는 한국 시간 자정 기준으로 기기·설치별 하루 한 번 무료입니다. 이후에는 토스 앱에서 보상형 광고를 끝까지 볼 때마다 한 번 더 이용할 수 있습니다.
토스에 올린 뒤에도 고칠 것이 있었다
토스에 미니앱을 배포해 운영하고 있습니다. 사진 선택 동선과 화면 배치를 다듬고 뒤로가기 문제까지 수정한 v1.1.1도 2026년 9월 29일 정식 출시했습니다.
업데이트 심사에서는 뒤로가기를 누르면 이전 화면이 아니라 미니앱이 종료되는 문제가 지적됐습니다. 웹 화면 안에서 React 상태를 바꾸는 것과 토스의 뒤로가기를 처리하는 것은 별개였습니다. 메뉴를 먼저 닫고, 완성 화면에서는 조리 화면으로, 조리 화면에서는 사진을 선택하는 첫 화면으로 돌아가도록 연결했습니다. 사진을 불러오거나 저장하는 등 작업이 진행 중일 때는 처리가 끝날 때까지 뒤로가기를 잠시 막았습니다. 메뉴나 처리 중인 작업이 없는 첫 화면에서는 토스의 기본 종료 동작을 남겼습니다.
사진 처리와 익힘 판정은 단위 테스트로, 사진 선택부터 PNG 저장까지의 흐름은 브라우저 테스트로 확인했습니다. 뒤로가기 테스트는 네이티브 이벤트를 대신 전달하는 방식입니다. 이 테스트만으로 실제 토스 앱의 권한, 광고, 기기별 조작까지 보장할 수는 없습니다. 브라우저에서 확인한 범위와 실기기에서 확인해야 할 부분을 나눠두었습니다.
이후에는 사진 선택·튀김 완성·저장·손질 같은 행동을 기록하는 분석 이벤트와 사진 저장 후 리뷰를 요청하는 기능을 추가했습니다. 분석 이벤트에는 사진이나 파일명을 보내지 않습니다. 초기 로딩 실패 시 다시 열기와 광고 보상 후 손질 재시도 안내도 보완했습니다. 이 변경을 담은 v1.2.0은 2026년 10월 1일 토스에 업로드하고 검토를 요청했습니다.
이제는 써본 사람의 이야기가 필요하다
아직 진행 중인 프로젝트입니다. 지금은 이 앱을 사람들에게 어떻게 알릴지가 고민입니다.
제가 고른 반죽과 조리대가 처음 보는 사람에게도 재밌어 보일지, 사진을 넣고 튀기는 흐름을 설명 없이 이해할지는 화면을 계속 다듬는 것만으로 알 수 없습니다. 실제로 써본 사람은 무엇을 재밌어하고 어디서 막히는지 듣고 싶습니다.