About Me

특정 프레임워크에 종속되지 않고 어디서든 재사용할 수 있는 범용 AI 채팅 SDK를 개발하고, 이를 활용해 AI 국민비서 서비스를 구축했습니다.

• UI, 비즈니스 로직, SSE 통신 계층을 분리한 Web Component 기반 SDK를 설계하여 유지보수성과 확장성을 확보
• 계층 간 매끄러운 데이터 흐름 제어를 위한 이벤트 기반 통신 구조 설계
• AI 국민비서에 SDK를 적용하여 채팅 화면을 개발했으며, 기존/신규 서비스에서도 SDK 도입을 논의 중

누구나 인원수 제한 없이 다함께 채팅할 수 있는 오픈채팅 Lite 웹버전 프론트엔드 개발을 담당하고 있으며, 대규모 트래픽 환경에서의 성능 최적화, 안정성 확보 및 운영 효율성 개선에 기여했습니다.

• 성능 최적화대량의 메시지 유입 시 발생하는 렌더링 병목 현상을 방지하기 위해 비동기 처리 및 Message Queue를 도입하여, 성능 저하 없는 쾌적한 실시간 채팅 경험 제공. Lighthouse 기반 성능 측정 도구에서 약 20점 가량 성능 향상을 이끌어냈고, 실제 체감 성능을 높이기 위한 작업을 계속해서 진행했습니다.🔗 관련 기술 블로그 기고: 설계를 변경하여 성능 개선하기 →
• 운영 효율성 개선하드코딩으로 매번 빌드/배포가 필요했던 이벤트성 기능(특정 단어 입력 시 데코레이션)의 구조를 개선하여, 데이터를 JSON으로 정규화하고 실시간 수정이 가능한 사내 어드민 페이지를 기획·개발. 이를 통해 하계 올림픽 4개 채팅방에 약 61개, 추석 4개 채팅방에 약 40개의 데코레이션 정보를 실시간으로 등록·수정하며 운영 효율성 대폭 향상
• 안정성 향상Playwright 기반의 E2E 테스트 환경을 도입하여 핵심 사용자 동선 검증 자동화 및 릴리즈 안정성 향상
• UX 고도화롱프레스, Lottie 기반 리액션 등 사용자의 상호작용과 몰입도를 높이는 디테일한 인터랙티브 UI/UX 개발

사용자의 원활한 서비스 이용을 돕는 온보딩 동선과 서비스 전반에 사용되는 공통 UI 컴포넌트를 설계하고 개발했습니다.

• 온보딩부터 홈 화면으로 이어지는 초기 진입 동선을 구현하고, 사용자 인증 상태 및 다양한 예외 케이스를 안전하게 처리하는 리다이렉트 로직 설계
• 기능 확장 시 유연하게 대응하고 중복 코드를 제거하기 위해 고도화된 재사용성을 갖춘 공통 바텀시트(Bottom Sheet) 컴포넌트 구조 설계

개발자가 MCP를 관리·등록할 수 있는 전용 콘솔 페이지를 개발했습니다.

• 개발자 콘솔의 MCP 목록 조회 및 20여 개 필드 기반 대규모 데이터 등록 폼 구현
• 방대한 입력 데이터에 최적화된 상태 관리 구조 설계 및 30여 개 복잡한 유효성 검증 로직 구축

카카오 고객센터 페이지에 도입된 카카오톡 웹버전의 채팅 기능 및 진입 인터페이스를 개발했습니다.

• 카카오톡 말풍선의 플랫폼별 동작 차이와 렌더링 시 예외 처리를 위해 100개 이상의 테스트 코드를 선제적으로 작성하여 안정적인 릴리즈 기반 마련
• Redux의 무거운 보일러플레이트 문제를 해결하기 위해 Redux Toolkit 마이그레이션을 진행, 상태 모듈 15개를 slice로 전환하며 상태 정의 코드를 약 60% 축소
• WebSocket 기반 실시간 통신 서비스 로직 구현
• 사용자향 웹채팅에서 카카오톡 채널 정보 및 채팅 시작 버튼이 포함된 시작 페이지 개발