KR101809457B1 - 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법 - Google Patents

웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법 Download PDF

Info

Publication number
KR101809457B1
KR101809457B1 KR1020170051395A KR20170051395A KR101809457B1 KR 101809457 B1 KR101809457 B1 KR 101809457B1 KR 1020170051395 A KR1020170051395 A KR 1020170051395A KR 20170051395 A KR20170051395 A KR 20170051395A KR 101809457 B1 KR101809457 B1 KR 101809457B1
Authority
KR
South Korea
Prior art keywords
web document
tag
editing
markup language
svg
Prior art date
Application number
KR1020170051395A
Other languages
English (en)
Inventor
조광휘
Original Assignee
주식회사 한글과컴퓨터
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 한글과컴퓨터 filed Critical 주식회사 한글과컴퓨터
Priority to KR1020170051395A priority Critical patent/KR101809457B1/ko
Application granted granted Critical
Publication of KR101809457B1 publication Critical patent/KR101809457B1/ko
Priority to PCT/KR2018/004368 priority patent/WO2018194323A1/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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F17/24—
    • G06F17/2705—
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법이 개시된다. 본 발명은 사용자가 웹 문서에 대한 편집을 수행할 수 있도록 지원하는 편집 인터페이스를 제공하고, 사용자가 웹 문서에 대한 편집을 수행하면, 상기 편집에 대응되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)를 자동으로 변경하여 변경된 마크업 언어 태그에 기초한 렌더링을 수행함으로써, 사용자가 손쉽게 웹 문서에 대한 편집을 수행할 수 있도록 지원할 수 있다.

Description

웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법{CLIENT TERMINAL DEVICE SUPPORTING EDITING OF A WEB DOCUMENT AND OPERATING METHOD THEREOF}
본 발명은 사용자가 웹 문서를 손쉽게 편집할 수 있도록 지원하는 장치 및 그 동작 방법에 대한 것이다.
웹 문서는 브라우저를 통해서 볼 수 있는 문서로, HTML(Hypertext Markup Language)이나 XML(eXtensible Markup Language)과 같이, 마크업 언어(Markup Language)를 기반으로 작성된 문서를 의미한다.
브라우저에서는 웹 문서를 렌더링하여 화면으로 표시하기 위해서, 문서 객체 모델(Document Object Model)을 사용한다. 문서 객체 모델은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이고, 그래픽, 텍스트, 헤드라인, 스타일 등 웹의 모든 요소가 자바 스크립트(Java Script) 등과 같은 스크립트 언어에 의해 조정될 수 있도록 해준다.
브라우저에서는 마크업 언어를 기반으로 작성된 웹 문서를 파싱(parsing)하여 문서 객체 모델을 생성한 후 이를 기초로 웹 문서를 렌더링하여 화면 상에 상기 웹 문서를 표시하게 된다.
일반적으로 사용자가 웹 문서를 편집하기 위해서는 웹 문서를 구성하는 마크업 언어 태그를 직접 수정해야 했었다. 예컨대, 사용자가 HTML로 만들어진 웹 문서에 소정의 이미지를 삽입하고자 하는 경우, "embed src"라고 하는 태그를 활용해서, HTML 태그에 직접 관련 명령어를 삽입해야 하기 때문에 일반적인 사용자가 웹 문서를 편집하기에는 많은 어려움이 존재했었다.
또한, 기존의 웹 문서에 대한 편집을 지원하는 툴에서는 사용자가 도형을 삽입하고, 웹 문서 상에 삽입되어 있는 도형을 편집하고자 하는 경우, 도형을 이미지 형태로 삽입할 수 있도록 하는 기능만을 제공하고 있어서, 사용자가 웹 문서 상에서 해당 도형의 색상, 테두리 굵기, 크기 등과 같은 속성을 쉽게 변경할 수 없었다.
따라서, 사용자가 마크업 언어 태그를 직접 수정하지 않더라도, 웹 문서를 손쉽게 편집할 수 있도록 지원함과 동시에 웹 문서 상에 도형을 손쉽게 삽입하고 편집할 수 있도록 지원하는 웹 문서 편집 툴 기술에 대한 연구가 필요하다.
본 발명은 사용자가 웹 문서에 대한 편집을 수행할 수 있도록 지원하는 편집 인터페이스를 제공하고, 사용자가 웹 문서에 대한 편집을 수행하면, 상기 편집에 대응되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)를 자동으로 변경하여 변경된 마크업 언어 태그에 기초한 렌더링을 수행함으로써, 사용자가 손쉽게 웹 문서에 대한 편집을 수행할 수 있도록 지원하고자 한다.
또한, 본 발명은 사용자가 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형을 삽입하는 경우, 상기 웹 문서를 구성하는 마크업 언어 태그 상에 상기 도형의 속성이 정의되어 있는 SVG 태그를 생성하여 삽입함으로써, 상기 웹 문서 상에 SVG 파일 형식을 갖는 도형이 삽입되도록 지원하고, 사용자가 상기 도형에 대한 편집을 수행하는 경우, 상기 편집에 대응하여 상기 SVG 태그 상에 정의되어 있는 상기 도형에 대한 속성 값을 변경한 후 상기 SVG 태그를 기초로 한 렌더링을 수행함으로써, 사용자가 상기 도형을 손쉽게 편집할 수 있도록 지원하고자 한다.
본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치는 브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시하는 편집 인터페이스 표시부, 사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)에 대한 변경을 수행하는 편집 처리부 및 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱(parsing)하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 갱신부를 포함한다.
또한, 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시하는 단계, 사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어 태그에 대한 변경을 수행하는 단계 및 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 단계를 포함한다.
본 발명은 사용자가 웹 문서에 대한 편집을 수행할 수 있도록 지원하는 편집 인터페이스를 제공하고, 사용자가 웹 문서에 대한 편집을 수행하면, 상기 편집에 대응되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)를 자동으로 변경하여 변경된 마크업 언어 태그에 기초한 렌더링을 수행함으로써, 사용자가 손쉽게 웹 문서에 대한 편집을 수행할 수 있도록 지원할 수 있다.
또한, 본 발명은 사용자가 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형을 삽입하는 경우, 상기 웹 문서를 구성하는 마크업 언어 태그 상에 상기 도형의 속성이 정의되어 있는 SVG 태그를 생성하여 삽입함으로써, 상기 웹 문서 상에 SVG 파일 형식을 갖는 도형이 삽입되도록 지원하고, 사용자가 상기 도형에 대한 편집을 수행하는 경우, 상기 편집에 대응하여 상기 SVG 태그 상에 정의되어 있는 상기 도형에 대한 속성 값을 변경한 후 상기 SVG 태그를 기초로 한 렌더링을 수행함으로써, 사용자가 상기 도형을 손쉽게 편집할 수 있도록 지원할 수 있다.
도 1은 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 구조를 도시한 도면이다.
도 2 내지 도 4는 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작을 설명하기 위한 도면이다.
도 5는 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법을 도시한 순서도이다.
이하에서는 본 발명에 따른 실시예들을 첨부된 도면을 참조하여 상세하게 설명하기로 한다. 이러한 설명은 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 각 도면을 설명하면서 유사한 참조부호를 유사한 구성요소에 대해 사용하였으며, 다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 본 명세서 상에서 사용되는 모든 용어들은 본 발명이 속하는 기술분야에서 통상의 지식을 가진 사람에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다.
도 1은 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 구조를 도시한 도면이다.
도 1을 참조하면, 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치(110)는 편집 인터페이스 표시부(111), 편집 처리부(112) 및 갱신부(113)를 포함한다.
편집 인터페이스 표시부(111)는 브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시한다.
예컨대, 편집 인터페이스 표시부(111)는 도 2에 도시된 바와 같이, 브라우저를 통해 소정의 웹 문서가 표시되면, 도면부호 211에 도시된 바와 같이, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스(211)를 구성하여 상기 브라우저의 일측면에 표시할 수 있다.
이때, 상기 편집 인터페이스(211)는 도 2에 도시된 바와 같이, 사용자가 웹 문서를 편집할 수 있도록 복수의 편집 명령들의 실행을 지시하는 편집 명령 버튼들로 구성될 수 있다.
편집 처리부(112)는 사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)에 대한 변경을 수행한다.
예컨대, 사용자가 상기 웹 문서에 소정의 글자를 수정하라는 편집 명령을 인가하는 경우, 편집 처리부(112)는 상기 글자를 수정하라는 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어 태그를 자동으로 수정할 수 있다.
여기서, 마크업 언어 태그란 HTML(Hypertext Markup Language) 태그나 XML(eXtensible Markup Language) 태그와 같이, 마크업 언어(Markup Language)를 기반으로 작성된 문서를 구성하는 태그를 의미한다.
갱신부(113)는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱(parsing)하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용한다.
이때, 본 발명의 일실시예에 따르면, 갱신부(113)는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용할 수 있다.
이때, 본 발명의 일실시예에 따르면, 편집 처리부(112)는 SVG 태그 생성부(114) 및 SVG 태그 삽입부(115)를 포함할 수 있다.
SVG 태그 생성부(114)는 상기 사용자에 의해 상기 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되면, 상기 도형의 스타일 속성과 상기 웹 문서 상에서의 상기 도형의 삽입 위치 및 상기 도형의 크기를 확인하여, 상기 웹 문서를 구성하는 상기 마크업 언어 태그 상에 삽입 가능한 SVG 태그(상기 SVG 태그에는 상기 도형의 스타일 속성과 상기 도형의 삽입 위치 및 상기 도형의 크기를 지시하는 속성 값이 정의되어 있음)를 생성한다.
SVG 태그 삽입부(115)는 상기 SVG 태그를 상기 웹 문서를 구성하는 마크업 언어 태그 상에 삽입하여 상기 마크업 언어 태그에 대한 변경을 처리한다.
이때, 갱신부(113)는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 도형의 삽입을 적용할 수 있다.
예컨대, 도 2에 도시된 바와 같이, 사용자가 상기 웹 문서 상에 SVG 파일 형식을 갖는 도형(212)을 삽입하면, SVG 태그 생성부(114)는 도형(212)의 내부 색상, 테두리 크기, 테두리 색상 등과 같은 스타일 속성과 도형(212)의 상기 웹 문서 상에서의 삽입 위치 및 도형(212)의 크기를 확인하여 도형(212)의 스타일 속성과 도형(212)의 삽입 위치 및 도형(212)의 크기를 지시하는 속성 값이 정의된 SVG 태그를 생성할 수 있다.
여기서, SVG란 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의되어 검색화, 목록화, 스크립트화가 가능하며 필요하다면 압축도 가능하다.
이렇게, 도형(212)의 스타일 속성과 도형(212)의 삽입 위치 및 도형(212)의 크기를 지시하는 속성 값이 정의된 SVG 태그의 생성이 완료되면, SVG 태그 삽입부(115)는 도 3에 도시된 바와 같이, 상기 웹 문서를 구성하는 마크업 언어 태그 상에 상기 SVG 태그를 삽입하여 상기 마크업 언어 태그에 대한 변경을 처리할 수 있다.
관련해서, SVG 태그 생성부(114)는 도 3의 도면부호 312에 도시된 바와 같이, 도형(212)의 스타일 속성이 정의된 SVG 태그를 생성하고, 도면부호 311에 도시된 바와 같이, "embed src"라는 태그를 이용하여 웹 문서 상에 SVG 파일 형식을 갖는 도형(212)을 삽입하기 위한 위치와 크기가 정의된 태그를 생성할 수 있으며, SVG 태그 삽입부(115)는 SVG 태그 생성부(114)에서 생성된 SVG 태그를 도 3에 도시된 바와 같이 상기 웹 문서를 구성하는 마크업 언어 태그 상에 삽입할 수 있다.
이렇게, 상기 웹 문서를 구성하는 마크업 언어 태그 상에 도 3에 도시된 도면과 같이, 상기 SVG 태그의 삽입이 완료되면, 갱신부(113)는 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 도 2에 도시된 바와 같이 상기 웹 문서에 대해 도형(212)의 삽입을 적용할 수 있다.
이때, 본 발명의 일실시예에 따르면, 편집 처리부(112)는 SVG 태그 변경부(116)를 더 포함할 수 있다.
SVG 태그 변경부(116)는 상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 도형의 스타일 속성, 상기 도형의 상기 웹 문서 상에서의 삽입 위치 또는 상기 도형의 크기의 변경을 지시하는 도형 편집 명령이 수신되면, 상기 도형 편집 명령에 따른 도형 편집 사항이 상기 웹 문서 상에 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행한다.
이때, 갱신부(113)는 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 속성 값의 변경이 완료된 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형에 대해 상기 도형 편집 명령에 따른 변경을 적용할 수 있다.
즉, 도 2에 도시된 바와 같이, 웹 문서 상에 도형(212)의 삽입이 완료된 이후, 사용자가 도형(212)의 스타일 속성을 변경하거나, 위치 또는 크기를 변경하는 경우, SVG 태그 변경부(116)는 도형(212)의 스타일 속성 변경, 위치 또는 크기 변경에 대응되도록 도 3에 도시되어 있는 SVG 태그에 정의되어 있는 속성 값을 변경할 수 있고, 갱신부(113)는 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 속성 값의 변경이 완료된 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 도형(212)에 대한 변경 작업을 완료할 수 있다.
또한, 본 발명의 일실시예에 따르면, 편집 처리부(112)는 제1 위치 정보 확인부(117), 제2 위치 정보 확인부(118) 및 위치 정보 판단부(119)를 더 포함할 수 있다.
제1 위치 정보 확인부(117)는 상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 웹 문서 상에 추가 편집 명령(상기 추가 편집 명령은 상기 도형에 대해 직접 발생한 편집 명령이 아님)이 인가되면, 상기 추가 편집 명령이 발생한 위치에 대한 상기 웹 문서 상에서의 제1 위치 정보를 확인한다.
제2 위치 정보 확인부(118)는 상기 SVG 태그에 정의되어 있는 속성 값을 참조하여 상기 웹 문서 상에서 상기 도형이 입력되어 있는 위치와 연관된 제2 위치 정보를 확인한다.
위치 정보 판단부(119)는 상기 제1 위치 정보와 상기 제2 위치 정보를 비교하여 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는지 여부를 판단한다.
이때, 갱신부(113)는 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링(re-rendering)을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시할 수 있다.
예컨대, 도 4에 도시된 바와 같이 웹 문서 상에 텍스트열 1(411), 텍스트열 2(412), 텍스트열 3(413)과 도형(420)이 삽입되어 있는 상태에서, 사용자에 의해 텍스트열 3(413)에 추가 편집 명령이 인가되면, 제1 위치 정보 확인부(117)는 상기 추가 편집 명령이 발생한 위치에 대한 상기 웹 문서 상에서의 제1 위치 정보를 확인할 수 있다.
그리고, 제2 위치 정보 확인부(118)는 상기 SVG 태그에 정의되어 있는 속성 값을 참조하여 상기 웹 문서 상에서 도형(420)이 입력되어 있는 위치와 연관된 제2 위치 정보를 확인할 수 있다.
이때, 위치 정보 판단부(119)는 상기 제1 위치 정보와 상기 제2 위치 정보를 비교하여 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는지 여부를 판단할 수 있다.
도 4의 실시예에서는 상기 추가 편집 명령이 텍스트열 3(413)에서 발생하였으므로, 위치 정보 판단부(119)는 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단할 수 있다.
이때, 갱신부(113)는 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단되었기 때문에, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 도형(420)을 다시 표시할 수 있다.
일반적으로, 웹 문서 상에 SVG 파일 형식을 갖는 도형이 삽입된 경우, 상기 도형의 스타일 등이 변경되더라도 상기 웹 문서에서 상기 도형보다 상위에 존재하는 콘텐츠에 대해 편집이 발생하게 되면, 브라우저는 상기 SVG 형식을 갖는 도형을 원본 스타일로 초기화하여 표시하는 특성을 가지고 있다.
따라서, 사용자가 웹 문서 상에 SVG 파일 형식을 갖는 도형을 삽입한 후 상기 도형에 대해 편집을 수행하더라도, 상기 웹 문서의 상위 부분에 위치하고 있는 다른 콘텐츠에 대해 편집이 발생하게 되면, 상기 도형의 편집이 원래 상태로 초기화되는 문제가 발생할 수 있다. 이러한 문제를 해결하기 위해, 본 발명에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치(110)는 도 4에 도시된 바와 같이, 웹 문서 상에 삽입되어 있는 도형(420)의 위치보다 상위 위치에 존재하는 콘텐츠들에 대해 편집이 발생하면, 상기 웹 문서를 구성하는 마크업 언어 태그에서 도형(420)의 스타일, 위치, 크기 등을 정의하고 있는 SVG 태그를 기초로 도형(420)에 대한 랜더링을 다시 수행함으로써, 사용자에 의해 편집된 도형(420)의 스타일 등이 원본 상태로 초기화되는 것이 아니라, 그대로 유지되도록 함으로써, 사용자의 편의를 도모할 수 있다.
이때, 본 발명의 일실시예에 따르면, 편집 처리부(112)는 편집 명령 확인부(120)를 더 포함할 수 있다.
편집 명령 확인부(120)는 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인지 여부를 확인한다.
이때, SVG 태그 변경부(116)는 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인 것으로 확인되면, 상기 추가 편집 명령에 따라 상기 웹 문서 상에서의 상기 도형의 위치 변화가 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행할 수 있다.
그리고, 갱신부(113)는 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시할 수 있다.
관련해서, 도 4에 도시된 바와 같이, 웹 문서 상에 텍스트열 1(411), 텍스트열 2(412), 텍스트열 3(413)과 도형(420)이 삽입되어 있는 상태에서, 사용자에 의해 텍스트열 1(411)과 텍스트열 2(412) 사이에 1줄의 추가 텍스트열을 삽입하도록 하는 추가 편집 명령이 인가되었다면, 텍스트열 2(412) 이하에 존재하는 모든 콘텐츠들은 상기 웹 문서 상에서의 위치가 1줄 내려가야 한다.
이로 인해, 상기 웹 문서에 포함되어 있는 도형(420)은 상기 추가 편집 명령에 의해서 상기 웹 문서 상에서의 위치 변화가 발생하게 되며, 이때, 편집 명령 확인부(120)는 상기 추가 편집 명령을 도형(420)에 대한 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령으로 확인할 수 있다.
이때, SVG 태그 변경부(116)는 상기 추가 편집 명령이 도형(420)의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인 것으로 확인되었으므로, 상기 추가 편집 명령에 따라 상기 웹 문서 상에서의 도형(420)의 위치 변화가 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행할 수 있다.
즉, SVG 태그 변경부(116)는 텍스트열 1(411)과 텍스트열 2(412) 사이에 1줄의 추가 텍스트열이 삽입되는 추가 편집 명령이 인가되었으므로, 상기 웹 문서 상에서 도형(420)의 위치가 1줄 아래로 이동하도록 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행할 수 있다.
그러고 나서, 갱신부(113)는 도형(420)의 상기 웹 문서 상에서의 위치가 상기 추가 편집 명령이 인가된 위치보다 하위에 존재하기 때문에, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시할 수 있다.
즉, 갱신부(113)는 도형(420)의 위치가 1줄 아래로 이동하도록 속성 값이 변경된 상기 SVG 태그에 기초하여 도형(420)에 대한 렌더링을 다시 수행함으로써, 상기 웹 문서 상에서 도형(420)의 위치가 1줄 아래로 이동하도록 처리할 수 있다.
도 5는 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법을 도시한 순서도이다.
단계(S510)에서는 브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시한다.
단계(S520)에서는 사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어 태그에 대한 변경을 수행한다.
단계(S530)에서는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용한다.
이때, 본 발명의 일실시예에 따르면, 단계(S530)에서는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델을 생성한 후 상기 문서 객체 모델에 기초하여 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용할 수 있다.
또한, 본 발명의 일실시예에 따르면, 단계(S520)에서는 상기 사용자에 의해 상기 웹 문서 상에 SVG 파일 형식을 갖는 도형이 입력되면, 상기 도형의 스타일 속성과 상기 웹 문서 상에서의 상기 도형의 삽입 위치 및 상기 도형의 크기를 확인하여, 상기 웹 문서를 구성하는 상기 마크업 언어 태그 상에 삽입 가능한 SVG 태그(상기 SVG 태그에는 상기 도형의 스타일 속성과 상기 도형의 삽입 위치 및 상기 도형의 크기를 지시하는 속성 값이 정의되어 있음)를 생성하는 단계 및 상기 SVG 태그를 상기 웹 문서를 구성하는 마크업 언어 태그 상에 삽입하여 상기 마크업 언어 태그에 대한 변경을 처리하는 단계를 포함할 수 있다.
이때, 단계(S530)에서는 상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 도형의 삽입을 적용할 수 있다.
이때, 본 발명의 일실시예에 따르면, 상기 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 도형의 스타일 속성, 상기 도형의 상기 웹 문서 상에서의 삽입 위치 또는 상기 도형의 크기의 변경을 지시하는 도형 편집 명령이 수신되면, 상기 도형 편집 명령에 따른 도형 편집 사항이 상기 웹 문서 상에 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하는 단계 및 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 속성 값의 변경이 완료된 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형에 대해 상기 도형 편집 명령에 따른 변경을 적용하는 단계를 더 포함할 수 있다.
이때, 본 발명의 일실시예에 따르면, 상기 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 웹 문서 상에 추가 편집 명령(상기 추가 편집 명령은 상기 도형에 대해 직접 발생한 편집 명령이 아님)이 인가되면, 상기 추가 편집 명령이 발생한 위치에 대한 상기 웹 문서 상에서의 제1 위치 정보를 확인하는 단계, 상기 SVG 태그에 정의되어 있는 속성 값을 참조하여 상기 웹 문서 상에서 상기 도형이 입력되어 있는 위치와 연관된 제2 위치 정보를 확인하는 단계, 상기 제1 위치 정보와 상기 제2 위치 정보를 비교하여 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는지 여부를 판단하는 단계 및 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 단계를 더 포함할 수 있다.
이때, 본 발명의 일실시예에 따르면, 상기 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인지 여부를 확인하는 단계 및 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인 것으로 확인되면, 상기 추가 편집 명령에 따라 상기 웹 문서 상에서의 상기 도형의 위치 변화가 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하는 단계를 더 포함할 수 있고, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 단계는 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시할 수 있다.
이상, 도 5를 참조하여 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법에 대해 설명하였다. 여기서, 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 도 1 내지 도 4를 이용하여 설명한 웹 문서의 편집을 지원하는 클라이언트 단말 장치(110)의 동작에 대한 구성과 대응될 수 있으므로, 이에 대한 보다 상세한 설명은 생략하기로 한다.
본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 컴퓨터와의 결합을 통해 실행시키기 위한 저장매체에 저장된 컴퓨터 프로그램으로 구현될 수 있다.
또한, 본 발명의 일실시예에 따른 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다.
이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.
따라서, 본 발명의 사상은 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.
110: 웹 문서의 편집을 지원하는 클라이언트 단말 장치
111: 편집 인터페이스 표시부 112: 편집 처리부
113: 갱신부 114: SVG 태그 생성부
115: SVG 태그 삽입부 116: SVG 태그 변경부
117: 제1 위치 정보 확인부 118: 제2 위치 정보 확인부
119: 위치 정보 판단부 120: 편집 명령 확인부

Claims (14)

  1. 브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시하는 편집 인터페이스 표시부;
    사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)에 대한 변경을 수행하는 편집 처리부; 및
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱(parsing)하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 갱신부
    를 포함하고,
    상기 편집 처리부는
    상기 사용자에 의해 상기 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되면, 상기 도형의 스타일 속성과 상기 웹 문서 상에서의 상기 도형의 삽입 위치 및 상기 도형의 크기를 확인하여, 상기 웹 문서를 구성하는 상기 마크업 언어 태그 상에 삽입 가능한 SVG 태그 - 상기 SVG 태그에는 상기 도형의 스타일 속성과 상기 도형의 삽입 위치 및 상기 도형의 크기를 지시하는 속성 값이 정의되어 있음 - 를 생성하는 SVG 태그 생성부; 및
    상기 SVG 태그를 상기 웹 문서를 구성하는 마크업 언어 태그 상에 삽입하여 상기 마크업 언어 태그에 대한 변경을 처리하는 SVG 태그 삽입부
    를 포함하며,
    상기 갱신부는
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 도형의 삽입을 적용하고,
    상기 편집 처리부는
    상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 도형의 스타일 속성, 상기 도형의 상기 웹 문서 상에서의 삽입 위치 또는 상기 도형의 크기의 변경을 지시하는 도형 편집 명령이 수신되면, 상기 도형 편집 명령에 따른 도형 편집 사항이 상기 웹 문서 상에 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하는 SVG 태그 변경부
    를 더 포함하고,
    상기 갱신부는
    상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 속성 값의 변경이 완료된 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형에 대해 상기 도형 편집 명령에 따른 변경을 적용하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치.
  2. 제1항에 있어서,
    상기 갱신부는
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치.
  3. 삭제
  4. 삭제
  5. 제1항에 있어서,
    상기 편집 처리부는
    상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 웹 문서 상에 추가 편집 명령 - 상기 추가 편집 명령은 상기 도형에 대해 직접 발생한 편집 명령이 아님 - 이 인가되면, 상기 추가 편집 명령이 발생한 위치에 대한 상기 웹 문서 상에서의 제1 위치 정보를 확인하는 제1 위치 정보 확인부;
    상기 SVG 태그에 정의되어 있는 속성 값을 참조하여 상기 웹 문서 상에서 상기 도형이 입력되어 있는 위치와 연관된 제2 위치 정보를 확인하는 제2 위치 정보 확인부; 및
    상기 제1 위치 정보와 상기 제2 위치 정보를 비교하여 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는지 여부를 판단하는 위치 정보 판단부
    를 더 포함하고,
    상기 갱신부는
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링(re-rendering)을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치.
  6. 제5항에 있어서,
    상기 편집 처리부는
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인지 여부를 확인하는 편집 명령 확인부
    를 더 포함하고,
    상기 SVG 태그 변경부는
    상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인 것으로 확인되면, 상기 추가 편집 명령에 따라 상기 웹 문서 상에서의 상기 도형의 위치 변화가 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하며,
    상기 갱신부는
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치.
  7. 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법에 있어서,
    브라우저를 통해 웹 문서가 표시되면, 상기 브라우저 상에서 상기 웹 문서에 대한 편집이 가능하도록 하는 편집 인터페이스를 구성하여 상기 브라우저의 일측면에 표시하는 단계;
    사용자에 의해 상기 웹 문서에 포함되어 있는 콘텐츠에 대한 편집을 지시하는 편집 명령이 입력되면, 상기 편집 명령에 따른 편집 사항이 상기 웹 문서에 적용되도록 상기 웹 문서를 구성하는 마크업 언어(Markup Language) 태그(tag)에 대한 변경을 수행하는 단계; 및
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱(parsing)하여, 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 단계
    를 포함하고,
    상기 마크업 언어 태그에 대한 변경을 수행하는 단계는
    상기 사용자에 의해 상기 웹 문서 상에 스케일러블 벡터 그래픽스(Scalable Vector Graphics: SVG) 파일 형식을 갖는 도형이 입력되면, 상기 도형의 스타일 속성과 상기 웹 문서 상에서의 상기 도형의 삽입 위치 및 상기 도형의 크기를 확인하여, 상기 웹 문서를 구성하는 상기 마크업 언어 태그 상에 삽입 가능한 SVG 태그 - 상기 SVG 태그에는 상기 도형의 스타일 속성과 상기 도형의 삽입 위치 및 상기 도형의 크기를 지시하는 속성 값이 정의되어 있음 - 를 생성하는 단계; 및
    상기 SVG 태그를 상기 웹 문서를 구성하는 마크업 언어 태그 상에 삽입하여 상기 마크업 언어 태그에 대한 변경을 처리하는 단계
    를 포함하며,
    상기 편집 명령에 따른 편집 사항을 적용하는 단계는
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 도형의 삽입을 적용하고,
    상기 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법은
    상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 도형의 스타일 속성, 상기 도형의 상기 웹 문서 상에서의 삽입 위치 또는 상기 도형의 크기의 변경을 지시하는 도형 편집 명령이 수신되면, 상기 도형 편집 명령에 따른 도형 편집 사항이 상기 웹 문서 상에 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하는 단계; 및
    상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 속성 값의 변경이 완료된 상기 SVG 태그가 삽입된 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형에 대해 상기 도형 편집 명령에 따른 변경을 적용하는 단계
    를 더 포함하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법.
  8. 제7항에 있어서,
    상기 편집 명령에 따른 편집 사항을 적용하는 단계는
    상기 마크업 언어 태그의 변경이 완료되면, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 웹 문서에 대한 문서 객체 모델(Document Object Model)을 생성한 후 상기 문서 객체 모델에 기초하여 상기 마크업 언어 태그에서 상기 편집 명령에 따라 변경된 태그에 대응하는 부분에 대한 렌더링을 수행함으로써, 상기 웹 문서에 대해 상기 편집 명령에 따른 편집 사항을 적용하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법.
  9. 삭제
  10. 삭제
  11. 제7항에 있어서,
    상기 웹 문서 상에 상기 도형의 삽입이 완료된 이후, 상기 사용자에 의해 상기 웹 문서 상에 추가 편집 명령 - 상기 추가 편집 명령은 상기 도형에 대해 직접 발생한 편집 명령이 아님 - 이 인가되면, 상기 추가 편집 명령이 발생한 위치에 대한 상기 웹 문서 상에서의 제1 위치 정보를 확인하는 단계;
    상기 SVG 태그에 정의되어 있는 속성 값을 참조하여 상기 웹 문서 상에서 상기 도형이 입력되어 있는 위치와 연관된 제2 위치 정보를 확인하는 단계;
    상기 제1 위치 정보와 상기 제2 위치 정보를 비교하여 상기 웹 문서 상에서 상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는지 여부를 판단하는 단계; 및
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링(re-rendering)을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 단계
    를 더 포함하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법.
  12. 제11항에 있어서,
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인지 여부를 확인하는 단계; 및
    상기 추가 편집 명령이 상기 도형의 상기 웹 문서 상에서의 위치 변화를 유발하는 편집 명령인 것으로 확인되면, 상기 추가 편집 명령에 따라 상기 웹 문서 상에서의 상기 도형의 위치 변화가 반영되도록 상기 웹 문서를 구성하는 상기 마크업 언어 태그에서 상기 SVG 태그에 정의되어 있는 속성 값에 대한 변경을 수행하는 단계
    를 더 포함하고,
    상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 단계는
    상기 제2 위치 정보에 따른 위치가 상기 제1 위치 정보에 따른 위치보다 하위에 존재하는 것으로 판단된 경우, 상기 브라우저를 통해 상기 웹 문서를 구성하는 상기 마크업 언어 태그를 파싱하여, 상기 SVG 태그가 삽입된 부분에 대한 재렌더링을 수행함으로써, 상기 웹 문서 상에 삽입되어 있는 상기 도형을 다시 표시하는 웹 문서의 편집을 지원하는 클라이언트 단말 장치의 동작 방법.
  13. 제7항, 제8항, 제11항 또는 제12항 중 어느 한 항의 방법을 컴퓨터로 하여금 수행하도록 하는 프로그램을 기록한 컴퓨터 판독 가능 기록 매체.
  14. 제7항, 제8항, 제11항 또는 제12항 중 어느 한 항의 방법을 컴퓨터와의 결합을 통해 실행시키기 위한 저장매체에 저장된 컴퓨터 프로그램.
KR1020170051395A 2017-04-21 2017-04-21 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법 KR101809457B1 (ko)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR1020170051395A KR101809457B1 (ko) 2017-04-21 2017-04-21 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법
PCT/KR2018/004368 WO2018194323A1 (ko) 2017-04-21 2018-04-16 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020170051395A KR101809457B1 (ko) 2017-04-21 2017-04-21 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법

Publications (1)

Publication Number Publication Date
KR101809457B1 true KR101809457B1 (ko) 2017-12-15

Family

ID=60954233

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020170051395A KR101809457B1 (ko) 2017-04-21 2017-04-21 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법

Country Status (2)

Country Link
KR (1) KR101809457B1 (ko)
WO (1) WO2018194323A1 (ko)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101991297B1 (ko) * 2018-04-16 2019-06-20 주식회사 한글과컴퓨터 문서 편집 인터페이스의 커스터마이징을 지원하는 웹 기반의 문서 편집 지원 장치 및 그 동작 방법
KR20190131798A (ko) * 2018-05-17 2019-11-27 주식회사 한글과컴퓨터 전자 문서 편집 장치 및 이의 동작 방법
CN110704778A (zh) * 2019-09-25 2020-01-17 许昌许继软件技术有限公司 监控组态文件实时发布方法和系统及监控系统、Web服务器
KR20200106289A (ko) * 2019-03-04 2020-09-14 주식회사 한글과컴퓨터 문서 편집 서버와 연동된 웹 기반의 문서 작성 환경에서 개체별 상태 변경을 가능하게 하는 전자 단말 장치 및 그 동작 방법

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112035848A (zh) * 2019-06-04 2020-12-04 珠海金山办公软件有限公司 图形文本内容的保护方法、装置、电子设备及存储介质
CN112115485A (zh) * 2019-06-04 2020-12-22 珠海金山办公软件有限公司 文档中图形宽高的保护方法、装置、电子设备及存储介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2004046858A (ja) * 2002-06-28 2004-02-12 Microsoft Corp ドキュメントオブジェクト衝突を解消する方法

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100483497B1 (ko) * 2002-11-26 2005-04-15 한국전자통신연구원 엘리먼트 기반 웹 문서의 파싱시스템 및 그 방법
KR20040090867A (ko) * 2003-04-18 2004-10-27 (주)아이펜텍 그레비티 레이어 방식을 이용한 ｘｓｌ 스타일 시트의자동 생성 방법
KR100902732B1 (ko) * 2007-11-30 2009-06-15 주식회사 케이티 모달리티에 관한 ｄｏｍ 이벤트 처리를 위한 프록시,멀티모달 단말기, ｄｏｍ 이벤트 처리 방법, 모달리티동기화 방법
KR101547496B1 (ko) * 2008-07-24 2015-08-27 삼성전자주식회사 웹 페이지 재구성 방법 및 장치
JP6433339B2 (ja) * 2015-03-02 2018-12-05 キヤノン株式会社 情報処理システム、サーバ装置、制御方法およびプログラム

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2004046858A (ja) * 2002-06-28 2004-02-12 Microsoft Corp ドキュメントオブジェクト衝突を解消する方法

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101991297B1 (ko) * 2018-04-16 2019-06-20 주식회사 한글과컴퓨터 문서 편집 인터페이스의 커스터마이징을 지원하는 웹 기반의 문서 편집 지원 장치 및 그 동작 방법
KR20190131798A (ko) * 2018-05-17 2019-11-27 주식회사 한글과컴퓨터 전자 문서 편집 장치 및 이의 동작 방법
KR102053075B1 (ko) 2018-05-17 2019-12-06 주식회사 한글과컴퓨터 전자 문서 편집 장치 및 이의 동작 방법
KR20200106289A (ko) * 2019-03-04 2020-09-14 주식회사 한글과컴퓨터 문서 편집 서버와 연동된 웹 기반의 문서 작성 환경에서 개체별 상태 변경을 가능하게 하는 전자 단말 장치 및 그 동작 방법
KR102168324B1 (ko) * 2019-03-04 2020-10-21 주식회사 한글과컴퓨터 문서 편집 서버와 연동된 웹 기반의 문서 작성 환경에서 개체별 상태 변경을 가능하게 하는 전자 단말 장치 및 그 동작 방법
CN110704778A (zh) * 2019-09-25 2020-01-17 许昌许继软件技术有限公司 监控组态文件实时发布方法和系统及监控系统、Web服务器

Also Published As

Publication number Publication date
WO2018194323A1 (ko) 2018-10-25

Similar Documents

Publication Publication Date Title
KR101809457B1 (ko) 웹 문서의 편집을 지원하는 클라이언트 단말 장치 및 그 동작 방법
US11216253B2 (en) Application prototyping tool
US8923651B2 (en) Data system and method
US9047261B2 (en) Document editing method
US20230083102A1 (en) Systems and methods for conversion of web content into reusable templates and components
US20040041818A1 (en) Design system for website text graphics
US20140006913A1 (en) Visual template extraction
US20100235806A1 (en) Rich Web Site Authoring And Design
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
KR101809460B1 (ko) 웹 문서 편집툴에서 지원하는 스타일 속성에 따라 웹 문서에 대한 외부 콘텐츠의 붙여넣기 처리가 가능한 클라이언트 단말 장치 및 그 동작 방법
US7765472B2 (en) Method and device for editing SVG type digital graphical documents in particular from a browser
JP4566196B2 (ja) 文書処理方法および装置
US8645822B2 (en) Multi-platform presentation system
van Ossenbruggen et al. Towards a multimedia formatting vocabulary
KR101709186B1 (ko) 인터랙티브 멀티미디어 전자책 저작 장치 및 방법
JP4627530B2 (ja) 文書処理方法および装置
JP4889338B2 (ja) 画面プログラムレイアウト変更方法および情報処理装置およびプログラムおよび記録媒体
KR102067661B1 (ko) 위젯 저작 시스템 및 방법
EP1837776A1 (en) Document processing device and document processing method
KR101546359B1 (ko) 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
KR101880507B1 (ko) 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치 및 그 동작 방법
KR101991297B1 (ko) 문서 편집 인터페이스의 커스터마이징을 지원하는 웹 기반의 문서 편집 지원 장치 및 그 동작 방법
KR101809459B1 (ko) 원본 이미지에 적용된 꾸미기 효과의 유지가 가능한 웹 문서 변환 지원 장치 및 그 동작 방법
JP4719743B2 (ja) グラフ処理装置

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
R401 Registration of restoration