KR20180090415A - 디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 - Google Patents
디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 Download PDFInfo
- Publication number
- KR20180090415A KR20180090415A KR1020170014960A KR20170014960A KR20180090415A KR 20180090415 A KR20180090415 A KR 20180090415A KR 1020170014960 A KR1020170014960 A KR 1020170014960A KR 20170014960 A KR20170014960 A KR 20170014960A KR 20180090415 A KR20180090415 A KR 20180090415A
- Authority
- KR
- South Korea
- Prior art keywords
- information
- guide
- file
- objects
- tag information
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
본 명세서의 일 실시예에 따른 디자인 가이드 파일을 생성하는 방법은 복수의 오브젝트를 포함하는 그래픽 화면을 식별하는 단계, 상기 복수의 오브젝트 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하는 단계, 상기 태그 정보에 기초하여 상기 그래픽 화면에 대한 디자인 가이드 파일을 생성하는 단계를 포함할 수 있다. 상기 디자인 가이드 파일을 생성하는 단계는 상기 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하는 단계, 상기 가이드 정보를 포함하는 상기 디자인 가이드 파일 생성하는 단계를 포함하되, 상기 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함할 수 있다.
Description
본 명세서는 애플리케이션 개발 분야에 관한 것으로, 보다 상세하게는 GUI(graphical user interface)를 포함하는 애플리케이션 개발에 관한 것이다.
스마트 폰과 같은 모바일 디바이스의 대중적인 보급과 함께 IT 기술의 발전으로 모바일 시장이 가파르게 성장 했다. 이와 함께 다양한 모바일 애플리케이션의 등장으로 그 시장 또한 급격하게 성장했다. 이에 따라, 사람들의 일상에서 다양한 애플리케이션이 활용되고 있다. 한편, 대부분의 애플리케이션은 그래픽 유저 인터페이스(graphical user interface: GUI)를 포함한다. 사용자는 그래픽 유저 인터페이스를 통해 애플리케이션의 기능을 사용할 수 있다.
종래의 애플리케이션 개발 과정은 다음과 같이 진행된다. 먼저, 그래픽 디자이너가 애플리케이션의 컨셉에 맞게 그래픽 화면을 디자인 한다. 이 과정에서 그래픽 디자이너는 전문 그래픽 디자인 툴(예컨대, 포토샵, 스케치 등)을 사용하며, 해당 툴을 이용하여 특정 포맷의 파일을 생성할 수 있다. 이후 디자이너가 디자인한 그래픽 화면을 개발자에게 전달할 때, 디자인 툴에서 생성한 파일을 원본 그대로 전달하면 개발자가 디자인원본 파일을 사용해서 개발을 진행할 수 없다. 따라서, 디자이너는 개발자가 그래픽 화면을 시스템 상에서 구현할 수 있도록 하는 디자인 가이드를 문서 형태로 개발자에게 전달한다. 디자이너가 개발자에게 전달하는 이러한 형식의 문서를 디자인 가이드 문서(또는, 디자인 가이드)라 한다. 이러한 디자인 가이드 문서는 그래픽 화면에 대한 구체적인 정보를 포함한다.
종래의 애플리케이션 개발 과정에서, 디자이너는 워드, 파워포인트와 같은 일반적인 문서 작성 툴을 이용하여 수작업으로 디자인 가이드 문서를 작성한다. 이후, 디자이너는 디자인 가이드 문서를 개발자에게 전달하고, 개발자는 디자인 가이드 문서에 기초하여 애플리케이션을 구현한다.
종래의 방식과 같이, 디자이너가 일반적인 문서 작성 툴을 이용하여 디자인 가이드 문서를 수동으로 작성하는 경우, 디자인 가이드 문서를 작성하는데 많은 작업시간이 소요된다. 또한, 개발 과정에서 그래픽 화면의 변경/수정이 발생하는 경우, 디자이너가 해당 내용을 디자인 가이드 문서에 다시 반영하기 위해 상당한 시간이 소요된다.
뿐만 아니라, 디자인 가이드 문서가 일반적인 문서 작성 툴을 이용해 작성된 경우, 이에 대한 빈번한 수정/변경 작업은 사용자 오류가 발생될 확률을 증가 시킨다. 이 경우, 개발 중간 과정에서 개발자에 의해 인지된 오류로 인하여, 오류 수정을 위한 시간이 추가로 발생하게 된다.
또한, 일반적인 문서 작성 툴을 이용해 작성된 디자인 가이드 문서는 고정된 정보만을 제공할 수 있다. 그러나, 개발자의 입장에서는 개발 도구의 한계 또는 개발 효율성을 위해 디자인 가이드 문서에 있는 정보 이외에 부가 정보가 필요한 경우가 생긴다. 이 경우, 개발자는 디자인 가이드 문서에 포함된 정보에 기초하여 필요한 부가 정보를 수동으로 계산할 수 있다. 그러나, 디자인 가이드 문서에 포함된 정보의 한계로 인하여 필요한 부가 정보를 계산할 수 없는 경우, 개발자는 디자이너에게 해당 정보를 제공하도록 요청해야 하고, 디자이너는 개발자가 요청한 정보를 포함하도록 디자인 가이드 문서를 수정 또는 재작성하여 개발자에게 전달해야 한다. 이로 인해 작업 효율성이 낮아지게 되고 전체적인 생산성 또한 저하될 수 있다.
상술한 기술적 과제를 해결하기 위하여, 본 발명은 디자인 가이드 파일을 생성하고 보기 위한 장치 및 방법을 제안한다.
본 발명의 일 실시예에 따른 디자인 가이드 파일을 생성하는 방법은 복수의 오브젝트를 포함하는 그래픽 화면을 식별하는 단계; 상기 복수의 오브젝트 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하는 단계; 및 상기 태그 정보에 기초하여 상기 그래픽 화면에 대한 디자인 가이드 파일을 생성하는 단계를 포함하며, 상기 디자인 가이드 파일을 생성하는 단계는: 상기 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하는 단계; 및 상기 가이드 정보를 포함하는 상기 디자인 가이드 파일 생성하는 단계를 포함하되, 상기 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함할 수 있다.
실시예로서, 상기 적어도 하나의 태그 정보는, 상기 오브젝트를 영역 정보의 추출이 필요한 오브젝트로 분류하기 위한 영역 태그 정보, 상기 오브젝트를 이미지 파일의 추출이 필요한 애셋으로 분류하기 위한 애셋 태그 정보, 상기 오브젝트를 프로그래밍으로 그려야 하는 드로워로 분류하기 위한 드로우 태그 정보, 상기 오브젝트를 상태 정보의 추출이 필요한 오브젝트로 분류하기 위한 상태 세트 태그 정보 또는 상기 오브젝트를 반복되는 패턴에 대한 이미지 파일의 추출이 필요한 나인패치로 분류하기 위한 나인패치 태그 정보 중 적어도 하나를 포함할 수 있다.
실시예로서, 상기 가이드 정보를 생성하는 단계는, 상기 오브젝트가 상기 영역 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 영역 정보를 상기 가이드 정보로서 생성하고, 상기 영역 정보는 상기 오브젝트가 속하는 영역을 나타내는 위치 정보 또는 크기 정보 중 적어도 하나를 포함할 수 있다.
실시예로서, 상기 가이드 정보를 생성하는 단계는, 상기 오브젝트가 상기 애셋 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트의 이미지를 이미지 파일로 추출하고, 상기 이미지에 대한 이미지 정보를 상기 가이드 정보로서 생성하고, 상기 이미지 정보는 상기 오브젝트를 상기 애셋으로 구현하기 위한 정보를 제공할 수 있다.
실시예로서, 상기 가이드 정보를 생성하는 단계는, 상기 오브젝트가 상기 드로우 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 드로잉 정보를 상기 가이드 정보로서 생성하고, 상기 드로잉 정보는 상기 오브젝트를 상기 드로워로 구현하기 위한 정보를 제공할 수 있다.
실시예로서, 상기 가이드 정보를 생성하는 단계는, 상기 오브젝트가 상기 상태 세트 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 상태 정보를 상기 가이드 정보로서 생성하고, 상기 상태 정보는 상기 오브젝트를 각 상태 별로 구현하기 위한 정보를 제공할 수 있다.
실시예로서, 상기 가이드 정보를 생성하는 단계는, 상기 오브젝트가 상기 나인패치 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에서 반복되는 특정 패턴의 이미지를 패턴 이미지 파일로 추출하고, 상기 패턴 이미지에 대한 패턴 이미지 정보를 상기 가이드 정보로서 생성하고, 상기 패턴 이미지 정보는 상기 오브젝트를 상기 나인패치로 구현하기 위한 정보를 제공할 수 있다.
실시예로서, 상기 태그 정보를 추가하는 단계는: 태그 정보 추가 인터페이스를 제공하는 단계로서, 상기 태그 정보 추가 인터페이스는 상기 오브젝트에 추가될 태그 정보의 선택을 위한 적어도 하나의 입력 인터페이스를 제공하는; 상기 입력 인터페이스를 선택하는 사용자 입력을 수신하는 단계; 및 상기 입력 인터페이스에 대응되는 태그 정보에 기초하여 상기 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하는 단계를 포함할 수 있다.
본 발명의 일 실시예에 따른 디자인 가이드 파일을 생성하는 장치는 디자인 가이드 파일의 생성에 필요한 데이터 및 프로그램을 저장하는 메모리; 및 상기 메모리를 제어하여, 상기 디자인 가이드 파일의 생성을 수행하는 프로세서를 포함하며, 상기 프로세서는, 복수의 오브젝트를 포함하는 그래픽 화면을 식별하고, 상기 복수의 오브젝트 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하고, 그리고 상기 태그 정보에 기초하여 상기 그래픽 화면에 대한 디자인 가이드 파일을 생성하되, 상기 디자인 가이드 파일을 생성하는 것은: 상기 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하는 것; 및 상기 가이드 정보를 포함하는 상기 디자인 가이드 파일을 생성하는 것을 포함하되, 상기 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함할 수 있다.
본 발명의 일 실시예에 따른 디자인 가이드 파일을 보는 방법은 디자인 가이드 파일을 불러오는 단계, 상기 디자인 가이드 파일은 그래픽 화면에 대한 정보 및 상기 그래픽 화면에 포함된 복수의 오브젝트에 대한 가이드 정보를 포함하는; 상기 복수의 오브젝트를 포함하는 그래픽 화면을 디스플레이 하는 단계; 상기 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신하는 단계; 및 선택된 오브젝트에 대한 가이드 정보를 제공하는 단계를 포함할 수 있다.
실시예로서, 상기 선택된 오브젝트가 애셋인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 애셋임을 나타내는 타입 정보 및 상기 애셋이 위치하는 영역을 나타내는 영역 정보를 포함할 수 있다.
실시예로서, 상기 선택된 오브젝트가 드로워인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 드로워임을 나타내는 타입 정보, 상기 드로워가 위치하는 영역을 나타내는 영역 정보 또는 상기 드로워의 상태를 나타내는 상태 정보 중 적어도 하나를 포함할 수 있다.
실시예로서, 상기 선택된 오브젝트가 텍스트인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 텍스트임을 나타내는 타입 정보, 상기 텍스트가 위치하는 영역을 나타내는 영역 정보 또는 상기 텍스트의 내용을 나타내는 컨텐츠 정보 중 적어도 하나를 포함할 수 있다.
실시예로서, 하나의 오브젝트가 선택된 경우, 상기 하나의 오브젝트가 위치하는 영역을 나타내는 영역 정보를 상기 그래픽 화면 상에 디스플레이 하는 단계를 더 포함할 수 있다.
실시예로서, 복수의 오브젝트가 선택된 경우, 상기 복수의 오브젝트가 위치하는 전체 영역을 나타내는 영역 정보 및 복수의 오브젝트 간의 간격을 나타내는 간격 정보를 상기 그래픽 화면 상에 디스플레이 하는 단계를 더 포함할 수 있다.
실시예로서, 상기 가이드 정보를 제공하는 단계는, 상기 선택된 오브젝트와 연관된 가이드 정보를 재구성하고, 재구성된 가이드 정보를 제공하는 단계를 포함할 수 있다.
본 발명의 일 실시예에 따른 디자인 가이드 파일을 보는 장치는 디자인 가이드 파일의 디스플레이를 위해 필요한 데이터 및 프로그램을 저장하는 메모리; 상기 디자인 가이드 파일을 디스플레이하는 디스플레이부; 및 상기 메모리를 제어하여, 상기 디자인 가이드 파일의 디스플레이를 수행하는 프로세서를 포함하며, 상기 프로세서는, 상기 디자인 가이드 파일을 불러오고, 상기 디자인 가이드 파일은 그래픽 화면에 대한 정보 및 상기 그래픽 화면에 포함된 복수의 오브젝트에 대한 가이드 정보를 포함하며, 상기 복수의 오브젝트를 포함하는 그래픽 화면을 디스플레이하고, 상기 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신하는 단계; 선택된 오브젝트에 대한 가이드 정보를 제공하는 단계를 포함할 수 있다.
본 명세서에 따르면, 디자인 가이드 생성 장치는 일반적인 문서 작성 툴을 이용하여 디자인 가이드 문서를 수동으로 생성하는 대신에, 새로운 방식의 디자인 가이드 작성 툴(또는, 애플리케이션)을 이용하여 디자인 가이드 문서 파일(또는, 디자인 가이드 파일)을 자동으로 생성함으로써, 디자인 가이드 정보(또는, 디자인 가이드)의 생성을 위한 디자이너의 작업 시간을 감소시킬 수 있다. 또한, 디자인 가이드 생성 장치는 디자인 가이드 정보의 수동 생성으로 인한 사용자 실수나 정보의 누락을 방지할 수 있다.
또한, 디자인 가이드 생성 장치는 디자인 화면을 구성하는 구성 요소(또는 오브젝트)에 태그 정보를 추가하고, 태그 정보에 기초하여 디자인 가이드 정보를 생성함으로써, 개발자가 원하는 디자인 가이드 정보 및 부가 정보를 제공하는 디자인 가이드 파일을 생성할 수 있다. 이 경우, 개발자는 디자인 가이드 뷰잉 장치를 이용하여 디자인 가이드 파일의 내용을 확인함으로써, 개발에 필요한 디자인 가이드 정보 및 부가 정보를 획득할 수 있다.
도 1은 본 발명의 일 실시예에 따른 디스플레이 장치의 구성도이다.
도 2는 본 발명의 일 실시예에 따른 그래픽 화면의 일 예를 나타낸다.
도 3은 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다.
도 4는 본 발명의 일 실시예에 따른 디스플레이 장치가 오브젝트에 태그 정보를 추가하는 방법을 나타낸다.
도 5는 본 발명의 일 실시예에 따른 태그 정보의 추가를 위한 인터페이스를 나타낸다.
도 6은 본 발명의 다른 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다.
도 7은 본 발명의 일 실시예에 따른 프로젝트 환경 설정을 위한 인터페이스를 나타낸다.
도 8은 본 발명의 일 실시예에 따른 프로젝트 노트를 추가하기 위한 인터페이스를 나타낸다.
도 9는 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 보는 방법을 나타낸다.
도 10은 본 발명의 제1 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 11은 본 발명의 제2 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 12는 본 발명의 제3 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 13은 본 발명의 제4 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 2는 본 발명의 일 실시예에 따른 그래픽 화면의 일 예를 나타낸다.
도 3은 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다.
도 4는 본 발명의 일 실시예에 따른 디스플레이 장치가 오브젝트에 태그 정보를 추가하는 방법을 나타낸다.
도 5는 본 발명의 일 실시예에 따른 태그 정보의 추가를 위한 인터페이스를 나타낸다.
도 6은 본 발명의 다른 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다.
도 7은 본 발명의 일 실시예에 따른 프로젝트 환경 설정을 위한 인터페이스를 나타낸다.
도 8은 본 발명의 일 실시예에 따른 프로젝트 노트를 추가하기 위한 인터페이스를 나타낸다.
도 9는 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 보는 방법을 나타낸다.
도 10은 본 발명의 제1 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 11은 본 발명의 제2 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 12는 본 발명의 제3 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
도 13은 본 발명의 제4 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
이하 첨부 도면들 및 첨부 도면들에 기재된 내용들을 참조하여 실시 예를 상세하게 설명하지만, 청구하고자 하는 범위는 실시 예들에 의해 제한되거나 한정되는 것은 아니다.
본 명세서에서 사용되는 용어는 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어를 선택하였으나, 이는 당 분야에 종사하는 기술자의 의도 또는 관례 또는 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 명세서의 설명 부분에서 그 의미를 기재할 것이다. 따라서 본 명세서에서 사용되는 용어는, 단순한 용어의 명칭이 아닌 그 용어가 가지는 실질적인 의미와 본 명세서의 전반에 걸친 내용을 토대로 해석되어야 함을 밝혀두고자 한다.
이하, 첨부된 도면을 참조하여 본 명세서에 개시된 실시 예를 상세히 설명하되, 도면 부호에 관계없이 동일하거나 유사한 구성요소는 동일한 참조 번호를 부여하고 이에 대한 중복되는 설명은 생략하기로 한다. 이하의 설명에서 사용되는 구성요소에 대한 접미사 "모듈" 및 "부"는 명세서 작성의 용이함만이 고려되어 부여되거나 혼용되는 것으로서, 그 자체로 서로 구별되는 의미 또는 역할을 갖는 것은 아니다. 또한, 본 명세서에 개시된 실시 예를 설명함에 있어서 관련된 공지 기술에 대한 구체적인 설명이 본 명세서에 개시된 실시 예의 요지를 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다. 또한, 첨부된 도면은 본 명세서에 개시된 실시 예를 쉽게 이해할 수 있도록 하기 위한 것일 뿐, 첨부된 도면에 의해 본 명세서에 개시된 기술적 사상이 제한되지 않으며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.
제1, 제2 등과 같이 서수를 포함하는 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되지는 않는다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다.
어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.
단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다.
본 출원에서, "포함한다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.
본 명세서에서, 디스플레이 장치는 디자인 가이드 파일을 생성하거나, 그리고/또는 디자인 가이드 파일을 보기 위한 장치일 수 있다. 예를 들면, 디스플레이 장치는 디자인 가이드 파일을 생성하거나, 그리고/또는 디자인 가이드 파일을 볼 수 있는 장치로서, 예컨대, 데스크 탑, 노트북, 스마트 폰, 태블릿, 그래픽 디자인 전용 장치와 같은 디스플레이가 가능한 컴퓨팅 기기들일 수 있다.
본 명세서에서, 디자인 가이드 파일(design guide file)은 개발자가 디자이너에 의해 디자인된 그래픽 화면을 디자이너의 의도대로 구현할 수 있도록 가이드해주는 정보(또는, 데이터)를 포함하는 파일일 수 있다.
도 1은 본 발명의 일 실시예에 따른 디스플레이 장치의 구성도이다.
상술한 바와 같이, 디스플레이 장치(100)는 디자인 가이드 파일을 생성하거나, 그리고/또는 디자인 가이드 파일을 보기 위한 장치일 수 있다.
일 실시예에서, 디스플레이 장치(100)는 디스플레이 장치(100)에 저장된 디자인 가이드 생성(generation) 애플리케이션 또는 웹 서버에서 제공되는 디자인 가이드 생성 애플리케이션을 이용하여, 디자인 가이드 파일을 생성할 수 있다. 이러한 디자인 가이드 생성 애플리케이션은 예를 들면, GUI를 디자인하기 위한 디자인 애플리케이션(예컨대, 포토샵, 스케치 애플리케이션 등)의 확장 기능으로 사용되는 애플리케이션일 수 있다. 즉, 디자인 가이드 생성 애플리케이션은 디자인 애플리케이션의 플러그인(plug-in) 애플리케이션일 수 있다. 본 명세서에서, 디자인 가이드 생성 애플리케이션은 디자이너용 애플리케이션(또는, 디자이너 앱)으로 지칭될 수도 있고, 디자인 가이드 생성 애플리케이션을 이용하는 디스플레이 장치(100)는 디자이너용 디스플레이 장치(100)(또는, 디자인 가이드 생성 장치)로 지칭될 수도 있다.
다른 실시예에서, 디스플레이 장치(100)는 디스플레이 장치(100)에 저장된 디자인 가이드 보기(viewing) 애플리케이션 또는 웹 서버에서 제공되는 디자인 가이드 보기 애플리케이션을 이용하여, 디자인 가이드 파일을 볼 수 있다. 이러한 디자인 가이드 보기 애플리케이션은 예를 들면, 독립적으로 사용되는 애플리케이션일 수 있다. 즉, 디자인 가이드 보기 애플리케이션은 디자인 애플리케이션의 확장 기능으로 사용되는 애플리케이션이 아닌, 독립적으로 사용되는 애플리케이션일 수 있다. 본 명세서에서, 디자인 가이드 보기 애플리케이션은 개발자용 애플리케이션(또는, 뷰어 앱)으로 지칭될 수도 있고, 디자인 가이드 보기 애플리케이션을 이용하는 디스플레이 장치(100)는 개발자용 디스플레이 장치(100)(또는, 디자인 가이드 보기 장치)로 지칭될 수도 있다.
실시예로서, 디스플레이 장치(100)에 의해 생성된 디자인 가이드 파일은 다양한 전달 방식을 통해 다른 디스플레이 장치(100)로 전달될 수 있다.
예를 들면, 디자이너용 디스플레이 장치에 의해 생성된 디자인 가이드 파일은 네트워크를 통해 개발자용 디스플레이 장치로 전송될 수 있다. 이 경우, 각 디스플레이 장치(100)는 네트워크 통신이 가능한 기기여야 한다. 실시예로서, 네트워크는 인터넷, LAN(Local Area Network), WLAN(Wireless Local Area Network), WAN(Wide Area Network), Wi-Fi(Wireless Fidelity), 3G, 4G, LTE(Long Term Evolution)등 다양한 통신 프로토콜을 사용하는 통신 시스템 또는 이들의 조합을 나타내며, 상술한 실시예들로 제한되지는 않는다. 다시 말하면, 네트워크는 원격에 위치하는 디스플레이 장치들을 연결하여 데이터 통신을 수행할 수 있는 적어도 하나의 통신망 또는 이들의 조합을 나타내는 것이다.
다른 예를 들면, 디자이너용 디스플레이 장치에 의해 생성된 디자인 가이드 파일은 USB(Universal Serial Bus)와 같은 저장 매체를 통해 개발자용 디스플레이 장치로 전달될 수 있다. 이 경우, 각 디스플레이 장치는 네트워크 통신이 가능한 기기일 필요는 없고, 해당 저장 매체에 저장된 파일을 읽을 수 있는 기기이면 족하다.
도 1을 참조하면, 디스플레이 장치(100)는 통신부(110), 입력부(120), 출력부(130), 인터페이스부(140), 전원공급부(150), 메모리(160) 및/또는 프로세서(170)를 포함할 수 있다. 도 1에 도시된 구성요소들은 디스플레이 장치(100)를 구현하는데 있어서 필수적인 것은 아니어서, 본 명세서 상에서 설명되는 디스플레이 장치(100)는 위에서 열거된 구성요소들 보다 많거나, 또는 적은 구성요소들을 가질 수 있다.
통신부(110)는 디스플레이 장치(100)와 무선 통신 시스템 사이, 디스플레이 장치(100)와 다른 디스플레이 장치 사이, 또는 디스플레이 장치(100)와 외부서버 사이의 무선 통신을 가능하게 하는 하나 이상의 모듈을 포함할 수 있다. 또한, 통신부(110)는 디스플레이 장치(100)를 하나 이상의 네트워크에 연결하는 하나 이상의 모듈을 포함할 수 있다. 이러한 통신부(110)는, 방송통신 모듈, 이동통신 모듈, 무선 인터넷 모듈, 근거리 통신 모듈, 위치정보 모듈 중 적어도 하나를 포함할 수 있다. 실시예로서, 디스플레이 장치(100)는 통신부(110)를 통해, 웹 서버 등에서 제공되는 디자인 가이드 생성 애플리케이션 또는 디자인 가이드 보기 애플리케이션을 이용할 수 있다. 또한, 디스플레이 장치(100)는 통신부(110)를 통해 생성된 디자인 가이드 파일을 다른 디스플레이 장치로 전송할 수 있다.
입력부(120)는 영상 신호 입력을 위한 카메라 또는 영상 입력부(120), 오디오 신호 입력을 위한 마이크로폰(microphone), 또는 오디오 입력부(120), 사용자로부터 정보를 입력받기 위한 사용자 입력부(예를 들어, 터치키(touch key), 푸시키(mechanical key) 등)를 포함할 수 있다. 입력부(120)에서 수집한 음성 데이터나 이미지 데이터는 분석되어 사용자의 제어명령으로 처리될 수 있다. 실시예로서, 디스플레이 장치(100)는 입력부(120)를 통해 디자인 가이드 파일의 생성 및 보기를 위한 다양한 사용자 입력을 수신할 수 있다.
출력부(130)는 시각, 청각 또는 촉각 등과 관련된 출력을 발생시키기 위한 것으로, 디스플레이부, 음향 출력부, 햅팁 모듈, 광 출력부 중 적어도 하나를 포함할 수 있다. 실시예로서, 디스플레이부는 터치 센서와 상호 레이어 구조를 이루거나 일체형으로 형성됨으로써, 터치 스크린을 구현할 수 있다. 이러한 터치 스크린은, 디스플레이 장치(100)와 사용자 사이의 입력 인터페이스를 제공하는 사용자 입력부(120)로써 기능함과 동시에, 디스플레이 장치(100)와 사용자 사이의 출력 인터페이스를 제공할 수 있다. 실시예로서, 디스플레이 장치(100)는 출력부(130)를 통해 디자인 가이드 파일의 생성 및 보기를 위한 다양한 형태의 출력을 제공할 수 있다.
인터페이스부(140)는 디스플레이 장치(100)에 연결되는 다양한 종류의 외부 기기와의 통로 역할을 수행한다. 이러한 인터페이스부(140)는, 유/무선 헤드셋 포트(port), 외부 충전기 포트(port), 유/무선 데이터 포트(port), 메모리(160) 카드(memory card) 포트, 식별 모듈이 구비된 장치를 연결하는 포트(port), 오디오 I/O(Input/Output) 포트(port), 비디오 I/O(Input/Output) 포트(port), 이어폰 포트(port) 중 적어도 하나를 포함할 수 있다. 디스플레이 장치(100)에서는, 인터페이스부(140)에 외부 기기가 연결되는 것에 대응하여, 연결된 외부 기기와 관련된 적절할 제어를 수행할 수 있다.
전원공급부(150)는 프로세서(170)의 제어 하에서, 외부의 전원, 내부의 전원을 인가 받아 디스플레이 장치(100)에 포함된 각 구성요소들에 전원을 공급한다. 이러한 전원공급부(150)는 배터리를 포함하며, 상기 배터리는 내장형 배터리 또는 교체가능한 형태의 배터리가 될 수 있다.
메모리(160)는 디스플레이 장치(100)의 다양한 기능을 지원하는 데이터를 저장한다. 메모리(160)는 디스플레이 장치(100)에서 구동되는 다수의 응용 프로그램(application program 또는 애플리케이션(application)), 디스플레이 장치(100)의 동작을 위한 데이터들, 명령어들을 저장할 수 있다. 이러한 응용 프로그램 중 적어도 일부는, 무선 통신을 통해 외부 서버로부터 다운로드 될 수 있다. 또한, 이러한 응용 프로그램 중 적어도 일부는, 디스플레이 장치(100)의 기본적인 기능을 위하여 출고 당시부터 디스플레이 장치(100)상에 존재할 수 있다. 한편, 응용 프로그램은, 메모리(160)에 저장되고, 디스플레이 장치(100) 상에 설치되어, 프로세서(170)에 의하여 디스플레이 장치(100)의 동작(또는 기능)을 수행하도록 구동될 수 있다.
프로세서(170)는 응용 프로그램과 관련된 동작 외에도, 통상적으로 디스플레이 장치(100)의 전반적인 동작을 제어한다. 프로세서(170)는 위에서 살펴본 구성요소들을 통해 입력 또는 출력되는 신호, 데이터, 정보 등을 처리하거나 메모리(160)에 저장된 응용 프로그램을 구동함으로써, 사용자에게 적절한 정보 또는 기능을 제공 또는 처리할 수 있다.
또한, 프로세서(170)는 메모리(160)에 저장된 응용 프로그램을 구동하기 위하여, 도 1과 함께 살펴본 구성요소들 중 적어도 일부를 제어할 수 있다. 나아가, 프로세서(170)는 응용 프로그램의 구동을 위하여, 디스플레이 장치(100)에 포함된 구성요소들 중 적어도 둘 이상을 서로 조합하여 동작시킬 수 있다.
실시예로서, 프로세서(170)는 이하에서 설명할 디자인 가이드 파일의 생성 및 보기와 관련된 본 발명의 다양한 실시예에 따른 동작을 수행하도록 구성될 수 있다. 또한, 이러한 본 발명의 다양한 실시예에 따른 디스플레이 장치(100)의 동작을 구현하는 모듈, 데이터, 프로그램 또는 소프트웨어 중 적어도 하나가 메모리(160)에 저장되고, 프로세서(170)에 의하여 실행될 수 있다.
상술한 각 구성요소들 중 적어도 일부는, 이하에서 설명되는 다양한 실시 예들에 따른 디스플레이 장치(100)의 동작, 제어, 또는 제어방법을 구현하기 위하여 서로 협력하여 동작할 수 있다. 또한, 디스플레이 장치(100)의 동작, 제어, 또는 제어방법은 메모리(160)에 저장된 적어도 하나의 응용 프로그램의 구동에 의하여 디스플레이 장치(100) 상에서 구현될 수 있다.
도 2는 본 발명의 일 실시예에 따른 그래픽 화면의 일 예를 나타낸다.
본 명세서에서, 그래픽 화면(200)은 애플리케이션(또는, 서비스)을 구성(또는, 구현)하기 위한 화면(또는, GUI)일 수 있고, 하나의 애플리케이션은 하나 또는 그 이상의 그래픽 화면(200)을 포함할 수 있다. 즉, 하나의 애플리케이션은 그 복잡도에 따라 하나 또는 그 이상의 그래픽 화면(200)으로 구성될 수 있다. 본 명세서에서, 그래픽 화면은 애플리케이션 화면(또는, 앱 화면)으로 지칭될 수도 있다.
실시예로서, 그래픽 화면(200)은 해당 디스플레이 장치에서 디자인된 그래픽 화면 또는 다른 디스플레이 장치에서 디자인된 그래픽 화면일 수 있다. 실시예로서, 디스플레이 장치는 예컨대, 포토샵, 스케치와 같은 디자인 애플리케이션을 이용하여 그래픽 화면(200)을 디자인할 수 있다.
실시예로서, 그래픽 화면(200)은 적어도 하나의 오브젝트(또는, 구성요소)(211, 212 등)를 포함할 수 있다. 예를 들면, 도 2에 도시된 것과 같이, 그래픽 화면(200)은 텍스트 타입의 오브젝트(텍스트 타입 오브젝트)(211, 212 등), 이미지(image) 타입의 오브젝트(이미지 타입 오브젝트)(221, 222 등) 및/또는 모양(shape) 타입의 오브젝트(모양 타입 오브젝트)(231 등)를 포함할 수 있다. 이와 같이, 그래픽 화면(200)은 적어도 하나의 오브젝트를 포함할 수 있고, 각 오브젝트의 타입은 동일하거나 상이할 수 있다.
실시예로서, 하나의 오브젝트는 하나 또는 복수의 레이어와 연관될 수 있다. 예를 들면, 하나의 오브젝트가 하나의 레이어와 연관된 경우, 해당 레이어는 해당 오브젝트에 대한 데이터를 포함할 수 있다. 이 경우, 레이어가 포함하는 데이터의 형태에 따라 오브젝트가 어떠한 타입의 오브젝트인지가 결정될 수 있다. 다른 예를 들면, 하나의 오브젝트가 복수의 레이어와 연관된 경우, 각 레이어는 하나의 오브젝트의 일부에 대한 데이터를 포함할 수 있다. 한편, 각 오브젝트는 서로 상이한 레이어와 연관될 수 있다.
실시예로서, 한 타입의 오브젝트가 속하는 영역은 다른 타입의 오브젝트가 속하는 영역에 포함될 수 있다. 예를 들면, 도 2에 도시된 것처럼, 이미지 타입 오브젝트(222)(예컨대, 아이콘)가 속하는 영역은 모양 타입 오브젝트(231)(예컨대, 바(bar))가 속하는 영역에 포함될 수 있다. 또한, 텍스트 타입 오브젝트(212)가 속하는 영역은 모양 타입 오브젝트(231)가 속하는 영역에 포함될 수 있다.
도 3은 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다. 도 3의 실시예에서는, 디스플레이 장치가 도 2의 실시예와 같은 하나의 그래픽 화면에 대한 디자인 가이드 파일을 생성하는 방법을 설명한다.
도 3을 참조하면, 디스플레이 장치는 그래픽 화면을 식별할 수 있다(S310). 실시예로서, 디스플레이 장치는 디자인 가이드 생성 애플리케이션의 그래픽 화면 식별 모듈을 이용하여 그래픽 화면을 식별할 수 있다. 실시예로서, 식별된 그래픽 화면은 하나 또는 복수의 오브젝트를 포함할 수 있다.
실시예로서, 디스플레이 장치는 디자인 애플리케이션을 통해 이미지 파일을 불러오고, 디자인 가이드 생성 애플리케이션을 통해 이미지 파일에 포함된 복수의 그래픽 화면 중 하나의 그래픽 화면을 식별할 수 있다. 이때, 식별된 그래픽 화면은 디스플레이부 상에 디스플레이된 그래픽 화면 또는 사용자에 의해 선택된 그래픽 화면일 수 있다.
실시예로서, 그래픽 화면이 식별되는 경우, 디스플레이 장치는 그래픽 화면에 포함된 각 오브젝트에 대한 속성 정보를 획득할 수 있다. 여기서, 속성 정보는 오브젝트의 속성을 나타내는 정보를 의미한다. 예를 들면, 텍스트 타입 오브젝트의 속성 정보는 텍스트의 종류, 위치, 크기, 색상 및/또는 효과에 대한 정보를 포함할 수 있다. 또는, 이미지 타입 오브젝트의 속성 정보는 이미지의 위치 및/또는 크기에 대한 정보를 포함할 수 있다. 또는, 모양 타입 오브젝트의 속성 정보는 모양의 위치, 크기, 색상 및/또는 효과에 대한 정보를 포함할 수 있다.
디스플레이 장치는 그래픽 화면에 포함된 하나 또는 복수의 오브젝트들 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가할 수 있다(S320). 실시예로서, 디스플레이 장치는 디자인 가이드 생성 애플리케이션의 태그 정보 추가 모듈을 이용하여 태그 정보를 추가할 수 있다.
여기서, 태그 정보는 오브젝트를 분류하기 위해 사용되는 정보를 의미한다. 실시예로서, 태그 정보는 영역 태그 정보, 애셋(asset) 태그 정보, 드로우(draw) 태그 정보, 상태 세트 태그 정보 또는 나인패치(9patch) 태그 정보 중 적어도 하나를 포함할 수 있다.
영역 태그 정보는 해당 오브젝트를 영역 정보의 추출이 필요한 오브젝트로 분류하기 위해 사용되는 정보일 수 있다. 영역 태그 정보는 해당 오브젝트에 대한 영역 정보가 생성(또는, 추출)되어야 함을 나타낼 수 있다. 실시예로서, 영역 태그 정보는 텍스트 타입 오브젝트 또는 이미지 타입 오브젝트에만 추가될 수 있다.
애셋 태그 정보는 해당 오브젝트를 이미지 파일의 추출이 필요한 애셋으로 분류하기 위해 사용되는 정보일 수 있다. 애셋 태그 정보는 해당 오브젝트가 이미지 파일로 추출되어야 하는 애셋임을 나타낼 수 있다. 실시예로서, 애셋 태그 정보는 이미지 타입 오브젝트에만 추가될 수 있다.
드로우 태그 정보는 해당 오브젝트를 프로그래밍으로 그려야 하는 드로워(drawer)로 분류하기 위해 사용되는 정보일 수 있다. 드로우 태그 정보는 해당 오브젝트가 이미지 파일로 추출되어야 하는 애셋이 아니라, 프로그래밍으로 구현되어야 하는 드로워임을 나타낼 수 있다. 실시예로서, 드로우 태그 정보는 모양 타입 오브젝트에만 추가될 수 있다.
상태 태그 정보는 해당 오브젝트를 상태 정보의 추출이 필요한 오브젝트로 분류하기 위해 사용되는 정보일 수 있다. 상태 세트 태그 정보는 해당 오브젝트가 사용자의 상호작용에 따라 상태가 변경되어야 하는 오브젝트임을 나타낼 수 있다. 실시예로서, 상태 세트 태그 정보는 모든 타입의 오브젝트에 추가될 수 있다.
나인패치 태그 정보는 오브젝트를 반복되는 패턴에 대한 이미지 파일의 추출이 필요한 나인패치로 분류하기 위해 사용되는 정보일 수 있다. 나인패치 태그 정보는 해당 오브젝트가 특정 패턴이 반복되는 나인패치임을 나타낼 수 있다. 실시예로서, 나인패치 태그 정보는 이미지 타입 오브젝트 중 특정 패턴이 반복되는 오브젝트에만 사용될 수 있다.
디스플레이 장치는 태그 정보에 기초하여 그래픽 화면에 대한 디자인 가이드 파일을 생성할 수 있다(S330). 실시예로서, 디스플레이 장치는 디자인 가이드 생성 애플리케이션의 디자인 가이드 파일 생성 모듈을 이용하여 디자인 가이드 파일을 생성할 수 있다.
실시예로서, 디스플레이 장치는 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하고, 가이드 정보를 포함하는 디자인 가이드 파일를 생성할 수 있다. 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함할 수 있다.
예를 들면, 오브젝트가 영역 태그 정보가 추가된 오브젝트인 경우, 디스플레이 장치는 해당 오브젝트에 대한 영역 정보를 가이드 정보로서 생성할 수 있다. 실시예로서, 영역 정보는 해당 오브젝트가 속하는 영역을 나타내는 위치 정보 및/또는 크기 정보, 예컨대, 텍스트의 위치 및/또는 크기 정보를 포함할 수 있다.
다른 예를 들면, 오브젝트가 애셋 태그 정보가 추가된 오브젝트인 경우, 디스플레이 장치는 해당 오브젝트의 이미지를 이미지 파일로 추출하고, 이미지에 대한 이미지 정보를 가이드 정보로서 생성할 수 있다. 실시예로서, 이미지 정보는 해당 오브젝트를 애셋으로 구현하기 위한 정보, 예컨대, 애셋의 위치, 크기 및 이름 정보 등을 제공할 수 있다.
또 다른 예를 들면, 오브젝트가 드로우 태그 정보가 추가된 오브젝트인 경우, 디스플레이 장치는 해당 오브젝트에 대한 드로잉(drawing) 정보를 가이드 정보로서 생성할 수 있다. 실시예로서, 드로잉 정보는 해당 오브젝트를 드로워로 구현하기 위한 정보, 예컨대, 드로워의 위치, 크기, 색상 및 효과 정보 등을 제공할 수 있다.
또 다른 예를 들면, 오브젝트가 상태 세트 태그 정보가 추가된 오브젝트인 경우, 디스플레이 장치는 해당 오브젝트에 대한 상태 정보를 가이드 정보로서 생성할 수 있다. 실시예로서, 상태 정보는 해당 오브젝트를 각 상태 별로 구현하기 위한 정보, 예컨대, 각 상태 별 애셋에 대한 정보, 각 상태 별 폰트(또는, 텍스트)에 대한 정보, 각 상태 별 드로워에 대한 정보 등을 제공할 수 있다.
또 다른 예를 들면, 오브젝트가 나인패치 태그 정보가 추가된 오브젝트인 경우, 디스플레이 장치는 해당 오브젝트에서 반복되는 특정 패턴의 패턴 이미지를 패턴 이미지 파일로 추출하고, 패턴 이미지에 대한 패턴 이미지 정보를 해당 오브젝트에 대한 가이드 정보로서 생성할 수 있다. 실시예로서, 패턴 이미지 정보는 해당 오브젝트를 나인패치로 구현하기 위한 정보, 예컨대, 나인패치의 위치, 크기 및 이름 정보 등을 제공할 수 있다.
이와 같이, 디스플레이 장치는 디자인 가이드 파일를 생성할 때, 각 오브젝트에 태그 정보를 추가하여 태그 정보에 따라 오브젝트를 분류하고, 이에 따라 상이한 데이터 가공/분석 처리를 수행함으로써, 해당 오브젝트에 대한 적절한 가이드 정보를 생성할 수 있다. 이를 통해, 디자이너가 의도하는 바에 맞는 적절한 가이드 정보를 포함하는 디자인 가이드 파일을 생성할 수 있다. 즉, 본 발명의 일 실시예에 의하면, 디스플레이 장치가 그래픽 화면을 디자인한 디자이너에 의해 직접 추가된 태그 정보에 의해 오브젝트를 분류하고, 이에 기초하여 데이터를 가공/처리하는 것이 가능하게 되어, 오브젝트의 특성에 맞는 정확한 가이드 정보를 포함하는 디자인 가이드 파일을 생성할 수 있게 된다. 이렇게 생성된 디자인 가이드 파일은 개발자용 디스플레이 장치로 전달될 수 있고, 디자인 가이드 보기 애플리케이션을 통해 개발자에게 보여질 수 있다.
도 4는 본 발명의 일 실시예에 따른 디스플레이 장치가 오브젝트에 태그 정보를 추가하는 방법을 나타낸다. 도 5는 본 발명의 일 실시예에 따른 태그 정보의 추가를 위한 인터페이스를 나타낸다. 본 명세서에서, 태그 정보의 추가를 위한 인터페이스는 태그 정보 추가 인터페이스로 지칭될 수 있다.
디스플레이 장치는 태그 정보 추가 인터페이스를 제공할 수 있다(S410). 실시예로서, 디스플레이 장치는 태그 정보 추가 인터페이스를 디스플레이할 수 있다. 실시예로서, 디스플레이 장치는 디자인 가이드 생성 애플리케이션이 실행될 때, 태그 정보 추가 인터페이스를 제공할 수 있다.
도 5에 도시된 것처럼, 일 실시예에 따른, 태그 정보 추가 인터페이스(500)는 오브젝트에 추가될 태그 정보의 선택을 위한 적어도 하나의 입력 인터페이스를 포함할 수 있다. 예를 들면, 적어도 하나의 입력 인터페이스는 영역 태그 정보를 추가하기 위한 제1 입력 인터페이스(510), 애셋 태그 정보를 추가하기 위한 제2 입력 인터페이스(520), 드로우 태그 정보를 추가하기 위한 제3 입력 인터페이스(530), 상태 세트 태그 정보를 추가하기 위한 제4 입력 인터페이스(550) 또는 나인패치 태그 정보를 추가하기 위한 제5 입력 인터페이스(560) 중 적어도 하나를 포함할 수 있다.
실시예로서, 각 입력 인터페이스(510~550)는 해당 태그 정보를 추가(또는, 생성)하기 위한 버튼 인터페이스를 포함할 수 있다. 또한, 제1 입력 인터페이스(510)는 영역 옵션 값을 설정하기 위한 영역 옵션 설정 인터페이스를 더 포함할 수 있다. 또는, 제2 입력 인터페이스(520)는 애샛 옵션 값을 설정하기 위한 애샛 옵션 설정 인터페이스를 더 포함할 수 있다. 또는, 제5 입력 인터페이스(550)는 나인패치 옵션 값을 설정하기 위한 나인패치 옵션 설정 인터페이스를 더 포함할 수 있다. 예를 들면, 디자이너에 의해 디자인된 그래픽 화면에 표시된 텍스트, 애셋, 나인패치 등의 영역과 개발자에 의해 실제 구현되어야 하는 텍스트, 애셋, 나인패치 등의 영역이 다른 경우, 디자이너는 옵션 설정 인터페이스 내의 옵션 값을 적절히 설정함으로써 개발자가 디자이너의 의도 대로 그래픽 화면을 구현할 수 있게 할 수 있다.
디스플레이 장치는 태그 정보 추가 인터페이스에 대한 사용자 입력을 수신할 수 있다(S420). 실시예로서, 디스플레이 장치는 태그 정보 추가 인터페이스 중 하나 이상의 입력 인터페이스를 선택하는 사용자 입력을 수신(또는, 검출)할 수 있다. 예를 들면, 이미티 타입 오브젝트에 대하여, 디스플레이 장치는 영역 태그 정보의 추가를 위한 제1 입력 인터페이스 및 애셋 태그 정보의 추가를 위한 제2 입력 인터페이스를 선택하는 사용자 입력을 검출할 수 있다.
디스플레이 장치는 오브젝트에 적어도 하나의 태그 정보를 추가할 수 있다(S430). 실시예로서, 디스플레이 장치는 입력 인터페이스에 대응되는 태그 정보에 기초하여 하나의 오브젝트에 하나 또는 복수의 태그 정보를 추가할 수 있다.
상술한 태그 정보 추가 과정은 오브젝트 별로 수행될 수 있다. 예를 들면, 사용자는 하나의 오브젝트를 선택하고, 선택된 오브젝트에 대하여 상술한 태그 정보 추가 과정을 수행할 수 있다. 이후, 사용자는 다른 오브젝트를 선택하고, 선택된 다른 오브젝트에 대하여 상술한 태그 정보 추가 과정을 수행할 수 있다. 이와 같은 과정을 통해, 디스플레이 장치는 그래픽 화면에 포함된 오브젝트들 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가할 수 있다.
도 6은 본 발명의 다른 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 생성하는 방법을 나타낸다. 도 7은 본 발명의 일 실시예에 따른 프로젝트 환경 설정을 위한 인터페이스를 나타낸다. 도 6의 실시예에서는, 디스플레이 장치가 복수의 그래픽 화면을 포함하는 프로젝트에 대한 디자인 가이드 파일을 생성하는 방법을 설명한다.
도 6에서는 도 3 내지 5에서 설명된 내용과 중복된 설명은 생략한다. 예를 들면, 도 6의 실시예의 그래픽 화면 식별 단계(S610), 태그 정보 추가 단계(S620) 및 디자인 가이드 파일 생성 단계(S630)은 도 3에서 설명한 그래픽 화면 식별 단계(S310), 태그 정보 추가 단계(S320) 및 디자인 가이드 파일 생성 단계(S330)와 동일하거나 유사하므로 중복된 설명은 생략한다. 다만, 도 6의 디자인 가이드 파일 생성 단계(S630)는 도 3의 디자인 가이드 파일 생성 단계(S330)와 달리 그래픽 화면 단위가 아닌 프로젝트 단위로 수행될 수 있다. 다만, 이에 한정되지 아니하고, 실시예에 따라서는 그래픽 화면 단위로 수행될 수도 있다.
일반적으로 사용되는 하나의 애플리케이션은 복수의 그래픽 화면으로 구현될 수 있다. 즉, 하나의 애플리케이션은 복수의 그래픽 화면을 포함할 수 있다. 따라서, 그래픽 자원의 효율적인 관리를 위하여 복수의 그래픽 화면을 하나의 프로젝트 단위로 관리하는 것이 필요하다. 이를 위해, 디스플레이 장치는 프로젝트에 대한 환경 정보를 설정하는 기능을 제공할 필요가 있다.
도 6을 참조하면, 디스플레이 장치는 프로젝트 환경을 설정할 수 있다(S600). 실시예로서, 디스플레이 장치는 디자인 가이드 생성 어플리케이션의 프로젝트 환경 설정 모듈을 이용하여 프로젝트 환경을 설정할 수 있다.
실시예로서, 디스플레이 장치는 프로젝트 환경 정보의 설정을 위한 인터페이스(프로젝트 환경 설정 인터페이스)를 제공하고, 프로젝트 환경 설정 인터페이스에 대한 사용자 입력을 수신하고, 사용자 입력에 기초하여 프로젝트 환경을 설정할 수 있다.
도 7에 도시된 것처럼, 프로젝트 환경 설정 인터페이스(700)는 프로젝트의 이름을 설정하기 위한 인터페이스(710), 프로젝트에 대한 디자인 가이드 파일이 저장되는 위치를 설정하기 위한 인터페이스(720) 및/또는 프로젝트에 대한 요약 정보(예컨대, 대상 플랫폼, 대상 단말기 정보, 지원 해상도 정보 등)를 설정하기 위한 인터페이스(730)를 포함할 수 있다. 이렇게 생성된 프로젝트 환경 정보는 디자인 가이드 파일에 포함되어 개발자용 디스플레이 장치로 전달될 수 있고, 디자인 가이드 보기 애플리케이션을 통해 개발자에게 보여질 수 있다.
도 8은 본 발명의 일 실시예에 따른 프로젝트 노트를 추가하기 위한 인터페이스를 나타낸다.
프로젝트 노트는 프로젝트에 대한 추가 설명을 제공하는 노트를 의미한다. 실시예로서, 프로젝트 노트는 텍스트 메모, 이미지, 파일 등을 포함할 수 있다.
태그 정보에 기초하여 생성된 각 오브젝트에 대한 가이드 정보만으로 프로젝트 또는 그래픽 화면에 대하여 충분히 설명할 수 없는 경우가 있다. 이 경우, 디자이너는 디스플레이 장치의 프로젝트 노트 기능을 이용하여 개발자에게 프로젝트 또는 그래픽 화면에 대한 추가 설명을 제공할 수 있다.
디스플레이 장치는 사용자 입력에 기초하여 프로젝트 노트를 생성할 수 있다. 실시예로서, 디스플레이 장치는 프로젝트 노트를 생성하기 위한 인터페이스(프로젝트 노트 생성 인터페이스)(800)를 제공하고, 프로젝트 노트 생성 인터페이스에 대한 사용자 입력을 수신하고, 사용자 입력에 기초하여 프로젝트 노트를 생성할 수 있다. 이렇게 생성된 프로젝트 노트에 대한 정보(프로젝트 노트 정보)는 디자인 가이드 파일에 포함되어 개발자용 디스플레이 장치로 전달될 수 있고, 디자인 가이드 보기 애플리케이션을 통해 개발자에게 보여질 수 있다.
도 9는 본 발명의 일 실시예에 따른 디스플레이 장치가 디자인 가이드 파일을 보는 방법을 나타낸다. 도 10은 본 발명의 제1 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다. 도 11은 본 발명의 제2 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다. 도 12는 본 발명의 제3 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다. 도 13은 본 발명의 제4 실시예 따른 선택된 오브젝트에 대한 가이드 정보를 제공하는 방법을 나타낸다.
디스플레이 장치는 디자인 가이드 파일을 불러올 수 있다(S910). 실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 파일 불러오기 모듈을 이용하여 디자인 가이드 파일을 불러올 수 있다.
실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 실행 시, 디스플레이 장치에 저장된 하나 이상의 디자인 가이드 파일을 자동으로 불러올 수 있다. 이러한 디자인 가이드 파일은 하나 이상의 그래픽 화면에 대한 정보를 포함한다.
실시예로서, 디자인 가이드 파일은 각 그래픽 화면에 포함된 하나 또는 복수의 오브젝트에 대한 가이드 정보를 포함할 수 있다. 또한, 디자인 가이드 파일은 프로젝트 환경 정보 및/또는 프로젝트 노트 정보를 더 포함할 수 있다.
디스플레이 장치는 하나 또는 복수의 오브젝트를 포함하는 그래픽 화면을 디스플레이할 수 있다(S920). 또한, 디스플레이 장치는 그래픽 화면에 포함된 오브젝트들의 목록을 더 디스플레이할 수 있다. 예를 들면, 도 10(a)에 도시된 것처럼, 디스플레이 장치는 그래픽 화면을 디스플레이의 제1 영역(10)에서 디스플레이하고, 그래픽 화면에 포함된 오브젝트들의 목록을 제2 영역(20)에서 디스플레이할 수 있다. 실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 디스플레이 모듈을 이용하여 그래픽 화면 등을 디스플레이할 수 있다.
디스플레이 장치는 하나 또는 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신할 수 있다(S930). 실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 사용자 입력 수신(또는, 검출) 모듈을 이용하여 사용자 입력을 수신(또는, 검출)할 수 있다.
실시예로서, 디스플레이 장치는 제1 영역의 그래픽 화면에 포함된 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신(또는, 검출)할 수 있다. 예를 들면, 도 10(a)에 도시된 것처럼, 디스플레이 장치는 하나의 오브젝트(예컨대, 애셋) 선택하는 사용자 입력을 검출할 수 있다.
디스플레이 장치는 선택된 오브젝트에 대한 가이드 정보를 제공할 수 있다(S940). 예를 들면, 도 10(a)에 도시된 것처럼, 디스플레이 장치는 선택된 오브젝트(예컨대, 애셋)에 대한 위치 정보 및 크기 정보를 제1 영역(10)의 그래픽 화면 상에 디스플레이하고, 선택된 오브젝트에 대한 상세 정보를 제3 영역(30)에서 디스플레이할 수 있다. 이를 통해, 디스플레이 장치는 해당 오브젝트의 구현을 위한 다양한 정보를 개발자에게 제공할 수 있다. 실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 정보 제공 모듈을 이용하여 가이드 정보 등을 제공할 수 있다.
본 명세서에서, 제1 영역(10)은 뷰 캔버스 영역으로 지칭되고, 제2 영역(20)은 아이템(item) 창으로 지칭되고, 제3 영역(30)은 정보(info) 창으로 지칭될 수도 있다.
실시예로서, 선택된 오브젝트에 대한 위치 정보는 예컨대, 전체 그래픽 화면을 기준으로 상하좌우 마진의 형태로 제공될 수 있다. 또는, 선택된 오브젝트에 대한 크기 정보는 예컨대, 폭과 높이의 형태로 제공될 수 있다. 또는, 선택된 오브젝트에 대한 상세 정보(또는, 가이드 정보)는 예컨대, 선택된 오브젝트의 타입을 나타내는 타입 정보, 선택된 오브젝트가 위치하는 영역을 나타내는 영역 정보, 선택된 오브젝트의 색상을 나타내는 색상 정보 및/또는 선택된 오브젝트의 효과를 나타내는 효과 정보를 포함할 수 있다.
예를 들면, 도 10(a)에서와 같이, 선택된 오브젝트가 애셋인 경우, 디스플레이 장치는 애셋의 위치 정보 및 크기 정보를 제1 영역(10)의 그래픽 화면 상에 디스플레이하고, 애셋에 대한 가이드 정보를 제3 영역(30)에서 디스플레이할 수 있다. 도 10(a)에 도시된 것처럼, 애셋에 대한 가이드 정보는 선택된 오브젝트가 이미지 파일로 추출된 애셋임을 나타내는 타입 정보를 포함할 수 있다. 또한, 애셋에 대한 가이드 정보는 애셋의 영역 정보 및 이미지 정보를 제공할 수 있다.
또한, 도 10(b)에서와 같이, 선택된 오브젝트가 애셋인 경우, 디스플레이 장치는 애셋(또는, 이미지 파일)을 복사(copy)/불여넣기(paste)할 수 있는 기능을 제공할 수 있다. 이를 통해, 개발자는 선택된 오브젝트에 대응되는 애셋을 복사하여, 원하는 폴더에 저장할 수 있다. 따라서, 디자이너는 애플리케이션의 구현을 위한 애셋을 별도로 개발자에 전달할 필요 없이, 추출된 애셋에 대한 정보를 포함하는 디자인 가이드 파일만을 전달할 수 있고, 개발자는 이러한 디자인 가이드 파일을 이용하여 필요한 애셋을 획득하여 사용할 수 있다.
다른 예를 들면, 도 11에서와 같이, 선택된 오브젝트가 텍스트(또는, 폰트)인 경우, 디스플레이 장치는 텍스트가 위치하는 영역의 위치 정보 및 크기 정보를 제1 영역(10)의 그래픽 화면 상에 디스플레이하고, 텍스트에 대한 상세 정보(또는, 가이드 정보)를 제3 영역(30)에서 디스플레이할 수 있다.
도시된 것처럼, 텍스트에 대한 가이드 정보는 선택된 오브젝트가 텍스트임을 나타낼 수 있다. 또한, 텍스트에 대한 가이드 정보는 텍스트가 위치하는 영역의 영역 정보 및 이미지 정보를 제공할 수 있다. 또한, 텍스트에 대한 가이드 정보는 텍스트로 구성하기 위한 폰트에 대한 정보 및/또는 텍스트의 내용을 나타내는 컨텐츠 정보를 더 포함할 수 있다. 실시예로서, 컨텐츠 정보는 복사/붙여넣기가 가능하다. 이를 통해, 텍스트의 컨텐츠에 대한 수동 입력에 따른 사용자 에러를 방지할 수 있다.
또 다른 예를 들면, 도 12에서와 같이, 선택된 오브젝트가 드로워인 경우, 디스플레이 장치는 드로워의 위치 정보 및 크기 정보를 제1 영역(10)의 그래픽 화면 상에 디스플레이하고, 드로워에 대한 상세 정보(또는, 가이드 정보)를 제3 영역(30)에서 디스플레이할 수 있다.
도시된 것처럼, 드로워에 대한 가이드 정보는 선택된 오브젝트가 드로워임을 나타내는 타입 정보, 드로워가 위치하는 영역을 나타내는 영역 정보 또는 드로워의 상태를 나타내는 상태 정보 중 영역 정보 중 적어도 하나를 포함할 수 있다. 또한, 드로워에 대한 상태 정보는 드로워의 각 상태 별 색상, 이미지 등에 대한 정보를 제공할 수 있다. 예를 들면, 드로워에 대한 상태 정보는 기본 상태에서의 드로워의 색상 등에 대한 정보, 눌려진(pressed) 상태에서의 드로워의 색상 등에 대한 정보 또는 딤드된(dimmed) 상태에서의 드로워의 색상 등에 대한 정보를 제공할 수 있다. 이를 통해, 사용자와의 상호 작용에 따른 드로워의 상태 변경에 대한 정보가 개발자에게 제공될 수 있다.
또 다른 예를 들면, 복수의 오브젝트가 선택된 경우, 디스플레이 장치는 오브젝트 간 간격 정보를 제공할 수 있다.
예를 들면, 도 13(a)에 도시된 것처럼, 두 개의 오브젝트가 선택된 경우, 디스플레이 장치는 선택된 오브젝트들을 포함하는 전체 영역에 대한 위치 정보 및 오브젝트 간 간격 정보를 제공할 수 있다. 실시예로서, 오브젝트 간 간격 정보는 오브젝트 간 수평 거리 또는 수직 거리일 수 있다.
다른 예를 들면, 도 13(b)에 도시된 것처럼, 세 개 이상의 오브젝트가 선택된 경우, 디스플레이 장치는 선택된 오브젝트들을 포함하는 전체 영역에 대한 위치 정보만을 제공할 수 있다.
또한, 도 13(c)에서와 같이, 디스플레이 장치는 특정 오브젝트가 아닌 특정 영역과 전체 화면 영역 간의 간격 정보를 더 제공할 수 있다. 예를 들면, 사용자가 특정 키(예컨대, Alt 키)를 누른 상태에서 임의의 영역을 드래그한 경우, 디스플레이 장치는 드래그된 특정 영역과 전체 화면 영역 간의 간격 정보를 계산하여 제공할 수 있다. 이를 통해, 개발자는 임의의 영역의 크기 정보 및 위치 정보를 확인할 수 있다.
실시예로서, 디스플레이 장치는 선택된 오브젝트와 연관된 가이드 정보를 재구성하고, 재구성된 가이드 정보를 제공할 수 있다. 이를 통해, 단순히 디자인 가이드 파일에 포함된 가이드 정보만을 제공하는 것이 아닌, 디자인 가이드 보기 애플리케이션을 이용하여 재구성된 가이드 정보(또는, 상세 정보)를 제공할 수 있다.
실시예로서, 디스플레이 장치는 버전 관리 기능을 더 제공할 수 있다. 현재 버전의 그래픽 화면과 이전 버전의 그래픽 화면이 상이할 수 있다. 예를 들면, 디자이너가 개발자에 요구에 따라 그래픽 화면을 수정 또는 재구성한 경우, 현재 버전의 그래픽 화면과 이전 버전의 그래픽 화면이 상이할 수 있다. 이 경우, 디스플레이 장치는 현재 버전의 그래픽 화면을 이전 버전의 그래픽 화면과 비교하여 수정 또는 변경된 부분을 그래픽 화면 상에 표시하고, 이에 대한 정보(버전 정보)를 가이드 정보로서 제공할 수 있다. 예를 들면, 그래픽 화면 내의 애셋의 영역이 증가된 경우, 디스플레이 장치는 애샛과 증가된 영역 부분을 그래픽 화면 상에 표시하고, 증가된 영역에 대한 정보를 가이드 정보로서 제공할 수 있다. 실시예로서, 현재 버전의 그래픽 화면을 포함하는 디자인 가이드 파일과 이전 버전의 그래픽 화면을 포함하는 디자인 가이드 파일은 동일한 파일명일 가질 수 있다. 다만, 각 디자인 가이드 파일의 버전 값은 상이할 수 있다. 실시예로서, 디스플레이 장치는 디자인 가이드 보기 애플리케이션의 버전 관리 모듈을 이용하여 버전 관리 기능을 제공할 수 있다.
이상에서 설명된 실시예들은 본 발명의 구성요소들과 특징들이 소정 형태로 결합된 것들이다. 각 구성요소 또는 특징은 별도의 명시적 언급이 없는 한 선택적인 것으로 고려되어야 한다. 각 구성요소 또는 특징은 다른 구성요소나 특징과 결합되지 않은 형태로 실시될 수 있다. 또한, 일부 구성요소들 및/또는 특징들을 결합하여 본 발명의 실시예를 구성하는 것도 가능하다. 본 발명의 실시예들에서 설명되는 동작들의 순서는 변경될 수 있다. 어느 실시예의 일부 구성이나 특징은 다른 실시예에 포함될 수 있고, 또는 다른 실시예의 대응하는 구성 또는 특징과 교체될 수 있다. 특허청구범위에서 명시적인 인용 관계가 있지 않은 청구항들을 결합하여 실시예를 구성하거나 출원 후의 보정에 의해 새로운 청구항으로 포함시킬 수 있음은 자명하다.
본 발명에 따른 실시예는 다양한 수단, 예를 들어, 하드웨어, 펌웨어(firmware), 소프트웨어 또는 그것들의 결합 등에 의해 구현될 수 있다. 하드웨어에 의한 구현의 경우, 본 발명의 일 실시예는 하나 또는 그 이상의 ASICs(application specific integrated circuits), DSPs(digital signal processors), DSPDs(digital signal processing devices), PLDs(programmable logic devices), FPGAs(field programmable gate arrays), 프로세서, 콘트롤러, 마이크로 콘트롤러, 마이크로 프로세서 등에 의해 구현될 수 있다.
펌웨어나 소프트웨어에 의한 구현의 경우, 본 발명의 일 실시예는 이상에서 설명된 기능 또는 동작들을 수행하는 모듈, 절차, 함수 등의 형태로 구현될 수 있다. 소프트웨어 코드는 메모리에 저장되어 프로세서에 의해 구동될 수 있다. 상기 메모리는 상기 프로세서 내부 또는 외부에 위치하여, 이미 공지된 다양한 수단에 의해 상기 프로세서와 데이터를 주고 받을 수 있다.
본 발명은 본 발명의 필수적 특징을 벗어나지 않는 범위에서 다른 특정한 형태로 구체화될 수 있음은 당업자에게 자명하다. 따라서, 상술한 상세한 설명은 모든 면에서 제한적으로 해석되어서는 아니 되고 예시적인 것으로 고려되어야 한다. 본 발명의 범위는 첨부된 청구항의 합리적 해석에 의해 결정되어야 하고, 본 발명의 등가적 범위 내에서의 모든 변경은 본 발명의 범위에 포함된다.
또한, 본 명세서에서의 각도, 거리 및 방향은 정확한 값을 의미할 뿐 아니라, 일정 범위의 실질적인 각도, 거리 및 방향을 포함하는 것으로 볼 수 있다. 즉, 본 명세서의 각도, 거리 및 방향은 실질적인 각도, 거리 및 방향을 나타낼 수 있고, 일정 범위의 오차가 존재할 수 있다.
또한, 본 명세서에서는 물건 발명과 방법 발명이 모두 설명되고 있으며, 필요에 따라 양 발명의 설명은 보충적으로 적용될 수 있다.
100: 디스플레이 장치
110: 통신부
120: 입력부 130: 출력부
140: 인터페이스부 150: 전원공급부
160: 메모리 170: 프로세서
120: 입력부 130: 출력부
140: 인터페이스부 150: 전원공급부
160: 메모리 170: 프로세서
Claims (19)
- 복수의 오브젝트를 포함하는 그래픽 화면을 식별하는 단계;
상기 복수의 오브젝트 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하는 단계; 및
상기 태그 정보에 기초하여 상기 그래픽 화면에 대한 디자인 가이드 파일을 생성하는 단계를 포함하며,
상기 디자인 가이드 파일을 생성하는 단계는:
상기 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하는 단계; 및
상기 가이드 정보를 포함하는 상기 디자인 가이드 파일 생성하는 단계를 포함하되, 상기 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함하는, 디자인 가이드 파일을 생성하는 방법. - 제 1 항에 있어서,
상기 적어도 하나의 태그 정보는,
상기 오브젝트를 영역 정보의 추출이 필요한 오브젝트로 분류하기 위한 영역 태그 정보, 상기 오브젝트를 이미지 파일의 추출이 필요한 애셋으로 분류하기 위한 애셋 태그 정보, 상기 오브젝트를 프로그래밍으로 그려야 하는 드로워로 분류하기 위한 드로우 태그 정보, 상기 오브젝트를 상태 정보의 추출이 필요한 오브젝트로 분류하기 위한 상태 세트 태그 정보 또는 상기 오브젝트를 반복되는 패턴에 대한 이미지 파일의 추출이 필요한 나인패치로 분류하기 위한 나인패치 태그 정보 중 적어도 하나를 포함하는, 디자인 가이드 파일을 생성하는 방법. - 제 2 항에 있어서,
상기 가이드 정보를 생성하는 단계는,
상기 오브젝트가 상기 영역 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 영역 정보를 상기 가이드 정보로서 생성하고, 상기 영역 정보는 상기 오브젝트가 속하는 영역을 나타내는 위치 정보 또는 크기 정보 중 적어도 하나를 포함하는, 디자인 가이드 파일을 생성하는 방법. - 제 2 항에 있어서,
상기 가이드 정보를 생성하는 단계는,
상기 오브젝트가 상기 애셋 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트의 이미지를 이미지 파일로 추출하고, 상기 이미지에 대한 이미지 정보를 상기 가이드 정보로서 생성하고, 상기 이미지 정보는 상기 오브젝트를 상기 애셋으로 구현하기 위한 정보를 제공하는, 디자인 가이드 파일을 생성하는 방법. - 제 2 항에 있어서,
상기 가이드 정보를 생성하는 단계는,
상기 오브젝트가 상기 드로우 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 드로잉 정보를 상기 가이드 정보로서 생성하고, 상기 드로잉 정보는 상기 오브젝트를 상기 드로워로 구현하기 위한 정보를 제공하는, 디자인 가이드 파일을 생성하는 방법. - 제 2 항에 있어서,
상기 가이드 정보를 생성하는 단계는,
상기 오브젝트가 상기 상태 세트 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에 대한 상태 정보를 상기 가이드 정보로서 생성하고, 상기 상태 정보는 상기 오브젝트를 각 상태 별로 구현하기 위한 정보를 제공하는, 디자인 가이드 파일을 생성하는 방법. - 제 2 항에 있어서,
상기 가이드 정보를 생성하는 단계는,
상기 오브젝트가 상기 나인패치 태그 정보가 추가된 오브젝트인 경우, 상기 오브젝트에서 반복되는 특정 패턴의 이미지를 패턴 이미지 파일로 추출하고, 상기 패턴 이미지에 대한 패턴 이미지 정보를 상기 가이드 정보로서 생성하고, 상기 패턴 이미지 정보는 상기 오브젝트를 상기 나인패치로 구현하기 위한 정보를 제공하는, 디자인 가이드 파일을 생성하는 방법. - 제 1 항에 있어서,
상기 태그 정보를 추가하는 단계는:
태그 정보 추가 인터페이스를 제공하는 단계로서, 상기 태그 정보 추가 인터페이스는 상기 오브젝트에 추가될 태그 정보의 선택을 위한 적어도 하나의 입력 인터페이스를 제공하는;
상기 입력 인터페이스를 선택하는 사용자 입력을 수신하는 단계; 및
상기 입력 인터페이스에 대응되는 태그 정보에 기초하여 상기 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하는 단계를 포함하는, 디자인 가이드 파일을 생성하는 방법. - 디자인 가이드 파일의 생성에 필요한 데이터 및 프로그램을 저장하는 메모리; 및
상기 메모리를 제어하여, 상기 디자인 가이드 파일의 생성을 수행하는 프로세서를 포함하며,
상기 프로세서는,
복수의 오브젝트를 포함하는 그래픽 화면을 식별하고,
상기 복수의 오브젝트 중 하나 이상의 오브젝트에 적어도 하나의 태그 정보를 추가하고, 그리고
상기 태그 정보에 기초하여 상기 그래픽 화면에 대한 디자인 가이드 파일을 생성하되,
상기 디자인 가이드 파일을 생성하는 것은:
상기 태그 정보에 기초하여 각 오브젝트에 대한 가이드 정보를 생성하는 것; 및
상기 가이드 정보를 포함하는 상기 디자인 가이드 파일을 생성하는 것을 포함하되, 상기 가이드 정보는 대응하는 오브젝트의 구현을 위한 정보를 포함하는, 디자인 가이드 파일을 생성하는 장치. - 제 9 항에 있어서,
상기 적어도 하나의 태그 정보는,
상기 오브젝트를 영역 정보의 추출이 필요한 오브젝트로 분류하기 위한 영역 태그 정보, 상기 오브젝트를 이미지 파일의 추출이 필요한 애셋으로 분류하기 위한 애셋 태그 정보, 상기 오브젝트를 프로그래밍으로 그려야 하는 드로워로 분류하기 위한 드로우 태그 정보, 상기 오브젝트를 상태 정보의 추출이 필요한 오브젝트로 분류하기 위한 상태 세트 태그 정보 또는 상기 오브젝트를 반복되는 패턴에 대한 이미지 파일의 추출이 필요한 나인패치로 분류하기 위한 나인패치 태그 정보 중 적어도 하나를 포함하는, 디자인 가이드 파일을 생성하는 장치. - 디자인 가이드 파일을 불러오는 단계, 상기 디자인 가이드 파일은 그래픽 화면에 대한 정보 및 상기 그래픽 화면에 포함된 복수의 오브젝트에 대한 가이드 정보를 포함하는;
상기 복수의 오브젝트를 포함하는 그래픽 화면을 디스플레이 하는 단계;
상기 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신하는 단계; 및
선택된 오브젝트에 대한 가이드 정보를 제공하는 단계를 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
상기 선택된 오브젝트가 애셋인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 애셋임을 나타내는 타입 정보 및 상기 애셋이 위치하는 영역을 나타내는 영역 정보를 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
상기 선택된 오브젝트가 드로워인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 드로워임을 나타내는 타입 정보, 상기 드로워가 위치하는 영역을 나타내는 영역 정보 또는 상기 드로워의 상태를 나타내는 상태 정보 중 적어도 하나를 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
상기 선택된 오브젝트가 텍스트인 경우, 상기 가이드 정보는 상기 선택된 오브젝트가 텍스트임을 나타내는 타입 정보, 상기 텍스트가 위치하는 영역을 나타내는 영역 정보 또는 상기 텍스트의 내용을 나타내는 컨텐츠 정보 중 적어도 하나를 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
하나의 오브젝트가 선택된 경우, 상기 하나의 오브젝트가 위치하는 영역을 나타내는 영역 정보를 상기 그래픽 화면 상에 디스플레이 하는 단계를 더 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
복수의 오브젝트가 선택된 경우, 상기 복수의 오브젝트가 위치하는 전체 영역을 나타내는 영역 정보 및 복수의 오브젝트 간의 간격을 나타내는 간격 정보를 상기 그래픽 화면 상에 디스플레이 하는 단계를 더 포함하는, 디자인 가이드 파일을 보는 방법. - 제 11 항에 있어서,
상기 가이드 정보를 제공하는 단계는,
상기 선택된 오브젝트와 연관된 가이드 정보를 재구성하고, 재구성된 가이드 정보를 제공하는 단계를 포함하는, 디자인 가이드 파일을 보는 방법. - 디자인 가이드 파일의 디스플레이를 위해 필요한 데이터 및 프로그램을 저장하는 메모리;
상기 디자인 가이드 파일을 디스플레이하는 디스플레이부; 및
상기 메모리를 제어하여, 상기 디자인 가이드 파일의 디스플레이를 수행하는 프로세서를 포함하며,
상기 프로세서는,
상기 디자인 가이드 파일을 불러오고, 상기 디자인 가이드 파일은 그래픽 화면에 대한 정보 및 상기 그래픽 화면에 포함된 복수의 오브젝트에 대한 가이드 정보를 포함하며,
상기 복수의 오브젝트를 포함하는 그래픽 화면을 디스플레이하고,
상기 복수의 오브젝트 중 하나 이상의 오브젝트를 선택하는 사용자 입력을 수신하는 단계;
선택된 오브젝트에 대한 가이드 정보를 제공하는 단계를 포함하는, 디자인 가이드 파일을 보는 장치. - 제 18 항에 있어서,
상기 가이드 정보를 제공하는 것은,
상기 선택된 오브젝트와 연관된 가이드 정보를 재구성하고, 재구성된 가이드 정보를 제공하는 것을 포함하는, 디자인 가이드 파일을 보는 장치.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020170014960A KR20180090415A (ko) | 2017-02-02 | 2017-02-02 | 디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020170014960A KR20180090415A (ko) | 2017-02-02 | 2017-02-02 | 디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 |
Publications (1)
Publication Number | Publication Date |
---|---|
KR20180090415A true KR20180090415A (ko) | 2018-08-13 |
Family
ID=63250696
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR1020170014960A KR20180090415A (ko) | 2017-02-02 | 2017-02-02 | 디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 |
Country Status (1)
Country | Link |
---|---|
KR (1) | KR20180090415A (ko) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114967992A (zh) * | 2021-02-26 | 2022-08-30 | 北京字跳网络技术有限公司 | 一种信息交互的方法、标签查看方法及装置 |
-
2017
- 2017-02-02 KR KR1020170014960A patent/KR20180090415A/ko not_active Application Discontinuation
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114967992A (zh) * | 2021-02-26 | 2022-08-30 | 北京字跳网络技术有限公司 | 一种信息交互的方法、标签查看方法及装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106776514B (zh) | 一种批注方法及装置 | |
US10671357B2 (en) | Preview changes to mobile applications at different display resolutions | |
US10042655B2 (en) | Adaptable user interface display | |
CN104267947B (zh) | 一种编辑弹窗图片的方法及弹窗图片编辑装置 | |
WO2020048326A1 (zh) | 一种界面显示方法、系统及终端设备 | |
US10452747B2 (en) | Dynamically formatting scalable vector graphics | |
WO2021008334A1 (zh) | 小程序的数据绑定方法、装置、设备及存储介质 | |
US10915496B2 (en) | File generator | |
TW201525776A (zh) | 對於鍵盤使用者介面的啓用控制 | |
CN108351764A (zh) | 程序代码编辑器中数据的图形表示 | |
CN104704468A (zh) | Web应用程序的跨系统安装 | |
US10120659B2 (en) | Adaptive user interfaces | |
US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
KR20180082845A (ko) | 전자책 서비스 제공방법 및 그를 위한 컴퓨터 프로그램 | |
WO2013109858A1 (en) | Design canvas | |
CN114548056A (zh) | 富文本编辑方法、装置及设备 | |
TWI467481B (zh) | 層級式程式源碼管理方法、系統及電腦程式產品 | |
JP2017084146A (ja) | 情報処理装置及び情報処理プログラム | |
JP6668868B2 (ja) | 情報処理装置及び情報処理プログラム | |
CN112579144B (zh) | 数据处理方法及装置 | |
CN105718434A (zh) | 一种自然语言公式编辑方法和系统 | |
CN109933766B (zh) | 文件生成方法、装置及存储介质 | |
KR20180090415A (ko) | 디자인 가이드 파일을 생성 또는 보기 위한 장치 및 방법 | |
US11526578B2 (en) | System and method for producing transferable, modular web pages | |
KR20160053545A (ko) | 전자 문서 편집기에서의 객체에 대한 편집 명령 입력 방법 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A201 | Request for examination | ||
E902 | Notification of reason for refusal | ||
E601 | Decision to refuse application |