본문으로 바로가기

문제를 발견하고,
흐름을 만들고,
운영을 지키는
엔지니어 김현호입니다.

포트폴리오 PDF로 다운로드하기
  1. 01문제를 이해하고
  2. 02제품으로 구현하고
  3. 03운영에서 검증하고
  4. 04다시 개선합니다

Occount

학교 매점의 주문·결제를
완전 무인으로

키오스크 주문·결제부터 VAN 연동, 기기 운영과 장애 대응까지 직접 연결했습니다.

역할
프론트엔드 · 결제 흐름 구현
팀
5명
운영
약 6개월 실제 운영
기술
Spring Boot · MSA · Kafka · SSE

01

실제 화면이
운영을 증명합니다.

학생 인증부터 카드 결제, 키오스크 앱 배포와 기기 상태 확인까지 하나의 운영 흐름으로 구성했습니다.

Occount 키오스크 주문·결제 화면
키오스크 주문·결제 화면
Occount 키오스크 기기 관리 화면
Headwind MDM 기반 기기 관리 화면

02

매점을 완전 무인으로 전환해
운영의 초점을 바꿨습니다.

기존 운영학생→주문 확인→부원 개입→결제 처리
현재 운영학생→키오스크→Smartro 단말→결제 완료

03

연속 스캔에서 발생한 중복 요청을
상태 기반 제어로 막았습니다.

문제연속 스캔 시 동일 상품 API 요청 반복
판단네트워크 로그에서 입력 이벤트 반복 확인
구현최근 요청 값과 진행 상태로 중복 입력 차단
결과불필요한 호출과 중복 상품 등록 방지
if (lastBarcode === barcode || requestInFlight) {
  return;
}

lastBarcode = barcode;
requestInFlight = true;
await requestProduct(barcode);

배운 점외부 결제 서비스 연동에서는 기능뿐 아니라 예외 상태와 중복 입력을 함께 설계해야 제품의 안정성을 지킬 수 있습니다.

BUSAN MATHEMATICAL CULTURE CENTER · EXHIBITION

Media
Art

부산수학문화관을 위한
인터랙티브 전시물

카메라가 본 몸을 숫자와 빛으로

부산수학문화관 전시물 제작 프로젝트로, 웹캠으로 포착한 사람의 실루엣을 AI와 픽셀 연산으로 해석해 관객이 직접 바꿔보는 경험으로 만들었습니다.

역할
기획 · 인터랙션 · 렌더링 구현
형태
Electron 기반 설치 작품
입력
웹캠 영상 · 사용자 조작
기술
JavaScript · Canvas · MediaPipe · GitHub Actions
프로젝트 저장소 보기

01

컴퓨터가 보는
내 모습

카메라가 인식한 사람 영역만 남기고, 픽셀의 밝기 데이터를 서로 다른 규칙으로 변환합니다. 관객은 같은 움직임이 숫자와 형태로 달라지는 과정을 바로 확인할 수 있습니다.

사람의 실루엣이 0과 1 문자로 표현되고 오른쪽에서 미디어 아트 모드를 선택하는 화면
Binary mode실시간 실루엣과 선택한 변환 모드를 한 화면에 보여주는 실제 작업 화면

02

움직임이 데이터가 되고,
데이터가 다시 장면이 됩니다.

복잡한 영상을 그대로 보여주는 대신, 인식·계산·표현의 단계를 분리해 관객이 이미지 처리의 원리를 읽을 수 있도록 구성했습니다.

01 / INPUTCamera

웹캠에서 실시간 프레임을 받습니다.

02 / MASKPerson Segmentation

AI가 사람과 배경을 픽셀 단위로 나눕니다.

03 / MATHLuminance

L = 0.299R + 0.587G + 0.114B로 밝기를 계산합니다.

04 / OUTPUTMedia Art

밝기값을 0·1, 흑백, 숫자 패턴으로 바꿉니다.

03

같은 몸,
네 가지 해석

모드를 바꾸면 픽셀을 읽는 규칙이 바뀝니다. 결과를 선택하는 경험 자체가 이미지 처리 실험이 되도록 설계했습니다.

01

원본

Cyberpunk silhouette

사이안 글로우와 0·1 표현으로 미래적인 분위기를 만듭니다.

02

흑백

Minimal silhouette

텍스트를 걷어내고 사람의 윤곽만 선명하게 남깁니다.

03

바이너리

0 / 1 matrix

밝기 기준으로 각 지점을 0 또는 1로 양자화합니다.

04

숫자

0 — 9 grayscale

밝기를 10단계로 나누어 숫자의 밀도로 표현합니다.

04

업데이트가 필요한 순간에도
전시를 멈추지 않도록.

GitHub Release에 새 버전을 올리면 설치된 Windows 앱이 업데이트를 확인하고, 앱 안에서 다운로드 상태와 재시작 시점을 안내합니다.

감지
패키징된 Windows 앱이 실행 5초 후 새 릴리즈 확인
안내
다운로드 중 · 다운로드 완료 상태를 전시 화면에 표시
적용
‘지금 재시작’ 선택 시 업데이트 설치 후 앱 재실행
릴리즈 저장소 보기
Busan Mathematical Culture Center Media Art Windows 앱 릴리즈와 설치 파일이 GitHub Releases에 게시된 화면
GitHub Releasesv1.0.2 Windows 설치 파일과 릴리즈 자산이 자동으로 게시된 실제 화면
태그 push v1.0.2Windows installer buildGitHub Releases publish앱 내 다운로드 · 재시작

05

전시장에서 계속 반응하도록
렌더링 구조를 다듬었습니다.

실시간성렌더링과 AI 추론 주기를 분리

화면은 30fps를 목표로 갱신하고, 사람 인식은 12fps로 조절해 반응성과 계산량의 균형을 맞췄습니다.

조작 경험Q12 레이더 센서 제어를 고려한 UI

인터랙티브 레이더 센서를 통한 제어를 전제로 모드 선택 흐름을 설계했습니다.

전시 환경카메라와 화면을 한 기기 안에서 처리

외부 서버에 영상을 보내지 않고 로컬에서 인식과 Canvas 렌더링을 수행하도록 구성했습니다.

작품으로 배운 점인터랙티브한 결과는 시각 효과만으로 완성되지 않습니다. 입력을 안정적으로 받고, 계산 단계를 설명하며, 관객의 선택이 지연 없이 결과에 닿도록 전체 흐름을 설계해야 합니다.

PERSONAL INFRASTRUCTURE

Home
Server

서비스를 직접 배포하고
운영하는 나만의 인프라

개발한 서비스가 실제로 동작하는 환경까지 이해하기 위해 가상화, 네트워크, 스토리지를 직접 설계하고 운영했습니다.

유형
개인 인프라 프로젝트
기간
2025.12 — 진행 중
구성
가상화 · 라우팅 · 스토리지
기술
Proxmox · Docker · Nginx Proxy Manager · TrueNAS

01

코드 밖의 운영 환경까지
직접 구축했습니다.

하나의 물리 서버 위에 서비스별 실행 환경을 분리하고, 외부 요청과 데이터 저장 흐름을 연결했습니다.

여러 VM과 LXC 컨테이너가 실행 중인 Proxmox 대시보드
가상화Proxmox에서 VM과 LXC 워크로드를 분리해 관리
도메인별 서비스를 라우팅하는 Nginx Proxy Manager 화면
라우팅Nginx Proxy Manager로 도메인별 요청을 각 서비스에 전달
SMB 공유가 구성된 TrueNAS 관리 화면
스토리지TrueNAS 공유 스토리지로 데이터를 별도 관리

02

한 대의 서버를
여러 서비스의 운영 기반으로.

공인 IP로 들어온 요청을 Reverse Proxy에서 판별하고, Proxmox 내부의 독립된 실행 환경으로 전달하도록 구성했습니다.

ENTRYInternet외부 사용자 요청
NETWORKRouter포트 포워딩
ROUTINGReverse Proxy도메인별 분기 · SSL
PROXMOX HOSTIsolated ServicesVM · LXC · Docker
  • 01서비스 간 영향 범위 축소

    실행 환경을 분리해 배포와 재시작을 독립적으로 수행했습니다.

  • 02하나의 진입점으로 통합

    여러 도메인의 요청을 한 서버에서 목적지에 맞게 분기했습니다.

  • 03운영 영역까지 확장

    컴퓨팅, 네트워크, 저장소의 연결 구조를 직접 다뤘습니다.

03

접속 실패를 요청 경로를 따라
단계별로 추적했습니다.

증상내부에서는 열리지만 외부에서는 서비스 접속 불가
분석공인망부터 컨테이너까지 요청이 지나는 구간을 분리해 확인
조치포트 포워딩과 Reverse Proxy 목적지를 다시 구성
결과도메인으로 여러 서비스에 접근할 수 있는 운영 환경 완성

배운 점서비스 운영에서는 애플리케이션 코드뿐 아니라 요청이 서버에 도달하고 데이터가 보존되는 전체 경로를 함께 이해해야 합니다.

G-STAR 2025 · AI VISUAL NOVEL

while

선택과 감정에 반응하는
나만의 연애 시뮬레이션

고정된 대본을 따라가는 대신, 플레이어의 선택·표정·취향을 바탕으로 다음 장면을 만드는 AI 미연시를 구현했습니다.

역할
프론트엔드 · API v2 마이그레이션 · 안정성 개선
형태
G-STAR 2025 시연 프로젝트
경험
선택 · 감정 · 플레이 시간에 따라 달라지는 진행
기술
React · TypeScript · FastAPI · Gemini · face-api.js
GitHub 조직 열기

01

플레이어가 남긴 반응이
다음 장면의 재료가 됩니다.

성격과 장르를 고르는 시작 단계부터 대화의 선택지, 웹캠으로 읽은 감정 상태까지 게임의 진행 데이터로 연결했습니다.

세 명의 캐릭터와 시작 화면이 있는 While 게임의 메인 이미지
START선택한 성격과 장르를 바탕으로 새로운 게임을 시작
캐릭터 대화와 선택지가 표시되고 현재 감정 상태가 보이는 While 게임 화면
PLAY대화와 선택, 감정 상태를 한 장면 안에서 확인하는 실제 플레이 화면

02

한 번의 선택이 끝이 아니라,
다음 장면을 만드는 입력이 되도록.

게임 생성부터 장면 진행까지 API v2 흐름으로 정리해, 프론트엔드가 현재 장면·선택·감정 데이터와 플레이 시간을 일관되게 전달하도록 구성했습니다.

01 / SETUP취향 설정

성격, 장르, 플레이 시간을 받아 게임과 첫 세션을 만듭니다.

02 / PLAY장면 진행

대화 또는 선택 장면에 맞춰 다음 요청을 보냅니다.

03 / SIGNAL감정 · 시간

웹캠 감정 값과 일시정지를 제외한 경과 시간을 함께 기록합니다.

04 / STORY다음 장면

AI가 상황과 인물을 유지한 새 장면·배경을 반환합니다.

03

시연에서 끊기지 않도록,
흐름과 예외를 함께 다듬었습니다.

UI를 구현하는 데서 끝나지 않고 인증, 이미지 생성, 시연 환경처럼 실제 체험을 멈출 수 있는 지점들을 정리했습니다.

인증
인증 페이지·보호된 라우트와 토큰 갱신 흐름 구현
진행
엔터·스페이스 입력으로 대화 진행, 데모 타이머 조정
안정성
리프레시 토큰 동시성 문제와 배경 이미지 재생성 비용 개선
게임 생성 API v2 요청과 장면 데이터를 확인하는 테스트 화면
API V2취향 설정으로 게임을 생성하고 세션·장면 데이터를 받는 API 흐름 검증
감정 인식표정을 장면 진행 데이터로

face-api.js 기반 훅과 상태 위젯으로 현재 인식값을 플레이 중에도 확인할 수 있게 했습니다.

캐릭터 일관성주요 인물과 이미지 연결 유지

장면 응답에 캐릭터 이미지 정보를 포함하고, 게임별 주요 캐릭터 선택 흐름을 보완했습니다.

데모 운영짧은 체험 시간에 맞춘 진행

시연 타이머와 설문, QR 진입 흐름을 조정해 현장 체험을 준비했습니다.

2026.09 — 2026.10

개인 프로젝트

Lab

오픈 소스에 기능을 더하고, 읽는 도구와 학습 교안을 직접 만들고 있습니다.

  1. 01

    오픈 소스 기여

    PokeTokenBar, prompt-engineering-is-game의 기능 추가 및 UX 개선

    AI 커넥터 추가, 최신 정보 반영, 분석 버튼 UX 개선
    PokeTokenBar prompt-engineering-is-game
  2. 02

    exkore

    영문 개발 문서 읽기 보조를 해주는 크롬 익스텐션

    개발 중
  3. 03

    hanja-radicals-214

    효과적인 부수자 학습을 위한 웹 교안 제작

    교안 보기 저장소