전체 글53 미니앱 개발하기 2 - 모바일 전용 버그 데스크톱에선 멀쩡한데 폰에서만 슬라임이 끝없이 늘어나는 모바일 전용 버그가 생겼습니다. 토스 앱 WebView에서만 재현되는 실기기 전용 버그를 pointerup 유실이라는 원인까지 좁혀 3중 안전망으로 막은 개발기입니다.쫀득 슬라임(playwithslime)은 앱인토스에 올린 three.js 토이입니다. 손가락으로 젤리를 잡아 늘리고, 톡 찌르고, 푹 누르는 그 촉감 하나로 굴러가는 앱이죠. 그런데 앱을 올리고 얼마 지나지 않아 이런 제보를 받았습니다. "잡고 늘리면 슬라임이 무한정 늘어나요." 문제는 제 데스크톱 브라우저에서는 아무리 잡아당겨도 그런 일이 일어나지 않았다는 겁니다.실기기에서만 터지는 버그가 제일 골치 아프다개발자에게 가장 다루기 까다로운 버그는 "내 손에서 재현이 안 되는 버그"입니다.. 2026. 8. 10. 미니앱 개발하기 1 - 실제 촉감 구현 실제 촉감을 XPBD 소프트바디로 구현해보았습니다.반죽은 놓은 자리에 남아야 합니다레퍼런스로 삼은 건 3D 공을 돌려가며 눌러 부수는 미니앱이었지만, 만들고 싶었던 건 정반대였습니다. 부서지는 공이 아니라, 손가락으로 잡아 늘리면 그 자리에 그대로 남는 밀가루 반죽이었죠. 기획서 맨 앞에 물성 원칙을 못 박아 두었는데 그 첫 줄이 "스냅백 없음"이었습니다. 잡아 늘리고 놓았을 때 고무줄처럼 튕겨 돌아가면 그 시점에서 이미 실패라는 뜻입니다.문제는 웹에 도는 소프트바디 예제 대부분이 정확히 그 스냅백을 기본 동작으로 삼는다는 점이었습니다. XPBD든 스프링-매스든, 정점마다 "원래 있어야 할 자리(rest position)"와 엣지마다 "원래 길이(rest length)"를 정해 두고 그쪽으로 되돌리는 힘.. 2026. 8. 6. 미니앱 기획하기 - 쫀득 슬라임 쫀득 슬라임이라는 미니앱을 개발, 런칭하며 겪은 내용을 바탕으로 기록해보겠습니다. 감각을 코드가 지킬 물성 원칙으로 못박은 쫀득 슬라임(playwithslime)의 기획 이야기입니다.부수는 공을 보다가, 만지는 반죽이 하고 싶어졌습니다시작점은 왁뿌볼이었습니다. 앱인토스(토스 미니앱)에 이미 올라와 있는, 3D 공을 손가락으로 돌려가며 클릭해 부수는 미니앱이죠. 이걸 레퍼런스로 삼은 이유는 단순합니다. 토스 WebView 안에서 three.js 3D가 매끄럽게 돈다는 것, 그리고 화면 속 물체를 손가락으로 만지는 인터랙션이 사람을 붙잡는다는 것을 이미 증명한 포맷이었으니까요. 검증된 무대를 처음부터 다시 깔 이유는 없었습니다.다만 같은 걸 하나 더 만들 생각은 없었습니다. 부수기는 본질적으로 목표가 있는 .. 2026. 8. 5. 앱인토스 | 노선 데이터 매칭 앱인토스의 미니앱에서 노선 데이터 매칭, 그 핵심인 alias 퍼지 매칭과 거리 버킷·최저가 정렬로 표기 혼재를 흡수한 과정을 정리한 글입니다.같은 도시가 항공사마다 다른 이름, 다른 칸에 있다유류할증료 조회하기에는 "노선별 비교" 탭이 있습니다. 사용자가 도쿄 같은 도시를 고르면, 8개 항공사가 그 노선에 매기는 유류할증료를 최저가순으로 줄 세워 보여 주죠. 화면만 보면 단순한 기능입니다. 도시 하나 받아서 표에서 값 꺼내 정렬하면 끝일 것 같으니까요. 문제는 그 "표에서 값 꺼내기"가 항공사마다 판이하다는 데 있었습니다. 유류할증료는 각 항공사가 자기 기준으로 구간을 나눠 공표합니다. 대한항공은 대권거리(mile)를 ~499, 500~999처럼 9개 구간으로 쪼개고, 제주항공은 1구간에어부산은 근거.. 2026. 7. 30. 앱인토스 | 환율계산과 노선비교 환율계산과 노선비교, USD로 고지하는 항공사를 100원 단위로 환산하며 실시간 환율 API 대신 고정 환율을 택한 이유와 그 구현을 정리한 개발기입니다.통화가 섞인 표를 한 줄로 세우려면유류할증료(YQ) 조회 앱을 만들면서 가장 먼저 부딪힌 벽은 기술이 아니라 통화였습니다. 앱이 다루는 8개 항공사 중 네 곳(제주항공·진에어·에어부산·이스타항공)은 유류할증료를 USD로 고지하고, 나머지 네 곳(대한항공·아시아나항공·티웨이항공·에어서울)은 원화로 고지하죠. 항공사별 상세 화면에서는 이게 큰 문제가 아니었습니다. 제주항공 화면에는 달러를, 대한항공 화면에는 원화를 원문 그대로 보여주면 되니까요.문제는 '노선비교'였습니다. 사용자가 도쿄를 고르면, 그 노선에 취항하는 모든 항공사의 유류할증료를 싼 순서대로 .. 2026. 7. 27. 인앱토스 | 스키마 설계하기 공통 스키마를 버리니 8개 항공사 표가 담겼다는, 유류할증료 조회 미니앱에서 정규화를 포기하고 항공사별 유연 스키마로 데이터 모델을 설계한 개발기입니다.하나의 표로 묶으려다 막힌 지점fuelsurcharge("유류할증료 조회하기")는 8개 항공사의 이번 달 국제선 유류할증료(YQ)를 항공사별 표와 노선 비교로 보여주는 토스 미니앱입니다. 핵심 기능이 "같은 노선인데 항공사마다 얼마씩 차이 나지?"를 한눈에 보여주는 것이다 보니, 처음에는 당연히 이렇게 생각했습니다. 모든 항공사를 하나의 거리 구간표로 정규화(normalize)해두면 비교가 깔끔하게 떨어지겠다고요. 실제로 기획서 리스크 대응란(§15)에는 아직도 그 흔적이 "항공사 공지 형식 상이 → 표준 스키마로 정규화"라고 남아 있습니다.그런데 8개사.. 2026. 7. 21. 이전 1 2 3 4 ··· 9 다음
