AI 대화의 실패 복구
스트리밍과 저장된 대화를 분리하고 재생성·재시도·오래된 재조회 결과를 처리했습니다. 출시 준비 중인 제품입니다.
상태 설계 사례<김기환 / >
Frontend-first Product Engineer
React·TypeScript를 기반으로 AI 대화 제품과 콘텐츠·커머스 서비스를 개발하는 7년 차 엔지니어입니다. 스트리밍 응답의 상태 설계, 대규모 화면의 성능 개선, 여러 운영 도구를 연결하는 자동화를 다룹니다.
HCI·Visual Analytics 연구에서 출발해, 복잡한 시스템을 사람이 이해하고 사용할 수 있게 만드는 일을 이어왔습니다.
이력서 PDFhttps://kihwan.kimjuljin1875@gmail.comLinkedInGitHubSelected Work
Experience
Levvels
프론트엔드 엔지니어
2025.07 – 현재
AI 캐릭터 챗의 출시를 준비하며, Vuddy 소비자 웹·운영 도구와 브라우저 기반 CS/QA 자동화를 개발합니다.
React
Next.js
TypeScript
TanStack Query
Zustand
SSE
Playwright
Sentry
Mixpanel
ChannelTalk
PageAgent
Generative UI
AI 캐릭터 챗 서비스
2026.05 – 현재
AI 캐릭터와 대화하며 이야기를 이어가는 서비스와 캐릭터 콘텐츠를 작성·심사하는 Admin을 만들고 있고, 출시를 준비 중입니다.
- 저장된 대화(TanStack Query)와 진행 중 응답을 분리하고, SSE 이벤트를 내부 이벤트로 정규화해 전송·스트리밍·완료·실패·차단 상태를 명시적으로 처리
- single-flight로 중복 실행을 막고 오래된 재조회 결과를 무효화. 완료 후 서버 메시지 재조회가 실패해도 수신한 응답을 유지하도록 구현하고 런타임 테스트로 검증
- 재생성·후보 선택·재시도를 상태 모델에 연결하고 Next.js의 Node.js 서버 라우트로 스트림 API 연동
- 스토리·로어북·검색 키워드 등 캐릭터 콘텐츠의 작성·심사 화면 구현
- 기획 문서, Figma, Swagger에서 다르게 정의된 부분을 정리하고 구현 기준과 QA 시나리오 작성
2025.07 – 현재
Vuddy의 소비자 웹, Creator Studio, 내부 Admin을 구현하고 운영했습니다. 클래스 탐색과 결제부터 주문, 취소·반품·교환까지 커머스 흐름을 맡았습니다.
- 클래스 탐색·영상·결제, Studio 주문 관리, Admin 상품·수강생·이용권 관리 구현
- 장바구니, 본인인증, 2차 창작자 신청과 취소·반품·교환 정책 변경 반영
- HLS 홈 캐러셀과 모바일 WebView의 safe area·스크롤·뒤로가기 문제 개선
PageAgent 기반 내부 운영 자동화
2026.03 – 현재
CS/QA 담당자가 여러 내부 도구를 오가며 확인하던 일을 브라우저 자동화로 줄였습니다. 자연어 요청을 실행 절차로 바꾸고, 결과와 근거를 한 화면에 정리했습니다.
- 계정, 결제, 매핑 정보를 여러 내부 도구에서 모아 한 화면에서 비교할 수 있게 구성
- Chrome Managed Profile 환경에 맞게 Alibaba PageAgent를 확장하고 탭 이동, 클릭, 입력 등 화면 조작을 자동화
- LLM 요약과 실제 실행 근거를 분리해 운영자가 계정·결제·매핑 정보의 출처를 다시 확인할 수 있게 구성
- 전용 selector로 반복 UI 조작을 보강하고, 막힌 자동화는 Slack으로 사람에게 넘기는 경로와 운영팀 피드백 반영
React
Next.js
TypeScript
TanStack Query
Zustand
SSE
Playwright
Sentry
Mixpanel
ChannelTalk
PageAgent
Generative UI
리디주식회사
프론트엔드 엔지니어
2022.05 – 2025.07
서버 주도 UI와 점진적 마이그레이션으로 운영 UI 변경과 A/B 테스트를 배포 주기와 분리하고 실행 속도를 높였습니다.
Next.js
React
TypeScript
Emotion
Jest
PHP
Twig
Sentry
Virtualization
2022.05 – 2025.07
서버 주도 UI와 아일랜드 아키텍쳐로 레거시 페이지를 React로 점진적으로 이전했습니다. 운영 UI 변경과 A/B 테스트를 더 빠르게 실행했습니다.
- GraphQL Grid/Cell 인터페이스로 UI 구성과 비즈니스 데이터를 분리하고 클라이언트에서 트리를 재구성
- 기존 클라이언트의 호환성을 유지하며 스키마를 확장하고 랜딩·검색·상세 화면에 재사용
- PHP/Twig 페이지에 React를 부분적으로 도입해 전면 재작성 없이 점진 이전
- Redis로 UI 응답을 캐싱하고 서버 주도 구성으로 운영 UI 변경·실험과 프론트엔드 배포의 결합을 완화
대규모 리스트 렌더링 최적화
2022.05 – 2025.07
250개 작품을 전제로 만든 화면에서 6,000개 이상을 처리하며 드러난 병목을 분석했습니다. 가상화·동적 높이 처리·스크롤 복원으로 렌더링 구조를 개선했습니다.
- 네트워크 전송과 CPU·DOM 렌더링 비용을 나눠 분석하고 화면에 필요한 범위만 렌더링하는 가상화 적용
- window 스크롤 기반 탐색에서 동적 높이와 스크롤 위치 복원을 함께 처리
- SVG 배경 기반 skeleton으로 로딩 표현과 콘텐츠 렌더링의 책임을 분리
사용자 환경 안정화
2022.05 – 2025.07
Sentry로 실제 사용자 오류를 추적하고, 번역 확장 프로그램 충돌과 E-ink 기기의 렌더링·UX 문제를 개선했습니다.
- 실제 사용자 오류를 Sentry로 추적
- 번역 플러그인 등 외부 extension 충돌 대응
- E-ink 렌더링과 UX 이슈 개선
Next.js
React
TypeScript
Emotion
Jest
PHP
Twig
Sentry
Virtualization
티맥스엔터프라이즈
연구원
2020.02 – 2022.05
現 티맥스비즈에이아이
舊 티맥스데이터
비전문가도 AI/분석 기능을 사용할 수 있도록 AutoML 플랫폼의 사용 과정, 시각화, 인터랙션을 설계했습니다. 예측값과 근거를 함께 확인할 수 있는 UI를 구현했습니다.
React
TypeScript
Material-UI
Sass
Python
jQuery
레거시 시스템 React 전환
2021.01 – 2022.05
용도와 책임이 뒤섞인 사내 UI 라이브러리를 정리하고, 레거시 위젯을 React 컴포넌트로 대체했습니다.
- 기존 UI 코드를 용도별로 분리
- 레거시 위젯을 대체할 컴포넌트 신규 개발
AutoML 플랫폼
2020.02 – 2022.05
모델 개발 경험이 없는 사용자를 위한 Codeless 개발 스튜디오와 예측 근거 시각화를 구현했습니다.
- 비전문가용 Codeless 개발 스튜디오 구현
- 모델 전체의 feature importance, 개별 예측 설명, 입력 변화에 따른 What-if 흐름을 시각화
- AutoML 엔진과 모델 개발자 간 인터페이스 연구
- 초기 제품의 요구사항과 구조 구체화
React
TypeScript
Material-UI
Sass
Python
jQuery
Open Source
Contributor
2026.07 – 현재
AI 에이전트와 사람이 같은 프로토콜로 플레이하는 오픈소스 MMORPG(Rust · Svelte · Three.js · WebAssembly)에 기여하고 있습니다. 게임 개발은 처음이었고, 클라이언트 테스트로 시작해 지금은 Rust 서버 쪽을 주로 봅니다. 올린 PR 10건은 모두 병합됐습니다.
TypeScript
Svelte
Rust
WebAssembly
Vitest
서버
- 지형 타일 캐시가 쌓이기만 하고 줄지 않아 세대 단위로 쓸어내고 용량 상한 적용, 읽기 경로는 락 없이 그대로 유지 (#68)
- 운영자용 계정 밴/해제 구현, 캐릭터가 아닌 계정으로 끊어 부캐 재접속을 막고 검사를 지난 접속이 그대로 들어오는 틈은 기존 세션 락으로 차단 (#95)
- 상인 NPC의 취침 스케줄은 에이전트 쪽 데이터라 서버가 볼 수 없어, 서버에도 보이는 침대 점유 상호작용으로 수면을 판정해 잠든 상인과의 거래를 거부. 모든 거래 경로가 이미 지나는 검증 한 곳에 넣어 자기 전에 열어둔 상점 창으로 결제되는 경우까지 차단 (#103)
- 밤에는 상인이 자서 마을에 거래처가 없어, 어두워지면 좌판을 여는 야간 상인을 추가. 상인 정의가 두 파일에 나뉘어 있어 한쪽만 넣으면 띄울 수 없는 상점이 생기므로 그 불일치를 잡는 테스트를 함께 작성 (#111)
추가 기여·분석·리뷰 보기
클라이언트
TypeScript
Svelte
Rust
WebAssembly
Vitest
Contributor
2026.08 – 현재
Vite·Vitest를 만든 VoidZero의 툴체인 vite-plus(Rust · TypeScript 하이브리드)에 기여. 쉘 통합 수정(Rust)이 병합됐고, 지금은 태스크 러너 vite-task의 캐시(TypeScript)를 고치면서 두 저장소에 걸친 이슈 분석과 PR 리뷰를 병행합니다.
Rust
TypeScript
Shell
쉘 통합
- 생성되는 쉘 래퍼가 전역 -C <dir> 플래그(-C <dir> · -C<dir> · -C=<dir>) 뒤에 오는 vp env use를 인식하지 못해 환경 변경이 현재 쉘 세션에 적용되지 않던 문제를 setup.rs에서 수정. vpr 자동완성도 zsh · Fish · Nushell · PowerShell에서 작업 디렉토리 옵션을 보존하도록 맞추고, 네 쉘의 통합 템플릿을 스냅샷 테스트로 고정. 리뷰 과정에서 생성 스크립트의 set -u/NO_UNSET 안전성 보강과 PowerShell 타입 안전성 수정을 더하고 실행 가능한 회귀 테스트로 덮음 (#2508, 이슈 #2056)
추가 기여·분석·리뷰 보기
태스크 러너 캐시 (vite-task)
- 추적 대상 환경 변수 일괄 조회가 필터링 전의 전체 환경으로 검증돼, GitHub Actions에서 실행마다 바뀌는 변수(ACTIONS_ORCHESTRATION_ID 등)가 캐시를 매번 무효화하던 문제. 기존 untrackedEnv 계약을 일괄 조회로 확장해 기록·검증은 필터링하고 반환값은 그대로 유지, 단위·e2e 스냅샷 테스트 포함 (vite-task#693 리뷰 중, 메인테이너가 등록한 이슈 vite-task#505)
분석·리뷰
- 태스크 러너가 package.json 스크립트에 npm 생명주기 환경 변수를 노출하지 않는 문제를 근본 원인까지 분석하고, vite-plus 쪽 수정만으로는 캐시 활성 태스크를 덮지 못하는 이유를 정리 (vite-task#692). vite-plus 리뷰에서는 제안된 수정이 환경 지문 필터링에 조용히 걸러지는 문제를 확인 (#2385)
- Oxlint·Oxfmt 설정 마이그레이션 PR을 리뷰해 검증된 엣지 3건을 제시하고 작성자가 반영, 이어서 새 하드 에러 경로의 PTY 스냅샷 테스트를 공저(co-authored)하고 마이그레이션 PTY 스위트 154케이스 전체를 PR의 최종 검증으로 실행 (#2483 리뷰 중). 그 과정에서 드러난 PTY 스위트 플레이키니스를 5회 재현 매트릭스로 정리해 리포트 (#2565)
Rust
TypeScript
Shell
Education
울산과학기술원 (UNIST)
컴퓨터공학 석사
2018.03 – 2020.02
기술경영학 학사 (컴퓨터공학 융합전공)
2013.03 – 2018.02
2019.01 – 2020.02
추천 시스템의 탐색용 아이템 노출을 사용자가 어떻게 이해하는지 연구했습니다. 더 나은 피드백을 끌어내는 설명 방식을 실험했습니다.
- Explore-Exploit 문제에서 투명성 효과 측정
- 탐색 아이템 노출 방식과 사용자 인식 분석
- 사용자 로그 가치 평가 지표 제안
- 웹 기반 영화 추천 실험 시스템 구현
- 사용자와 추천 알고리즘의 상호작용을 관찰하는 UI 실험 설계
Python
Flask
Surprise
jQuery
2019.02 – 2020.02
웹 환경의 사용자 의사결정과 행동 패턴을 모델링했습니다. 사람이 시스템을 이용하는 방식을 데이터로 분석했습니다.
- 역강화학습으로 사용자 보상 함수 추정
- 데이터 분석, 역사 교육, 카드 게임 환경을 다룸
- Tableau와 위키피디아 기반 교육 도구 활용
Python
TensorFlow
Keras
scikit-learn
Publications
An Empirical Analysis on Transparent Algorithmic Exploration in Recommender Systems
김기환
A Computing Research Repository (CoRR), 2108.00151, 2021
- 추천 시스템이 사용자 취향을 파악하기 위해 랜덤 아이템을 노출하는 방식 연구
- 실험용 웹 기반 영화 추천 시스템 구현
- 사용자 로그의 학습 가치 평가 지표 제안
- 추천 시스템의 Explore-Exploit 문제에서 투명성이 데이터 품질에 미치는 영향 측정
- Amazon MTurk에서 94명의 피험자 모집
- 넷플릭스와 유사한 실험 환경에서 실사용 로그와 설문 응답 수집
ST-GRAT: A Novel Spatio-temporal Graph Attention Networks for Accurately Forecasting Dynamically Changing Road Speed
박천복, 이충기, 방효진, 태윤원, 김기환, 진승민, 고성안, 주재걸
ACM International Conference on Information and Knowledge Management (CIKM), 2020
- 한국도로공사의 도로 바닥에 설치된 차량 감지 센서 데이터를 전처리
- Attention이 효과적으로 동작한 경우를 패턴별로 분류
Modeling Exploration/Exploitation Decisions through Mobile Sensing for Understanding Mechanisms of Addiction
김기환, 김상훈, 이충기, 고성안
ACM International Conference on Mobile Systems, Applications, and Services (MobiSys), 2019
- 스마트폰 사용 로그와 Inverse Reinforcement Learning으로 중독 질환 여부 감지 시스템 제안
An Empirical Study on the Relationship Between the Number of Coordinated Views and Visual Analysis
오주영, 이충기, 김휘연, 김기환, 권오상, Eric D. Ragan, 권범철, 고성안
A Computing Research Repository (CoRR), 2204.09524, 2018
- 시각화 차트 수가 데이터 분석 과정에 미치는 영향 실험
- 44명의 피험자에게 시각적 분석 도구와 데이터 분석 과제 제공
- Think-aloud 프로토콜, 화면 녹화, 로그 데이터로 사용자 분석 패턴 분류
- 차트 수와 과제 점수 간 양의 상관관계 관찰