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로이드케이AI 플랫폼 개발팀

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 플랫폼 · 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 에이전트 플랫폼

로이드케이 — 프론트엔드 / 플랫폼 아키텍처 설계 참여

·사용자 PC에서 직접 동작하는 브라우저·로컬 에이전트 기반 AI 에이전트 플랫폼 아키텍처 설계·구현 참여
·BFF 패턴 + HttpOnly 쿠키 인증으로 토큰을 노출하지 않는 보안 구조 확립 (게이트웨이가 BFF 역할 흡수, 프론트 코드 무변경)
·WebSocket 양방향 RPC로 서버→클라이언트 도구 호출 위임, SSE로 실시간 알림 채널 분리 설계
·MAF DevUI 기반 임시 프론트엔드를 새 Next.js 아키텍처·컨벤션으로 점진적 재작성·이관
·File System Access API 기반 브라우저 워크스페이스 접근(인바운드 포트 개방 0) 설계 및 문서화
·역할 기반 접근 제어(RBAC) 설계·구현 — 권한 기반 API 접근 제어(default-deny)·감사 로그·역할/권한 관리 어드민 UI
·OAuth 연동·외부 도구(MCP) 통합 및 자격증명 관리 기능 개발 (백엔드 게이트웨이 포함)

Next.js / TypeScript / Python (Gateway) / WebSocket / SSE / File System Access API / Podman / PostgreSQLLive Demo →

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

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

·스마트 뉴스 — AI 보도자료 작성·첨삭, 부정보도 모니터링, SNS 댓글 분석 기능 구현
·회의록 자동화(STT·자막) · 리포트 생성 · 대시보드 데이터 시각화 화면 구현
·TipTap 리치 텍스트 에디터 기반 문서 작성 인터페이스 구축

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

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

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

·글로벌·부서·검색·AI 등 역할별 관리자 화면 및 권한 분리 구현
·Tanstack Query·Zustand로 서버·클라이언트 상태를 관리해 복잡한 관리자 화면의 데이터 흐름 단순화
·TypeScript 제네릭 기반 공통 테이블 컴포넌트를 설계해 17개 관리 화면에서 재사용 — 렌더 프롭·필터 주입·서버 페이지네이션 모드 지원

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

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

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

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

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로.