01 / Context
무엇을 해결할 것인가.
3D와 브라우저 AI의 기능을 설명만으로 전달하기 어렵습니다. 방문자가 직접 입력하고 결과를 확인할 수 있는 체험이 필요합니다.
3D 작품 조작, 브라우저 인물 분리, 게임, AI 활용 레시피를 직접 체험하는 실험실.
02 / Direction
프로젝트를 바라본 방향.
기술별로 짧게 사용할 수 있는 도구와 인터랙션을 구성했습니다. 사진은 브라우저에서 처리하고 결과를 사용자의 기기에 저장하도록 설계했습니다.
03 / Experience
사용자의 다음 행동을 설계하다.
3D 작품, 인물 분리 도구, 게임과 AI 활용 콘텐츠를 독립된 경험으로 구성했습니다. 인물 분리는 사진 입력, 브라우저 처리, PNG 저장으로 이어집니다.
04 / Making
경험을 실제 시스템으로.
정적 웹사이트에 WebGL 인터랙션과 Web Worker 기반 이미지 처리를 연결했습니다. MODNet과 ONNX Runtime Web으로 브라우저에서 추론합니다.
Vinext 정적 산출물JavaScript/WebGL 관련 번들MODNetTransformers.jsONNX Runtime Web/WASMWeb Worker브라우저 저장소
05 / In detail
구현의 디테일.
- 3D 형태/재질/조명/회전/펼치기 조작과 4K 저장 UI
- MODNet 인물 배경 제거·포스터 제작/PNG 저장
- 2048·메모리 매치·스네이크·반응속도·라이트아웃·틱택토 6개 게임
- 48개 AI 활용 레시피 분류·프롬프트 편집 UI·즐겨찾기
06 / Intelligence & automation
AI를 설계하는 원칙.
인물 분리는 학습된 MODNet 모델을 사용하며 사진을 서버로 업로드하지 않습니다. 처리 해상도를 제한해 기기 부담을 조절하고 인물 전용 모델의 적용 범위를 안내합니다.
07 / Outcome
그래서, 가능해진 일.
브라우저에서 3D를 조작하고 인물 사진을 분리·저장하는 체험을 공개했습니다. 웹게임 6종과 AI 활용 레시피 48개를 함께 제공합니다.
프로젝트 직접 보기 ↗08 / Continuity
만든 이후의 시간까지.
콘텐츠와 브라우저 모델 자산을 갱신하고 이전 게시본을 보존합니다. 인물 분리·게임·AI 활용 콘텐츠의 개별 주소를 관리합니다.