AI 대화의 실패 복구
스트리밍과 저장된 대화를 분리하고 재생성·재시도·오래된 재조회 결과를 처리했습니다. 출시 준비 중인 제품입니다.
상태 설계 사례<김기환 / >
AI Product Engineer
AI 제품의 인터페이스를 만드는 7년 차 엔지니어입니다. LLM 스트리밍 대화의 상태 설계, 브라우저 에이전트 자동화와 결과 검증, 대규모 화면의 렌더링 성능과 서버 주도 UI를 React·TypeScript로 구현해 왔습니다. 현재 팀에서는 AI 챗 프론트엔드 리드이자 사실상 파트장으로 기술 방향, 코드 리뷰, 멘토링을 맡고 있습니다.
HCI·Visual Analytics 석사 연구에서 시작해 AutoML 예측 설명 UI, LLM 관측 도구 기여까지 같은 문제를 다뤄왔습니다. AI가 내놓은 결과를 사람이 이해하고 검증한 뒤 믿고 쓸 수 있게 만드는 일입니다.
이력서 PDFhttps://kihwan.kimjuljin1875@gmail.comLinkedInGitHubSelected Work
검증 가능한 브라우저 에이전트
여러 사람이 비동기로 확인하느라 10분에서 반나절 걸리던 CS/QA 확인을 약 1분으로 줄였습니다. LLM 요약과 실행 근거를 분리해 운영자가 결과를 다시 확인할 수 있게 했습니다.
운영 자동화 사례배포 없는 UI 실험
장르홈·작품홈을 서버 주도 UI로 옮겨, 약 1주 걸리던 UI 변경과 A/B 테스트를 운영 설정으로 당일 반영하게 했습니다.
서버 주도 UI 사례6,000개 이상 콘텐츠 탐색
250개를 전제로 만든 화면이 6,000개 이상을 다루며 초기 렌더링이 10초를 넘었습니다. 가상화·동적 높이·스크롤 복원으로 체감 지연 없이 그려지게 했습니다.
성능 개선 사례오픈소스 제작과 기여
지속형 AI 캐릭터 런타임 Aethrion을 만들고 있습니다. OpenMMO PR 10건과 Vite+ 쉘 통합 수정이 병합됐고, Langfuse에 한글 IME 수정을 제출했습니다.
프로젝트와 PRExperience
Levvels
Frontend Engineer
2025.07 – 현재
프론트엔드 3명 팀에서 직급과 별개로 파트장 역할을 맡아 기술 방향, 코드 리뷰, 멘토링을 이끌었습니다. AI 캐릭터 챗은 프론트엔드 리드로 대화 화면과 스트리밍 상태를 설계·구현하며 출시를 준비하고, Vuddy 커머스와 브라우저 에이전트 기반 CS/QA 자동화도 만들었습니다. 전사가 AI를 업무에 제대로 쓰도록 사내 발표 'AI Agent Study 101'을 기획·진행했습니다.
React
Next.js
TypeScript
TanStack Query
Zustand
SSE
Playwright
Sentry
Mixpanel
ChannelTalk
PageAgent
Generative UI
AI 캐릭터 챗 서비스
2026.05 – 현재
한국어·일본어·영어로 출시를 준비하는 AI 캐릭터 챗의 프론트엔드를 리드했습니다. 채팅, 스토리 상세, 1:1 문의를 맡았고 캐릭터 콘텐츠를 작성·심사하는 Admin도 함께 만들었습니다.
- 대화 런타임을 8개 상태(전송·저장·스트리밍·완료·전송 실패·스트림 실패·차단 등)의 상태 머신으로 설계. 서버 상태는 TanStack Query, 실행 중 상태는 Zustand로 나누고 토큰 델타는 Query 캐시에 넣지 않음
- DONE 이벤트 전까지 턴을 임시 상태로 두고, 실패 5종(금칙어·네트워크·엔진 타임아웃·내부 오류·안전 필터)과 DONE 없이 닫힌 스트림을 실패로 처리해 임시 메시지는 롤백하고 입력 초안은 보존
- single-flight로 중복 전송·재생성을 막고, 요청 순번으로 오래된 재조회를 취소하며 스트리밍 중에는 서버 스냅샷이 응답을 덮지 않게 처리. 런타임 훅과 리듀서를 55개 테스트로 검증
- Figma 정책 25개에서 QA 시나리오 61개를 도출하고, 그중 10개를 시나리오 ID로 연결한 Playwright E2E로 자동화
- FE 스펙 10종과 ADR 23건을 직접 작성해 설계 결정을 문서화하고, Swagger 기반 SDK 생성 과정에서 응답 타입 누락 11건 등 API 계약 공백을 찾아 정리
- 스토리·로어북·검색 키워드 등 캐릭터 콘텐츠의 작성·심사 Admin 구현
PageAgent 기반 내부 운영 자동화
2026.03 – 현재
개발자·기획자·운영진이 비동기로 확인해야 해서 빠르면 10분, 길면 반나절, 담당자가 휴가면 복귀 후에야 끝나던 CS/QA 확인을 브라우저 에이전트로 약 1분에 끝나게 했습니다. 운영 3명, QA 2명, 기획 3명이 사용했습니다.
- Vuddy 핵심 기능의 sanity 체크리스트 80개 케이스와 화면별 머신 스펙 19종을 에이전트로 실행. data-qa selector를 결정적 도구로 검사해 판정 근거로 삼고, 최종 PASS/FAIL은 사람이 확인
- Google Play 인앱 결제에서 돈은 빠져나갔지만 앱이 서버에 완료를 알리지 못해 실패로 남은 건을 운영진이 확인하는 흐름을 자동화
- 계정·결제·매핑 정보를 여러 내부 도구에서 모아 한 화면에서 비교하고, LLM 요약과 실제 실행 근거를 분리해 운영자가 출처를 다시 확인할 수 있게 구성
- Alibaba PageAgent를 포크해 Chrome 확장으로 만들고 Chrome Enterprise 정책으로 사내 배포. 로그인 방식·계정 선택처럼 사람이 정해야 하는 지점에서는 에이전트를 멈추고 묻는 흐름 구현
2025.07 – 현재
Vuddy의 소비자 웹, Creator Studio, 내부 Admin을 구현하고 운영했습니다. 클래스 탐색과 결제부터 주문, 취소·반품·교환까지 커머스 흐름을 맡았습니다.
- Admin에 생성형 UI 기반 AI 대시보드 구현. 자연어 요청을 Zod 스키마로 검증한 쿼리 계획으로 바꾸고, LLM이 고를 수 있는 값은 차단 목록 대신 API 타입에서 파생한 허용 목록(enum)으로 제한
- 클래스 탐색·영상·결제, Studio 주문 관리, Admin 상품·수강생·이용권 관리 구현
- 장바구니, 본인인증, 2차 창작자 신청과 취소·반품·교환 정책 변경 반영
- HLS 홈 캐러셀과 모바일 WebView의 safe area·스크롤·뒤로가기 문제 개선
React
Next.js
TypeScript
TanStack Query
Zustand
SSE
Playwright
Sentry
Mixpanel
ChannelTalk
PageAgent
Generative UI
리디주식회사
Frontend Engineer
2022.05 – 2025.07
프론트엔드 8명 팀의 팀원으로 서버 주도 UI와 점진적 마이그레이션을 맡아, 운영 UI 변경과 A/B 테스트를 배포 주기와 분리했습니다. 채용 면접에도 참여했습니다.
Next.js
React
TypeScript
Emotion
Jest
PHP
Twig
Sentry
Virtualization
2022.05 – 2025.07
장르홈·작품홈 같은 핵심 페이지를 서버 주도 UI와 아일랜드 아키텍처로 React에 점진 이전했습니다. 배포가 필요해 약 1주 걸리던 UI 변경과 A/B 테스트를 운영 설정만으로 당일 반영하게 했습니다.
- GraphQL Grid/Cell 인터페이스로 UI 구성과 비즈니스 데이터를 분리하고 클라이언트에서 트리를 재구성
- 기존 클라이언트의 호환성을 유지하며 스키마를 확장하고 랜딩·검색·상세 화면에 재사용
- PHP/Twig 페이지에 React를 부분적으로 도입해 전면 재작성 없이 점진 이전
- Redis로 UI 응답을 캐싱하고 서버 주도 구성으로 운영 UI 변경·실험과 프론트엔드 배포의 결합을 완화
- 마케팅 랜딩·검색·작품 상세로 적용 범위를 넓히고, 부분 전환에서 드러난 middleware 병목을 근거로 전체 전환 방향을 정리
대규모 리스트 렌더링 최적화
2022.05 – 2025.07
250개 작품을 전제로 만든 화면이 6,000개 이상을 다루며 초기 렌더링에 10초 이상 걸렸습니다. 병목을 분석해 가상화·동적 높이 처리·스크롤 복원으로 구조를 바꿔 체감 지연 없이 그려지게 했습니다.
- 네트워크 전송과 CPU·DOM 렌더링 비용을 나눠 분석하고 화면에 필요한 범위만 렌더링하는 가상화 적용. 큰 JSON 응답은 gzip으로 전송 크기를 약 1/8로 줄일 수 있음을 확인
- window 스크롤 기반 탐색에서 동적 높이와 스크롤 위치 복원을 함께 처리
- SVG 배경 기반 skeleton으로 로딩 표현과 콘텐츠 렌더링의 책임을 분리
사용자 환경 안정화
2022.05 – 2025.07
브라우저, 디바이스, 확장 프로그램 차이로 생기는 사용자 환경의 불안정성을 줄이고 운영 대응력을 높였습니다.
- 실제 사용자 오류를 Sentry로 추적
- 번역 플러그인 등 외부 extension 충돌 대응
- E-ink 렌더링과 UX 이슈 개선
Next.js
React
TypeScript
Emotion
Jest
PHP
Twig
Sentry
Virtualization
티맥스엔터프라이즈
Researcher
2020.02 – 2022.05
現 티맥스비즈에이아이
舊 티맥스데이터
6명 팀에서 비전문가도 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 흐름을 시각화하고, 예측값·규칙 경로·변수 기여도를 함께 보여주는 예측 설명 UI를 제품화
- AutoML 엔진과 모델 개발자 간 인터페이스 연구
- 초기 제품의 요구사항과 구조 구체화
React
TypeScript
Material-UI
Sass
Python
jQuery
Open Source
Author
2026.05 – 현재
지속형 AI 캐릭터들이 기억과 관계를 쌓으며 서로, 그리고 사용자와 상호작용하는 소셜 시뮬레이션 런타임을 Elixir로 만들고 있습니다. 상태·기억·관계 변화는 검사하고 테스트할 수 있는 결정적 규칙이 맡고, LLM은 결과를 자연어로 표현하는 계층으로만 둡니다. v0.1.0 알파를 공개했습니다.
Elixir
OTP
LLM
설계
- LLM이 사실을 매번 즉흥적으로 만들지 않도록 캐릭터·관계·기억·예약 행동의 상태를 런타임이 소유하고, 이벤트 → 규칙 평가 → 상태 갱신 → 구조화된 출력으로 흐르게 설계
- LLM 호출은 호스트 앱이 출력을 자연어로 렌더링할 때만 선택적으로 수행. 호출이 실패해도 상태는 진행되고, LLM 응답이 세계에 영향을 주려면 새 이벤트로 규칙을 다시 통과하도록 경계를 설정
- 프로세스 없는 결정적 코어로 슈퍼비전 트리 없이 테스트할 수 있게 하고, GenServer 런타임 서버와 time_tick 스케줄러를 얇은 OTP 계층으로 추가. JSON 영속화와 분기 시나리오·인터랙티브 CLI 데모 포함
Elixir
OTP
LLM
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
Contributor
2026.09 – 현재
LLM 관측·평가 플랫폼 Langfuse에 React·TypeScript 기반 프론트엔드 수정으로 기여를 시작했습니다. Tracing 검색창의 한글 입력 버그를 재현하고 수정 PR을 제출했으며, 현재 리뷰 대기 중입니다.
React
TypeScript
Vitest
Playwright
Tracing 검색창 한글 입력
- 한글 IME 조합 중 브라우저가 변경한 contenteditable DOM과 React 토큰 렌더링이 어긋나 글자가 중복되고 삭제되지 않는 문제를 수정. 조합 완료 시 DOM을 다시 동기화하고 커서 위치를 보존 (#17628, 리뷰 대기)
- 회귀 테스트 5개를 추가하고 실제 로컬 앱에서 Chromium 조합 입력·삭제·전체 선택 교체·필터 보존을 검증. 수정 전후 화면과 재현 절차를 PR에 첨부
React
TypeScript
Vitest
Playwright
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 프로토콜, 화면 녹화, 로그 데이터로 사용자 분석 패턴 분류
- 차트 수와 과제 점수 간 양의 상관관계 관찰