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(신원을 증명하는 토큰)이 무엇인지에 대한 가벼운 감📖 읽고 나면 얻을 수 있는 것 📖- "로그인은 되는데 앱으로 돌아오지를 않는" 같은 미묘한 버그를 어떻게 잡아가는지 감을 잡게 된다- 안드로이드에서 애플 로그인이 왜 까다로운지, 그리고 그걸 어떻게 우회했는지 이해하게 된다- 에러 메시지가 아니라 "호출이 아예 안 일어난 것"을 단서로 원인을 찍는 디버깅 사고방식을 엿볼 수 있다일단 이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"..

💡 읽기 전 필요한 지식 💡- 컴포넌트라는 개념에 대한 가벼운 이해- switch문이 값에 따라 분기하는 문법이라는 정도의 지식- 여러 명이 하나의 레포에서 함께 개발한다는 상황에 대한 감📖 읽고 나면 얻을 수 있는 것 📖- 하나의 큰 화면을 여러 사람이 나눌 수 있게 "구조로" 설계하는 방법을 이해하게 된다- switch 분기와 독립 컴포넌트라는 뼈대가 왜 협업과 관심사 분리에 유리한지 알게 된다- 애자일하게 스프린트마다 역할을 나누고 리딩한 경험이 어떤 모습이었는지 엿볼 수 있다이 글을 읽기 전에 이전 글들을 읽으면 도움이 될 것이다. 개발 -> 출시"의 단계를 거친다는 정도의 큰 그림- 듀오링고 같은 학습 앱을 한 번이라도 써본 경험- "타겟 사용자"나 "문제 정의"라는 말이 어떤" data..

💡 읽기 전 필요한 지식 💡- React와 React Native(RN)가 서로 다른 것이라는 정도의 구분- SSR과 CSR이라는 말을 들어본 경험- 앱이 웹뷰(앱 안에 띄우는 브라우저 창)로 웹을 띄울 수 있다는 사실📖 읽고 나면 얻을 수 있는 것 📖- "순수 RN"과 "RN 껍데기&웹뷰의 조합인 하이브리드"의 차이와 각각의 장단점을 이해하게 된다- 웹뷰만으로 만든 앱이 왜 스토어 심사에서 거절될 수 있는지, 어떻게 하면 하이브리드 앱으로 인정받는지 알게 된다- 모노레포·pnpm·Next.js App Router·Expo 같은 선택을 "왜" 했는지 근거로 설명할 수 있게 된다자 이제 기획이 정리가 되었다. (기획 관련글은 아래 글을 참고하면 좋을 것 같다.) 개발 -> 출시"의 단계를 거친다는 ..