HTML 이 언리얼과 만나다~!!!!

 

 

 

=================================

=================================

=================================

 

 

 

출처: https://www.unrealengine.com/ko/blog/blui-html-meets-unreal?lang=ko

 

BLUI: HTML 이 언리얼을 만나다

 

제 이름은 Aaron Shea, 컴퓨터 공학과에 재학중인 18 세 학생입니다. 인디 게임 개발이라는 꿈을 수년간 갖고 있다가, 언리얼 엔진 4 덕에 3D 게임 개발에 바로 뛰어들어 갖고 있던 아이디어를 프로토타입으로 만들 수 있었습니다.

UI 는 중요하다

풍성하고 우아한 디자인의 UI 가 있으면 플레이어가 게임을 즐기는 데 큰 도움이 됩니다. 게임의 느낌을 해치지 않으면서 해당 타이틀에 필요한 기능은 모두 갖춘 것이라면 말이지요. 제 기존 전공이었던 웹 개발과 마찬가지로, 비디오 게임 역시 UI 와 UX 는 핵심 개념입니다. 사용자 경험이 좋지 않으면 여러분의 작품을 제대로 즐길 수 있을 만큼 청중을 붙잡아 둘 수가 없습니다.

웹에는 CSS3 애니메이션, 다이내믹 콘텐츠, JavaScript, WebRTC, WebAudio 등 풍성한 대화식 UI 가 가능한 테크놀로지가 가득합니다. 하지만 게임에서 그와 같은 기능을 구현하는 것은 작은 팀에게 있어 지옥같은 일이 되겠지요.

제 솔루션은 웹을 엔진으로 가져오는 것이었습니다.

웹 + UE4 = 대박

 

HTML 기반 UI 시스템 관련 정보를 검색하던 도중, 상용 라이선스 솔루션을 다수 찾았습니다. 분명 쓸만한 오픈 소스 대안이 있을 것 같다는 느낌이 들었는데요. 이 때부터 HTML 기반 인터페이스를 쉽게 바로 렌더링할 수 있는 API 를 제공해 주는 언리얼 엔진 UI 플러그인, BLUI 개발을 시작했습니다. BLUI 는 제 애칭 프로젝트로, 다음 타이틀에 사용하기로 했습니다. 언리얼 개발 커뮤니티에 무언가 돌려줘야 할 것 같다는 느낌이 들어서, 누구나 사용할 수 있도록 GitHub 에 소스를 공개하기로 결정했습니다. 아직 툴이 활발히 개발중이기는 하지만, 꽤나 유연하고 사용할 만 합니다. 언리얼 엔진 4 를 확장해 쓰는 것도 거의 어려울 게 없었는데, 플러그인 시스템이 우아하게 되어 있어서 BLUI 에 매끄러운 느낌을 낼 수 있습니다.

대부분의 (BLUI 같은) UI 시스템은 크롬 Chromium Embedded Framework 를 사용하므로, WebAudio, WebRTC, Web Socket 처럼 웹에 제공되는 재미난 기능이 전부 포함되어 있습니다! 엔진 안에서 미니 브라우저를 돌리는 듯한 느낌이랄까요. 인터페이스 제작에 웹 페이지를 만드는 것 같은 유연성이 전부 확보되어 있습니다. 구글 크롬에서 웹 페이즈를 조사하듯, 엔진내에서 UI 의 요소를 조사해 볼 수 있는 원격 디버거같은 것도 있습니다!

 

유저 인터페이스 개발에 HTML 을 사용하는 데 있어서 가장 좋은 부분은, 매력적인 메인 메뉴를 만든다고 완전 새로운 것을 만드는 법을 배울 필요가 없다는 데 있습니다. 팀에 웹 개발자나 디자이너가 있다면, 말 그대로 그냥 그들한테 맡겨버리면 됩니다. 이미 편하게 작업해왔던 기술을 그대로 사용하면 되거든요. 즉 기존의 인터페이스 제작기를 사용해서 프로토타입 제작 작업을 훨씬 빨리 진행할 수 있다는 뜻입니다.

 

 

위 동영상은 HTML/웹 기반 UI 시스템에 변화를 얼마나 빨리 구현할 수 있는가를 보여줍니다. 컴파일도 없고, 빌드 프로세스도 없이, 그냥 저장하면 끝입니다. 블루프린트를 사용해서 페이지를 새로고치기만 하면 시뮬레이션을 중단할 필요조차 없이 변경사항을 확인할 수도 있습니다.

대부분의 라이브러리는 브라우저를 오가는 일종의 통신이 있습니다. BLUI 는 C++ 메소드 호출이나 블루프린트 노드 호출을 통해 JavaScript 실행이 가능합니다. 비슷하게, 브라우저에서의 이벤트에 바인딩한 뒤, JavaScript 에서 특수 네이티브 메소드를 호출하여 데이터를 엔진에 도로 전송할 수도 있습니다. 심지어 게임 씬 내 오브젝트를 직접 조작할 수도 있습니다:

 

 

 

반응형

 

728x90

 

 

 

=================================

=================================

=================================

 

 

 

재미있는 부분

언리얼 엔진과 함께 웹 기술을 활용하면 매우 재미난 아이디어가 가능합니다. Node.js 를 사용하면 크로스 플랫폼 채팅창을 만들 수 있으며, 필요한 것은 딱 하나, 웹 페이지만 있으면 됩니다. 게임내 사용자와 브라우저 사용자가 같은 채팅창을 보면서, 게임 월드 내 사용자와 대화할 수 있는 것입니다.

 

기존 툴을 사용해서 부드러운 애니메이션 메뉴를 만들 수도 있습니다. 여기에 제가 가장 추천하는 툴은 Adobe Edge Animate 입니다. Edge 같은 툴을 사용하면 UI 를 뚝딱 만들어거 게임에 빠르게 연결하는 것이 가능합니다. 엔진 외부에서 UI 부분을 테스트하는 것도 가능하므로, 전에 없이 빠른 속도의 개발자와 디자이너의 작업이 가능합니다.

마지막 꼼수

UI 에 HTML 을 사용하기로 결정하신 분들께 드릴 꼼수가 몇 가지 있습니다:

• 스케일이나 반응성을 고려해서 페이지를 디자인하세요. UMG 처럼요. UI 는 여러 화면 해상도에 맞아야 합니다.
• 개발 머신에 로컬 웹 서버를 돌리면 애셋을 편집한 뒤 게임에 다시 추가할 필요 없이 바로 브라우저에서 리로드할 수 있습니다.
• (외부 서버에서) 외부 리소스를 로드하는 경우, 여전히 플레이어의 머신에서 실행되는 브라우저라는 점을 기억하세요. 보안 문제가 있을 수 있으니, 현명하게!
• 로컬 스토리지와 JavaScript 를 적극 활용하세요. BLUI 에는 특수 캐시 디렉토리 경로가 있어 로컬 스토리지에 실제 정보를 저장하며, 다음 번 게임 부팅시에도 그 정보가 거기 있다는 뜻입니다. JavaScript 는 쉽게 작성할 수 있으며, HTML 에 빠른 동적인 변화가 가능합니다.
• SVG 이미지를 추천합니다. 무한 스케일(대략 4K 정도)에다, JavaScript 라이브러리나 Adobe Edge 같은 툴로 애니메이팅 가능하기 때문입니다.
• 창의력이 중요합니다! 웹의 뛰어난 기술을 전부 활용해서 HUD, 대화식 컴퓨터 화면, 심지어 게임내 애니메이션 빌보드까지도 만들 수 있습니다!

 

BLUI 는 아직 개발중인데도 최근 언리얼 데브 그랜트 수상자에 선발되었다는 사실을 알게 되었습니다! 앞으로 BLUI 가 더욱 많은 플랫폼에 깔끔하게 호환될 수 있도록 노력하겠습니다.

BLUI 관련 상세 정보는 제 UE4 개발 사이트를 방문해 주세요:

http://ue4.ninja/blui

https://github.com/aaron524/BLUI

피드백은 제 개인 사이트에 부탁드립니다:

http://aaronshea.me & https://blog.aaronshea.me

즐거운 UI 개발 되세요!

 

 

=================================

=================================

=================================