IFC.js와 오픈소스 스택으로 구축하는 웹 기반 BIM 뷰어

웹 브라우저 안에서 IFC 파일을 열고, 3D로 돌려보고, 요소를 눌러 속성을 확인한다. 서버에 무거운 저작도구를 두지 않고도 이런 웹 기반 BIM 뷰어를 만들 수 있게 해 준 것이 IFC.js였다. 다만 지금은 이름과 구조가 바뀌었다. IFC.js 프로젝트는 That Open Engine(That Open Company)으로 발전하며 저수준 파서 web-ifc와 고수준 툴킷 @thatopen/components로 재편됐다. 이 글은 그 오픈소스 웹 BIM 스택의 구성을 정리하고, 브라우저에서 IFC를 로드·렌더링하고 요소를 선택해 속성을 표시하는 데까지 실제 자바스크립트 코드로 이어간다.

■ 웹 BIM 스택의 구성

웹에서 IFC를 다루는 오픈소스 스택은 크게 세 층으로 나뉜다. 각 층이 무엇을 맡는지 알아야 어느 라이브러리를 쓸지 판단할 수 있다.

층	라이브러리	역할
파싱	web-ifc (WASM)	C++로 작성돼 WebAssembly로 컴파일된 IFC 파서. 네이티브에 가까운 속도로 파일을 읽는다
렌더링	Three.js / WebGL	파싱된 형상을 브라우저 3D 화면에 그린다
툴킷	@thatopen/components	카메라·조명·선택·측정 등 BIM 뷰어에 필요한 도구 모음

과거의 web-ifc-three(Three.js용 IFCLoader)와 web-ifc-viewer는 이 @thatopen/components와 프래그먼트(Fragments) 기반 구조로 통합·대체됐다. 새로 시작한다면 컴포넌트 툴킷을 기준으로 잡는 것이 맞다.

■ 저수준: web-ifc로 직접 파싱하기

렌더링 없이 데이터만 읽고 싶을 때는 web-ifc를 바로 쓴다. API를 초기화하고 모델을 연 뒤, 타입으로 요소 ID를 조회해 각 라인을 읽는 흐름이다.

import * as WebIFC from "web-ifc";

const ifcApi = new WebIFC.IfcAPI();
await ifcApi.Init();

// data: 업로드된 IFC 파일의 Uint8Array
const modelID = ifcApi.OpenModel(data);

// 모든 벽의 라인 ID 조회
const wallIDs = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCWALL);
for (let i = 0; i < wallIDs.size(); i++) {
  const wall = ifcApi.GetLine(modelID, wallIDs.get(i));
  console.log(wall.GlobalId.value, wall.Name?.value);
}

ifcApi.CloseModel(modelID);

■ 고수준: 컴포넌트로 뷰어 만들기

실제 뷰어는 @thatopen/components로 만든다. 월드(장면·카메라·렌더러 묶음)를 만들고 IFC 로더를 준비한 뒤 파일을 로드하면 3D가 화면에 뜬다.

import * as OBC from "@thatopen/components";

const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);

const world = worlds.create();
world.scene = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
components.init();

// IFC 로더 준비 및 로드
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

const buffer = new Uint8Array(await file.arrayBuffer());
const model = await ifcLoader.load(buffer);
world.scene.three.add(model);

ifcLoader.setup()은 내부적으로 web-ifc WASM 모듈을 불러온다. 로드 결과 model은 Three.js 씬에 바로 추가할 수 있는 프래그먼트 메시다.

■ 요소 선택과 속성 표시

뷰어의 핵심 상호작용은 “클릭한 요소가 무엇이고 어떤 속성을 갖는가”이다. 컴포넌트의 하이라이터와 인덱서를 조합하면 선택된 요소의 속성세트를 바로 꺼낼 수 있다.

import * as OBC from "@thatopen/components";

const highlighter = components.get(OBC.Highlighter);
highlighter.setup({ world });

const indexer = components.get(OBC.IfcRelationsIndexer);
await indexer.process(model);

highlighter.events.select.onHighlight.add(async (selection) => {
  for (const id in selection) {
    const expressIDs = selection[id];
    for (const expressID of expressIDs) {
      const psets = await indexer.getEntityRelations(
        model, expressID, "IsDefinedBy");
      console.log("선택 요소 속성:", psets);
      // psets 값을 사이드 패널 DOM에 그려 넣는다
    }
  }
});

이 패턴이 웹 BIM 뷰어의 표준 상호작용이다. 클릭 → expressID 획득 → 관계 인덱스로 속성세트 조회 → 사이드 패널 렌더링으로 이어지며, 여기에 측정·단면(클리핑)·2D 평면 도구를 컴포넌트로 얹어 확장한다.

■ 오픈소스만으로 완성하는 웹 BIM

여기에 저작·편집까지 붙이면 상용 라이선스 없이도 한 바퀴가 돈다. 파라메트릭 모델링과 IFC 입출력을 지원하는 FreeCAD, 블렌더 위에서 IFC를 네이티브 작업 포맷으로 다루는 Bonsai(구 BlenderBIM)가 저작을 맡고, That Open Engine 스택이 웹 뷰어·검토를 맡는 식이다. 모두 IFC라는 개방 표준을 공용 포맷으로 삼기 때문에 도구 사이를 파일로 오갈 수 있고, 이것이 개방형 BIM 흐름의 핵심이다.

■ 눈여겨볼 것

브라우저에서 IFC를 다룰 때 가장 흔한 병목은 파일 크기다. 수백 MB급 모델을 메인 스레드에서 파싱하면 화면이 멈춘다. That Open 스택이 web-ifc를 웹 워커에서 돌리고 형상을 경량 프래그먼트로 변환하는 것도 이 때문이다. 실무 뷰어를 만들 땐 파일을 그대로 넘기기보다, 한 번 프래그먼트로 변환·캐싱해 두고 재사용하는 구조가 사용성을 크게 좌우한다. 또 라이브러리가 IFC.js에서 That Open Engine으로 재편되며 API가 여러 번 바뀌었으므로, 오래된 web-ifc-viewer 예제를 그대로 따라 하기보다 현재 @thatopen/components 문서를 기준으로 삼아야 한다.

■ 이런 분께 도움이 됩니다

웹 기반 BIM 서비스를 기획·개발하는 개발자 — 설치형 뷰어 없이 브라우저만으로 모델 공유·검토 기능을 구현할 수 있다
건설 SaaS 스타트업 — 오픈소스 스택으로 뷰어를 자체 구축해 라이선스 비용을 줄일 수 있다
개방형 BIM에 관심 있는 건축 실무자 — 상용 뷰어 대신 무료 웹 도구로 IFC를 열어보는 대안을 얻는다

■ 참고

공식 문서와 예제는 That Open Company의 docs.thatopen.com과 GitHub(ThatOpen/engine_web-ifc, ThatOpen/engine_components)에서 확인할 수 있다. npm 패키지 이름은 저수준이 web-ifc, 고수준 툴킷이 @thatopen/components다. 과거 자료에서 보이는 web-ifc-three·web-ifc-viewer는 유지보수가 종료된 구성이므로 신규 프로젝트에서는 피하는 편이 낫다.