한국어English

<김기환 / >

Summary

프론트엔드 엔지니어로 7년째 일하고 있습니다.

실무를 시작하기 전에는 대학원에서 HCI와 Visual Analytics를 연구하며, 복잡한 정보와 시스템을 사용자가 이해하기 쉬운 화면으로 옮기는 문제를 다뤘습니다. 실무에서는 AutoML과 설명 가능한 AI(XAI), 데이터 시각화, 콘텐츠 플랫폼, 서버 주도 UI, 내부 운영 자동화에서도 같은 문제를 이어왔습니다.

최근에는 AI를 활용해 사람이 더 적은 노력으로 더 나은 판단을 할 수 있게 만드는 문제에 관심이 있습니다. GitHub 중심 협업, 브라우저 자동화, 실행 가능한 프로토타입을 통해 여러 도구에 흩어진 정보와 근거를 더 쉽게 다루는 방식을 실험하고 있습니다.

https://kihwan.kimjuljin1875@gmail.comLinkedInGitHub

Themes

Human-System Interaction

석사 때 HCI와 Visual Analytics를 연구했습니다. 모델이 내놓은 답을 사람이 화면에서 따져볼 수 있게 만드는 일입니다.

Understandable AI Systems

AutoML 제품의 예측 설명 UI를 만들었습니다. 숫자만 던져주면 비전문가는 그 값을 쓸지 말지 판단할 수 없어서, 왜 그렇게 나왔는지를 함께 보여줬습니다.

Product Experimentation Infrastructure

화면을 고치거나 A/B 테스트를 돌리는 데 배포를 기다리지 않게 했습니다. 서버 주도 UI로 옮겼고, 기존 화면은 한 번에 갈아엎지 않고 점진적으로 넘겼습니다.

AI-Native Development Workflow

아이디어는 글로 설명하기보다 눌러볼 수 있는 화면으로 보여주는 게 빠릅니다. 에이전트와 같이 만들면 그 사이가 하루 이틀로 줄어듭니다.

Collaboration and Operations Tooling

이슈, PR, 로그, 대화가 저마다 다른 화면에 갇혀 있어서 그 사이를 잇는 건 사람 몫이 됩니다. 그 몫을 GitHub 워크플로와 사내 도구 연동, 브라우저 자동화로 옮겼습니다.

Experience

Levvels
프론트엔드 엔지니어
2025.07 – 현재

AI-Native 제품 개발과 내부 운영 자동화를 실험하고 있습니다. GitHub 중심 협업과 동작하는 프로토타입으로 제품 변경안을 빠르게 확인하고, 브라우저 자동화로 반복적인 CS/QA 확인을 줄입니다.

React
Next.js
TypeScript
TanStack Query
Zustand
SSE
Playwright
Sentry
Mixpanel
ChannelTalk
PageAgent
Generative UI
AI 캐릭터 챗 서비스
2026.05 – 현재
AI 캐릭터와 대화하며 이야기를 이어가는 서비스와 캐릭터 콘텐츠를 작성·심사하는 Admin을 만들고 있고, 출시를 준비 중입니다.
  • 진행 중인 스트리밍 응답과 저장된 대화를 분리하고 전송·완료·실패·재생성 상태 구현
  • 스토리·로어북·검색 키워드 등 캐릭터 콘텐츠의 작성·심사 화면 구현
  • 기획 문서, Figma, Swagger에서 다르게 정의된 부분을 정리하고 구현 기준과 QA 시나리오 작성
Vuddy 커머스
2025.07 – 현재
Vuddy의 소비자 웹, Creator Studio, 내부 Admin을 구현하고 운영했습니다. 클래스 탐색과 결제부터 주문, 취소·반품·교환까지 커머스 흐름을 맡았습니다.
  • 클래스 탐색·영상·결제, Studio 주문 관리, Admin 상품·수강생·이용권 관리 구현
  • 장바구니, 본인인증, 2차 창작자 신청과 취소·반품·교환 정책 변경 반영
  • HLS 홈 캐러셀과 모바일 WebView의 safe area·스크롤·뒤로가기 문제 개선
PageAgent 기반 내부 운영 자동화
2026.03 – 현재
CS/QA 담당자가 여러 내부 도구를 오가며 확인하던 일을 브라우저 자동화로 줄였습니다. 자연어 요청을 실행 절차로 바꾸고, 결과와 근거를 한 화면에 정리했습니다.
  • 계정, 결제, 매핑 정보를 여러 내부 도구에서 모아 한 화면에서 비교할 수 있게 구성
  • Chrome Managed Profile 환경에 맞게 Alibaba PageAgent를 확장하고 탭 이동, 클릭, 입력 등 화면 조작을 자동화
  • LLM 응답과 실제 실행 절차를 분리해 같은 요청을 다시 확인할 수 있게 구성
  • CS/QA의 반복적인 테이블 조회와 교차 확인을 자동화
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 테스트를 더 빠르게 실행했습니다.
  • 서버 주도 UI를 클라이언트에서 해석해 화면 변경과 배포 주기 분리
  • PHP 페이지를 React 구조로 점진적으로 이전해 마이그레이션 위험 완화
  • A/B 테스트와 운영 UI 변경을 더 유연하게 실행
  • 모바일, 데스크탑, 특수 디바이스 환경 안정성 유지
대규모 리스트 렌더링 최적화
2022.05 – 2025.07
대량 콘텐츠 탐색에서 렌더링 병목이 사용자 경험을 해치지 않도록 리스트 구조와 로딩 경험을 개선했습니다.
  • 대량 DOM 렌더링의 프레임 드랍 분석
  • windowing으로 화면 영역만 렌더링
  • 스크롤 위치와 동적 높이 처리
  • skeleton UI로 초기 로딩 경험 개선
사용자 환경 안정화
2022.05 – 2025.07
브라우저, 디바이스, 확장 프로그램 차이로 생기는 사용자 환경의 불안정성을 줄이고 운영 대응력을 높였습니다.
  • 실제 사용자 오류를 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 개발 스튜디오 구현
  • 예측 근거 시각화와 대시보드 개발
  • AutoML 엔진과 모델 개발자 간 인터페이스 연구
  • 초기 제품의 요구사항과 구조 구체화
React
TypeScript
Material-UI
Sass
Python
jQuery

Open Source

OpenMMO
Contributor
2026.07 – 현재

AI 에이전트와 사람이 같은 프로토콜로 플레이하는 오픈소스 MMORPG(Rust · Svelte · Three.js · WebAssembly)에 기여하고 있습니다. 게임 개발은 처음이었고, 클라이언트 테스트로 시작해 지금은 Rust 서버 쪽을 주로 봅니다. 올린 PR 8건은 모두 병합됐습니다.

TypeScript
Svelte
Rust
WebAssembly
Vitest
클라이언트
  • 반대하던 메인테이너를 설계 제안서로 설득해 HUD 미니맵 구현, 서버는 고치지 않고 이미 있던 지형 타일과 회전 규약을 그대로 사용. 위치를 계속 물어봐야 하는 파티원 마커는 리뷰를 받아 v1에서 제외하고, 그 과정에서 찾은 상태 갱신 누락은 원인 쪽에서 수정 (#11, #77)
  • 낚시 상태 전이와 수면 높이 샘플링, 클릭 인텐트 분기의 테스트 공백 보완. 사거리 밖의 물 클릭은 이동으로 바꾸고 사거리 값을 WebAssembly로 노출해 서버와 클라이언트가 같은 값을 참조, 세션이 끊길 때 뒤늦게 울리던 예약 사운드도 취소 (#56, #64, #65)
서버
  • 지형 타일 캐시가 쌓이기만 하고 줄지 않아 세대 단위로 쓸어내고 용량 상한 적용, 읽기 경로는 락 없이 그대로 유지 (#68)
  • 운영자용 계정 밴/해제 구현, 캐릭터가 아닌 계정으로 끊어 부캐 재접속을 막고 검사를 지난 접속이 그대로 들어오는 틈은 기존 세션 락으로 차단 (#95)
  • 밤에는 상인이 자서 마을에 거래처가 없어, 어두워지면 좌판을 여는 야간 상인을 추가. 상인 정의가 두 파일에 나뉘어 있어 한쪽만 넣으면 띄울 수 없는 상점이 생기므로 그 불일치를 잡는 테스트를 함께 작성 (#111)
문서·온보딩
  • 지형을 굽기 전에는 화면이 까맣게 나오는 온보딩 공백을 직접 겪고 개발 셋업 문서에 반영 (#78)
TypeScript
Svelte
Rust
WebAssembly
Vitest

Education

울산과학기술원 (UNIST)
컴퓨터공학 석사
2018.03 – 2020.02
기술경영학 학사 (컴퓨터공학 융합전공)
2013.03 – 2018.02
AI 기반 UI와 추천 시스템 연구
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 프로토콜, 화면 녹화, 로그 데이터로 사용자 분석 패턴 분류
  • 차트 수와 과제 점수 간 양의 상관관계 관찰

시각화 기반 딥러닝 분석 기술

이재성, 김기환, 이충기, 고성안

소음진동 제27권 제6호 2017.11

  • 딥러닝 모델을 해석하기 위한 시각화 기법 정리 및 조사