All work
BLUEBEAKER / 2022.03–2025.01
모델이 가벼워지는 것과
제품이 편해지는 것.
블루비커에서 웹 그래픽스 개발과 개발 리드를 맡아 3D 에셋 최적화 파이프라인, 뷰어와 에디터, 제품의 클라이언트 화면을 개발했습니다. 의료 3D 모델을 다루는 제품에서 제작자의 품질 기준과 사용자의 조작 경험을 함께 연결했습니다.
이력서·보존된 코드·당시 작업 경험을 바탕으로 정리한 사례입니다. 아래 구조 설명은 새로 구성했으며 과거 제품의 실행 캡처나 성능 측정 그래프를 대신하지 않습니다.
DECISION 01
최적화의 끝에
사람의 검수가 있도록.
gltf-transform을 기반으로 prune·dedup·weld·simplify, 계층 평탄화와 메시 병합을 조합했습니다. Draco·Meshopt 지오메트리 압축과 KTX2 텍스처 압축을 적용하고, 디자이너가 결과를 직접 확인할 수 있는 프리뷰 도구를 제공했습니다.
- 01제작 기준
폴리곤 수와 텍스처 크기 가이드를 디자이너와 정의
- 02데이터 정리와 압축
중복·미사용 데이터 정리, 메시 단순화와 텍스처 압축
- 03프리뷰 검수
노멀맵과 중요한 디테일의 품질을 함께 확인
- 04서비스 공급
검수 결과에 따라 파라미터를 조정하고 반복 작업을 자동화
직접 담당한 범위는 최적화 도구를 제품 요구에 맞게 연결하고, 디자이너의 검수와 반복 작업을 하나의 흐름으로 구성한 일입니다.
DECISION 02
그리기와 선택의 비용을
서로 다른 문제로 봅니다.
모델 선택에는 three-mesh-bvh를 적용해 공간 질의 경로를 구성했습니다. 여러 뷰에서는 scissor로 렌더링 영역을 나누고, 페이지를 이동할 때 기존 3D 컨텍스트를 유지하는 흐름을 구현했습니다.
Picking
BVH를 연결해 모델 위 지점을 선택하는 raycasting 경로 개선
Viewport
scissor로 필요한 영역을 구분해 렌더링
Lifetime
geometry·material·texture의 추적과 해제 경계 관리
Device
기기 등급에 따른 모델 로딩과 품질 분기
선택·그리기·자원 해제의 책임을 나누고, 모델이 바뀌거나 화면을 이동할 때 각각의 수명을 관리했습니다.
WHAT I OWNED
그래픽스와 제품 사이.
모델을 보는 화면뿐 아니라 커스터마이즈·캡처·다운로드, 디자이너용 프리뷰, DOM과 3D 캔버스의 연결까지 클라이언트 전반을 다뤘습니다. 에셋 처리·렌더링·상태·사용자 조작을 하나의 경험으로 연결한 작업입니다.
경력과 프로젝트가 정리된 이력서