Tech

포켓몬 빵 하나에서 시작해 띠부씰 서비스를 만들기까지

퇴근 후 한두 시간으로 시작한 제품

중고 거래 글에 올린 색칠된 도감 이미지는 오히려 "어떤 것을 사는 거냐"는 역질문을 불렀다. 최근 2주 동안 퇴근 후 집에서 한두 시간씩 포켓몬 띠부씰 수집, 거래 서비스 착착을 만든 출발점이었다. 비영리 개인 프로젝트다. 내가 쓰려고 시작했지만 처음 띠부씰을 모으거나 관리를 덜 번거롭게 하고 싶은 사람에게도 도움이 되면 좋겠다는 마음이 있었다.

처음부터 기능을 많이 넣으려 한 것은 아니다. 내가 풀고 싶었던 문제는 하나였다. 중고 거래 글에 올라온 도감 이미지를 보고도 상대가 무엇을 사고 싶은지, 팔고 싶은지, 교환하고 싶은지 다시 묻지 않게 만드는 것.

이 글은 백엔드 엔지니어가 낯선 모바일 UI/UX 문제를 만났을 때 어떻게 관찰하고 선택지를 비교하고 사용자 기준으로 결정했는지에 대한 구축기다. 완성된 화면보다 그 사이에서 버린 가설과 남긴 기준을 기록한다.


빵 하나에서 시작된 수집

시작은 거창하지 않았다. 일하다가 출출해지는 오후 3~4시 늘 먹던 빵 말고 조금 색다른 간식을 고르던 날이었다. 포켓몬 로켓단 초코롤빵을 집었다. 포켓몬을 잘 아는 편은 아니었지만 다른 포켓몬빵보다 칼로리가 비교적 낮다는 점이 마음에 들었다.

아무 기대 없이 빵을 뜯었는데 안에서 나온 띠부씰은 에몽가였다. 30주년을 기념하는 디자인인지도 몰랐다. 커다란 30 위에 에몽가가 겹쳐진 모습은 포켓몬을 잘 모르는 나도 바로 알 수 있을 만큼 귀여웠다.

자리에 돌아와 포켓몬을 좋아하는 동료에게 보여줬다.

이거 한정판인데. 잘 안 나오는 거야. 부럽다!

그제야 좋은 게 나왔구나 싶었다. 하지만 중고마켓에서 얼마에 거래되는지보다 손바닥 안의 에몽가가 더 오래 눈에 남았다. 포켓몬을 잘 몰라도 계속 들여다보게 되는 귀여운 캐릭터였다. 그날부터 포켓몬빵을 고르는 이유가 하나 생겼다.

며칠 뒤 같은 빵에서 30주년 한정판 파이리까지 나왔다. 이건 운명이다 싶었다.

포켓몬이 완전히 낯선 것은 아니었다. 포켓몬스터 골드를 해봤고 디아루가, 펄기아, 아르세우스까지의 큰 스토리도 알고 있었다. 다만 최근의 포켓몬이나 띠부씰 문화는 거의 모르는 상태였다. 그래서 어떤 빵에서 어떤 띠부씰이 나오는지부터 찾아봤고 그 과정에서 시즌별 띠부씰 도감이라는 세계를 처음 알게 됐다.

내가 얻은 에몽가와 파이리는 2026 NEW 시즌5 도감에 포함된 종류였다. 도감을 훑다 보니 좋아하는 포켓몬이 하나씩 보이기 시작했다. 대부분 전설의 포켓몬이었다. 스토리, 능력, 타입, 기술을 다시 찾아보며 그저 귀여운 스티커를 모으는 일을 넘어 캐릭터가 가진 서사에 빠져들었다.

가장 마음에 든 포켓몬은 아르세우스다. 전설을 넘어 신화급으로 불리는 존재다. 우주신이라는 설정과 능력, 외형 모두가 좋았다. 시즌5 도감에 아르세우스는 없었지만 좋아하는 전설 포켓몬이 유난히 많이 담겨 있다는 이유만으로도 그 도감은 충분히 특별했다.

그래서 수집 기준도 생겼다. 30주년 포켓몬, 거다이맥스 포켓몬, 전설의 포켓몬을 모으기로 했다. 처음에는 빵을 직접 사 먹으며 모았다. 그러나 30주년 파이리 뒤로 평범한 포켓몬이 계속 나왔다. 간식으로도 수집 방식으로도 한계가 있었다.

자연스럽게 중고마켓을 보기 시작했다. 업자는 매물이 많지만 가격이 높았고 개인 판매자는 매물이 적어도 일괄 판매를 원하는 경우가 많았다. 원하는 포켓몬만 골라 사는 일은 생각보다 어려웠다. 그래서 직접 구매글을 올렸다. 파악한 시세의 약 70%로. 생각보다 문의가 많이 들어왔고 그때부터 부담 없는 금액으로 좋아하는 띠부씰을 하나씩 모으기 시작했다.

중고 거래에서 만나는 사람들은 어린 학생이 대부분일 거라고 생각했다. 그러나 의외로 건강한 30대 남성분들이 많았다. 아마 각자 다른 이유로 포켓몬을 다시 만나고 있었을 것이다. 이 취미가 단지 어린 시절의 추억도 단지 스티커 거래도 아니라는 점을 알게 됐다.

문제는 색칠 방식이 아니라 거래 문법이었다

띠부씰 거래를 하며 중고마켓의 포켓몬 모임에서 시즌별 도감 이미지를 자주 봤다. 사람들은 그 이미지를 저장한 뒤 휴대폰 사진 편집 앱에서 한 칸씩 색칠해 보유 현황을 표시하고 있었다. 애정이 만든 방식이었다. 동시에 거래에 필요한 정보가 이미지 안에 숨어 있었다.

  • 보유한 씰
  • 구매하려는 씰
  • 판매하려는 씰
  • 교환하려는 씰

색 하나로 표현하면 보는 사람이 그 규칙을 이미 알고 있어야 한다. 나는 구매하려는 씰을 색으로 표시해 글을 올렸고 상대에게서 "어떤 것을 사는 거냐"는 역질문을 받았다. 대화를 하면서 다른 사람은 보유한 씰을 색칠하고 남은 씰을 구매 대상으로 읽는다는 사실도 알게 됐다. 색칠의 의미가 사람마다 달랐다.

이때 문제를 "더 보기 좋은 도감"으로 정의하면 답이 달라진다. 나는 이를 거래 의도를 전달하는 표준 문법이 없는 문제로 정의했다. 그래서 상태를 구매, 판매, 교환으로 분리하고 도감의 각 칸과 공유 이미지에 같은 라벨을 표시하기로 했다.

구매, 판매, 교환 상태가 라벨로 표시된 2026 NEW 시즌5 띠부씰 도감구매, 판매, 교환 상태가 라벨로 표시된 2026 NEW 시즌5 띠부씰 도감

이후 거래 글은 바뀌었다. 포켓몬 이름을 긴 목록으로 다시 쓰는 대신 거래 도감 이미지와 업데이트 시각, 매입 단가만 적으면 됐다. 상대도 색의 규칙을 추측하지 않고 라벨을 읽으면 됐다. 거래의 핵심이 아닌 의도 해석에 쓰던 대화 왕복을 줄이는 것이 착착의 첫 번째 가치였다.

계정은 가치 경험 뒤로 미뤘다

처음 가설은 전형적이었다. 서비스에 들어온 사람은 고유한 계정을 가져야 하고 자기 데이터를 보장받아야 한다고 생각했다. 비밀번호는 8자 이상으로 두고 확인 입력도 최소화했다. 다른 기기에서 이어 쓰도록 작업공간 ID와 복구 코드도 제공했다.

이 가설에는 문제가 있었다. 사용자가 도감에 도달하기 전에 비밀번호를 정하고 작업공간 ID와 복구 코드를 따로 보관해야 했다. 특히 어린 사용자가 이 흐름을 이해하고 관리하리라고 기대하기 어려웠다. 도감을 보여주기도 전에 사용자의 일을 늘리고 있었다.

초기 계정, 복구 중심 진입 화면. 저장 작업과 기존 작업 열기부터 노출한다초기 계정, 복구 중심 진입 화면. 저장 작업과 기존 작업 열기부터 노출한다

그래서 "로그인이 필요하다"는 전제를 버렸다. 첫 화면의 주 행동을 도감 바로 시작으로 바꾸고 임시 작업은 이 기기의 브라우저 저장소에 보관한다. 저장 작업공간은 다른 기기에서 이어 쓰거나 공유가 필요한 사람이 나중에 선택한다.

회원가입 없이 바로 시작한 뒤 보이는 수집 도감. 전체 시즌 검색과 15개 도감의 진행 상태를 먼저 보여준다회원가입 없이 바로 시작한 뒤 보이는 수집 도감. 전체 시즌 검색과 15개 도감의 진행 상태를 먼저 보여준다

이 선택은 데이터 영속성을 포기한 것이 아니다. 영속성의 순서를 바꾼 것이다. 처음에는 서비스를 이해하고 도감에 한 칸을 채우는 경험이 먼저다. 기기 간 저장이 필요해졌을 때만 계정성 작업을 선택하게 한다. 내 테스트 흐름도 메인 서비스까지 5~6단계에서 2단계로 줄었다.

이후 비슷한 제품을 만들 때도 같은 질문을 남기려 한다.

사용자가 아직 가치를 보지 못한 단계에서 우리가 요구하는 정보는 정말 필요한가?

3D 효과보다 끊기지 않는 터치가 먼저였다

포켓몬 카드는 화면에서 보기만 하는 대상이 아니다. 관심 가는 포켓몬을 눌렀을 때 "오" 하는 순간이 필요하다고 생각했다. 일반 씰과 전설, 환상 등급을 구분하고 희귀한 카드에는 더 강한 3D CSS 효과를 주었다. 실제 거래 가치가 높은 등급을 수집 경험에서도 구분하고 싶었다.

처음에는 5×5 셀 안의 카드를 바로 움직이게 하려 했다. 하지만 모바일에서는 손가락을 움직일 때 페이지 스크롤까지 함께 반응했다. 카드의 X, Y, Z 축 효과는 정상적으로 계산되어도 페이지가 위아래로 움직이는 순간 렌더링 경험은 끊겼다. 카드를 조작하려는 동작과 페이지를 읽으려는 동작이 같은 터치를 놓고 경쟁한 것이다.

검토한 선택지는 두 가지였다.

선택지장점버린 이유 또는 감수한 점
도감 셀에서 즉시 3D 반응맥락을 벗어나지 않고 빠르다스크롤과 충돌하면 작은 화면에서 의도를 구분하기 어렵다
카드를 확대하는 dialog에서 3D 반응스크롤 영향 없이 효과를 끝까지 보여줄 수 있다원본 PNG 영역을 확대하므로 해상도가 조금 거칠게 보일 수 있다

두 번째를 선택했다. 화면을 확대하면 배경 스크롤을 잠그고 카드 영역은 별도 터치 대상으로 둔다. 짧은 탭과 스크롤 이동도 구분한다. 시각 효과의 즉시성 일부를 포기한 대신 사용자가 의도하지 않은 동작을 겪지 않게 했다.

거래 관리 화면. 구매, 판매, 교환 상태와 등급을 먼저 선택한 뒤 도감에서 항목을 고른다거래 관리 화면. 구매, 판매, 교환 상태와 등급을 먼저 선택한 뒤 도감에서 항목을 고른다

이 선택의 기준은 화려한 인터랙션이 아니었다. 포켓몬은 부모 세대와 자녀 세대가 함께 즐기는 IP다. 어린아이가 접속해 "어려워서 못 쓰겠다"고 말하기 전에 선택지를 줄여야 했다. 그래서 모바일에서는 전체 도감과 목록 선택을 나누고 거래 조작 영역도 작은 터치 대상이 되지 않게 했다.

제품 판단이 코드에 남는 방식

이 결정들은 화면 설명으로 끝나지 않았다. 착착의 상태와 입력 처리에도 같은 기준을 남겼다.

비회원이 도감 바로 시작을 누르면 임시 작업을 브라우저 저장소에 보관한다. 그래서 첫 사용자는 계정 없이 바로 도감을 채울 수 있다. 다른 기기에서 이어 쓰거나 QR로 공유할 필요가 생기면 그때 저장 작업공간을 만들도록 나눴다.

거래 상태는 구매, 판매, 교환이라는 하나의 모델로 관리한다. 도감 타일에 붙는 배지와 중고 거래 글에 올리는 PNG 이미지가 같은 상태를 읽는다. 화면에서는 구매인데 공유 이미지에서는 다른 의미로 보이는 일을 막기 위해서다.

전설과 환상 포켓몬은 정적 종 분류 데이터로 구분해 일반 카드보다 강한 3D 효과를 적용했다. 반대로 모바일 터치는 짧은 탭과 스크롤 이동을 분리한다. 카드 확대 dialog에서는 배경 스크롤을 잠그고 카드에만 터치를 맡겼다. 제품에서 정한 "어린 사용자가 어렵다고 떠나지 않게 한다"는 기준을 입력 처리까지 가져간 것이다.

AI는 선택을 대신하지 않았다

디자인과 UI/UX가 주전장이 아닌 백엔드 엔지니어에게 이 과정은 낯설었다. 용어를 모르면 무엇이 문제인지 설명하는 일부터 막힌다. Codex를 포함한 여러 AI 모델과 오픈소스, 서비스 레퍼런스를 많이 참고했다. 그러나 AI에게 "멋진 3D 카드"를 요청하는 것만으로는 이 문제가 풀리지 않았다.

내가 반복한 방식은 다음과 같다.

  1. 화면에서 실제로 일어나는 일을 관찰한다. 이번 사례에서는 카드 효과가 아니라 스크롤과 터치가 동시에 움직인다는 사실을 먼저 확인했다.
  2. X, Y, Z 축이 의도대로 동작하는지 확인하고 구현 방식의 대안과 잠재적인 트레이드오프를 AI에게 질문한다.
  3. 이미 만들어진 서비스와 오픈소스를 비교한다.
  4. 마지막에는 "내가 계속 쓰고 싶은가"와 "어린 사용자가 막히지 않는가"라는 기준으로 선택한다.

AI는 탐색 비용을 줄였다. 하지만 어떤 마찰을 없애고 어떤 손실을 감수할지는 사용자 맥락을 가진 사람이 결정해야 했다. 이 프로젝트에서 AI-Native라는 말은 AI가 제품을 대신 만들었다는 뜻이 아니다. 더 많은 선택지를 검토할 수 있었고 그만큼 선택의 이유를 더 분명히 해야 했다는 뜻에 가깝다.

아직 남은 문제

착착은 아직 띠부씰에만 집중한다. 포켓몬 카드까지 확장하고 싶지만 데이터 양과 이미지, 메타데이터 전달 방식은 별도 문제다. 지금의 수집, 거래 흐름을 카드 데이터에 그대로 얹는 것이 답인지도 확인해야 한다.

그래서 다음 단계는 "포켓몬 카드도 지원한다"가 아니다. 먼저 카드 수집가가 띠부씰 수집가와 같은 거래 문법을 쓰는지와 필요한 데이터, 인코딩 비용이 무엇인지 그리고 지금의 모바일 경험을 해치지 않고 어디까지 보여줄 수 있는지 검증하는 일이다.

작은 제품에서 남긴 기준

착착은 퇴근 후 만든 작은 서비스다. 그렇다고 작은 제품의 판단까지 작아지는 것은 아니다. 오히려 사용자가 곧 나였기에 불편을 빨리 관찰하고 실제 거래로 검증할 수 있었다.

이번 2주 동안 남긴 기준은 세 가지다.

  1. 사용자가 이미 감수하는 수작업에는 숨은 요구사항이 있다. 색칠된 도감은 이미지 편집 문제가 아니라 거래 상태와 의사소통의 문제였다.
  2. 영속성, 시각 효과, 확장성은 모두 중요하다. 다만 사용자가 처음 가치를 경험하기 전의 마찰보다 앞설 수는 없다.
  3. AI는 답을 빠르게 넓혀 주지만 제품의 기준을 정해 주지는 않는다. 관찰하고 비교하고 버릴 것을 결정하는 책임은 여전히 만드는 사람에게 남는다.

다음에도 제품을 만들 때 기능 목록부터 쓰지는 않을 것이다. 누군가가 지금 불편을 피하기 위해 어떤 수작업을 하고 있는지부터 보려 한다. 그 수작업을 줄이는 과정에서 상대가 의도를 묻지 않고 어린 사용자도 망설이지 않고 내가 계속 쓰고 싶은 제품이 나온다면 충분하다.

착착 바로 시작하기

댓글