Human-System Interaction
HCI와 Visual Analytics 연구를 통해 복잡한 정보, 도구, AI 모델의 결과를 화면에서 이해할 수 있게 만드는 방법을 다뤘습니다.
<김기환 / >
Summary
프론트엔드 엔지니어로 7년째 일하고 있습니다.
실무를 시작하기 전에는 대학원에서 HCI와 Visual Analytics를 연구하며, 복잡한 정보와 시스템을 사용자가 이해하기 쉬운 화면으로 옮기는 문제를 다뤘습니다. 실무에서는 AutoML과 설명 가능한 AI(XAI), 데이터 시각화, 콘텐츠 플랫폼, 서버 주도 UI, 내부 운영 자동화에서도 같은 문제를 이어왔습니다.
최근에는 AI를 활용해 사람이 더 적은 노력으로 더 나은 판단을 할 수 있게 만드는 문제에 관심이 있습니다. GitHub 중심 협업, 브라우저 자동화, 실행 가능한 프로토타입을 통해 여러 도구에 흩어진 정보와 근거를 더 쉽게 다루는 방식을 실험하고 있습니다.
https://kihwan.kimjuljin1875@gmail.comLinkedInGitHubThemes
Understandable AI Systems
AutoML 작업에서는 비전문가도 예측값과 근거를 함께 확인하고 판단할 수 있는 예측 설명 UI를 구현했습니다.
Product Experimentation Infrastructure
서버 주도 UI와 점진적 마이그레이션으로 UI 변경과 A/B 테스트를 배포 주기와 분리했습니다.
AI-Native Development Workflow
AI 에이전트로 동작하는 프로토타입을 만들고, 아이디어를 제품 화면에 가까운 형태로 빠르게 확인하는 방식을 실험합니다.
Collaboration and Operations Tooling
GitHub 중심 협업, 내부 도구 연결, 브라우저 자동화로 여러 시스템을 오가며 확인하던 일을 줄입니다.
Experience
Levvels
프론트엔드 엔지니어
2025.07–현재
AI-Native 제품 개발과 내부 운영 자동화를 실험하고 있습니다. GitHub 중심 협업과 동작하는 프로토타입으로 제품 변경안을 빠르게 확인하고, 브라우저 자동화로 반복적인 CS/QA 확인을 줄입니다.
React
Next.js
TypeScript
Browser Agent
Generative UI
LLM Prompt Engineering
Amplitude
ChannelTalk
PageAgent 기반 내부 운영 자동화
2026.03–현재
CS/QA 담당자가 여러 내부 도구를 오가며 확인하던 일을 브라우저 자동화로 줄였습니다. 자연어 요청을 실행 절차로 바꾸고, 결과와 근거를 한 화면에 정리했습니다.
- 계정, 결제, 매핑 정보를 여러 내부 도구에서 모아 한 화면에서 비교할 수 있게 구성
- Chrome Managed Profile 환경에 맞게 Alibaba PageAgent를 확장하고 탭 이동, 클릭, 입력 등 화면 조작을 자동화
- LLM 응답과 실제 실행 절차를 분리해 같은 요청을 다시 확인할 수 있게 구성
- CS/QA의 반복적인 테이블 조회와 교차 확인을 자동화
Vuddy 커머스 프론트엔드
2025.07–현재
상품 탐색, 장바구니, 인증 등 커머스 핵심 기능을 개선했습니다. 분석 도구로 사용자 행동과 운영 이슈를 확인하고, 디자인 시스템 기반 패턴으로 반복 구현을 줄였습니다.
- 장바구니와 인증 시스템의 운영 이슈 추적 및 개선
- Amplitude, ChannelTalk로 사용자 행동과 운영 이슈 확인
- 반복해서 만들던 UI를 Design System 기반 공통 패턴으로 정리
React
Next.js
TypeScript
Browser Agent
Generative UI
LLM Prompt Engineering
Amplitude
ChannelTalk
리디주식회사
프론트엔드 엔지니어
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
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 프로토콜, 화면 녹화, 로그 데이터로 사용자 분석 패턴 분류
- 차트 수와 과제 점수 간 양의 상관관계 관찰