김태성

Frontend Developer

Email Github Blog

Philosophy

옆자리 동료를 위해 일합니다

옆자리 동료가 편안하게 읽을 수 있는 코드를 작성하기 위해 꾸준히 학습하고 소통합니다.

더 나은 방향을 함께 고민하는 과정을 소중히 여기며, 팀 전체의 시너지를 높이는 개발을 지향합니다.

제품에 무한한 애정을 쏟습니다

제품은 저와 팀의 가치를 증명하는 결과물입니다. 직접 만든 서비스에 책임감을 갖고, 더 나은 결과를 위해 끝까지 파고드는 성향을 가지고 있습니다.

성능 최적화에 깊은 관심을 가지고 있으며, 이를 위해 다양한 접근법을 실험하고 개선해 나갑니다.

Work Experience

베이비챗 (Babechat)

Frontend Engineer

Consumer Squad

2026.02 - 재직중

사용자가 다양한 AI 캐릭터와 실시간으로 대화할 수 있는 글로벌 AI 캐릭터 채팅 서비스입니다. 한국·일본·대만 3개 리전에서 서비스를 운영하고 있으며, 저는 투킷을 포함한 네 개의 앱이 공통으로 사용하는 프론트엔드 코어와 실시간 채팅 경험을 개발하고 있습니다. 특히 서비스의 성능과 사용자 경험을 고도화하는 데 집중하고 있으며, 유료 재화인 프로챗 충전 및 정기결제부터 구독 상품(메모리+·출석+), 유료 확장 기능까지 서비스 전반의 결제 경험을 개발하고 있습니다.

채팅방 렌더링 성능 최적화

서비스 사용 시간의 대부분이 머무는 채팅방을 다시 만들면서, 성능 개선에 집중했습니다. 대화가 수백·수천 건 쌓이면 스크롤이 끊기고 입력이 밀리던 화면을, 메시지 수와 무관하게 일정한 속도로 동작하도록 바꿨습니다.

ReactTypeScriptreact-virtuosoTanStack QueryZustandSSE

수천 개의 메시지도 가볍게 탐색할 수 있는 채팅방을 만들었습니다포스트

AI 답변이 스트리밍될 때마다 전체 메시지 배열이 다시 렌더링되어 대화가 길어질수록 급격히 느려지는 문제를 발견했고, 렌더링 구조를 개선해 시간복잡도를 O(n²)에서 O(n)으로 개선
대화가 많이 쌓인 채팅방에서는 스크롤할수록 DOM 노드가 계속 늘어나 성능 저하 발생, 이를 react-virtuoso 기반 가상화로 개선해, 화면에 필요한 메시지만 렌더링하도록 최적화
오프셋 기반 메시지 조회를 양방향 커서 구조로 개선해, 긴 대화에서도 전체 메시지를 불러오지 않고 맨 처음 대화로 즉시 이동할 수 있도록 구현

AI 답변이 기분 좋게 흘러나오도록 만들었습니다포스트

AI 답변이 도착할 때마다 상태를 갱신하던 방식을 throttle로 바꿔, 답변이 길어져도 스트리밍 글자가 일정한 속도로 그려지도록 구현
서버 응답이 몰렸다 끊겼다 하며 글자가 뭉텅이로 튀어나오던 문제를, 도착한 글자를 큐에 두고 매 프레임 일정 속도로 흘려보내는 requestAnimationFrame 페이서로 해결
줄 단위 등장 연출에 필요한 줄바꿈 위치를 텍스트 계측 라이브러리(@chenglou/pretext)로 계산해, DOM에 그려보고 재는 방식이 유발하던 매 프레임 리플로우를 제거

새로고침과 기기 전환에도 끊기지 않는 AI 채팅을 만들었습니다포스트

Redis 기반 스트림 재연결과 실시간 이벤트 구조를 설계해, 새로고침이나 기기 전환 후에도 생성 중인 AI 답변을 끊김 없이 이어볼 수 있도록 구현
권한 검증과 예외 처리를 포함한 멀티 디바이스 동기화를 구현해 한국·일본·대만 3개 앱에 공통 적용
새로고침으로 스트리밍을 끊어 재화 소모 없이 Reroll을 반복하던 어뷰징을 구조적으로 차단해, 불필요한 AI 생성 비용과 매출 누수 방지

결제 관련 경험 개발 및 A/B 테스트 진행

대화 한 번마다 소모되는 유료 재화 “프로챗”을 중심으로, 재화를 쓰고·받고·채우는 경험 전반을 개발했습니다. 잔액이 실시간으로 반영되는 소모 흐름부터 재화를 지급하는 출석·구독 상품, 신규 유입을 만드는 바이럴 이벤트 페이지까지 4개 앱에 출시했습니다. 또한, A/B 테스트로 신규 가입자의 결제 전환을 검증했습니다.

ReactTypeScriptTanStack QuerySSEPG 연동(정기결제)i18nA/B Testing

재화가 줄어드는 순간의 경험을 다듬었습니다

재화 잔액을 SSE로 구독해, 메시지를 보내거나 충전했을 때 새로고침 없이 화면 곳곳의 잔액이 즉시 갱신되도록 구현
재화가 부족해 결제로 이동했다가 돌아오면 작성 중이던 메시지가 사라지던 문제를 수정해, 구매 후 대화 흐름이 끊기지 않도록 개선
유저노트 확장처럼 메시지당 추가 비용이 붙는 기능의 비용을, 잔액 검사·예상 비용 표시·출력 설정 세 곳에 일관되게 반영
자동충전에서 0원 결제가 요청되던 경로를 차단하고, 만료 예정 재화를 미리 안내해 소진 없이 사라지는 상황을 방지

재화를 지급하는 출석·구독 상품을 만들었습니다

연속 출석 보상 이벤트를 구현하고, 출석 성공·직전일 실패·보너스 지급 등 상태별 UI와 팝업 흐름을 설계
매일 추가 재화를 받는 구독 상품 “출석+”를 정기결제와 연동해 출시하고, 구독 상태·만료·결제 실패 재시도 안내까지 화면에 반영
보상 지급 직후 잔액·뱃지 캐시를 무효화해, 받은 재화가 화면에 곧바로 반영되도록 처리
출석 기능 전체를 다국어 처리해 한국·일본·대만에 동일하게 제공

A/B 테스트로 신규 가입자의 결제 전환을 검증했습니다 (ARPU +21%)

신규 가입자에게 성인 인증을 안내하는 시점과 방식을 바꾼 실험을 설계·구현해, 약 16,000명을 대상으로 검증
인증 완료율 14.5% → 23.7%(+63%), 결제 사용자 비율 5.55% → 6.17%(+11%)로 개선되어 실험군 전면 적용
1인당 매출(ARPU) 1,740원 → 2,106원(+21%), 결제자당 매출(ARPPU) 31,346원 → 34,114원(+8.8%), 총 매출 +19.8% 상승
기능 플래그로 집단을 나누고 인증 진입 경로는 양쪽을 동일하게 맞춰, 결과 차이를 실험 변수 하나로만 설명할 수 있도록 설계

AI 기반 에러 대응 및 코드리뷰 자동화 구축

운영 에러를 사람이 직접 확인하고, 코드 변경도 한 번의 AI 리뷰에 의존하던 과정을 자동화했습니다. 에러를 자동 분류·이슈화하는 error-triage와, 3개의 AI 리뷰어가 독립적으로 코드를 검토하는 consensus-review를 설계·도입해 문제를 더 빠르게 발견하고 안전하게 배포할 수 있는 개발 프로세스를 만들었습니다.

Node.jsGitHub ActionsAxiom(APL)Claude CodeMulti-AgentSlack Webhook

쌓이기만 하던 에러 로그를 관리 가능한 이슈로 바꿨습니다

6시간 주기와 운영 배포 직후 실행되는 파이프라인을 구축해 신규·재발 에러를 GitHub Issue와 Slack으로 자동 통지
에러 메시지와 스택을 정규화해 같은 원인의 오류를 하나로 묶고, 지문이 달라도 근본 원인이 같은 경우만 AI가 추가 판별하도록 설계
네트워크 실패·요청 취소처럼 실제 버그가 아닌 이벤트는 규칙으로 걸러내고, 맥락이 필요한 신규 에러에만 AI를 사용해 오탐과 비용을 최소화
해결된 이슈가 다시 발생하면 자동으로 재오픈하고, 지문 생성·병합 로직에는 회귀 테스트를 추가해 운영 중 재발을 지속적으로 추적

한 번의 AI 리뷰보다 신뢰도 높은 멀티에이전트 리뷰를 만들었습니다

3개의 AI 리뷰어가 같은 코드 변경을 독립적으로 검토하고, 여러 리뷰어가 공통으로 지적한 문제일수록 높은 우선순위를 부여
의견이 엇갈리는 항목만 다시 검증하도록 설계해 오탐과 불필요한 AI 사용을 줄임
한국·일본·대만 공통 코드의 경우 형제 파일까지 함께 확인하도록 리뷰 기준을 구체화해 국가별 수정 누락을 방지
수정 후 lint·타입 검사·테스트를 통과해야 리뷰가 종료되도록 해 AI의 판단을 그대로 신뢰하지 않는 검증 절차 적용
CLAUDE.md에 “추측 금지”, “조용한 예외 처리 금지” 등 협업 원칙을 명문화해 팀이 일관된 기준으로 AI 리뷰를 사용할 수 있도록 정착