📝 한줄 요약
반려견 사진을 일러스트로 만들고, 휴대폰 화면에서 쓰다듬을 수 있는 터치 인터렉션을 구현한 작은 게임스타일의 웹 앱으로 연결해봤습니다. 디자인이 마음에 들 때까지 이미지를 고치고, 실제로 만졌을 때 어색한 부분도 대화로 하나씩 수정했습니다.
바쁘시면 이것만 읽어도 돼요:
- 미드저니로 실제 반려견의 특징을 살린 캐릭터 이미지를 만들었습니다.
- Codex로 쓰다듬기, 대사, 하트, 밥 먹기, 산책 기능을 구현했습니다.
- 처음부터 완벽한 결과를 기대하기보다, 화면을 직접 만져보고 어색한 부분을 구체적으로 말하는 방식이 효과적이었습니다.
- “부드럽게 해주세요”보다 “빠르게 문지를 때 진동처럼 보입니다”처럼 현상을 설명했을 때 수정이 더 정확했습니다.
- 완성된 앱은 별도 설치나 로그인 없이 공개 주소로 열 수 있습니다.
🛠️ 사용한 도구
- Codex Desktop: 앱 제작, 수정, 이미지 정리, 배포
- GPT-5 기반 Codex: 대화 내용을 바탕으로 기능 구현과 반복 수정
- Midjourney: 실제 반려견 사진을 바탕으로 캐릭터와 버튼 그래픽 제작
🔧 작업 과정
내 반려견을 폰 속에 데리고 다닐 수 있다는 컨셉의 앱을 만들어보려고해. 쓰다듬기 정도의 간단한 터치 인터렉티브 정도만 넣고 싶어.작동하는 화면부터 먼저 만들었습니다
처음에는 캐릭터 이미지가 완성되지 않은 상태였습니다. 그래도 앱의 구조와 쓰다듬기 방식은 먼저 확인할 수 있었기 때문에, 세부 기획을 길게 정리하기보다 작동하는 첫 화면부터 제작했습니다.
Codex는 휴대폰 화면에 맞는 카드 형태의 화면을 만들고, 캐릭터 영역을 문지르면 반응하는 기본 기능을 붙였습니다. 대사와 애정도 표시, 하트 효과도 함 께 들어갔습니다.
이 단계에서 도움이 됐던 점은 완성된 기획이 없어도 실제 화면을 먼저 볼 수 있었다는 것입니다. 화면이 생기고 나니 “무엇을 더 넣을까”보다 “지금 무엇이 어색한가”를 말하기 쉬워졌습니다.
저희집 강아지인 달콩이와 닮은 캐릭터를 만드는데 가장 많은 시간을 썼습니다
캐릭터는 미드저니에서 만들었습니다. 처음에는 흰 말티즈라는 설명과 사진만 넣었는데, omni 레퍼런스를 넣었음에도 실제랑 너무 다른 느낌이었습니다
흰 개가 페이스북 페이 지에 나타났어요
그래서 긴 다리, 짧게 정리한 털, 몸보다 작은 얼굴처럼 달콩이의 특징을 눈에 보이는 기준으로 다시 적었습니다.
닮게 만들수록 레퍼런스로 넣은 사진의 뚱한 표정과 짧은 털의 결을 너무 사실적으로 만들어져서 여러번 스타일을 다시 잡았습니다.
ㅎㅎ 우락부락..어딘가 화난 강아지..
다양한 표정을 지닌 강아지 사진
다양한 포즈의 개 사진 시리즈
수정할 때마다 일부 문장만 받으면 이전 조건을 빠뜨리기 쉬워서, 이후에는 변경 사항을 포함한 전체 프롬프트를 매번 다시 받았습니다.
여러 번 수정한 뒤 마음에 드는 달콩이 이미지가 나왔고, 그 이미지를 앱의 기준 캐릭터로 정했습니다.
앱 화면에 흰색 개가 표시됩니다.
캐릭터 이미지를 넣고 직접 쓰다듬어보니 반응이 지나치게 예민했습니다. 손가락을 빠르게 움직이면 강아지가 빠르게 떨리는 것처럼 보였고, 발끝이 화면 테두리를 넘기도 했습니다.
실제 요청 중에서는 아래처럼 이름, 대사, 움직임, 화면 안에서의 위치를 한 번에 구체적으로 정리한 내용이 구현에 가장 도움이 됐습니다.
강아지 이름은 달콩이로 변경. 대사는 "누나 왔어?" "좋아 좋아!" "나 불렀어?" "더 놀아줘" 이정도로 만해. 쓰다듬었을때 너무 감도가 높아서 빠르게 진동하는듯한 느낌이 있는데, 손가락이 빠르게 쓰다듬어도 만져지는 듯한 모션 부드럽도록 해줘. 쓰다듬었을때 캐릭터 발 부분이 약간 테두리를 벗어나는데 수정해줘. 캐릭터 이미지는 내가 지금 보낸걸로 해줘.Codex는 손가락 이동량을 그대로 반영하지 않고 조금씩 나눠 적용하도록 바꿨습니다. 캐릭터가 움직이는 범위도 줄이고, 발이 화면 안에 남도록 위치를 다시 맞췄습니다.
그다음에는 반대 문제가 보였습니다. 대사는 너무 빨리 바뀌는데 캐릭터 자체는 만졌다는 느낌이 약했습니다.
대사와 움직임을 따로 조절해 대사는 오래 머물고, 달콩이는 손가락이 있는 쪽으로 살짝 기대도록 수정했습니다. 한 장의 이미지로 꼬리만 자연스럽게 흔드는 것은 어렵다는 점도 확인했습니다. 꼬리까지 움직이려면 나중에 몸통과 꼬리를 분리한 이미지가 더 적합합니다.
녹색 배경에 다양한 손 제스처를 보여주는 페이지
쓰다듬는 느낌을 더 보여주기 위해 손 그래픽이 터치 지점을 따라가도록 만들었습니다. 미드저니로 손 그림을 만들고 앱에 넣었지만, 첫 구현은 크기가 크고 움직임이 뚝뚝 끊겼습니다.
처음 사용해본 뒤 손의 크기, 이동 지연, 끊김을 각각 문제로 정리했습니다. 이 피드백을 바탕으로 손 크기를 줄이고, 손가락 좌표가 들어올 때마다 바로 위치를 바꾸는 대신 화면 갱신 속도에 맞춰 중간 위치를 계산하도록 수정했습니다. 빠르게 움직일 때는 더 빨리 따라오고, 천천히 움직일 때는 부드럽게 붙도록 조정했습니다.
이 부분은 “자연스럽게 해주세요”라고만 했을 때보다 “크기가 큽니다”, “뚝뚝 끊깁니다”, “원하는 위치를 따라오지 않습니다”처럼 문제를 나눠 말한 것이 도움이 됐습니다.
개 이미지가 포함된 한국 앱의 스크린샷
마지막에는 작은 행동 두 가지를 추가했습니다
화면 하단에는 밥그릇과 하네스 그림을 이용해 밥 먹자, 산책 가자 버튼을 만들었습니다.
버튼을 누르면 하트 10개가 퍼지고 달콩이가 가볍게 통통 뜁니다. 처음에는 웃는 표정 이미지로 교체하는 기능도 넣었지만, 실제로 보니 기존 달콩이 이미지가 유지되는 편이 나아서 바로 제외했습니다.
기능을 덜어내는 것도 제작 과정의 일부였습니다. 새 기능을 넣었더라도 결과가 어울리지 않으면 남겨둘 필요는 없었습니다.
앱 화면에 강아지 사진
[달콩 — 내 손안의 반려견]
https://pocket-pup-mongle.stell9058.chatgpt.site
위 링크에서 보실 수 있습니다!
현재 앱에서는 달콩이를 쓰다듬으면 손 위치에 따라 몸이 부드럽게 움직이고, 상황에 맞는 짧은 대사가 나옵니다. 밥 먹기나 산책 버튼을 누르면 하트가 퍼지고 달콩이가 가볍게 뜁니다.
배경음악은 아직 넣지 않았습니다. 모바일 브라우저에서는 사용자가 화면을 한 번 누르기 전 자동 재생이 제한되기 때문에, 반복 가능한 음원 파일을 준비한 뒤 첫 터치부터 작은 볼륨으로 재생하도록 추가할 예정입니다.
🚀 앞으로의 계획
- 저작권 문제가 없는 짧은 배경음악을 넣고 첫 터치부터 작은 볼륨으로 반복 재생하기
- 몸통과 꼬리를 분리한 이미지로 꼬리 흔들기 추가하기
- 밥 먹기와 산책 외에 잠자기, 간식 주기 같은 짧은 행동 추가하기
- 휴대폰 홈 화면에 설치하는 앱 형태로 다듬기
