KR20150006612A - Web page making system and method for maintaining compatibility of web browser and font - Google Patents

Web page making system and method for maintaining compatibility of web browser and font Download PDF

Info

Publication number
KR20150006612A
KR20150006612A KR20130080206A KR20130080206A KR20150006612A KR 20150006612 A KR20150006612 A KR 20150006612A KR 20130080206 A KR20130080206 A KR 20130080206A KR 20130080206 A KR20130080206 A KR 20130080206A KR 20150006612 A KR20150006612 A KR 20150006612A
Authority
KR
South Korea
Prior art keywords
image
web page
text
web
client
Prior art date
Application number
KR20130080206A
Other languages
Korean (ko)
Other versions
KR101546359B1 (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 KR1020130080206A priority Critical patent/KR101546359B1/en
Publication of KR20150006612A publication Critical patent/KR20150006612A/en
Application granted granted Critical
Publication of KR101546359B1 publication Critical patent/KR101546359B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
    • G06Q50/10—Services

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Tourism & Hospitality (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Economics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Resources & Organizations (AREA)
  • Marketing (AREA)
  • Primary Health Care (AREA)
  • Strategic Management (AREA)
  • General Business, Economics & Management (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

A method for generating a webpage for web browser compatibility and font maintenance and a system thereof according to the present invention are provided to comprise the webpage as an image structure based on an image or a conversion image by using the conversion image for a text comprising the webpage, thereby enabling the webpage to be expressed based on the path information and the position information for the image. The present invention can maintain the consistent compatibility regardless of the kinds or the version of the web browser and can express the texts of the webpage regardless of the font installed in a client.

Description

웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템{Web page making system and method for maintaining compatibility of web browser and font}TECHNICAL FIELD [0001] The present invention relates to a web page creation method and system for maintaining compatibility with a web browser and maintaining fonts,

본 발명은 웹 페이지 생성방법 및 생성시스템에 관한 것으로, 더욱 상세하게는 웹 브라우저의 호환성을 유지하고, 웹 브라우저에 이용되는 텍스트의 폰트가 유지될 수 있도록 하며, 클라이언트에 웹 편집 프로그램을 설치하지 않고도 웹 페이지를 구성할 수 있도록 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템에 관한 것이다.The present invention relates to a web page creation method and system, and more particularly, to a web page creation method and a web page creation method in which compatibility of a web browser is maintained, fonts of a text used in a web browser can be maintained, And more particularly, to a method and system for generating a web page for web browser compatibility and font maintenance that enables web pages to be configured.

인터넷 접속을 위해 전 세계적으로 이용되는 웹 브라우저는 크게 인터넷 익스플로러(Internet explorer), 파이어 폭스(Fire fox), 크롬(Chrome) 등이 있으며, http://gs.statcounter.com/에서 집계된 기준에 따르면, 2013년 6월 기준으로 각각 25.44%, 20.01% 및 42.68%를 점유율을 갖는다. 이들 웹 브라우저 중 크롬과 파이어 폭스는 W3C(World Wide Web Consortium)에서 제정된 HTML(Hyper Text Markup Language) 표준을 전반적으로 만족하고 있으나, 가장 점유율이 높은 인터넷 익스플로러의 경우 HTML 표준에 따르지 않는 HTML 코드를 많이 이용하고, 액티브 엑스(Active X)와 같은 비표준 기능을 이용하기도 한다. 이에 따라, 동일한 HTML 코드로 작성된 웹 페이지라 하더라도, 클라이언트에서 구동하는 웹 브라우저에 따라 서로 상이하게 표현되는 일이 발생하고 있으며, 개발자 입장에서는 웹 페이지를 인터넷 익스플로러용 HTML 코드와 파이어 폭스용 HTML 코드를 개별적으로 개발해야 하는 경우도 있다. 이는 개발자 입장에서, 웹 페이지 구현을 위해 유사한 작업을 반복해야 하는 부담으로 작용하며, 클라이언트 입장에서 웹 브라우저의 선택과 사용에 제한을 받는 부담이 있다.World wide web browsers for Internet access are mainly Internet explorer, Fire fox, Chrome and others. They are based on aggregated criteria at http://gs.statcounter.com/ According to the report, the market share will be 25.44%, 20.01% and 42.68% as of June 2013, respectively. Among these web browsers, Chrome and Firefox are generally satisfied with the World Wide Web Consortium (W3C) -specific HTML (Hyper Text Markup Language) standard. However, Internet Explorer, which has the highest share, I use it a lot and use nonstandard functions such as Active X. As a result, even if a web page is created using the same HTML code, the web page is displayed differently depending on the web browser running on the client. For the developer, the web page is divided into HTML code for Internet Explorer and HTML code for Firefox Sometimes it is necessary to develop them individually. This is a burden to developers to repeat a similar task to implement a web page, and to limit the selection and use of a web browser from a client's perspective.

한국의 경우 윈도우즈(Windows) 계열 운영체제의 편중이 심하고, 액티브 액스를 이용한 금융 결제가 많이 이루어지는 관계로, 2013년 6월 기준으로 인터넷 익스플로러의 점유율은 67.58%에 이른다. 이러한 편중 현상은 HTML 표준에 따르지 않는 인터넷 익스플로러가 주로 이용됨을 의미하며, 클라이언트가 HTML 표준에 따른 웹 페이지에 접속할 경우, 애초 웹 페이지를 개발한 개발자의 의도와 다르게 웹 페이지가 표현될 수 있음을 의미한다.In Korea, Internet Explorer has a 67.58% market share as of June 2013 due to the heavy concentration of Windows operating system and financial settlement using Active AX. This biased phenomenon means that Internet Explorer, which does not conform to the HTML standard, is mainly used. When a client accesses a web page conforming to the HTML standard, it means that the web page can be displayed differently from the intention of the developer who originally developed the web page do.

상기한 문제점에 따라 웹 페이지를 개발할 때, 개발자는 HTML 표준에 맞추어 HTML 코드를 작성하거나 또는 익스플로러에 맞추어 작성 후, 작성된 HTML 코드에 의해 표현되는 웹 페이지가 클라이언트에서 어떻게 표현되는지를 고려하여야 한다. 더욱이, HTML 코드로 웹 페이지를 전문적으로 개발하는 개발자 이외에 일반인들이 웹 페이지를 구성하고자 하는 경우 이러한 HTML 호환성 문제는 웹 페이지 작성을 더욱 어렵게 만들 수 있다.When developing a web page according to the above-mentioned problem, the developer must write HTML code according to the HTML standard or write it in accordance with the explorer, and then consider how the web page expressed by the created HTML code is displayed on the client. Furthermore, if the public wants to build a web page in addition to the developer who specializes in developing the web page with HTML code, this HTML compatibility issue can make the creation of the web page more difficult.

또한, HTML 코드를 작성하는 웹 페이지 개발 툴(Tool)에서 지원되는 폰트가 클라이언트에 마련되지 않는 경우, 클라이언트는 해당 폰트를 다른 폰트로 대체하여 웹 페이지에 표현하여야 하므로, 최초 웹 페이지를 개발한 개발자의 의도대로 웹 페이지가 표현되지 않을 수 있다.If the client does not have a font supported by a web page development tool (tool) for writing HTML code, the client must replace the font with another font and display it on the web page. Therefore, the developer who developed the first web page The web page may not be displayed as intended.

상기한 호환성 문제에 대해 공개특허 10-2010-0100161에서는 클라이언트에 설치된 운영체제의 정보와 클라이언트에 설치된 웹 브라우저 정보를 참조하여 웹 콘텐츠의 기준이미지 정보 및 이에 대한 테스트 이미지의 표현 결과를 참조하여 상기 클라이언트에 대한 웹 호환성을 판단하는 웹 콘텐츠의 브라우저 호환성 검사장치를 제안한 바 있다. 공개특허 10-2010-0100161는 웹 브라우저의 호환성 검사를 통해 웹 콘텐츠 제작의 생산성을 향상시키고 있다.With respect to the compatibility problem described above, in reference to the information of the operating system installed in the client and the information of the web browser installed in the client, the reference image information of the web content and the result of representation of the test image are referred to, A browser compatibility checking apparatus for web contents judging the compatibility of the web is proposed. The patent application 10-2010-0100161 improves the productivity of web content production through the compatibility check of a web browser.

그러나, 공개특허 10-2010-0100161은 개발자에 의해 제작된 웹 페이지의 호환성을 검사할 수는 있어도, 개발 단계의 웹 페이지 호환성을 보장하는 것은 아니며, 애초부터 웹 페이지를 제작할 때, 이러한 작업이 필요 없다면 웹 페이지 개발이 더욱 효율적이라는 것은 별도로 부연설명할 필요가 없을 것이다.However, even though the compatibility of the web page produced by the developer can be checked, the compatibility of the web page at the development stage is not guaranteed, and when the web page is produced from the beginning, Without it, there is no need to explain separately that Web page development is more efficient.

본 발명의 목적은 클라이언트와 네트워크 접속되는 서버 시스템에서 웹 페이지를 생성하도록 하며,An object of the present invention is to create a web page in a server system connected to a client,

생성되는 웹 페이지가 웹 브라우저의 종류 및 버전에 의해 표현 양태가 변경되지 않도록 함은 물론, 웹 페이지에 기재되는 텍스트의 폰트가 유지될 수 있도록 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템을 제공함에 있다.A method of generating a web page for web browser compatibility and font maintenance such that the generated web page can maintain the font of the text described in the web page, as well as preventing the expression mode from being changed according to the type and version of the web browser, System.

상기한 목적은 본 발명에 따라, 네트워크 접속되는 클라이언트로 웹 편집 인터페이스를 제공하는 웹 페이지 생성시스템에 의해 수행되며, 상기 클라이언트에서 사용자 선택된 이미지 및 텍스트를 상기 웹 편집 인터페이스의 사용자 설정된 위치에 배치하는 단계, 상기 텍스트가 배치되는 텍스트 영역을 이미지로 변환하여 변환 이미지를 생성하는 단계 및 상기 변환 이미지에 대한 링크 및 상기 이미지에 대한 링크 중 적어도 하나가 상기 클라이언트에서 설정되면, 상기 이미지 및 상기 변환 이미지로 구성되는 이미지 구조체로 웹 페이지의 소스 코드를 구성하는 단계에 의해 달성된다.According to another aspect of the present invention, there is provided a web page creation system for providing a web edit interface to a network-connected client, the method comprising: placing a user-selected image and text at a user- Converting the text area in which the text is placed into an image to generate a transformed image, and if at least one of a link to the transformed image and a link to the transformed image is set in the client, ≪ / RTI > and the source code of the web page with the image structure to be rendered.

상기한 목적은 본 발명에 따라, 네트워크 접속되는 클라이언트 단말기로 웹 페이지 생성메뉴를 제공하며, 상기 클라이언트에서 사용자 선택된 이미지 및 사용자 설정된 텍스트를 상기 웹 페이지 생성 메뉴에서 사용자 설정된 위치에 배치 및 표시하고, 상기 텍스트가 표시되는 텍스트 영역을 변환하여 변환 이미지를 생성하며, 상기 이미지 및 상기 변환 이미지에 대한 링크(Link)가 설정된 후, 상기 웹 페이지를 이미지 구조체로 형성하여 웹 브라우저에 대한 호환성 및 상기 텍스트에 대한 폰트의 레이아웃을 유지하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템에 의해 달성된다.According to another aspect of the present invention, there is provided a web page creation menu for a client terminal connected to a network, wherein a client selected image and customized text are arranged and displayed at a user- A text area in which text is displayed is converted to generate a transformed image, and after a link to the image and the transformed image is set, the web page is formed into an image structure so that the compatibility with the web browser, And a web page creation system for web browser compatibility and font maintenance to maintain the font layout.

본 발명에 따르면, 웹 페이지를 구성하는 텍스트에 대한 변환 이미지를 이용하여 웹 페이지를 이미지 또는 변환 이미지를 중심으로 구성함으로써 웹 페이지가 이미지에 대한 경로 정보와 위치정보 위주로 표현될 수 있도록 한다. 이를 통해, 웹 브라우저의 종류나 버전에 상관없이 일관된 호환성을 유지토록 하며, 클라이언트에 설치된 폰트와 상관없이 웹 페이지의 텍스트가 표현될 수 있도록 한다.According to the present invention, a web page is composed mainly of an image or a transformed image by using a transformed image for texts constituting a web page, so that a web page can be expressed based on path information and position information on the image. This ensures consistent compatibility regardless of the type or version of the web browser, and allows the text of the web page to be rendered regardless of the font installed on the client.

도 1은 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템 및 그에 대한 연결관계에 대한 개념도를 도시한다.
도 2 내지 도 8은 클라이언트에 제공되는 웹 편집 인터페이스의 일 예에 대한 참조도면을 도시한다.
도 9는 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법의 흐름도를 도시한다.FIG. 1 is a conceptual diagram of a Web page creation system for maintaining Web browser compatibility and fonts according to an embodiment of the present invention, and a connection relationship therebetween.
Figures 2-8 show reference figures for an example of a web editing interface provided to a client.
FIG. 9 shows a flowchart of a web page compatibility method for web browser compatibility and font maintenance according to an embodiment of the present invention.

본 명세서에서 언급되는 "웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템"은 단일 서버 시스템으로 구현되거나, 또는 데이터 서버가 별도로 구비되는 형태의 복수 서버 시스템으로 구현될 수도 있다. 다만 한정하지는 않는다.The "Web page generation system for web browser compatibility and font maintenance" referred to in the present specification may be implemented in a single server system or in a multi-server system in which a data server is separately provided. However, it is not limited.

본 명세서에서 언급되는 클라이언트는 퍼스널 컴퓨터, 노트북, 및 기타 디스플레이장치와 입력장치를 구비하는 다양한 컴퓨팅 장치일 수 있다.Clients referred to herein may be various computing devices having personal computers, laptops, and other display devices and input devices.

본 명세서에서 언급되는 "이미지 구조체" 는 이미지를 중심으로 구성되는 웹 페이지 구조 또는 형상을 의미할 수 있다. As used herein, the term "image structure" may refer to a web page structure or shape that is constructed around an image.

또한, 언급되는 이미지는 정적인 이미지는 물론, 플래시 이미지 및 동영상과 같은 형태를 가질 수 있다. 이미지는 통상적으로, 웹 페이지에서 텍스트를 제외하고, 시각적으로 보여질 수 있는 영상의 형태를 지칭할 수 있다.In addition, the referred image may have the form of a static image, as well as a flash image and a moving image. An image can typically refer to a form of an image that can be visually viewed, excluding text on a web page.

본 명세서에서 언급되는 이미지 구조체 가 반드시 이미지로만 구성되고 텍스트가 완전히 배제되어야 하는 것은 아니다. 이미지 구조체는 이미지를 중심으로 구성되거나, 웹 페이지 전체를 이미지로 구성하는 웹 페이지의 구조나 형상을 지칭하나, 개발자의 필요에 따라, 웹 호환성을 따지지 않아도 되는 텍스트가 가용할 경우에는, 제한적으로 텍스트가 포함될 수는 있다. 다만 이러한 경우는 예외적인 것으로, 본 명세서에서 언급하는 이미지 구조체의 본질에 해당하는 것은 아니다.
The image structure referred to herein is necessarily composed of images only and the text should not be completely excluded. The image structure refers to the structure or shape of a web page that is composed mainly of an image or constitutes an entire web page as an image. However, when a text that does not require web compatibility is available according to the needs of a developer, May be included. However, this case is exceptional and does not correspond to the nature of the image structure referred to in this specification.

이하, 도면을 참조하여 본 발명을 상세히 설명하도록 한다.Hereinafter, the present invention will be described in detail with reference to the drawings.

도 1은 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템 및 클라이언트와의 연결관계에 대한 개념도를 도시한다.FIG. 1 is a conceptual diagram illustrating a Web page generation system for maintaining Web browser compatibility and fonts according to an embodiment of the present invention and a connection relationship with a client.

도 1을 참조하면, 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템(이하, "웹 페이지 생성시스템"이라 한다)은 클라이언트(10)와 유선 또는 무선 네트워크로 접속되며, 웹 편집 프로그램을 구동 후, 웹 편집 프로그램을 제어하기 위한 웹 편집 인터페이스를 클라이언트(10)로 제공한다.Referring to FIG. 1, a web page creation system (hereinafter referred to as a " web page creation system ") for web browser compatibility and font maintenance according to an embodiment is connected to a client 10 via a wired or wireless network, After running the program, a web editing interface for controlling the web editing program is provided to the client 10.

웹 편집 프로그램은 웹 페이지 생성시스템(100)에서 구동되는 것이 특징인데, 웹 페이지 생성시스템(100)에서 구동한 후, 클라이언트(10)로는 웹 편집 프로그램을 제어하기 위한 웹 편집 인터페이스를 제공하는 것이 특징이다.The web editing program is driven in the web page creation system 100. After the web editing system 100 is driven, the client 10 provides a web editing interface for controlling the web editing program to be.

즉, 통상의 웹 편집 프로그램은 클라이언트(10)에서 구동하고, 클라이언트(10)에서 구동한 후, 클라이언트(10)에 연결되는 디스플레이장치(11)로 웹 편집 인터페이스를 표시하고 있으나,That is, a typical web editing program runs on the client 10, and after running on the client 10, displays the web editing interface on the display device 11 connected to the client 10. However,

본 실시예에 따른 웹 페이지 생성시스템(100)은 클라이언트(10)가 네트워크 접속하여 웹 페이지 생성을 요청하면, 웹 편집 프로그램을 구동하고, 구동된 웹 편집 프로그램에 대한 웹 편집 인터페이스를 클라이언트(10)로 제공하는 특징이 있다.The web page creation system 100 according to the present embodiment activates the web editing program and transmits the web editing interface for the driven web editing program to the client 10 when the client 10 accesses the network and requests the web page creation, .

클라이언트(10)는 웹 편집 인터페이스를 통해 원하는 웹 페이지의 크기, 웹 페이지에 배치될 이미지나 텍스트 및 이들에 대한 위치정보를 설정할 수 있다. 즉, 클라이언트(10)는 웹 편집 인터페이스를 통해 클라이언트(10)에서 웹 편집 프로그램을 직접 이용하는 것처럼 쓸 수 있는데, 실제, 클라이언트(10)에는 웹 편집 프로그램이 설치되어 있지도 않고, 클라이언트(10)에서 구동하지도 않는다.The client 10 can set the size of a desired web page, the image or text to be placed on the web page, and the location information of the desired web page through the web editing interface. That is, the client 10 can be used as if the client 10 directly uses the web editing program through the web editing interface. Actually, the client 10 does not have the web editing program installed, I do not.

클라이언트(10)가 웹 편집 인터페이스를 이용하여 웹 페이지를 편집할 때, 클라이언트(10)의 사용자는 자신이 원하는 위치에 이미지를 배치하거나 또는 텍스트를 배치할 수 있다. 이때, 클라이언트(10)는 원하는 폰트 및 크기에 따라 텍스트를 설정할 수 있다. 그런데, 이때 클라이언트(10)에서 선택되는 폰트는 클라이언트(10)에 마련된 것이 아니라, 실시예에 따른 웹 페이지 생성시스템(100)에 마련된 폰트로서, 클라이언트(10)는 폰트에 대해 종속적이지 않고 오히려 독립적인 것이다.When the client 10 edits a web page using the web editing interface, the user of the client 10 can place the image or place the image at a desired position. At this time, the client 10 can set the text according to the desired font and size. However, the font selected by the client 10 at this time is not provided in the client 10 but is a font provided in the web page creation system 100 according to the embodiment. The client 10 is not dependent on the font, .

즉, 클라이언트(10)가 통상적인 웹 제작 프로그램을 이용하는 경우, 특별히 원하는 폰트가 있다면, 웹 페이지 제작을 위해, 클라이언트(10)에 해당 폰트가 설치되어야 한다. 반면, 본 실시예에서, 클라이언트(10)는 원하는 폰트를 구비하고 있을 필요는 없으며, 다만 웹 페이지 생성시스템(100)에 등록되어 있는 폰트를 이용하면 되는 것이다. 물론, 이를 위해, 웹 페이지 생성시스템(100)에는 클라이언트(10)에서 요구할 만한 폰트를 사전에 준비해둘 필요는 있다.That is, when the client 10 uses a typical web production program, if there is a desired font, the font must be installed in the client 10 for web page production. On the other hand, in the present embodiment, the client 10 does not need to have a desired font, but only uses a font registered in the web page creation system 100. [ Of course, for this purpose, the web page creation system 100 needs to prepare fonts that the client 10 can request in advance.

웹 페이지 생성시스템(100)은 클라이언트(10)로부터 웹 페이지의 크기(예컨대 가로 해상도와 세로 해상도) 정보, 웹 페이지에 배치되는 이미지 및 텍스트에 대한 정보, 이미지와 텍스트가 웹 페이지에서 배치되는 위치정보를 획득하여야하며, 이에 더하여, 텍스트의 폰트와 크기 정보 및 클라이언트(10)에서 웹 페이지에 삽입하기를 원하는 이미지 또는 이미지에 대한 경로 정보를 더 획득할 수 있다. 이하, 웹 페이지 생성시스템(100)에서 클라이언트(10)로부터 획득한 정보를 "사용자 설정 값"이라 지칭하도록 한다.The web page creation system 100 receives information on the size (e.g., horizontal resolution and vertical resolution) of the web page, information on the image and text placed on the web page, information on the position of the image and text on the web page In addition, the font and size information of the text and the path information of the image or image desired to be inserted into the web page by the client 10 can be further obtained. Hereinafter, the information acquired from the client 10 in the web page creation system 100 will be referred to as "user set value ".

클라이언트(10)에서 사용자 설정 값이 웹 페이지 생성시스템(100)에 전송되면, 웹 페이지 생성시스템(100)은 클라이언트(10)에서 전송한 사용자 설정 값에 따라 웹 페이지를 구성하고, 구성된 웹 페이지에 대한 화면을 클라이언트(10)로 제공하여 디스플레이장치(11)에서 표시되도록 한다.When the user setting value is transmitted to the web page creation system 100 by the client 10, the web page creation system 100 forms a web page according to the user setting value transmitted from the client 10, To the client (10) and displays it on the display device (11).

상기한 과정에 따라 구성된 웹 페이지는 웹 페이지 생성시스템(100)에서 컴파일되어 클라이언트(10)로 제공되거나 또는 클라이언트(10)가 지정한 타 서버로 제공될 수 있다. 여기서, 사용자 설정 값에 따라 구성된 웹 페이지에는 텍스트가 존재하지 않으므로, 텍스트를 구성하는 글자의 크기, 글자의 폰트 및 텍스트의 배치를 위한 HTML 소스 코드가 요구되지 않는다. The web page configured according to the above process may be compiled in the web page creation system 100 and provided to the client 10 or may be provided to another server designated by the client 10. Here, since there is no text in the web page configured according to the user setting value, the HTML source code for the size of the text constituting the text, the font of the character and the arrangement of the text is not required.

통상, 소스 코드를 구성 시, 텍스트의 입력은, 전술한 바와 같이, 텍스트를 구성하는 글자의 폰트와 크기부터 시작하여, 작성된 텍스트가 배치될 위치 정보에 이르는 소스 코드가 요구된다. 이러한 소스 코드는 웹 브라우저의 종류나 버전에 따라 서로 호환되지 않는 경우가 있다. 반면, 이미지를 입력하는 경우, 이미지의 링크 정보와 이미지가 배치될 위치정보만을 입력하면 되므로, 웹 브라우저의 종류나 버전에 따른 호환성 문제가 거의 없는 것이다.Normally, when the source code is constructed, the input of the text is required to start from the font and size of the letters constituting the text, as described above, and to reach the position information in which the created text is to be arranged. These source codes may not be compatible with each other depending on the type and version of the web browser. On the other hand, when inputting an image, only the link information of the image and the position information on which the image is to be placed can be input, so there is almost no compatibility problem depending on the type and version of the web browser.

본 출원인은 이러한 웹 브라우저의 특징을 참조하여 텍스트를 변환하여 변환 이미지를 형성한다. 변환 이미지는 JPG, GIF 및 PNG를 비롯하여 현존하는 다양한 이미지 포멧 중 하나일 수 있는데, 정적인 이미지 이외에 플래시 이미지나 동영상일 수 있다. 이는 변환 이미지도 동일하다.Applicants refer to the features of the web browser to transform text to form a transformed image. Converted images can be one of a variety of existing image formats, including JPG, GIF, and PNG, but can be flash images or movies in addition to static images. This is the same for the transformed image.

변환 이미지, 이미지 및 웹 페이지 구성을 위한 아이콘이나 메뉴 버튼 등은 기본적으로 이미지의 형태를 갖는데, 본 실시예에서는 이러한 이미지 중심의 웹 페이지 구조를 이미지 구조체라 정의하며, 이미지 구조체로 작성된 HTML 코드를 컴파일하여 웹 페이지를 구성할 경우, 구성된 웹 페이지는 웹 브라우저에 따른 호환성 문제에서 매우 자유로운 상태가 된다.In the present embodiment, the image-oriented web page structure is defined as an image structure, and the HTML code written in the image structure is compiled When a web page is composed, the configured web page becomes very free from the compatibility problem according to the web browser.

또한, 변환 이미지는 텍스트를 이미지화한 것이므로, 어떤 운영체제를 이용하든 또는 어떤 웹 브라우저를 이용하든지 간에 변환 이미지에서 표현되는 텍스트의 폰트와 크기는 유지될 수 있다. 즉, 텍스트를 이미지로 바꾸어 웹 페이지에서 표현되도록 하는 것이다. 웹 페이지에서 텍스트가 표시되는 텍스트 영역을 변환 이미지로 변환한 후, 텍스트 영역 중 텍스트가 표시되지 않는 영역은 배경 이미지로 대체될 필요가 있다. Also, since the converted image is an image of text, the font and size of the text expressed in the converted image can be maintained regardless of which operating system is used or which web browser is used. That is, the text is converted into an image and rendered on a web page. After converting a text area in which a text is displayed in a web page into a converted image, an area of the text area where the text is not displayed needs to be replaced with a background image.

이를 위해, 텍스트에 대한 변환 이미지를 생성할 때, 웹 페이지의 배경 이미지와 텍스트가 오버레이(Overlay) 되도록 함으로써, 마치 텍스트가 배경 이미지 상에서 자연스럽게 표현된 것처럼 나타낼 수 있다.To this end, when creating a transformed image for text, the background image and the text of the web page are overlaid so that the text appears as if it were rendered naturally on the background image.

바람직하게는, 웹 페이지 생성시스템(100)은 웹 편집 인터페이스 모듈(110), 변환이미지 생성모듈(120), 오버레이 처리모듈(130), 링크 모듈(140) 및 데이터베이스(150)를 포함하여 구성될 수 있다.Preferably, the web page creation system 100 comprises a web edit interface module 110, a transform image generation module 120, an overlay processing module 130, a link module 140, and a database 150 .

웹 편집 인터페이스 모듈(110)은 웹 페이지 생성시스템(100)에서 구동된 웹 편집 프로그램의 제어를 위한 웹 편집 인터페이스를 클라이언트(10)로 제공하며, 클라이언트(10)가 웹 편집 인터페이스를 통해 텍스트를 입력하거나, 이미지를 입력하거나, 또는 텍스트와 이미지에 대한 위치정보를 설정하거나, 또는 동영상 링크를 설정하거나 기타, 웹 페이지를 편집하는 경우, 텍스트의 폰트, 크기, 위치, 이미지에 대한 링크 정보, 이미지의 크기, 이미지의 위치정보 및 기타 웹 페이지 편집을 위해 입력하는 설정 값에 대한 사용자 설정 값을 클라이언트(10)로부터 획득할 수 있다. 획득한 사용자 설정 값을 이용하여 웹 편집 인터페이스 모듈(110)은 웹 페이지를 구성할 수 있으며, 구성된 웹 페이지에 대한 화면은 클라이언트(10)로 제공될 수 있다.The web editing interface module 110 provides a web editing interface for controlling the web editing program driven by the web page generating system 100 to the client 10. When the client 10 inputs text through the web editing interface Size, location, link information to the image, and the like of the image, when inputting the image, setting the location information for the text and the image, setting the video link, or otherwise editing the web page Size, location information of the image, and user setting values for setting values to input for other web page editing from the client 10. The web editing interface module 110 may configure a web page using the acquired user setting values, and a screen for the configured web page may be provided to the client 10.

변환 이미지 생성모듈(120)은 클라이언트(10)가 웹 편집 인터페이스를 이용하여 입력한 텍스트를 변환하여 변환 이미지를 생성한다.The converted image generation module 120 converts the text entered by the client 10 using the web edit interface to generate a converted image.

변환 이미지는 텍스트를 JPG, GIF, PNG 및 기타 다양한 형태의 이미지 파일로 변환할 수 있는데, 변환 이미지는 클라이언트(10)에서 텍스트 입력을 위해 텍스트 입력 영역을 설정할 때, 텍스트 입력 영역에 대한 이미지일 수 있다. The converted image can convert the text into JPG, GIF, PNG, and various other types of image files. When the client 10 sets the text input area for text input in the client 10, have.

예컨대, 클라이언트(10)가 디스플레이장치(11)에 표시된 웹 페이지 영역에서, 일 영역을 텍스트 입력 영역으로 설정하고, 텍스트를 입력하면, 해당 텍스트와 텍스트가 입력되는 텍스트 입력 영역에 대해 변환 이미지를 생성할 수 있는 것이다. 이때, 변환 이미지는 웹 페이지에 배경 이미지가 존재하는 경우, 배경 이미지를 고려하여 생성될 필요가 있다. For example, when the client 10 sets one area as a text input area in the web page area displayed on the display device 11 and inputs text, the conversion image is generated for the text input area in which the text and the text are input You can do it. At this time, the converted image needs to be generated in consideration of the background image when the background image exists in the web page.

오버레이 처리모듈(130)은 클라이언트(10)가 웹 편집 인터페이스를 이용하여 텍스트를 기입하였을 때, 기입된 텍스트가 배경 이미지상에 위치하는가를 판단하며, 판단 결과, 텍스트가 배경 이미지상에 표현되는 것일 경우, 배경 이미지에 텍스트를 오버레이 처리하고, 오버레이 처리한 배경 이미지를 변환 이미지 생성모듈(120)로 제공한다. 오버레이 처리된 텍스트는 배경 이미지상에서 텍스트가 표현되므로, 오버레이 처리된 텍스트에 대해 변환 이미지를 생성 시, 텍스트 입력 영역이 마치 배경 이미지인 것처럼 표현되므로 배경 이미지와 이질적이지 않게 표현될 수 있다. The overlay processing module 130 determines whether the written text is located on the background image when the client 10 writes the text using the web editing interface and if the text is displayed on the background image Overlaying the text on the background image, and providing the overlaid background image to the transformed image generation module 120. Since the overlaid text is rendered on the background image, the text input area is rendered as if it were a background image, so that it can be displayed in a non-heterogeneous manner when the converted image is generated for the overlaid text.

여기서, 배경 이미지는 웹 페이지 전체에 걸쳐 하나인 경우가 많으나, 반드시 하나인 것은 아니다. 웹 페이지를 복수의 영역으로 구획하고, 각 영역에 배치되는 개별 이미지가 배경 이미지로서 이용될 수도 있는 것이다. 따라서, 배경 이미지는 웹 페이지 전체에 걸쳐 통용되는 하나의 이미지만을 지칭하는 것은 아니며, 일반 이미지상에 텍스트가 기입되는 경우, 일반 이미지도 배경 이미지라고 할 수 있다. Here, the background image is often one in the entire web page, but it is not necessarily one. The web page may be divided into a plurality of regions, and individual images arranged in each region may be used as a background image. Therefore, the background image does not refer to only one image commonly used throughout the web page, and when the text is written on the general image, the general image may also be referred to as the background image.

링크 모듈(140)은 이미지 구조체로 형성되는 본 발명의 웹 페이지에서, 웹 페이지에 배열되는 각 이미지에 대한 링크 정보를 의미할 수 있다. 웹 페이지에 삽입될 이미지가 클라이언트(10)에 위치하는 경우, 이미지에 대한 링크 정보는 클라이언트(10)로 설정될 수 있고,The link module 140 may refer to link information for each image arranged in a web page in a web page of the present invention formed of an image structure. If an image to be inserted in the web page is located in the client 10, the link information for the image can be set in the client 10,

웹 페이지에 삽입되는 이미지가 웹 페이지 생성시스템(100)에 위치하는 경우 웹 페이지 생성시스템(100)으로 설정될 수 있으며,When an image to be inserted into a web page is located in the web page creation system 100, it may be set to the web page creation system 100,

웹 페이지에 삽입되는 이미지가 외부의 타 컴퓨터나 서버인 경우, 이미지가 위치하는 타 컴퓨터나 서버로 링크 정보가 설정될 수 있다. 링크 정보는 클라이언트(10)에서 웹 편집 인터페이스를 이용하여 설정될 수 있으며, 링크 모듈(140)는 웹 편집 인터페이스를 통해 제공되는 링크 정보를 수신하여 웹 편집 인터페이스 모듈(110)에서 컴파일하여 생성할 웹 페이지에 적용할 수 있는 것이다. 여기서, 변환 이미지는 웹 편집 인터페이스 모듈(110)에서 클라이언트(10)가 기입한 텍스트를 변환하는 것이므로, 변환 이미지에 대한 링크 정보는 데이터베이스(150)로 설정될 수 있다. 이는, 웹 편집 인터페이스 모듈(110)에서 텍스트에 대한 변환 이미지를 생성 후, 생성된 변환 이미지가 데이터베이스(150)에 저장되는데 따른 것이다. If the image to be embedded in the web page is another external computer or server, the link information can be set to another computer or server where the image is located. The link information can be set using the web editing interface in the client 10. The link module 140 receives the link information provided through the web editing interface, It can be applied to the page. Here, since the converted image is to convert the text written by the client 10 in the web editing interface module 110, the link information for the converted image can be set in the database 150. This is because the converted image for the text is generated in the web editing interface module 110 and then the generated converted image is stored in the database 150. [

도 2 내지 도 8은 클라이언트에 제공되는 웹 편집 인터페이스의 일 예에 대한 참조도면을 도시한다. 도 2 내지 도 8을 함께 참조하여 설명하도록 한다. Figures 2-8 show reference figures for an example of a web editing interface provided to a client. 2 to 8 will be described together.

먼저, 도 2는 클라이언트(10)에 제공되는 웹 편집 인터페이스에 대한 메인 인터페이스의 일 예를 도시한 것으로서, 2 shows an example of a main interface for a web editing interface provided to the client 10,

웹 편집 인터페이스의 중심부에는 웹 페이지가 표현될 배치 영역(51)이 마련되고, 배치 영역(51)의 상단에는 해상도 설정메뉴(53)가 마련되며, 배치 영역(51) 및 해상도 설정메뉴(53)와 이웃한 영역에는 기능 메뉴(52)가 마련될 수 있다. A resolution setting menu 53 is provided at the top of the layout area 51 and a layout area 51 and a resolution setting menu 53 are provided at the center of the web editing interface. And a function menu 52 may be provided in a neighboring area.

배치 영역(51)은 클라이언트(10)에서 삽입하는 이미지나 텍스트가 배치되는 공간으로, 여기에 배치된 이미지나 텍스트가 웹 편집 인터페이스 모듈(110)에서 컴파일 되어 웹 페이지로 구현될 수 있다.The layout area 51 is a space in which an image or text to be inserted by the client 10 is arranged. An image or text arranged here can be compiled in the web editing interface module 110 and implemented as a web page.

배치 영역(51)은 해상도 설정메뉴(53)을 통해 가로 세로 크기가 설정될 수 있다. 도 2에서는 가로 세로 각각 700, 660픽셀로 설정된 일 예를 도시하고 있다.The layout area 51 can be set in the horizontal and vertical sizes through the resolution setting menu 53. [ FIG. 2 shows an example in which the width and length are set to 700 and 660 pixels, respectively.

기능 메뉴(52)는 웹 페이지 작성 시, 클라이언트에서 필요로 하는 기능, 예컨대, 배경 이미지 선택, 텍스트 삽입, 표 삽입, 버튼 삽입, 이미지 삽입, 아이콘 삽입, HTML 편집, 편집된 웹 패이지 저장, 페이지 복사 및 기 제작된 웹 페이지 불러오기 기능 중 적어도 하나에 대한 기능에 대한 메뉴로 구성될 수 있다. 도면에서, 기능 메뉴(52)는 샘플선택 메뉴, 페이지 복사 메뉴, 불러오기 메뉴, 배경 이미지 메뉴(52a), 글자 삽입 메뉴(52b), 표 삽입 메뉴(52c), 버튼 삽입 메뉴(52d), 이미지 삽입 메뉴(52e), 아이콘 메뉴(52f) 및 HTML 편집 메뉴가 예시되고 있다.The function menu 52 is used for creating a web page by using functions required by the client such as selecting a background image, inserting text, inserting a table, inserting a button, inserting an image, inserting an icon, editing HTML, And a function for at least one of the created web page retrieval functions. In the drawing, the function menu 52 includes a sample selection menu, a page copy menu, an import menu, a background image menu 52a, a character insertion menu 52b, a table insertion menu 52c, a button insertion menu 52d, An insert menu 52e, an icon menu 52f, and an HTML edit menu are illustrated.

도 2에 도시된 기능 메뉴들 중 배경화면 메뉴(52a)가 사용자 선택되면, 웹 편집 인터페이스에는 클라이언트(10)에서 선택 가능한 배경화면에 대한 이미지가 나열될 수 있고, 클라이언트(10)에서 선택된 배경화면을 배치 영역(51)에 표시할 수 있다. 이는 도 3을 함께 참조하여 설명하도록 한다.When the background menu 52a is selected from among the function menus shown in FIG. 2, the web editing interface can list the images of the background images selectable by the client 10, Can be displayed in the arrangement area 51. [ This will be described with reference to FIG.

도 3을 참조하면, 배치 영역(51)에는 배경 이미지(54)가 표시되고, 배경 이미지(54)가 표시된 상태에서 텍스트 영역(55)이 설정되는 일 예를 도시하고 있다.3, a background image 54 is displayed in the layout area 51, and a text area 55 is set in a state that the background image 54 is displayed.

텍스트 영역(55)은 클라이언트(10)에서 텍스트 입력을 위해 할당한 영역을 의미하는데, 텍스트 영역(55)에 기입된 텍스트를 변환 이미지로 변환할 때, 텍스트 영역(55)이 함께 이미지로 변환될 수 있다. 만일, 텍스트 영역(55)이 배경 이미지(54) 위에 배치될 경우, 변환 이미지가 주변의 배경 이미지(54)와 차별되므로 배경 이미지(54)와 변환 이미지가 부자연스럽게 배치될 수 있다. 이에 따라, 본 실시예에서는 텍스트 영역(55)이 배경 이미지(54)와 겹치게 될 경우, 배경 이미지(54)에 텍스트를 오버레이 처리하고, 오버레이 처리된 텍스트에 대한 변환 이미지를 생성함으로써, 텍스트가 배경 이미지(54)와 조화를 이룰 수 있도록 하는 것이다. 도 3에서 텍스트는 배경 이미지(54)에 포함되는 갈매기 이미지(54a)에 오버랩 되어 표현되므로 배경 이미지(54) 및 배경 이미지(54)에 포함되는 갈매기 이미지(54a)를 손상시키지 않는다.The text area 55 is an area allocated for text input by the client 10. When the text written in the text area 55 is converted into a converted image, the text area 55 is converted into an image together . If the text area 55 is placed on the background image 54, the converted image is differentiated from the surrounding background image 54, so that the background image 54 and the converted image can be arranged unnaturally. Accordingly, in the present embodiment, when the text area 55 overlaps the background image 54, the text is overlaid on the background image 54, and the converted image for the overlaid text is generated, So that it can be harmonized with the image 54. 3, the text is rendered overlapped with the gull image 54a included in the background image 54, so that the gull image 54a included in the background image 54 and the background image 54 is not damaged.

도 4는 도 2에 도시된 이미지 삽입 메뉴(52e)가 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.Fig. 4 shows an example of an interface screen displayed on the web editing interface when the image insertion menu 52e shown in Fig. 2 is selected.

도 4를 참조하면, 이미지 삽입 메뉴(52a)에는 이미지 형식선택 메뉴(56)가 마련되며, 이미지 형식선택 메뉴(56)를 통해 클라이언트(10)에 마련되는 이미지 또는 웹 페이지 생성시스템(100)에서 제공하는 이미지 중 어느 하나를 선택하도록 하며, 만일, 클라이언트(10)가 웹 페이지 생성시스템(100)에서 제공하는 이미지를 선택하고자 하는 경우, 참조부호 "58"에 도시된 바와 같이, 웹 페이지 생성시스템(100)에서 제공하는 이미지에 대한 섬네일 이미지가 나열될 수 있다. 섬네일 이미지들(58) 중 클라이언트(10)에서 선택된 것은 배치 영역(51)에 표시될 수 있는데, 클라이언트(10)의 사용자는 마우스와 같은 입력장치를 이용하여 해당 섬네일 이미지에 대한 전체 이미지를 드래그 앤 드롭(drag and drop)하여 원하는 위치에 배치할 수 있다.4, an image format selection menu 56 is provided in the image insertion menu 52a and an image format selection menu 56 is provided in the image or web page creation system 100 provided in the client 10 via the image format selection menu 56 If the client 10 desires to select an image provided by the web page creation system 100, as shown in reference numeral 58, the web page creation system 100 may select one of the images provided by the web page creation system 100, A thumbnail image for an image provided by the image processing apparatus 100 may be listed. The thumbnail images 58 selected in the client 10 may be displayed in the layout area 51. The user of the client 10 may use the input device such as a mouse to drag and drop the entire image for the thumbnail image, You can drag and drop to place it at the desired location.

도 5는 도 2에 도시된 표 삽입 메뉴(52c)가 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.5 shows an example of an interface screen displayed on the web editing interface when the table insertion menu 52c shown in Fig. 2 is selected.

도 5를 참조하면, 도 2에 도시된 표 삽입 메뉴(52c)가 클라이언트(10)에서 선택되었을 때, 인터페이스 화면에는 표 설정 메뉴(59)가 표시되며, 표 설정 메뉴(59)에는 표의 줄 수, 칸 수, 테두리의 모양, 테두리의 색상을 설정하기 위한 메뉴들이 표시되며, 부가적으로, 클라이언트(10)에 저장된 엑셀 파일을 호출하는 메뉴가 포함될 수 있다.5, when the table insertion menu 52c shown in FIG. 2 is selected in the client 10, the table setting menu 59 is displayed on the interface screen. In the table setting menu 59, A menu for setting the color of the border, and a menu for calling an Excel file stored in the client 10 may be included.

도 6은 도 5에 도시된 표 삽입 메뉴(52c)를 통해 생성된 표가 배경 이미지(54)에 표시되는 일 예를 도시한다.FIG. 6 shows an example in which a table generated through the table insertion menu 52c shown in FIG. 5 is displayed in the background image 54. FIG.

도 6을 참조하면, 도 5를 통해 설명된 표 설정 방법에 따라 생성된 표는 배경 이미지(54)의 중심부에 표시되고 있다. 여기서, 클라이언트(10)는 마우스와 같은 입력장치를 이용하여 표(60)를 드래그 앤 드롭하여 배치 영역(51)에서 원하는 위치로 이동시킬 수 있으며, 표(60)의 크기를 리사이징(Re-sizing)할 수도 있다.Referring to FIG. 6, the table generated according to the table setting method described with reference to FIG. 5 is displayed at the center of the background image 54. Here, the client 10 can drag and drop the table 60 using an input device such as a mouse to move the table 60 to a desired position in the placement area 51, and resize the size of the table 60 )You may.

도 7은 도 2에 도시된 글자 삽입 메뉴(52b)가 클라이언트(10)에서 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.7 shows an example of an interface screen displayed on the web editing interface when the character inserting menu 52b shown in Fig. 2 is selected in the client 10. Fig.

도 7을 참조하면, 글자 삽입 메뉴(52b)는 글꼴 선택 메뉴(52b1)를 포함하며, 글꼴 선택 메뉴(52b1)를 통해 원하는 폰트를 선택하고, 선택한 폰트의 텍스트를 배치 영역(51)에 표시되도록 할 수 있다.Referring to FIG. 7, the text insertion menu 52b includes a font selection menu 52b1, selects a desired font through the font selection menu 52b1, and displays the text of the selected font in the layout area 51 can do.

그런데, 글꼴 선택 메뉴(52b1)dp 등록된 폰트는 클라이언트(10)에 마련되는 폰트가 아니며, 웹 페이지 생성시스템(100)에 마련되는 폰트로서, 클라이언트(10)는 웹 페이지 구성을 위해, 폰트를 구비하여야 할 필요는 없다. 이에 따라, 통상의 클라이언트(10)가 웹 페이지 구성을 위해, 필요한 폰트를 모두 구해서 클라이언트(10)에 설치하여야 하는 부담이 발생하지 않는다.However, the font selection menu 52b1 dp registered font is not a font provided in the client 10 but is a font provided in the web page creation system 100. The client 10 uses a font It is not necessary to be provided. This eliminates the burden of the ordinary client 10 having to obtain all necessary fonts and configure them in the client 10 for the web page configuration.

도 8은 도 2에 도시된 HTML 편집 메뉴를 클라이언트가 선택하였을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.FIG. 8 illustrates an example of an interface screen displayed on the web editing interface when the client selects the HTML editing menu shown in FIG. 2. FIG.

도 8을 참조하면, HTML 편집 메뉴는 통상의 웹 페이지 제작 툴에서도 이용되는 것이다. 본 발명에서는 도 8에 도시된 HTML 편집 메뉴가 필수적으로 요구되는 것은 아니나, 클라이언트(10) 사용자가 이전에 이용되던 HTML 편집기를 필요로 할 경우에 대비하여 준비해 둔 것이다.Referring to FIG. 8, the HTML editing menu is also used in a normal web page creation tool. In the present invention, the HTML editing menu shown in FIG. 8 is not necessarily required, but it is prepared in case that the user of the client 10 needs an HTML editor previously used.

도 8에 도시된 HTML 편집기는 통상적인 HTML 편집기로서, 다만, 본 출원인이 기존의 HTML 편집기를 이용하는 유저를 배려하는 차원의 메뉴임을 밝혀둔다. 따라서, 도 8에 대한 상세한 설명은 생략하도록 한다.The HTML editor shown in FIG. 8 is a conventional HTML editor, but it is noted that the present applicant is a menu of a level that considers a user using an existing HTML editor. Therefore, a detailed description of FIG. 8 will be omitted.

도 9는 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법의 흐름도를 도시한다. 도 9에 대한 설명은 도 1 내지 도 8에 대한 도면과 설명을 함께 참조하도록 한다. FIG. 9 shows a flowchart of a web page compatibility method for web browser compatibility and font maintenance according to an embodiment of the present invention. The description of FIG. 9 will be made with reference to FIGS. 1 to 8 together with the drawings and the description.

도 9를 참조하면, 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법은, Referring to FIG. 9, a web page compatibility method for web browser compatibility and font maintenance according to an embodiment of the present invention includes:

먼저, 클라이언트(10)에서 웹 페이지 생성시스템(100)에 네트워크 접속하고, 네트워크 접속 후, 웹 편집 인터페이스를 요구한다. 웹 페이지 생성시스템(100)은 이에 응답하여, 웹 편집 프로그램을 구동하고, 웹 편집 프로그램을 구동 한 후, 도 2 내지 도 8에 도시된 것과 같은 웹 편집 인터페이스를 클라이언트(10)로 제공할 수 있다. 즉, 웹 페이지는 클라이언트에서 편집하는 반면, 웹 편집 프로그램은 웹 페이지 생성시스템(100)에서 구동되는 것이다. First, the client 10 connects to the web page creation system 100 via a network, and after the network connection, requests a web edit interface. In response, the web page creation system 100 may run a web editing program, run the web editing program, and then provide the web editing interface to the client 10 as shown in FIGS. 2-8 . That is, while the web page is edited by the client, the web editing program is driven by the web page creation system 100.

다음으로, 클라이언트(10)는 웹 편집 인터페이스를 이용하여 배치 영역(51)에 이미지(정적인 이미지 또는 동적인 이미지), 텍스트 및 기타 링크를 설정할 수 있다. 만일, 클라이언트(10)에서 배치 영역(51)에 텍스트를 기입하는 경우, 웹 편집 인터페이스는 기입된 텍스트, 텍스트의 크기와 폰트 및 텍스트가 배치 영역(51)에서 배치되는 위치정보 등을 포함하는 텍스트 정보를 작성하고 이를 웹 페이지 생성시스템(100)으로 제공한다. 웹 페이지 생성시스템(100)은 텍스트 정보를 토대로 변환 이미지를 생성하여 클라이언트(10)로 제공하거나 또는 데이터베이스(150)에 저장할 수 있는데, 여기서,Next, the client 10 can set an image (static image or dynamic image), text, and other links in the layout area 51 using a web editing interface. If the client 10 writes the text in the layout area 51, the web editing interface will display the text including the written text, the size of the text, the font, and the text containing the location information in the layout area 51 And provides it to the web page creation system 100. [ The web page creation system 100 may generate a conversion image based on the text information and provide it to the client 10 or store it in the database 150,

1) 텍스트가 배경 이미지(54)가 존재하지 않는 영역에 배치되는 경우, 텍스트, 및 텍스트를 기입하기 위해 클라이언트(10)에서 설정된 텍스트 영역(55)을 함께 이미지로 변환하여 변환 이미지를 생성하고,1) When the text is placed in an area in which the background image 54 is not present, the text and the text area 55 set in the client 10 for writing text are converted together into an image to generate a converted image,

2) 텍스트가 배경 이미지(54)상에 존재하는 경우, 텍스트를 배경 이미지(54)에 오버레이 처리하여 배경 이미지(54) 상에서 텍스트가 표현되도록 하고, 이에 대한 변환 이미지를 생성한다. 2) If the text is present on the background image 54, the text is overlaid on the background image 54 to render the text on the background image 54, and a transformed image is generated for it.

클라이언트(10)가 웹 편집 인터페이스를 통해 웹 페이지 생성을 위한 편집을 마치면, 웹 페이지 생성시스템(100)에 사용자 설정 값을 제공하고, 웹 페이지 생성시스템(100)은 사용자 설정 값을 토대로 웹 페이지를 컴파일하며, 최종 생성된 웹 페이지 화면을 클라이언트(10)로 제공할 수 있다.When the client 10 finishes editing for generating a web page through the web editing interface, the client 10 provides a user setting value to the web page generating system 100, and the web page generating system 100 generates a web page Compile, and provide the final generated web page screen to the client 10.

10 : 클라이언트 100 : 웹 페이지 생성시스템10: Client 100: Web page creation system

Claims (11)

네트워크 접속되는 클라이언트로 웹 편집 인터페이스를 제공하는 웹 페이지 생성시스템에 의해 수행되며,
상기 클라이언트에서 사용자 선택된 이미지 및 텍스트를 상기 웹 편집 인터페이스의 사용자 설정된 위치에 배치하는 단계;
상기 텍스트가 배치되는 텍스트 영역을 이미지로 변환하여 변환 이미지를 생성하는 단계; 및
상기 변환 이미지에 대한 링크 및 상기 이미지에 대한 링크 중 적어도 하나가 상기 클라이언트에서 설정되면, 상기 이미지 및 상기 변환 이미지로 구성되는 이미지 구조체로 웹 페이지의 소스 코드를 구성하는 단계;를 포함하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.A web page creation system that provides a web edit interface to a network-connected client,
Placing a user-selected image and text at the client at a customized location of the web editing interface;
Converting a text area in which the text is placed into an image to generate a transformed image; And
And configuring the source code of the web page with the image structure composed of the image and the converted image if at least one of the link to the converted image and the link to the image is set in the client A web page creation method for web browser compatibility and font maintenance. 제1항에 있어서,
상기 변환 이미지는,
배경 이미지와 중첩되는 중첩 영역을 상기 배경 이미지로 대체하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.The method according to claim 1,
The transformed image may include:
Wherein the background image is replaced with the background image that overlaps the background image. 제2항에 있어서,
상기 중첩 영역은,
상기 배경 이미지에 상기 텍스트가 오버레이된 오버레이 영역에 대응하며,
상기 변환 이미지는 상기 오버레이 영역에 대한 이미지인 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.3. The method of claim 2,
The overlapping area may include:
Wherein the background image corresponds to an overlay area overlaid with the text,
Wherein the transformed image is an image for the overlay region. ≪ RTI ID = 0.0 > 11. < / RTI > 제1항에 있어서,
상기 변환 이미지는,
상기 웹 페이지 생성시스템에서 생성되며, 상기 변환 이미지는 상기 웹 페이지 생성시스템에 링크가 설정되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.The method according to claim 1,
The transformed image may include:
Wherein the converted image is generated in the web page creation system, and the converted image is linked to the web page creation system. 제1항에 있어서,
상기 이미지 및 변환 이미지는,
상기 웹 페이지에 대한 소스 코드에서 각각에 대한 링크 정보 및 좌표 정보로 표현되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.The method according to claim 1,
The image and the transformed image may be transformed,
And the link information and the coordinate information for each of the plurality of web pages in the source code for the web page. 제1항에 있어서,
상기 웹 편집 인터페이스는,
상기 이미지 및 상기 변환 이미지를 배치하기 위한 배치 영역; 및
상기 배치 영역의 일 측에 마련되며, 상기 배치 영역이 상기 디스플레이장치에서 표시될 해상도 설정을 위한 해상도 설정메뉴;를 포함하여 구성되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.The method according to claim 1,
Wherein the web editing interface comprises:
A placement area for placing the image and the transformed image; And
And a resolution setting menu provided at one side of the layout area and configured to set a resolution at which the layout area is to be displayed on the display device. 제6항에 있어서,
상기 배치 영역과 이웃하게 마련되며, 배경 이미지 선택, 텍스트 삽입, 표 삽입, 버튼 삽입, 이미지 삽입, 아이콘 삽입, HTML 편집, 편집된 웹 패이지 저장, 페이지 복사 및 기 제작된 웹 페이지 불러오기 기능 중 적어도 하나에 대한 메뉴를 더 포함하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.The method according to claim 6,
The image processing apparatus is provided with a background image selection function, at least one of a background image selection, a text insertion, a table insertion, a button insertion, an image insertion, an icon insertion, an HTML editing, And a menu for one of the plurality of web pages. 네트워크 접속되는 클라이언트 단말기로 웹 편집 인터페이스를 제공하며,
상기 클라이언트에서 사용자 선택된 이미지 및 사용자 설정된 텍스트를 상기 웹 편집 인터페이스에서 사용자 설정된 위치에 배치 및 표시하고,
상기 텍스트가 표시되는 텍스트 영역을 변환하여 변환 이미지를 생성하며,
상기 이미지 및 상기 변환 이미지에 대한 링크(Link)가 설정된 후, 상기 웹 페이지를 이미지 구조체로 형성하여 웹 브라우저에 대한 호환성 및 상기 텍스트에 대한 폰트의 레이아웃을 유지하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.A web editing interface is provided to a client terminal connected to the network,
Placing and displaying a user-selected image and customized text at a client at a customized location in the web editing interface,
Converting the text area in which the text is displayed to generate a transformed image,
And a link to the image and the converted image is set, then the web page is formed into an image structure so as to maintain the compatibility with the web browser and the layout of the font with respect to the text. Web page creation system for maintenance. 제8항에 있어서,
상기 변환 이미지는,
배경 이미지와 중첩되는 중첩 영역을 상기 배경 이미지로 대체하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.9. The method of claim 8,
The transformed image may include:
Wherein the background image is replaced with the background image which overlaps with the background image. 제9항에 있어서,
상기 중첩 영역은,
상기 배경 이미지에 상기 텍스트가 오버레이된 오버레이 영역에 대응하며,
상기 변환 이미지는 상기 오버레이 영역에 대한 이미지인 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.10. The method of claim 9,
The overlapping area may include:
Wherein the background image corresponds to an overlay area overlaid with the text,
Wherein the converted image is an image for the overlay area. ≪ RTI ID = 0.0 > 11. < / RTI > 제8항에 있어서,
상기 이미지 및 변환 이미지는,
상기 웹 페이지에 대한 소스 코드에서 각각에 대한 링크 정보 및 좌표 정보로 표현되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.9. The method of claim 8,
The image and the transformed image may be transformed,
Wherein the web page is represented by link information and coordinate information for each of the source code for the web page.
KR1020130080206A 2013-07-09 2013-07-09 Web page making system and method for maintaining compatibility of web browser and font KR101546359B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020130080206A KR101546359B1 (en) 2013-07-09 2013-07-09 Web page making system and method for maintaining compatibility of web browser and font

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020130080206A KR101546359B1 (en) 2013-07-09 2013-07-09 Web page making system and method for maintaining compatibility of web browser and font

Publications (2)

Publication Number Publication Date
KR20150006612A true KR20150006612A (en) 2015-01-19
KR101546359B1 KR101546359B1 (en) 2015-08-27

Family

ID=52569898

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020130080206A KR101546359B1 (en) 2013-07-09 2013-07-09 Web page making system and method for maintaining compatibility of web browser and font

Country Status (1)

Country Link
KR (1) KR101546359B1 (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101697290B1 (en) * 2016-08-17 2017-01-17 주식회사 아티컴퍼니 Method and system for making homepage using web browser
CN109144567A (en) * 2018-08-03 2019-01-04 苏州麦迪斯顿医疗科技股份有限公司 Cross-platform webpage rendering method, device, server and storage medium
CN114020187A (en) * 2021-10-26 2022-02-08 济南浪潮数据技术有限公司 Font icon display method and device and electronic equipment

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100586561B1 (en) * 2003-09-06 2006-06-07 (주)우리랑월드 Method and system for creating homepage using module insertion program

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101697290B1 (en) * 2016-08-17 2017-01-17 주식회사 아티컴퍼니 Method and system for making homepage using web browser
WO2018034509A1 (en) * 2016-08-17 2018-02-22 주식회사 아티컴퍼니 Website creating method and system implemented in web browser
CN109144567A (en) * 2018-08-03 2019-01-04 苏州麦迪斯顿医疗科技股份有限公司 Cross-platform webpage rendering method, device, server and storage medium
CN109144567B (en) * 2018-08-03 2021-09-14 苏州麦迪斯顿医疗科技股份有限公司 Cross-platform webpage rendering method and device, server and storage medium
CN114020187A (en) * 2021-10-26 2022-02-08 济南浪潮数据技术有限公司 Font icon display method and device and electronic equipment
CN114020187B (en) * 2021-10-26 2024-02-23 济南浪潮数据技术有限公司 Font icon display method and device and electronic equipment

Also Published As

Publication number Publication date
KR101546359B1 (en) 2015-08-27

Similar Documents

Publication Publication Date Title
JP7354294B2 (en) System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout
US20230036518A1 (en) System and method for smart interaction between website components
US11216253B2 (en) Application prototyping tool
US9047261B2 (en) Document editing method
US7487447B1 (en) Web page zoom feature
US11790158B1 (en) System and method for using a dynamic webpage editor
US20100037168A1 (en) Systems and methods for webpage design
EP2495667A1 (en) System, method, and program for editing of electronic document
US20170075530A1 (en) System and method for creating and displaying previews of content items for electronic works
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
TW201329852A (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
JP7420911B2 (en) Systems and methods for smart interactions between website components
US20170161354A1 (en) Chart conversion system and method using metadata
KR101546359B1 (en) Web page making system and method for maintaining compatibility of web browser and font
US9483569B2 (en) Electronic-manual browsing apparatus and system
US20140281922A1 (en) Application of a system font mapping to a design
CN117055987A (en) Webpage display method and device, electronic equipment and computer readable storage medium
EP1691278B1 (en) Method and computer system for editing documents
US11526578B2 (en) System and method for producing transferable, modular web pages
KR102298752B1 (en) Method for authoring electronic document, Apparatus for authoring electronic document and Computer program for the same
CN112068826A (en) Text input control method, system, electronic device and storage medium
AU2022246444B2 (en) System and method for smart interaction between website components
JP2019016072A (en) Information processing apparatus and program
KR20230165506A (en) Method and electronic device for editing widget
Powers Adobe Dreamweaver CS5. 5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5, and CSS3

Legal Events

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

Payment date: 20190625

Year of fee payment: 5