개발환경 개선
SSR ↔ CSR의 차이에서 오는 에러와 업데이트 한지 오래된 개발 환경 & 빌드파이프라인에서 오는 문제들이 섞여 개발환경에서 실제로 생산성과 결과물에 영향을 주는 문제들이 발생하고 있었어요.
- vite는 개발환경에서 별도의 번들링을 하지 않아 파일 하나가 요청 하나로 치환돼요. 파일 수가 2000개 이상으로 하나만 못받아도 문제가 되던 것을 페이지별 지연 로딩으로 해결했어요.
- pnpm 전환으로 CI와 로컬 컴퓨터의 모듈 install 속도를 대폭 개선했고 및 유령 의존성을 제거했어요.
- 빌드 툴링 버전업, 디자인 시스템 관리, 사내 프레임워크 메이저 업데이트를 진행했고 CI에 설정된 비효율들을 제거해 속도를 개선했어요.
- React Compiler, Storybook, VRT 회귀테스트를 도입했어요.
- 피드 목록이 연속으로 쌓이는 UX여서 윈도잉, 렌더링 최적화로 웹뷰 메모리가 200kb 언더로 관리되도록 개선
에이전트 코딩 환경 개선
에이전트 코딩에 있어 구현을 전담하고 멱등하고 결정적인 결과물을 빠르게 얻으며 결과물에 대해 쉽고 독립적이게 검증할 수 있도록 개선했어요.
- iOS, App Scheme 관리 툴링을 개발하고 Mac App으로 만들어 컨텍스트 분리를 최소화 했어요.
- tsgo, oxfmt, oxlint 등 rust, go 기반의 네이티브 툴링을 통해 에이전트가 코드 수정시 피드백을 빠르게 받아 다시 수정할 수 있는 싸이클을 만들었어요.
- 이미 대부분 Atomic Styling 기반으로 개발되고 있기에 더 적합간 기술스택으로 Vanila Extract를 tailwind로 전환했어요.
- 에이전트를 활용해 코드의 변경에 대한 스타일 회귀를 유닛 테스트, e2e 테스트, iOS Simulator를 활용한 A-A 테스트로 코드의 동작 일치를 확인했고 ts-morph, 단계별 인터페이스 수정으로 아웃풋에 대해 결정적인 신뢰를 할 수 있었어요. 99%의 작업을 AI가 진행했고 3일이 채 걸리지 않았어요. AI에게 위임하고 빠른 피드백을 얻고 결정성을 확보한 유효한 사례였어요.
- 에이전트 병렬 개발 환경에서 손쉬운 QA를 위해 기기에 등록된 사내망 고정 ip에 도메인을 할당받고 Portless를 활용해 워크트리별로 각각의 영속적이고 독립된 도메인으로 띄울 수 있게끔 셋업했어요.
에러 모니터링 고도화
모든 에러가 같은 위계로 설정되어 에러 위계에 대한 추적이 안되고 있었고, 에러를 디버깅할 때에도 상세 정보가 부족해 다양한 곳에서 유저의 행동 기반을 추적해야하는 문제가 존재했어요.
- 스택 트레이스가 ts로 보일 수 있도록 소스맵 연동을 바로잡았고, datadog, sentry, loki 등에 release와 에러 로깅 정책을 최신화했어요.
- 에러별 위계 분리로 가벼운 에러와 실제 웹뷰 크래시를 분리해서 볼 수 있도록 개선했어요.
- 실제로 문제가 되는 이슈들을 리스트업해 주기적으로 해결했어요.
- 유효한 모니터링이 될 수 있도록 다른 엔지니어들에게도 피드백을 수집 후 개선했어요.