KR20230165506A - 위젯을 편집하기 위한 방법 및 전자 장치 - Google Patents

위젯을 편집하기 위한 방법 및 전자 장치 Download PDF

Info

Publication number
KR20230165506A
KR20230165506A KR1020220065334A KR20220065334A KR20230165506A KR 20230165506 A KR20230165506 A KR 20230165506A KR 1020220065334 A KR1020220065334 A KR 1020220065334A KR 20220065334 A KR20220065334 A KR 20220065334A KR 20230165506 A KR20230165506 A KR 20230165506A
Authority
KR
South Korea
Prior art keywords
item
template
widget
electronic device
items
Prior art date
Application number
KR1020220065334A
Other languages
English (en)
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 KR1020220065334A priority Critical patent/KR20230165506A/ko
Priority to PCT/KR2022/007742 priority patent/WO2023229087A1/ko
Priority to TW112114162A priority patent/TW202347108A/zh
Publication of KR20230165506A publication Critical patent/KR20230165506A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • 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
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)
  • Telephone Function (AREA)

Abstract

본 개시의 다양한 실시예에 따른 전자 장치는, 단말 장치와 통신 연결된 하나 이상의 통신 회로, 하나 이상의 데이터베이스, 하나 이상의 입력 장치, 및 하나 이상의 프로세서를 포함할 수 있다. 다양한 실시예에 따른 하나 이상의 프로세서는, 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성하고, 데이터베이스에 미리 저장된 복수의 UI 아이템 중 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하고, 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정하고, 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합함으로써, 위젯에 관한 템플릿을 생성하고, 위젯에 관한 템플릿을 단말 장치로 전송하도록 구성될 수 있다.

Description

위젯을 편집하기 위한 방법 및 전자 장치{METHOD AND ELECTRONIC DEVICE FOR EDITING WIDGET}
본 개시는 위젯을 편집하기 위한 방법 및 전자 장치에 관한 것이다.
종래에는 애플리케이션에 표시되는 위젯을 단순 편집하고 싶은 경우, 예를 들어, 위젯에 포함된 텍스트의 크기 변경이나 위젯 내의 컴포넌트의 위치를 변경하는 경우에도 애플리케이션 수정을 거쳐야만 했다. 상기의 경우, 해당 위젯의 편집 사항을 확인 및 검토하기 위해서는 애플리케이션이 사용자의 단말 장치에 배포 되어야한다. 즉, 위젯을 편집하기 위해서는 애플리케이션 배포 주기에 맞추어야 했으므로, 위젯을 런칭하기까지 오랜 시간이 소요되었다. 또한, 웹 페이지(web page)에 표시되는 위젯을 단순 편집하고 싶은 경우에도, 웹 서버에서 편집하고자 하는 위젯에 해당하는 소스 코드를 수정해야만 한다. 즉, 위젯을 편집하기 위해서는 웹 페이지를 구성하는 소스 코드를 수정해야하기 때문에, 개발 시간이 오래 소요되고 소스 코드에 대한 전문적인 지식을 필요로 한다.
위젯의 편집 사항을 애플리케이션 배포와 무관하게 위젯에 관한 템플릿을 생성하여 전송하는 과정만으로 구현함으로써, 복수의 위젯에 대한 디자인 실험을 실시간으로 수행하는 것을 기술적 과제로 할 수 있다. 위젯에 UI 컴포넌트를 추가해야하는 경우에도 서버 배포 없이 위젯에 관한 템플릿을 생성하여 전송하는 것만으로 이를 가능하게 하는 것을 기술적 과제로 할 수 있다.
본 개시의 다양한 실시예에 따른 전자 장치는, 단말 장치와 통신 연결된 하나 이상의 통신 회로, 하나 이상의 데이터베이스, 하나 이상의 입력 장치 및 하나 이상의 프로세서를 포함할 수 있다. 다양한 실시예에 따른 하나 이상의 프로세서는, 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성하고, 상기 하나 이상의 데이터베이스에 미리 저장된 복수의 UI 아이템 중 상기 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하고, 상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정하고, 상기 베이스 템플릿에 상기 적어도 하나의 UI 아이템 및 상기 데이터 아이템을 결합함으로써, 상기 위젯에 관한 템플릿을 생성하고, 상기 위젯에 관한 템플릿을 상기 단말 장치로 전송하도록 구성될 수 있다.
다양한 실시예에 따르면, 상기 위젯에 관한 템플릿은, 커루셀 템플릿, 상단 배너 템플릿, 중단 배너 템플릿 및 하단 배너 템플릿 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따르면, 상기 위젯에 관한 템플릿은 Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿일 수 있다.
다양한 실시예에 따른 하나 이상의 프로세서는, 상기 복수의 UI 아이템 중 상기 위젯에 관한 템플릿의 상위 구조에 포함될 적어도 하나의 상위 UI 아이템을 선택하고, 상기 복수의 UI 아이템 중 상기 적어도 하나의 상위 UI 아이템에 포함될 적어도 하나의 하위 UI 아이템을 선택하고, 상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성을 설정하도록 구성될 수 있다.
다양한 실시예에 따르면, 상기 복수의 UI 아이템은, 수평 스택 컨테이너, 수직 스택 컨테이너, 중첩 스택 컨테이너, 이미지, 레이블 및 별점 아이템 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따르면, 상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성은, UI 아이템의 크기, 패딩 영역, 마진 영역, 경계선, 코너 반경, 텍스트, 배경 색상, 값, 스크롤 여부, 정렬 및 하이퍼링크 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따르면, 상기 데이터 아이템은 상기 하나 이상의 데이터베이스에 미리 저장되어 있는 상기 위젯에 관련된 정보를 포함할 수 있다.
다양한 실시예에 따른 상기 하나 이상의 프로세서는, 상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 선택하고, 상기 하나 이상의 데이터베이스로부터 상기 선택한 데이터 아이템에 대응하는 위젯에 관련된 정보를 추출하고, 상기 추출한 위젯에 관련된 정보를 상기 적어도 하나의 UI 아이템에 적용하도록 구성될 수 있다.
다양한 실시예에 따른 상기 위젯에 관련된 정보는, 상기 위젯에 관련된 상품의 이름, 가격, 별점, 할인 정보, 배송 정보, 상기 상품에 관한 이미지 및 하이퍼링크 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따른 전자 장치는 디스플레이를 더 포함할 수 있고, 상기 하나 이상의 프로세서는, 상기 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 상기 디스플레이를 통해 표시하도록 구성될 수 있다.
본 개시의 다양한 실시예에 따른 전자 장치에서 위젯을 편집하는 방법은, 상기 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성하는 동작; 상기 전자 장치의 하나 이상의 데이터베이스에 미리 저장된 복수의 UI 아이템 중 상기 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하는 동작; 상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정하는 동작; 상기 베이스 템플릿에 상기 적어도 하나의 UI 아이템 및 상기 데이터 아이템을 결합함으로써, 상기 위젯에 관한 템플릿을 생성하는 동작; 및 상기 위젯에 관한 템플릿을 단말 장치로 전송하는 동작을 포함할 수 있다.
다양한 실시예에 따른 상기 위젯에 관한 템플릿은, 커루셀 템플릿, 상단 배너 템플릿, 중단 배너 템플릿 및 하단 배너 템플릿 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따른 상기 위젯에 관한 템플릿은 Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿일 수 있다.
다양한 실시예에 따른 상기 적어도 하나의 UI 아이템을 설정하는 동작은, 상기 복수의 UI 아이템 중 상기 위젯에 관한 템플릿의 상위 구조에 포함될 적어도 하나의 상위 UI 아이템을 선택하는 동작; 상기 복수의 UI 아이템 중 상기 적어도 하나의 상위 UI 아이템의 하위 구조에 포함될 적어도 하나의 하위 UI 아이템을 선택하는 동작; 및 상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성을 설정하는 동작을 포함할 수 있다.
다양한 실시예에 따른 상기 복수의 UI 아이템은, 수평 스택 컨테이너, 수직 스택 컨테이너, 중첩 스택 컨테이너, 이미지, 레이블 및 별점 아이템 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따른 상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성은, UI 아이템의 크기, 패딩 영역, 마진 영역, 경계선, 코너 반경, 텍스트, 배경 색상, 값, 스크롤 여부, 정렬 및 하이퍼링크 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따른 상기 데이터 아이템은 상기 하나 이상의 데이터베이스에 미리 저장되어 있는 상기 위젯에 관련된 정보를 포함할 수 있다.
다양한 실시예에 따른 상기 데이터 아이템을 설정하는 동작은, 상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 선택하는 동작; 상기 하나 이상의 데이터베이스로부터 상기 선택한 데이터 아이템에 대응하는 위젯에 관련된 정보를 추출하는 동작; 및 상기 추출한 위젯에 관련된 정보를 상기 적어도 하나의 UI 아이템에 적용하는 동작을 포함할 수 있다.
다양한 실시예에 따른 상기 위젯에 관련된 정보는, 상기 위젯에 관련된 상품의 이름, 가격, 별점, 할인 정보, 배송 정보, 상기 상품의 이미지 및 하이퍼링크 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따른 위젯을 편집하는 방법은, 상기 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 상기 전자 장치의 디스플레이를 통해 표시하는 동작을 더 포함할 수 있다.
본 개시의 다양한 실시예에 따르면, 복수의 UI 아이템 및 복수의 데이터 아이템을 편집 가능하도록 정의함으로써, 하나의 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합할 수 있으므로, 개발자가 아닌 일반인(예: 디자이너, 판매자)도 간단하고 쉽게 위젯을 편집할 수 있고, 위젯에 관한 하나의 템플릿으로 다양한 운영 체제(예: 안드로이드, iOS) 및 다양한 웹 브라우저에서 호환되는 위젯을 만들 수 있다. 예를 들어, 특정 운영 체제에서 동작하는 렌더링을 위한 SDK (software development kit)를 구현한다면, 상기 특정 운영 체제에서도 위젯에 관한 템플릿을 전달받아서 위젯을 만들 수 있으므로, 다양한 운영 체제로의 확장이 가능하다.
본 개시의 다양한 실시예에 따르면, 하나의 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합할 수 있고, 적어도 하나의 UI 아이템 및 복수의 데이터 아이템이 결합된 템플릿을 유저의 다양한 단말 장치(예: 안드로이드 또는 iOS를 기반으로 하는 단말 장치)에 전송함으로써, 간단하고 쉽게 편집된 위젯을 다양한 단말 장치에서 확인할 수 있다.
본 개시의 다양한 실시예에 따르면, 클라이언트의 수정 또는 백엔드의 수정이 필요하지 않고, 애플리케이션과 서버 배포 없이도 위젯을 편집할 수 있다. 유저의 단말 장치에서는 애플리케이션 배포 없이도, UI 아이템과 데이터 속성이 결합된 템플릿을 받아서 SDK (software development kit)에서 정의한 파싱룰을 이용하여 애플리케이션에 렌더링할 수 있다.
도 1은 본 개시의 다양한 실시예에 따른 위젯을 동적으로 편집하는 방법을 도시한 도면이다.
도 2는 본 개시의 다양한 실시예에 따른 전자 장치)의 블록도이다.
도 3은 본 개시의 다양한 실시예에 따른 전자 장치의 동작 흐름도이다.
도 4는 본 개시의 다양한 실시예에 따른 전자 장치의 동작 흐름도이다.
도 5, 6a, 6b 및 6c는 본 개시의 다양한 실시예에 따른 위젯을 편집하는 방법을 도시한 도면이다.
도 7a 및 7b는 본 개시의 다양한 실시에 따른 위젯에 관한 템플릿들을 도시한 도면이다.
도 8a 및 8b는 본 개시의 다양한 실시예에 따른 관리 툴의 사용 화면을 도시한 도면이다.
도 9는 본 개시의 다양한 실시예에 따른 단말 장치의 동작 흐름도이다.
본 개시의 실시예들은 본 개시의 기술적 사상을 설명하기 위한 목적으로 예시된 것이다. 본 개시에 따른 권리범위가 이하에 제시되는 실시예들이나 이들 실시예들에 대한 구체적 설명으로 한정되는 것은 아니다.
본 개시에 사용되는 모든 기술적 용어들 및 과학적 용어들은, 달리 정의되지 않는 한, 본 개시가 속하는 기술 분야에서 통상의 지식을 가진 자에게 일반적으로 이해되는 의미를 갖는다. 본 개시에 사용되는 모든 용어들은 본 개시를 더욱 명확히 설명하기 위한 목적으로 선택된 것이며 본 개시에 따른 권리범위를 제한하기 위해 선택된 것이 아니다.
본 개시에서 사용되는 "포함하는", "구비하는", "갖는" 등과 같은 표현은, 해당 표현이 포함되는 어구 또는 문장에서 달리 언급되지 않는 한, 다른 실시예를 포함할 가능성을 내포하는 개방형 용어(open-ended terms)로 이해되어야 한다.
본 개시에서 기술된 단수형의 표현은 달리 언급하지 않는 한 복수형의 의미를 포함할 수 있으며, 이는 청구범위에 기재된 단수형의 표현에도 마찬가지로 적용된다.
본 개시에서 사용되는 "제1", "제2" 등의 표현들은 복수의 구성요소들을 상호 구분하기 위해 사용되며, 해당 구성요소들의 순서 또는 중요도를 한정하는 것은 아니다.
본 개시에서 사용되는 용어 "부"는, 소프트웨어, 또는 FPGA(field-programmable gate array), ASIC(application specific integrated circuit)과 같은 하드웨어 구성요소를 의미한다. 그러나, "부"는 하드웨어 및 소프트웨어에 한정되는 것은 아니다. "부"는 어드레싱할 수 있는 저장 매체에 있도록 구성될 수도 있고, 하나 또는 그 이상의 프로세서들을 재생시키도록 구성될 수도 있다. 따라서, 일 예로서, "부"는 소프트웨어 구성요소들, 객체지향 소프트웨어 구성요소들, 클래스 구성요소들 및 태스크 구성요소들과 같은 구성요소들과, 프로세서, 함수, 속성, 프로시저, 서브루틴, 프로그램 코드의 세그먼트, 드라이버, 펌웨어, 마이크로코드, 회로, 데이터, 데이터베이스, 데이터 구조, 테이블, 어레이 및 변수를 포함한다. 구성요소와 "부" 내에서 제공되는 기능은 더 작은 수의 구성요소 및 "부"로 결합되거나 추가적인 구성요소와 "부"로 더 분리될 수 있다.
본 개시에서 사용되는 "~에 기초하여"라는 표현은, 해당 표현이 포함되는 어구 또는 문장에서 기술되는, 결정, 판단의 행위 또는 동작에 영향을 주는 하나 이상의 인자를 기술하는데 사용되며, 이 표현은 결정, 판단의 행위 또는 동작에 영향을 주는 추가적인 인자를 배제하지 않는다.
본 개시에서, 어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 경우, 상기 어떤 구성요소가 상기 다른 구성요소에 직접적으로 연결될 수 있거나 접속될 수 있는 것으로, 또는 새로운 다른 구성요소를 매개로 하여 연결될 수 있거나 접속될 수 있는 것으로 이해되어야 한다.
이하, 첨부한 도면들을 참조하여, 본 개시의 실시예들을 설명한다. 첨부된 도면에서, 동일하거나 대응하는 구성요소에는 동일한 참조부호가 부여되어 있다. 또한, 이하의 실시예들의 설명에 있어서, 동일하거나 대응하는 구성요소를 중복하여 기술하는 것이 생략될 수 있다. 그러나, 구성요소에 관한 기술이 생략되어도, 그러한 구성요소가 어떤 실시예에 포함되지 않는 것으로 의도되지는 않는다.
도 1은 본 개시의 다양한 실시예에 따른 위젯을 동적으로 편집하는 방법을 도시한 도면이다.
다양한 실시예에 따른 전자 장치(110)는 위젯에 관한 템플릿(120)을 생성할 수 있고, 생성한 위젯에 관한 템플릿(120)을 단말 장치(130)로 전송할 수 있다. 위젯은 애플리케이션 또는 웹에 표시되고 특정 형식을 갖는 사용자 인터페이스일 수 있다. 예를 들어, 위젯은 특정 상품에 대한 광고 정보를 표시하는 광고 아이템(advertising item 또는 creative)일 수 있다. 위젯에 관한 템플릿(120)은, 예를 들어, Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿일 수 있다. 본 문서에서는 설명의 편의를 위해 위젯을 광고 아이템으로 가정하고, 위젯에 관한 템플릿(120)을 Json 포맷을 갖는 템플릿으로 가정하여 설명하겠으나, 위젯의 종류 및 템플릿의 종류는 이에 한정되는 것은 아니다.
다양한 실시예에 따른 전자 장치(110)는 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합함으로써, 위젯에 관한 템플릿(120)을 생성할 수 있다. 베이스 템플릿은 위젯에 관련된 정보가 포함되어 있을 수 있다. 위젯에 관련된 다양한 정보가 포함된 베이스 템플릿은, 예를 들어, 티스테이션 템플릿(Tstation Template)이라고 부를 수 있다.
다양한 실시예에 따른 위젯에 관한 템플릿(120)은, 적어도 하나의 UI 아이템 및 데이터 아이템이 결합된 템플릿일 수 있다. UI 아이템 및 데이터 아이템은 사용자가 편집 가능하도록 정의된(또는 코딩된) 구성 유닛을 지칭할 수 있다. 예를 들어, 본 문서에서 UI 아이템은 위젯에 관한 템플릿(120)의 레이아웃을 구성하기 위한 UI 형식의 구성 유닛을 의미할 수 있다. 예를 들어, 본 문서에서 데이터 아이템은, UI 아이템에 포함(또는 적용)되는 다양한 정보를 의미할 수 있다.
전자 장치(110)는, 복수의 사용자 입력에 기초하여, 베이스 템플릿을 생성하고, 하나 이상의 데이터베이스에 미리 저장된 복수의 UI 아이템 중 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하며, 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정할 수 있다. 전자 장치(110)는, 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합(또는, 바인딩)함으로써 위젯에 관한 템플릿(120)을 생성할 수 있다. 위젯에 관한 템플릿(120)은, 예를 들어, 바인딩 템플릿(Binding Template)이라고 부를 수 있다. 위젯에 관한 템플릿(120)을 생성하는 구체적인 방법에 대해서는 후술하기로 한다.
다양한 실시예에 따른 전자 장치(110)는 위젯에 관한 템플릿(120)을 단말 장치(130)로 전송할 수 있다. 단말 장치(130)는 적어도 하나의 UI 아이템과 복수의 데이터 아이템이 결합된 위젯에 관한 템플릿(120)을 SDK(131)에서 정의한 파싱룰을 이용하여 애플리케이션 또는 웹에 렌더링할 수 있다. 즉, 단말 장치(130)는 해당하는 운영체제의 SDK(131)에서 정의한 파싱룰을 이용하여 위젯을 렌더링할 수 있다. 예를 들어, A 운영체제를 사용하는 단말 장치(130a)에서는 A 운영체제의 SDK(131a)에서 정의한 파싱룰을 이용하여 애플리케이션에 해당 위젯을 렌더링할 수 있고, B 운영체제를 사용하는 단말 장치(130b)에서는 B 운영체제의 SDK(131b)에서 정의한 파싱룰을 이용하여 애플리케이션에 해당 위젯을 렌더링할 수 있다. C 운영체제를 사용하는 단말 장치(130c)에서는, C 운영체제의 SDK(131c)에서 정의한 파싱룰을 이용하여 웹에 해당 위젯을 렌더링할 수 있다. 본 문서에 개시된 실시예에 따르면, 복수의 단말 장치(130)가 서로 다른 운영체제를 사용한다고 하더라도, 하나의 위젯에 관한 템플릿(120)을 이용하여 위젯을 각각의 단말 장치(130)에 렌더링할 수 있다.
도 2는 본 개시의 다양한 실시예에 따른 전자 장치(110)의 블록도이다. 도 2를 참조하면, 다양한 실시예에 따른 전자 장치(110)는 프로세서(111), 데이터베이스(113), 통신 회로(115), 디스플레이(117) 및 입력 장치(119)를 포함할 수 있다. 도 2에 도시된 구성 중 일부가 생략 또는 치환되더라도 본 문서에서 개시된 다양한 실시예를 구현함에는 지장이 없을 것이다.
다양한 실시예에 따르면, 전자 장치(110)의 하나 이상의 프로세서(111)는 전자 장치(110)의 각 구성요소들의 제어 및/또는 통신에 관한 연산이나 데이터 처리를 수행할 수 있는 구성일 수 있다. 하나 이상의 프로세서(111)는, 예를 들어, 전자 장치(110)의 구성 요소들과 작동적으로 연결될 수 있다. 하나 이상의 프로세서(111)는 전자 장치(110)의 다른 구성 요소로부터 수신된 명령 또는 데이터를 메모리(미도시)에 로드(load)하고, 메모리에 저장된 명령 또는 데이터를 처리하고, 결과 데이터를 저장할 수 있다. 본 개시에서, 하나 이상의 프로세서(111)는 프로세서(111)라고 표현될 수 있다. 프로세서(111)라는 표현은, 문맥상 명백히 다르게 표현하지 않는 이상, 하나 또는 그 이상의 프로세서(111)의 집합을 의미할 수 있다. 다양한 실시예에 따른 메모리는 상기에 기재된 프로세서(111)의 동작에 대한 인스트럭션들을 저장할 수 있다.
다양한 실시예에 따른 전자 장치(110)의 하나 이상의 데이터베이스(113)는 다양한 정보를 저장할 수 있다. 하나 이상의 데이터베이스(113)는, 베이스 템플릿 또는 위젯에 관한 템플릿을 저장할 수 있다. 위젯에 관한 템플릿은, 예를 들어, 커루셀(carousel) 템플릿 또는 배너(banner) 템플릿을 포함할 수 있다. 커루셀 템플릿은 커루셀 방식으로 표시되는 템플릿으로서, 슬라이드 메뉴로 표시되는 방식의 템플릿일 수 있다. 배너 템플릿은 상단(top) 배너 템플릿, 중단(mid) 배너 템플릿 및 하단(bottom) 배너 템플릿 중 적어도 하나를 포함할 수 있다. 배너 형식의 템플릿은 노출 페이지 변경을 통해 표시되는 위치(예: 상단, 중단, 하단)을 변경할 수 있다. 위젯에 관한 템플릿은 Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿일 수 있다.
베이스 템플릿은 위젯에 관련된 정보가 포함되어 있을 수 있다. 즉, 위젯에 관한 템플릿을 구성하기 위해 필요한 다양한 정보가 포함되어 있을 수 있다. 위젯에 관련된 정보는, 예를 들어, 위젯에 관련된 상품의 이름, 가격, 별점, 할인 정보, 배송 정보, 상품에 관한 이미지 및 상품에 관한 하이퍼링크 중 적어도 하나를 포함할 수 있다. 상품에 관한 이미지는 상품의 썸네일 이미지, 적어도 하나의 아이콘 및 적어도 하나의 뱃지 이미지 중 적어도 하나를 포함할 수 있다. 적어도 하나의 아이콘은, 이동하기 아이콘, 광고 아이콘, 쇼핑백 아이콘 및 좋아요 아이콘을 포함할 수 있다. 상품의 가격은, 예를 들어, 상품의 원가, 상품의 할인 가격, 상품의 최종 가격 중 적어도 하나를 포함할 수 있다. 배송 정보는, 예를 들어, 도착 보장일, 무료 배송 여부 정보 및 정기 배송 여부 정보 중 적어도 하나를 포함할 수 있다.
다양한 실시예에 따르면, 전자 장치(110)의 하나 이상의 통신 회로(115)는 외부 장치(예: 단말 장치(130))와 통신 채널을 설립하고, 외부 장치와 다양한 데이터를 송수신할 수 있다. 다양한 실시예에 따르면, 하나 이상의 통신 회로(115)는 셀룰러 통신 모듈을 포함하여 셀룰러 네트워크(예: 3G, LTE, 5G, Wibro 또는 Wimax)에 연결되도록 구성할 수 있다. 다양한 실시예에 따르면, 하나 이상의 통신 회로(115)는 근거리 통신 모듈을 포함하여 근거리 통신(예를 들면, Wi-Fi, Bluetooth, Bluetooth Low Energy(BLE), UWB)을 이용해 외부 장치와 데이터 송수신을 할 수 있으나, 이에 제한되지 않는다. 본 개시에서, 하나 이상의 통신 회로(115)는 통신 회로(115)라고 표현될 수 있다. 통신 회로(115)라는 표현은, 문맥상 명백히 다르게 표현하지 않는 이상, 하나 또는 그 이상의 통신 회로(115)의 집합을 의미할 수 있다.
다양한 실시예에 따르면, 전자 장치(110)의 디스플레이(117)는 프로세서(111)의 제어에 기반하여 다양한 화면을 표시할 수 있다. 디스플레이(117)는 다양한 외부 객체의 접촉 또는 근접 (예를 들면, 호버링)을 인식할 수 있는 터치 센서 패널(touch sensor panel, TSP)의 형태로 구현될 수 있다. 디스플레이(117)는 다양한 외부 객체의 접촉 또는 근접을 인지하기 위해서, 정전 용량 센서를 포함할 수 있다. 정전 용량 센서는 복수의 캐패시터(capacitor)로 구성될 수 있으며, 정전 용량 센서는 캐패시터에 전기 신호를 인가할 수 있다. 캐패시터는 전기 신호의 인가에 대응하여 전하를 충전 및 방전할 수 있다. 전기 신호가 캐패시터에 인가되면 전기 신호의 전압의 크기에 따라 캐패시터에 전하가 충전될 수 있다. 디스플레이(117)는 정전 용량 센서에서 수집한 신호에 기반하여 터치 입력을 수신할 수 있다. 다양한 실시예에 따른 디스플레이(117)는 위젯을 편집할 수 있는 관리 툴(management tool 또는 administration tool)을 실시간으로 표시할 수 있다. 디스플레이(117)는 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 표시할 수 있다. 예를 들어, 디스플레이(117)는 위젯에 관한 템플릿이 완성되기 이전에, 현재 베이스 템플릿의 편집 상태를 나타내는 미리보기 화면을 표시할 수 있다.
다양한 실시예에 따른 관리 툴은 소프트웨어적으로 구현될 수 있는 프로그램일 수 있다. 관리 툴은 메모리에 저장되며, 프로세서(111)에 의해 실행될 수 있다. 관리 툴은 애플리케이션 또는 웹에 표시되는 다양한 위젯들을 생성, 편집 또는 삭제할 수 있는 프로그램일 수 있다. 관리 툴은 사용자가 위젯을 자유롭게 구성할 수 있도록, 복수의 UI 아이템 및 복수의 데이터 아이템을 미리 정의하고 있을 수 있다. 따라서, 관리 툴을 사용하는 사용자는, 코딩에 대한 지식이 부족하더라도, 복수의 UI 아이템 및 복수의 데이터 아이템을 이용하여, 위젯을 편집할 수 있다. 위젯을 편집하는 구체적인 방법에 대해서는 후술하기로 한다.
다양한 실시예에 따른 전자 장치(110)의 하나 이상의 입력 장치(119)는, 전자 장치(110)의 구성요소에 사용될 명령 또는 데이터를 전자 장치(110)의 외부(예: 사용자)로부터 수신할 수 있다. 하나 이상의 입력 장치(119)는, 예를 들면, 마이크, 마우스 또는 키보드를 포함할 수 있다. 본 개시에서, 하나 이상의 입력 장치(119)는 입력 장치(119)라고 표현될 수 있다. 입력 장치(119)라는 표현은, 문맥상 명백히 다르게 표현하지 않는 이상, 하나 또는 그 이상의 입력 장치(119)의 집합을 의미할 수 있다.
도 3은 본 개시의 다양한 실시예에 따른 전자 장치(110)의 동작 흐름도이다. 도 1 및 2에서 설명한 내용과 중복되는 내용은 생략하기로 한다.
동작 흐름도 300을 참조하면, 다양한 실시예에 따른 전자 장치(110)의 프로세서(111)는, 동작 310에서, 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성할 수 있다. 베이스 템플릿은, UI 아이템 및 데이터 아이템이 결합되기 전의 템플릿을 의미할 수 있다. 데이터베이스(113)에는 위젯과 관련된 다양한 정보를 저장하고 있을 수 있다. 또는, 베이스 템플릿에 위젯에 관련된 정보가 포함되어 있을 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 320에서, 데이터베이스(113)에 미리 저장된 복수의 UI 아이템 중 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정할 수 있다. 예를 들어, 프로세서(111)는 복수의 사용자 입력에 기초하여, 템플릿의 레이아웃을 구성하기 위한 적어도 하나의 UI 아이템을 설정할 수 있다. 복수의 UI 아이템은, 수평 스택 컨테이너(H_stack), 수직 스택 컨테이너(V_stack), 중첩 스택 컨테이너(Z_stack), 이미지(image), 레이블(label) 및 별점 아이템(star rating item) 중 적어도 하나를 포함할 수 있다. 복수의 UI 아이템은 수평 커루셀 스택 컨테이너(H_Carousel_stack) 또는 동영상(video)을 더 포함할 수 있다. 수평 스택 컨테이너는 수평으로 아이템을 쌓는 것이 가능한 컨테이너(container)일 수 있다. 수직 스택 컨테이너는 수직으로 아이템을 쌓는 것이 가능한 컨테이너일 수 있다. 중첩 스택 컨테이너는 서로 중첩하여 아이템을 쌓는 것이 가능한 컨테이너일 수 있다. 레이블은 텍스트가 포함될 수 있는 아이템일 수 있다. 별점 아이템은 상품에 관한 별점을 나타내는 별점 이미지, 별점 수치 또는 리뷰의 수가 포함될 수 있는 아이템일 수 있다. 수평 커루셀 스택 컨테이너는 슬라이드 메뉴로 아이템을 표시하는 것이 가능한 컨테이너일 수 있다.
다양한 실시예에 따른 프로세서(111)는, 복수의 사용자 입력에 기초하여, 적어도 하나의 UI 아이템의 속성을 설정할 수 있다. 예를 들어, 프로세서(111)는, 복수의 사용자 입력에 기초하여, UI 아이템 각각의 속성을 설정할 수도 있고, 일부 UI 아이템의 속성을 설정할 수도 있다. 이 경우, 속성을 직접 설정하지 않은 UI 아이템의 속성은, 디폴트 값으로 결정될 수도 있다. UI 아이템의 속성은, 크기(size), 패딩 영역(padding), 마진 영역(margin), 경계선(border), 코너 반경(corner radius), 텍스트(text), 배경 색상(background color), 글자 색상(text color), 중력(gravity), 값(value), 스크롤(scroll) 여부, 정렬(align) 및 하이퍼링크(hyperlink) 중 적어도 하나를 포함할 수 있다. UI 아이템의 크기는 너비(width) 및 높이(height)를 포함할 수 있다. UI 아이템의 마진 영역은, 위젯에 관한 템플릿을 구성하는 다른 요소와의 외부 여백을 의미할 수 있다. UI 아이템의 경계선은, UI 아이템의 경계선을 의미할 수 있다. UI 아이템의 패딩 영역은 UI 아이템의 내부 영역에서 경계선까지의 내부 여백을 의미할 수 있다. UI 아이템의 스크롤 여부는, 횡스크롤 또는 종스크롤이 가능한지 여부를 의미할 수 있다. 하이퍼링크는, 예를 들어, UI 아이템을 선택(클릭)함으로써 발생하는 액션(action)을 의미할 수 있다.
예를 들어, 사용자는 베이스 템플릿에 UI 아이템으로서 1개의 수평 스택 컨테이너가 포함되고, 상기 1개의 수평 스택 컨테이너 내에 1개의 이미지 및 1개의 수직 스택 컨테이너가 포함되도록 선택할 수 있다. 사용자는 입력 장치(119)를 통해 베이스 템플릿의 전체 공간에는 수평 스택 컨테이너가 위치하고, 상기 수평 스택 컨테이너의 좌측 공간에는 이미지가 위치하고, 우측 공간에는 수직 스택 컨테이너가 위치하도록 설정할 수 있다. 이 경우, 프로세서(111)는 디스플레이(117)를 통해 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 표시할 수 있다. 예를 들어, 프로세서(111)는 미리보기 화면을 통해 UI 아이템들의 레이아웃을 점선으로 표시할 수 있다. 즉, 사용자는 위젯에 관한 템플릿을 생성하기 위하여, 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 선택하여 추가할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 330에서, 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정할 수 있다. 데이터 아이템은 전자 장치(110)의 데이터베이스(113)에 미리 저장될 수 있다. 복수의 데이터 아이템은 위젯에 관련된 정보를 포함할 수 있다. 여기서, 베이스 템플릿은 위젯에 관련된 정보가 포함되어 있는 템플릿일 수 있다. 예를 들어, 베이스 템플릿은 특정 상품에 관련된 정보가 포함된 티스테이션 템플릿일 수 있다.
일 실시예에 따르면, 사용자가 입력 장치(119)를 통해 특정 UI 아이템에 포함될 특정 데이터 아이템을 선택하는 경우, 프로세서(111)는 데이터베이스(113)로부터 상기 특정 데이터 아이템에 대응하는 위젯에 관련된 정보를 추출할 수 있고, 추출된 정보를 상기 특정 UI 아이템에 포함시킬 수 있다. 예를 들어, 사용자 입력에 기초하여, 이미지에 해당하는 UI 아이템에 포함될 데이터 아이템으로써 썸네일 이미지가 선택되는 경우, 프로세서(111)는 데이터베이스(113) 결과로부터 해당 상품의 썸네일 이미지를 추출할 수 있다. 예를 들어, 해당 상품의 베이스 템플릿에 포함된 해당 상품의 썸네일 이미지를 추출할 수 있다. 이후, 프로세서(111)는 이미지에 해당하는 UI 아이템에 해당 상품의 썸네일 이미지를 포함시킬 수 있다. 유사한 방법으로, 사용자 입력에 기초하여, 수직 스택 컨테이너에 해당하는 UI 아이템에 포함될 데이터 아이템으로써, 상품의 이름, 배송 정보, 별점 및 할인 정보가 선택되는 경우, 프로세서(111)는 데이터베이스(113)로부터 해당 상품의 이름, 배송 정보, 별점 및 할인 정보를 추출할 수 있다. 예를 들어, 해당 상품의 베이스 템플릿에 포함된 해당 상품의 이름, 배송 정보, 별점 및 할인 정보를 추출할 수 있다. 이후, 프로세서(111)는 수직 스택 컨테이너에 해당하는 UI 아이템에, 해당 상품의 이름, 배송 정보, 별점 및 할인 정보를 포함시킬 수 있다. 수직 스택 컨테이너이므로, 해당 상품의 이름, 배송 정보, 별점 및 할인 정보는 수직으로 쌓일 수 있다.
일 실시예에 따르면, 사용자가 입력 장치(119)를 통해 특정 UI 아이템에 포함될 특정 데이터 아이템을 입력할 수도 있다. 예를 들어, 수직 스택 컨테이너에 해당하는 UI 아이템에 포함될 데이터 속성으로서, 커스텀 텍스트(custom text)를 선택하는 경우에 있어서, 사용자는 해당 위젯 타이틀을 입력 장치(119)를 통해 직접 입력 또는 수정할 수도 있다.
일 실시예에 따르면, UI 아이템에는 데이터 아이템이 포함될 수도 있고 포함되지 않을 수도 있다. 예를 들어, 사용자는 일부 UI 아이템에는 데이터 아이템이 포함되도록 설정하고, 다른 일부 UI 아이템에는 데이터 아이템이 포함되지 않도록 설정할 수도 있다. UI 아이템에 포함될 수 있는 데이터 아이템은 0개 또는 1개일 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 340에서, 베이스 템플릿에 적어도 하나의 UI 아이템에 데이터 아이템을 결합함으로써, 위젯에 관한 템플릿을 생성할 수 있다. 프로세서(111)는 런타임에 베이스 템플릿에 포함된 적어도 하나의 UI 아이템에 데이터 아이템을 바인딩함으로써 위젯에 관한 템플릿을 생성할 수 있다. 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템이 결합된 형태의 위젯에 관한 템플릿은 바인딩 템플릿일 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 350에서, 위젯에 관한 템플릿을 단말 장치로 전송할 수 있다. 단말 장치는 적어도 하나의 UI 아이템과 데이터 아이템이 결합된 위젯에 관한 템플릿을 수신하고, 상기 위젯에 관한 템플릿을 SDK에서 정의한 파싱룰을 이용하여 애플리케이션 또는 웹에 렌더링할 수 있다.
도 4는 본 개시의 다양한 실시예에 따른 전자 장치(110)의 동작 흐름도이다. 도 3에서 설명한 내용과 중복되는 내용은 생략한다.
동작 흐름도 400을 참조하면, 다양한 실시예에 따른 전자 장치(110)의 프로세서(111)는, 동작 410에서, 사용자 입력에 기초하여, 베이스 템플릿을 생성할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 420에서, 데이터베이스(113)에 미리 저장된 복수의 UI 아이템 중, 위젯에 관한 상위 구조에 포함될 적어도 하나의 상위 UI 아이템을 선택할 수 있다. 위젯에 관한 템플릿의 레이아웃을 구성하기 위하여, 미리 저장된 복수의 UI 아이템 중 베이스 템플릿에 포함될 적어도 하나의 상위 UI 아이템을 선택할 수 있다. 사용자는 입력 장치(119)를 통해 복수의 UI 아이템 중 적어도 하나의 상위 UI 아이템을 선택할 수 있다. 예를 들어, 사용자는 UI 아이템으로서, 수평 스택 컨테이너를 선택할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 430에서, 복수의 UI 아이템 중 적어도 하나의 상위 UI 아이템에 포함될 적어도 하나의 하위 UI 아이템을 포함할 수 있다. 예를 들어, 사용자는 상위 UI 아이템인 수평 스택 컨테이너 내부에 포함될 하위 UI 아이템으로서, 이미지 및 수직 스택 컨테이너를 선택할 수 있다.
이와 유사한 방식으로, 수직 스택 컨테이너에 포함되는 하위 UI 아이템을 더 추가할 수도 있다. 예를 들어, 프로세서(111)는 수직 스택 컨테이너에 포함되는 하위 UI 아이템으로서, 2개의 레이블, 1개의 이미지 및 1개의 별점 아이템을 선택할 수 있다. 상술한 방식을 통해, 프로세서(111)는 계층 구조를 갖는 위젯에 관한 템플릿을 생성할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 440에서, 상기 선택된 UI 아이템의 속성을 설정할 수 있다. 프로세서(111)는 선택된 적어도 하나의 상위 UI 아이템 및 적어도 하나의 하위 UI 아이템의 속성을 설정할 수 있다. 선택된 UI 아이템의 속성은, UI 아이템의 크기, 패딩 영역, 마진 영역, 경계선, 코너 반경, 텍스트, 배경 색상, 글자 색상, 중력, 값, 스크롤 여부, 정렬 및 하이퍼링크 중 적어도 하나를 포함할 수 있다.
일 실시예에 따르면, 상위 UI 아이템으로서 수평 스택 컨테이너가 선택되고, 하위 UI 아이템으로서 이미지 및 수직 스택 컨테이너가 선택된 경우, 사용자는 베이스 템플릿 내에 수평 스택 컨테이너의 크기 및 위치를 설정할 수 있다. 또한, 사용자는 수평 스택 컨테이너 내의 상기 이미지의 크기 및 위치를 설정할 수 있다. 또한, 사용자는 베이스 템플릿 내에 수직 스택 컨테이너의 크기, 위치 및 배경색을 설정할 수 있다. 예를 들어, 사용자는 상위 UI 아이템으로 선택된 수평 스택 컨테이너는 템플릿의 전체 영역에 위치하고, 하위 UI 아이템으로 선택된 이미지는 수평 스택 컨테이너의 좌측 영역에 위치하여, 마찬가지로 하위 UI 아이템으로 선택된 수직 스택 컨테이너는 수평 스택 컨테이너의 우측 영역에 위치하도록 속성을 설정할 수 있다. 사용자가 별도로 설정하지 않는 속성들에 대해서는 디폴트(default)값으로 설정될 수 있다. 즉, 사용자는 복잡한 과정 없이, 베이스 템플릿에 포함시키고 싶은 UI 아이템을 선택하고, 선택된 UI 아이템의 속성을 자유롭게 변경할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 450에서, 상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 선택할 수 있다. 프로세서(111)는, 입력 장치(119)를 통해 입력된 사용자 입력에 기초하여, 적어도 하나의 UI 아이템 각각에 포함될 데이터 아이템을 선택할 수 있다. 예를 들어, UI 아이템으로서 이미지가 선택된 경우, 프로세서(111)는 이미지에 포함될 하나의 데이터 아이템을 선택할 수 있다. 예를 들어, 프로세서(111)는 이미지에 포함된 데이터 아이템로서 썸네일 이미지 및 브랜드 로고 중 하나를 선택할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 460에서, 계층 구조를 갖는 복수의 UI 아이템 및 이에 포함된 데이터 아이템 각각에 대응하는 위젯에 관련된 정보를 추출할 수 있다. 데이터 아이템 각각은 위젯에 관련된 상품 정보를 포함할 수 있으며, 데이터베이스(113)에 미리 저장될 수 있다. 이 경우, 프로세서(111)는, 데이터베이스(113)로부터 상기 선택된 복수의 데이터 아이템 각각에 대응하는 위젯에 관련된 정보를 추출할 수 있다. 예를 들어, 프로세서(111)는 데이터베이스(113)로부터 해당 상품의 썸네일 이미지를 추출하고, 해당 상품의 이름, 배송 관련 뱃지, 별점 이미지, 별점 수치 및 할인 쿠폰 뱃지를 추출할 수 있다.
또는, 위젯에 관련된 정보는 베이스 템플릿에 포함될 수 있다. 이 경우, 프로세서(111)는, 베이스 템플릿으로부터, 상기 선택된 복수의 데이터 아이템 각각에 대응하는 위젯에 관련된 정보를 추출할 수도 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 470에서, 추출한 위젯에 관련된 정보를 적어도 하나의 UI 아이템에 적용할 수 있다. 예를 들어, 프로세서(111)는 추출한 썸네일 이미지를 이미지에 해당하는 UI 아이템에 적용하고, 추출한 이름, 배송 관련 뱃지, 별점 이미지, 별점 수치 및 할인 쿠폰 뱃지를 수직 스택 컨테이너에 포함된 하위 UI 아이템들에 적용할 수 있다.
다양한 실시예에 따른 프로세서(111)는, 동작 480에서, 선택된 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합함으로써, 위젯에 관한 템플릿을 생성할 수 있다. 상기 위젯에 관한 템플릿은 바인딩 템플릿으로서, Json 포맷을 갖는 템플릿일 수 있다. 위젯에 관한 템플릿은, 예를 들어, Json 포맷 이외에도, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿 일 수도 있다. 다양한 실시예에 따른 프로세서(111)는, 동작 490에서, 위젯에 관한 템플릿을 단말 장치로 전송할 수 있다.
도 5, 6a, 6b 및 6c는 본 개시의 다양한 실시예에 따른 위젯을 편집하는 방법을 도시한 도면이다. 본 도면들에서는 설명의 편의를 위해서, 위젯을 특정 상품에 대한 광고 정보를 표시하는 광고 아이템으로 가정하여 설명하겠으나, 위젯의 종류는 이에 한정되는 것은 아니다.
도 5를 참조하면, 다양한 실시예에 따른 전자 장치(110)의 프로세서(111)는 사용자 입력에 기초하여 위젯에 사용될 베이스 템플릿(500)을 생성할 수 있다.
다양한 실시예에 따른 프로세서(111)는 베이스 템플릿(500)의 레이아웃을 구성하기 위하여, 미리 저장된 복수의 UI 아이템 중 베이스 템플릿(500)에 포함될 적어도 하나의 UI 아이템을 선택할 수 있다. 예를 들어, 도 5에 도시된 바와 같이, 프로세서(111)는, 사용자 입력에 기초하여, 먼저 수평 스택 컨테이너(H_STACK, 505)를 가장 바깥을 감싸는 UI 아이템으로 선택 한 후, 상기 수평 스택 컨테이너(505)의 하위 UI 아이템으로서 이미지(IMAGE, 510) 및 수직 스택 컨테이너(V_STACK, 520)를 선택할 수 있다. 이 경우, 수평 스택 컨테이너(505), 이미지(510) 및 수직 스택 컨테이너(520)의 레이아웃은 점선으로 표시될 수 있다. 또한, 프로세서(111)는, 사용자 입력에 기초하여, 수직 스택 컨테이너(520)에 포함될 적어도 하나의 UI 아이템을 선택할 수 있다. 예를 들어, 프로세서(111)는, 수직 스택 컨테이너(520)에 포함될 하위 UI 아이템으로서, 2개의 레이블(521, 523), 1개의 이미지(525) 및 1개의 별점 아이템(527)을 선택할 수 있다. 수직 스택 컨테이너(520)에 포함되는 하위 UI 아이템들의 레이아웃도 점선으로 표시될 수 있다.
다양한 실시예에 따른 프로세서(111)는 사용자 입력에 기초하여 적어도 하나의 UI 아이템의 속성을 설정할 수 있다. 예를 들어, 프로세서(111)는 수평 스택 컨테이너(505)가 베이스 템플릿(500)의 전체 영역에 위치하는 크기를 갖도록 설정할 수 있다. 프로세서(111)는 이미지(510)가 수평 스택 컨테이너(505)의 좌측에 위치하고 특정 크기(즉, 특정 너비 및 특정 높이)를 갖도록 설정할 수 있다. 즉, UI 아이템에 해당하는 이미지(510)는 특정 상품에 관한 이미지가 추가될 수 있는 UI 아이템이다. 또한, 프로세서(111)는 수직 스택 컨테이너(520)가 수평 스택 컨테이너(505)의 우측에 위치하도록 설정할 수 있다. 예를 들어, 프로세서(111)는, 사용자 입력에 기초하여, 상기 수직 스택 컨테이너(520)에 2개의 레이블(521, 523), 1개의 이미지(525) 및 1개의 별점 아이템(527)이 포함되고 이들이 수직으로 적층되어 표시될 수 있도록 설정할 수 있다. 수직 스택 컨테이너(520)에 포함되는 UI 아이템의 수는 예시에 불과하며, 사용자가 자유롭게 변경할 수 있다. 나아가, 도 5에 표시된 UI 아이템들의 속성(예: UI 아이템의 수, 배치 위치)은 예시에 불과할 뿐, 사용자가 자유롭게 변경할 수 있음은 물론이다.
도 6a 및 6b를 참조하면, 다양한 실시예에 따른 프로세서(111)는 적어도 하나의 UI 아이템에 데이터 아이템을 설정할 수 있다. 프로세서(111)는 데이터베이스(113)로부터 복수의 UI 아이템에 속하는 데이터 아이템 각각에 대응하는 위젯에 관련된 정보를 추출할 수 있다. 도 6a에서, 프로세서(111)는, 사용자 입력에 기초하여, 이미지(510)에 해당하는 UI 아이템에 해당 상품의 썸네일 이미지(610)가 포함되도록 설정할 수 있다. 예를 들어, 사용자는 해당 상품과 관련된 복수의 이미지 중 썸네일 이미지(610)가 포함되도록 설정할 수 있다. 해당 상품과 관련된 복수의 이미지는 데이터베이스(113)에 미리 저장되어 있으며, 데이터 추출 및 바인딩 과정에서 해당 데이터 아이템에 대응하는 정보가 존재하지 않을 경우 해당 UI 아이템은 베이스 템플릿에서 제거될 수 있다. 이 경우, 프로세서(111)는, 해당 상품의 썸네일 이미지(610)를 선택하는 사용자 입력에 기초하여, 데이터베이스(113)로부터 추출된 해당 상품의 썸네일 이미지(610)를, 이미지(510)에 해당하는 UI 아이템에 추가할 수 있다.
도 6b에서, 프로세서(111)는 수직 스택 컨테이너(620)에 포함된 복수의 하위UI 아이템 각각에 포함될 복수의 데이터 아이템을 설정할 수 있다. 사용자는, 수직 스택 컨테이너(620)에 포함된 복수의 하위 UI 아이템이, 상품의 이름(621), 배송 정보(623), 할인 정보(625) 및 별점(627)을 표시할 수 있도록 설정할 수 있다. 예를 들어, 프로세서(111)는 사용자 입력에 기초하여, 수직 스택 컨테이너(520)의 제1 레이블(521)에는, 상품의 이름(621)이 추가되고, 제2 레이블(523)에는 배송 정보(623)가 추가되며, 이미지(525)에는 할인 정보(625)가 포함되고, 및 별점 아이템(527)에는 별점(627)이 추가되도록 설정할 수 있다. 도 6b에 도시된 것처럼, 제1 레이블(521)에 해당 상품의 이름을 추가하는 것으로 설정된 경우, 프로세서(111)는 데이터베이스(113)로부터 해당 상품의 이름인 "타트 체리 원액 주스"를 추출할 수 있고, 이를 수직 스택 컨테이너(620)의 제1 레이블(521)에 추가할 수 있다. 마찬가지의 방법으로, 프로세서(111)는 배송 정보인 "1/18 배송 도착 예정"을 데이터베이스(113)로부터 추출하여 수직 스택 컨테이너(620)의 제2 레이블(523)에 추가할 수 있고, 할인 쿠폰 뱃지에 관한 이미지를 데이터베이스(113)로부터 추출하여, 수직 스택 컨테이너(620)의 이미지(525)에 추가할 수 있고, 별점 이미지 및 별점 수치를 데이터베이스(113)로부터 추출하여, 수직 스택 컨테이너(620)의 별점 아이템(527)에 추가할 수 있다.
도 6c를 참조하면, 다양한 실시예에 따른 프로세서(111)는 베이스 템플릿에 적어도 하나의 UI 아이템 및 데이터 아이템을 결합함으로써, 위젯에 관한 템플릿(600)을 생성할 수 있다. 이후, 프로세서(111)는 생성한 위젯에 관한 템플릿(600)을 단말 장치로 전송할 수 있다.
도 7a 및 7b는 본 개시의 다양한 실시에 따른 위젯에 관한 템플릿들을 도시한 도면이다. 앞에서 설명한 방법을 통하여, 사용자는, 복수의 UI 아이템 및 복수의 데이터 아이템을 이용하여, 쉽고 직관적으로 위젯을 편집할 수 있다. 즉, 위젯의 구성은 사용자에 의해 자유롭게 편집될 수 있다. 일 실시예에 따르면, 도 7a에 도시된 템플릿(710)과 같이, 프로세서(111)는, 사용자 입력에 기초하여, 위젯에 관한 템플릿이 보여질 위치로서 중단 배너 템플릿을 선택하고, 해당 템플릿에 UI 아이템으로서, 이미지, 수직 스택 컨테이너 및 레이블이 포함되도록 설정할 수 있다. 이 경우, 이미지에는 해당 상품의 썸네일 이미지가 포함되고, 수직 스택 컨테이너에 포함된 하위 UI 아이템들에는 별점, 상품의 설명 및 배송 정보가 포함되며, 레이블을 선택(클릭) 시에는 이동하기 액션이 포함될 수 있다.
일 실시예에 따르면, 도 7b에 도시된 템플릿(720)과 같이, 프로세서(111)는 사용자 입력에 기초하여, 위젯에 관한 템플릿이 보여질 위치로서, 상단 배너 템플릿을 선택하고, 해당 템플릿에 UI 아이템으로서, 이미지 및 수평 스택 컨테이너가 포함되도록 설정할 수 있다. 이 경우, 이미지에는 해당 상품의 정면 사진이 포함되고, 수평 스택 컨테이너에는 상품의 이름이 포함될 수 있다.
도 8a 및 8b는 본 개시의 다양한 실시예에 따른 관리 툴의 사용 화면을 도시한 도면이다.
도 8a를 참조하면, 다양한 실시예에 따른 관리 툴은 위젯을 동적으로 편집할 수 있다. 다양한 실시예에 따른 프로세서(111)는 위젯에 사용될 베이스 템플릿을 생성하고, 미리 저장된 복수의 UI 아이템 중 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정할 수 있으며, 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정할 수 있다. 예를 들어, 사용자는 영역 810에 표시된 복수의 UI 아이템 중 베이스 템플릿에 추가하고자 하는 적어도 하나의 UI 아이템을 선택할 수 있다. 이후, 사용자는 영역 820을 이용하여, 선택된 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정할 수 있다. 예를 들어, 사용자가 상품의 이름을 추가하는 것으로 선택한 경우, 프로세서(111)는 데이터베이스(113)로부터 해당 상품의 이름을 추출하여 해당 UI 아이템에 적용할 수 있다. 또 다른 실시예에 따르면, 사용자는 해당 상품의 이름을 영역 820에 포함된 아이콘 "PRODUCT_TITLE"을 선택한 후 직접 상품의 이름을 입력할 수도 있다. 이와 유사한 방법으로 적어도 하나의 UI 아이템에 다양한 데이터 아이템을 선택 및 적용할 수 있다. 아이콘 830은 현재 템플릿의 코드를 확인하기 위한 아이콘일 수 있다.
도 8b를 참조하면, 관리 툴의 영역 840에서는, 완성되기 이전의 현재 템플릿의 계층 구조를 표시할 수 있다. 사용자는 계층 구조를 통해 템플릿의 전체적인 구조를 한눈에 확인할 수 있으며, 직접 편집도 가능하다. 관리 툴의 영역 850에서는 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면(preview)을 표시할 수 있다. 이를 통해 사용자의 템플릿의 레이아웃이 원하는 대로 구성되었는지 실시간으로 확인할 수 있다.
도 9는 본 개시의 다양한 실시예에 따른 단말 장치(130)의 동작 흐름도이다.
동작 흐름도 900을 참조하면, 다양한 실시예에 따른 단말 장치(130)는, 동작 910에서, 전자 장치(110)로부터 위젯에 관한 템플릿을 수신할 수 있다. 수신한 위젯에 관한 템플릿은, 예를 들어, Json 포맷을 갖는 템플릿일 수 있다. 또 다른 실시예에 따르면, 위젯에 관한 템플릿은, Json 포맷 이외에도, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿 일 수도 있다.
다양한 실시예에 따른 단말 장치(130)는, 동작 920에서, 위젯에 관한 템플릿을 SDK에서 정의한 파싱룰을 이용하여 애플리케이션 또는 웹에 렌더링할 수 있다. 단말 장치(130)는, 수신한 위젯에 관한 템플릿을 해당 운영 체제의 SDK에서 정의한 파싱룰을 이용하여 파싱함으로써, 위젯의 레이아웃을 동적으로 구성할 수 있다. 다양한 실시예에 따른 단말 장치(130)는, 동작 930에서, 렌더링된 위젯을 애플리케이션 또는 웹에 표시할 수 있다.
단말 장치(130)는 애플리케이션 배포와 무관하게 전자 장치(110)로부터 위젯에 관한 템플릿을 수신하며, 수신된 템플릿은 적어도 하나의 UI 아이템에 복수개의 데이터 속성이 결합된 형태의 템플릿이다. 즉, 클라이언트의 수정이나 백엔드의 수정이 없이도 유저의 단말 장치(130)로 편집된 위젯을 Json 포맷의 템플릿으로 전송하기때문에, 위젯의 편집 사항을 실시간으로 반영 및 확인할 수 있다.
도 3, 4 및 9에 도시된 흐름도에서 프로세스 단계들, 방법 단계들, 알고리즘들 등이 순차적인 순서로 설명되었지만, 그러한 프로세스들, 방법들 및 알고리즘들은 임의의 적합한 순서로 작동하도록 구성될 수 있다. 다시 말하면, 본 개시의 다양한 실시예들에서 설명되는 프로세스들, 방법들 및 알고리즘들의 단계들이 본 개시에서 기술된 순서로 수행될 필요는 없다. 또한, 일부 단계들이 비동시적으로 수행되는 것으로서 설명되더라도, 다른 실시예에서는 이러한 일부 단계들이 동시에 수행될 수 있다. 또한, 도면에서의 묘사에 의한 프로세스의 예시는 예시된 프로세스가 그에 대한 다른 변화들 및 수정들을 제외하는 것을 의미하지 않으며, 예시된 프로세스 또는 그의 단계들 중 임의의 것이 본 개시의 다양한 실시예들 중 하나 이상에 필수적임을 의미하지 않으며, 예시된 프로세스가 바람직하다는 것을 의미하지 않는다.
상기 방법은 특정 실시예들을 통하여 설명되었지만, 상기 방법은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의해 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다. 컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피 디스크, 광데이터 저장장치 등을 포함할 수 있다. 또한, 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고, 상기 실시예들을 구현하기 위한 기능적인(functional) 프로그램, 코드 및 코드 세그먼트들은 본 개시가 속하는 기술분야의 프로그래머들에 의해 용이하게 추론될 수 있다.

Claims (20)

  1. 위젯을 편집하기 위한 전자 장치에 있어서,
    단말 장치와 통신 연결된 하나 이상의 통신 회로;
    하나 이상의 데이터베이스;
    하나 이상의 입력 장치; 및
    하나 이상의 프로세서를 포함하고,
    상기 하나 이상의 프로세서는,
    상기 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성하고,
    상기 하나 이상의 데이터베이스에 미리 저장된 복수의 UI 아이템 중 상기 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하고,
    상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정하고,
    상기 베이스 템플릿에 상기 적어도 하나의 UI 아이템 및 상기 데이터 아이템을 결합함으로써, 상기 위젯에 관한 템플릿을 생성하고,
    상기 위젯에 관한 템플릿을 상기 단말 장치로 전송하도록 구성된, 전자 장치.
  2. 제1항에 있어서,
    상기 위젯에 관한 템플릿은, 커루셀 템플릿, 상단 배너 템플릿, 중단 배너 템플릿 및 하단 배너 템플릿 중 적어도 하나를 포함하는, 전자 장치.
  3. 제2항에 있어서,
    상기 위젯에 관한 템플릿은 Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿인, 전자 장치.
  4. 제1항에 있어서,
    상기 하나 이상의 프로세서는,
    상기 복수의 UI 아이템 중 상기 위젯에 관한 템플릿의 상위 구조에 포함될 적어도 하나의 상위 UI 아이템을 선택하고,
    상기 복수의 UI 아이템 중 상기 적어도 하나의 상위 UI 아이템에 포함될 적어도 하나의 하위 UI 아이템을 선택하고,
    상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성을 설정하도록 구성된, 전자 장치.
  5. 제4항에 있어서,
    상기 복수의 UI 아이템은, 수평 스택 컨테이너, 수직 스택 컨테이너, 중첩 스택 컨테이너, 이미지, 레이블 및 별점 아이템 중 적어도 하나를 포함하는, 전자 장치.
  6. 제4항에 있어서,
    상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성은,
    UI 아이템의 크기, 패딩 영역, 마진 영역, 경계선, 코너 반경, 텍스트, 배경 색상, 글자 색상, 값, 스크롤 여부, 정렬 및 하이퍼링크 중 적어도 하나를 포함하는, 전자 장치.
  7. 제1항에 있어서,
    상기 데이터 아이템은 상기 하나 이상의 데이터베이스에 미리 저장되어 있는 상기 위젯에 관련된 정보를 포함하는, 전자 장치.
  8. 제7항에 있어서,
    상기 하나 이상의 프로세서는,
    상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 선택하고,
    상기 하나 이상의 데이터베이스로부터 상기 선택한 데이터 아이템에 대응하는 위젯에 관련된 정보를 추출하고,
    상기 추출한 위젯에 관련된 정보를 상기 적어도 하나의 UI 아이템에 적용하도록 구성된, 전자 장치.
  9. 제7항에 있어서,
    상기 위젯에 관련된 정보는,
    상기 위젯에 관련된 상품의 이름, 가격, 별점, 할인 정보, 배송 정보, 상기 상품에 관한 이미지 및 하이퍼링크 중 적어도 하나를 포함하는, 전자 장치.
  10. 제1항에 있어서,
    디스플레이를 더 포함하고,
    상기 하나 이상의 프로세서는,
    상기 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 상기 디스플레이를 통해 표시하도록 구성된, 전자 장치.
  11. 전자 장치에서 위젯을 편집하는 방법에 있어서,
    상기 위젯에 관한 템플릿을 생성하기 위한 베이스 템플릿을 생성하는 동작;
    상기 전자 장치의 하나 이상의 데이터베이스에 미리 저장된 복수의 UI 아이템 중 상기 베이스 템플릿에 포함될 적어도 하나의 UI 아이템을 설정하는 동작;
    상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 설정하는 동작;
    상기 베이스 템플릿에 상기 적어도 하나의 UI 아이템 및 상기 데이터 아이템을 결합함으로써, 상기 위젯에 관한 템플릿을 생성하는 동작; 및
    상기 위젯에 관한 템플릿을 단말 장치로 전송하는 동작을 포함하는, 방법.
  12. 제11항에 있어서,
    상기 위젯에 관한 템플릿은, 커루셀 템플릿, 상단 배너 템플릿, 중단 배너 템플릿 및 하단 배너 템플릿 중 적어도 하나를 포함하는, 방법.
  13. 제12항에 있어서,
    상기 위젯에 관한 템플릿은 Json 포맷, XML 포맷, HTML 포맷, SGML 포맷, RDF 포맷 및 YAML 포맷 중 하나를 갖는 템플릿인, 방법.
  14. 제11항에 있어서,
    상기 적어도 하나의 UI 아이템을 설정하는 동작은,
    상기 복수의 UI 아이템 중 상기 위젯에 관한 템플릿의 상위 구조에 포함될 적어도 하나의 상위 UI 아이템을 선택하는 동작;
    상기 복수의 UI 아이템 중 상기 적어도 하나의 상위 UI 아이템의 하위 구조에 포함될 적어도 하나의 하위 UI 아이템을 선택하는 동작; 및
    상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성을 설정하는 동작을 포함하는, 방법.
  15. 제14항에 있어서,
    상기 복수의 UI 아이템은, 수평 스택 컨테이너, 수직 스택 컨테이너, 중첩 스택 컨테이너, 이미지, 레이블 및 별점 아이템 중 적어도 하나를 포함하는, 방법.
  16. 제14항에 있어서,
    상기 적어도 하나의 상위 UI 아이템 및 상기 적어도 하나의 하위 UI 아이템의 속성은,
    UI 아이템의 크기, 패딩 영역, 마진 영역, 경계선, 코너 반경, 텍스트, 배경 색상, 글자 색상, 값, 스크롤 여부, 정렬 및 하이퍼링크 중 적어도 하나를 포함하는, 방법.
  17. 제11항에 있어서,
    상기 데이터 아이템은 상기 하나 이상의 데이터베이스에 미리 저장되어 있는 상기 위젯에 관련된 정보를 포함하는, 방법.
  18. 제17항에 있어서,
    상기 데이터 아이템을 설정하는 동작은,
    상기 적어도 하나의 UI 아이템에 포함될 데이터 아이템을 선택하는 동작;
    상기 하나 이상의 데이터베이스로부터 상기 선택한 데이터 아이템에 대응하는 위젯에 관련된 정보를 추출하는 동작; 및
    상기 추출한 위젯에 관련된 정보를 상기 적어도 하나의 UI 아이템에 적용하는 동작을 포함하는, 방법.
  19. 제17항에 있어서,
    상기 위젯에 관련된 정보는,
    상기 위젯에 관련된 상품의 이름, 가격, 별점, 할인 정보, 배송 정보, 상기 상품의 이미지 및 하이퍼링크 중 적어도 하나를 포함하는, 방법.
  20. 제11항에 있어서,
    상기 베이스 템플릿의 현재 상태를 나타내는 미리보기 화면을 상기 전자 장치의 디스플레이를 통해 표시하는 동작을 더 포함하는, 방법.
KR1020220065334A 2022-05-27 2022-05-27 위젯을 편집하기 위한 방법 및 전자 장치 KR20230165506A (ko)

Priority Applications (3)

Application Number Priority Date Filing Date Title
KR1020220065334A KR20230165506A (ko) 2022-05-27 2022-05-27 위젯을 편집하기 위한 방법 및 전자 장치
PCT/KR2022/007742 WO2023229087A1 (ko) 2022-05-27 2022-05-31 위젯을 편집하기 위한 방법 및 전자 장치
TW112114162A TW202347108A (zh) 2022-05-27 2023-04-17 用以編輯介面工具集之方法及電子裝置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020220065334A KR20230165506A (ko) 2022-05-27 2022-05-27 위젯을 편집하기 위한 방법 및 전자 장치

Publications (1)

Publication Number Publication Date
KR20230165506A true KR20230165506A (ko) 2023-12-05

Family

ID=88919536

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020220065334A KR20230165506A (ko) 2022-05-27 2022-05-27 위젯을 편집하기 위한 방법 및 전자 장치

Country Status (3)

Country Link
KR (1) KR20230165506A (ko)
TW (1) TW202347108A (ko)
WO (1) WO2023229087A1 (ko)

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102067661B1 (ko) * 2013-05-23 2020-01-17 에스케이플래닛 주식회사 위젯 저작 시스템 및 방법
KR20200088152A (ko) * 2019-01-14 2020-07-22 주식회사위즈위그 템플릿을 이용한 반응형 웹 구현 장치 및 방법
KR102246537B1 (ko) * 2019-03-22 2021-04-30 카페24 주식회사 온라인 쇼핑몰 배너 디자인 자동 생성 방법 및 장치
KR20210130368A (ko) * 2020-04-22 2021-11-01 주식회사 이래요스튜디오 디자인 커스터마이징 장치 및 방법
KR102395026B1 (ko) * 2021-10-22 2022-05-09 쿠팡 주식회사 페이지 정보 제공을 위한 동작 방법 및 이를 지원하는 전자 장치

Also Published As

Publication number Publication date
WO2023229087A1 (ko) 2023-11-30
TW202347108A (zh) 2023-12-01

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
US8555186B2 (en) Interactive thumbnails for transferring content among electronic documents
US11048484B2 (en) Automated responsive grid-based layout design system
RU2662632C2 (ru) Представление документов фиксированного формата в формате с измененной компоновкой
US20060225037A1 (en) Enabling UI template customization and reuse through parameterization
US20130205189A1 (en) Apparatus And Method For Interacting With An Electronic Form
CN101308489B (zh) 电子表单中的声明式尺寸可变列表
KR101760777B1 (ko) 반응형 웹사이트 빌더 시스템 및 그 방법
US10410606B2 (en) Rendering graphical assets on electronic devices
US11868598B2 (en) Generating and modifying content using data structures
WO2013109858A1 (en) Design canvas
CN104081432A (zh) 社交内容流的图形视图
CN113094144A (zh) 显示屏界面控制方法及电子设备
Rahman Jump Start Bootstrap: Get Up to Speed with Bootstrap in a Weekend
KR101546359B1 (ko) 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템
KR20230165506A (ko) 위젯을 편집하기 위한 방법 및 전자 장치
KR101064051B1 (ko) 간단한 광고 제작 방법 및 시스템
Khaddam et al. Flippable user interfaces for internationalization
CN113703638A (zh) 数据管理页面处理方法、装置、电子设备及存储介质
JP7381900B2 (ja) 情報処理システムと、その制御方法及びプログラム
Shenoy Learning Bulma: Understand How to Develop Responsive, Mobile-first Websites Using This Impressive, Modern Framework
Shenoy et al. Layout CSS Helpers
Responsive et al. Learning Bulma
CN117406879A (zh) 一种可视化拖拉拽分栏布局控制方法、系统、设备及介质
CN115469870A (zh) 文件在线处理的方法、装置、电子设备及介质

Legal Events

Date Code Title Description
E902 Notification of reason for refusal