프로젝트 개요
SKT ASTRO 고도화에서는 드론이 촬영한 철탑 데이터를 AI가 분석해 생성한 3D 모델을 웹에서 확인하는 화면을 개발했습니다. 3D 렌더링과 대용량 업로드가 함께 요구되어, 렌더링 생명주기와 업로드 처리 분리를 중심으로 구현했습니다.
화면 및 구조
ASTRO 3D facility view
프로젝트 기간, 역할, 프로젝트 규모
- 프로젝트 기간
- 2024.06 - 2024.08
- 역할
- 프론트엔드 개발, Three.js 3D 시각화, Web Worker 업로드
- 프로젝트 규모
- 드론 철탑 관제 3D 모델 뷰와 대용량 영상/이미지 업로드 화면
기술 스택
Vue3TypeScriptThree.jsWeb WorkerAzure BlobAWS S3
담당업무
드론 영상 분석으로 생성된 철탑 3D 모델을 확대, 축소, 회전하며 확인하는 화면을 구현했습니다.
Web Worker 기반 파일 단위 업로드 큐와 진행률 UI를 구현했습니다.
S3/Azure Blob 직접 업로드 구조에서 서버 경유 업로드 구조로 전환했습니다.
문제 및 해결방안
대용량 업로드 중 UI 사용성 유지
이미지와 영상 업로드 시간이 길어지는 동안 화면의 다른 기능이 막히는 문제가 있었습니다.
Web Worker를 적용해 업로드 작업을 메인 UI 처리와 분리했고, 사용자가 업로드 중에도 화면 조회와 다른 작업을 이어갈 수 있도록 했습니다.
기술적 의사결정
대용량 업로드 중에도 화면 조회가 가능하도록 업로드 작업을 메인 UI 스레드와 분리했습니다.
브라우저에서 스토리지에 직접 접근하지 않고 서버에서 업로드를 처리해 CORS와 권한 노출 리스크를 낮췄습니다.
성과
업로드 중에도 사용자가 다른 화면 작업을 이어갈 수 있게 했습니다.
기존 고객사 스토리지 인프라를 활용하면서 추가 구축 비용을 줄였습니다.
배운점
대용량 작업은 UI 처리와 분리해야 사용자 경험을 유지할 수 있다는 점을 배웠습니다.
3D 시각화는 렌더링 구현만큼 리소스 해제와 생명주기 관리가 중요합니다.