모바일 웹 기반 부품 및 기자재 컨텐츠 가시화 기술 동향

(1)

가시화 기술 동향

유 병 현 KIST 영상미디어연구단 KRCF 선임연구원 ㅣ e-mail : [email protected]

이 글에서는 이례적인 속도로 급변하는 모바일 스마트 디바이스, 증강현실, 웨어러블 디바이스 등 모바일 웹 관련 시 장의 폭발적인 성장에 발맞추어 모바일 웹 환경에서의 부품 및 기자재 컨텐츠 가시화 기술의 동향과 기술적 이슈를 살펴본다.

3차원 웹 기술

인터넷상에서 3D 데이터의 표현과 실시간 가시화를 목적으로 개발된 국제표준인 VRML(Virtual Reality Modeling Language)과 X3D(Extensible 3D)는 민간 표 준화 단체인 Web3D 컨소시엄이 주축이 되어 개발하고 표준화 기구인 ISO(International Organization for Standardization)와 IEC(International Electrotechnical Commission)의 JTC(Joint Technical Committee) 중 하 나인 JTC 1 산하의 SC(Subcommittee) 24(이하 ISO/IEC JTC 1/SC 24)를 통하여 국제표준(ISO/IEC 14772

¹

, 19775

²

, 19776

³

및 19777

⁴

)으로 인준되었다. VRML 1.0 과 VRML97을 거쳐 이후 인터넷 환경의 변화와 함께 HTML 4.0의 보급 이후 XML기반의 엔코딩이 널리 사용 되면서 VRML의 XML 기반 엔코딩으로 X3D가 개발되 었으며, 이후 CAD 및 GIS를 포함한 웹 기반 가상현실 분야에서 널리 사용되어 현재 가장 널리 사용되는 3D 포맷 중의 하나로 자리매김하여 현재는 2013년에 인준

된 X3D 3.3이 널리 사용되고 있다.

과거 HTML1.0부터 HTML4.0 시대의 3D 웹 기술은 월드와이드웹 컨소시엄(이하 W3C)이 제정하는 웹 문 서의 표준인 HTML의 제약으로 인하여 플러그인의 사 용이 필수적이었다. 인터넷 상에서 3D 가시화를 가능 하도록 하는 기술로서 Adobe의 Flash와 Microsoft의 Silverlight도 이와 같이 플러그인을 사용하는 기술로 3D 컨텐츠의 가시화에 사용되어 왔다. 최근 모바일 게 임에서 널리 사용되고 있는 Unity3D 역시 웹 플레이어 플러그인을 통하여 3D 컨텐츠를 가시화한다. 앞서 언 급한 국제표준인 X3D도 과거에는 C++ 또는 자바언어 를 이용하여 구현된 플러그인이나 독립적인 플레이어 형태의 브라우저에서만 3D 모델을 가시화할 수 있었으 며, X3D 플레이어 중 CAD 데이터를 가시화하기 위한 주요 컴포넌트인 CAD geometry 컴포넌트와 대용량 CAD 모델의 전송을 위한 바이너리 압축 엔코딩 (Compressed Binary Encoding)을 지원하는 BS Contact 와 Xj3D등이 널리 사용되어 왔다. 특히 Xj3D는 3D 컨

주: 1. ISO/IEC 14772: Information technology - Computer graphics and image processing - The Virtual Reality Modeling Language.

주: 2. ISO/IEC 19775: Information technology - Computer graphics, image processing and environmental data representation - Extensible

3D (X3D).

주: 3. ISO/IEC 19776: Information technology - Computer graphics, image processing and environmental data representation - Extensible

3D (X3D) encodings.

주: 4. ISO/IEC CD 19777-1: Information technology - Computer graphics and image processing - Extensible 3D (X3D) language bindings.

(2)

텐츠와 웹 브라우저 사이의 상호작용을 가능하게 하는 SAI(Scene Authoring Interface)를 위한 자바 언어를 지 원하는 장점으로 인하여 그림 1과 같이 복잡한 부품모 델이나 기자재 데이터를 웹 기반으로 가시화하는 데 활 발하게 사용되어 왔다

^{5, 6}

. 그러나 표준 웹 브라우저에 추가로 설치되어 작동하는 브라우저 플러그인 형태의 플레이어들은 사용자들이 사용하는 웹 브라우저에 플 러그인이 설치되어 있지 않을 경우 3D 컨텐츠 자체를 보여주지 못하는 불편함을 가지고 있으며, Xj3D와 같은 자바기반의 플레이어는 인터넷 환경에서 쉽게 구동할 수 있는 장점은 있으나, 자바 환경에 기인하는 초기 설 정 및 성능의 문제에서 자유롭지 못하여 주로 독립적인 애플리케이션으로 개발되어 왔다. 또한 이러한 웹 기반 3D 컨텐츠 가시화 방법들은 컨텐츠의 측면에서는 웹 기반이라고 할 수 있으나, 애플릿 등의 형태로 표준 웹 브라우저와는 별개의 프로그램으로 구동되는 특성으로 인하여 사용성 측면에서 표준 웹 환경에서 작동된다고 보기는 어렵다.

최근에는 2014년 10월 발표된 HTML5의 표준화와 저 변 확대에 발맞추어 HTML5가 제공하는 표준 기능들이 플러그인 없이는 불가능하던 기능들을 대체해감에 따 라 순수 HTML5 표준을 따르는 3D 가시화 기술로 발전 해가고 있다. 특히 최근 주요 웹 브라우저 개발사들이 Adobe Flash등의 플러그인에서 사용하는 NPAPI (Netscape Plugin API)의 지원 종료에 대한 계획을 발표 하여, 표준 웹 환경만으로 작동되는 웹 기반 3D 컨텐츠 가시화의 수요가 증가하고 있다. 표준 웹 기반 3D 컨텐 츠 가시화는 어떠한 표준 웹 브라우저에서도 3D 컨텐 츠를 애플리케이션 수준으로 가시화하고 정상적으로 동작하여, 웹 브라우저가 구동되는 다양한 플랫폼에서 동일한 컨텐츠와 애플리케이션을 제공할 수 있는 장점

이 있다.

HTML5 표준 기반의 선언적 3D 표현 및 가시화

HTML5 표준을 따르는 3D 컨텐츠 가시화는 데스크 톱 환경뿐 아니라 표준 웹 브라우저를 탑재한 스마트폰 과 스마트TV 및 태블릿 등 다양한 모바일 디바이스에 서 추가적인 설정이나 설치 과정을 거치지 않고 3D컨 텐츠를 포함한 애플리케이션을 수행할 수 있는 장점이 있다. HTML5는 2014년 10월 W3C에 의하여 공식 발표 된 웹 기반 컨텐츠의 구조적 표현을 위한 웹 표준 언어 로 기존의 텍스트와 하이퍼링크만 표시하던 HTML과 달리 멀티미디어 등 다양한 애플리케이션까지 표현하 고 제공하도록 진화한 웹 표준 언어로서 마크 업 태그 인 HTML 요소와 CSS3 그리고 자바스크립트를 통칭한 다. 특히 3D 드로잉 요소인 Canvas 3D를 통한 3D 그래 픽 표현을 지원하여 WebGL을 기반으로 3D 애플리케 이션 개발을 돕는 자바스크립트 3D 엔진을 활용할 수

주: 5. 조귀목, 이효광, 서혜원, X3D를 활용한 웹 기반 VRBT 시스템 개발, 한국 CAD/CAM 학회 학술발표회 논문집, pp.227-232, 2009.

주: 6. 송덕용, 배성훈, 황진상, Xj3D를 활용한 웹 기반 3D 설비정보관리시스템 개발, 한국 CAD/CAM 학회 학술발표회 논문집, pp.1260-1262,

2014.

주: 7. 이미지 제공: (주) 부품디비, http://www.partdb.com

그림 1

Xj3D를 이용한 웹 기반 제품구조 가시화(기자재 정비

교본)의 예

⁷

(3)

있다. 또한 CSS3에는 투명도, 그림자, 둥근 모서리, 다 중 컬럼 레이아웃, 3D 트랜스폼 등의 새로운 스타일 요 소가 추가되었다.

HTML5의 기 능 적 확 장 에 힘 입 어 선 언 적 3D (Declarative 3D) 컨텐츠를 텍스트나 비디오, 오디오 등 과 같은 웹 환경의 기본적 요소로 관리할 수 있는 기법 들이 개발되기 시작하였다. X3DOM

^{9, 10}

, XML3D

¹¹

등과 같은 선언적 3D 표현을 위한 HTML5 기반의 자바스크 립트 라이브러리들이 개발되었다. 이와 같은 선언적 3D 표현 기법들은 그림 2와 같이 자바스크립트 API로 구성된 Polyfill 계층과 HTML의 DOM(Document Object Model) 계층을 제공하여 표준 웹 브라우저만으 로 3D 컨텐츠를 구조적으로 표현하고 가시화할 수 있 다. 특히 X3DOM은 기존의 웹 기반 3D 기술과 달리 국 제표준인 X3D 포맷의 컨텐츠를 HTML의 DOM 트리로 직접 통합하여, X3D 컨텐츠를 HTML 문서 내에 직접 표현하고 X3DOM 자바스크립트 API를 표준 웹 브라우 저가 제공하는 기능을 이용하여 그림 3과 같이 3D 컨텐

츠 가시화 및 애플리케이션 수행을 가능하게 한다. 이 와 같은 HTML5 기반의 선언적 3D 컨텐츠 표현 방식은 그 효용성이 검증되어가는 과정에 있으며 웹 표준으로 써의 파급력을 인정받으면서 X3D 국제 표준의 차기 버 전(X3D 4.0)에서 이와 같은 표현 방식을 포함할 것을 고려하기에 이르렀다.

제품 모델 데이터의 웹 기반 가시화

ISO TC(Technical Committee) 184 산하의 SC 4(이하 ISO TC 184/SC 4)에서는 제품 모델 데이터 교환에 관한 국제표준(ISO 10303

¹²

)인 STEP(STandard for the Exchange of Product model data)의 제정을 담당하고 있으며, 이에 대한 원활하고 효과적인 가시화를 위하여 JT, U3D, X3D, Collada와 같은 경량화가 가능한 가시화 포맷에 대하여 그 적절성을 평가하고 관련 표준화를 진 행하여 왔다. 그 결과 JT나 3D PDF는 현재 활발히 활용 되고 있는 CAD, PDM, PLM 솔루션들과의 긴밀성과 호 환성을 유지하고 CAD 산업계에서의 요구사항들을 반

주: 8. 이미지 제공: World Wide Web Consortium, https://www.w3.org/community/declarative3d

주: 9. J. Behr, P. Eschler, Y. Jung, M. Z?llner, X3DOM: A DOM-based HTML5/X3D integration model, International Conference on 3D Web

Technology, Darmstadt, Germany, pp.127-135, 2009.

주: 10. http://www.x3dom.org 주: 11. http://www.xml3d.org

주: 12. ISO 10303-1: Industrial automation systems and integration - Product data representation and exchange.

그림 2

HTML5와 선언적3D 컨텐츠 기반의 웹 애플리케이션

구조

⁸

그림 3

X3DOM을 이용한 표준 웹 브라우저 환경에서의

CAD 모델 가시화

(4)

영하면서 더욱 효과적으로 표준화를 진행하고 있다.

한편, Web3D 컨소시엄 산하의 CAD(Computer Aided Design) Working Group(이하 CAD WG)은 앞서 언급하였던 제품형상정보의 경량화 웹 가시화를 위하 여 STEP 데이터를 X3D 포맷으로 변환하는 변환기

¹³

의 개발을 주도하였으며, 각 메이저 CAD 시스템에서 X3D 및 VRML로의 경량 웹 포맷으로 변환을 지원하고 있어, 기존의 CAD 데이터를 X3D로 변환하여 HTML5와 선언 적 3D 컨텐츠 기반의 경량 웹 가시화에 사용하는 경향 이 증가하고 있다. 특히 최근에는 CAD 데이터의 경량 가시화를 위한 주요 컴포넌트인 CAD geometry 컴포넌 트를 선언적 3D 컨텐츠 기법으로 표현할 수 있는 X3DOM API로 구현하는 성과

¹⁴

를 보여주고 있어, 부품 및 기자재 컨텐츠의 표준 HTML5 기반의 가시화가 가 능한 실정이다.

모바일 웹 기술 동향

W3C의 HTML5 표준의 확정 이후 Microsoft의 Internet Explorer, Google Chrome, Mozilla Firefox 및 Apple Safari와 같은 메이저 웹 브라우저 제작사들은 모 두 WebGL 및 CSS3와 같은 3D 컨텐츠 표현을 위한 HTML5의 표준을 지원하고 있어 3D 컨텐츠를 애플리 케이션 수준으로 수용하는 웹 환경의 변화에 박차를 가 하고 있다. 뿐만 아니라 최근 휴대용 정보기기들이 고 성능 영상처리기능과 함께 프로세서의 성능이 향상되 어 데스크톱 수준의 3D 컨텐츠의 가시화가 모바일 환 경에서도 충분히 구현이 가능한 수준에 이르렀다. 이에 따라 스마트폰 등 모바일 디바이스에서도 WebGL을 지 원하는 HTML5 기반의 웹 브라우저의 구동이 가능해져 현재는 표 1과 같이 다양한 모바일 플랫폼의 웹 브라우 저에서 WebGL및 HTML5 표준을 지원하고 있다. 따라

서 스마트폰의 HTML5 지원 웹 브라우저에서 어떠한 추가적인 설정과정도 없이 HTML5 표준 및 선언적 3D 가시화 기법을 이용한 X3D 기반의 경량 웹 가시화 기 술을 사용할 수 있다. 즉, 그림 4와 같이 웹 표준만을 이 용하여 모바일 웹 환경에서도 WebGL 및 HTML5 표준 을 이용하여 X3DOM을 사용한 부품 및 기자재 컨텐츠 의 가시화 및 형상 정보와 구조 정보의 표현이 가능한 것이다. 이제는 한 발 더 나아가 하나의 컨텐츠 및 애플 리케이션이 데스크톱뿐만 아니라 다양한 모바일 디바 이스의 폼팩터에 맞도록 반응형 웹 컨텐츠로 개발되고 있다. 그림 4의 좌상단과 우하단의 기자재 컨텐츠는 동 일한 부품들의 3D 컨텐츠로 구성된 것이나 애플리케이 션을 구동하는 모바일 디바이스(좌상단: 아이패드와 Safari 웹 브라우저, 우하단: 안드로이드 스마트폰과

주: 13. 이효광, 송덕용, 황진상, CAD 어셈블리에 대한 STEP-to-X3D 변환 및 X3D 기반 형상정보와 구조정보의 표현, 한국 CAD/CAM학회 학 술발표회 논문집, pp.505-507, 2013.

주: 14. http://www.web3d.org/wiki/index.php/X3DOM_CAD

그림 4

모바일 디바이스(태블릿 및 스마트폰)에서 웹 기반 부

품 및 기자재 가시화 모습

(5)

Firefox 웹브라우저)의 화면 크기 및 조작 방법에 따라 적절한 컨텐츠를 가시화하는 것이 가능하다.

최근 스마트폰 및 태블릿 등 휴대용 정보기기들이 일 반 소비자 시장에 급속히 보급되면서 현실 공간에 가상 의 정보를 합성하여 보여주는 증강현실(AR; Augmented Reality) 기술에 대한 관심도 함께 높아졌다. 비전 기반의 모바일 증강현실 기술들이 발전해 가면서 Metaio

^{15, 16}

, Qualcomm

¹⁷

등의 증강현실 기술을 이용한 웹 기반 모 바일 증강현실 기술의 개발에 박차를 가하고 있다. 앞서

기술한 W3C의 HTML5 표준 동향과 Web3D 컨소시엄 의 선언적 3D 컨텐츠 표현 기법의 발전에 더하여, 모바 일 컴퓨터 그래픽스의 산업계 표준을 주도하고 있는 Khronos 그룹

¹⁸

의 컴퓨터 비전 및 증강현실 관련 기술 의 변화에 비추어 볼 때 향후 모바일 증강현실 컨텐츠 또한 급격한 속도로 웹 기반 환경으로 변모할 것으로 기 대되며 부품 및 기자재 가시화 기술 또한 웹 기반의 모 바일 증강현실

¹⁹

환경으로 급격히 변모할 것이다.

주: 15. http://www.metaio.com/customers/case-studies/window-to-the-world

주: 16. http://www.metaio.com/customers/case-studies/kuka-systems-verifying-the-layout-of-robot-facilities 주: 17. https://www.qualcomm.com/products/vuforia

주: 18. https://www.khronos.org

주: 19. S. Ahn, H. Ko, and B. Yoo, Webizing mobile augmented reality content, New Review of Hypermedia and Multimedia, 20(1), pp.79-

100, 2014.

주: 20. http://mobilehtml5.org

Feature Safari iOS Android Google Amazon BlackBerry Nokia Internet Opera

Firefox

Browser Chrome Silk Browser Browser Explorer Mobile

Platform iPhone, iPad Phones &

Android 4.0+ Kindle Fire Phones Nokia X Windows Android

Android

Tablet Phone & Symbian

Versions tested 3.2 to 8.1 1.5 to 4.3 18 to 40b 1.0 to 2.0 5.0 to 7.1 1.0 9 to 11 11 to 26 6 to 34b

Canvas API yes yes yes yes yes yes yes yes yes

CSS 3 Basic yes yes yes yes yes

yes yes yes yes

6.0 CSS 3

yes yes

yes yes yes

yes yes yes yes

Transforms 2D 2.0+ 6.0

CSS 3

yes yes

yes no no yes yes yes yes

Transforms 3D 3.0+ 11+ 14+ 11+

CSS 3

yes yes

yes yes yes

yes yes

Transitions 2.0+ 6.0 10+

CSS 3

yes yes

yes no yes

yes yes yes

Animations 2.0+ 6.0 10+ 12.1+ yes

CSS3 Regions yes

no yes

no no no yes yes

7.0+ 30+ flag 10+ 17+ flag no

WebGL yes yes yes

no no no yes yes

8.0b+ Specific device 30+ 11+ 12+(android) yes

Navigation

8.0 only yes

yes no no no yes yes yes

Timing API 4.0+ 14+ 7+

표 1

모바일 플랫폼에서 웹 브라우저의 WebGL 및 HTML5 지원 현황

²⁰