InteractiveProduct UI
Bluebeaker Lab과 Medmap Library·Doctor·Showroom의 클라이언트를 맡았습니다. 콘텐츠 검색과 보관함, 모델 편집·캡처·다운로드를 구현했습니다. 위 영상은 3D 뷰어에서 모델을 조작하는 화면입니다.
검색과 자동완성
검색어와 콘텐츠 유형, 카테고리, 페이지 번호를 API 조회 조건에 반영했습니다. 검색 결과가 없을 때의 안내와 페이지 이동을 처리했고, 자동완성은 한글 입력이 끝난 뒤 요청하도록 했습니다.
보관함과 콘텐츠 뷰어
보관함에서 폴더를 만들거나 이름을 바꾸고 파일을 관리하는 기능을 구현했습니다. 선택한 콘텐츠에 따라 3D 모델·이미지·영상 뷰어를 열고, 뷰어 UI에서 카메라 초기화, 시점 전환, 캡처를 실행할 수 있도록 했습니다.
WPF와 WebView 연동
Doctor는 WPF 앱 안의 WebView에서 실행되는 웹 클라이언트였습니다. WPF에서 전달받은 콘텐츠를 뷰어에 표시하고, 웹 UI로 모델을 편집하거나 조작할 수 있도록 연동했습니다.
Content Tools
운영자와 디자이너가 콘텐츠를 등록하고 관리하는 페이지를 개발했습니다. 모델 정보와 썸네일 등록, 파일 업로드, 3D 미리보기, 렌더링 설정 기능을 구현했습니다.
등록과 파일 업로드
콘텐츠 메타데이터를 생성한 뒤 업로드 URL을 발급받아 파일과 썸네일을 전송했습니다. 업로드가 끝나면 목록을 갱신해 등록 결과를 바로 확인할 수 있게 했습니다.
렌더링 설정 패널
카메라 보정, 조명, 그림자, SSS, 조작 범위를 바꾸는 설정 패널을 개발했습니다. 디자이너가 코드 수정 없이 설정을 조절하고 뷰어에서 결과를 확인할 수 있도록 했습니다.
Rendering & Assets
3D 모델을 웹에서 사용할 수 있도록 용량과 렌더링 부담을 줄이는 작업을 했습니다. 최적화 전후의 노멀맵과 모델 디테일을 디자이너와 비교하며 파라미터를 조정했습니다.
피킹과 멀티뷰
모델 피킹에는 three-mesh-bvh를 사용했습니다. 멀티뷰는 하나의 canvas에서 scissor로 영역을 나눠 렌더링했습니다. Lab에서는 페이지가 바뀌어도 canvas를 유지하고, DOM UI에서 3D 씬을 제어하도록 구현했습니다.
에셋 최적화 자동화
gltf-transform으로 중복되거나 사용하지 않는 데이터를 정리하고, 메시 병합과 단순화를 자동화했습니다. 지오메트리 압축에는 Draco·Meshopt를, 텍스처에는 KTX2를 적용했습니다. 최적화로 달라진 노멀맵과 디테일은 프리뷰에서 확인하며 설정을 조정했습니다.
