KR20180024801A

KR20180024801A - 모바일 환경의 웹 문서 편집 방법

Info

Publication number: KR20180024801A
Application number: KR1020160111675A
Authority: KR
Inventors: 김일철; 이승훈; 노기상; 조성열
Original assignee: 페이레터(주)
Priority date: 2016-08-31
Filing date: 2016-08-31
Publication date: 2018-03-08

Abstract

본 발명은 브라우저를 통해 웹 문서를 편집하는 방법에 관한 것이다.
본 발명의 일측면에 따르면, 네트워크를 통해 모바일 웹 브라우저에서 볼 수 있도록 서버에 저장한 것으로서, CMS 템플릿으로 가공한 HTML 문서를 네트워크를 통해 상기 CMS 관리화면을 통해 표시하는 미리보기 화면에, 상기 템플릿에 포함된 페이지와는 독립적으로 컨텐츠 데이터를 편집할 수 있는 편집 화면을 시작할 편집 버튼을 표시하며, 상기 편집 화면에 포함된 편집 메뉴로 제어되는 개별 편집 기능요소는 상기 모바일 웹 브라우저의 코어 엔진과 연동하는 플러그인 엔진을 통해 연동 제공되는 것을 특징으로 하는 모바일 환경의 웹 문서 편집 방법이 개시된다.

Description

모바일 환경의 웹 문서 편집 방법 {Editing method for web document in mobile environment}

본 발명은 모바일 브라우저를 통해 웹 문서를 편집하는 방법에 관한 것이다.

최근 인터넷 이용의 보급에 의해 웹에서 정보 발신은 기업에게 매우 중요한 것으로 되어 있으며, 효과적인 웹 사이트 구축을 위한 CMS(Contents Management System)가 주목받고 있다. CMS의 도입은 웹 사이트의 정보 발신의 적시성 및 정확성을 향상하고 비용 절감 효과를 제공한다.

CMS는 파일 또는 데이터베이스 서버에 저장된 컨텐츠 데이터를 조합한 HTML 파일과 동일한 정보를 생성하여 브라우저에서 볼 수 있는 웹 사이트를 생성한다. 서버에 저장된 컨텐츠 데이터의 관리는 웹 브라우저에서 행해지는 경우가 많다.

웹 사이트에 요구되는 것이 다양화되고 복잡화하며 CMS에도 고기능화가 요구되고 있다. 반면 고기능화는 관리의 복잡성 및 곤란화를 가져 오고 있다. 중소 규모의 CMS 상용 제품 중에서 블로그용으로 제작된 일부 시스템의 경우, 일기 기사를 웹 사이트를 구성하는 요소로 사용하기 때문에 완성된 상태를 파악하면서 편집 작업을 할 수 어렵다는 문제가 있다. 또다른 CMS 사용 제품의 경우, 브라우저에서 웹 페이지 단위로 미리보기에서 편집할 수 있는 기능을 갖추고 있지만 페이지에서 별도의 컨텐츠 데이터를 편집할 수 없으며, 복잡한 관리를 할 수 없다는 문제가 있다.

기타 CMS는 다양하게 제안된 바 있지만, 사용 용이성을 제공하면서 페이지 단위의 관리를 실시하도록 여러 페이지의 내용의 재사용과 일괄 업데이트가 제공되기는 어려운 구성으로 되어있다.

또한 고기능을 제공하면서 컨텐츠 단위의 관리를 실시하게 되는데, 어떤 내용을 편집하면 사이트가 어떻게 되는지 파악하면서 작업을 하기에는 어려운 구성으로 되어 있다.

특히, 모바일 환경에서의 웹 문서 편집 필요성이 높아짐에 따라 모바일 브라우저를 통해 웹 문서를 편리하게 편집할 수 있는 환경의 개발이 필요한데, 종래의 CMS는 이러한 환경을 제공하는데 한계가 있었다.

본 발명은 상기 종래의 문제점을 감안하여 제안된 것으로서, 사용자의 편집작업의 편의성을 향상시킨 모바일 환경의 웹 문서 편집 방법을 제공하는 것을 그 목적으로 한다.

상기 목적을 달성하기 위한 본 발명의 일측면에 따르면, 네트워크를 통해 모바일 웹 브라우저에서 볼 수 있도록 서버에 저장한 것으로서, CMS 템플릿으로 가공한 HTML 문서를 네트워크를 통해 상기 CMS 관리화면을 통해 표시하는 미리보기 화면에, 상기 템플릿에 포함된 페이지와는 독립적으로 컨텐츠 데이터를 편집할 수 있는 편집 화면을 시작할 편집 버튼을 표시하며, 상기 편집 화면에 포함된 편집 메뉴로 제어되는 개별 편집 기능요소는 상기 모바일 웹 브라우저의 코어 엔진과 연동하는 플러그인 엔진을 통해 연동 제공되는 것을 특징으로 하는 모바일 환경의 웹 문서 편집 방법이 개시된다.

본 발명에 따른 모바일 환경의 웹 문서 편집 방법은 업데이트 빈도가 높은 모바일 웹 사이트의 컨텐츠 관리를 용이하게 하는 CMS의 특징을 더욱 향상시킨다.

도 1은 본 발명에 따른 모바일 환경의 웹 문서 편집 방법을 실시하는 컴퓨터 시스템의 일 실시예를 나타내는 구성도이다.
도 2는 본 발명에 따른 모바일 환경의 웹 문서 편집 방법에 사용할 템플릿의 일례를 나타내는 구성도이다.
도 3은 본 발명에 따른 모바일 환경의 웹 문서 편집 방법으로 웹 페이지를 편집하는 일 실시예를 나타내는 미리보기 화면이다.
도 4는 도 3의 미리보기 화면에 편집 버튼을 표시한 상태를 나타내는 미리보기 화면이다.
도 5는 도 4의 미리보기 화면에서 편집 버튼에서 시작한 컨텐츠 데이터의 편집 화면이다.

본 발명은 그 기술적 사상 또는 주요한 특징으로부터 벗어남이 없이 다른 여러가지 형태로 실시될 수 있다. 따라서, 본 발명의 실시예들은 모든 점에서 단순한 예시에 지나지 않으며 한정적으로 해석되어서는 안 된다.

제1, 제2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.

본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 출원에서, "포함하다" 또는 "구비하다", "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.

다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥상 가지는 의미와 일치하는 의미를 가지는 것으로 해석되어야 하며, 본 출원에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.

이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 실시예를 상세히 설명하되, 도면 부호에 관계없이 동일하거나 대응하는 구성 요소는 동일한 참조 번호를 부여하고 이에 대한 중복되는 설명은 생략하기로 한다. 본 발명을 설명함에 있어서 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다.

도 1은 본 발명에 따른 모바일 환경의 웹 문서 편집 방법을 실시하는 컴퓨터 시스템의 일 실시예를 나타내는 구성도, 도 2는 본 발명에 따른 모바일 환경의 웹 문서 편집 방법에 사용할 템플릿의 일례를 나타내는 구성도, 도 3은 본 발명에 따른 모바일 환경의 웹 문서 편집 방법으로 웹 페이지를 편집하는 일 실시예를 나타내는 미리보기 화면, 도 4는 도 3의 미리보기 화면에 편집 버튼을 표시한 상태를 나타내는 미리보기 화면, 도 5는 도 4의 미리보기 화면에서 편집 버튼에서 시작한 컨텐츠 데이터의 편집 화면이다.

본 발명의 적용이 가능한 시스템 구성 및 응용 프로그램 구성에 대해 설명한다.

데이터베이스 서버, 파일 서버, 웹 서버와 네트워크를 통해 통신을 하고, 모바일 웹 브라우저가 설치된 모바일 클라이언트가 도 1과 같이 구비된다.

서버에 설치된 CMS 프로그램을 통해 모바일 클라이언트에 설치된 모바일 웹 브라우저에서 사이트 관리 화면을 연다. 열린 CMS의 관리 화면에서 웹 서버를 통해 웹 사이트 구축을 위해 데이터베이스 서버, 파일 서버, 웹 서버에 저장된 데이터를 편집할 수 있도록 설정한다.

데이터베이스 서버, 파일 서버, 웹 서버에 저장되는 정보는 주로 페이지의 템플릿에 포함할 수 있는 각종 컨텐츠이다. 이 밖에 템플릿의 어떤 부분에 어떤 컨텐츠를 이용하여 어떻게 대체하는 하나의 대응 정보, 사이트 이름 및 관리자 정보 등 각종 사이트의 설정 정보 및 이미지 등 사이트에서 제공되는 기타 데이터도 저장할 수 있다.

도 2에 나타낸 바와 같이, HTML로 작성된 템플릿(11)은 사용하는 CMS에 대응하는 HTML 태그 또는 본문에 어떤 기호(12)를 쓰고 추가하여 포함하는 각종 컨텐츠를 지정한다.

이상과 같이 CMS에서 만든 웹 페이지를 본 발명의 방법에서 업데이트하는 상태는 다음과 같다.

템플릿 및 컨텐츠 데이터의 편집은 CMS의 관리 화면에서 업데이트가 필요한 페이지를 선택한다. 예를 들어 홈페이지를 새로이 하는 경우, 도 3과 같이 홈페이지의 미리보기 화면(10) 편집창(20)가 표시된다. 이 편집창(20)의 "편집 버튼을 표시"에 체크를 입력하는 것으로, 도 4와 같이 본 발명에 따른 웹 문서 편집 방법이 실행된다.

미리보기 화면 내용이 포함된 부분에 편집 버튼(30)이 표시된다. 본 예의 편집창(20)에서는 스타일 시트를 편집하기 위한 "CSS를 편집하기" 버튼, 템플릿에 직접 쓰고 페이지 단위로 편집하는 "템플릿을 편집하기" 버튼 및 페이지를 선택하는 "페이지 이동" 버튼을 마련하고 있다.

미리보기 화면에 표시되는 편집 버튼(30)을 클릭하면 해당 컨텐츠의 편집 화면이 표시된다. 도 4는 "ABCDEF"를 편집하도록 표시되는 편집 버튼(30)을 클릭하면 편집 화면(40)가 표시된 상태를 나타낸다. 이 편집 화면(40)에는 파일 또는 데이터베이스 서버에 등록된 텍스트와 이미지가 표시되고 이를 직접 편집할 수 있다. 이 편집으로 템플릿을 다시 한 결과, 어떤 페이지가 생성되는지는 미리보기 화면에서 즉시 확인할 수 있다.

미리보기 화면에서 색상 변경이나 버튼 등의 표시 수단으로 어떤 부분이 수정된 결과로 표시되어 있는지 볼 수 있다. 또한 거기에서 재작성을 위한 문서의 상세 화면을 열고 편집할 수 있다.

본 실시예에서는 편집창(20)에 편집 버튼(30)을 표시하는 "편집 버튼을 표시" 확인란에 나란히 "CSS를 편집하기" 버튼, "템플릿을 편집하기" 버튼, 및 페이지를 선택하는 "페이지 이동" 버튼을 마련하고 있다. 따라서 본 발명의 특징인 페이지와는 독립적인 컨텐츠 데이터의 편집뿐만 아니라 페이지 자체의 편집도 미리보기 화면에서 직접 할 수도 있다.

본 발명의 방법은 미리보기 화면에서 재작성을 위한 문서 편집을 실시하더라도 각 웹 페이지에서 템플릿의 어떤 부분을 어떤 문서에서 다시 써야하는지는 해당 정보는 유지되고 즉시 미리보기에 반영된다. 이 경우 웹 서버에 공개 측으로 설정된 URL이 요청이 전송된 경우 템플릿의 지정 부분이 편집된 문서로 재작성된 정보를 일반 HTML 파일처럼 회신된다. 페이지를 비공개 설정하면 미리보기가 표시되지도 공개 측면에서 나타날 수는 없다.

본 발명에서는, 이미지 파일, 각종 데이터 파일에 대한 링크가 포함된 HTML 문서 등의 콘텐츠 데이터와 템플릿은 CMS의 관리 화면을 통해 데이터베이스 서버에 업로드된다. 템플릿은 CMS 소정의 태그를 삽입함으로써 이러한 콘텐츠 데이터를 지정하고 저장한다. 이렇게 하여 CMS 템플릿에 가공된 웹 페이지는 모바일 웹 사이트로 네트워크를 통해 일반 사용자에게 열람된다. 또한 웹 페이지를 구성하는 템플릿은 CMS의 관리 화면에서 제작 단계와 편집을 목적으로 공개되는 사이트와 거의 동일한 상태의 미리보기 화면이 표시된다.

상술한 바와 같이, 본 발명은 미리보기 화면에 편집 버튼을 표시한다. 이 편집 버튼은 미리보기 템플릿에 포함된 컨텐츠 데이터를 편집할 수 있는 편집 화면을 시작하기 위한 것으로, 미리보기 화면에 표시되는 각 콘텐츠 데이터에 개별적으로 연결시킨 버튼이다. 편집 버튼은 일반 미리보기 화면에서는 화면 레이아웃을 파악하는 데 도움이 되도록 숨겨 두는 것이 바람직하다.

한편, 본 발명의 방법은 특히, 상기 편집 화면(40)에 포함된 편집 메뉴(50)로 제어되는 개별 편집 기능요소가 상기 모바일 웹 브라우저의 코어 엔진과 연동하는 플러그인 엔진을 통해 연동 제공된다.

플러그인(Plugin)은 제품의 주요 기능을 담당하는 단위요소를 뜻한다. 본 발명에 따른 모바일 웹 브라우저는 핵심 엔진의 기능을 최소화하고 대부분의 기능을 플러그인 인터페이스를 통해 구현되어, 플러그인의 기능 구현 여부에 따라 전혀 다른 기능을 부가하거나 기능을 변경하는 것이 가능하다.

일예로, 본 발명의 플러그인 엔진은 프로그램 내에서 각 요소간의 의존성 관리 및 업그레이드 등을 담당하는 패키지 관리자(Package Manager), 설정 화면 및 툴바 등과의 연동을 담당하는 UI 제어기, 편집 화면과의 연계 처리를 담당하는 DOM 제어기, 각종 설정값 및 적용될 html 등의 유효성 검증 기능을 수행하는 검증기, 그리고 플러그인 내에 활용되는 html / css / 이미지 등 각종 정적 외부 리소스 들을 관리하는 리소스 핸들러 등을 포함하여 구성될 수 있다.

10: 미리보기
20: 편집창
30: 편집 버튼
40: 편집 화면
50: 편집 메뉴
11: 템플릿
12: 기호

Claims

네트워크를 통해 모바일 웹 브라우저에서 볼 수 있도록 서버에 저장한 것으로서, CMS 템플릿으로 가공한 HTML 문서를 네트워크를 통해 상기 CMS 관리화면을 통해 표시하는 미리보기 화면에, 상기 템플릿에 포함된 페이지와는 독립적으로 컨텐츠 데이터를 편집할 수 있는 편집 화면을 시작할 편집 버튼을 표시하며, 상기 편집 화면에 포함된 편집 메뉴로 제어되는 개별 편집 기능요소는 상기 모바일 웹 브라우저의 코어 엔진과 연동하는 플러그인 엔진을 통해 연동 제공되는 것을 특징으로 하는 모바일 환경의 웹 문서 편집 방법.