미리보기

• Next.js 기반 PC·모바일 웹 및 웹뷰 구인·구직 서비스 개발

• React Native 기반 Kowork 모바일 앱 개발 및 출시

• 플랫폼 운영 및 지속적 기능 개선

• Mixpanel·Google Analytics(GA) 기반 백오피스 대시보드 구축

1. 문제

• Next.js 애플리케이션이 가동 시간이 길어질수록 응답 속도가 저하되기 시작하였고 결국 502 Bad Gateway까지 도달하며 서비스가 멈춤

2. 원인 파악

1. PM2 클러스터링

   • 인스턴스 2개로 확장, max_memory_restart 옵션으로 메모리 초과 시 자동 재시작.

2. 메모리 누수 추적

   • nGrinder 부하 테스트 + Chrome Inspertor로 누수 여부 확인

3. 실행 중인 환경 탐색

   • 서버에 접속해 .next 디렉터리 확인 중 캐시 만료 1년 설정임에도 불구하고 이미지가 다수(7 건) 재생성 → 이미지 캐시 미스로 과부하 유발 판단.

3. 해결

• NextJS 서버는 ISR 처리, 서버 컴포넌트 응답, HTML 서빙 등의 역할에 집중해야한다고 판단

  • 전문적인 이미지 처리 필요

• CloudFront + Lambda@Edge 기반 CDN 구축

  • S3 원본에 저장된 원본 이미지를 Sharp 라이브러리를 사용한 서버리스 핸들러로 변환·압축·리사이즈

  • 변환 결과를 CloudFront 캐시에 장기 보존 및 S3에 저장하여 재처리 방지

4. 성과

• 1 ~ 3일마다 재부팅되던 서비스가 안정적으로 개선 무중단 운영

• 이미지 최초 로드 시간 LCP 지표 3.6초 → 0.8초로 개선

• 서버 운영 비용 30% 감소

5. 성장한 점

• 급한 작업이지만 대안이 있는 경우에는 굳이 하지 않아도 된다

1. 문제

• NextJS의 복잡한 렌더링 구조

  • 서버 컴포넌트와 클라이언트 컴포넌트가 혼재하면서 “로그인 상태”를 판별하기 까다로움.

  • 클라이언트 전용 로직에 의존할 경우, 사용자는 페이지가 그려진 뒤에야 로그인 여부가 결정됨.

• Firebase 인증 한계

  • Firebase 로그인 정보는 node 서버 측에서 직접 파싱할 수 없음

2. 초기 시도

• 서버 - Middleware에서 토큰 존재 여부로 로그인 상태를 추론하여 사전 리다이렉트

• 클라이언트

  • auth.authStateReady + Suspense를 활용하여, Firebase 인스턴스 생성시 클라이언트에서 전역적으로 로딩 UI 표시

3. 추가 문제

• 구직자 기능 확장으로 인해 유저 정보가 선택적으로 필요한 정보들이 늘어났음

  • 해당 기능이 필요없는 경우에도 기다려야했음 → UX 저하

  • SEO 최적화에 불리하였음

4. 해결

• 전역 Suspense를 제거하고, 상태관리를 통해 필요한 경우에만 Loading을 띄우도록 개선

5. 배운 점

• 최신 기능이 항상 옳은 것은 아니고, 상황에 맞는 최선의 선택이 있다는 것을 체감하였음

• 프로젝트 상황(SSR/CSR 구조, 인증 방식)에 맞춰 선택적 적용이 중요함

1. 문제

• 실사용 환경에서 발생하는 React Native 오류를 JavaScript 레이어에서 정확히 수집·파악할 방법이 없었음

2. 시도한 해결책

• 대안 검토

  • 모바일 빌드 환경(native)의 오류를 JS로 추적할 수 있는 Sentry, Bugsnag이 세팅

• Sentry 채택 - 웹에서 사용 중인 NextJS를 전용 SDK를 제공해 전문적으로 지원한다고 판단

3. 성과

• 발생하고 있는 에러를 Sentry로 정확하게 파악할 수 있었음

• 입사 전 5%까지 올라갔던 React Native 에러 발생율을 0.9%까지 감소

1. 문제

• 복잡한 QA 시나리오

  • 회원 탈퇴 후 재가입처럼 재현하는데 시간이 소요되는 시나리오를 테스트할 때마다, QA 시간이 과도하게 소모됨

2. 시도한 해결책

• floating Button

  • 버튼 한 번으로 탈퇴-재가입등의 로직을 실행하도록 구현

  • 테스트 전용 계정을 사전에 여러 개 생성해 공유

  • 한계

    • 배포해야할 코드에 임시 로직이 혼입되어 코드베이스 및 커밋이 복잡해짐

    • 개발자 개인이 가지는 부담이 너무 컸음

• 스토리북 도입

  • props의 이름을 조정하여, 상황에 따른 UI 테스트를 진행할 수 있게 하였음

3. 성과

• QA 시간 단축 및 팀원의 업무 진행효율 증가

• 컴포넌트를 스토리로 명시하게 되면서 코드 품질 향상

1. 문제점

• DAU·MAU, 마케팅 성과, 제휴 배너 클릭률 등 핵심 지표를 정확히 측정하기 어려움

• 사용자 행동을 세분화·추적하는 데 제약이 많았음

2. 시도한 해결책

• Google Analytics(기존) 개선

  • 장점:

    • 비개발자도 웹에서 원하는 트리거를 손쉽게 추가 가능

  • 한계:

    • 대시보드 구성 과정이 복잡하고 러닝 커브가 높음

    • 앱(Android·iOS)에서는 비개발자가 트리거를 삽입하기 어려움

• Mixpanel 신규 도입

  • 장점:

    • 실시간으로 갱신되는 대시보드

    • 커스텀 속성 추가 후 드롭다운에서 즉시 필터·세그멘트 설정 가능

  • 한계:

    • 이벤트 스키마 정의·연동을 전적으로 개발자가 담당해야 함

3. 성과

• 팀 내에 원하는 데이터를 쉽게 확인할 수 있는 대시보드 구성

• 백오피스 운영 어려움 해소