담.을 혼자 만들면서 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 같은 선택을 "왜" 했는지 근거로 설명할 수 있게 된다자 이제 기획이 정리가 되었다. (기획 관련글은 아래 글을 참고하면 좋을 것 같다.) 개발 -> 출시"의 단계를 거친다는 ..

💡 읽기 전 필요한 지식 💡- 모바일 앱이 "기획 -> 개발 -> 출시"의 단계를 거친다는 정도의 큰 그림- 듀오링고 같은 학습 앱을 한 번이라도 써본 경험- "타겟 사용자"나 "문제 정의"라는 말이 어떤 의미인지에 대한 가벼운 감📖 읽고 나면 얻을 수 있는 것 📖- 좋은 제품은 기능이 아니라 "문제 정의"에서 출발한다는 것을 이해하게 된다- 톨리(tolli)라는 앱이 왜, 누구를 위해 만들어졌는지 알게 된다- 추상적인 슬로건 하나가 실제 화면 설계로 어떻게 번역되는지 감을 잡게 된다5월부터 필자는 대학교의 창업팀에 개발자로 합류하게 되었다.필자는 항상 좋은 문제정의를 가지고 공감과 해결하고 싶은 의욕과 함께 개발을 하고 싶었고,MVP를 빠르게 만들어 배포하고, 실제로 사용자들과 직접 만나고 발로..