KR101597160B1 - 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템 - Google Patents

모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템 Download PDF

Info

Publication number
KR101597160B1
KR101597160B1 KR1020140050347A KR20140050347A KR101597160B1 KR 101597160 B1 KR101597160 B1 KR 101597160B1 KR 1020140050347 A KR1020140050347 A KR 1020140050347A KR 20140050347 A KR20140050347 A KR 20140050347A KR 101597160 B1 KR101597160 B1 KR 101597160B1
Authority
KR
South Korea
Prior art keywords
gui
mobile
simulation
web
based document
Prior art date
Application number
KR1020140050347A
Other languages
English (en)
Other versions
KR20150123658A (ko
Inventor
백상엽
신재구
김국원
김명수
김강석
Original Assignee
주식회사 퓨전소프트
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 퓨전소프트 filed Critical 주식회사 퓨전소프트
Priority to KR1020140050347A priority Critical patent/KR101597160B1/ko
Publication of KR20150123658A publication Critical patent/KR20150123658A/ko
Application granted granted Critical
Publication of KR101597160B1 publication Critical patent/KR101597160B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F30/00—Computer-aided design [CAD]

Abstract

본 발명은 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에 관한 것으로서, 보다 구체적으로는 GUI 설계 프로그램을 탑재하고, 상기 GUI 설계 프로그램을 이용해 모바일 GUI를 디자인하는 디자이너 디바이스; 및 상기 디자이너 디바이스에서 디자인된 모바일 GUI의 내용을 수신하고, 수신한 내용을 시뮬레이션 가능한 웹 기반 문서로 변환하여 상기 디자이너 디바이스에 전송하는 시뮬레이션 서버를 포함하며, 상기 디자이너 디바이스는, 상기 시뮬레이션 서버에서 전송받은 웹 기반 문서를 이용해 상기 디자인된 모바일 GUI의 시뮬레이션을 실행하는 것을 그 구성상의 특징으로 한다.
본 발명에서 제안하고 있는 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에 따르면, 시뮬레이션 서버는 디자이너 디바이스가 GUI 설계 프로그램을 이용해 디자인 한 모바일 GUI의 내용을 수신하고, 웹 기반 문서로 변환하여 디자이너 디바이스에 전송함으로써, 디자이너 디바이스가 웹 기반 문서를 이용해 모바일 GUI의 시뮬레이션을 실행하여, 실시간으로 디자인된 내용을 확인할 수 있다.
또한, 본 발명에 따르면, 디자이너가 웹 기반 문서를 이용하여 모바일 디바이스 또는 웹 브라우저를 이용해 모바일 GUI의 시뮬레이션을 실행할 수 있도록 함으로써, 디자이너가 디자인 한 모바일 GUI의 실제 실행 상태를 직접 확인해 볼 수 있어, 디자이너의 만족도를 향상시키고 추후 발생 가능한 수정 사항을 최소화할 수 있다.

Description

모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템{GUI DESIGN SYSTEM FOR MOBILE GUI SIMULATION}
본 발명은 GUI 설계 시스템에 관한 것으로서, 보다 구체적으로는 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에 관한 것이다.
모바일 스마트 디바이스의 보급과 함께, 모바일 UI 시장은 가파르게 성장하고 있다. 즉, 모바일 애플리케이션의 등록 수는 급격히 많아지고, 모바일 애플리케이션 시장도 급격히 성장하고 있다. 대부분의 모바일 애플리케이션은 GUI를 포함하고 있어, 이와 같은 모바일 애플리케이션 시장의 확장과 더불어 모바일 GUI에 대한 관심이 날로 증대되고 있다.
모바일 애플리케이션을 개발하는 개인이 많아지고, 모바일 1인 창조기업이 증가하면서, UI 설계 기술 및 GUI 디자인 기술에 대한 전문성이 확보되지 않은 상태에서 모바일 애플리케이션의 개발이 진행되는 경우가 많다. 따라서 GUI 생산성이 저하되고 있어, 모바일 GUI 시장 확대에 걸림돌이 되고 있다.
한편, 본 발명과 관련된 선행기술로서, 단말기의 UI를 저작할 수 있을 뿐 아니라 UI의 시뮬레이션도 실행해 볼 수 있도록 하고, UI 저작과 UI 시뮬레이션이 동일한 장치 내에서 수행됨으로써, 단말기의 UI를 보다 효율적으로 저작 및 테스트할 수 있는, 단말기 UI 저작 장치 및 단말기 UI 저작 방법과 이를 구현하기 위한 프로그램이 기록된 기록매체가 개시된바 있다(공개특허 제10-2010-0023617호).
이와 같은 선행기술을 이용하여 UI를 효율적으로 제작할 수는 있겠으나, UI를 저작하는 장치에서 자체적으로 UI의 시뮬레이션이 이루어지므로, 실제 UI가 실행될 환경에서 디자인된 UI를 직접 시뮬레이션해 볼 수 없기 때문에, 디자이너가 UI의 실행 상태를 확실하게 파악할 수 없는 한계가 있다.
본 발명은 기존에 제안된 방법들의 상기와 같은 문제점들을 해결하기 위해 제안된 것으로서, 시뮬레이션 서버는 디자이너 디바이스가 GUI 설계 프로그램을 이용해 디자인 한 모바일 GUI의 내용을 수신하고, 웹 기반 문서로 변환하여 디자이너 디바이스에 전송함으로써, 디자이너 디바이스가 웹 기반 문서를 이용해 모바일 GUI의 시뮬레이션을 실행하여, 실시간으로 디자인된 내용을 확인할 수 있는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템을 제공하는 것을 그 목적으로 한다.
또한, 본 발명은, 디자이너가 웹 기반 문서를 이용하여 모바일 디바이스 또는 웹 브라우저를 이용해 모바일 GUI의 시뮬레이션을 실행할 수 있도록 함으로써, 디자이너가 디자인 한 모바일 GUI의 실제 실행 상태를 직접 확인해 볼 수 있어, 디자이너의 만족도를 향상시키고 추후 발생 가능한 수정 사항을 최소화할 수 있는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템을 제공하는 것을 또 다른 목적으로 한다.
상기한 목적을 달성하기 위한 본 발명의 특징에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템은,
GUI 설계 프로그램을 탑재하고, 상기 GUI 설계 프로그램을 이용해 모바일 GUI를 디자인하는 디자이너 디바이스; 및
상기 디자이너 디바이스에서 디자인된 모바일 GUI의 내용을 수신하고, 수신한 내용을 시뮬레이션 가능한 웹 기반 문서로 변환하여 상기 디자이너 디바이스에 전송하는 시뮬레이션 서버를 포함하며,
상기 디자이너 디바이스는, 상기 시뮬레이션 서버에서 전송받은 웹 기반 문서를 이용해 상기 디자인된 모바일 GUI의 시뮬레이션을 실행하는 것을 그 구성상의 특징으로 한다.
바람직하게는, 상기 디자이너 디바이스는,
디자이너의 조작에 따른 모바일 GUI의 디자인 내용이 표시되는 편집 스크린 및 상기 모바일 GUI의 시뮬레이션 실행을 출력하는 프리뷰 스크린을 상기 GUI 설계 프로그램을 통해 출력할 수 있다.
바람직하게는, 상기 디자이너 디바이스는,
상기 GUI 설계 프로그램을 이용해 상기 모바일 GUI를 구성하는 객체에 인터액션 속성을 설정하며, 상기 모바일 GUI의 시뮬레이션 실행을 통해 상기 설정된 인터액션을 실행할 수 있다.
바람직하게는, 상기 디자이너 디바이스는,
상기 GUI 설계 프로그램을 탑재 및 구동하는 프로그램 구동 모듈;
상기 GUI 설계 프로그램을 이용해 모바일 GUI를 디자인하는 GUI 설계 모듈;
상기 디자인된 모바일 GUI의 내용을 파일로 생성하여 상기 시뮬레이션 서버에 전송하는 파일 생성 모듈; 및
상기 시뮬레이션 서버로부터 전송받은 웹 기반 문서를 출력하여 시뮬레이션을 실행하는 시뮬레이션 모듈을 포함할 수 있다.
더욱 바람직하게는, 상기 파일 생성 모듈은,
상기 디자인된 모바일 GUI의 내용을 XML 형태의 파일로 생성할 수 있다.
바람직하게는, 상기 시뮬레이션 서버는,
상기 디자이너 디바이스로부터 상기 모바일 GUI의 내용을 수신하며, 상기 변환된 웹 기반 문서를 상기 디자이너 디바이스에 전송하는 통신 모듈; 및
상기 통신 모듈에서 수신한 모바일 GUI의 내용을 파싱하여 상기 디자이너 디바이스 또는 모바일 디바이스에서 시뮬레이션 가능한 웹 기반 문서로 변환하는 변환 모듈을 포함할 수 있다.
더욱 바람직하게는, 상기 변환 모듈은,
상기 모바일 GUI의 내용을 HTML, HTML5, CSS3 및 JavaScript를 포함하는 군에서 선택된 적어도 어느 하나의 형태의 웹 기반 문서로 변환할 수 있다.
바람직하게는,
상기 시뮬레이션 서버는, 상기 변환된 웹 기반 문서에 URL 주소를 할당하고, 상기 할당된 URL 주소를 상기 디자이너 디바이스에 전송하며,
상기 디자이너 디바이스는, 상기 URL 주소를 통해 상기 시뮬레이션 서버에 접속하고 상기 URL 주소에 대응되는 웹 기반 문서를 출력하여 시뮬레이션을 실행할 수 있다.
바람직하게는,
모바일 런타임 시뮬레이션 애플리케이션을 탑재하며, 상기 시뮬레이션 서버에 접속하고 상기 모바일 런타임 시뮬레이션 애플리케이션을 이용해 상기 웹 기반 문서에 의한 시뮬레이션을 실행하는 모바일 디바이스를 더 포함할 수 있다.
더욱 바람직하게는, 상기 모바일 디바이스는,
상기 모바일 런타임 시뮬레이션 애플리케이션을 통해, 제스처 API를 호출하여 상기 웹 기반 문서에 포함된 제스처 인식 기능의 시뮬레이션을 실행할 수 있다.
본 발명에서 제안하고 있는 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에 따르면, 시뮬레이션 서버는 디자이너 디바이스가 GUI 설계 프로그램을 이용해 디자인 한 모바일 GUI의 내용을 수신하고, 웹 기반 문서로 변환하여 디자이너 디바이스에 전송함으로써, 디자이너 디바이스가 웹 기반 문서를 이용해 모바일 GUI의 시뮬레이션을 실행하여, 실시간으로 디자인된 내용을 확인할 수 있다.
또한, 본 발명에 따르면, 디자이너가 웹 기반 문서를 이용하여 모바일 디바이스 또는 웹 브라우저를 이용해 모바일 GUI의 시뮬레이션을 실행할 수 있도록 함으로써, 디자이너가 디자인 한 모바일 GUI의 실제 실행 상태를 직접 확인해 볼 수 있어, 디자이너의 만족도를 향상시키고 추후 발생 가능한 수정 사항을 최소화할 수 있다.
도 1은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템의 구성을 도시한 도면.
도 2는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 디자이너 디바이스의 세부적인 구성을 도시한 도면.
도 3은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, GUI 설계 화면을 예를 들어 도시한 도면.
도 4는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 인터액션 속성을 설정하는 GUI 설계 화면을 예를 들어 도시한 도면.
도 5는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 시뮬레이션 서버의 세부적인 구성을 도시한 도면.
도 6은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 웹 브라우저를 이용한 시뮬레이션 실행 화면을 예를 들어 도시한 도면.
이하, 첨부된 도면을 참조하여 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명을 용이하게 실시할 수 있도록 바람직한 실시예를 상세히 설명한다. 다만, 본 발명의 바람직한 실시예를 상세하게 설명함에 있어, 관련된 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략한다. 또한, 유사한 기능 및 작용을 하는 부분에 대해서는 도면 전체에 걸쳐 동일한 부호를 사용한다.
덧붙여, 명세서 전체에서, 어떤 부분이 다른 부분과 ‘연결’ 되어 있다고 할 때, 이는 ‘직접적으로 연결’ 되어 있는 경우뿐만 아니라, 그 중간에 다른 소자를 사이에 두고 ‘간접적으로 연결’ 되어 있는 경우도 포함한다. 또한, 어떤 구성요소를 ‘포함’ 한다는 것은, 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있다는 것을 의미한다.
도 1은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템의 구성을 도시한 도면이다. 도 1에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템은, 디자이너 디바이스(100) 및 시뮬레이션 서버(200)를 포함하여 구성될 수 있으며, 모바일 디바이스(300)를 더 포함하여 구성될 수 있다.
즉, 본 발명은, 디자이너 디바이스(100)가 GUI 설계 프로그램(10)을 이용해 모바일 GUI를 디자인하며, 시뮬레이션 서버(200)가 디자이너 디바이스(100)로부터 모바일 GUI의 내용을 수신하고 웹 기반 문서로 변환하여 디자이너 디바이스(100)에 전송함으로써, 디자이너 디바이스(100)가 웹 기반 문서를 이용해 모바일 GUI의 시뮬레이션을 실행할 수 있다.
또한, 본 발명은, 디자이너가 웹 기반 문서를 이용하여 모바일 디바이스(300) 또는 웹 브라우저를 이용해 모바일 GUI의 시뮬레이션을 실행할 수 있도록 할 수 있다. 이때, 모바일 디바이스(300)에는 모바일 런타임 시뮬레이션 애플리케이션을 설치하여, 웹 기반 문서가 원활하게 동작하도록 할 수 있다. 이와 같이, 본 발명에 따르면, 디자이너가 디자인 한 모바일 GUI의 실제 실행 상태를 모바일 디바이스(300)를 이용해 직접 확인해 볼 수 있어, 디자이너의 만족도를 향상시키고 추후 발생 가능한 수정 사항을 최소화할 수 있다.
이하에서는, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템을 구성하는 각 구성요소에 대하여 상세히 설명하도록 한다.
디자이너 디바이스(100)는, GUI 설계 프로그램(10)을 탑재하고, GUI 설계 프로그램(10)을 이용해 모바일 GUI를 디자인할 수 있다. 또한, 디자이너 디바이스(100)는, 시뮬레이션 서버(200)에서 전송받은 웹 기반 문서를 이용해 디자인된 모바일 GUI의 시뮬레이션을 실행할 수 있다.
즉, 본 발명의 디자이너 디바이스(100)는, GUI 설계 프로그램(10)을 이용해 디자이너의 조작에 따라 모바일 GUI를 디자인하고, 디자인된 내용을 시뮬레이션 서버(200)를 통해 즉시 시뮬레이션해 볼 수 있도록 할 수 있다. 이때, 시뮬레이션의 실행은, GUI 설계 프로그램(10)을 통해 구현될 수 있다. 디자이너 디바이스(100)의 세부적인 구성에 대해서는, 추후 도 2를 참조하여 상세히 설명하도록 한다.
한편, 디자이너 디바이스(100)는 GUI 설계 프로그램(10)을 설치하고 시뮬레이션 서버(200)와 네트워크 통신을 할 수 있는, 휴대용 단말기나 컴퓨터로 구현될 수 있다. 여기서, 휴대용 단말기는 휴대성과 이동성이 보장되는 무선 통신 장치로서, PCS(Personal Communication System), GSM(Global System for Mobile communications), PDC(Personal Digital Cellular), PHS(Personal Handyphone System), PDA(Personal Digital Assistant), IMT(International Mobile Telecommunication)-2000, CDMA(Code Division Multiple Access)-2000, W-CDMA(W-Code Division Multiple Access), Wibro(Wireless Broadband Internet) 단말 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함하고, 컴퓨터는 데스크톱(desktop), 노트북, 랩톱(laptop) 등을 포함할 수 있다.
네트워크는 근거리 통신망(Local Area Network; LAN), 광역 통신망(Wide Area Network; WAN) 또는 부가가치 통신망(Value Added Network; VAN) 등과 같은 유선 네트워크나 이동 통신망(mobile radio communication network), 위성 통신망, 블루투스(Bluetooth), Wibro(Wireless Broadband Internet), HSDPA(High Speed Downlink Packet Access) 등과 같은 모든 종류의 무선 네트워크로 구현될 수 있다.
시뮬레이션 서버(200)는, 디자이너 디바이스(100)에서 디자인된 모바일 GUI의 내용을 수신하고, 수신한 내용을 시뮬레이션 가능한 웹 기반 문서로 변환하여 디자이너 디바이스(100)에 전송할 수 있다. 보다 구체적으로는, 시뮬레이션 서버(200)는 디자이너 디바이스(100)로부터 모바일 GUI의 디자인에 사용된 이미지 및 상세 정보 등을 수신하며, 이를 웹 기술로 실행할 수 있는 웹 기반 문서로 변환하여 저장함으로써, 시뮬레이션의 실행을 지원할 수 있다. 시뮬레이션 서버(200)의 세부적인 구성에 대해서는 추후 도 4를 참조하여 상세히 설명하도록 한다.
모바일 디바이스(300)는, 모바일 런타임 시뮬레이션 애플리케이션을 탑재하며, 시뮬레이션 서버(200)에 접속하고 모바일 런타임 시뮬레이션 애플리케이션을 이용해 웹 기반 문서에 의한 시뮬레이션을 실행할 수 있다. 즉, 본 발명에서는 모바일 GUI를 설계하는데, 설계된 모바일 GUI를 모바일 디바이스(300)에서 시뮬레이션해 봄으로써, 실제 모바일 디바이스(300)에서 구현되었을 때의 디자인 등을 구체적으로 확인할 수 있다.
또한, 모바일 디바이스(300)는, 모바일 런타임 시뮬레이션 애플리케이션을 통해, 제스처 API를 호출하여 웹 기반 문서에 포함된 제스처 인식 기능의 시뮬레이션을 실행할 수 있다. 즉, 모바일 GUI의 설계 시에 제스처 인식 등을 설정하였더라도, 통상적인 컴퓨터 등의 디자이너 디바이스(100)를 이용하여서는 제스처 인식 기능 등을 확인할 수 없다. 따라서 본 발명에서는 모바일 런타임 시뮬레이션 애플리케이션 및 모바일 디바이스(300)에 탑재된 제스처 API를 이용해, 모바일 디바이스(300)로 시뮬레이션을 실행하고, 제스처 인식 기능에 의한 시뮬레이션도 함께 확인 가능하도록 할 수 있다.
도 2는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 디자이너 디바이스(100)의 세부적인 구성을 도시한 도면이다. 도 2에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템의 디자이너 디바이스(100)는, 프로그램 구동 모듈(110), GUI 설계 모듈(120), 파일 생성 모듈(130) 및 시뮬레이션 모듈(140)을 포함하여 구성될 수 있다.
프로그램 구동 모듈(110)은, GUI 설계 프로그램(10)을 탑재 및 구동할 수 있다. 즉, 프로그램 구동 모듈(110)은, 디자이너 디바이스(100)에 설치된 GUI 설계 프로그램(10)의 실행, 종료 등을 제어하고, 디자이너 등 사용자의 요청에 따라 세부적인 구동을 제어할 수 있다. 프로그램 구동 모듈(110)은, 중앙처리장치로 구동되는 마이크로컴퓨터와 마이크로컴퓨터의 동작을 보호하는 주변 장치를 포함하여 구성될 수 있으며, 롬이나 램과 같은 메모리에 저장된 실행 프로그램을 실행하는 구성 부품을 포함하여 구성될 수 있다.
본 발명에서 GUI 설계 프로그램(10)은, 모바일 GUI를 디자인할 수 있는 각종 툴을 제공할 수 있고, 모바일 GUI 디자인에 활용 가능한 각종 템플릿을 제공할 수 있으며, 디자인 한 모바일 GUI를 개발자가 제작하기 전에 시뮬레이션해 볼 수 있는 기능을 제공할 수도 있다.
GUI 설계 모듈(120)은, GUI 설계 프로그램(10)을 이용해 모바일 GUI를 디자인할 수 있다. 즉, 본 발명의 GUI 설계 모듈(120)은, 프로그램 구동 모듈(110)에 의해 구동된 GUI 설계 프로그램(10)을 통해 디자이너에게 모바일 GUI 설계를 위한 각종 기능을 제공할 수 있으며, 특히 툴바(tool bar) 등을 통해 이러한 기능을 제공할 수 있다. 디자이너는 GUI 설계 프로그램(10)의 각종 기능을 이용하여 텍스트나 이미지 등을 삽입하고, 크기, 색상, 위치 등을 편집하여 모바일 GUI를 설계할 수 있다.
파일 생성 모듈(130)은, 디자인된 모바일 GUI의 내용을 파일로 생성하여 시뮬레이션 서버(200)에 전송할 수 있다. 특히, 파일 생성 모듈(130)은, 디자인된 모바일 GUI의 내용을 XML 형태의 파일로 생성할 수 있다. 또한, 모바일 GUI의 디자인에 사용된 이미지를 압축하여 XML 형태의 파일과 함께 네트워크를 통해 시뮬레이션 서버(200)에 전송할 수 있다.
시뮬레이션 모듈(140)은, 시뮬레이션 서버(200)로부터 전송받은 웹 기반 문서를 출력하여 시뮬레이션을 실행할 수 있다. 즉, 시뮬레이션 모듈(140)은, GUI 설계 프로그램(10)을 통해 웹 기반 문서를 출력하여, 디자이너가 별도의 장치나 프로그램을 이용하지 않고서도 시뮬레이션을 실행하도록 할 수 있다.
도 3은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, GUI 설계 화면(20)을 예를 들어 도시한 도면이다. 도 3에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서는, 디자이너 디바이스(100)에 설치된 GUI 설계 프로그램(10)을 실행하면, GUI 설계 화면(20)이 표시될 수 있다.
본 발명의 디자이너 디바이스(100)는, 도 3에 도시된 바와 같이, 디자이너의 조작에 따른 모바일 GUI의 디자인 내용이 표시되는 편집 스크린(21) 및 모바일 GUI의 시뮬레이션 실행을 출력하는 프리뷰 스크린(22)을 GUI 설계 프로그램(10)을 통해 출력할 수 있다. 즉, GUI 설계 프로그램(10)을 통해 모바일 GUI의 설계 및 시뮬레이션을 모두 구현할 수 있다.
본 발명에서 GUI 설계 프로그램(10)은, GUI 설계 화면(20)을 통해 모바일 GUI를 디자인할 수 있는 각종 툴을 제공할 수 있고, 모바일 GUI 디자인에 활용 가능한 각종 템플릿을 제공할 수 있다. 디자이너가 디자인하는 모바일 GUI의 내용은 편집 스크린(21)에 실시간으로 표시될 수 있으며, 모바일 GUI를 구성하는 각 페이지를 미리보기 이미지로 표시하는 썸네일(thumbnail) 스크린(23)을 GUI 설계 프로그램(10)을 통해 더 출력할 수 있다.
디자이너가 “Simulation” 메뉴를 선택하면 파일 생성 모듈(130)이 이미지를 압축하여 XML 파일 형태의 모바일 GUI 내용과 함께 압축된 이미지를 시뮬레이션 서버(200)에 전송할 수 있다. 시뮬레이션 서버(200)로부터 웹 기반 문서를 수신하면, GUI 설계 화면(20)에 프리뷰 스크린(22)이 표시되면서 프리뷰 스크린(22)을 통해 시뮬레이션이 실행될 수 있다. 디자이너는, 도 3에 도시된 바와 같은 화면의 프리뷰 스크린(22)에 구비된 화살표 버튼(“<”, “>”)을 이용해 화면 전환을 할 수 있다.
한편, 디자이너 디바이스(100)는, GUI 설계 프로그램(10)을 이용해 모바일 GUI를 구성하는 객체에 인터액션 속성을 설정하며, 모바일 GUI의 시뮬레이션 실행을 통해 설정된 인터액션을 실행할 수 있다. 즉, 디자이너는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템의 시뮬레이션 기능을 이용하여, 모바일 GUI의 개발 전에 인터액션까지 시뮬레이션해 볼 수 있다.
도 4는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 인터액션 속성을 설정하는 GUI 설계 화면(20)을 예를 들어 도시한 도면이다. 도 4에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서는, 숫자 “1”로 표시된 이미지의 선택 시 특정 화면으로 이동하도록 하는 인터액션 속성을 숫자 “2”로 표시된 화면에서 설정할 수 있다. 이때, 숫자 “3”으로 표시된 부분과 같은 화면 명칭을 인터액션 속성에 기재함으로써, 디자이너가 원하는 인터액션이 구현되도록 할 수 있다.
이와 같이 인터액션 속성을 설정한 다음, “시뮬레이션” 메뉴를 이용해 시뮬레이션을 하게 되면, 시뮬레이션 서버(200)는 설정된 인터액션 속성이 포함된 웹 기반 문서를 생성하여 디자이너 디바이스(100)에 제공해 줄 수 있다. 다만, 본 발명의 인터액션 기능은, 프로그래밍 되어 모바일 GUI로 구현된 형태는 아니며, 개발 단계 이전의 시뮬레이션을 위해 링크를 추가하는 것과 같은 구성이다.
도 5는 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 시뮬레이션 서버(200)의 세부적인 구성을 도시한 도면이다. 도 5에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템의 시뮬레이션 서버(200)는, 통신 모듈(210) 및 변환 모듈(220)을 포함하여 구성될 수 있다.
통신 모듈(210)은, 디자이너 디바이스(100)로부터 모바일 GUI의 내용을 수신하며, 변환된 웹 기반 문서를 디자이너 디바이스(100)에 전송할 수 있다. 즉, 시뮬레이션 서버(200)는 통신 모듈(210)을 이용하여 네트워크를 통해 디자이너 디바이스(100)와 각종 신호 및 데이터를 송수신할 수 있다. 또한, 실시예에 따라서는, 모바일 디바이스(300)에 웹 기반 문서를 전송할 수도 있다.
변환 모듈(220)은, 통신 모듈(210)에서 수신한 모바일 GUI의 내용을 파싱하여 디자이너 디바이스(100) 또는 모바일 디바이스(300)에서 시뮬레이션 가능한 웹 기반 문서로 변환할 수 있다. 즉, 변환 모듈(220)은 통신 모듈(210)로부터 압축된 이미지 및 XML 파일을 수신할 수 있으며, 수신한 데이터를 이용해 웹 기반 문서를 생성할 수 있다. 이때, 변환 모듈(220)은, 모바일 GUI의 내용을 HTML, HTML5, CSS3 및 JavaScript를 포함하는 군에서 선택된 적어도 어느 하나의 형태의 웹 기반 문서로 변환할 수 있다.
한편, 변환 모듈(220)은, 웹 기반 문서에 URL 주소를 할당할 수 있다. 특히, 변환 모듈(220)은, 설계된 모바일 GUI의 각 페이지마다 웹 기반 문서를 구성하고, 서로 상이한 URL 주소를 할당할 수 있다.
즉, 시뮬레이션 서버(200)는, 변환된 웹 기반 문서에 URL 주소를 할당하고, 할당된 URL 주소를 디자이너 디바이스(100)에 전송하며, 디자이너 디바이스(100)는, URL 주소를 통해 시뮬레이션 서버(200)에 접속하고 URL 주소에 대응되는 웹 기반 문서를 출력하여 시뮬레이션을 실행할 수 있다. 즉, 도 3에 도시된 바와 같은 GUI 설계 화면(20)에서, 프리뷰 스크린(22)의 상단에 표시된 바와 같이 URL 주소가 함께 출력될 수 있으며, 네트워크를 통해 해당 URL 주소에 대응하는 데이터를 시뮬레이션 서버(200)로부터 수신하여 출력함으로써, 웹 기반 문서를 통해 시뮬레이션을 실행할 수 있다.
도 6은 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서, 웹 브라우저를 이용한 시뮬레이션 실행 화면을 예를 들어 도시한 도면이다. 도 6에 도시된 바와 같이, 본 발명의 일실시예에 따른 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템에서는, 시뮬레이션 서버(200)가 웹 기반 문서에 URL 주소를 할당하고 URL 주소를 디자이너 디바이스(100)에 전송하기 때문에, 디자이너는 도 3에 도시된 바와 같이 프리뷰 스크린(22)으로 출력된 URL 주소를 복사하여 통상적인 웹 브라우저에서 모바일 GUI의 시뮬레이션을 실행해 볼 수 있다.
이상 설명한 본 발명은 본 발명이 속한 기술분야에서 통상의 지식을 가진 자에 의하여 다양한 변형이나 응용이 가능하며, 본 발명에 따른 기술적 사상의 범위는 아래의 특허청구범위에 의하여 정해져야 할 것이다.
10: GUI 설계 프로그램 20: GUI 설계 화면
21: 편집 스크린 22: 프리뷰 스크린
23: 썸네일 스크린 100: 디자이너 디바이스
110: 프로그램 구동 모듈 120: GUI 설계 모듈
130: 파일 생성 모듈 140: 시뮬레이션 모듈
200: 시뮬레이션 서버 210: 통신 모듈
220: 변환 모듈 300: 모바일 디바이스

Claims (10)

  1. GUI 설계 시스템으로서,
    GUI 설계 프로그램(10)을 탑재하고, 상기 GUI 설계 프로그램(10)을 이용해 모바일 GUI를 디자인하는 디자이너 디바이스(100); 및
    상기 디자이너 디바이스(100)에서 디자인된 모바일 GUI의 내용을 수신하고, 수신한 내용을 시뮬레이션 가능한 웹 기반 문서로 변환하여 상기 디자이너 디바이스(100)에 전송하는 시뮬레이션 서버(200)를 포함하며,
    상기 디자이너 디바이스(100)는, 상기 시뮬레이션 서버(200)에서 전송받은 웹 기반 문서를 이용해 상기 디자인된 모바일 GUI의 시뮬레이션을 실행하되,
    상기 디자이너 디바이스(100)는,
    상기 GUI 설계 프로그램(10)을 탑재 및 구동하는 프로그램 구동 모듈(110);
    상기 GUI 설계 프로그램(10)을 이용해 모바일 GUI를 디자인하는 GUI 설계 모듈(120);
    상기 디자인된 모바일 GUI의 내용을 파일로 생성하여 상기 시뮬레이션 서버(200)에 전송하는 파일 생성 모듈(130); 및
    상기 시뮬레이션 서버(200)로부터 전송받은 웹 기반 문서를 출력하여 시뮬레이션을 실행하는 시뮬레이션 모듈(140)을 포함하며,
    상기 GUI 설계 프로그램(10)은, 모바일 GUI를 디자인할 수 있는 각종 툴 및 모바일 GUI 디자인에 활용 가능한 각종 템플릿을 제공하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  2. 제1항에 있어서, 상기 디자이너 디바이스(100)는,
    디자이너의 조작에 따른 모바일 GUI의 디자인 내용이 표시되는 편집 스크린(21) 및 상기 모바일 GUI의 시뮬레이션 실행을 출력하는 프리뷰 스크린(22)을 상기 GUI 설계 프로그램(10)을 통해 출력하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  3. 제1항에 있어서, 상기 디자이너 디바이스(100)는,
    상기 GUI 설계 프로그램(10)을 이용해 상기 모바일 GUI를 구성하는 객체에 인터액션 속성을 설정하며, 상기 모바일 GUI의 시뮬레이션 실행을 통해 상기 설정된 인터액션을 실행하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  4. 삭제
  5. 제1항에 있어서, 상기 파일 생성 모듈(130)은,
    상기 디자인된 모바일 GUI의 내용을 XML 형태의 파일로 생성하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  6. 제1항에 있어서, 상기 시뮬레이션 서버(200)는,
    상기 디자이너 디바이스(100)로부터 상기 모바일 GUI의 내용을 수신하며, 상기 변환된 웹 기반 문서를 상기 디자이너 디바이스(100)에 전송하는 통신 모듈(210); 및
    상기 통신 모듈(210)에서 수신한 모바일 GUI의 내용을 파싱하여 상기 디자이너 디바이스(100) 또는 모바일 디바이스(300)에서 시뮬레이션 가능한 웹 기반 문서로 변환하는 변환 모듈(220)을 포함하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  7. 제6항에 있어서, 상기 변환 모듈(220)은,
    상기 모바일 GUI의 내용을 HTML, HTML5, CSS3 및 JavaScript를 포함하는 군에서 선택된 적어도 어느 하나의 형태의 웹 기반 문서로 변환하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  8. 제1항에 있어서,
    상기 시뮬레이션 서버(200)는, 상기 변환된 웹 기반 문서에 URL 주소를 할당하고, 상기 할당된 URL 주소를 상기 디자이너 디바이스(100)에 전송하며,
    상기 디자이너 디바이스(100)는, 상기 URL 주소를 통해 상기 시뮬레이션 서버(200)에 접속하고 상기 URL 주소에 대응되는 웹 기반 문서를 출력하여 시뮬레이션을 실행하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  9. 제1항에 있어서,
    모바일 런타임 시뮬레이션 애플리케이션을 탑재하며, 상기 시뮬레이션 서버(200)에 접속하고 상기 모바일 런타임 시뮬레이션 애플리케이션을 이용해 상기 웹 기반 문서에 의한 시뮬레이션을 실행하는 모바일 디바이스(300)를 더 포함하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
  10. 제9항에 있어서, 상기 모바일 디바이스(300)는,
    상기 모바일 런타임 시뮬레이션 애플리케이션을 통해, 제스처 API를 호출하여 상기 웹 기반 문서에 포함된 제스처 인식 기능의 시뮬레이션을 실행하는 것을 특징으로 하는, 모바일 GUI 시뮬레이션을 위한 GUI 설계 시스템.
KR1020140050347A 2014-04-25 2014-04-25 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템 KR101597160B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140050347A KR101597160B1 (ko) 2014-04-25 2014-04-25 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140050347A KR101597160B1 (ko) 2014-04-25 2014-04-25 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템

Publications (2)

Publication Number Publication Date
KR20150123658A KR20150123658A (ko) 2015-11-04
KR101597160B1 true KR101597160B1 (ko) 2016-02-24

Family

ID=54600115

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140050347A KR101597160B1 (ko) 2014-04-25 2014-04-25 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템

Country Status (1)

Country Link
KR (1) KR101597160B1 (ko)

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100411891B1 (ko) * 2001-04-09 2003-12-24 주식회사 팬택앤큐리텔 휴대형 무선 통신 단말기에서 사용자 인터페이스 구현 방법
KR100989260B1 (ko) * 2008-08-22 2010-10-20 주식회사 케이티 단말기 ｕｉ 저작 장치 및 단말기 ｕｉ 저작 방법과 이를 구현하기 위한 프로그램이 기록된 기록매체

Also Published As

Publication number Publication date
KR20150123658A (ko) 2015-11-04

Similar Documents

Publication Publication Date Title
EP3026565B1 (en) Automated testing of web-based applications
US9971740B2 (en) Dynamic webpage image
US9077770B2 (en) Mobile web app infrastructure
US9400784B2 (en) Integrated application localization
US9442744B2 (en) Multilingual build integration for compiled applications
JP5885527B2 (ja) 印刷システム、印刷サーバ、制御方法およびコンピュータプログラム
CN107247544B (zh) 使用交互图像优化软件应用用户界面性能
US20110287750A1 (en) Link server and program thereof, website browsing system, website browsing method, and website browsing program
CN104268739A (zh) 一种将企业信息系统快速转化为移动应用的方法和系统
WO2014154111A1 (en) Graphic processing method, system and server
CN107688529A (zh) 组件调试方法和装置
CN103246830B (zh) 客户端脚本的加密处理方法及装置和解密处理方法及装置
CN106528184A (zh) 一种基于cordova平台的app开发方法
CN107704499A (zh) 一种应用程序的页面跳转控制方法及装置
CN107273108A (zh) 显示和操作装置以及通过显示和操作装置操作现场设备的方法
JP5151696B2 (ja) ユニフォームリソースロケータ情報を書き換えるプログラム
CN109309612B (zh) 邮件内容生成方法及装置、存储介质和电子设备
CN105279076A (zh) 一种网页测试方法及终端
KR101597160B1 (ko) 모바일 지유아이 시뮬레이션을 위한 지유아이 설계 시스템
CN109002292B (zh) 一种基于网页弹出层的弹框实现方法及系统
US20140292778A1 (en) Graphic processing method, system and server
US20130174020A1 (en) Information adding method and information processing apparatus
CN103455459A (zh) 向iWidget传输负载数据的方法和系统
CN110619113A (zh) 预览iOS特定格式文件的方法和装置
CN108733673B (zh) 跨域图片的导出方法及导出装置、电子设备、存储介质

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20200204

Year of fee payment: 5