Moojin: 다국어 조립 가이드 툴
Client: Moojin Industrial Services: 인터랙티브 3D, 조립 매뉴얼, 다국어 딜리버리(EN/KO) Duration: 10주 Tech: Three.js, Verge3D, Next.js 오버레이, i18n 프레임워크
문제 정의
Moojin은 상업 시설용 내진 천장 시스템을 만듭니다. 학교, 병원, 관공서, 인프라가 주된 납품처입니다. 제품은 구조적으로 복잡합니다. 수십 개의 부품, 정확한 순서, 천장 유형마다 달라지는 구성. 설치를 잘못하면 외관 문제가 아니라 안전 문제로 이어집니다.
설치 노하우는 세 곳에 흩어져 있었습니다. 180페이지짜리 PDF 매뉴얼, 소수의 베테랑 시공자, 그리고 끝까지 보는 사람이 없는 사전 녹화 교육 영상.
Moojin은 단일 소스로 작동하는 도구를 원했습니다. 현장 시공자가 태블릿에서 열어, 천장 구성을 선택하고, 조립을 단계별로 따라갈 수 있는 도구. 한국어와 영어 양쪽을 요구한 이유는 신규 시장 확장의 상당 부분이 한국 밖이었기 때문입니다.
만든 것
브라우저 기반 인터랙티브 3D 조립 가이드입니다.
- 구성 선택기. 시공자가 천장 치수, 패널 타입, 그리드 시스템을 고릅니다. 3D 씬이 해당 부품 세트로 초기화됩니다
- 스텝별 시퀀싱. 각 스텝은 카메라 위치, 강조된 부품 세트, 사양이 들어간 짧은 안내 패널 한 묶음으로 구성됩니다
- 요청 시 분해도. 어느 스텝에서든 분해도를 열어 부품 결합 방식을 확인할 수 있습니다
- 세션 도중 언어 전환. 진행 상태를 잃지 않고 언제든 EN/KO를 토글할 수 있습니다
- 모바일·태블릿 최적화. 2023 iPad에서 60fps, 구형 안드로이드 태블릿에서도 자연스럽게 성능을 낮춰 동작합니다
- 오프라인 동작. 앱이 한 번 로드되면 네트워크 없이도 작동합니다. 현장은 신호가 불안정한 곳이 많습니다
작업 방식
1주차–2주차. 킥오프, 범위 확정, CAD 검토. Moojin이 엔지니어링 도면을 제공했고, GLTF로 변환한 뒤 브라우저 딜리버리에 맞춰 폴리곤 수를 최적화했습니다.
3주차–4주차. 3D 씬 구축. 환경, 조립 시퀀스, 부품 하이라이트 로직. 4주차 말에 스테이징 첫 빌드.
5주차–6주차. UI 레이어. 패널 디자인, 스텝 내비게이션, 언어 토글. 3D 씬과의 통합.
7주차–8주차. 한국어와 영어 카피, 클라이언트 리뷰, 수정. 한국어는 원어민 카피 리뷰를 거쳤습니다.
9주차–10주차. 실제 시공자 하드웨어에서 QA, 오프라인 모드 테스트, 모바일 성능 튜닝, 런칭.
달라진 점
Moojin의 베테랑 시공자들은 신규 시장에 들어갈 때마다 첫 2주를 현지 시공자 교육에 쓰던 패턴에서 벗어났습니다. 베이스라인은 도구가 맡고, 현장 교육은 예외 케이스와 현장 판단에 집중합니다.
해외 프로젝트의 1차 교육을 위해 베테랑이 직접 출장 가는 일은 사라졌습니다. 반복 가능한 부분은 도구 안에 들어 있습니다. 현장에서의 대화는 "패널이 어떻게 붙는지"가 아니라 더 어려운 질문으로 옮겨갔습니다. 천장 불규칙성, 리트로핏, 다른 공종과의 순서 조율.
배운 것
공유할 만한 세 가지가 있습니다.
다국어 3D UI는 다국어 웹보다 까다롭습니다. 한국어와 영어는 단어 길이, 문장 리듬, UI 버튼 폭에 대한 기대치가 다릅니다. 잘림 없이 두 언어를 모두 수용하려고 버튼 영역을 30% 더 잡았습니다. 사소한 디테일입니다. 그러나 현장에서 쓰이는 제품은 이런 부분을 잘못 잡으면 무너집니다.
오프라인 가능한 WebGL은 직관적이지 않습니다. 3D 씬 에셋은 Service Worker 캐싱으로, 스텝 상태 영속화는 작은 IndexedDB 레이어로 처리했습니다. 빌드에 일주일 정도가 추가됐습니다. 현장은 연결이 불안정한 곳이 많고, 작업 현장에서 멈추는 조립 툴은 PDF보다 나쁩니다.
시공자는 튜토리얼을 원하지 않습니다. 초기 빌드에는 사용법을 설명하는 60초짜리 인트로 애니메이션이 있었습니다. 시공자들은 5초 만에 꺼버렸습니다. 출시본에서는 튜토리얼을 전부 들어냈습니다. 인터페이스 자체가 설명이 됐습니다.
스택
- 런타임: Three.js + Verge3D
- UI: Next.js App Router, Tailwind CSS, i18n(next-intl)
- 에셋: Draco 압축 GLTF, 전체 부품 라이브러리 약 8MB
- 오프라인: Service Worker + IndexedDB
- 호스팅: Vercel + 엣지 캐시 정적 에셋
- 분석: Plausible, 시공자 하드웨어 익명화 이벤트 데이터
비슷한 작업이 필요하신가요
설치, 조립, 구성이 필요한 제품을 만드시는 경우(특히 여러 언어로 출하되는 경우), 이 패턴이 잘 맞습니다. 두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오. 24시간 안에 회신드립니다.
