KR101546359B1 - 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템 - Google Patents

웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템 Download PDF

Info

Publication number
KR101546359B1
KR101546359B1 KR1020130080206A KR20130080206A KR101546359B1 KR 101546359 B1 KR101546359 B1 KR 101546359B1 KR 1020130080206 A KR1020130080206 A KR 1020130080206A KR 20130080206 A KR20130080206 A KR 20130080206A KR 101546359 B1 KR101546359 B1 KR 101546359B1
Authority
KR
South Korea
Prior art keywords
image
text
web page
web
client
Prior art date
Application number
KR1020130080206A
Other languages
English (en)
Other versions
KR20150006612A (ko
Inventor
이태윤
김남현
Original Assignee
애니라인주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 애니라인주식회사 filed Critical 애니라인주식회사
Priority to KR1020130080206A priority Critical patent/KR101546359B1/ko
Publication of KR20150006612A publication Critical patent/KR20150006612A/ko
Application granted granted Critical
Publication of KR101546359B1 publication Critical patent/KR101546359B1/ko

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

본 발명에 따른 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 생성시스템은, 웹 페이지를 구성하는 텍스트에 대한 변환 이미지를 이용하여 웹 페이지를 이미지 또는 변환 이미지를 중심으로 하는 이미지 구조체로 구성함으로써 웹 페이지가 이미지에 대한 경로 정보와 위치정보 위주로 표현될 수 있도록 한다. 이를 통해, 웹 브라우저의 종류나 버전에 상관없이 일관된 호환성을 유지토록 하며, 클라이언트에 설치된 폰트와 상관없이 웹 페이지의 텍스트가 표현될 수 있도록 한다.

Description

웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템{Web page making system and method for maintaining compatibility of web browser and font}
본 발명은 웹 페이지 생성방법 및 생성시스템에 관한 것으로, 더욱 상세하게는 웹 브라우저의 호환성을 유지하고, 웹 브라우저에 이용되는 텍스트의 폰트가 유지될 수 있도록 하며, 클라이언트에 웹 편집 프로그램을 설치하지 않고도 웹 페이지를 구성할 수 있도록 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템에 관한 것이다.
인터넷 접속을 위해 전 세계적으로 이용되는 웹 브라우저는 크게 인터넷 익스플로러(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 코드를 개별적으로 개발해야 하는 경우도 있다. 이는 개발자 입장에서, 웹 페이지 구현을 위해 유사한 작업을 반복해야 하는 부담으로 작용하며, 클라이언트 입장에서 웹 브라우저의 선택과 사용에 제한을 받는 부담이 있다.
한국의 경우 윈도우즈(Windows) 계열 운영체제의 편중이 심하고, 액티브 액스를 이용한 금융 결제가 많이 이루어지는 관계로, 2013년 6월 기준으로 인터넷 익스플로러의 점유율은 67.58%에 이른다. 이러한 편중 현상은 HTML 표준에 따르지 않는 인터넷 익스플로러가 주로 이용됨을 의미하며, 클라이언트가 HTML 표준에 따른 웹 페이지에 접속할 경우, 애초 웹 페이지를 개발한 개발자의 의도와 다르게 웹 페이지가 표현될 수 있음을 의미한다.
상기한 문제점에 따라 웹 페이지를 개발할 때, 개발자는 HTML 표준에 맞추어 HTML 코드를 작성하거나 또는 익스플로러에 맞추어 작성 후, 작성된 HTML 코드에 의해 표현되는 웹 페이지가 클라이언트에서 어떻게 표현되는지를 고려하여야 한다. 더욱이, HTML 코드로 웹 페이지를 전문적으로 개발하는 개발자 이외에 일반인들이 웹 페이지를 구성하고자 하는 경우 이러한 HTML 호환성 문제는 웹 페이지 작성을 더욱 어렵게 만들 수 있다.
또한, HTML 코드를 작성하는 웹 페이지 개발 툴(Tool)에서 지원되는 폰트가 클라이언트에 마련되지 않는 경우, 클라이언트는 해당 폰트를 다른 폰트로 대체하여 웹 페이지에 표현하여야 하므로, 최초 웹 페이지를 개발한 개발자의 의도대로 웹 페이지가 표현되지 않을 수 있다.
상기한 호환성 문제에 대해 공개특허 10-2010-0100161에서는 클라이언트에 설치된 운영체제의 정보와 클라이언트에 설치된 웹 브라우저 정보를 참조하여 웹 콘텐츠의 기준이미지 정보 및 이에 대한 테스트 이미지의 표현 결과를 참조하여 상기 클라이언트에 대한 웹 호환성을 판단하는 웹 콘텐츠의 브라우저 호환성 검사장치를 제안한 바 있다. 공개특허 10-2010-0100161는 웹 브라우저의 호환성 검사를 통해 웹 콘텐츠 제작의 생산성을 향상시키고 있다.
그러나, 공개특허 10-2010-0100161은 개발자에 의해 제작된 웹 페이지의 호환성을 검사할 수는 있어도, 개발 단계의 웹 페이지 호환성을 보장하는 것은 아니며, 애초부터 웹 페이지를 제작할 때, 이러한 작업이 필요 없다면 웹 페이지 개발이 더욱 효율적이라는 것은 별도로 부연설명할 필요가 없을 것이다.
본 발명의 목적은 클라이언트와 네트워크 접속되는 서버 시스템에서 웹 페이지를 생성하도록 하며,
생성되는 웹 페이지가 웹 브라우저의 종류 및 버전에 의해 표현 양태가 변경되지 않도록 함은 물론, 웹 페이지에 기재되는 텍스트의 폰트가 유지될 수 있도록 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템을 제공함에 있다.
상기한 목적은 본 발명에 따라, 네트워크 접속되는 클라이언트로 웹 편집 인터페이스를 제공하는 웹 페이지 생성시스템에 의해 수행되며, 상기 클라이언트에서 사용자 선택된 이미지 및 텍스트를 상기 웹 편집 인터페이스의 사용자 설정된 위치에 배치하는 단계, 상기 텍스트가 배치되는 텍스트 영역을 이미지로 변환하여 변환 이미지를 생성하는 단계 및 상기 변환 이미지에 대한 링크 및 상기 이미지에 대한 링크 중 적어도 하나가 상기 클라이언트에서 설정되면, 상기 이미지 및 상기 변환 이미지로 구성되는 이미지 구조체로 웹 페이지의 소스 코드를 구성하는 단계에 의해 달성된다.
상기한 목적은 본 발명에 따라, 네트워크 접속되는 클라이언트 단말기로 웹 페이지 생성메뉴를 제공하며, 상기 클라이언트에서 사용자 선택된 이미지 및 사용자 설정된 텍스트를 상기 웹 페이지 생성 메뉴에서 사용자 설정된 위치에 배치 및 표시하고, 상기 텍스트가 표시되는 텍스트 영역을 변환하여 변환 이미지를 생성하며, 상기 이미지 및 상기 변환 이미지에 대한 링크(Link)가 설정된 후, 상기 웹 페이지를 이미지 구조체로 형성하여 웹 브라우저에 대한 호환성 및 상기 텍스트에 대한 폰트의 레이아웃을 유지하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템에 의해 달성된다.
본 발명에 따르면, 웹 페이지를 구성하는 텍스트에 대한 변환 이미지를 이용하여 웹 페이지를 이미지 또는 변환 이미지를 중심으로 구성함으로써 웹 페이지가 이미지에 대한 경로 정보와 위치정보 위주로 표현될 수 있도록 한다. 이를 통해, 웹 브라우저의 종류나 버전에 상관없이 일관된 호환성을 유지토록 하며, 클라이언트에 설치된 폰트와 상관없이 웹 페이지의 텍스트가 표현될 수 있도록 한다.
도 1은 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템 및 그에 대한 연결관계에 대한 개념도를 도시한다.
도 2 내지 도 8은 클라이언트에 제공되는 웹 편집 인터페이스의 일 예에 대한 참조도면을 도시한다.
도 9는 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법의 흐름도를 도시한다.
본 명세서에서 언급되는 "웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템"은 단일 서버 시스템으로 구현되거나, 또는 데이터 서버가 별도로 구비되는 형태의 복수 서버 시스템으로 구현될 수도 있다. 다만 한정하지는 않는다.
본 명세서에서 언급되는 클라이언트는 퍼스널 컴퓨터, 노트북, 및 기타 디스플레이장치와 입력장치를 구비하는 다양한 컴퓨팅 장치일 수 있다.
본 명세서에서 언급되는 "이미지 구조체" 는 이미지를 중심으로 구성되는 웹 페이지 구조 또는 형상을 의미할 수 있다.
또한, 언급되는 이미지는 정적인 이미지는 물론, 플래시 이미지 및 동영상과 같은 형태를 가질 수 있다. 이미지는 통상적으로, 웹 페이지에서 텍스트를 제외하고, 시각적으로 보여질 수 있는 영상의 형태를 지칭할 수 있다.
본 명세서에서 언급되는 이미지 구조체 가 반드시 이미지로만 구성되고 텍스트가 완전히 배제되어야 하는 것은 아니다. 이미지 구조체는 이미지를 중심으로 구성되거나, 웹 페이지 전체를 이미지로 구성하는 웹 페이지의 구조나 형상을 지칭하나, 개발자의 필요에 따라, 웹 호환성을 따지지 않아도 되는 텍스트가 가용할 경우에는, 제한적으로 텍스트가 포함될 수는 있다. 다만 이러한 경우는 예외적인 것으로, 본 명세서에서 언급하는 이미지 구조체의 본질에 해당하는 것은 아니다.
이하, 도면을 참조하여 본 발명을 상세히 설명하도록 한다.
도 1은 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템 및 클라이언트와의 연결관계에 대한 개념도를 도시한다.
도 1을 참조하면, 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템(이하, "웹 페이지 생성시스템"이라 한다)은 클라이언트(10)와 유선 또는 무선 네트워크로 접속되며, 웹 편집 프로그램을 구동 후, 웹 편집 프로그램을 제어하기 위한 웹 편집 인터페이스를 클라이언트(10)로 제공한다.
웹 편집 프로그램은 웹 페이지 생성시스템(100)에서 구동되는 것이 특징인데, 웹 페이지 생성시스템(100)에서 구동한 후, 클라이언트(10)로는 웹 편집 프로그램을 제어하기 위한 웹 편집 인터페이스를 제공하는 것이 특징이다.
즉, 통상의 웹 편집 프로그램은 클라이언트(10)에서 구동하고, 클라이언트(10)에서 구동한 후, 클라이언트(10)에 연결되는 디스플레이장치(11)로 웹 편집 인터페이스를 표시하고 있으나,
본 실시예에 따른 웹 페이지 생성시스템(100)은 클라이언트(10)가 네트워크 접속하여 웹 페이지 생성을 요청하면, 웹 편집 프로그램을 구동하고, 구동된 웹 편집 프로그램에 대한 웹 편집 인터페이스를 클라이언트(10)로 제공하는 특징이 있다.
클라이언트(10)는 웹 편집 인터페이스를 통해 원하는 웹 페이지의 크기, 웹 페이지에 배치될 이미지나 텍스트 및 이들에 대한 위치정보를 설정할 수 있다. 즉, 클라이언트(10)는 웹 편집 인터페이스를 통해 클라이언트(10)에서 웹 편집 프로그램을 직접 이용하는 것처럼 쓸 수 있는데, 실제, 클라이언트(10)에는 웹 편집 프로그램이 설치되어 있지도 않고, 클라이언트(10)에서 구동하지도 않는다.
클라이언트(10)가 웹 편집 인터페이스를 이용하여 웹 페이지를 편집할 때, 클라이언트(10)의 사용자는 자신이 원하는 위치에 이미지를 배치하거나 또는 텍스트를 배치할 수 있다. 이때, 클라이언트(10)는 원하는 폰트 및 크기에 따라 텍스트를 설정할 수 있다. 그런데, 이때 클라이언트(10)에서 선택되는 폰트는 클라이언트(10)에 마련된 것이 아니라, 실시예에 따른 웹 페이지 생성시스템(100)에 마련된 폰트로서, 클라이언트(10)는 폰트에 대해 종속적이지 않고 오히려 독립적인 것이다.
즉, 클라이언트(10)가 통상적인 웹 제작 프로그램을 이용하는 경우, 특별히 원하는 폰트가 있다면, 웹 페이지 제작을 위해, 클라이언트(10)에 해당 폰트가 설치되어야 한다. 반면, 본 실시예에서, 클라이언트(10)는 원하는 폰트를 구비하고 있을 필요는 없으며, 다만 웹 페이지 생성시스템(100)에 등록되어 있는 폰트를 이용하면 되는 것이다. 물론, 이를 위해, 웹 페이지 생성시스템(100)에는 클라이언트(10)에서 요구할 만한 폰트를 사전에 준비해둘 필요는 있다.
웹 페이지 생성시스템(100)은 클라이언트(10)로부터 웹 페이지의 크기(예컨대 가로 해상도와 세로 해상도) 정보, 웹 페이지에 배치되는 이미지 및 텍스트에 대한 정보, 이미지와 텍스트가 웹 페이지에서 배치되는 위치정보를 획득하여야하며, 이에 더하여, 텍스트의 폰트와 크기 정보 및 클라이언트(10)에서 웹 페이지에 삽입하기를 원하는 이미지 또는 이미지에 대한 경로 정보를 더 획득할 수 있다. 이하, 웹 페이지 생성시스템(100)에서 클라이언트(10)로부터 획득한 정보를 "사용자 설정 값"이라 지칭하도록 한다.
클라이언트(10)에서 사용자 설정 값이 웹 페이지 생성시스템(100)에 전송되면, 웹 페이지 생성시스템(100)은 클라이언트(10)에서 전송한 사용자 설정 값에 따라 웹 페이지를 구성하고, 구성된 웹 페이지에 대한 화면을 클라이언트(10)로 제공하여 디스플레이장치(11)에서 표시되도록 한다.
상기한 과정에 따라 구성된 웹 페이지는 웹 페이지 생성시스템(100)에서 컴파일되어 클라이언트(10)로 제공되거나 또는 클라이언트(10)가 지정한 타 서버로 제공될 수 있다. 여기서, 사용자 설정 값에 따라 구성된 웹 페이지에는 텍스트가 존재하지 않으므로, 텍스트를 구성하는 글자의 크기, 글자의 폰트 및 텍스트의 배치를 위한 HTML 소스 코드가 요구되지 않는다.
통상, 소스 코드를 구성 시, 텍스트의 입력은, 전술한 바와 같이, 텍스트를 구성하는 글자의 폰트와 크기부터 시작하여, 작성된 텍스트가 배치될 위치 정보에 이르는 소스 코드가 요구된다. 이러한 소스 코드는 웹 브라우저의 종류나 버전에 따라 서로 호환되지 않는 경우가 있다. 반면, 이미지를 입력하는 경우, 이미지의 링크 정보와 이미지가 배치될 위치정보만을 입력하면 되므로, 웹 브라우저의 종류나 버전에 따른 호환성 문제가 거의 없는 것이다.
본 출원인은 이러한 웹 브라우저의 특징을 참조하여 텍스트를 변환하여 변환 이미지를 형성한다. 변환 이미지는 JPG, GIF 및 PNG를 비롯하여 현존하는 다양한 이미지 포멧 중 하나일 수 있는데, 정적인 이미지 이외에 플래시 이미지나 동영상일 수 있다. 이는 변환 이미지도 동일하다.
변환 이미지, 이미지 및 웹 페이지 구성을 위한 아이콘이나 메뉴 버튼 등은 기본적으로 이미지의 형태를 갖는데, 본 실시예에서는 이러한 이미지 중심의 웹 페이지 구조를 이미지 구조체라 정의하며, 이미지 구조체로 작성된 HTML 코드를 컴파일하여 웹 페이지를 구성할 경우, 구성된 웹 페이지는 웹 브라우저에 따른 호환성 문제에서 매우 자유로운 상태가 된다.
또한, 변환 이미지는 텍스트를 이미지화한 것이므로, 어떤 운영체제를 이용하든 또는 어떤 웹 브라우저를 이용하든지 간에 변환 이미지에서 표현되는 텍스트의 폰트와 크기는 유지될 수 있다. 즉, 텍스트를 이미지로 바꾸어 웹 페이지에서 표현되도록 하는 것이다. 웹 페이지에서 텍스트가 표시되는 텍스트 영역을 변환 이미지로 변환한 후, 텍스트 영역 중 텍스트가 표시되지 않는 영역은 배경 이미지로 대체될 필요가 있다.
이를 위해, 텍스트에 대한 변환 이미지를 생성할 때, 웹 페이지의 배경 이미지와 텍스트가 오버레이(Overlay) 되도록 함으로써, 마치 텍스트가 배경 이미지 상에서 자연스럽게 표현된 것처럼 나타낼 수 있다.
바람직하게는, 웹 페이지 생성시스템(100)은 웹 편집 인터페이스 모듈(110), 변환이미지 생성모듈(120), 오버레이 처리모듈(130), 링크 모듈(140) 및 데이터베이스(150)를 포함하여 구성될 수 있다.
웹 편집 인터페이스 모듈(110)은 웹 페이지 생성시스템(100)에서 구동된 웹 편집 프로그램의 제어를 위한 웹 편집 인터페이스를 클라이언트(10)로 제공하며, 클라이언트(10)가 웹 편집 인터페이스를 통해 텍스트를 입력하거나, 이미지를 입력하거나, 또는 텍스트와 이미지에 대한 위치정보를 설정하거나, 또는 동영상 링크를 설정하거나 기타, 웹 페이지를 편집하는 경우, 텍스트의 폰트, 크기, 위치, 이미지에 대한 링크 정보, 이미지의 크기, 이미지의 위치정보 및 기타 웹 페이지 편집을 위해 입력하는 설정 값에 대한 사용자 설정 값을 클라이언트(10)로부터 획득할 수 있다. 획득한 사용자 설정 값을 이용하여 웹 편집 인터페이스 모듈(110)은 웹 페이지를 구성할 수 있으며, 구성된 웹 페이지에 대한 화면은 클라이언트(10)로 제공될 수 있다.
변환 이미지 생성모듈(120)은 클라이언트(10)가 웹 편집 인터페이스를 이용하여 입력한 텍스트를 변환하여 변환 이미지를 생성한다.
변환 이미지는 텍스트를 JPG, GIF, PNG 및 기타 다양한 형태의 이미지 파일로 변환할 수 있는데, 변환 이미지는 클라이언트(10)에서 텍스트 입력을 위해 텍스트 입력 영역을 설정할 때, 텍스트 입력 영역에 대한 이미지일 수 있다.
예컨대, 클라이언트(10)가 디스플레이장치(11)에 표시된 웹 페이지 영역에서, 일 영역을 텍스트 입력 영역으로 설정하고, 텍스트를 입력하면, 해당 텍스트와 텍스트가 입력되는 텍스트 입력 영역에 대해 변환 이미지를 생성할 수 있는 것이다. 이때, 변환 이미지는 웹 페이지에 배경 이미지가 존재하는 경우, 배경 이미지를 고려하여 생성될 필요가 있다.
오버레이 처리모듈(130)은 클라이언트(10)가 웹 편집 인터페이스를 이용하여 텍스트를 기입하였을 때, 기입된 텍스트가 배경 이미지상에 위치하는가를 판단하며, 판단 결과, 텍스트가 배경 이미지상에 표현되는 것일 경우, 배경 이미지에 텍스트를 오버레이 처리하고, 오버레이 처리한 배경 이미지를 변환 이미지 생성모듈(120)로 제공한다. 오버레이 처리된 텍스트는 배경 이미지상에서 텍스트가 표현되므로, 오버레이 처리된 텍스트에 대해 변환 이미지를 생성 시, 텍스트 입력 영역이 마치 배경 이미지인 것처럼 표현되므로 배경 이미지와 이질적이지 않게 표현될 수 있다.
여기서, 배경 이미지는 웹 페이지 전체에 걸쳐 하나인 경우가 많으나, 반드시 하나인 것은 아니다. 웹 페이지를 복수의 영역으로 구획하고, 각 영역에 배치되는 개별 이미지가 배경 이미지로서 이용될 수도 있는 것이다. 따라서, 배경 이미지는 웹 페이지 전체에 걸쳐 통용되는 하나의 이미지만을 지칭하는 것은 아니며, 일반 이미지상에 텍스트가 기입되는 경우, 일반 이미지도 배경 이미지라고 할 수 있다.
링크 모듈(140)은 이미지 구조체로 형성되는 본 발명의 웹 페이지에서, 웹 페이지에 배열되는 각 이미지에 대한 링크 정보를 의미할 수 있다. 웹 페이지에 삽입될 이미지가 클라이언트(10)에 위치하는 경우, 이미지에 대한 링크 정보는 클라이언트(10)로 설정될 수 있고,
웹 페이지에 삽입되는 이미지가 웹 페이지 생성시스템(100)에 위치하는 경우 웹 페이지 생성시스템(100)으로 설정될 수 있으며,
웹 페이지에 삽입되는 이미지가 외부의 타 컴퓨터나 서버인 경우, 이미지가 위치하는 타 컴퓨터나 서버로 링크 정보가 설정될 수 있다. 링크 정보는 클라이언트(10)에서 웹 편집 인터페이스를 이용하여 설정될 수 있으며, 링크 모듈(140)는 웹 편집 인터페이스를 통해 제공되는 링크 정보를 수신하여 웹 편집 인터페이스 모듈(110)에서 컴파일하여 생성할 웹 페이지에 적용할 수 있는 것이다. 여기서, 변환 이미지는 웹 편집 인터페이스 모듈(110)에서 클라이언트(10)가 기입한 텍스트를 변환하는 것이므로, 변환 이미지에 대한 링크 정보는 데이터베이스(150)로 설정될 수 있다. 이는, 웹 편집 인터페이스 모듈(110)에서 텍스트에 대한 변환 이미지를 생성 후, 생성된 변환 이미지가 데이터베이스(150)에 저장되는데 따른 것이다.
도 2 내지 도 8은 클라이언트에 제공되는 웹 편집 인터페이스의 일 예에 대한 참조도면을 도시한다. 도 2 내지 도 8을 함께 참조하여 설명하도록 한다.
먼저, 도 2는 클라이언트(10)에 제공되는 웹 편집 인터페이스에 대한 메인 인터페이스의 일 예를 도시한 것으로서,
웹 편집 인터페이스의 중심부에는 웹 페이지가 표현될 배치 영역(51)이 마련되고, 배치 영역(51)의 상단에는 해상도 설정메뉴(53)가 마련되며, 배치 영역(51) 및 해상도 설정메뉴(53)와 이웃한 영역에는 기능 메뉴(52)가 마련될 수 있다.
배치 영역(51)은 클라이언트(10)에서 삽입하는 이미지나 텍스트가 배치되는 공간으로, 여기에 배치된 이미지나 텍스트가 웹 편집 인터페이스 모듈(110)에서 컴파일 되어 웹 페이지로 구현될 수 있다.
배치 영역(51)은 해상도 설정메뉴(53)을 통해 가로 세로 크기가 설정될 수 있다. 도 2에서는 가로 세로 각각 700, 660픽셀로 설정된 일 예를 도시하고 있다.
기능 메뉴(52)는 웹 페이지 작성 시, 클라이언트에서 필요로 하는 기능, 예컨대, 배경 이미지 선택, 텍스트 삽입, 표 삽입, 버튼 삽입, 이미지 삽입, 아이콘 삽입, HTML 편집, 편집된 웹 패이지 저장, 페이지 복사 및 기 제작된 웹 페이지 불러오기 기능 중 적어도 하나에 대한 기능에 대한 메뉴로 구성될 수 있다. 도면에서, 기능 메뉴(52)는 샘플선택 메뉴, 페이지 복사 메뉴, 불러오기 메뉴, 배경 이미지 메뉴(52a), 글자 삽입 메뉴(52b), 표 삽입 메뉴(52c), 버튼 삽입 메뉴(52d), 이미지 삽입 메뉴(52e), 아이콘 메뉴(52f) 및 HTML 편집 메뉴가 예시되고 있다.
도 2에 도시된 기능 메뉴들 중 배경화면 메뉴(52a)가 사용자 선택되면, 웹 편집 인터페이스에는 클라이언트(10)에서 선택 가능한 배경화면에 대한 이미지가 나열될 수 있고, 클라이언트(10)에서 선택된 배경화면을 배치 영역(51)에 표시할 수 있다. 이는 도 3을 함께 참조하여 설명하도록 한다.
도 3을 참조하면, 배치 영역(51)에는 배경 이미지(54)가 표시되고, 배경 이미지(54)가 표시된 상태에서 텍스트 영역(55)이 설정되는 일 예를 도시하고 있다.
텍스트 영역(55)은 클라이언트(10)에서 텍스트 입력을 위해 할당한 영역을 의미하는데, 텍스트 영역(55)에 기입된 텍스트를 변환 이미지로 변환할 때, 텍스트 영역(55)이 함께 이미지로 변환될 수 있다. 만일, 텍스트 영역(55)이 배경 이미지(54) 위에 배치될 경우, 변환 이미지가 주변의 배경 이미지(54)와 차별되므로 배경 이미지(54)와 변환 이미지가 부자연스럽게 배치될 수 있다. 이에 따라, 본 실시예에서는 텍스트 영역(55)이 배경 이미지(54)와 겹치게 될 경우, 배경 이미지(54)에 텍스트를 오버레이 처리하고, 오버레이 처리된 텍스트에 대한 변환 이미지를 생성함으로써, 텍스트가 배경 이미지(54)와 조화를 이룰 수 있도록 하는 것이다. 도 3에서 텍스트는 배경 이미지(54)에 포함되는 갈매기 이미지(54a)에 오버랩 되어 표현되므로 배경 이미지(54) 및 배경 이미지(54)에 포함되는 갈매기 이미지(54a)를 손상시키지 않는다.
도 4는 도 2에 도시된 이미지 삽입 메뉴(52e)가 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.
도 4를 참조하면, 이미지 삽입 메뉴(52a)에는 이미지 형식선택 메뉴(56)가 마련되며, 이미지 형식선택 메뉴(56)를 통해 클라이언트(10)에 마련되는 이미지 또는 웹 페이지 생성시스템(100)에서 제공하는 이미지 중 어느 하나를 선택하도록 하며, 만일, 클라이언트(10)가 웹 페이지 생성시스템(100)에서 제공하는 이미지를 선택하고자 하는 경우, 참조부호 "58"에 도시된 바와 같이, 웹 페이지 생성시스템(100)에서 제공하는 이미지에 대한 섬네일 이미지가 나열될 수 있다. 섬네일 이미지들(58) 중 클라이언트(10)에서 선택된 것은 배치 영역(51)에 표시될 수 있는데, 클라이언트(10)의 사용자는 마우스와 같은 입력장치를 이용하여 해당 섬네일 이미지에 대한 전체 이미지를 드래그 앤 드롭(drag and drop)하여 원하는 위치에 배치할 수 있다.
도 5는 도 2에 도시된 표 삽입 메뉴(52c)가 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.
도 5를 참조하면, 도 2에 도시된 표 삽입 메뉴(52c)가 클라이언트(10)에서 선택되었을 때, 인터페이스 화면에는 표 설정 메뉴(59)가 표시되며, 표 설정 메뉴(59)에는 표의 줄 수, 칸 수, 테두리의 모양, 테두리의 색상을 설정하기 위한 메뉴들이 표시되며, 부가적으로, 클라이언트(10)에 저장된 엑셀 파일을 호출하는 메뉴가 포함될 수 있다.
도 6은 도 5에 도시된 표 삽입 메뉴(52c)를 통해 생성된 표가 배경 이미지(54)에 표시되는 일 예를 도시한다.
도 6을 참조하면, 도 5를 통해 설명된 표 설정 방법에 따라 생성된 표는 배경 이미지(54)의 중심부에 표시되고 있다. 여기서, 클라이언트(10)는 마우스와 같은 입력장치를 이용하여 표(60)를 드래그 앤 드롭하여 배치 영역(51)에서 원하는 위치로 이동시킬 수 있으며, 표(60)의 크기를 리사이징(Re-sizing)할 수도 있다.
도 7은 도 2에 도시된 글자 삽입 메뉴(52b)가 클라이언트(10)에서 선택되었을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.
도 7을 참조하면, 글자 삽입 메뉴(52b)는 글꼴 선택 메뉴(52b1)를 포함하며, 글꼴 선택 메뉴(52b1)를 통해 원하는 폰트를 선택하고, 선택한 폰트의 텍스트를 배치 영역(51)에 표시되도록 할 수 있다.
그런데, 글꼴 선택 메뉴(52b1)dp 등록된 폰트는 클라이언트(10)에 마련되는 폰트가 아니며, 웹 페이지 생성시스템(100)에 마련되는 폰트로서, 클라이언트(10)는 웹 페이지 구성을 위해, 폰트를 구비하여야 할 필요는 없다. 이에 따라, 통상의 클라이언트(10)가 웹 페이지 구성을 위해, 필요한 폰트를 모두 구해서 클라이언트(10)에 설치하여야 하는 부담이 발생하지 않는다.
도 8은 도 2에 도시된 HTML 편집 메뉴를 클라이언트가 선택하였을 때, 웹 편집 인터페이스에 표시되는 인터페이스 화면의 일 예를 도시한다.
도 8을 참조하면, HTML 편집 메뉴는 통상의 웹 페이지 제작 툴에서도 이용되는 것이다. 본 발명에서는 도 8에 도시된 HTML 편집 메뉴가 필수적으로 요구되는 것은 아니나, 클라이언트(10) 사용자가 이전에 이용되던 HTML 편집기를 필요로 할 경우에 대비하여 준비해 둔 것이다.
도 8에 도시된 HTML 편집기는 통상적인 HTML 편집기로서, 다만, 본 출원인이 기존의 HTML 편집기를 이용하는 유저를 배려하는 차원의 메뉴임을 밝혀둔다. 따라서, 도 8에 대한 상세한 설명은 생략하도록 한다.
도 9는 본 발명의 일 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법의 흐름도를 도시한다. 도 9에 대한 설명은 도 1 내지 도 8에 대한 도면과 설명을 함께 참조하도록 한다.
도 9를 참조하면, 실시예에 따른 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법은,
먼저, 클라이언트(10)에서 웹 페이지 생성시스템(100)에 네트워크 접속하고, 네트워크 접속 후, 웹 편집 인터페이스를 요구한다. 웹 페이지 생성시스템(100)은 이에 응답하여, 웹 편집 프로그램을 구동하고, 웹 편집 프로그램을 구동 한 후, 도 2 내지 도 8에 도시된 것과 같은 웹 편집 인터페이스를 클라이언트(10)로 제공할 수 있다. 즉, 웹 페이지는 클라이언트에서 편집하는 반면, 웹 편집 프로그램은 웹 페이지 생성시스템(100)에서 구동되는 것이다.
다음으로, 클라이언트(10)는 웹 편집 인터페이스를 이용하여 배치 영역(51)에 이미지(정적인 이미지 또는 동적인 이미지), 텍스트 및 기타 링크를 설정할 수 있다. 만일, 클라이언트(10)에서 배치 영역(51)에 텍스트를 기입하는 경우, 웹 편집 인터페이스는 기입된 텍스트, 텍스트의 크기와 폰트 및 텍스트가 배치 영역(51)에서 배치되는 위치정보 등을 포함하는 텍스트 정보를 작성하고 이를 웹 페이지 생성시스템(100)으로 제공한다. 웹 페이지 생성시스템(100)은 텍스트 정보를 토대로 변환 이미지를 생성하여 클라이언트(10)로 제공하거나 또는 데이터베이스(150)에 저장할 수 있는데, 여기서,
1) 텍스트가 배경 이미지(54)가 존재하지 않는 영역에 배치되는 경우, 텍스트, 및 텍스트를 기입하기 위해 클라이언트(10)에서 설정된 텍스트 영역(55)을 함께 이미지로 변환하여 변환 이미지를 생성하고,
2) 텍스트가 배경 이미지(54)상에 존재하는 경우, 텍스트를 배경 이미지(54)에 오버레이 처리하여 배경 이미지(54) 상에서 텍스트가 표현되도록 하고, 이에 대한 변환 이미지를 생성한다.
클라이언트(10)가 웹 편집 인터페이스를 통해 웹 페이지 생성을 위한 편집을 마치면, 웹 페이지 생성시스템(100)에 사용자 설정 값을 제공하고, 웹 페이지 생성시스템(100)은 사용자 설정 값을 토대로 웹 페이지를 컴파일하며, 최종 생성된 웹 페이지 화면을 클라이언트(10)로 제공할 수 있다.
10 : 클라이언트 100 : 웹 페이지 생성시스템

Claims (11)

  1. 네트워크 접속되는 클라이언트로 웹 편집 인터페이스를 제공하는 웹 페이지 생성시스템에 의해 수행되며,
    상기 클라이언트에서 사용자 선택된 이미지를 상기 웹 편집 인터페이스의 사용자 설정된 위치에 배치하는 단계;
    상기 클라이언트에서 텍스트 및 상기 텍스트가 배치되는 텍스트 영역을 상기 웹 편집 인터페이스의 사용자 설정된 위치에 배치하는 단계;
    상기 텍스트 영역이 상기 사용자 선택된 이미지와 중첩되지 않는 경우, 상기 텍스트 및 상기 텍스트 영역을 변환하여 변환 이미지를 생성하는 단계;
    상기 텍스트 영역이 상기 사용자 선택된 이미지와 중첩되는 경우, 중첩되는 영역을 상기 사용자 선택된 이미지로 대체하고, 대체된 이미지에 상기 텍스트를 오버레이 처리한 후, 오버레이 처리된 영역에 대해 변환 이미지를 생성하는 단계; 및
    상기 변환 이미지에 대한 링크 및 상기 사용자 선택된 이미지에 대한 링크 중 적어도 하나가 상기 클라이언트에서 설정되면, 상기 사용자 선택된 이미지 및 상기 변환 이미지로 구성되는 이미지 구조체로 웹 페이지의 소스 코드를 구성하는 단계;를 포함하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.
  2. 삭제
  3. 삭제
  4. 제1항에 있어서,
    상기 변환 이미지는,
    상기 웹 페이지 생성시스템에서 생성되며, 상기 변환 이미지는 상기 웹 페이지 생성시스템에 링크가 설정되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.
  5. 제1항에 있어서,
    상기 사용자 선택된 이미지 및 변환 이미지는,
    상기 웹 페이지에 대한 소스 코드에서 각각에 대한 링크 정보 및 좌표 정보로 표현되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.
  6. 제1항에 있어서,
    상기 웹 편집 인터페이스는,
    상기 사용자 선택된 이미지 및 상기 변환 이미지를 배치하기 위한 배치 영역; 및
    상기 배치 영역의 일 측에 마련되며, 상기 배치 영역이 디스플레이장치에서 표시될 해상도 설정을 위한 해상도 설정메뉴;를 포함하여 구성되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.
  7. 제6항에 있어서,
    상기 배치 영역과 이웃하게 마련되며, 배경 이미지 선택, 텍스트 삽입, 표 삽입, 버튼 삽입, 이미지 삽입, 아이콘 삽입, HTML 편집, 편집된 웹 패이지 저장, 페이지 복사 및 기 제작된 웹 페이지 불러오기 기능 중 적어도 하나에 대한 메뉴를 더 포함하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법.
  8. 네트워크 접속되는 클라이언트 단말기로 웹 편집 인터페이스를 제공하며,
    상기 클라이언트에서 사용자 선택된 이미지를 상기 웹 편집 인터페이스에서 사용자 설정된 위치에 배치 및 표시하고,
    상기 클라이언트에서 사용자 설정된 텍스트 및 상기 텍스트가 표시되는 텍스트 영역을 상기 웹 편집 인터페이스에서 사용자 설정된 위치에 배치 및 표시하고,
    상기 텍스트 영역이 상기 사용자 선택된 이미지와 중첩되지 않는 경우, 상기 텍스트 및 상기 텍스트 영역을 변환하여 변환 이미지를 생성하고,
    상기 텍스트 영역이 상기 사용자 선택된 이미지와 중첩되는 경우, 중첩되는 영역을 상기 사용자 선택된 이미지로 대체하고, 대체된 이미지에 상기 텍스트를 오버레이 처리한 후, 오버레이 처리된 영역에 대해 변환 이미지를 생성하며,
    상기 사용자 선택된 이미지 및 상기 변환 이미지에 대한 링크(Link)가 설정된 후, 상기 웹 페이지를 이미지 구조체로 형성하여 웹 브라우저에 대한 호환성 및 상기 텍스트에 대한 폰트의 레이아웃을 유지하는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.
  9. 삭제
  10. 삭제
  11. 제8항에 있어서,
    상기 사용자 선택된 이미지 및 변환 이미지는,
    상기 웹 페이지에 대한 소스 코드에서 각각에 대한 링크 정보 및 좌표 정보로 표현되는 것을 특징으로 하는 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성시스템.
KR1020130080206A 2013-07-09 2013-07-09 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템 KR101546359B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020130080206A KR101546359B1 (ko) 2013-07-09 2013-07-09 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020130080206A KR101546359B1 (ko) 2013-07-09 2013-07-09 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템

Publications (2)

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

Family

ID=52569898

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020130080206A KR101546359B1 (ko) 2013-07-09 2013-07-09 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템

Country Status (1)

Country Link
KR (1) KR101546359B1 (ko)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101697290B1 (ko) * 2016-08-17 2017-01-17 주식회사 아티컴퍼니 웹 브라우저에서 구현되는 웹사이트 제작 방법 및 시스템
CN109144567B (zh) * 2018-08-03 2021-09-14 苏州麦迪斯顿医疗科技股份有限公司 跨平台的网页渲染方法、装置、服务器及存储介质
CN114020187B (zh) * 2021-10-26 2024-02-23 济南浪潮数据技术有限公司 字体图标的显示方法、装置及电子设备

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100586561B1 (ko) * 2003-09-06 2006-06-07 (주)우리랑월드 모듈 삽입 프로그램을 이용한 홈페이지 생성 방법 및시스템

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100586561B1 (ko) * 2003-09-06 2006-06-07 (주)우리랑월드 모듈 삽입 프로그램을 이용한 홈페이지 생성 방법 및시스템

Also Published As

Publication number Publication date
KR20150006612A (ko) 2015-01-19

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
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
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
JP4262164B2 (ja) 情報処理装置及びその制御方法、プログラム
JP7420911B2 (ja) ウェブサイトコンポーネント相互間におけるスマートインタラクションのためのシステム及び方法
US20170161354A1 (en) Chart conversion system and method using metadata
KR20210040611A (ko) 웹 페이지를 생성하는 방법 및 장치
KR101546359B1 (ko) 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템
US9483569B2 (en) Electronic-manual browsing apparatus and system
KR101709186B1 (ko) 인터랙티브 멀티미디어 전자책 저작 장치 및 방법
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
EP1691278B1 (en) Method and computer system for editing documents
KR100261265B1 (ko) 웹 문서 저작을 위한 장치 및 그 운용 방법
KR20140137630A (ko) 위젯 저작 시스템 및 방법
KR102298752B1 (ko) 전자문서 작성 방법, 전자문서 작성 장치 및 컴퓨터 프로그램
CN112068826A (zh) 文本输入的控制方法、***、电子设备和存储介质
JP2019016072A (ja) 情報処理装置及びプログラム
KR20230165506A (ko) 위젯을 편집하기 위한 방법 및 전자 장치
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