KR100843078B1

KR100843078B1 - 유저인터페이스 흐름을 시뮬레이션 하는 장치 및 방법

Info

Publication number: KR100843078B1
Application number: KR1020060090887A
Authority: KR
Inventors: 이주연; 조수호; 김덕원
Original assignee: 삼성전자주식회사
Priority date: 2006-09-19
Filing date: 2006-09-19
Publication date: 2008-07-03
Also published as: KR20080026000A

Abstract

문서작성기에 기록된 유저인터페이스(UI: User Interface) 흐름을 시뮬레이션(simulation) 하는 장치 및 방법이 제공된다. 본 발명의 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치는 입력 수단과 디스플레이 수단을 구비한 기기의 입력에 의해 디스플레이 수단의 화면의 전환과정을 디스플레이 수단의 화면을 그려서 나타내는 스크린과 입력을 나타내는 입력 키(key) 연결선을 이용하여 문서로 작성하는 작성부 및 스크린을 보여주는 스크린 표시화면, 입력 수단을 보여주는 입력 수단 표시화면을 포함하는 시뮬레이션부를 포함하며, 시뮬레이션부는 작성부에서 작성된 스크린과 입력 키 연결선을 기초로 한 내용을 로딩하여 입력 수단 표시화면에서의 입력에 따라서 스크린 표시화면에 스크린의 전환과정을 보여준다.

시뮬레이션, simulation, 유아이, 유저인터페이스, user interface

Description

유저인터페이스 흐름을 시뮬레이션 하는 장치 및 방법{Apparatus and method for simulation of User Interface flow}

도 1은 입력 수단과 디스플레이 수단을 구비하여 본 발명에 따라 유저인터페이스를 시뮬레이션 할 수 있는 기기의 한 예인 휴대폰을 보여주는 도면이다.

도 2는 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치의 블록도이다.

도 3은 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치의 작성부를 보여주는 도면이다.

도 4는 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치의 시뮬레이션부를 보여주는 도면이다.

도 5는 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치에 의해 시뮬레이션 하는 과정을 보여주는 도면이다.

도 6은 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션하는 방법의 순서도이다.

<도면의 주요 부분에 대한 부호의 설명>

210: 작성부 212: 스크린

214: 입력 키 연결선 220: 시뮬레이션부

222: 스크린 표시화면 224: 입력 수단 표시화면

226: 스크린목록 표시화면

본 발명은 유저인터페이스(UI; User Interface) 흐름을 시뮬레이션 하는 장치 및 방법에 관한 것으로, 보다 상세하게는 문서작성기에서 일련의 UI의 흐름을 작성한 후 전체 유저인터페이스 흐름을 시뮬레이션 해줌으로써 문서로 된 UI 흐름을 실제로 조작하듯이 보다 직관적으로 이해할 수 있도록 한 유저인터페이스 흐름을 시뮬레이션 하는 장치 및 방법에 관한 것이다.

사용자가 입력할 수 있는 입력 버튼과 디스플레이 화면을 구비한 휴대폰, PMP(Portable Multimedia Player) 등과 같은 휴대용 기기에 있어서, 사용자가 편리하고 쉽게 기기의 메뉴를 접근할 수 있는 유저인터페이스를 제공하기 위한 노력이 계속되고 있다. 이에 반하여 사용자에게 다양한 기능을 제공하기 위해서 기기의 메뉴는 점점 더 복잡해지고 있다.

이러한 유저인터페이스를 제작하는 과정에서 디자이너는 통상적으로 문서작성기를 통해서 일련의 디스플레이 화면을 그리고(이하, 문서작성기에서 그려진 디스플레이 화면을 스크린이라고 한다.) 그 사이에 디스플레이 화면을 전환하기 위한 사용자의 입력을 나타내는 입력 키 연결선을 도시한 후 개발자에게 전달한다.

메뉴가 복잡해짐에 따라 디자이너에 의해 그려진 스크린의 양은 엄청나게 많 아지게 되었다. 따라서, 문서작성기를 통해서 일련의 화면전환 과정을 그리다가 보면 검증하는 것이 어려워 실수가 발생할 수 있다는 문제점이 있다. 또한, 개발자에게 전달되었을 때 개발자는 디자이너의 의도를 직감적으로 알아차리지 못할 수도 있다는 문제점이 있다.

본 발명은 상기한 문제점을 개선하기 위해 고안된 것으로, 본 발명이 이루고자 하는 기술적 과제는 문서작성기에서 작성된 일련의 유저인터페이스 흐름을 시뮬레이션 해 줌으로써 문서로 된 유저인터페이스의 흐름을 보다 직관적으로 이해할 수 있도록 하여 유저인터페이스 개발과정에서의 실수를 줄이기 위한 것이다.

본 발명의 목적들은 이상에서 언급한 목적들로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.

상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 유저인터페이스(UI; User Interface) 흐름을 시뮬레이션 하는 장치는 입력 수단과 디스플레이 수단을 구비한 기기의 입력에 의해 상기 디스플레이 수단의 화면의 전환과정을 상기 디스플레이 수단의 화면을 그려서 나타내는 스크린과 상기 입력을 나타내는 입력 키(key) 연결선을 이용하여 문서로 작성하는 작성부 및 상기 스크린을 보여주는 스크린 표시화면, 상기 입력 수단을 보여주는 입력 수단 표시화면을 포함하는 시뮬레이션부를 포함하며, 상기 시뮬레이션부는 상기 작성부에서 작성된 상기 스크린과 상기 입력 키 연결선을 기초로 한 내용을 로딩하여 상기 입력 수단 표시화면에서의 입력에 따라서 상기 스크린 표시화면에 상기 스크린의 전환과정을 보여준다.

상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 방법은 (a) 입력 수단과 디스플레이 수단을 구비한 기기의 입력에 의해 상기 디스플레이 수단의 화면의 전환과정을 상기 디스플레이 수단의 화면을 그려서 나타내는 스크린과 상기 입력을 나타내는 입력 키(key) 연결선을 이용하여 작성하는 단계, (b) 상기 스크린을 보여주는 스크린 표시화면, 상기 입력 수단을 보여주는 입력 수단 표시화면을 포함하는 시뮬레이션부를 실행하여 상기 스크린과 상기 입력 키 연결선을 기초로 한 내용을 로딩하는 단계 및 (c) 상기 입력 수단 표시화면에서의 입력에 따라서 상기 스크린 표시화면에 상기 스크린의 전환과정을 시뮬레이션 하는 단계를 포함한다.

기타 실시예들의 구체적인 사항들은 상세한 설명 및 도면들에 포함되어 있다.

본 발명의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시예들은 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 명세서 전체에 걸쳐 동일 참조 부호는 동일 구성 요소를 지칭한다

이하, 본 발명의 실시예들에 의하여 유저인터페이스 흐름을 시뮬레이션 하는 방법 및 장치를 설명하기 위한 도면들을 참고하여 본 발명에 대해 설명하도록 한다.

본 발명은 도 1의 휴대폰과 같이 버튼 등과 같은 입력 수단(120)에 의해 디스플레이 수단(110)의 메뉴의 화면이 전환되는 기기의 유저인터페이스를 개발하는 과정에 있어서 사용될 수 있다.

휴대폰의 디스플레이 수단(110)의 화면은 특정 버튼을 선택하면 다른 화면으로 전환되고, 전환된 화면에서 또 다른 특정 버튼을 선택하면 다시 다른 화면으로 전환을 한다. 이러한 일련의 유저인터페이스(UI; User Interface)의 전환 과정을 개발하는 과정에 있어서 본 발명은 문서작성기에서 도시한 화면의 전환과정을 직관적으로 이해할 수 있도록 시뮬레이션 하는 장치 및 방법으로 사용될 수 있다.

디스플레이 수단(110)과 입력 수단(120)을 구비하고 일련의 화면 전환과정을 시뮬레이션하고자 한다면 휴대폰뿐만 아니라 다른 기기의 유저인터페이스 개발 과정에 있어서 본 발명을 사용할 수 있음은 물론이다.

본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치는 작성부(210)와 시뮬레이션부(220)를 포함하여 구성될 수 있다.

작성부(210)는 컴퓨터상의 문서작성기가 될 수 있는데, 디스플레이 수단(110)의 화면을 그린 스크린(212)과 화면의 전환과정에 기기의 입력 수단(120)의 특정 입력을 도시하는 입력 키(key) 연결선(214)을 포함하여 구성될 수 있다. 작성부(210)에 관한 자세한 내용은 도 3을 참조하여 후술하기로 한다.

시뮬레이션부(220)는 스크린(212)을 보여주는 스크린 표시화면(222)과 기기의 입력 수단(120)의 외형을 똑같이 그려서 보여주는 입력 수단 표시화면(224)을 포함할 수 있다. 시뮬레이션부(220)는 작성부(210)에 특정 아이콘이나 메뉴를 클릭하였을 때 실행될 수 있는데, 실행이 될 때 작성부(210)에서 작성된 스크린(212)과 입력 키 연결선(214)을 로딩할 수 있다. 실행 후에는 작성부(210)에서 작성된 일련의 스크린(212) 중 제일 처음 도시된 스크린(212)이 시뮬레이션부(220)의 스크린 표시화면(222)에 나타날 수 있다. 사용자가 입력 수단 표시화면(224)에 그려진 특정 버튼을 클릭하면 시뮬레이션부(220)가 작성부(210)의 입력 키 연결선(214)을 인식하여 입력 키 연결선(214)에 연결된 다음 스크린(212)이 시뮬레이션부(220)의 스크린 표시화면(222)에서 도시될 수 있다. 이 때, 실제 기기의 버튼을 클릭하였을 때 디스플레이 수단(110)에서 화면이 전환되는 것과 동일하게 시뮬레이션부(220)의 스크린 표시화면(222)에서 화면이 전환될 수 있다.

이 때, 본 실시예에서 사용되는 '~부'라는 용어는 소프트웨어 또는 FPGA또는 ASIC과 같은 하드웨어 구성요소를 의미하며, '~부'는 어떤 역할들을 수행한다. 그렇지만 '~부'는 소프트웨어 또는 하드웨어에 한정되는 의미는 아니다. '~부'는 어드레싱할 수 있는 저장 매체에 있도록 구성될 수도 있고 하나 또는 그 이상의 프로 세서들을 재생시키도록 구성될 수도 있다. 따라서, 일 예로서 '~부'는 소프트웨어 구성요소들, 객체지향 소프트웨어 구성요소들, 클래스 구성요소들 및 태스크 구성요소들과 같은 구성요소들과, 프로세스들, 함수들, 속성들, 프로시저들, 서브루틴들, 프로그램 코드의 세그먼트들, 드라버들, 펌웨어, 마이크로코드, 회로, 데이터, 데이터베이스, 데이터 구조들, 테이블들, 어레이들, 및 변수들을 포함한다. 구성요소들과 '~부'들 안에서 제공되는 기능은 더 작은 수의 구성요소들 및 '~부'들로 결합되거나 추가적인 구성요소들과 '~부'들로 더 분리될 수 있다.

도 3은 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치의 작성부(210)를 보여주는 도면이다.

작성부(210)는 스크린(212)과 입력 키 연결선(214)을 포함하여 구성될 수 있다. 일련의 스크린(212a, 212b, 212c)이 3개 도시되어 있고, 각 스크린(212) 사이에는 입력 키 연결선(214a, 214b, 214c, 214d)이 도시되어 있다. 첫 번째 스크린(212a)과 두 번째 스크린(212b)를 살펴보면 두 스크린(212a, 212b) 사이에 하방향, 상방향이 입력된 입력 키 연결선(214a, 214d)이 도시되어 있음을 알 수 있다.

이는 휴대폰 디스플레이 수단(110)의 화면에 첫 번째 스크린(212a)이 나타났을 때 사용자가 입력 수단(120)의 아래 방향 이동버튼을 입력하면 두 번째 스크린(212b)으로 화면이 전환됨을 의미하고 다시 두 번째 스크린(212b)에서 사용자가 입력 수단(120)의 위 방향 이동버튼을 입력하면 첫 번째 스크린(212a)으로 전환됨을 의미한다. 두 번째 스크린(212b)과 세 번째 스크린(212c)도 동일한 방법으로 설명될 수 있다.

스크린(212)과 입력 키 연결선(214)으로 연결된 일련의 그림은 도 3에서와 같이 작성부(210)의 한 페이지에 하나씩 도시될 수도 있고 한 페이지에 여러 개가 도시될 수도 있다. 도 3에서는 작성부(210)는 페이지-1, 페이지-2, 페이지-3, 페이지-4, 페이지-5의 시트가 형성되어 페이지-5 시트에 일련의 그림이 도시되고 있음을 보여준다.

도 4는 본 발명의 일 실시예에 따른 유저인터페이스 흐름을 시뮬레이션 하는 장치의 시뮬레이션부(220)를 보여주는 도면이다.

시뮬레이션부(220)는 스크린 표시화면(222), 입력 수단 표시화면(224)을 포함하여 구성될 수 있다. 또한, 스크린목록 표시화면(226)을 더 포함할 수도 있다.

스크린 표시화면(222)은 작성부(210)에서 작성된 스크린(212)을 보여줄 수 있다. 처음 시뮬레이션부(220)가 실행되었을 때 제일 처음에 있는 스크린(212a)이 스크린 표시화면(222)에 도시되고 후술할 내용이지만 스크린목록 표시화면(226)에 특정 스크린을 선택하면 선택된 스크린이 스크린 표시화면(222)에 도시될 수 있다.

입력 수단 표시화면(224)은 실제 기기의 입력 수단(120)을 도시하고 있다. 도 4에서는 현재의 스크린(212)에서 조작 가능한 버튼이 빨간색 원으로 도시되어 있다. 이는 작성부(210)에서 현재의 스크린(212)에 연결된 입력 키 연결선(214)이 의미하는 버튼을 의미한다. 빨간색 원으로 표시된 버튼을 클릭하면 스크린 표시화면(222)의 스크린(212)이 연결된 다른 스크린(212)으로 전환된다.

스크린목록 표시화면(226)은 각 페이지의 일련의 스크린(212)들을 모두 구조화하여 목록으로 보여줄 수 있다. 도면에서 페이지-5의 Screen 1은 첫 번째 스크 린(212a)을, Screen 2는 두 번째 스크린(212b)을, Screen 3은 세 번째 스크린(212c)을, Screen 4는 다시 두 번째 스크린(212b)을 나타내며 Screen 5는 다시 첫 번째 스크린(212a)을 나타낼 수 있다. 페이지 5의 Screen 2가 선택되어 음영이 지어져 있는데 스크린 표시화면(222)에 두 번째 스크린(212b)이 도시되어 있음을 알 수 있다. 스크린목록 표시화면(226)에서 사용자가 특정 스크린(212)을 선택하면 해당 스크린(212)으로 전환되면서 스크린 표시화면(222)에 도시될 수 있다.

도 5의 1에서 사용자가 스크린목록 표시화면(226)에서 페이지-5의 Screen 1을 선택하였을 때 스크린 표시화면(222)에 도 3의 첫 번째 스크린(212a)이 나타난다. 입력 수단 표시화면(224)에서 아래 방향 이동키에 빨간 원이 그려져 있는데 이는 이 화면에서 사용자가 입력할 수 있는 버튼을 도시한다. 아래 방향 이동키 이외에 다른 버튼을 클릭하면 스크린 표시화면(222)에서 아무런 변화가 없다. 사용자가 아래 방향 이동키 버튼을 클릭하면(1에서 입력 수단 표시화면(224)에 화살표로 나타남) 2의 화면으로 전환된다. 2의 화면으로 전환되면서 스크린목록 표시화면(226)에서 Screen 2가 음영으로 도시되고 두 번째 스크린(212b)에서 사용자가 입력할 수 있는 아래 방향 이동키와 위 방향 이동키에 빨간색 원이 형성됨을 알 수 있다. 2에서 아래방향 이동키를 클릭하면 3과 같이 세 번째 스크린(212c)이 나타나고, 3에서 위 방향 이동키를 클릭하면 4와 같이 다시 두 번째 스크린(212b)이 나타남을 알 수 있다.

이처럼 유저인터페이스를 개발하는 과정에서 작성부(210)에 일련의 스크린(212)과 입력 키 연결선(214)으로 표시된 화면의 전환과정을 본 발명의 시뮬레이션부(220)를 통해 실제 기기의 입력 버튼을 눌렀을 때 화면이 전환되는 것과 동일하게 시뮬레이션을 할 수가 있다. 따라서 디자이너는 유저인터페이스를 디자인하는 과정에서 실수를 줄일 수가 있고 개발자도 디자이너가 의도한 것을 쉽게 파악할 수가 있어서 양자 간의 의사소통을 원할 하게 할 수 있다.

입력 수단(120)과 디스플레이 수단(110)을 구비한 기기의 입력에 의해 디스플레이 수단(110)의 화면의 전환과정을 화면을 도시한 스크린(212)과 입력 버튼을 나타내는 입력 키 연결선(214)을 포함하여 작성부(210)에 작성할 수 있다(S310).

다음, 스크린(212)을 보여주는 스크린 표시화면(222), 기기의 입력 수단(120)을 도시한 입력 수단 표시화면(224)을 포함하는 시뮬레이션부(220)를 실행하여 스크린(212)과 입력 키 연결선(214)을 기초로 한 내용을 로딩할 수 있다(S320).

다음, 시뮬레이션부(220)의 입력 수단 표시화면(224)에서의 입력에 따라서 스크린 표시화면(222)에 스크린(212)의 전환과정을 시뮬레이션 할 수 있다(S330).

여기서, 시뮬레이션부(220)는 일련의 스크린(212) 묶음의 목록을 구조적으로 보여주는 스크린 표시화면(226)을 더 포함할 수 있다.

본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명이 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구의 범위에 의하여 나타내어지며, 특허청구의 범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

상기한 바와 같은 본 발명의 유저인터페이스 흐름을 시뮬레이션 하는 장치 및 방법에 따르면 다음과 같은 효과가 하나 혹은 그 이상 있다.

첫째, 문서로 작성된 유저인터페이스의 흐름을 시뮬레이션 함으로써 실제로 조작하듯이 직관적으로 볼 수가 있어 제안된 유저인터페이스를 보다 쉽게 이해할 수 있다는 장점이 있다.

둘째, 제안된 유저인터페이스의 흐름을 간단하게 검증할 수 있다는 장점도 있다.

Claims

입력 수단과 디스플레이 수단을 구비한 기기의 입력에 의해 상기 디스플레이 수단의 화면의 전환과정을 상기 디스플레이 수단의 화면을 그려서 나타내는 스크린과 상기 입력을 나타내는 입력 키(key) 연결선을 이용하여 문서로 작성하는 작성부; 및

상기 스크린을 보여주는 스크린 표시화면, 상기 입력 수단을 보여주는 입력 수단 표시화면을 포함하는 시뮬레이션부를 포함하며,

상기 시뮬레이션부는 상기 작성된 문서를 로딩하여 상기 입력 수단 표시화면에서의 입력에 따라서 상기 스크린 표시화면에 상기 스크린의 전환과정을 보여주는 유저인터페이스(UI; User Interface) 흐름을 시뮬레이션 하는 장치.
제 1 항에 있어서,

상기 시뮬레이션부는 일련의 스크린 묶음의 목록을 보여주는 스크린목록 표시화면을 더 포함하는 유저인터페이스 흐름을 시뮬레이션 하는 장치.
(a) 입력 수단과 디스플레이 수단을 구비한 기기의 입력에 의해 상기 디스플레이 수단의 화면의 전환과정을 상기 디스플레이 수단의 화면을 그려서 나타내는 스크린과 상기 입력을 나타내는 입력 키(key) 연결선을 이용하여 문서로 작성하는 단계;

(b) 상기 스크린을 보여주는 스크린 표시화면, 상기 입력 수단을 보여주는 입력 수단 표시화면을 포함하는 시뮬레이션부를 실행하여 상기 작성된 문서를 로딩하는 단계; 및

(c) 상기 입력 수단 표시화면에서의 입력에 따라서 상기 스크린 표시화면에 상기 스크린의 전환과정을 시뮬레이션 하는 단계를 포함하는 유저인터페이스 흐름을 시뮬레이션 하는 방법.
제 3 항에 있어서,

상기 (b) 단계는 일련의 스크린 묶음의 목록을 보여주는 스크린목록 표시화면을 더 포함하는 시뮬레이션부를 실행하여 상기 스크린과 상기 스크린과 상기 입력 키 연결선을 기초로 한 내용을 로딩하는 유저인터페이스 흐름을 시뮬레이션 하는 방법.