KR20200025441A - Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same - Google Patents

Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same Download PDF

Info

Publication number
KR20200025441A
KR20200025441A KR1020180102805A KR20180102805A KR20200025441A KR 20200025441 A KR20200025441 A KR 20200025441A KR 1020180102805 A KR1020180102805 A KR 1020180102805A KR 20180102805 A KR20180102805 A KR 20180102805A KR 20200025441 A KR20200025441 A KR 20200025441A
Authority
KR
South Korea
Prior art keywords
dome
component
view
layer
information
Prior art date
Application number
KR1020180102805A
Other languages
Korean (ko)
Other versions
KR102091786B1 (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 KR1020180102805A priority Critical patent/KR102091786B1/en
Priority to CN201811102590.3A priority patent/CN110874448A/en
Publication of KR20200025441A publication Critical patent/KR20200025441A/en
Application granted granted Critical
Publication of KR102091786B1 publication Critical patent/KR102091786B1/en

Links

Images

Classifications

    • 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
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Stored Programmes (AREA)
  • Document Processing Apparatus (AREA)

Abstract

Disclosed are a method of synchronizing an HTML execution screen and an editing screen by using an identification tag and a program therefor. According to various embodiments of the present invention, the method of enabling a WYSIWYG-based web editor program to synchronize an editing screen and an execution screen includes the following steps of: generating a source code, and then, generating a base document object model (DOM) through the source code, and granting an identification tag to each component existing in the base DOM; generating a view DOM by applying JavaScript or CSS to the base DOM and generating an editing screen as a first layer by using the view DOM; locating a second layer overlapping at least one part of the first layer on the editing screen and receiving input information of a user through the second layer; specifying information of a first component indicated by the input information of the user in the view DOM and specifying a second component in the base DOM matched with the first component by using an identification tag granted to the first component; and modifying information of the second component specified in the base DOM in accordance with the input information of the user. Therefore, the method is capable of obtaining intuitiveness in website development.

Description

인식표를 사용하여 HTML 실행 화면과 편집화면의 동기화를 수행하는 방법 및 이를 구현하는 프로그램{METHOD OF PERFORMING SYNCHRONIZATION BETWEEN HTML EXECUTION SCREEN AND EDIT SCREEN USING A TAG, AND PROGRAM IMPLEMENTING THE SAME}METHODO OF PERFORMING SYNCHRONIZATION BETWEEN HTML EXECUTION SCREEN AND EDIT SCREEN USING A TAG, AND PROGRAM IMPLEMENTING THE SAME}

본 발명의 다양한 실시예는 인식표를 사용하여 HTML 실행 화면과 편집화면의 동기화를 수행하는 방법 및 이를 구현하는 프로그램에 관한 것으로, HTML 편집기를 위지윅 방식으로 구현함에 있어, 사용자가 웹 페이지에 대한 편집을 수행하는 HTML 수행 화면과, 편집의 결과인 해당 웹 페이지의 실행 화면을 동기화하는 방법 및 프로그램에 관한 기술이다. Various embodiments of the present invention relate to a method for synchronizing an HTML execution screen and an edit screen using a tag and a program for implementing the same. In implementing the HTML editor in a Wiziwick manner, a user edits a web page. The present invention relates to a method and a program for synchronizing an execution screen of an HTML execution screen to be executed and a corresponding execution page of a corresponding web page.

인터넷이 사람들의 생활에 중요한 부분이 되어가면서, 하루에도 수많은 새로운 홈페이지들이 개설되고 있다. 홈페이지를 생성하기 위해서는 프로그래밍 언어로 작성된 웹 문서를 작성하여야 하는데, 월드 와이드 웹(WWW: World Wide Web)을 통해 볼 수 있는 웹 문서를 만들 때 사용되는 프로그래밍 언어의 하나인 HTML(Hypertext Markup Language)이 가장 널리 사용되고 있다. HTML 언어를 통해 웹 페이지를 만들기 위해서는 HTML에서 사용하는 명령어를 이용하여 문서를 작성하여야 한다. 이에, HTML 명령어에 익숙하지 않거나, HTML 명령어를 사용하여 문서를 작성하는데 불편함을 느끼는 사람들을 위해서 위지윅(WYSIWYG: What You See Is What You Get) 방식의 웹 에디터들이 개발되었다. 위지윅 방식의 웹 에디터를 사용하면, 사용자가 화면의 구성, 텍스트의 색상과 크기와 같은 형태, 이미지의 위치 등 웹 페이지를 구성하는 요소들을 직접 보면서 조절할 수 있으며, 웹 에디터는 사용자가 이와 같이 웹 페이지의 구성 요소들을 조절함에 따라 그에 대응되는, HTML 명령어로 이루어진 문서를 생성하는 역할을 수행하였다.As the Internet becomes an important part of people's lives, many new homepages are being opened every day. To create a homepage, you must write a web document written in a programming language. The Hypertext Markup Language (HTML) is one of the programming languages used to create web documents that can be viewed through the World Wide Web (WWW). Most widely used. In order to create a web page through the HTML language, the document must be written using the commands used in HTML. Therefore, WYSIWYG (What You See Is What You Get) web editors have been developed for those who are unfamiliar with HTML commands or who are uncomfortable writing documents using HTML commands. With the WiGiwick style web editor, users can view and adjust the elements that make up a web page, such as the composition of the screen, the shape and size of text, and the location of images. As the components of the were adjusted, the corresponding document was composed of HTML commands.

다만, 기존의 위지윅 방식의 웹 에디터들을 이용하더라도 웹 페이지의 편집 화면이 실행 화면과 유사할 뿐, 완전히 동일하지 않은 경우가 발생하였다. 텍스트와 이미지 정도만으로 구성된 간단한 웹 페이지들은 편집 화면과 실행 화면이 동일하게 표시되었으나, 최근의 웹 페이지들은 풍부하고 다양한 효과를 내기 위해 자바스크립트(Javascript)와 CSS(Cascading Style Sheets)를 포함하고 있고, 이에 따라 편집 화면과 실행 화면에 차이가 발생하기 시작하였다. 자바스크립트는 웹 페이지의 다양한 동작을 담당하며, CSS는 텍스트의 색깔, 폰트 등과 같은 디자인 요소를 담당한다. 웹 페이지의 실행 화면에서는 HTML 명령어와 연동되어 있는 자바스크립트가 실행되고, CSS가 적용되므로 편집 화면과 실행 화면에 차이가 발생하였는데, 이와 같은 차이로 인해 웹 페이지를 편집함에 있어 직관성 부분에서 어려움이 있는 실정이었다.However, even when the existing Wiziwick-type web editors are used, the edit screen of the web page is similar to the execution screen and is not exactly the same. Simple web pages consisting of text and images are displayed in the same edit screen and execution screen, but recent web pages include JavaScript and Cascading Style Sheets (CSS) for rich and varied effects. As a result, a difference began to occur between the edit screen and the execution screen. JavaScript is responsible for the various behaviors of a web page, while CSS is responsible for design elements such as the color and font of text. In the execution screen of the web page, the JavaScript that is linked to the HTML command is executed, and CSS is applied, so there is a difference between the editing screen and the execution screen. Due to this difference, there is a difficulty in intuition in editing the web page. It was a situation.

이와 같이, 자바스크립트와 CSS의 적용으로 인해 편집 과정에서의 HTML 문서 내용과 실행 과정에서의 HTML 문서 내용이 상이해짐에 따라, 웹 페이지의 편집 화면과 실행 화면의 동기화를 이루는 것이 쉽지 않은 실정이었다. 따라서, 웹 페이지의 편집 화면과 실행 화면의 보다 정밀한 동기화를 이룰 수 있는 기술의 개발이 필요한 상황이었다.As described above, as the application of JavaScript and CSS differs between the content of the HTML document in the editing process and the content of the HTML document in the execution process, it is difficult to achieve synchronization between the edit screen of the web page and the execution screen. Therefore, there was a need for the development of a technology capable of more precise synchronization between the edit screen of the web page and the execution screen.

국내공개특허 제10-2015-0136310호Domestic Publication No. 10-2015-0136310

본 발명의 다양한 실시예는 상기와 같은 문제점을 해결하기 위해 도출된 것으로, 웹 페이지의 편집 화면과 실행 화면을 동기화하는 것을 목적으로 한다.Various embodiments of the present invention are derived to solve the above problems, and an object thereof is to synchronize an edit screen and an execution screen of a web page.

본 발명의 다른 목적은 웹 페이지에 새로운 객체를 추가시키는 경우에도 별도의 추가 코딩 작업 없이 동기화를 가능하게 하는 것이다.Another object of the present invention is to enable synchronization without additional coding work even when adding a new object to a web page.

본 발명이 해결하고자 하는 과제들은 이상에서 언급된 과제로 제한되지 않으며, 언급되지 않은 또 다른 과제들은 아래의 기재로부터 통상의 기술자에게 명확하게 이해될 수 있을 것이다.Problems to be solved by the present invention are not limited to the above-mentioned problems, and other problems not mentioned will be clearly understood by those skilled in the art from the following description.

상기와 같은 목적을 달성하기 위해, 본 발명의 일 실시예는 위지윅(WYSIWYG) 기반 웹 에디터 프로그램이 편집 화면과 실행 화면을 동기화시키는 방법에 있어서, 소스 코드를 생성한 후, 상기 소스 코드를 통해 베이스 돔(DOM: Document Object Model)을 생성하며, 상기 베이스 돔 내에 존재하는 컴포넌트 별 인식표를 부여하는 단계; 상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하고, 상기 뷰 돔을 이용하여 편집 화면을 제1 레이어의 형태로 생성하는 단계; 상기 편집 화면 상에서 상기 제1 레이어와 영역의 적어도 일부가 겹치는 제2 레이어를 위치시키고, 상기 제2 레이어를 통해 사용자의 입력 정보를 수신하는 단계; 상기 사용자의 입력 정보가 가리키는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하고, 제1 컴포넌트에 부여된 인식표를 이용하여 제1 컴포넌트와 매칭되는 상기 베이스 돔 내의 제2 컴포넌트를 특정하는 단계; 및 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 단계를 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법을 제공한다.In order to achieve the above object, according to an embodiment of the present invention, a WYSIWYG-based web editor program synchronizes an edit screen and an execution screen, and generates a source code and then generates a base through the source code. Generating a document object model (DOM) and assigning a tag per component existing in the base dome; Generating a view DOM by applying JavaScript or CSS to the base dome, and generating an edit screen in the form of a first layer using the view dome; Placing a second layer on which the at least part of the first layer and the region overlap on the edit screen, and receiving user input information through the second layer; Specifying information of a first component indicated by the input information of the user in the view dome, and specifying a second component in the base dome that matches the first component by using an identification tag assigned to the first component; And modifying information of the second component specified in the base dome according to the input information of the user.

상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하는 단계는, 아이프레임(Iframe)을 통해 이루어지는 것일 수 있다.Generating a view DOM by applying JavaScript or CSS to the base dome may be performed through an Iframe.

상기 웹 에디터 프로그램의 화면 동기화 수행 방법은 상기 사용자의 입력 정보가 지시하는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하여 상기 사용자의 입력 정보에 따라 수정하기 전, 상기 사용자의 입력 정보에 대응되는 동작을 상기 제2 레이어 상에서 표시하는 단계를 더 포함할 수 있다.The method of performing screen synchronization of the web editor program may correspond to the input information of the user before specifying information of a first component indicated by the input information of the user in the view dome and modifying the information according to the input information of the user. The method may further include displaying an operation on the second layer.

상기 웹 에디터 프로그램의 화면 동기화 수행 방법은 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 단계가 수행된 후에, 상기 베이스 돔의 수정 정보를 반영하여 제2 컴포넌트와 매칭되는 상기 뷰 돔 내의 제1 컴포넌트의 정보를 수정하는 단계를 더 포함할 수 있다.In the method of performing screen synchronization of the web editor program, after modifying information of the second component specified in the base dome according to the input information of the user, the second component is reflected by reflecting the modification information of the base dome. And modifying information of the first component in the view dome that matches.

상기 웹 에디터 프로그램의 화면 동기화 수행 방법은 상기 뷰 돔 내의 제1 컴포넌트가 수정된 후, 상기 뷰 돔의 수정된 정보를 통해 상기 제1 레이어의 내용을 수정하는 단계를 더 포함할 수 있다.The method of performing screen synchronization of the web editor program may further include modifying contents of the first layer through the modified information of the view dome after the first component in the view dome is modified.

상기 인식표는 자바스크립트 또는 CSS의 적용에 의해 변화하지 않는 것을 특징으로 할 수 있다.The tag may be characterized in that it does not change by the application of JavaScript or CSS.

상기와 같은 목적을 달성하기 위해, 본 발명의 다른 실시예는 편집 화면과 실행 화면의 동기화를 수행하는 위지윅(WYSIWYG) 기반 웹 에디터 프로그램에 있어서, 소스 코드를 생성한 후, 상기 소스 코드를 통해 베이스 돔(DOM: Document Object Model)을 생성하는 베이스 돔 관리 모듈; 상기 베이스 돔 내에 존재하는 컴포넌트 별 인식표를 부여하는 인식표 부여 모듈; 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하는 뷰 돔 관리 모듈; 상기 뷰 돔을 이용하여 편집 화면을 제1 레이어의 형태로 생성하는 뷰 레이어 관리 모듈; 상기 편집 화면 상에서 상기 제1 레이어와 영역의 적어도 일부가 겹치는 제2 레이어를 위치시키고, 상기 제2 레이어를 통해 사용자의 입력 정보를 수신하는 디자인 레이어 관리 모듈; 및 상기 사용자의 입력 정보가 가리키는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하고, 제1 컴포넌트에 부여된 인식표를 이용하여 제1 컴포넌트와 매칭되는 상기 베이스 돔 내의 제2 컴포넌트를 특정하며, 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 동기화 수행 모듈을 실행하기 위하여 매체에 저장된, 웹 에디터 프로그램 제공한다.In order to achieve the above object, another embodiment of the present invention is a WYSIWYG-based web editor program for performing synchronization of the edit screen and the execution screen, after generating the source code, the base through the source code A base dome management module for generating a document object model (DOM); A identification tag assignment module for assigning a identification tag for each component existing in the base dome; A view dome management module generating a view DOM by applying JavaScript or CSS to the base dome; A view layer management module for generating an edit screen in the form of a first layer using the view dome; A design layer management module for locating a second layer on which the first layer and at least a portion of the region overlap on the edit screen, and receiving user input information through the second layer; And specifying information of a first component indicated by the input information of the user in the view dome, and specifying a second component in the base dome that matches the first component by using an identification tag assigned to the first component. A web editor program stored in a medium for executing a synchronization performing module that modifies information of a second component specified in the base dome according to user input information is provided.

상기 뷰 레이어 관리 모듈 및 디자인 레이어 관리 모듈은 아이프레임 관리 모듈에 포함되며, 상기 뷰 돔 관리 모듈은 상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔을 생성함에 있어 아이프레임 관리 모듈이 관리하는 아이프레임을 이용할 수 있다.The view layer management module and the design layer management module are included in an iframe management module, and the view dome management module is an eye frame managed by an iframe management module in generating view domes by applying JavaScript or CSS to the base dome. Frames are available.

상기 동기화 수행 모듈은 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정한 후에, 상기 베이스 돔의 수정 정보를 반영하여 제2 컴포넌트와 매칭되는 상기 뷰 돔 내의 제1 컴포넌트의 정보를 수정할 수 있다.The synchronization performing module corrects the information of the second component specified in the base dome according to the input information of the user, and then reflects the modification information of the base dome to match the first component in the view dome. You can modify the information of the component.

상기 뷰 레이어 관리 모듈은, 상기 동기화 수행 모듈이 상기 뷰 돔 내의 제1 컴포넌트를 수정한 후 상기 뷰 돔의 수정된 정보를 통해 상기 제1 레이어의 내용을 수정할 수 있다.The view layer management module may modify the content of the first layer through the modified information of the view dome after the synchronization performing module modifies the first component in the view dome.

본 발명의 일 실시예에 따르면, 웹 페이지의 편집 화면에서도 자바스크립트 또는 CSS가 적용된 화면이 표시되어 편집 화면과 실행 화면을 보다 정확하게 동기화할 수 있다.According to an embodiment of the present invention, a screen to which JavaScript or CSS is applied is displayed on the edit screen of the web page, so that the edit screen and the execution screen can be more accurately synchronized.

본 발명의 일 실시예에 따르면, 웹 에디터 프로그램의 사용자는 실행 화면을 직접 편집하는 것과 같은 기능을 통해, 웹 페이지 개발에 있어서 직관성을 획득할 수 있다.According to an embodiment of the present invention, a user of the web editor program may acquire intuition in developing a web page through a function such as directly editing an execution screen.

본 발명의 일 실시예에 따르면, 웹 페이지의 편집 화면과 실행 화면이 동기화 되어 개발 생산성이 향상되는 효과가 발생할 수 있다.According to an embodiment of the present invention, the edit screen and the execution screen of the web page are synchronized, so that the development productivity may be improved.

본 발명의 효과들은 이상에서 언급된 효과로 제한되지 않으며, 언급되지 않은 또 다른 효과들은 아래의 기재로부터 통상의 기술자에게 명확하게 이해될 수 있을 것이다.Effects of the present invention are not limited to the above-mentioned effects, and other effects not mentioned will be clearly understood by those skilled in the art from the following description.

도 1은 본 발명의 일 실시예에 따른 웹 브라우저가 동작하는 기본 환경 및 원리에 대해 간략하게 표시된 블록도이다.
도 2는 본 발명의 일 실시예에 따른 웹 에디터 프로그램의 편집 기능을 설명하기 위한 간략한 블록도이다.
도 3은 본 발명의 일 실시예에 따른 웹 에디터 프로그램의 구성을 모듈별로 간략히 표시한 블록도이다.
도 4는 본 발명의 일 실시예에 따른 웹 에디터 프로그램이 동작하는 과정을 나타낸 흐름도이다.1 is a simplified block diagram of the basic environment and principles of operation of a web browser in accordance with one embodiment of the present invention.
2 is a simplified block diagram illustrating an editing function of a web editor program according to an embodiment of the present invention.
3 is a block diagram briefly displaying the structure of a web editor program for each module according to an embodiment of the present invention.
4 is a flowchart illustrating a process of operating a web editor program according to an embodiment of the present invention.

본 명세서에서 사용된 용어는 실시예들을 설명하기 위한 것이며 본 발명을 제한하고자 하는 것은 아니다. 본 명세서에서, 단수형은 문구에서 특별히 언급하지 않는 한 복수형도 포함한다. 명세서에서 사용되는 "포함한다(comprises)" 및/또는 "포함하는(comprising)"은 언급된 구성요소 외에 하나 이상의 다른 구성요소의 존재 또는 추가를 배제하지 않는다. 명세서 전체에 걸쳐 동일한 도면 부호는 동일한 구성 요소를 지칭하며, "및/또는"은 언급된 구성요소들의 각각 및 하나 이상의 모든 조합을 포함한다. 비록 "제1", "제2" 등이 다양한 구성요소들을 서술하기 위해서 사용되나, 이들 구성요소들은 이들 용어에 의해 제한되지 않음은 물론이다. 이들 용어들은 단지 하나의 구성요소를 다른 구성요소와 구별하기 위하여 사용하는 것이다. 따라서, 이하에서 언급되는 제1 구성요소는 본 발명의 기술적 사상 내에서 제2 구성요소일 수도 있음은 물론이다.The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. In this specification, the singular also includes the plural unless specifically stated otherwise in the phrase. As used herein, “comprises” and / or “comprising” does not exclude the presence or addition of one or more other components in addition to the mentioned components. Like reference numerals refer to like elements throughout, and "and / or" includes each and all combinations of one or more of the mentioned components. Although "first", "second", etc. are used to describe various components, these components are of course not limited by these terms. These terms are only used to distinguish one component from another. Therefore, of course, the first component mentioned below may be the second component within the technical spirit of the present invention.

명세서 전체에서 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 "...부", "모듈" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.When any part of the specification is to "include" any component, this means that it may further include other components, except to exclude other components unless specifically stated otherwise. In addition, the terms "... unit", "module", etc. described in the specification mean a unit that processes at least one function or operation, which may be implemented by hardware or software or a combination of hardware and software. .

본 발명은 위지윅(WYSIWYG: What You See Is What You Get) 방식의 웹 에디터 프로그램을 개시한다. 위지윅 방식이란, 사용자의 편집 화면과 편집된 웹 페이지의 실행 화면이 동일하도록 하는 방식을 뜻할 수 있다. 즉, 웹 에디터의 사용자는 복잡한 프로그래밍 언어로 구성된 파일을 편집하는 것이 아닌, 자신이 원하는 최종 결과물인 웹 페이지의 실행 화면과 유사한 구성을 지닌 편집 화면을 통해 웹 페이지의 생성 및 수정을 수행할 수 있고, 웹 페이지 실행 시에 자신이 구성한 편집화면과 동일한 형태의 실행 화면을 기대할 수 있다.The present invention discloses a web editor program of the WYSIWYG method. The Wiziwicking method may mean a method in which the edit screen of the user and the execution screen of the edited web page are the same. That is, the user of the web editor can create and modify the web page through the edit screen similar to the execution screen of the web page, which is the end result desired by the user, rather than editing a file composed of a complicated programming language. When executing a web page, one can expect an execution screen of the same type as the edit screen configured by the user.

본 명세서 상에서 개시되는 웹 에디터 프로그램은 다양한 종류의 웹 프로그래밍 언어를 지원할 수 있다. 예를 들어, 웹 에디터 프로그램은 PHP, JSP, ASP, HTML, XML, LaTeX, pTeX 등의 프로그래밍 언어를 지원할 수 있다. 다만, 설명의 편의를 위해 본 명세서 상의 웹 에디터 프로그램은 HTML 언어를 사용하여 웹 페이지를 생성하는 것으로 가정하여 기술하기로 하나, 본 발명의 범위가 이에 제한되지 않음은 물론이다.The web editor program disclosed herein may support various kinds of web programming languages. For example, a web editor program can support programming languages such as PHP, JSP, ASP, HTML, XML, LaTeX, and pTeX. However, for convenience of description, the web editor program on the present specification will be described assuming that a web page is generated using an HTML language, but the scope of the present invention is not limited thereto.

이하, 본 명세서에 첨부된 도면을 참조로 하여 발명의 상세한 내용을 기술하기로 한다.Hereinafter, the details of the invention will be described with reference to the accompanying drawings.

도 1은 본 발명의 일 실시예에 따른 웹 브라우저가 동작하는 기본 환경 및 원리에 대해 간략하게 표시된 블록도이다.1 is a simplified block diagram of the basic environment and principles of operation of a web browser in accordance with one embodiment of the present invention.

사용자가 본 발명의 웹 에디터 프로그램을 이용하여 편집 화면에서 웹 페이지의 형태를 생성하고 이를 수정함에 따라, 웹 에디터 프로그램은 해당 편집 화면에 알맞은 소스 코드를 HTML 언어를 통해 생성할 수 있으며 이를 파일화 하여 HTML 소스 파일(10)의 형태로 생성할 수 있다.As a user creates and modifies the form of a web page in an edit screen using the web editor program of the present invention, the web editor program can generate a source code suitable for the edit screen through an HTML language and file it. It may be generated in the form of an HTML source file 10.

이후 웹 브라우저는 HTML 파일을 로드(Load)하여 베이스 돔(DOM: Document Object Model)(100)을 생성할 수 있다. 웹 에디터 프로그램은 웹 브라우저의 기능을 내부에 포함할 수 있다. 돔이란, 웹 브라우저가 로드하여 메모리로 적재한 HTML 소스 파일을 관리하는 객체 또는 인터페이스 API를 의미한다. 본 발명의 웹 에디터 프로그램은 이와 같은 돔을 통해서 HTML 소스 파일에 접근하여 이를 수정하고 저장할 수 있다. 웹 브라우저가 HTML 소스 파일을 이용하여 생성하는 베이스 돔(100)은 HTML 소스 코드를 조작하는데 이용되는 돔으로, 소스 코드와 밀접한 연관을 지닐 수 있다. 즉, 베이스 돔(100)이 수정되면 그에 따라 베이스 돔(100)과 연계된 소스 코드가 수정될 수 있다.Thereafter, the web browser may load the HTML file to generate a base document object model (DOM) 100. The web editor program may include the functionality of a web browser therein. Dome refers to an object or interface API that manages HTML source files loaded by a web browser into memory. The web editor program of the present invention can access, modify, and save HTML source files through such a dome. The base dome 100 generated by the web browser using the HTML source file is a dome used to manipulate HTML source code and may be closely associated with the source code. That is, when the base dome 100 is modified, the source code associated with the base dome 100 may be modified accordingly.

본 발명의 일 실시예에 따르면, 복수 개의 돔이 생성되어 동작할 수 있다. 전술한 바와 같이, 베이스 돔(100)은 소스 코드를 포함하고 있는 소스 파일이 메모리 상에 로드되면서 생성되며, 웹 에디터 프로그램은 베이스 돔(100)을 토대로 하여 뷰 돔(View DOM)(200)을 생성할 수 있다. According to an embodiment of the present invention, a plurality of domes may be generated and operated. As described above, the base dome 100 is generated while the source file containing the source code is loaded on the memory, and the web editor program creates the view dome 200 based on the base dome 100. Can be generated.

일 실시예에 따른 뷰 돔(200)은 웹 페이지가 실행될 때의 실행화면을 반영한 돔일 수 있다. 뷰 돔(200)은 웹 페이지의 편집 화면에서 사용자가 웹 페이지 내의 컴포넌트와 같은 구성을 조작할 수 있도록 한다. 본 명세서 상에서 컴포넌트란, 소스 코드 또는 이를 통해 구현된 웹 페이지 상에서 식별 가능한 일부분으로 특정 기능이나 관련된 기능들의 조합을 제공하는 단위를 의미할 수 있다. 즉, 베이스 돔(100)은 소스 코드와 관계되어 있다면, 뷰 돔(200)은 웹 페이지를 나타내는 화면과 관계된다. 사용자의 웹 페이지 상에서의 동작에 따라 뷰 돔(200)이 수정되면, 그에 따라 웹 페이지 화면이 수정될 수 있다.The view dome 200 may be a dome reflecting an execution screen when a web page is executed. The view dome 200 allows a user to manipulate a configuration, such as a component within a web page, in an edit screen of the web page. In the present specification, a component may refer to a unit that provides a specific function or a combination of related functions as part identifiable on a source code or a web page implemented through the same. That is, if the base dome 100 is related to the source code, the view dome 200 is related to the screen representing the web page. When the view dome 200 is modified according to the user's operation on the web page, the web page screen may be modified accordingly.

일 실시예에 따르면, 뷰 돔(200)은 베이스 돔(100)을 기반으로 생성되지만, 뷰 돔(100) 상에는 자바스크립트(Javascript)와 CSS(Cascading Style Sheets)가 추가적으로 적용되며, 그에 따라 베이스 돔(100)과 뷰 돔(200) 사이의 차이가 발생할 수 있다. 상세하게는, 뷰 돔(200)에 자바스크립트 또는 CSS가 적용됨에 따라 베이스 돔(100)이 포함하지 않았던, 데이터베이스 내의 추가적인 데이터가 바인딩(Binding)되면서 베이스 돔(100)과 뷰 돔(200) 사이의 차이가 발생할 수 있다.According to an embodiment, the view dome 200 is generated based on the base dome 100, but additionally, JavaScript and Cascading Style Sheets (CSS) are additionally applied on the view dome 100. Differences between the 100 and the view dome 200 may occur. Specifically, as JavaScript or CSS is applied to the view dome 200, additional data in the database, which the base dome 100 does not include, is bound between the base dome 100 and the view dome 200. Difference may occur.

웹 에디터 프로그램이 처음으로 베이스 돔(100)을 통해 웹 페이지의 편집 화면을 생성할 때에, 화면에 표시되는 편집 화면에 대응되는 뷰 돔(200)이 생성될 수 있다. 일 실시예에 따르면, 이와 같이 뷰 돔(200)이 생성되는 과정은 아이프레임(Iframe)(300)을 통해 이루어질 수 있다. 아이프레임(300)이란, 웹 프로그래밍 언어로 구성된 웹 페이지 내의 임의 위치에 또 다른 웹 페이지를 보여주는 내부 프레임 태그를 의미할 수 있다.When the web editor program generates an edit screen of a web page for the first time through the base dome 100, the view dome 200 corresponding to the edit screen displayed on the screen may be generated. According to an embodiment, the process of generating the view dome 200 may be performed through an Iframe 300. The iframe 300 may refer to an internal frame tag that shows another web page at an arbitrary position in the web page composed of a web programming language.

사용자에게 보여지는 웹 페이지의 화면은 복수개의 레이어로 이루어질 수 있다. 본 명세서 상에서는 사용자가 접하는 편집 화면이 제1 레이어와 제2 레이어로 구분되어 지칭될 수 있으며, 편집 화면인 제1 레이어는 뷰 레이어(View Layer)(310)로, 제2 레이어는 디자인 레이어(Design Layer)(320)로 지칭될 수 있다.The screen of the web page shown to the user may be composed of a plurality of layers. In the present specification, an editing screen touched by a user may be referred to as being divided into a first layer and a second layer. The first layer, which is an editing screen, is a view layer 310, and the second layer is a design layer. Layer 320 may be referred to.

본 발명의 일 실시예에 따르면, 뷰 레이어(310)는 제1 레이어로서 웹 페이지의 편집 화면을 나타낼 수 있으며, 처음 생성 단계에서는 베이스 돔(100)을 통해서 생성이 되고 이후에는 뷰 돔(200)과 연계되어 동작할 수 있다. 디자인 레이어(320)는 제2 레이어로서 뷰 레이어(310)와 영역의 적어도 일부가 겹치는 형태로 위치할 수 있다. 디자인 레이어(320)는 사용자가 키보드 또는 마우스 등과 같은 입력 도구를 이용하여 입력을 수행하면, 입력에 따라 선택된 컴포넌트와 입력이 가리키는 명령 등에 따라 알맞은 화면 효과를 디자인 레이어(320) 내에서 표시하는 것과 같은 역할을 수행할 수 있다.According to an embodiment of the present invention, the view layer 310 may represent an edit screen of a web page as a first layer, and is generated through the base dome 100 in the first generation step, and then the view dome 200. Can operate in conjunction with The design layer 320 may be positioned as a second layer in such a manner that at least a portion of the view layer 310 and the region overlap each other. When the user performs input using an input tool such as a keyboard or a mouse, the design layer 320 may display a suitable screen effect in the design layer 320 according to a component selected according to the input and a command indicated by the input. Can play a role.

도 2는 본 발명의 일 실시예에 따른 웹 에디터 프로그램의 편집 기능을 설명하기 위한 간략한 블록도이다.2 is a simplified block diagram illustrating an editing function of a web editor program according to an embodiment of the present invention.

도 2를 참조하면, HTML 소스 코드가 포함되어 있는 파일을 통해 생성된 베이스 돔(100)과, 베이스 돔(100)에 자바스크립트 및 CSS를 적용킨 뷰 돔(200)이 존재하며, 뷰 돔(200)의 변화에 따라 편집 화면인 뷰 레이어(310)가 변화할 수 있다. 도 1을 통해 전술한 것과 같이, 디자인 레이어(320)는 뷰 레이어(310)와 겹치는 영역에 위치할 수 있다.Referring to FIG. 2, there is a base dome 100 generated through a file including HTML source code, and a view dome 200 in which JavaScript and CSS are applied to the base dome 100. According to the change of 200, the view layer 310, which is an edit screen, may change. As described above with reference to FIG. 1, the design layer 320 may be located in an area overlapping the view layer 310.

웹 에디터 프로그램은 HTML 소스 코드가 포함된 파일 정보를 토대로 베이스 돔(100)을 구성하고, 여기에 웹 페이지가 실행되면서 필요한 자바스크립트, CSS 및 기타 데이터를 적용하여 뷰 돔(200)을 구성할 수 있다. 뷰 레이어(310)는 소스 파일에 포함된 코드 정보를 도 2에서와 같이 뷰 돔(200)을 통해서 직접 수신할 수 있다. The web editor program configures the base dome 100 based on the file information including the HTML source code, and configures the view dome 200 by applying JavaScript, CSS, and other data necessary as the web page is executed. have. The view layer 310 may directly receive the code information included in the source file through the view dome 200 as shown in FIG. 2.

웹 에디터 프로그램은 HTML 소스 파일(10)를 통해 베이스 돔(100)을 생성할 시점에, 베이스 돔(100) 내 존재하는 각 컴포넌트 별로 인식표를 부여할 수 있다. 이와 같은 인식표를 통해 웹 에디터 프로그램은 추후 뷰 돔(200) 내에 존재하는 컴포넌트와 베이스 돔(100) 내에 존재하는 컴포넌트를 매칭시킬 수 있다. 일 실시예에 따르면, 웹 에디터 프로그램이 베이스 돔(100) 내 존재하는 각 컴포넌트 별로 부여하는 인식표는 자바스크립트 또는 CSS의 적용이나 데이터베이스로부터의 추가 데이터 바인딩으로 인해 영향받지 않아야 한다. 즉, 인식표는 베이스 돔(100)을 통해 뷰 돔(200)이 구축되는 과정에서 자바스크립트 또는 CSS의 적용, 이에 따른 추가 데이터의 바인딩 등 다양한 상황에서도 변화하지 않아야 한다.When the web editor program generates the base dome 100 through the HTML source file 10, the web editor program may assign a recognition tag to each component existing in the base dome 100. Through the identification tag, the web editor program may later match components existing in the view dome 200 and components existing in the base dome 100. According to one embodiment, the dog tag assigned to each component present in the base dome 100 should not be affected by the application of JavaScript or CSS or by additional data binding from the database. That is, the identification tag should not change even in various situations such as the application of JavaScript or CSS and the binding of additional data according to the process of building the view dome 200 through the base dome 100.

웹 에디터 프로그램의 사용자는 뷰 레이어(310)를 자신의 단말기 화면에서 확인하고, 웹 페이지에 대한 편집을 수행할 수 있다. 사용자가 뷰 레이어(310)에서 표시되는 컴포넌트를 선택하면, 웹 에디터 프로그램은 뷰 돔(200) 상에서 사용자가 선택한 컴포넌트의 정보를 확인한 후, 해당 컴포넌트와 매칭되는 컴포넌트를 베이스 돔(100) 상에서 탐색할 수 있다. 웹 에디터 프로그램의 컴포넌트 탐색은 전술한 인식표를 이용하는 방식으로 수행될 수 있다. 예를 들어, 웹 에디터 프로그램은 사용자가 선택한 제1 컴포넌트의 정보를 뷰 돔(200) 내에서 특정하고, 제1 컴포넌트에 부여되어 있는 인식표의 정보를 확인한 후에, 인식표가 포함하고 있는 정보를 통해 제1 컴포넌트와 매칭되는 제2 컴포넌트를 베이스 돔(100)내에서 탐색하고 특정할 수 있다.The user of the web editor program may check the view layer 310 on his or her terminal screen and edit the web page. When the user selects a component displayed in the view layer 310, the web editor program checks the information of the component selected by the user on the view dome 200, and then searches for a component matching the corresponding component on the base dome 100. Can be. Component search of the web editor program may be performed in a manner using the aforementioned identification table. For example, the web editor program specifies the information of the first component selected by the user in the view dome 200, checks the information of the identification tag assigned to the first component, and then, through the information included in the identification tag, A second component that matches the first component may be searched for and specified within the base dome 100.

웹 에디터 프로그램의 사용자가 뷰 레이어(310)와 디자인 레이어(320)가 나타나는 화면 상에서 특정 컴포넌트를 선택하면, 웹 에디터 프로그램은 사용자가 뷰 돔(200)에서 선택한 컴포넌트에 부여된 인식표를 이용하여, 해당 컴포넌트와 매칭되는 컴포넌트를 베이스 돔(100)에서 특정할 수 있다. 예를 들어, 사용자가 특정 컴포넌트를 선택하여 이동 시키면, 웹 에디터 프로그램은 베이스 돔(100)에서 특정한 컴포넌트의 위치를 이동시킬 수 있다. 사용자가 특정 컴포넌트를 선택할 경우, 디자인 레이어(320) 상에는 사용자가 선택한 컴포넌트의 좌표와 위치 정보를 토대로 한 외곽선이 표시될 수 있다. 또한, 사용자가 선택한 컴포넌트를 이동시키는 동작이나 삭제하는 동작에 대한 입력을 수행하면, 디자인 레이어(320) 상에는 해당하는 동작이 표시될 수 있다.When the user of the web editor program selects a specific component on the screen in which the view layer 310 and the design layer 320 appear, the web editor program uses the identification tag assigned to the component selected by the user in the view dome 200. A component that matches the component may be specified in the base dome 100. For example, when a user selects and moves a specific component, the web editor program may move the position of the specific component in the base dome 100. When the user selects a specific component, an outline based on the coordinates and location information of the component selected by the user may be displayed on the design layer 320. In addition, when an input for an operation of moving or deleting a component selected by a user is performed, a corresponding operation may be displayed on the design layer 320.

사용자가 편집 화면 상에서 특정 컴포넌트를 선택하고 이에 대한 동작을 입력하면, 웹 에디터 프로그램은 전술한 바와 같이 인식표를 이용하여 뷰 돔(200) 상에서 선택된 컴포넌트와 매칭되는 컴포넌트를 베이스 돔(100) 상에서 탐색할 수 있고, 베이스 돔(100) 내에서 특정된 컴포넌트를 수정할 수 있다. 이후, 웹 에디터 프로그램은 베이스 돔(100) 내에서 특정된 컴포넌트의 변화에 따라 베이스 돔(100)이 변경되면, 변경된 베이스 돔(100)의 정보를 뷰 돔(200)에 반영할 수 있다. 뷰 돔(200)에 이와 같은 정보가 반영되면, 뷰 레이어(310)는 반영된 정보에 따라 변경된 정보를 표시할 수 있다.When the user selects a specific component on the edit screen and inputs an operation for it, the web editor program searches for a component on the base dome 100 that matches the component selected on the view dome 200 using the identification tag as described above. And may modify components specified within the base dome 100. Thereafter, the web editor program may reflect the changed information of the base dome 100 to the view dome 200 when the base dome 100 is changed according to the change of a component specified in the base dome 100. When such information is reflected in the view dome 200, the view layer 310 may display changed information according to the reflected information.

이와 같이, 본 발명의 웹 에디터 프로그램이 인식표를 이용하여 베이스 돔(100)과 뷰 돔(200)의 동기화를 수행함에 따라, 사용자는 뷰 레이어(100)에 표시되는 웹 페이지의 편집 화면 상에서 실제 실행 화면과 같은 환경으로 편집을 수행할 수 있다. 뷰 레이어(100)에 표시되는 웹 페이지의 편집 화면은 베이스 돔(100)이 아닌 뷰 돔(200)과 연동되고 구현되고 있기 때문에, 자바스크립트나 CSS가 적용되어 외부의 데이터베이스의 각종 데이터가 바인딩된 상태이고, 그에 따라 웹 페이지의 작성 및 편집이 완료되고 웹 상에서 타 사용자들이 접속하여 보는 실행 화면과 동일한 편집 화면이 사용자에게 제공될 수 있다.As described above, as the web editor program of the present invention synchronizes the base dome 100 and the view dome 200 using the identification table, the user actually executes on the edit screen of the web page displayed on the view layer 100. Editing can be done in the same environment as the screen. Since the edit screen of the web page displayed on the view layer 100 is linked to and implemented with the view dome 200 instead of the base dome 100, various data of an external database are bound by applying JavaScript or CSS. As a result, the creation and editing of the web page is completed, and the same editing screen as the execution screen that other users access and view on the web may be provided to the user.

이와 같이, 인식표를 사용하여 베이스 돔(100)과 뷰 돔(200)의 동기화를 수행하면 웹 페이지 편집시에 특이한 컴포넌트가 추가되어도 별도의 맞춤형 작업 없이 신규 인식표만을 생성하여 부여하면 되어서 동기화 시스템 구축후에 관리가 용이하다. 즉, 각각의 컴포넌트의 특징을 통해 컴포넌트를 검색하여 특정하는 것이 아니기 때문에, 컴포넌트의 특징 정보를 관리할 필요가 없으며 안정적으로 컴포넌트들에 대한 검색이 가능할 수 있다.As such, when the base dome 100 and the view dome 200 are synchronized by using the identification tag, even if an unusual component is added when editing a web page, only a new identification tag may be generated and assigned without additional custom work. Easy to manage That is, since the component is not searched and specified through the feature of each component, it is not necessary to manage the feature information of the component and it is possible to stably search for the components.

도 3은 본 발명의 일 실시예에 따른 웹 에디터 프로그램(400)의 구성을 모듈별로 간략히 표시한 블록도이다.3 is a block diagram briefly displaying the configuration of a web editor program 400 according to an embodiment of the present invention.

도 3을 참조하면, 웹 에디터 프로그램(400)은 베이스 돔 관리 모듈(410), 뷰 돔 관리 모듈(420), 뷰 레이어 관리 모듈(430), 디자인 레이어 관리 모듈(440), 인식표 부여 모듈(450), 동기화 수행 모듈(460) 및 제어 모듈(470)을 포함하여 구성될 수 있다.Referring to FIG. 3, the web editor program 400 may include a base dome management module 410, a view dome management module 420, a view layer management module 430, a design layer management module 440, and a tag assignment module 450. ), And a synchronization performing module 460 and a control module 470.

베이스 돔 관리 모듈(410)은 HTML 소스 코드를 포함하고 있는 소스 파일을 바탕으로 베이스 돔(100)을 생성하고 관리할 수 있다. 베이스 돔(100)은 복수의 컴포넌트를 포함할 수 있으며, 사용자가 웹 에디터 프로그램(400)을 통해 웹 페이지의 편집을 수행하면 그에 따라 베이스 돔(100)의 내용이 수정될 수 있다.The base dome management module 410 may generate and manage the base dome 100 based on a source file including HTML source code. The base dome 100 may include a plurality of components, and when a user edits a web page through the web editor program 400, the contents of the base dome 100 may be modified accordingly.

뷰 돔 관리 모듈(420)은 베이스 돔(100)에 자바스크립트 또는 CSS를 적용하여 뷰 돔(200)을 생성하고 이를 관리할 수 있다. 베이스 돔(100)에 자바스크립트 또는 CSS가 적용됨에 따라, 타 데이터베이스의 데이터가 웹 페이지 상에 바인딩될 수 있으며, 그에 따라 베이스 돔(100)과 뷰 돔(200)의 차이가 발생할 수 있다.The view dome management module 420 may generate and manage the view dome 200 by applying JavaScript or CSS to the base dome 100. As JavaScript or CSS is applied to the base dome 100, data of another database may be bound on a web page, and thus a difference between the base dome 100 and the view dome 200 may occur.

본 발명의 일 실시예에 따르면, 뷰 돔 관리 모듈(420)은 베이스 돔(100)에 자바스크립트 또는 CSS 등의 추가 구성을 적용시켜 뷰 돔을 생성함에 있어, 아이프레임(Iframe)을 이용할 수 있다. 아이프레임은 웹 에디터 프로그램(400) 내의 아이프레임 관리 모듈(미도시)에 의해 관리될 수 있다.According to an embodiment of the present invention, the view dome management module 420 may use an iframe in generating a view dome by applying an additional configuration such as JavaScript or CSS to the base dome 100. . The iframe may be managed by an iframe management module (not shown) in the web editor program 400.

뷰 레이어 관리 모듈(430)은 뷰 돔을 이용하여 편집 화면을 뷰 레이어(310)의 형태로 생성할 수 있다. The view layer management module 430 may generate an edit screen in the form of the view layer 310 by using the view dome.

디자인 레이어 관리 모듈(440)은 뷰 레이어(310)의 영역과 겹치게 표시되는 디자인 레이어를 투명한 형태로 생성하여 배치할 수 있다. 디자인 레이어 관리 모듈(440)은 디자인 레이어(320)를 통해 사용자의 입력 정보를 수신하고, 사용자의 입력에 따른 상태 변화를 디자인 레이어(320) 상에 표시할 수 있다. 또한, 디자인 레이어 관리 모듈(440)은 사용자의 입력 정보를 베이스 돔(100)에 전달하여 적용되도록 할 수 있다.The design layer management module 440 may generate and arrange a design layer displayed to overlap with an area of the view layer 310 in a transparent form. The design layer management module 440 may receive user input information through the design layer 320 and display a state change according to the user input on the design layer 320. In addition, the design layer management module 440 may transfer the user input information to the base dome 100 to be applied.

인식표 부여 모듈(450)은 베이스 돔 관리 모듈(410)이 베이스 돔(100)을 생성한 후에, 베이스 돔(100) 내에 포함되는 컴포넌트 각각에 대해 인식표를 부여할 수 있다. 이와 같은 인식표는 추후 뷰 돔 관리 모듈(420)이 베이스 돔(100)에 자바스크립트 또는 CSS 등을 적용하여 뷰 돔(200)을 생성할 때에, 자바스크립트 또는 CSS의 적용에 의해 영향을 받지 않을 수 있다.After the base dome management module 410 generates the base dome 100, the dog tag assignment module 450 may assign a dog tag to each component included in the base dome 100. Such a tag may not be affected by the application of JavaScript or CSS when the view dome management module 420 generates the view dome 200 by applying JavaScript or CSS to the base dome 100. have.

동기화 수행 모듈(460)은 사용자가 웹 에디터 프로그램(400)의 화면 상에서 키보드 또는 마우스 등의 입력 도구를 통한 입력을 수행하면, 사용자의 입력 정보가 지시하는 제1 컴포넌트의 정보를 뷰 돔(200) 내에서 특정하고, 제1 컴포넌트에 부여되어 있는 인식표의 정보를 이용하여 제1 컴포넌트와 매칭되는 제2 컴포넌트를 베이스 돔(100) 내에서 특정할 수 있다. 이후, 동기화 수행 모듈(460)은 디자인 레이어 관리 모듈(440)이 수신한 사용자의 입력 정보를 통해 베이스 돔(100) 내에서 특정된 제2 컴포넌트의 정보를 수정할 수 있다. 동기화 수행 모듈(460)은 제2 컴포넌트의 정보가 사용자 입력 정보에 맞추어 수정된 후에, 베이스 돔(100)의 수정 정보를 반영하여 제2 컴포넌트와 매칭되는 제1 컴포너트, 즉 뷰 돔(200) 내의 제1 컴포넌트의 정보를 수정할 수 있다. 동기화 수행 모듈(460)이 이와 같이 베이스 돔(100) 및 뷰 돔(200)의 정보를 수정하고 난 뒤, 전술한 뷰 레이어 관리 모듈(430)은 뷰 돔(200)의 수정된 정보를 이용하여 제1 레이어인 뷰 레이어(310)의 내용을 수정할 수 있다.When the user performs an input through an input tool such as a keyboard or a mouse on the screen of the web editor program 400, the synchronization performing module 460 displays the information of the first component indicated by the user's input information. The second component matching the first component may be specified in the base dome 100 using the identification of the identification table assigned to the first component. Thereafter, the synchronization performing module 460 may modify the information of the second component specified in the base dome 100 through the input information of the user received by the design layer management module 440. After the information of the second component is modified according to the user input information, the synchronization performing module 460 reflects the modification information of the base dome 100 and matches the first component, that is, the view dome 200. The information of the first component within can be modified. After the synchronization performing module 460 modifies the information of the base dome 100 and the view dome 200 in this manner, the above-described view layer management module 430 uses the modified information of the view dome 200. The content of the view layer 310, which is the first layer, may be modified.

제어 모듈(470)은 베이스 돔 관리 모듈(410), 뷰 돔 관리 모듈(420), 뷰 레이어 관리 모듈(430), 디자인 레이어 관리 모듈(440), 인식표 부여 모듈(450) 및 동기화 수행 모듈(460) 간의 데이터 흐름을 제어하는 기능을 수행할 수 있다. 즉, 본 발명에 따른 제어 모듈(470)은 베이스 돔 관리 모듈(410), 뷰 돔 관리 모듈(420), 뷰 레이어 관리 모듈(430), 디자인 레이어 관리 모듈(440), 인식표 부여 모듈(450) 및 동기화 수행 모듈(460)에서 각각 고유한 기능을 수행하도록 제어할 수 있다.The control module 470 includes the base dome management module 410, the view dome management module 420, the view layer management module 430, the design layer management module 440, the tag identification module 450, and the synchronization performing module 460. To control the flow of data between them. That is, the control module 470 according to the present invention includes a base dome management module 410, a view dome management module 420, a view layer management module 430, a design layer management module 440, and a tag assignment module 450. And the synchronization performing module 460 to control each unique function.

도 4는 본 발명의 일 실시예에 따른 웹 에디터 프로그램(400)이 동작하는 과정을 나타낸 흐름도이다.4 is a flowchart illustrating a process of operating a web editor program 400 according to an embodiment of the present invention.

도 4를 참조하면, 도 4는 사용자가 본 발명의 웹 에디터 프로그램(400)을 사용하여 웹 페이지의 편집을 수행할 때에, 웹 에디터 프로그램(400)이 베이스 돔(100)과 뷰 돔(200)의 동기화를 수행하는 방법을 나타내고 있다.Referring to FIG. 4, FIG. 4 shows that when a user performs editing of a web page using the web editor program 400 of the present invention, the web editor program 400 includes a base dome 100 and a view dome 200. It shows how to perform synchronization.

웹 에디터 프로그램(400)은 HTML 소스 정보를 포함하고 있는 소스 파일을 로드하여 이를 토대로 베이스 돔(100)을 생성할 수 있으며 그 과정에서 베이스 돔(100) 내에 존재하는 컴포넌트 별로 인식표를 부여할 수 있다(S401). 이후, 웹 에디터 프로그램(400)은 생성된 베이스 돔(100)을 통해 소스 파일에 접근하여 수정을 가할 수 있다. 또한, 웹 에디터 프로그램(400)은 베이스 돔(100)에 신규한 컴포넌트가 추가될 때마다 추가되는 컴포넌트에 인식표를 생성하여 부여할 수 있다.The web editor program 400 may generate a base dome 100 based on this by loading a source file including HTML source information, and may assign a recognition tag for each component existing in the base dome 100 in the process. (S401). Thereafter, the web editor program 400 may access and modify the source file through the generated base dome 100. In addition, the web editor program 400 may generate and assign a recognition tag to the added component whenever a new component is added to the base dome 100.

베이스 돔(100)이 생성된 후에, 웹 에디터 프로그램(400)은 생성된 베이스 돔(100)을 아이프레임에 적용하여 화면에 표시할 수 있다(S403). 이 화면은 웹 페이지의 편집 화면의 역할을 수행할 수 있으며 실행 화면과 동일한 형태로 표시될 수 있다. 본 발명에서 아이프레임은 화면을 뷰 레이어(310)와 디자인 레이어(320)의 형태로 구성할 수 있으며, 일 실시예에 따르면 디자인 레이어(320)는 투명한 형태로 뷰 레이어(310)와 중복되어 위치할 수 있다. 이후, 웹 에디터 프로그램(400)은 아이프레임을 통해서 뷰 돔(200)을 생성할 수 있다(S405). 생성된 뷰 돔(200)은 뷰 레이어(310)와 연계되어 작동할 수 있다. 즉, 사용자의 입력에 따라 뷰 돔(200)이 변경되면 그에 맞추어 뷰 레이어(310)가 나타내는 화면도 변화할 수 있다.After the base dome 100 is generated, the web editor program 400 may apply the generated base dome 100 to an iframe and display it on the screen (S403). This screen may serve as an edit screen of a web page and may be displayed in the same form as an execution screen. In the present invention, the iframe may configure the screen in the form of the view layer 310 and the design layer 320, according to an embodiment, the design layer 320 is positioned in a transparent form overlapping the view layer 310 can do. Thereafter, the web editor program 400 may generate the view dome 200 through the iframe (S405). The generated view dome 200 may operate in association with the view layer 310. That is, when the view dome 200 changes according to a user input, the screen displayed by the view layer 310 may change accordingly.

사용자는 키보드 또는 마우스와 같은 입력 도구를 통해 화면 내의 특정 컴포넌트를 선택하여 위치를 이동시킬 수 있다(S407). 웹 에디터 프로그램(400)의 사용자는 화면 내에 위치하는 컴포넌트를 수정 또는 삭제 하거나 신규의 컴포넌트를 생성할 수 있다. 다만, 이하에서는 사용자가 취할 수 있는 다양한 입력 중, 사용자가 특정 컴포넌트를 선택하여 그 위치를 이동한 경우를 가정하고 설명하기로 한다. The user may select a specific component in the screen and move the position through an input tool such as a keyboard or a mouse (S407). The user of the web editor program 400 may modify or delete a component located in the screen or create a new component. However, hereinafter, it will be assumed that the user selects a specific component and moves its position among various inputs that the user can take.

사용자가 화면 상에서 특정 컴포넌트를 선택하여 위치를 이동하였을 때에, 웹 에디터 프로그램(400)은 디자인 레이어(320) 상에서, 선택된 컴포넌트와 이동하고자 하는 위치에 외곽선을 표시할 수 있다(S409). 웹 페이지를 구성하는 컴포넌트 들은 실제로는 뷰 레이어(310) 상에 표시되어 있는 것이며, 뷰 레이어(310)와 겹쳐진 디자인 레이어(320) 상에서 사용자의 입력에 대응되는 표시를 나타나게 함으로써 사용자가 웹 페이지의 실행 화면을 직접 수정하는 것과 같이 느낄 수 있도록 하는 것이다.When the user selects a specific component on the screen and moves the position, the web editor program 400 may display an outline on the design layer 320 at the position to be moved with the selected component (S409). The components constituting the web page are actually displayed on the view layer 310 and the user executes the web page by displaying a display corresponding to the user's input on the design layer 320 overlapping the view layer 310. It makes you feel like you're editing the screen yourself.

웹 에디터 프로그램(400)은 사용자가 화면 상에서 선택한 컴포넌트를 뷰 돔(200) 상에서 특정할 수 있다(S411). 이후, 웹 에디터 프로그램(400)은 사용자가 선택한 컴포넌트에 부여된 인식표를 이용하여, 선택한 컴포넌트와 매칭되는 컴포넌트를 베이스 돔(100) 상에서 검색하여 특정할 수 있다(S413).The web editor program 400 may specify the component selected by the user on the screen on the view dome 200 (S411). Subsequently, the web editor program 400 may search for and identify a component matching the selected component on the base dome 100 using the identification tag assigned to the component selected by the user (S413).

베이스 돔(100) 상에서 특정 컴포넌트가 검색되어 특정되면, 웹 에디터 프로그램(400)은 사용자의 입력에 따라 베이스 돔(100)의 컴포넌트를 수정할 수 있다(S415). 예를 들어 사용자가 특정 컴포넌트의 위치를 이동시킨 경우, 웹 에디터 프로그램(400)은 베이스 돔(100)에서 특정된 컴포넌트의 위치 정보를 사용자의 입력치에 알맞게 수정할 수 있다.When a specific component is searched and specified on the base dome 100, the web editor program 400 may modify a component of the base dome 100 according to a user's input (S415). For example, when the user moves the position of a specific component, the web editor program 400 may modify the position information of the component specified in the base dome 100 according to the input value of the user.

이후, 웹 에디터 프로그램(400)은 베이스 돔(100)의 변경을 토대로 뷰 돔(100)의 컴포넌트를 수정할 수 있다(S417). S413 단계에서 인식표를 이용하여 뷰 돔(200)의 컴포넌트와 베이스 돔(100)의 컴포넌트의 매칭을 미리 수행해 두었으므로, 웹 에디터 프로그램(400)은 그 결과를 이용할 수 있다. 마지막 단계로, 웹 에디터 프로그램(400)은 수정된 뷰 돔(200)의 정보를 통해 뷰 레이어(310)를 업데이트 할 수 있다(S419). 뷰 레이어(310)의 업데이트가 수행되면 사용자의 편집 화면이 사용자의 입력치를 반영한 결과로 수정될 수 있다. 예를 들어, 전술한 바와 같이 사용자가 화면 상에서 컴포넌트를 이동시키면, S409 내지 S419의 단계가 진행되고 최종적으로 뷰 레이어(310) 상에서 해당 컴포넌트의 이동이 표시될 수 있다.Thereafter, the web editor program 400 may modify a component of the view dome 100 based on the change of the base dome 100 (S417). Since the matching of the components of the view dome 200 and the components of the base dome 100 is performed in advance in step S413 using the identification tag, the web editor program 400 may use the result. As a final step, the web editor program 400 may update the view layer 310 through the modified view dome 200 information (S419). When the update of the view layer 310 is performed, the edit screen of the user may be modified as a result of reflecting the input value of the user. For example, as described above, when the user moves the component on the screen, the steps of S409 to S419 may proceed and finally the movement of the corresponding component may be displayed on the view layer 310.

이와 같이, 전술한 본 발명의 특징에 따르면, 사용자가 웹 에디터 프로그램(400)을 통해 웹 페이지를 편집함에 있어서, 편집 화면이 실제로 웹 브라우저에서 보여지는 실행 화면과 동일하게 편집될 수 있다. 이는 편집 화면과 실행 화면의 동기화를 수행하는 기술에 의해 행하여지는데, 베이스 돔(100)의 각 컴포넌트에 부여되는 인식표가 자바스크립트 또는 CSS의 적용에 의해 영향을 받지 않아, 뷰 돔(200)과 베이스 돔(100) 사이의 동기화가 간편하게 이루어지기 때문일 수 있다. 따라서, 본 발명에 따르면 사용자가 웹 페이지를 편집함에 있어 직관성이 상승하므로 그에 따라 개발 생산성이 증가하는 효과가 발생할 수 있다.As described above, according to the above-described feature of the present invention, when a user edits a web page through the web editor program 400, the edit screen can be edited in the same manner as the execution screen actually seen in the web browser. This is done by a technique for synchronizing the edit screen and the execution screen. The identification tag given to each component of the base dome 100 is not affected by the application of JavaScript or CSS, so that the view dome 200 and the base are not affected. This may be because synchronization between the domes 100 is easily performed. Therefore, according to the present invention, since the intuitiveness is increased when the user edits the web page, the development productivity may be increased accordingly.

한편, 본 발명의 일 실시예에 따른 웹 에디터 프로그램(400)은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현되는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다.Meanwhile, the web editor program 400 according to an embodiment of the present invention may also be embodied as computer readable code on a computer readable recording medium. The computer-readable recording medium includes all kinds of recording devices in which data that can be read by a computer system is stored.

예컨대, 컴퓨터가 읽을 수 있는 기록매체로는 롬(ROM), 램(RAM), 시디-롬(CD-ROM), 자기 테이프, 하드디스크, 플로피디스크, 이동식 저장장치, 비휘발성 메모리(Flash Memory), 광 데이터 저장장치 등이 있다.For example, a computer-readable recording medium may be a ROM, a RAM, a CD-ROM, a magnetic tape, a hard disk, a floppy disk, a removable storage device, a nonvolatile memory (Flash memory). Optical data storage.

또한, 컴퓨터로 읽을 수 있는 기록매체는 컴퓨터 통신망으로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 읽을 수 있는 코드로서 저장되고 실행될 수 있다.The computer readable recording medium can also be distributed over computer systems connected over a computer network, stored and executed as distributed readable code.

이상, 첨부된 도면을 참조로 하여 본 발명의 실시예를 설명하였지만, 본 발명이 속하는 기술분야의 통상의 기술자는 본 발명이 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로, 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며, 제한적이 아닌 것으로 이해해야만 한다. In the above, embodiments of the present invention have been described with reference to the accompanying drawings, but those skilled in the art to which the present invention pertains may realize the present invention in other specific forms without changing the technical spirit or essential features thereof. I can understand that. Therefore, it should be understood that the embodiments described above are exemplary in all respects and not restrictive.

10: HTML 소스 파일
100: 베이스 돔
200: 뷰 돔
300: 아이프레임
310: 뷰 레이어
320: 디자인 레이어
400: 웹 에디터 프로그램
410: 베이스 돔 관리 모듈
420: 뷰 돔 관리 모듈
430: 뷰 레이어 관리 모듈
440: 디자인 레이어 관리 모듈
450: 인식표 부여 모듈
460: 동기화 수행 모듈
470: 제어 모듈10: HTML source file
100: base dome
200: view dome
300: iframe
310: View Layer
320: design layer
400: web editor program
410: base dome management module
420: view dome management module
430: View Layer Management Module
440: Design Layer Management Module
450: Dog tag assignment module
460: Synchronization module
470: control module

Claims (10)

위지윅(WYSIWYG) 기반 웹 에디터 프로그램이 편집 화면과 실행 화면을 동기화시키는 방법에 있어서,
소스 코드를 생성한 후, 상기 소스 코드를 통해 베이스 돔(DOM: Document Object Model)을 생성하며, 상기 베이스 돔 내에 존재하는 컴포넌트 별 인식표를 부여하는 단계;
상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하고, 상기 뷰 돔을 이용하여 편집 화면을 제1 레이어의 형태로 생성하는 단계;
상기 편집 화면 상에서 상기 제1 레이어와 영역의 적어도 일부가 겹치는 제2 레이어를 위치시키고, 상기 제2 레이어를 통해 사용자의 입력 정보를 수신하는 단계;
상기 사용자의 입력 정보가 가리키는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하고, 제1 컴포넌트에 부여된 인식표를 이용하여 제1 컴포넌트와 매칭되는 상기 베이스 돔 내의 제2 컴포넌트를 특정하는 단계; 및
상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 단계를 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법.
In the way that the WYSIWYG based web editor program synchronizes the edit screen and the execution screen,
Generating source code, generating a base dome (DOM) through the source code, and assigning a tag per component existing in the base dome;
Generating a view DOM by applying JavaScript or CSS to the base dome, and generating an edit screen in the form of a first layer using the view dome;
Placing a second layer on which the at least part of the first layer and the region overlap on the edit screen, and receiving user input information through the second layer;
Specifying information of a first component indicated by the input information of the user in the view dome, and specifying a second component in the base dome that matches the first component by using an identification tag assigned to the first component; And
Modifying information of the second component specified in the base dome according to the input information of the user.
제1항에 있어서,
상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하는 단계는, 아이프레임(Iframe)을 통해 이루어지는 것인, 웹 에디터 프로그램의 화면 동기화 수행 방법.
The method of claim 1,
The method of generating a view DOM by applying JavaScript or CSS to the base dome is performed through an Iframe.
제1항에 있어서,
상기 사용자의 입력 정보가 지시하는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하여 상기 사용자의 입력 정보에 따라 수정하기 전, 상기 사용자의 입력 정보에 대응되는 동작을 상기 제2 레이어 상에서 표시하는 단계를 더 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법.
The method of claim 1,
Displaying, on the second layer, an operation corresponding to the input information of the user before specifying information of the first component indicated by the input information of the user in the view dome and correcting the information according to the input information of the user; Further comprising, the screen synchronization method of the web editor program.
제1항에 있어서,
상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 단계가 수행된 후에, 상기 베이스 돔의 수정 정보를 반영하여 제2 컴포넌트와 매칭되는 상기 뷰 돔 내의 제1 컴포넌트의 정보를 수정하는 단계를 더 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법.
The method of claim 1,
After the step of modifying the information of the second component specified in the base dome in accordance with the input information of the user is performed, the first component in the view dome matching the second component reflecting the modification information of the base dome And modifying information in the web editor program.
제4항에 있어서,
상기 뷰 돔 내의 제1 컴포넌트가 수정된 후, 상기 뷰 돔의 수정된 정보를 통해 상기 제1 레이어의 내용을 수정하는 단계를 더 포함하는, 웹 에디터 프로그램의 화면 동기화 수행 방법.
The method of claim 4, wherein
After modifying the first component in the view dome, modifying the content of the first layer through the modified information of the view dome.
제1항에 있어서,
상기 인식표는 자바스크립트 또는 CSS의 적용에 의해 변화하지 않는 것을 특징으로 하는, 웹 에디터 프로그램의 화면 동기화 수행 방법.
The method of claim 1,
The identification tag is not changed by the application of JavaScript or CSS, the screen synchronization method of the web editor program.
편집 화면과 실행 화면의 동기화를 수행하는 위지윅(WYSIWYG) 기반 웹 에디터 프로그램에 있어서,
소스 코드를 생성한 후, 상기 소스 코드를 통해 베이스 돔(DOM: Document Object Model)을 생성하는 베이스 돔 관리 모듈;
상기 베이스 돔 내에 존재하는 컴포넌트 별 인식표를 부여하는 인식표 부여 모듈;
베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔(View DOM)을 생성하는 뷰 돔 관리 모듈;
상기 뷰 돔을 이용하여 편집 화면을 제1 레이어의 형태로 생성하는 뷰 레이어 관리 모듈;
상기 편집 화면 상에서 상기 제1 레이어와 영역의 적어도 일부가 겹치는 제2 레이어를 위치시키고, 상기 제2 레이어를 통해 사용자의 입력 정보를 수신하는 디자인 레이어 관리 모듈; 및
상기 사용자의 입력 정보가 가리키는 제1 컴포넌트의 정보를 상기 뷰 돔 내에서 특정하고, 제1 컴포넌트에 부여된 인식표를 이용하여 제1 컴포넌트와 매칭되는 상기 베이스 돔 내의 제2 컴포넌트를 특정하며, 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정하는 동기화 수행 모듈을 실행하기 위하여 매체에 저장된, 웹 에디터 프로그램.
In the WYSIWYG based web editor program that synchronizes the edit screen and the run screen,
A base dome management module that generates a source code and generates a base dome (DOM) through the source code;
A identification tag assignment module for assigning a identification tag for each component existing in the base dome;
A view dome management module generating a view DOM by applying JavaScript or CSS to the base dome;
A view layer management module for generating an edit screen in the form of a first layer using the view dome;
A design layer management module for locating a second layer on which the first layer and at least a portion of the region overlap on the edit screen, and receiving user input information through the second layer; And
Specify information of a first component indicated by the input information of the user in the view dome, and specify a second component in the base dome that matches the first component by using an identification tag assigned to the first component, and the user And a web editor program stored in the medium to execute a synchronization performing module that modifies information of a second component specified in the base dome according to the input information of the.
제7항에 있어서, 상기 뷰 레이어 관리 모듈 및 디자인 레이어 관리 모듈은 아이프레임 관리 모듈에 포함되며, 상기 뷰 돔 관리 모듈은 상기 베이스 돔에 자바스크립트 또는 CSS를 적용하여 뷰 돔을 생성함에 있어 아이프레임 관리 모듈이 관리하는 아이프레임을 이용하는, 웹 에디터 프로그램.
The method of claim 7, wherein the view layer management module and the design layer management module are included in an iframe management module, wherein the view dome management module applies an JavaScript or CSS to the base dome to generate an iframe. A web editor program that uses an iframe managed by a management module.
제7항에 있어서,
상기 동기화 수행 모듈은 상기 사용자의 입력 정보에 따라 상기 베이스 돔 내에서 특정된 제2 컴포넌트의 정보를 수정한 후에, 상기 베이스 돔의 수정 정보를 반영하여 제2 컴포넌트와 매칭되는 상기 뷰 돔 내의 제1 컴포넌트의 정보를 수정하는, 웹 에디터 프로그램.
The method of claim 7, wherein
The synchronization performing module may modify the information of the second component specified in the base dome according to the input information of the user, and then reflect the modification information of the base dome to match the second component with the first component in the view dome. A web editor program that modifies information about a component.
제9항에 있어서,
상기 뷰 레이어 관리 모듈은 상기 동기화 수행 모듈이 상기 뷰 돔 내의 제1 컴포넌트를 수정한 후 상기 뷰 돔의 수정된 정보를 통해 상기 제1 레이어의 내용을 수정하는, 웹 에디터 프로그램.
The method of claim 9,
And the view layer management module modifies the content of the first layer through the modified information of the view dome after the perform synchronization module modifies the first component in the view dome.
KR1020180102805A 2018-08-30 2018-08-30 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same KR102091786B1 (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR1020180102805A KR102091786B1 (en) 2018-08-30 2018-08-30 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same
CN201811102590.3A CN110874448A (en) 2018-08-30 2018-09-20 Method for synchronizing HTML running picture and editing picture and program for implementing the method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020180102805A KR102091786B1 (en) 2018-08-30 2018-08-30 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same

Publications (2)

Publication Number Publication Date
KR20200025441A true KR20200025441A (en) 2020-03-10
KR102091786B1 KR102091786B1 (en) 2020-03-20

Family

ID=69716339

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020180102805A KR102091786B1 (en) 2018-08-30 2018-08-30 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same

Country Status (2)

Country Link
KR (1) KR102091786B1 (en)
CN (1) CN110874448A (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110041836A (en) * 2009-10-16 2011-04-22 주식회사 아이비케이시스템 Xsl/xml-based web application development system and method using this system
KR20140019627A (en) * 2012-08-06 2014-02-17 인크로스 주식회사 An authoring tool for web applications and the authoring method thereof
KR20150136310A (en) 2014-05-27 2015-12-07 주식회사 핸디소프트 Wysiwyg editor system
US20160062963A1 (en) * 2014-08-26 2016-03-03 Adobe Systems Incorporated Synchronizing DOM Element References
JP5941540B2 (en) * 2011-06-23 2016-06-29 マイクロソフト テクノロジー ライセンシング，エルエルシー Dynamic update of execution page
WO2018119120A1 (en) * 2016-12-21 2018-06-28 Open Text Corporation Systems and methods for conversion of web content into reusable templates and components

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106201489A (en) * 2016-06-30 2016-12-07 乐视控股（北京）有限公司 A kind of page editing method and apparatus

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110041836A (en) * 2009-10-16 2011-04-22 주식회사 아이비케이시스템 Xsl/xml-based web application development system and method using this system
JP5941540B2 (en) * 2011-06-23 2016-06-29 マイクロソフト テクノロジー ライセンシング，エルエルシー Dynamic update of execution page
KR20140019627A (en) * 2012-08-06 2014-02-17 인크로스 주식회사 An authoring tool for web applications and the authoring method thereof
KR20150136310A (en) 2014-05-27 2015-12-07 주식회사 핸디소프트 Wysiwyg editor system
US20160062963A1 (en) * 2014-08-26 2016-03-03 Adobe Systems Incorporated Synchronizing DOM Element References
WO2018119120A1 (en) * 2016-12-21 2018-06-28 Open Text Corporation Systems and methods for conversion of web content into reusable templates and components

Also Published As

Publication number Publication date
KR102091786B1 (en) 2020-03-20
CN110874448A (en) 2020-03-10

Similar Documents

Publication Publication Date Title
AU2006284908B2 (en) Markup based extensibility for user interfaces
US8819624B2 (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
JP3839468B2 (en) International data processing system
US9418054B2 (en) Document comment management
US9176943B2 (en) Comment presentation in electronic documents
Oney et al. Codelets: linking interactive documentation and example code in the editor
CN108762743B (en) Data table operation code generation method and device
US8386919B2 (en) System for displaying an annotated programming file
US20140032633A1 (en) Asynchronous comment updates
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US7293232B2 (en) Source code editor for editing multilanguage documents
US9852117B1 (en) Text-fragment based content editing and publishing
KR102091786B1 (en) Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same
JP2007265011A (en) Screen program layout change method, information processor, program and recording medium
KR20140137630A (en) Widget authoring system and method thereof
Signer et al. Advanced authoring of paper-digital systems: Introducing templates and variable content elements for interactive paper publishing
González et al. Including multi-stroke gesture-based interaction in user interfaces using a model-driven method
CN109918600A (en) Generate method, apparatus, computer equipment and the storage medium of H5 active page
JP7246795B1 (en) Information processing device, method, program, and system
Wen et al. SwiftLaTeX: Exploring Web-based True WYSIWYG Editing for Digital Publishing
Walther ASP. Net Kick Start
Brüggemann-Klein et al. Graphical User Interface Tool forDesigningModel-BasedUserInterfaces with UIML
Seelemann Automatic Application of Layout in Coordinate-based Interfaces during Localization
Whitaker Understanding Changes in n-way Merge: Use-cases and User Interface Demonstrations
Juneau et al. Facelets

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