교풀AI(GyopoolAI)

AI 도구 동적 제작 페이지 구현 중, CPU 4배 속도 저하 환경에서 글자 입력 간 3초, 질문 위치 수정 간 4초가 소요되는 극심한 Form 성능 저하가 발생하였습니다. 렌더링 연쇄 작용과 브라우저 리플로우 관점에서 원인을 분석했습니다.

부모의 watch를 제거하고 useFieldArray의 fields를 활용하며, control 객체를 통해 각 컴포넌트가 필요한 상태만 격리하여 구독하도록 구조를 고도화했습니다. 또한 브라우저 리플로우를 방지하기 위해 자동 높이 조절 UI를 일반 텍스트 영역으로 교체하는 디자인적 협의를 진행했습니다.

• • React의 가상 DOM 리렌더링과 브라우저의 리플로우(Reflow)를 분리하여 가설을 세우고, 크롬 개발자 도구의 성능 프로파일링을 통해 병목 지점을 특정하는 법을 익혔습니다.
• • 사용자 경험(UX)의 핵심 지표인 INP 수치를 개선하기 위해 서비스의 안정성과 반응 속도를 최우선으로 고려하는 비즈니스적 판단력을 길렀습니다.
• • 전체 구독 방식의 한계를 파악하고, 개별 구독 형태의 최적화된 상태 관리 로직을 구현하며 효율적인 설계의 중요성을 체감했습니다.

• React Hook Form INP 3,912ms 97% 성능 개선기

서비스의 글로벌 진출로 인해 라이브 운영 중인 프로젝트에 다국어(i18n) 지원을 추가해야 했습니다. 이때 기존 유저들이 공유하거나 즐겨찾기 한 URL(Legacy URL)이 깨지지 않아야 했고, 검색 엔진 최적화(SEO) 점수 하락을 방지해야 하는 깐깐한 제약 조건이 있었습니다.

SEO 방어를 위해 URL 쿼리 파라미터가 아닌 Sub-path 라우팅(`/[locale]/...`) 방식을 채택했습니다. 초기 로딩 속도(TTFB)를 저하시키는 CSR 기반의 전역 상태(Context) 사용을 배제하고, next-intl의 미들웨어와 쿠키를 활용해 서버 단에서 언어를 우선 추론하도록 설계했습니다. 더불어 기획/디자인 팀과의 협업 병목을 줄이기 위해 Google Sheets API를 연동하여 평면적인 시트 데이터를 다국어 JSON 트리로 파싱하는 Node.js 스크립트를 작성했습니다.

• • Next.js App Router 환경에서 전역 상태 관리(Zustand 등) 없이 미들웨어와 쿠키만으로 서버와 클라이언트 간의 상태를 동기화하는 구조적 패러다임을 깊이 이해했습니다.
• • 2차원 배열 데이터를 재귀(Recursive) 알고리즘을 통해 3차원 JSON 트리로 가공하는 로직을 직접 구현하며 데이터 핸들링 역량을 키웠습니다.
• • 기능 구현을 넘어, 타 직군(기획, 디자인)과의 협업 프로세스를 자동화하여 팀 전체의 개발 생산성(DX)을 끌어올리는 인프라 설계의 중요성을 체감했습니다.

• 달리는 기차의 바퀴를 바꿔라: i18n 다국어 주입기