SEOUL, KOREA — UTC+9OPEN TO WORKPORTFOLIO — 2026

KIM SANG HOON — FRONTEND DEVELOPER

코드를 화면으로,
화면을 experience로.

frontend first — fluent in backend.

인천국제공항공사 생성형 AI 플랫폼, AI 에이전트 플랫폼, 교육·커머스 서비스 등 다양한 도메인에서 React · Next.js · TypeScript 기반 UI를 설계·구현해 왔습니다. BFF·WebSocket 등 플랫폼 아키텍처 설계에 참여한 경험을 바탕으로, 데이터 흐름까지 이해한 상태로 프론트엔드를 설계하고 기획 의도를 빠르게 화면으로 옮기는 데 강점이 있습니다.

프로젝트 보기 →RESUME.PDF ↓

3년프론트엔드 실무 경력공공 · AI인천공항 · AI 플랫폼Next.js주력 기술 스택

Greeting.tsx

PREVIEW

React✦Next.js✦TypeScript✦Tailwind CSS✦MUI✦Tanstack Query✦Zustand✦WebSocket✦SSE✦TipTap✦Storybook✦

BACKGROUND

2025.05로이드케이솔루션개발팀

2025.01쓰리알이노베이션개발팀

2023.09아이시프트솔루션팀

2022.03다큐브기획팀 · 인턴

PRINCIPLE

““만드는 즐거움”에서 출발해 사용자가 직접 마주하는 화면을 책임지는 3년 차 프론트엔드 개발자입니다.”

김상훈 — Frontend Developer

3Y+

프론트엔드 실무 · 공공/AI 플랫폼

DAILY STACK

ReactNextTSTWMUIZodJestSBReactNextTSTWMUIZodJestSB

RQZustWSSSEGitPodmannginxSpringRQZustWSSSEGitPodmannginxSpring

REACH ME

joseph0522@naver.com

010-2849-0602

Experience

(01)

2025.05 ~ 재직중

로이드케이

솔루션개발팀

인천국제공항공사 생성형 AI 플랫폼 · AI 에이전트 플랫폼 프론트엔드 개발, BFF·게이트웨이 아키텍처 설계 참여

2025.01 ~ 2025.04

쓰리알이노베이션

개발팀

교육용 비디오 스트리밍 플랫폼 ‘포커스팡(FocusPang)’ 프론트엔드 개발

2023.09 ~ 2024.11

아이시프트

솔루션팀

QR 테이블링 시스템 · Admin 솔루션 프론트엔드 개발 (모바일 반응형 · Storybook/Jest 도입)

2022.03 ~ 2022.07

다큐브

기획팀 · 인턴

웹 기획 및 퍼블리싱, 홈페이지 리뉴얼

Projects

(02)

+AI 에이전트 플랫폼Frontend · Architecture2025

+생성형 AI 업무 플랫폼Frontend · TipTap Editor2025

+관리자 대시보드Frontend · Data Table2025

+교육용 스트리밍 플랫폼Frontend · WebSocket2025

ALL PROJECTS

AI 에이전트 플랫폼

로이드케이 — 프론트엔드 전담 / 인증·권한 백엔드 · 인프라 일부

·게이트웨이가 BFF 역할을 흡수하는 단일 인증 구조 설계 — HttpOnly 쿠키로 토큰 비노출, 프론트 코드 무변경으로 전환
·역할 기반 접근 제어(RBAC) 설계·구현 — 경로별 권한 강제(default-deny), 다중 역할, 역할·권한 매트릭스 관리 UI, 대화 열람 사유 필수화
·보안·운영 기능 풀스택 구현 — 로그인 실패 잠금·IP 허용목록·비밀번호 정책·세션 유휴 타임아웃, append-only 감사 로그, 대화 열람 PII 3단계 마스킹
·실시간 AI 채팅 UI 고도화 — SSE 도구 호출·추론 채널 스트리밍 표시, Human-in-the-Loop 승인 카드, 응답 중 메시지 대기열, 드래그앤드롭 첨부·파서 폴백 체인
·스트리밍 성능 개선 — SSE 델타 rAF 배칭·마크다운 메모이제이션·디버그 로그 비반응형 분리로 저사양 PC 렌더 버벅임 해소
·PostgreSQL 계정 스키마 재설계 — 분리 계획서 작성 후 계정·권한·설정 원장 테이블 신설, 운영 중 4단계 점진 마이그레이션 수행
·서버 신뢰성·자원 관리 — 외부 호출 timeout/retry/circuit breaker 래퍼, 유휴 샌드박스 GC, 사용자별 동시 실행 상한, 토큰 사용량 집계 API
·OAuth·MCP·Slack 연동 — 사용자별 OAuth 자격증명, MCP Registry 검색·서버 관리, Slack Events API(멘션·DM → 에이전트 실행·승인 버튼)
·사용자 앱·관리자 앱 2개로 프론트 분리, Dockerfile·compose·Traefik 라우팅 구성, git 변경 감지 배포 스크립트, 한/영 i18n 인프라 구축
·MAF DevUI 임시 프론트를 Next.js로 점진 이관 완료 후 DevUI 빌드 제거

Next.js / TypeScript / Python (Gateway) / WebSocket / SSE / PostgreSQL / Podman · Docker / TraefikLive Demo →

인천국제공항공사(IIAC) 생성형 AI 업무 플랫폼

로이드케이 (고객사: 인천국제공항공사) — 프론트엔드 개발

·스마트 뉴스 — AI 보도자료 작성·첨삭, 부정보도 모니터링, SNS 댓글 분석·트렌드 차트 구현
·회의록 자동화 — mp4 스트리밍·VTT 자막·번역 스크립트, 리포트 생성·대시보드 시각화 화면 구현
·TipTap 리치 텍스트 에디터 기반 문서 작성 인터페이스 구축
·어시스턴트 응답 메타데이터·출처 신뢰도 임계값 파싱, 파일 업로드·다운로드 API 연동 — 착수 4주 내 UI 완성 후 API 연동

Next.js 15 (App Router) / React 19 / TypeScript / Tailwind CSS / shadcn/ui / TipTap / ZodLive Demo →

인천국제공항공사(IIAC) 관리자 대시보드

로이드케이 (고객사: 인천국제공항공사) — 프론트엔드 개발

·글로벌·부서·검색·AI 등 역할별 관리자 앱 분리, Provider 기반 페이지 접근 제한·사이드바 메뉴 제어 구현
·TypeScript 제네릭 기반 공통 테이블 컴포넌트를 설계해 17개 관리 화면에서 재사용 — 렌더 프롭·필터 주입·서버 페이지네이션 모드 지원
·Prometheus 쿼리 기반 모니터링 대시보드 — vLLM(토큰 처리량·GPU 메모리·캐시 사용률), 시스템(CPU/GPU), Elasticsearch 스택(노드·인덱스·스냅샷) 실시간 차트
·AI 채팅 프리뷰·이력 — SSE 스트리밍 타이핑, 출처 메타데이터 칩 파싱, 피드백(평점·코멘트·하이라이트), 파일 첨부, 응답 실패 시 무한 대기 버그 수정
·통합 검색 관리 — ECM·포털 소스별 검색 옵션, 하이라이트, 시맨틱 검색, CSV 내보내기, 검색 통계·응답시간 대시보드
·스케줄러(작업·대상 설정)·규정·프롬프트·부서·피드백 관리 화면 및 API 연동, 한/영 i18n, 정적 export·GitHub Actions 배포 구성

Next.js 15 / React 19 / TypeScript / MUI / Tanstack Query / ZustandLive Demo →

교육용 비디오 스트리밍 플랫폼 ‘포커스팡(FocusPang)’

쓰리알이노베이션 — 프론트엔드 개발

·AI 기반 교육용 비디오 스트리밍 플랫폼의 프론트엔드 화면 설계 및 개발
·교사용 시간표 관리·수업 추가 UI 및 실시간 강의(포커스타임) 화면 구현
·WebSocket 기반 학생 접속·상태 실시간 모니터링 UI 구현

Next.js / React / JavaScript / WebSocket / HTML5/CSS3Live Demo →

QR 테이블링 시스템 / Admin 솔루션

아이시프트 — 프론트엔드 개발

·QR 코드 기반 테이블 주문 시스템의 사용자·관리자 프론트엔드 개발 — 모바일 반응형·터치 UI 포함
·Storybook·Jest 도입 — 컴포넌트 상태를 동료와 공유·검증하며 협업 효율 향상
·Admin 솔루션 대시보드 및 관리 화면 컴포넌트 구현

React / JavaScript / Tailwind CSS / Storybook / Jest

PERSONAL & STUDY

Spring JPA 동영상 강의 홈페이지

개인/교육 프로젝트 — Front · Back-end

·회원 관리·영상 플레이어 프론트/백엔드 구현 및 전체 UI 스타일링
·가입 → 수강신청 → 수강 → 강의 평가의 전체 사용자 플로우 설계

Java / Spring Boot / Spring Security / Spring JPA / Oracle DB

Spring 기반 사내 인트라넷 (KMS)

교육 프로젝트 — Front · Back-end

·임직원 정보 관리(가입·임시PW 발급·탈퇴) 기능 구현
·게시판 CRUD, 첨부파일 업로드/다운로드, 댓글·좋아요 기능 구현

Spring Framework / MyBatis / JSP / MariaDB

Carrot Market 클론 — 중고거래 플랫폼

GitHub — Frontend · Full-stack 학습

·중고거래 플랫폼의 상품 등록·목록·상세, 프로필 등 핵심 플로우 구현
·GraphQL 연동 및 AWS Amplify 배포까지 모던 웹 스택 실습

Next.js / React / TypeScript / Tailwind CSSGitHub ↗

Netflix 클론 — 영상 콘텐츠 브라우징 UI

GitHub — Frontend 학습

·영화 목록·상세·검색 화면 및 캐러셀 중심의 콘텐츠 브라우징 UI 구현
·외부 오픈 API 연동과 반응형 레이아웃 구성 학습

React / JavaScript / 오픈 API 연동GitHub ↗

UI Showcase

(03)

실무에서 구현한 UI를 직접 조작해 볼 수 있는 인터랙티브 데모입니다. 데이터와 API 응답은 샘플·시뮬레이션입니다.

OpenWebUI를 참고해 Next.js로 직접 재구현한 AI 채팅 인터페이스 — 토큰 스트리밍 렌더링과 타이핑 애니메이션

상세 페이지 →

무엇이든 입력해 보세요 — SSE 수신 → 누적 → 타이핑 애니메이션 순서로 렌더링됩니다

Skills

(04)

Frontend

React · Next.js— 실무 주력 · App RouterTypeScript— 실무 전 프로젝트JavaScript (ES6+)— 실무 다수 프로젝트CSS · Tailwind · MUI— 반응형 · 디자인 시스템

상태관리 · 데이터

Tanstack Query (React Query)ZustandREST API

Backend · DB

Java / Spring Boot · JPA— 풀스택 구현 경험Python · Node (Gateway/BFF)WebSocket · SSEMariaDB · Oracle DB · PostgreSQL

테스트 · 문서화

JestStorybook— 사용 경험

모바일

모바일 반응형 · 터치 UIFlutter 앱 WebView 연동— 기초

AI 도구 · 협업

Cursor · Claude Code · AntigravityGit · GitHub · Jira · Slack · NotionDocker · Podman · nginx

Contact

(05)

Let’s build something together.

새로운 기회와 협업 제안을 환영합니다. 아래 채널로 편하게 연락 주세요.

joseph0522@naver.com↗

GITHUB ↗RESUME.PDF ↓TEL — 010-2849-0602

코드를 화면으로,화면을 experience로.