허준혁Junhyeok Heo

3D·생성형 AI 풀스택 엔지니어

3D와 생성형 AI를 제품으로 만듭니다.

React·Three.js로 브라우저에서 도는 3D·생성형 AI 제품을 만들어 왔습니다. 지금은 2026년 9월 런칭한 AI 영상 생성 서비스 러다이트를 레포 생성 시점부터 팀과 함께 풀스택으로 개발하고, 이전에는 C++/WebAssembly 치과용 CAD와 스타벅스·광주비엔날레 웹 AR을 만들었습니다.

GitHubContact

오른쪽 점토는 three.js로 실시간 렌더링합니다.

Work

네이션에이2026.08 – Present

러다이트 LUDYTE

2026년 9월 런칭한 AI 영상 생성 구독 서비스입니다. 레포를 만들 때 합류해 리드·백엔드·QA 동료와 함께 개발합니다.

  • Next.js 16 웹 스택(OpenAPI 타입 생성과 drift check, 디자인 토큰, app-shell) 설계와 API 계약·화면 성능·장애 대응을 맡고, FastAPI API·PostgreSQL 마이그레이션·워커·ECS/Terraform 배포 작업에 참여
  • 랜딩·온보딩·Explore·Library·Task 채팅·Stripe 페이월, FCM 푸시 알림, 플랜별 품질 게이트 구현. 한 달간 PR 626건 머지(팀 내 2위)
  • 원본 JPEG 썸네일 24장 리사이즈·WebP 변환, 히어로 카드 즉시 로드, API origin preconnect로 랜딩 총 전송량 6.9MB → 1.8MB, LCP Load Delay 3.9s → 1.4s(로컬 프로덕션 빌드 측정)
  • 동시 영상 재생 예산(최대 6개, 300ms dwell)을 설계해 Explore 스크롤 중 재생 시작 72회 → 20~23회. 배너 애니메이션 정지를 함께 적용해 홈 프레임 p95 50ms → 34ms(헤드리스 Chrome 측정, 6개 상한은 현재 휴대폰에만 적용)
  • Next.js
  • React
  • TypeScript
  • FastAPI
  • PostgreSQL
  • Playwright
  • FFmpeg.wasm
  • AWS ECS
  • Terraform
  • Stripe

Website(새 창에서 열기)

URL 미디어 가져오기 파이프라인 (리드 설계 기반 구현)
  1. 1

    브라우저 fetch

    먼저 브라우저에서 바로 가져온다

  2. 2

    SSRF-safe 서버 큐

    lease·fencing token으로 작업을 한 워커에만 맡긴다

  3. 3

    Playwright 크롤 워커

    동적 페이지에서 TikTok·X 영상을 찾아낸다

  4. 4

    FFmpeg.wasm remux

    HLS/DASH를 MP4로 합치고, 실패하면 서버 워커로 넘긴다

네이션에이2025.10 – 2026.08

뉴로이드 studio

AI 채팅으로 스토리보드를 짜고 이미지·영상·캐릭터를 만드는 서비스입니다. 초기 셋업부터 약 11개월간 프론트엔드를 혼자 맡았습니다.

  • AI 채팅 기반 스토리보드 캔버스(React Flow), Seedance·MiniMax·FLUX 등 여러 모델의 이미지·영상·캐릭터 생성 UI, 3D 모션·카메라 에디터
  • WebSocket으로 여러 생성 작업의 진행률을 감시하고, 리플레이·watchdog·지수 백오프 재연결·IndexedDB 영속화로 업데이트 유실 없이 복구
  • PortOne V2 빌링키 기반 월·연 구독과 크레딧 게이트, 실시간 결제 상태 반영
  • Radix에서 Base UI로 전면 마이그레이션하고 모달 26개를 공통 Dialog로 통합해 전부 ESC 닫기·ARIA 적용(포커스 트랩은 겹쳐 뜨는 3개를 뺀 23개)
  • React
  • Vite
  • TypeScript
  • React Flow
  • WebSocket
  • IndexedDB
  • PortOne
  • Sentry
  • Next.js(어드민)
  • FastAPI

Website(새 창에서 열기)

약 11개월, 프론트엔드 단독 개발
머지한 PR
994건
전체 커밋 중 비중
99.6%
랜딩 첫 로드 번들 (gzip)
1,058KB → 483KB
vendor 청크 (코드 스플리팅)
8.2MB → 4.3MB

덴트너2025

Dentner FillperCAD

설치 없이 브라우저에서 돌아가는 치과 보철 설계용 CAD입니다. 메시 스컬프팅에서 60fps가 무너지던 구간을 C++/WebAssembly로 옮겼습니다.

  • 브러시 변형 루프를 C++로 포팅하고 WASM SIMD(wasm_f32x4)로 벡터화해 JS 대비 약 4배 처리량 확보
  • WASM 선형 메모리를 WebGL 버텍스 버퍼에 그대로 매핑해 프레임당 메모리 복사 제거
  • 브러시 반경 안의 버텍스만 골라 연산하도록 디스패치 범위 축소
  • C++
  • WebAssembly
  • Emscripten
  • WebGL
  • VTK
  • CGAL
  • React

Docs(새 창에서 열기)

zero-copy 업로드 개념 코드
// WASM 힙을 복사 없이 GPU로 보낸다Module._brushDisplace(ptr, count, radius); const view = Module.HEAPF32.subarray(  ptr >> 2, (ptr >> 2) + len);gl.bindBuffer(gl.ARRAY_BUFFER, vbo);gl.bufferSubData(gl.ARRAY_BUFFER, offset, view);

  • 네이션에이

    Glaze

    AI 3D 아바타와 대화하는 채팅 플랫폼입니다(전 hey.d). Three.js/R3F로 아바타 렌더링을 구축하고 three-mesh-bvh로 레이캐스팅을 가속했습니다.

    • Three.js
    • React Three Fiber
    • three-mesh-bvh
    • WebGPU

    Website(새 창에서 열기)

  • 컬쳐커넥션2024.05 – 2024.07

    광주비엔날레 AI 웹 AR 가이드

    관람객이 앱 설치 없이 휴대폰 브라우저로 쓰는 AI 기반 AR 전시 가이드입니다.

    • Web AR
    • WebGL
    • 생성형 AI

    Article(새 창에서 열기)

  • 컬쳐커넥션2024.01 – 2024.04

    스타벅스 블루밍 베어리스타 AR

    스타벅스 캠페인용 모바일 웹 AR 이벤트입니다. 모바일 GPU에 맞춰 셰이더와 씬을 다듬었습니다.

    • Web AR
    • WebGL
    • GLSL

    Article(새 창에서 열기)

  • 아들러

    타임스스퀘어 아나모픽 셰이더

    뉴욕 타임스스퀘어 전광판의 입체 착시(아나모픽) 영상을 위한 셰이더를 개발했습니다.

    • GLSL
    • Three.js

    Video(새 창에서 열기)

Demos

Live/webgpu

WebGPU · Compute Shader

WebGPU lab

FFT 바다와 파티클 수만 개의 물리를 컴퓨트 셰이더로 매 프레임 계산합니다.

  • FFT 4×256²
  • 65,536 particles
  • WebGL2 fallback
Open
  1. 해 질 녘 바다와 물마루 거품을 그린 FFT 해양 시뮬레이션01FFT ocean
  2. 포인터를 피해 흩어졌다가 다시 구로 모이는 GPU 파티클02Compute particles

Experience

  1. 2025.10 – Present

    네이션에이

    개발팀 풀스택 개발자

    • 러다이트: AI 영상 생성 구독 서비스를 레포 생성 시점부터 팀과 함께 풀스택으로 개발해 2026년 9월 런칭. 한 달간 PR 626건 머지(팀 내 2위)
    • 러다이트: 브라우저 fetch → SSRF-safe 서버 큐 → Playwright 크롤 워커 → FFmpeg.wasm remux로 이어지는 URL 미디어 가져오기 파이프라인을 리드 설계 기반으로 구현(관련 PR 약 140건), ECS·Terraform 배포와 dev 실측 담당
    • 러다이트: FastAPI 이벤트 루프를 막던 미디어 HEAD 조회를 스레드로 분리해 동시 요청이 늘수록 커지던 지연 해소
    • 뉴로이드 studio 프론트엔드 단독 개발: 약 11개월간 전체 커밋의 99.6%, 머지 PR 994건
    • 랜딩 첫 로드 번들 1,058KB → 483KB(gzip, −54%), Excalidraw 코드 스플리팅으로 vendor 청크 8.2MB → 4.3MB, Sentry 도입과 청크 로드 실패 자동 복구
    • Next.js 16 어드민 신규 구축·출시, FastAPI 백엔드(유저 템플릿·데일리 미션·Creator Spotlight API) 참여
    • Glaze: VRM 아바타 렌더링·립싱크·표정·모션, Flutter WebView Bridge 양방향 통신, three-mesh-bvh BVH로 레이캐스팅 가속, Dynamic DrawUsage 버퍼로 실시간 지오메트리 업데이트, WebGPU 렌더러 옵션 제공

    Projects

    • React
    • Next.js
    • TypeScript
    • Three.js
    • React Flow
    • FastAPI
    • PostgreSQL
    • Playwright
    • AWS ECS
    • Terraform
    • Sentry

  2. 2025.01 – 2025.10

    덴트너

    기업부설연구소 연구팀장

    • C++/WebAssembly와 WebGL로 브라우저 기반 치과용 CAD 개발
    • SIMD 벡터화와 zero-copy WASM 인터롭으로 브러시 연산 약 4배 가속
    • 회사 홈페이지 업데이트와 유지보수

    Projects

    • C++
    • WebAssembly
    • WebGL
    • VTK
    • CGAL
    • React
    • Java

  3. 2023.05 – 2024.12

    컬쳐커넥션

    기업부설연구소 선임연구원

    • AR 실시간 이미지 처리용 커스텀 GLSL 셰이더 작성, Spector.js GPU 프로파일링으로 드로우콜과 텍스처 메모리 절감
    • 대용량 3D 씬 최적화: Draco·텍스처 아틀라스 압축, 배칭·GPU 인스턴싱, 오클루전·프러스텀 컬링, LOD·지연 로딩

    Projects

    • WebGL
    • GLSL
    • Web AR
    • Three.js

  4. 2022.03 – 2023.05

    아들러

    개발팀 3D 파트 리더

    • R3F와 Drei로 복잡한 3D 씬을 React 컴포넌트로 관리, useFrame·PerformanceMonitor로 실시간 렌더링 최적화
    • KTX2/Basis 텍스처 압축으로 텍스처 메모리 70% 감소, 기기 성능별 pixelRatio 조절로 모바일 60fps 유지

    Projects

    • Three.js
    • React Three Fiber
    • React
    • TypeScript
    • GLSL

  5. 2021.07 – 2022.02

    포항공과대학교

    메이커스페이스 로봇 엔지니어

    • 메이커스페이스 공간과 장비를 1:1로 옮긴 디지털 트윈 구축, VR 원격 시설 투어와 장비 교육 시스템 개발
    • IoT 센서 데이터를 연동해 로봇과 3D 프린터 작동 상태 반영

    Projects

    • Unity3D
    • Python
    • Arduino
    • ABB Robot Arm

  6. 2020.09 – 2021.05

    경기도경제과학진흥원

    미래기술진흥팀 대리

    • 3D프린팅센터 웹사이트 개발과 유지보수
    • 여러 프로젝트의 3D 모델 설계·출력, 3D 스캐닝 기반 역설계

Skills

3D & graphics
  • Three.js
  • React Three Fiber
  • WebGPU
  • TSL · WGSL
  • FFT ocean simulation
  • WebGL
  • GLSL
  • Web AR
Systems
  • C++
  • WebAssembly
  • Emscripten
Web
  • React
  • Next.js
  • TypeScript
Backend & infra
  • Python
  • FastAPI
  • PostgreSQL
  • AWS
  • Terraform

Education

  • 단국대학교 소프트웨어학과 학사 (2014.03 – 2021.02)
  • 3D프린터운용기능사

Open source contributions

View all63

Trending

trendshift.io(새 창에서 열기)

기여한 레포 31곳이 GitHub 트렌딩 순위에 올랐습니다. 숫자는 Trendshift가 매긴 기간별 최고 순위입니다.

Side projects

Activity

맡은 제품은 끝까지 책임지고, 많이 일합니다. 아래는 그 근거와 지난 1년 동안의 GitHub 기여 기록입니다.

오너십

레포 생성 시점부터 런칭까지
러다이트에는 레포를 만들 때 합류해 리드·백엔드·QA 동료와 함께 2026년 9월에 런칭했습니다. 웹 스택 설계와 API 계약, 장애 대응을 맡고 API·워커·배포 작업에도 참여합니다.
프론트엔드 밖의 일
뉴로이드 studio에서는 프론트엔드 담당이었는데, Next.js 어드민을 새로 만들어 출시하고 FastAPI 백엔드 작업에도 참여했습니다.
배포 이후
Sentry를 붙였고, 청크 로드에 실패하면 자동으로 복구되게 했습니다.

하드워킹

머지한 PR
뉴로이드 studio에서 11개월 동안 994건, 러다이트에서 한 달 동안 626건을 머지했습니다. 러다이트에서는 팀 내 2위입니다.

11,515contributions in the last year

기여한 날
302일
최장 연속
63일
가장 많은 날
256 · 2026-08-31
GitHub에서 보기(새 창에서 열기)

Contact

3D 웹, AR, 생성형 AI 제품 개발 제안을 받습니다.

kleague3@gmail.com

동료에게 받은 편지

  • 작업에서 먼저 어떤 거 챙겨야 하는지도 알려주고, 늘 나이스한 개발자라고 생각합니다.
    기획자
  • 일적으로나 일 외적으로나 늘 한 발 앞서서 도와주려고 하시는 모습을 보면서 많이 배우기도 했고요!
    데이터 엔지니어2026.04.10
  • 하나를 전달하면 그대로 구현하는 데서 끝나지 않고, 항상 +@로 같이 사용자경험까지 고민해주셨던 게 좋았습니다.
    UI/UX 디자이너
  • 당신은 어딜가나 잘지낼 사람이니 딱히 걱정은 없다.
    UI/UX 디자이너