허준혁Junhyeok Heo

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

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

React·Three.js로 브라우저에서 도는 3D·생성형 AI 제품을 만들어 왔습니다. 지금은 2026년 9월 런칭한 AI 영상 생성 서비스 러다이트와 사내 AI 업무 도구 Work OS를 팀과 함께 풀스택으로 개발합니다. 러다이트에서는 생성 영상을 자동 채점하는 평가 파이프라인을, Work OS에서는 자연어 질문을 SQL로 바꿔 답하는 데이터 온톨로지를 구축했습니다. 이전에는 C++/WebAssembly 치과용 CAD와 스타벅스·광주비엔날레 웹 AR을 만들었습니다.

GitHubContact

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

Work

네이션에이2026.08 – Present

러다이트 LUDYTE

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

  • Google Research의 Harness²로 영상 생성 에이전트 하네스를 구축. 모델은 그대로 두고 프롬프트·도구·스킬 같은 하네스만 Propose–Probe–Compose로 고쳐, 후보 하네스들의 실행 결과를 비교해 다음 하네스를 만듦
  • 영상 평가 파이프라인 구축. 대본·프롬프트 에이전트는 iFixAi로 정책 위반·프롬프트 주입을 감사하고, 생성 영상은 Qwen3-VL이 프롬프트를 따랐는지·장면이 앞뒤로 이어지는지 판정
  • Next.js 16 웹 스택(OpenAPI 타입 생성과 drift check, 디자인 토큰, app-shell) 설계와 API 계약·화면 성능·장애 대응 담당, FastAPI·PostgreSQL·워커·ECS/Terraform 배포 참여
  • 실험실에 브라우저 멀티트랙 영상 편집기 「비디오 스튜디오」를 mediabunny·WebCodecs·WebGL2·WebAudio로 클린룸 구현(타임라인·키프레임·전환·자막·MP4 내보내기, dev). 서버 렌더와 MCP를 붙여 에이전트도 같은 편집 명령을 씀
  • 실험실에 영상 역분석 스튜디오 구현(dev). 영상에서 컷·자막·효과음·BPM·카메라·조명을 뽑는 분석 모듈을 Python 워커로 이식하고, lease 큐·ECS 온디맨드 워커·MCP 분석 도구를 만듦
  • Next.js
  • React
  • TypeScript
  • WebCodecs
  • Three.js
  • Qwen3-VL
  • iFixAi
  • FastAPI
  • PostgreSQL
  • Playwright
  • FFmpeg.wasm
  • AWS ECS
  • Terraform
  • Stripe

Website(새 창에서 열기)

Harness² 하네스 개선 루프

  1. 전체: 모델은 잠그고, 둘레 파일만 고쳐 가는 루프. 영상 생성 에이전트의 가중치는 두고 하네스 파일만 고친다. 1⁠–⁠4는 작업 하나 안에서, 5는 작업이 끝날 때마다 돈다.
    • 컨텍스트: 시스템 프롬프트 (systemprompt.md), 가드레일 (guardrails.md), 메모리 (LongTermMEMORY.md), 스킬 (skills/<n>/SKILL.md)
    • 도구: 도구 안내 (tool_guidance.md), 스크립트 (scripts/<name>.py)
    • 맡기기: 서브에이전트 (sub_agents/<n>/AGENT.md)
    • 한 작업 안 · 1–4
    • 작업 사이 · 5
    • 다음 작업으로
  2. 1 실행: 지금 하네스로 작업을 돌린다. 에이전트 실행기가 작업 하나를 풀고 실행 기록과 결과물을 남긴다. 1–4는 모두 이 작업 하나 안에서 돈다.
  3. 2 제안: 기록을 보고 고친 후보를 낸다. 하네스 편집기가 어느 작업에나 통할 공통 수정과, 영상 생성에 맞춘 도메인 수정을 따로 낸다.
  4. 3 시험: 후보마다 같은 작업을 돌려 본다. 공통 후보와 도메인 후보가 1에서 푼 것과 같은 작업을 풀어, 실행 기록을 하나씩 남긴다.
  5. 4 합성: 실행 차이를 보고 하나로 합친다. 하네스 합성기는 정답 라벨 없이, 후보들의 실행이 어떻게 달랐는지만 보고 최종 하네스를 만든다. 병렬: 후보를 한꺼번에 내고 한 번에 합친다. 순차: 합친 하네스를 다시 편집해 2 제안부터 다시 돈다.
  6. 5 반영: 교훈을 쌓고 다음 작업으로 간다. 경험 반영기가 채택한 하네스와 근거 있는 교훈을 개선 하네스에 쌓고, 이것이 다음 작업의 편집을 이끈다. 다음 작업에서 다시 1부터 돈다. 개선 실행이 다 끝난 뒤: Judge, 루프 밖에서 결과를 따로 채점한다. 채점 기준이 개선 과정에 새지 않게.

네이션에이2026.08 – Present

AI-native Work OS

Slack 대화·문서·코드·작업을 모아 AI가 그 내용을 근거로 답하거나 일을 진행하는 사내 업무 도구입니다. 2026년 8월 레포를 직접 만들었고, 지금은 팀과 함께 개발해 사내에서 씁니다.

  • NVIDIA auto-ontology로 DB 스키마에서 업무 용어·테이블 관계를 뽑아 검수·확정하고, 자연어 질문을 SQL로 바꿔 답과 실행한 SQL을 함께 돌려주게 함
  • Ask 프롬프트를 '공통 지침 → 요청별 맥락' 순서로 바꾸고 Claude Haiku 5.5로 324턴 A/B(test 환경)를 돌려 캐시 읽기 비율 62% → 94%, 턴당 비용 57% 절감, 응답 지연 중앙값은 거의 같음을 확인한 뒤 사내 운영 기본값으로 켬
  • 한 조직에 이벤트가 몰리면 다른 조직이 약 5분 밀리던 처리를 조직별 라운드로빈으로 바꿔 대기를 101 tick → 1 tick으로 줄임. 장애 주입 시험에서 중복·유실 0 확인
  • React
  • Vite
  • TypeScript
  • Python
  • PostgreSQL
  • pgvector
  • Tauri
  • Capacitor
  • GitHub Actions

사내 데이터 온톨로지 · 자연어 → SQL

  1. 전체: 스키마로 온톨로지를 만들고, 질문은 그 온톨로지로 SQL이 된다. NVIDIA auto-ontology로 1⁠–⁠3에서 정의를 뽑아 확정하고, 4⁠–⁠5에서 질문마다 그 정의로 SQL을 만든다.
    • 용어: 업무 용어 (이름·설명), 동의어 (같은 뜻의 다른 말), 컬럼 매핑 (그 값을 가진 컬럼)
    • SQL 속성: 검수한 SQL 식 (측정값을 늘 같은 식으로)
    • 관계: 테이블 조인 (테이블 사이 연결), 브리지 테이블 (키와 데이터에서 추론)
    • Postgres + pgvector 임베딩. 컬럼 매핑·조인이 가리키는 곳: 사내 DB (격리된 사내 환경)
    • 온톨로지 만들기 · 1–3
    • 확정한 온톨로지
    • 질문마다 · 4–5
    • 다음 질문으로
  2. 1 읽기: 격리된 사내 환경에서 스키마와 샘플 값을 읽는다. DB 스키마를 뽑고 컬럼과 샘플 값을 카탈로그에 담는다. 아직 업무 용어는 없다.
  3. 2 초안: 업무 용어·SQL 속성·관계 초안을 뽑는다. auto-ontology가 테이블마다 업무 용어를 뽑아 컬럼에 잇고, 테이블 사이 조인을 추론해 SQL 속성과 함께 초안을 만든다. 초안은 Postgres에, 임베딩은 pgvector에 둔다.
  4. 3 검수·확정: 사람이 초안을 검수해 확정한다. 용어 이름·설명·SQL 속성을 사람이 검수하고, 고칠 곳은 고쳐서 확정한다.
  5. 4 검색: 질문과 가까운 정의를 pgvector에서 찾는다. 질문을 임베딩해, 확정한 온톨로지에서 관련 용어를 찾는다.
  6. 5 SQL·답: 찾은 정의로 SQL을 써서 실행하고, 답과 SQL을 함께 돌려준다. 찾은 용어와 관계로 질문을 SQL로 바꿔 사내 DB에서 실행하고, 답 옆에 실행한 SQL을 붙인다. 답을 돌려줄 때: 질문한 사람, 답과 실행한 SQL을 함께 받는다. SQL로 답이 어디서 왔는지 확인할 수 있게.

네이션에이2025.10 – 2026.08

뉴로이드

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

  • AI 채팅 기반 스토리보드 캔버스(React Flow), Seedance·MiniMax·FLUX 등 멀티 모델 이미지·영상·캐릭터 생성 UI, 3D 모션·카메라 에디터
  • WebSocket 진행률 감시, 리플레이·watchdog·지수 백오프 재연결·IndexedDB 영속화로 업데이트 유실 없이 복구
  • PortOne V2 빌링키 월·연 구독과 크레딧 게이트, 랜딩 첫 로드 번들 1,058KB → 483KB(gzip), Excalidraw 코드 스플리팅으로 vendor 청크 8.2MB → 4.3MB, Sentry 도입과 청크 로드 실패 자동 복구
  • React
  • Vite
  • TypeScript
  • React Flow
  • WebSocket
  • IndexedDB
  • PortOne
  • Sentry
  • Next.js(어드민)
  • FastAPI

Website(새 창에서 열기)

생성 작업 감시와 복구

  1. 전체: 끊겨도, 새로고침해도 생성은 이어진다. 1⁠–⁠2에서 생성 작업을 띄우고, 3⁠–⁠4에서 진행률을 받다가 끊기거나 새로고침돼도 이어받는다.
    • 생성 모델 (작업마다 몇 분씩) → WebSocket: 진행률을 받는다
    • 작업: Seedance, MiniMax, FLUX
    • 저장: IndexedDB (새로고침해도 이어받도록)
    • 정상 흐름 · 1–2
    • 생성 작업
    • 완료될 때까지 · 3–4
    • 멈춘 자리부터 다시
  2. 1 채팅·캔버스: AI 채팅으로 짠 스토리보드가 캔버스에 놓인다. AI 채팅으로 스토리보드를 짜고, React Flow로 만든 스토리보드 캔버스에서 이어 다룬다.
  3. 2 생성 요청: 여러 모델로 생성 작업을 띄운다. Seedance·MiniMax·FLUX 같은 모델로 이미지·영상을 만들면 작업이 생긴다. 작업 하나가 몇 분씩 걸린다.
  4. 3 진행 감시: WebSocket으로 진행률을 받는다. 몇 분씩 걸리는 작업 여러 개의 진행률을 WebSocket으로 받아 작업마다 채운다. 작업이 끝나면 루프를 떠난다. 작업이 끝나면: 생성 결과, 몇 분씩 걸린 작업도 업데이트를 잃지 않고 끝까지 이어받는다.
  5. 4 복구: 끊겨도, 새로고침해도 업데이트를 잃지 않고 이어받는다. 이벤트 리플레이, watchdog과 지수 백오프 재연결, IndexedDB 저장으로 연결이 끊기거나 새로고침해도 진행을 이어받는다. 복구: 이벤트 리플레이, watchdog (지수 백오프 재연결), IndexedDB.

덴트너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

    네이션에이

    개발팀 풀스택 개발자

    • 러다이트: 2026년 9월 런칭한 AI 영상 생성 구독 서비스. 레포를 만들 때 합류해 리드·QA 동료와 함께 개발
    • 러다이트: Google Research의 Harness²로 영상 생성 에이전트 하네스를 구축. 모델은 그대로 두고 프롬프트·도구·스킬 같은 하네스만 Propose–Probe–Compose로 고쳐, 후보 하네스들의 실행 결과를 비교해 다음 하네스를 만듦
    • 러다이트: 영상 평가 파이프라인 구축. 대본·프롬프트 에이전트는 iFixAi로 정책 위반·프롬프트 주입을 감사하고, 생성 영상은 Qwen3-VL이 프롬프트를 따랐는지·장면이 앞뒤로 이어지는지 판정
    • 러다이트: Next.js 16 웹 스택(OpenAPI 타입 생성과 drift check, 디자인 토큰, app-shell) 설계와 API 계약·화면 성능·장애 대응 담당, FastAPI·PostgreSQL·워커·ECS/Terraform 배포 참여
    • 러다이트: 실험실에 브라우저 멀티트랙 영상 편집기 「비디오 스튜디오」를 mediabunny·WebCodecs·WebGL2·WebAudio로 클린룸 구현(타임라인·키프레임·전환·자막·MP4 내보내기, dev). 서버 렌더와 MCP를 붙여 에이전트도 같은 편집 명령을 씀
    • 러다이트: 실험실에 영상 역분석 스튜디오 구현(dev). 영상에서 컷·자막·효과음·BPM·카메라·조명을 뽑는 분석 모듈을 Python 워커로 이식하고, lease 큐·ECS 온디맨드 워커·MCP 분석 도구를 만듦
    • Work OS: 2026년 8월 레포를 직접 만들어 시작. 작업 관리·디자인 시스템·사내 AI 질의응답(Ask)·CI 담당
    • Work OS: NVIDIA auto-ontology로 DB 스키마에서 업무 용어·테이블 관계를 뽑아 검수·확정하고, 자연어 질문을 SQL로 바꿔 답과 실행한 SQL을 함께 돌려주게 함
    • Work OS: Ask 프롬프트를 '공통 지침 → 요청별 맥락' 순서로 바꾸고 Claude Haiku 5.5로 324턴 A/B(test 환경)를 돌려 캐시 읽기 비율 62% → 94%, 턴당 비용 57% 절감, 응답 지연 중앙값은 거의 같음을 확인한 뒤 사내 운영 기본값으로 켬
    • Work OS: 한 조직에 이벤트가 몰리면 다른 조직이 약 5분 밀리던 처리를 조직별 라운드로빈으로 바꿔 대기를 101 tick → 1 tick으로 줄임. 장애 주입 시험에서 중복·유실 0 확인
    • 뉴로이드: 초기 셋업부터 약 11개월간 프론트엔드 단독 개발. AI 채팅 기반 스토리보드 캔버스(React Flow), Seedance·MiniMax·FLUX 등 멀티 모델 이미지·영상·캐릭터 생성 UI, 3D 모션·카메라 에디터
    • 뉴로이드: WebSocket 진행률 감시, 리플레이·watchdog·지수 백오프 재연결·IndexedDB 영속화로 업데이트 유실 없이 복구
    • 뉴로이드: PortOne V2 빌링키 월·연 구독과 크레딧 게이트, 랜딩 첫 로드 번들 1,058KB → 483KB(gzip), Excalidraw 코드 스플리팅으로 vendor 청크 8.2MB → 4.3MB, Sentry 도입과 청크 로드 실패 자동 복구
    • Glaze: VRM 아바타 렌더링·립싱크·표정·모션, Flutter WebView Bridge 양방향 통신, three-mesh-bvh BVH로 레이캐스팅 가속, Dynamic DrawUsage 버퍼로 실시간 지오메트리 업데이트, WebGPU 렌더러 옵션 제공

    스프린트 회고에서 동료가 남긴 말

    • 배포 이후 발생한 장애를 [PM]이 빠르게 인지하고 전파, 준혁님의 빠른 대응.
      CPO2026.02.06
    • 스프린트 플래닝 당시 3D챗 UI 업데이트 티켓은 없었는데, 준혁님과 [동료]가 함께 이야기 나누고 추가된 점이 좋았음
      CPO2026.01.23
    • 준혁님이 많이 도와줘서 일정안에 가능
      개발팀2025.12.05

    Projects

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

  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 all93

Trending

trendshift.io(새 창에서 열기)

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

Side projects

Activity

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

오너십

레포 생성 시점부터 런칭까지
러다이트에는 레포를 만들 때 합류해 리드·QA 동료와 함께 2026년 9월에 런칭했습니다. 웹 스택 설계와 API 계약, 장애 대응을 맡고 API·워커·배포 작업에도 참여합니다.
첫 커밋부터
사내 AI 업무 도구 Work OS는 2026년 8월 레포를 직접 만들고 첫 엿새 동안 커밋 275건을 남겼습니다. 팀 개발로 넘어간 뒤에는 작업 관리와 디자인 시스템을 주로 맡았고, 초기에는 데스크톱·모바일 앱 패키징과 릴리스 파이프라인을 만들었습니다. 10월부터는 사내 AI 질의응답(Ask)과 CI도 맡고 있습니다.
프론트엔드 밖의 일
뉴로이드에서는 프론트엔드 담당이었는데, Next.js 어드민을 새로 만들어 출시하고 FastAPI 백엔드 작업에도 참여했습니다.
배포 이후
Sentry를 붙였고, 청크 로드에 실패하면 자동으로 복구되게 했습니다.

하드워킹

머지한 PR
뉴로이드에서 11개월 동안 994건, 러다이트에서 두 달 동안 1,491건을 머지했고, 같은 기간 Work OS에서도 524건을 머지했습니다. Work OS 첫 달에는 팀이 머지한 247건 중 157건을 맡았습니다.

14,771contributions in the last year

기여한 날
306일
최장 연속
90일
가장 많은 날
277 · 2026-10-22
GitHub에서 보기(새 창에서 열기)

Contact

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

[email protected]

동료에게 받은 편지

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