미리보기

1. 디자인팀 협업 효율화 도구 개발

   반복적인 이미지 수정 요청이 디자인·개발 간 커뮤니케이션을 방해하던 문제를 해결하기 위해, 디자이너가 직접 시각 요소를 테스트할 수 있는 도구를 개발 결과 : 이미지 수정 요청이 약 80% 감소, 디자인 반영 주기 단축 관련글

2. 레거시 props 계산 로직 → 커스텀 훅으로 리팩토링

   자식 컴포넌트에서 수행되던 복잡한 계산 로직을 부모 컴포넌트의 커스텀 훅으로 이관 UI 컴포넌트는 시각적 역할에만 집중할 수 있게 하여, 코드 가독성과 유지보수성이 대폭 향상 결과 : 컴포넌트 유지보수 시간 75% 감소 관련글

3. GIF + Canvas 통합을 통한 방송 시각 효과 최적화

   방송자가 GIF와 HTML 캔버스를 따로 관리해야 했던 불편을 해결하기 위해, GIF 프레임을 직접 파싱하고 Canvas에 텍스트를 삽입한 뒤, 다시 인코딩하여 하나의 GIF로 시각 효과와 텍스트 삽입을 동시 처리할 수 있는 기능을 구현 결과 : 방송 준비 절차 단순화 및 시청자 시각 경험 개선

4. _app.js 최적화

   불필요한 라이브러리를 제거하고 필요한 컴포넌트만 lazy load 처리. 특히 해외 유저를 고려하여 네트워크 성능 병목을 제거함 결과 : 모든 페이지의 번들 사이즈 13% 개선 관련글

5. JWT → OAuth2.0 기반 인증 체계 개선

   Axios Interceptor를 활용해 AccessToken 만료 시 자동으로 RefreshToken을 통해 재인증되도록 구현 인증 흐름을 끊김 없이 유지하여 사용자 불편 최소화 관련글

6. 웹뷰 최적화 및 PR 프로세스 개선

   User-Agent 기반 API 제공, URL 의존 모달 상태 유지, PR 템플릿 도입 등을 통해 제품 품질 및 협업 정확도 개선

모니터링 백 오피스 서비스

• 모니터링 백 오피스 서비스 전반 신규 개발 주도

  모니터링 팀의 실질적인 사용성 개선을 위해 팀장과의 정기 미팅(주 1회)을 통한 요구사항 기반으로 UI 구성 및 기능을 개발

• 실시간 방송 상태 공유 시스템 설계

  방송 시청 및 접속 상태를 실시간으로 공유할 수 있는 기능을 Socket.io 기반으로 구현 모니터링 팀원 간 협업 및 상황 대응 효율을 향상

• 사용자 세션 복원 기능 구현

  사용자가 시청하던 방송 채널 정보를 로컬 스토리지에 저장하고, 브라우저 종료 후 재접속 시 Recoil-persist를 통해 상태를 자동 복원 사용자의 연속적 작업 흐름을 끊김 없이 유지할 수 있도록 UX 개선

• 실시간 API 속도 병목 해결

  브롤러별 승률/픽률을 실시간 계산하던 기존 구조에서 병목이 발생. 이를 개선하기 위해 집계 테이블을 도입하여 전적 저장 시 미리 계산 후 저장하고 프론트엔드에서는 해당 테이블만 조회하는 방식으로 변경 → API 로딩 속도 대폭(약 10초) 개선

• 서버리스 한계 극복 → 프록시 서버 구축

  Vercel 서버리스 환경에서는 IP가 고정되지 않아 브롤스타즈 공식 API 호출이 차단됨 EC2 인스턴스에 프록시 서버를 구축해 모든 요청을 우회 처리함

• GPTBot으로 인한 418 에러 해결

  브롤스타즈 API 서버가 GPTBot(User-Agent)이 보내는 과도한 요청을 감지하여 일부 정상 요청까지 418 응답으로 차단함. 빌드 타임 중 공식 API 호출 시에도 해당 영향으로 418 에러 발생 Vercel Firewall을 통해 GPTBot(User-Agent)을 차단함

• GA, GTM 연동을 통한 사용자 행동 분석

  스크래치 기능 사용 여부를 추적하여 유지 필요성을 판단. GA 이벤트 트래킹 기반 데이터 수집 및 개선 결정

• 검색 노출 중심의 SEO 구조 설계

  Semantic Markup, Sitemap, Robots.txt, 구조화된 데이터, 백링크 전략을 적용. 검색 노출 경험이 없는 신규 도메인임에도 불구하고 네이버/구글 최상단 노출 및 SEO 지표 약 8배 향상

• CLS 점수 개선

  Skeleton UI 도입, next/image 최적화 등을 통해 레이아웃 이동 최소화 결과 : 0.25 → 0.02

• 탭 기반 CSR 영역 useSWR 캐싱 처리

  SSR + CSR 혼합 전략을 적용하여 초기 로딩 성능 유지하며 데이터 캐싱

• 광고 수익화 및 사용자 분석 구조 구축

  Google AdSense, Kakao AdFit, GA 연동을 통한 수익화 및 사용자 행동 분석

• 데이터 파이프라인 설계 및 자동화

  서울시 오픈 API 데이터를 활용하여 MySQL 기반 데이터 파이프라인 설계, cron 스케줄러로 매일 자정 자동 갱신 처리

• Code Deploy를 이용한 배포자동화 구축
• soket.io를 이용한 실시간 채팅 구현
• 카카오 로그인 구현