Moojin: Multilingual assembly tool
Client: Moojin Industrial Year: 2024 Services: Interactive 3D, Assembly Instruction, Multilingual Delivery (EN/KO) Duration: 10 weeks Tech: Three.js, Verge3D, Next.js overlay, i18n framework
The problem
Moojin manufactures earthquake-resistant ceiling systems for commercial buildings. Schools, hospitals, government offices, infrastructure. The product is structurally complicated: dozens of components, precise sequencing, different configurations for different ceiling types. Getting installation wrong is a safety issue, not a cosmetic one.
The installation knowledge lived in three places: a 180-page PDF manual, a handful of senior installers, and a series of pre-recorded training videos that nobody watched all the way through.
Moojin wanted a single-source tool that a field installer could open on a tablet, choose their ceiling configuration, and walk through the assembly step by step. They wanted it in Korean and English, because a material portion of their new market expansion was outside Korea.
What we built
A browser-based interactive 3D assembly guide.
- Configuration selector. The installer picks ceiling dimensions, panel type, grid system. The 3D scene initializes with the right component set.
- Step-by-step sequencing. Each step is a focused camera position, a highlighted part set, and a short instruction panel with specs.
- Exploded views on demand. Any step can open into an exploded view to show how components fit together.
- Language switching mid-session. Installers can toggle EN/KO at any step without losing progress.
- Mobile and tablet optimized. The tool runs at 60 fps on a 2023 iPad and gracefully degrades on older Android tablets.
- Offline-capable. Once the app loads, it works without a network connection. Field sites often have no reliable signal.
How we built it
Weeks 1–2. Kickoff, scope lock, CAD review. Moojin supplied engineering drawings; we converted to GLTF and optimized polygon counts for browser delivery.
Weeks 3–4. 3D scene build. Environment, assembly sequence, component highlighting logic. First build on staging by end of week 4.
Weeks 5–6. UI layer. Panel design, step navigation, language toggle. Integration with the 3D scene.
Weeks 7–8. Korean and English copy, client review, revisions. Native-speaker copy review on the Korean side.
Weeks 9–10. QA on real installer hardware, offline-mode testing, mobile performance tuning, launch.
What it changed
Moojin's senior installers no longer spend the first two weeks of every new-market expansion training local installers on-site. The tool handles the baseline; in-person training now focuses on edge cases and on-the-job judgment.
(We'll source and confirm these metrics with Moojin before site launch. Placeholder language above until then.)
What we learned
Three things worth sharing.
Multilingual 3D UI is harder than multilingual web. Korean and English have different word lengths, different sentence rhythm, and different UI-button-width expectations. We overspecced the button regions by 30% to handle both languages without truncation. Small detail. It's the kind of thing that kills a product used in the field when you get it wrong.
Offline-capable WebGL is non-obvious. We used Service Worker caching for the 3D scene assets and a small IndexedDB layer for step-state persistence. It added about a week to the build. Field sites rarely have reliable connectivity, and an assembly tool that fails at the job site is worse than a PDF.
Installers don't want tutorials. Early drafts had a 60-second intro animation explaining how to use the tool. Installers turned it off in the first five seconds. Shipping cut all tutorial content; the interface became its own explanation.
Stack
- Runtime: Three.js + Verge3D
- UI: Next.js App Router, Tailwind CSS, i18n (next-intl)
- Assets: GLTF with Draco compression, ~8 MB total for the full component library
- Offline: Service Worker + IndexedDB
- Hosting: Vercel + edge-cached static assets
- Analytics: Plausible, installer-hardware-anonymized event data
Want something similar?
If you manufacture a product that requires installation, assembly, or configuration (especially one that ships across multiple languages) this pattern works. Send us a two-sentence email at hello@cclemang.com and we'll respond inside 24 hours.
