김하이.
FRONTENDDEVELOPER
오프라인 매장과 행사장에 놓이는 AI 포토부스와 키오스크 웹앱을 만듭니다. 화면 구현부터 생성형 이미지 파이프라인, 실결제 연동, 다국어까지 제품 한 대가 현장에서 돌아가는 데 필요한 일을 맡습니다.
2024년 6월부터 스윗앤데이터에서 롯데시네마 · 현대 · 아디다스 · PUBG · NIKKE 등 브랜드 프로젝트를 진행해 왔고, 회사 밖에서는 코딩 에디터 '심팡'을 혼자 만들고 있습니다.
화면 한 장이 아니라, 손으로 만지는 완성된 경험을 만듭니다.
안녕하세요, 프론트엔드 개발자 김하이입니다. 스윗앤데이터에서 롯데시네마 · 현대 · 아디다스 · PUBG · NIKKE 등 브랜드의 AI 포토부스와 인터랙티브 키오스크 웹 서비스를 만들어 왔습니다.
화면 구현에서 끝내지 않습니다. 생성형 이미지 파이프라인(OpenAI · Gemini · RunPod), 실결제 연동(Toss Payments · PayOS), 다국어, Supabase 백엔드까지 제품이 현장에서 도는 데 필요한 만큼 범위를 넓혀 왔고, 최근에는 자사 웹 서비스의 NestJS 백엔드와 AWS 배포 · 운영도 맡고 있습니다.
회사 일과 별개로 코딩 에디터 '심팡'과 개인 블로그를 직접 만들며 서버와 아키텍처를 계속 다루고 있습니다.
스윗앤데이터에서 맡은 브랜드 프로젝트와 자사 서비스 운영입니다.
- 01
롯데시네마 포토티켓 키오스크
2024.11 — 2025.06한국어 · 영어 · 베트남어를 지원하는 포토티켓 발권 키오스크. 프레임 · 컨셉 선택부터 PayOS 결제, 티켓 출력까지의 흐름을 맡았고 Sentry로 현장 오류를 추적했습니다.
Next.js·Supabase·PayOS·next-intl·Sentry·OpenAI - 02
NIKKE AI 포토 키오스크
2025.04 — 2025.06게임 IP 프로모션 부스에 놓인 AI 포토부스. 촬영부터 Toss 결제, QR 다운로드까지 오프라인 동선 전체를 구현했습니다.
Next.js·RunPod·Toss Payments·Supabase·JSZip - 03
현대 건설 안전 체험 AI 포토부스
2025.07 — 2025.09현대 건설 안전 체험관에 놓인 AI 포토 키오스크. 8개 국어를 지원하고, 근로자가 안전교육을 이수해야 촬영으로 넘어가도록 동선을 짰습니다.
Next.js·RunPod·hangul-js·react-simple-keyboard·next-intl - 04
Vrook · 스타필드 외 브랜드 부스
2025.06 — 2025.10오프라인 부스용 포토 · 결제 웹앱 여러 건. 결제와 압축 다운로드, 다국어를 매번 새로 만들지 않도록 재사용할 수 있는 형태로 정리해 두었습니다.
Next.js·Toss Payments·JSZip·Lottie·Jotai1인 개발 - 05
자사 웹 서비스 개발 · 운영
2026.07 — 진행 중자사 웹 4종(NestJS API · 소개 웹 · 관리자 · 포토스위트 프론트)을 유지보수합니다. 백엔드는 EC2 + pm2 + nginx 배포 스크립트와 런북을 정리해 재배포 다운타임을 3초대로 줄였고, 프론트 3종은 Amplify 자동 배포로 묶어 같은 API를 바라보게 했습니다. 서버 접근 권한도 이전 키를 회수하고 공개키 기반으로 다시 세웠습니다.
NestJS·TypeORM·PostgreSQL·Next.js·Vite·AWS EC2 · Amplify · SES·pm2 · nginx유지보수 · 운영 - 06
현대 건설 체험 부스 AI 포토
2026.072026 현대 건설 체험 부스 키오스크. 앞쪽 인물에게만 안전모가 합성되도록 생성 프롬프트를 조율했고, 대기 시간에는 생성 영상을 띄워 3초 촬영 → 리뷰 → 프린트로 이어지는 동선이 끊기지 않게 했습니다.
Next.js·Google GenAI·OpenAI·Supabase·QR - 07
AI4 2026 · AI 얼굴 분석 키오스크
2026.07웹캠으로 찍은 얼굴을 백엔드 분석 API에 넘기고, 결과 카테고리와 상세 텍스트를 프린트 캔버스에 직접 그려 출력합니다. 컨테이너 환경의 SSR을 위해 내부 · 외부 백엔드 URL을 분리하고 Docker standalone 빌드까지 붙였습니다.
Next.js·TanStack Query·Axios·Canvas·Docker - 08
Nextrise 2026 AI 포토부스
2026.06행사 부스용 AI 포토 키오스크와 프린트 전용 빌드를 함께 만들었습니다. 스타일별 생성 프롬프트를 다듬고, 방문 · 다운로드 로그를 서버 액션으로 옮겼으며 프레임 텍스트 줄바꿈까지 손봤습니다.
Next.js·Google GenAI·OpenAI·Supabase·Docker1인 개발 - 09
아디다스 FIFA World Cup 26 포토부스
2026.05 — 2026.06월드컵 프로모션 키오스크. 프린트 품질을 위해 캔버스를 4배 해상도로 렌더링하고, 프린트 페이지의 비동기 작업을 병렬로 돌려 대기 시간을 줄였습니다. AI 응답이 Mixed Content로 차단되던 문제도 함께 정리했습니다.
Next.js·React 19·Tailwind CSS·Supabase·QR - 10
LG 슈퍼스타트 AI 포토부스
2026.04생성형 스타일 키오스크와 프린트 전용 버전 두 벌을 만들었습니다. 셔터 타이밍과 AI 생성 로딩 영상을 여러 번 조정했고, QR 다운로드 안내와 Dockerfile 빌드 인자를 정리했습니다.
Next.js·Google GenAI·Supabase·TanStack Query·QR - 11
한국중부발전 AI 포토부스
2025.11스타일 선택 → 촬영 → 출력으로 이어지는 단발성 부스 키오스크. 디자인이 확정되기 전에 프레임과 스타일 프롬프트를 먼저 붙여 두고, 시안이 나온 뒤 교체했습니다.
Next.js·OpenAI·Supabase·Framer Motion기획 · 1인 개발 - 12
PUBG AI 포토 키오스크
2025.07 — 2025.09게임 IP 부스용 포토 키오스크와 모바일 다운로드 페이지. RunPod 생성 파이프라인을 붙이고 한글 가상 키보드와 압축 다운로드, QR 발급까지 현장 동선을 맡았습니다.
Next.js·RunPod·Supabase·hangul-js·react-simple-keyboard·JSZip
기획부터 배포까지 혼자 만든 것들.
- 01
심팡 (Simpang)
2024.06 — 2025.11Monaco 기반 클라이언트와 Express 서버를 직접 설계했고, v1(MongoDB)의 구조를 v2(MariaDB · Supabase · jose)로 다시 짰습니다.
Next.js·Monaco Editor·Express·MariaDB·Supabase·Swagger기획 · 1인 풀스택 - 02
모아모아 (MOA-MOA) · AI 이미지 스튜디오
2025.11 — 2026.07Google AI SDK 스트리밍에 WebGL 필터(glfx)와 벡터 트레이싱을 얹은 이미지 편집 도구. 생성이 끝나기를 기다리지 않고 바로 손댈 수 있는 편집 흐름을 만들었습니다.
Next.js·Google AI SDK·Vercel AI·glfx·imagetracer기획 · 핵심 개발
성장 타임라인
개인 프로젝트로 시작해, 상용 브랜드 프로젝트를 맡기까지.
코딩 에디터 '심팡'의 백엔드(Express · MongoDB)를 직접 설계하며 서버와 API, 인증을 익혔습니다.
다국어 포토티켓 키오스크를 핵심 개발자로 맡았습니다. 결제와 출력, 운영 모니터링까지 실제 제품이 돌아가는 과정을 처음으로 끝까지 경험했습니다.
NIKKE · 현대 · Mecreip · 스타필드 · PUBG · Vrook 등 20개가 넘는 브랜드 프로젝트를 병행하며 생성형 AI와 결제, 다국어까지 다루는 범위를 넓혔습니다.
심팡을 MariaDB · Supabase · jose 기반 v2로 다시 설계하고, Tiptap 에디터 블로그를 만들며 아키텍처 감각을 키웠습니다.
KRA · 아디다스 · Nextrise · MOA-MOA v2 등 여러 프로젝트의 생성 스택을 Google GenAI(Gemini) 중심으로 옮겼습니다.
DDP 썸머 · Jacob · AI4 Face · AFpro 2026 · Medical KR · Hyundai Mini 등 여러 프로젝트를 병행하며 짧은 납기 안에 완성해 오고 있습니다.
자사 웹 4종(Sweetndata · PhotoSweet · Admin · Backend)을 인수인계받아 자사 환경으로 옮기고, 배포와 서버 접근 권한, 운영 문서를 직접 정리하며 인프라 운영까지 범위를 넓혔습니다.