미리보기

주요 업무

• 카카오 계열사 신규 프로젝트 프론트엔드 설계/개발 및 운영

프로젝트

• 카카오톡 오픈채팅 핫이슈탭

• 카카오 데이터센터 출입관리 포털

• 카카오톡 비즈메시지 포털

• 카카오 엔터테인먼트 라이브 스트리밍 어플리케이션

• 카카오 DB 관리 시스템

주요 성과

• 프론트엔드 설계 및 업무 프로세스 정립

• Lighthouse 지표 평균 90점 이상 달성

• 불필요한 반복 호출 제거로 네트워크 트래픽 30% 절감

• 대규모 데이터(10,000건) 로딩 시 약 5~6초 → 2초 이하로 감소

• API Mocking(MSW)을 활용한 개발 프로세스 개선

• 테스트 커버리지 80%이상 달성

Description

카카오톡 오픈채팅 핫이슈탭 웹뷰 프론트엔드를 설계·개발하였으며, 부산국제영화제·크리스마스 시즌 등 이벤트 페이지를 운영했습니다.

Experience

• 번들 크기 최적화 및 성능 개선

• 테스트 커버리지 80%이상 달성

• 헤드리스 컴포넌트 구현

Tech Stack

TypeScript React Vite Jest

Description

카카오 데이터센터의 출입을 관리하는 데이터센터 포털 "출입신청시스템 똑똑(카카오톡채널)"의 프론트엔드 개발을 진행했고 데이터센터 TF 팀의 프론트엔드 개발 리드 역할을 수행했습니다.

Experience

• 프론트엔드 설계 및 업무 프로세스 정립

• Lighthouse 지표 평균 90점 이상 달성

• API Mocking(MSW)을 활용해 개발 프로세스 개선

• Parallel routes 구조로 PC/모바일 페이지 분리 구현

Tech Stack

TypeScript Next.js Zustand React-Query MSW

Description

기존 기업별로 따로 운영되던 비즈메시지 페이지를 하나로 통합한 포털의 프론트엔드를 설계·개발했습니다.

Experience

• Vue와 React 등으로 분산된 코드를 하나의 최신 스택으로 통합

• 코드 가독성과 사용자 경험을 높여 사이트를 재구축

• 불필요한 반복 호출 제거로 네트워크 트래픽 30% 절감

Tech Stack

TypeScript Next.js Zustand React-Query

Description

카카오 엔터테인먼트 라이브 스트리밍 앱의 웹뷰 페이지를 개발했습니다.

Experience

• 앱 스킴 링크 연동으로 모바일 앱 호출 기능 구현

• 사내 이벤트 로깅 라이브러리를 활용해 사용자 클릭/사용 데이터를 추적 및 분석 기반 마련

• 다국어 대응 (KO·EN·JA)

Tech Stack

TypeScript Next.js React-Query react-i18next

Description

카카오 백엔드/DBA용 DB 관리 시스템의 프론트엔드를 구현했습니다.

Experience

• 데이터베이스 사용 현황을 시각화하기 위한 차트 개발

• 차트 로딩 시간 개선으로 대규모 데이터(10,000건) 로딩 시 약 5~6초 → 2초 이하로 감소

Tech Stack

JavaScript Redux-Toolkit Chart.js