담.의 달력에서 9월에서 8월로 갔다가 9월로 돌아오면 9월 기록을 서버에서 또 받았다.사실 화면마다 결과를 useState에 들고 있어서 화면을 벗어나면 받은 기록이 사라졌기 떄문이다.그래서 필자는 TanStack Query로 캐시를 두고 얼마나 오래 믿을지는 데이터 성격에 따라 나눠보았다.나만 쓰는 기록은 5분, 상대와 함께 보는 기록은 30초다.같은 시나리오를 백엔드 로그로 전후를 비교했고, 서버 요청은 25%, 쿼리는 23%가 줄었고,이 글은 이 과정에 대해 기록한 글이다.왜 TanStack Query를 도입했을까??? 담.은 하루를 색 하나로 남기는 기록 앱이다.혼자 쓸 수도 있고, 둘이 한 방에 들어가 서로의 색을 함께 볼 수도 있다.홈, 달력, 흐름 이 3개의 화면이 모두 기록 목록(GET ..

tolli의 7단계는 구절을 소리 내어 읽고 직접 사용자가 녹음하는 단계이다.posthog 퍼널을 분석하던 중 녹음 단계 완료율이 64.6%인 것을 확인할 수 있었다. 즉, 3명중 1명이 이 단계에서 학습을 멎췄다는 소리이다.녹음이 어려웠을까? 아니다. 결론을 먼저 말하자면, 이 단계에서 앱이 처음으로 마이크 권한을 요청하는데 이것이 이유였다.웹뷰 앱에서 마이크 권한은 OS와 웹뷰, 이렇게 두겹으로 되어 있고, 한 번 거부하면 iOS와 Android는 모두 팝업을 다시 띄우지 않는다.그래서 권한 요청을 학습도중이 아닌 가입 마지막 단계로 옮기자 완료율은 82.6%로 상승했다.이 글은 그 과정과, 옮기면서 생긴 버그를 고친 이야기다.tolli는 성경 구절 하나를 7단계로 외우는 앱이다. 개발 -> 출시"의..

tolli의 학습플로우중 6단계는 성경 구절을 초성만 보고 직접 타이핑 해보는 단계이다.처음엔 두벌식 키보드를 그대로 만들었지만, 이 단계에서 사용자가 실제로 하는 일은 "이 자리에 올 모음을 떠올리기" 하나였다.그 하나만 남기니까 키보드는 모음 12개가 됐고 한글 입력기의 복잡한 규칙은 덧셈 한 줄로 바꼈다.tolli는 성경 구절 하나를 7단계로 외우는 앱이다. 단어 뜻을 보고, 가려진 단어를 고르고(3지선다), 마지막엔 소리내어 읽는 구조다.그 중 6단계가 타이핑이다.화면에는 구절이 초성으로만 보이고(e.g. ㅇㅎㅇㄴ) 사용자는 한 글자씩 쳐서 원래 구절(여호와는)을 완성하는 것이다. 6단계는 7단계 중 당연 타이핑이 가장 많다(이곳에서만 쓰이기 때문에). 구절의 글자 수 만큼 키를 눌러야 하니 이탈..

담.을 혼자 만들면서 AI가 쓴 코드를 거르는 3층 자가검증 루프를 만들었다.출시 뒤에 대화 기록을 세어보니, 모델이 판정하는 층은 작업 종료를 261번 막았는데, 그중 249번은 엉뚱한 이유였다.원인을 따라가 보니 설계 그림이 Claude Code 훅의 실제 동작과 세 군데에서 다른 것을 확인할 수 있었다.이 글은 그 세 가지 가정을 하나씩 실험으로 확인하고 고친 기록이다.6월에 필자는 감사하게도 당근 커뮤니티 모임팀을 리드하시는 하조은 선배님과 커피챗을 할 수 있었다.그 때 들은 말이 오래 남았다.Codex를 쓰든 Claude를 쓰든 결과물이 비슷하게 나오도록 세팅하는 것,이게 하네스 엔지니어링이다.8월에 담.을 혼자 만들기 시작하면서 이걸 직접 해보기로 했다. 사실 리뷰해 줄 동료가 없다보니 AI가..

읽기 전 필요한 지식- 로 이미지를 띄어 본 경험- 브라우저 개발자 도구의 Network 탭을 열어 본 경험- "캐시"라는 말을 들어 본 정도의 감읽고 나면 얻을 수 있는 것- next/image가 내부적으로 어떻게 동작하길래 사진을 칸 크기로 줄여 주는지, 소스 코드 위치까지- 브라우저와 Next.js 서버가 "이미 받은 사진"을 무엇으로 알아보는지- 서명된 주소(presigned URL)가 왜 두 캐시를 한꺼번에 무너뜨리는지필자는 tolli 때도 next/image를 사용했었다. [Next.js] next/image는 왜 SVG만 최적화하지 않을까? 22MB를 387KB로 줄인 과정💡 읽기 전 필요한 지식 💡- Next.js 컴포넌트가 이미지 최적화를 자동으로 해준다는 정도의 배경- SVG(벡터)..

읽기 전 필요한 지식- "가설을 세우고 검증한다"는 말을 들어 본 정도의 감- 사용자 인터뷰를 해 본 적이 없어도 괜찮다읽고 나면 얻을 수 있는 것- 인터뷰 질문 하나를 바꿨을 때 내 가설이 틀렸다는 게 드러난 과정- 앱을 만들기 전에 영상 하나로 수요를 재는 Fake Door 방법과 그 한계- AI 영상 생성 도구 (Higgsfield)로 실제 소개 영상을 만든 순서 우아한테크코스 레벨3에서는 "만들기 전에 수요부터 확인하라"는 과제를 받았다.필자는 tolli를 운영하면서 이미 한 번 크게 배운적이 있다. 개발 -> 출시"의 단계를 거친다는 정도의 큰 그림- 듀오링고 같은 학습 앱을 한 번이라도 써본 경험- "타겟 사용자"나 "문제 정의"라는 말이 어떤" data-og-host="bbin-guuuu.t..

💡 읽기 전 필요한 지식 💡- Next.js 컴포넌트가 이미지 최적화를 자동으로 해준다는 정도의 배경- SVG(벡터)와 WebP(래스터/압축 포맷)가 서로 다른 이미지 포맷이라는 것- 이 프로젝트(톨리)는 React Native + WebView로 Next.js 페이지를 감싼 하이브리드 앱이라, 웹 성능이 곧 앱 체감 속도로 이어진다📖 읽고 나면 얻을 수 있는 것 📖- SVG가 Next.js Image 최적화 대상에서 빠지는 이유를 이해하게 된다- sharp로 SVG를 WebP로 직접 변환하는 스크립트를 만드는 법을 알게 된다- priority와 의 차이, 언제 각각을 써야 하는지 알게 된다- 프로덕션 JS 번들 크기를 개발 모드 수치만 보고 오판하지 않는 법을 알게 된다 필자는 톨리란 프로젝트..

💡 읽기 전 필요한 지식 💡- 웹뷰가 결국 브라우저 엔진이고, 그 엔진에도 버전이 존재한다는 정도의 감- SSR/Hydration(즉, 서버가 만든 HTML에 React가 나중에 이벤트를 붙이는 과정)이라는 말을 들어본 적이 있으면 좋음- iOS와 Android가 같은 코드도 다르게 그릴 수 있다는 점📖 읽고 나면 얻을 수 있는 것 📖- "내 PC 브라우저에서는 되는데 실기기에서는 안된다"라는 문제를 어떤 순서로 풀어가는지 감을 잡게 된다- 웹뷰 환경이 일반 브라우저와 어떻게 다른지, 그게 왜 버그로 이어지는지 이해하게 된다- 기기마다 다른 화면의 곡선 같은 문제를 네이티브 모듈로 해결하는 흐름을 엿볼 수 있다일단 이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"의 단계..

💡 읽기 전 필요한 지식 💡- 웹뷰(앱 안에 띄우는 브라우저 창)에서 웹 페이지가 돌아간다는 정도의 감 (2편 참고)- Firebase 로그인, idToken(구글이 서명한 임시 토큰)이라는 개념에 대한 가볍운 이해- Expo / Expo Go / Development Build라는 단어를 들어본 적이 있으면 더 좋음 (몰라도 본문에서 설명한다)📖 읽고 나면 얻을 수 있는 것 📖- 구글이 왜 웹뷰에서의 로그인을 막는지, 그걸 어떻게 우회하는지 이해하게 된다- 웹뷰와 네이티브(RN)가 JS Bridge로 역할을 나누어 소셜 로그인을 처리하는 구조를 알게 된다- Expo Go와 Development Build의 차이, 그리고 왜 네이티브 모듈이 필요하면 Development Build를 써야 하는지 ..

💡 읽기 전 필요한 지식 💡- OAuth 소셜 로그인이 "토큰을 주고받는 과정"이라는 정도의 큰 그림- 딥링크(tolli:// 같은 주소로 앱을 여는 것)와 WebView가 메시지를 주고받는다는 개념- Firebase 로그인과 id_token(신원을 증명하는 토큰)이 무엇인지에 대한 가벼운 감📖 읽고 나면 얻을 수 있는 것 📖- "로그인은 되는데 앱으로 돌아오지를 않는" 같은 미묘한 버그를 어떻게 잡아가는지 감을 잡게 된다- 안드로이드에서 애플 로그인이 왜 까다로운지, 그리고 그걸 어떻게 우회했는지 이해하게 된다- 에러 메시지가 아니라 "호출이 아예 안 일어난 것"을 단서로 원인을 찍는 디버깅 사고방식을 엿볼 수 있다일단 이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"..