Advanced
Implementation of an User Interface Developing Tool for 3D Simulator
Implementation of an User Interface Developing Tool for 3D Simulator
Journal of Korea Multimedia Society. 2016. Feb, 19(2): 504-511
Copyright © 2016, Korea Multimedia Society
  • Received : January 22, 2016
  • Accepted : January 29, 2016
  • Published : February 28, 2016
Download
PDF
e-PUB
PubReader
PPT
Export by style
Article
Author
Metrics
Cited by
About the Authors
가림, 윤
Dept. of IT Convergence and Application Enginnering, the College of Engineering, Pukyong National University
준영, 전
Dept. of IT Convergence and Application Enginnering, the College of Engineering, Pukyong National University
영봉, 김
Dept. of IT Convergence and Application Enginnering, the College of Engineering, Pukyong National University
ybkim@pknu.ac.kr

Abstract
3D simulation programs or games on a smart phone and a personal computer have often employed 3D graphic processing techniques and 3D graphical views. However, the user interfaces in those 3D programs have sticked to take a typical 2D style user interface and thus the combination of a 2D user interface view and a 3D simulation view give us a mismatched sense. Since a 2D user interface has been based on the windows controls, it causes sometime DC conflicts between a simulation view and an interface view. Therefore, we will implement the UI developing tool which can be inserted into the pipeline structure for the development of a 3D simulation software and also follows the view-handler design pattern in Microsoft windows system. It will provide various graphical effects such as the deformation of UI depending on the view direction of simulation view and the sitting pose of user. This developing tool gives the natural user interface which heightens the sense of unity with a given 3D simulation view.
Keywords
1. 서 론
높은 사양의 하드웨어가 속속 개발 되고 있고, 초고속 인터넷의 유무선 서비스가 가능해지고, 특히 애플의 아이폰이 출시된 이후로 스마트 폰과 같은 소형 기기들이 일반 사용자로부터 각광을 받고 있다. 아이폰이나 안드로이드 폰과 같은 소형기기들의 보급이 일반화 되면서 휴대전화의 기능뿐만 아니라 일정 관리, 네비게이션, 게임 등의 일상생활에 활용 가능한 다양한 어플리케이션들이 일반인들의 주요 관심 사항이 되고 있다 [1] .
지금까지 개발된 많은 어플리케이션들은 WinAPI 및 MFC 또는 AWT 및 Swing 같은 윈도우 컨트롤 기반 하에서 만들어져 왔다. 하지만 사용자들의 눈높이가 높아짐에 따라 다양한 그래픽 및 화려한 퍼포먼스를 요구하게 되었다. 아래 Fig. 1 에서 보여준 게임이나 시뮬레이션 같은 기존의 3차원 처리 기술이 필요한 어플리케이션 뿐만 아니라 일반 어플리케이션에서도 3차원 그래픽 처리 기술이 적용되기를 바라고 있다. 이에 따라 다양한 3차원 그래픽 프로그램 환경에서의 사용자 인터페이스의 중요성 또한 커지고 있다. 또한 사용자의 편이성을 위한 사용자 경험(User Experience, UX)을 고려한 사용자 인터페이스, 3차원 사용자 인터페이스 등의 다양한 요구가 포함되기를 기대하고 있다.
PPT Slide
Lager Image
3D applications and its user interface.
지금까지 사용되어온 일반 3차원 어플리케이션들은 3차원 렌더링 영역과 윈도우즈 기반의 사용자 인터페이스를 별도의 화면으로 처리하여 합성하는 방식을 사용하여 왔다. 이에 따라 사용자인터페이스부와 3차원 렌더링부 사이에 DC충돌로 인한 격자 현상이 종종 발생하고, 사용자와의 상호작용 화면은 2차원과 3차원의 결합으로 어색한 모습을 보여 주기도 한다. 또한 정형화된 윈도우 컨트롤의 사용자 인터페이스에서는 다양한 그래픽 효과를 기대하기도 어렵다. 따라서 게임처럼 사용자 인터페이스가 렌더링 영역 내에 프로그램의 일부처럼 구현하는 요구가 높아지고 있지만, 3차원 렌더링부에 사용자 인터페이스를 일일이 직접 그려주어야 하고, 이벤트 감지 및 메시지 처리 또한 직접 구현해야하는 개발 비용 및 시간이 늘어나게 되는 문제점을 가지고 있다 [2 , 3] .
본 연구에서는 위의 문제를 해결하기 위한 3차원 사용자 인터페이스 개발도구를 설계하고 구현할 것이다. 먼저 사용자 인터페이스가 렌더링 영역 내에 프로그램의 일부처럼 보이도록 일반적인 3차원 그래픽 프로그램 개발의 구조 내에서 사용자 인터페이스를 구현하고, 이를 통해 Shader 및 3차원 모델을 사용하는 등의 다양한 그래픽 효과 적용이 가능하도록 한다. 또 사용자 인터페이스를 일일이 그리거나, 이벤트 감지 및 메시지 처리를 매번 구현 하지 않도록 뷰-핸들러 디자인 패턴 구조를 적용해 개발의 용이성과 이식성을 높이도록 한다. 여기에 다양한 구조가 적용가능 하도록 설계해 UX디자인을 고려하여 유저의 편이성을 높일 것이다.
2. 관련연구
- 2.1 사용자경험 디자인
사용자 경험 디자인(UX)은 다양한 소프트웨어를 사용하면서 느낀 경험이라는 추상적인 인간의 감성을 자극할 수 있는 요소가 시각적이고 감성적 요소인 디자인과 결합된 것으로, 사용자 목적 달성의 과정을 구현하여 사용자 인터페이스를 만드는 것이다. 오늘날 디자이너가 시각적 요소를 디자인하는데 있어서 사용자 경험은 디자인의 승패를 좌우할 만큼 중요한 요소로 자리를 잡아가고 있다. 경험 디자인의 사전적 의미는 ‘사용자가 제품, 서비스 혹은 시스템을 사용하거나 체험하는데 있어 지각하는 것이 가능한 조직적 상호교감적인 모델을 창조하고 개발하는 디자인의 한 분야’라고 정의될 수 있겠다 [4 , 5] . 하지만 경험이란 실체가 없기 때문에 경험 자체 객관적으로 디자인이 불가능하며, 경험의 주체가 개인이고, 스스로 간직하고 있는 것이기 때문에 객관적인 잣대로 개개인의 경험한 내용 전부를 있는 그대로 디자인할 수는 없다. 경험 자체를 디자인할 수 없지만 인터페이스, 환경, 시나리오와 같이 경험이 발생하는 상황(서비스)이나 상황을 바꿀 수 있는 제품이나 기능 등 사용자 경험과 관련된 디자인 요소는 만들 수 있다. 이와같이 ‘디자인 가능한 요소’로 놓고 볼 때 경험디자인은 사용자의 피드백을 ‘경험’이라는 시각으로 이해함으로써 그들의 요구를 보다 실질적으로 접근, 새롭고 개선된 경험을 제공하기 위한 디자인이라 할 수 있다. 디자인 가능한 요소라 함은 제품의 기능, 형태, 사회적 의미와 기호, 정보, 유용성 그리고 외관을 구성하는 시각적 요소 등을 예로 들 수 있다. 이를 통하여 사용자들은 컨텐츠를 편리하게 사용할 수 있는 사용성이 향상되고, 이에 따라 컨텐츠에 대한 사용자들의 만족도 상승과 컨텐츠 가치 향상으로 이어진다 [6 - 9] .
- 2.2 3D 유저 인터페이스
3차원 유저 인터페이스는 Fig. 2 와 같이 3D가 도입되면서 각광받기 시작한 가상현실(virtual reality) 및 게임 내에서 캐릭터 및 유저가 직관적으로 활용 가능한 사용자 인터페이스를 말한다. 즉 2차원 평면인 모니터 상에서 대상 물체의 보이지 않는 부분 및 숨겨진 부분을 사용자의 능동적인 공간 구조 변화에 의하여 화면의 전환 없이 즉시적으로 확인이 가능한 사용자 인터페이스이다. 젤저(Zeltzer)는 가상현실의 특징을 자율성(Autonomy), 상호작용성(Interaction), 그리고 현재성(Presence)으로 구분하였다 [10] . 여기서 자율성이란 현실과 같은 물리적 속성을 가상현실의 요소가 가지고 있으면서 실제와 같이 움직일 수 있는 행위의 실제성을 의미한다. 2차원과 3차원 인터페이스의 가장 큰 차이점 중 하나는 자율성에서 찾을 수 있는데 그것은 인터페이스의 3차원 회전(rotation)과 Z축의 깊이 감을 통해 정보의 탐색구조와 체계화를 가능하게 한다는 점이다. 다양한 시점에서 자유로운 3차원 공간 내 상황의 확인 권한을 부여하여 기존 2차원 전략시뮬레이션의 영역을 확대시켰다. 가상현실에서의 상호작용성(interaction)이란 가상환경을 다루고자 하는 사용자의 모든 행위를 의미하며 이는 탐색(Navigation), 이동(Tracking), 제어(Control), 피드백(Feedback)으로 나눌 수 있다 [11] . 2차원 인터페이스와 3차원 인터페이스의 상호작용성의 차이는 대상 행동 조작의 차이이다. 2차원 인터페이스의 행동영역, 즉 상하좌우의 메뉴이동에서 3차원의 개념, 즉 Z축을 통한 제 3행동인 깊이의 이동 및 회전 등의 행동이 가능해 진다. 따라서 Z축을 이용한 새로운 데이터의 인지력은 활용하기에 따라 무한한 능력을 지닐 수 있을 것이다 [12] .
PPT Slide
Lager Image
General applications and 3D user interface in game.
3. 3차원 사용자 인터페이스 개발 도구를 위한 접근 방법
본 장에서는 3차원 그래픽 프로그램 개발을 위한 사용자 인터페이스 개발도구를 설계 및 구현에 있어 다음과 같은 접근을 통한 방법을 사용하고자 한다. 먼저 개발 시뮬레이션 소프트웨어의 구조적 관점에서의 접근을 시도하고, 뷰-핸들러 디자인 패턴에 기초한 사용자 인터페이스 개발 방법론을 사용하고자 한다.
- 3.1 구조적 접근
기존에 볼 수 있었던 일반 3차원 어플리케이션은 응용 프로그램의 3차원 뷰를 생성하는 렌더링 영역과 MFC, WinAPI, AWT, Swing 등의 윈도우 기반 사용자 인터페이스(GUI)를 분리하여 개발하는 일반적 방법을 사용하고 있다. 이에 따라 Fig. 3 의 왼쪽 위쪽에 보여주는 바와 같이 유저인터페이스부와 3차원 렌더링부의 DC충돌로 인한 격자 현상이 간혹 발생하기도 하고, 사용자와의 상호작용 화면은 2차원의 사용자 인터페이스와 3차원의 시뮬레이션 뷰가 결합되어 하나의 화면에 나타나므로 인해서 어색한 모습을 보여 주기도 한다. 또한 정형화된 윈도우 컨트롤의 사용자 인터페이스에서는 다양한 그래픽 효과를 제공하는 것이 쉽지 않다.
PPT Slide
Lager Image
Grid phenomenons by DC conflicts in 3D games.
이를 해결하기 Fig. 4 와 같이 구조적으로 사용자 인터페이스 파트를 응용 프로그램의 개발 과정에 내포하게 하므로써 다양한 그래픽 효과를 적용하여 자연스러운 화면을 생성할 수 있다. 사용자 인터페이스는 마지막 Display 영역에서 적절하게 화면에 표시하는 작업을 하여야 한다.
PPT Slide
Lager Image
Combination of a 3D application and its user interface.
- 3.2 뷰-핸들러(View-Handler) 디자인 패턴
3차원 그래픽 프로그램의 개발 과정에서 사용자 인터페이스를 구현하기 위해선 매번 일일이 각각의 컨트롤들을 그리거나, 이벤트 감지 및 메시지 처리를 매번 구현 해야만 한다. 이런 문제로 인해 기존의 시스템들은 사용자 인터페이스를 따로 분리하여 개발·사용하였다. 또한 사용자 인터페이스를 포함하여 개발할 경우에는 개발 비용 및 시간이 발생해 어떤 일정한 구조 및 개발 도구를 필요로 한다. 이에 본 연구에서는 윈도우즈 시스템에서 제공하는 뷰-핸들러 디자인 패턴 구조를 적용해 개발의 용이성과 이식성을 높이는 접근 방법을 사용하고자 한다. 또 여기에 다양한 구조가 적용가능 하도록 설계해 UX디자인을 고려하여 유저의 편이성을 높이고자 한다.
뷰-핸들러 디자인 패턴의 구조는 다음 Fig. 5 와 같이 뷰핸들러, 추상뷰(Abstract View), 상세뷰(Specific View), 보조(Supplier)로 구성된다. 각각의 기능을 살펴보면 뷰-핸들러는 응용 소프트웨어 시스템의 뷰들을 열고 조작하고 닫는 역할 등의 모든 뷰를 관리하는 역할을 담당한다. 추상 뷰는 모든 뷰에 공통적으로 포함되는 기능들을 정의한 컴포넌트이며, 상세 뷰는 추상 뷰로 부터 파생된 것으로 추상뷰의 인터페이스 기능과 추가 기능을 구현한 컴포넌트로 사용자 인터페이스의 버튼과 같이 작은 기능들을 구현한 것이다. 보조는 뷰가 화면에 렌더링 할 내용에 대해 필요한 데이터를 제공하는 역할을 한다 [13] .
PPT Slide
Lager Image
Design pattern structure using view-handler.
뷰-핸들러 디자인 패턴을 구현하기 위해서는 다음과 같이 Top-Down 방식에 기초한 4단계로 이루어진다.
단계1. 개발 프로그램을 분석하여 응용 프로그램에 필요한 뷰들을 모두 나열한다.
단계2. 모든 뷰들에 대한 분석을 통해 그림 5 의 상세뷰에 나타난 것과 같이 공통의 인터페이스를 정의한다.
단계3. 단계2에서 만들어진 상세뷰 클래스를 구현한다.
단계4. 만들어진 모든 뷰들을 생성, 갱신, 삭제할 수 있는 뷰-핸들러 클래스를 구현한다.
아래 Fig. 6 는 뷰-핸들러에서의 동작 패턴을 차례로 보여준 예이다. 즉, 제일 먼저 사용자가 새 창을 열기위해 View를 호출하여 뷰-핸들러가 해당 뷰 객체를 만들고 초기화 한 다음에 보조(supplier)에 등록한다. 열린 뷰에 대한 자체목록에 새 뷰를 추가한 다음에 자신을 디스플레이하기 위해 뷰들을 열어 둔 뒤에 보조 컴포넌트로 부터 데이터를 가져온다.
PPT Slide
Lager Image
An example in processing pattern of view-handler.
4. 3차원 그래픽 프로그램을 위한 사용자 인터페이스 개발 도구 구현
제안한 방법을 통해 구현된 시스템은 다음 Fig. 7 과 같이 주요 데이터를 처리하는 부분과 렌더링과 관련된 부분을 분리해 처리하는 구조를 가진다. 즉 유저인터페이스에 3차원 그래픽 프로그램에서 게임이나 시뮬레이션처럼 물리 프로세싱을 필요로 하는 경우는 주 쓰레드에서 모두 처리하고, 기존의 처리된 데이터를 바탕으로 화면에 렌더링하거나 보여줄 데이터를 처리하는 작업은 렌더러 쓰레드에서 처리한다.
PPT Slide
Lager Image
Processing structure in multi-threads.
뷰핸들러 구조를 바탕으로 제시된 유저인터페이스의 개발 구조는 Fig. 8 과 같으며, 뷰-핸들러 아래에 있는 상세뷰에 모든 렌더러 관련 콤포넌트를 포함하는 구조로 되어 있다. 제안한 3차원 그래픽 프로그램의 사용자 인터페이스 개발도구는 응용 프로그램의 내부에 녹아들어야 하기 때문에 WinAPI환경에서의 OpenGL 기반으로 구현하였다. 단 DirectX와 같은 다른 3차원 API 라이브러리를 사용하여 구현할 때에도 Draw함수 부분만 포팅을 통한 적용이 가능하도록 구현하면 프로그램의 이식성을 높일 수 있다.
PPT Slide
Lager Image
Developing structure of user interface with view-handler pattern.
제시된 사용자 인터페이스 개발도구를 활용한 실제적인 사용자 인터페이스 설계 절차는 다음과 같은 순서를 따른다.
단계1. 화면에 나타날 각종 뷰들을 핸들하는 객체인 뷰핸들러(View Handler)객체를 설계한다.
단계2. 사용자와의 인터페이스에 필요한 버튼이나 메뉴와 같은 각종 객체들에 대한 뷰를 생성하고, 객체에 대한 화면 배치, 텍스쳐, 텍스트 등의 속성을 설정한다.
단계3. 사용자의 입출력 기능에 연계된 이벤트 콜백 함수를 구현하고, 해당 함수를 연결한다.
단계4. 뷰핸들러 객체인 FControl Manager에서는 현재 화면에 새롭게 나타나는 뷰의 객체를 스택 구조에 추가한다.
단계5. 3D 랜더링부에서 뷰핸들러 객체의 On-Draw 함수를 호출하여 각 뷰의 그림을 그리게 된다.
단계6. 이벤트 뷰에서는 뷰 핸들러 객체의 이벤트 함수를 호출하면 해당 이벤트에 맞는 함수가 호출된다.
위의 절차에 따라 구현된 3차원 그래픽 프로그램의 예시는 다음과 같다. Fig. 9 Fig. 10 는 제안한 3차원 그래픽 프로그램의 사용자 인터페이스 개발도구를 사용하여 구현한 의료 광학장비 뷰어의 사용자 인터페이스와 각 컨트롤들이다. 기존의 응용프로그램들에서 사용된 WinAPI 및 MFC 의 사용자 인터페이스보다 좀 더 사용자의 편의성을 높였고, 다양한 그래픽 효과 또한 볼 수 있었다.
PPT Slide
Lager Image
GUI example 1 in 3D medical equipment viewer.
PPT Slide
Lager Image
GUI example 2 in 3D medical equipment viewer.
두 번째 예제로 3차원 어로 시뮬레이터에 적용하여 사용자 인터페이스를 개발한 것으로 다음과 같다. Fig. 11 에서 보여 주듯이 각 버튼의 모습이 3차원 형상을 보여주도록 배치함으로써 배의 움직임을 보여주는 뷰와 통일감을 제공할 수 있었다. 본 연구에서는 배를 조종하는 조타기를 3차원 모델로 제시하는 것이 가능하기 때문에 3차원 입력기와의 결합을 통한 3차원 움직임 표현이 가능하게 설계 되었다. 또한 배가 움직일 때 파도의 일렁임에 따라 계기판이 흔들리거나 사용자가 바라보는 방향이 조금씩 함께 기울어지는 효과를 제공하는 것이 가능해 졌다. 이런 효과는 자동차, 비행기, 우주선과 같은 격렬한 움직임을 보여주는 객체에서 효과가 높게 나타난다. 그러나 실제 사람이 앉아 있는 의자가 움직이는 것이 아니고 사람도 배가 기운다면 그 움직임에 대응하는 모션을 하기 때문에 배나 비행기에 고정된 계기판이 실제로 배의 움직임에 비례하여 표현할 수는 없다. 따라서 실제적인 움직임을 측정하고, 앉아 있는 사용자의 상태를 감안하여 보정한 움직임을 만들어 계기판을 보여주게 된다.
PPT Slide
Lager Image
GUI example in 3D fishery simulator.
5. 결론 및 향후 연구
본 연구에서는 사용자 인터페이스가 렌더링 영역내에 프로그램의 일부처럼 보이도록 일반적인 3차원 그래픽 프로그램 개발의 파이프라인 안에서 사용자 인터페이스를 구현하고, 이를 통해 쉐이더(Shader) 및 3차원 모델을 사용하는 등의 다양한 그래픽 효과 적용이 가능하고자 하였다. 또 뷰-핸들러 디자인 패턴 구조를 적용해 개발의 용이성과 이식성을 높이고,다양한 구조가 적용가능 하도록 설계해 UX디자인을 고려하여 유저의 편이성을 높이는 시도와, 사용자 인터페이스 렌더링 모듈과 3차원 프로세스 처리부를 각각 독립적 구조로 구성해 멀티 프로세싱을 제공하는 사용자 인터페이스 개발 도구를 설계 및 구현하였다. 실제 3차원 시뮬레이터 및 소프트웨어 개발을 통해 본 연구에서 제안하는 방법이 다양한 그래픽 효과를 적용하는 것이 가능하고, 개발의 용이함과 사용자와의 상호작용이 자연스러움을 확인하였다. 본 연구에서 구현한 사용자 인터페이스 개발도구에선 아직 제공하지 못한 다양한 컨트롤이 존재하고, 아직은 기존에 개발한 OpenGL에 종속적인 부분이 존재하여, OpenGL ES 나 DirectX와 같은 다른 3차원 API 라이브러리 포팅을 통한 이식성은 확신할 수가 없었다. 차후 다양한 애니메이션과 쉐이더를 통해 더욱 사실적이고 그래픽적인 특수 효과를 추가적으로 적용에 대한 연구가 필요하다.
BIO
윤 가 림
2003년 부경대학교 컴퓨터멀티미디어공학과(공학학사)
2005년 부경대학교 전자계산학과(이학석사)
2007년 부경대학교 IT융합응용공학과(공학박사 수료)
2009년∼현재 거제대학교 기계공학과 초빙교수 재직
관심분야 : 컴퓨터그래픽스, 멀티미디어 프로그래밍
전 준 영
2010년 부경대학교 컴퓨터멀티미디어공학과(공학학사)
2014년 부경대학교 IT융합응용공학과(공학석사)
2015년∼현재 (주)슈퍼어썸 재직
관심분야 : 컴퓨터그래픽스, 게임프로그래밍
김 영 봉
1987년 서울대학교 계산통계학과(학사)
1989년 한국과학기술원 전산학과(공학석사)
1994년 한국과학기술원 전산학과(공학박사)
1994년∼1995년 삼성전자 정보기술연구소 선임연구원
1995년∼현재 부경대학교 IT융합응용공학과 정교수
관심분야 : 컴퓨터 그래픽스, 3D 컴퓨터 시뮬레이션
References
Jin B. , Master’s Thesis 2003 A Study on Graphic User Interface (GUI ) Design Based on Web 3D Technology Chung-Ang University of Technology Master’s Thesis
Kim J.H. , Jung S.H. “A Study on Implementation of Engine for Development of User Interface of PC-based Game,” Proceeding of the Conference of the Korea Multimedia Society 2006 Vol. 2006, No. 2 437 - 441
Im H.S. 2015 Development of 3D Sculpting System Using Hand Gesture Recognition from Noncontact 3D Interface, Korea Institute Of Science and Technology Annual Report
Jeon J.H. , Lee S.Y. 2011 “UI/UX Technology Trends in the Next Generation Web,” Communidations of the Korea Information Science Society 29 (8) 9 - 17
Back H.S. , Kim N.H. 2005 “Design of User Interface Component for Game Based on Direct3D,” Journal of Korea Multimedia Society 2005 (1) 855 - 858
Buschmann F. , Menunier R. , Rohnert H. , Sommerlad P. , Stal M. 1997 “Pattern-Oriented Software Architecture, Volume 1: A System of Patterns" , Willy Series in Software Design Patterns 307 - 322
Lee G.H. , Doctor‘s Thesis 2009 Development of Fishing Simulation Model and Implementation of Fishing Sumulator Pukyong National University Doctor‘s Thesis
Yoon J.G. “Who do UI Designers Work for?,” Proceeding of International Design Culture Conference 2007 Vol. 2007, No. 7 33 - 41
Kim M. , Seo D. 2013 "The Visualization Module Composition for Interface User Platform" Journal of Korea Multimedia Society 16 (12) 1482 - 1494    DOI : 10.9717/kmms.2013.16.12.1482
Shin S.W. , Doctor‘s Thesis 2013 Generation of Directional Filter Kernels and Its Application to Improve the Visual Acuity of an OCT Image KyunKook University Doctor‘s Thesis
Hossen A. 2001 “A New Fast Approximate Hilbert Transform with Different Appications,” Proceeding of International Islamic University Malaysia Engineering Journal 2 (2) 21 - 28
Makita S. , Fabritius T. , Yasuno Y. 2008 “Fullrange, High-speed, High-resolution 1-μm Spectral-domain Optical Coherence Tomography Using BM-scan for Volumetric Imaging of the Human Posterior Eye,” Optics Express 16 (12) 8406 - 8420    DOI : 10.1364/OE.16.008406
Jeon J.Y. “Design and Implementation of 3D GUI Development Tool using View Handler Design Pattern,” Proceeding of the Fall Conference of the Korea Multimedia Society 2013 131 - 133