상기한 바와 같은 목적을 달성하기 위해, 본 발명의 일 측면에 따르면, 웹문서의 스타일 요소와 관련된 CSS 데이터를 유지하는 CSS 데이터베이스; 사용자들의 웹문서 CSS 데이터를 사용자별로 유지하는 사용자 CSS 데이터베이스; 사용자가 편집을 요청한 스타일 요소에 대한 CSS 데이터를 상기 CSS 데이터베이스의 정보를 이용하여 사용자 클라이언트에 전송하는 스타일 정보 처리 서버; 및 사용자가 웹문서 스타일 편집을 요청할 경우, 상기 사용자 CSS 데이터베이스로부터 해당 사용자 CSS 데이터를 추출하여 파싱하는 CSS 파서를 포함하되, 상기 스타일 정보 처리 서버는 상기 파싱된 사용자 CSS 데이터를 사용자 클라이언트에 전송하며, 상기 사용자 클라이언트에서 구동되는 스크립트는 사용자가 편집을 요청한 스타일 요소에 대한 CSS 데이터 중 사용자가 선택한 스타일에 상응하는 CSS 데이터를 파싱하고 스크립트가 인식 가능한 오브젝트 모델로 변환하며, 상기 오브젝트 모델 정보에 기초하여 상기 파싱된 사용자 CSS 데이터를 변경하는 웹문서 스타일 변경 시스템이 제공된다.
상기 스크립트는 사용자가 변경된 CSS 데이터의 적용을 요청할 경우, 상기 파싱된 사용자 CSS 데이터를 통합한다.
상기 CSS 파서는 상기 클라이언트로부터 상기 통합된 사용자 CSS 데이터를 파싱하며, 상기 스타일 정보 처리 서버는 상기 파싱된 CSS 데이터를 이용하여 미리 설정된 규칙에 맞게 스타일이 설정되었는지 여부를 판단한다.
상기 CSS 데이터베이스는 상기 스타일 요소에 대한 CSS 데이터와 연관된 스타일 이미지를 저장한다.
상기 스크립트는, 상기 사용자가 편집을 요청한 스타일 요소에 대한 스타일 정보 이미지를 표시하는 스타일 정보 이미지 표시부; 사용자가 선택한 스타일 정보 이미지에 상응하는 CSS 데이터를 파싱하는 클라이언트 CSS 데이터 파서; 상기 파싱된 CSS 데이터를 트리 구조 또는 연관 배열 형태의 스크립트가 인식할 수 있는 구조로 변환하는 오브젝트 문서 변환부; 상기 오브젝트 문서 변환부에서 변환된 문서에 기초하여 상기 CSS 파서에 의해 파싱된 사용자 CSS 데이터를 변경하며, 변경된 사용자 CSS에 기초하여 웹문서를 디스플레이하는 스타일 변경 스타일 문서 생성부; 및 사용자가 상기 디스플레이된 웹문서 스타일을 적용할 것을 요청한 경우, 상기 변경된 사용자 CSS 데이터를 통합하여 상기 스타일 정보 처리 서버에 전송하는 변경 스타일 적용부를 포함할 수 있다.
상기 클라이언트 CSS 파서는 상기 사용자가 선택한 스타일 이미지와 연관된 CSS 데이터로부터 선택자, 프로퍼티 및 프로퍼티 값을 추출하며, 상기 오브젝트 문서 변환부는 상기 선택자, 프로퍼티 및 프로퍼티 값을 트리 구조 또는 연관 배열의 형태로 변환한다.
본 발명의 다른 측면에 따르면, 스타일 변경을 위한 명령어들의 조합이 유형적으로 구현되어 있으며, 디지털 데이터 처리장치에 의해 실행될 수 있는 프로그램을 기록한 기록 매체로서, 사용자가 편집을 요청한 스타일 요소에 대한 CSS 데이터를 수신하는 CSS 데이터 수신 모듈; 사용자의 웹문서 전체 스타일 정보를 정의한 사용자 CSS 데이터를 수신하는 사용자 CSS 데이터 수신 모듈; 상기 CSS 데이터에 포함된 다수의 스타일 정보 중 사용자가 특정 스타일을 선택한 경우, 상기 선택된 스타일과 연관된 CSS 데이터를 파싱하는 CSS 파서 모듈; 상기 CSS 파서에 의해 파싱된 데이터를 프로그램이 인식할 수 있는 형태로 변환하는 오브젝트 문서 변환 모듈; 및
상기 오브젝트 문서 변환 모듈에 의해 변환된 문서에 기초하여 사용자가 변경한 스타일 요소 및 해당 스타일 요소의 변경 스타일을 판단하고 변경된 스타일 정보를 상기 수신된 사용자 CSS 데이터에 반영하는 변경 스타일 웹문서 생성 모듈을 포함하는 프로그램을 기록한 기록 매체가 제공된다.
본 발명의 또 다른 측면에 따르면, 사용자 클라이언트와 네트워크를 통해 연결되는 웹문서 스타일 변경 시스템에서 수행되는 방법으로서, 사용자가 웹문서 스타일 편집을 요청할 경우, 상기 사용자와 연관된 CSS 데이터를 파싱하여 상기 사용자의 클라이언트로 전송하는 단계; 상기 사용자가 편집할 스타일 요소를 선택할 경우, 상기 선택된 스타일 요소와 관련된 스타일 이미지들 및 각 스타일 이미지와 관련된 CSS 데이터를 상기 사용자의 클라이언트로 전송하는 단계; 상기 사용자 클라이언트로부터 전송되는 변경된 스타일에 대한 사용자 CSS 데이터를 수신하고, 수신된 사용자 CSS 데이터를 파싱하는 단계; 및 상기 파싱된 사용자 CSS 데이터를 분석하여 미리 설정된 규칙에 맞게 스타일이 변경되었는지 여부를 판단하는 단계를 포함하되, 상기 사용자 클라이언트에서 구동되는 스크립트는 사용자가 편집을 요청한 스타일 요소에 대한 CSS 데이터 중 사용자가 선택한 스타일에 상응하는 CSS 데이터를 파싱하고 스크립트가 인식 가능한 오브젝트 모델로 변환하며, 상기 오브젝트 모델 정보에 기초하여 상기 파싱된 사용자 CSS 데이터를 변경하는 것을 특징으로 하는 웹문서 스타일 변경 방법이 제공된다.
이하에서, 첨부된 도면을 참조하여 본 발명에 따른 웹 문서 스타일 변경 시스템 및 방법의 바람직한 실시예를 상세히 설명한다.
본 발명은 다양한 종류의 웹문서의 스타일을 변경하는데 활용될 수 있다. 예를 들어, 블로그 웹문서, 커뮤니티 웹문서, 개인 홈페이지 웹문서 등 사용자 컨텐 츠를 위주로 구현되는 웹문서에 효과적으로 활용될 수 있을 것이다.
이하에서는 본 발명이 블로그 웹문서에 적용되는 경우를 예로 하여 설명한다, 그러나, 본 발명이 블로그 웹문서에 적용되는 것에 한정되는 것은 아니며, 이는 설명의 편의를 위한 것일 뿐 다양한 종류의 웹문서에 적용 가능하다는 것은 당업자에게 있어 자명할 것이다.
도 9는 본 발명에서 예로 하는 블로그 웹문서 스타일 구조의 일례를 도시한 도면이다.
도 9를 참조하면, 블로그 웹문서는 전체 배경(900), 상단 배경(902), 블로그 타이틀(904), 프로필(906), 메뉴(908), 포스트 타이틀(910) 및 포스트 박스(912)를 포함할 수 있다.
블로그 웹문서의 경우, 도 9와 같이 다양한 영역에 대해 개별적으로 스타일을 설정할 수 있다. 이하에서, 블로그와 같은 웹문서에서 사용자가 독립적으로 스타일을 설정하는 블로그 타이틀, 프로필과 같은 영역을 스타일 요소라고 정의한다. 종래의 경우, 각 스타일 요소의 스타일을 설정하기 위해 다양한 파라미터가 사용된다. 예를 들어, 블로그 타이틀 영역의 스타일 설정을 위해 블로그 타이틀의 사이즈, 배경 이미지, 텍스트 서체, 색상 등이 각각의 파라미터로 관리된다.
그러나, 본 발명의 바람직한 실시예에 따르면, 스타일 정보를 다수의 파라미터로 관리하지 않고 하나의 통합적인 CSS 데이터로 관리한다. 예를 들어, 블로그 타이틀 영역, 프로필 영역의 스타일 정보를 다수의 파라미터로 관리하지 않고 각 영역에 대해 통합된 CSS 데이터로 관리한다.
도 2는 본 발명의 바람직한 일 실시예에 따른 웹 문서 스타일 변경 시스템의 구성을 도시한 블록도이다.
도 2를 참조하면, 본 발명의 일 실시예에 따른 웹 문서 스타일 변경 시스템은 스타일 정보 처리 서버(200), CSS 파서(202), CSS 데이터베이스(204) 및 사용자 CSS 데이터베이스(206)를 포함할 수 있으며, 웹 문서 스타일 변경 시스템은 네트워크를 통해 사용자 클라이언트(210)와 연결된다.
본 발명은 스타일 정보를 정의하는 CSS 데이터를 종래와 같이 파라미터의 형태로 저장하는 것이 아니라 CSS 데이터 전체를 데이터베이스에 저장하며, CSS 파서를 이용하여 사용자가 변경한 부분의 스타일만이 적용되도록 한다.
여기서, CSS는 웹문서의 스타일을 편집하기 위한 스타일 시트 중 하나이다.
도 2에서, 사용자 CSS 데이터베이스(206)에는 웹문서에 대해 사용자가 설정한 스타일 정보가 저장된다. 일례로, 사용자 CSS 데이터베이스는 다수의 스타일 요소로 이루어지는 웹문서에 대해 하나의 CSS 데이터를 저장하고 있다.
도 6은 본 발명의 일 실시예에 따른 사용자 CSS 데이터베이스의 필드 구성을 도시한 도면이다.
도 6을 참조하면, 사용자 CSS 데이터베이스는 각 사용자별로 사용자 웹문서의 스타일을 정의한 통합된 CSS 데이터를 저장한다. 종래의 경우, 웹문서 스타일 설정을 위해 데이터베이스에 다양한 파라미터에 대한 필드가 설정되고 각 필드별 속성 정보가 저장되었으나, 본 발명의 바람직한 실시예에 따르면, 통합된 하나의 CSS 데이터가 저장된다. 물론, 사용자 CSS 데이터베이스는 문서 전체가 아닌 각 스타일 요소별로 스타일을 정의한 하나 이상의 CSS 데이터를 각 사용자에 대해 저장할 수도 있다.
또한, CSS 데이터베이스(204)에는 웹문서의 각 스타일 요소에 대한 다양한 스타일 설정 데이터가 저장된다. 예를 들어, CSS 데이터베이스(204)는 웹문서의 스타일 요소 중 하나인 배경 화면에 대해 사용자가 선택 가능한 다양한 스타일 설정 CSS 데이터를 저장하고 있다.
도 5는 본 발명의 바람직한 일 실시예에 따른 CSS 데이터베이스의 필드 구성을 도시한 도면이다.
도 5에 도시된 바와 같이, 각각의 스타일 요소별로 CSS 데이터가 저장되며, 각각의 CSS 데이터는 썸네일과 같은 미리보기 이미지와 연관되어 저장된다. 이러한 썸네일 이미지는 각 CSS 스타일 설정 데이터에 의해 어떻게 스타일이 구현되는지 사용자에게 표시해주기 위한 데이터이다.
CSS 데이터베이스(204)에 저장된 다양한 종류의 스타일 설정 데이터는 사용자가 웹문서 스타일을 편집할 경우 사용자 클라이언트에 제공된다.
위에서 살펴본 바와 같이, 웹문서 편집을 위한 스타일 설정 데이터 및 각 사용자 페이지의 스타일 데이터가 다양한 파라미터별로 관리되지 않고 CSS 데이터 자체로 관리되므로 데이터베이스의 구성이 간단해지며 프로그래밍 시 다양한 종류의 파라미터를 일일이 고려하지 않아도 되는 장점이 있다.
스타일 정보 처리 서버(200)는, 사용자가 웹문서 스타일 편집을 요청할 경우, CSS 데이터베이스로부터 사용자가 설정할 수 있는 다양한 종류의 스타일이 정의된 CSS 데이터를 추출하여 사용자 클라이언트에 제공한다. 예를 들어, 사용자가 스타일 요소 중 하나인 블로그 타이틀의 편집을 요청한 경우, 스타일 정보 처리 서버(200)는 스타일 요소인 블로그 타이틀과 연관하여 저장된 다양한 종류의 CSS 데이터 및 이들의 썸네일 이미지를 사용자 클라이언트에 제공한다.
CSS 파서(202)는 문자열로 이루어진 CSS 데이터를 속성별로 파싱하는 기능을 한다. CSS 스타일 데이터 자체는 텍스트 데이터로서 어떠한 속성이 어떻게 정의되어 있는지 파악할 수 없는 데이터이다. CSS 파서(202)는 스타일 정보를 파라미터에 의해 관리하지 않고도 스타일 정보의 속성을 파악할 수 있도록 각 속성별로 CSS 데이터를 파싱한다.
CSS로 구현되는 통상적인 스타일 시트는 선택자 및 선언문으로 구성되며, 선언문은 프로퍼티와 이에 상응하는 프로퍼티 값으로 구성된다.
예를 들어, body 라는 선택자에 대해 사이즈가 설정될 때, size라는 프로퍼티와 사이즈 값이 설정된다.
CSS 파서(202)는 CSS 데이터를 분석하여 선택자, 프로퍼티 및 프로퍼티 값을 각각 추출하여 일반 문자열인 CSS 데이터로부터 의미 있는 데이터를 속성별로 파싱한다.
도 2에서, CSS 파서(202)는 스타일 정보 처리 서버 내부의 모듈로 포함될 수도 있으며, 별개의 장치에 의해 구현될 수도 있다. CSS 파싱 알고리즘은 공지된 알고리즘이므로 이에 대한 상세한 설명은 생략하기로 한다.
서버단에 구비되는 CSS 파서는 사용자가 스타일 정보의 편집을 요청할 경우, 사용자 CSS 데이터베이스로부터 해당 사용자의 스타일 정보를 정의하는 CSS 데이터를 추출하고, 추출된 CSS 데이터를 파싱한다.
CSS 파서(202)는 사용자의 CSS 데이터를 파싱한 정보를 사용자 클라이언트에 제공하며, 사용자 클라이언트는 CSS 파서(202)에 의해 파싱된 데이터를 이용하여 웹문서의 스타일 정보를 편집한다.
사용자 클라이언트에 의해 스타일 정보 편집이 완료된 경우, 변경된 사용자 CSS 데이터가 CSS 파서(202)에 제공되며, CSS 파서(202)는 사용자 CSS 데이터가 사용자 CSS 데이터베이스(206)에 저장되기 전에 변경된 CSS 데이터를 파싱하여 스타일 정보 처리 서버(200)에 제공한다.
스타일 정보 처리 서버(200)는 파싱된 CSS 데이터를 이용하여 미리 설정된 규칙에 맞게 스타일 정보가 변경되었는지 여부를 판단한 후 변경된 사용자 CSS 데이터를 사용자 CSS 데이터베이스(206)에 저장한다.
예를 들어, 스타일 정보 처리 서버(200)는 사용자의 어뷰징(abusing)을 방지하기 위해 미리 설정된 허용 사이즈 내로 스타일을 설정하였는지 또는 허용된 이미지 형식을 사용하였는지 여부 등을 판단한다.
CSS 파서(202)에 의해 선택자의 프로퍼티 및 프로퍼티 값이 파싱되어 스타일 정보 처리 서버(200)에 제공되므로, 스타일 정보 처리 서버는 위와 같이 미리 설정된 규칙에 맞게 스타일 정보가 변경되었는지 여부를 확인하는 것이 가능하다.
사용자 클라이언트는 스타일 정보 처리 서버로부터 사용자가 편집을 요청한 스타일 요소의 CSS 데이터 및 사용자가 기존에 설정한 CSS 데이터를 수신하며, 수 신된 정보를 이용하여 사용자의 설정에 따라 웹문서의 스타일을 편집한다.
이때, 사용자 클라이언트에는 사용자의 설정에 따라 스타일 정보를 편집하기 위한 프로그램 모듈이 실행되며, 이러한 프로그램 모듈은 사용자에게 제공되는 웹페이지에 스크립트 형태로 제공될 수도 있고, 액티브엑스 컨트롤의 형태로 제공될 수도 있으며, 스크립트 및 액티브엑스 컨트롤이 결합된 형태로 제공될 수도 있다.
파라미터별로 데이터가 분화되어 있지 않으므로, 사용자 클라이언트에도 스크립트 또는 액티브엑스 컨트롤을 통해 CSS 파서가 제공되며, 스타일 정보 편집 시 제공된 CSS 파서를 이용한다.
사용자 클라이언트에서 사용자의 요청에 따라 스타일 정보의 편집이 수행되는 과정은 도 3를 참조하여 설명한다.
도 3은 본 발명의 바람직한 일 실시예에 따른 사용자 클라이언트에 구비되는 스타일 정보 편집을 위한 프로그램 모듈 구성을 도시한 블록도이다.
도 3을 참조하면, 본 발명의 일 실시예에 따른 사용자 클라이언트에 구비되는 프로그램은 사용자 CSS 데이터 수신 모듈(300), CSS 데이터 수신 모듈(302), 썸네일 표시 모듈(304), CSS 파서 모듈(306), 오브젝트 문서 변환 모듈(308), 변경 스타일 문서 생성 모듈(310) 및 변경 스타일 적용 모듈(312)을 포함할 수 있다.
사용자가 스타일 정보의 편집을 요청하면, 스타일 정보의 편집을 위한 인터페이스가 제공된다. 사용자가 스타일 정보의 편집을 요청하고 스타일 정보 편집 인터페이스가 활성화될 경우, 사용자가 기 설정한 CSS 데이터가 요청되며, 전술한 바와 같이, 서버측의 CSS 파서(202)는 사용자 CSS 데이터를 파싱하며, 사용자 CSS 데이터 수신 모듈(300)은 스타일 정보 처리 서버(200)로부터 파싱된 사용자 CSS 데이터를 수신한다. 수신되는 파싱된 사용자 CSS 데이터는 메모리 또는 로컬 저장 영역에 일시적으로 저장된다.
한편, 사용자는 활성화된 스타일 편집 인터페이스를 이용하여 특정 스타일 요소의 편집을 요청할 수 있으며, CSS 데이터 수신 모듈(302)은 사용자가 편집을 선택한 스타일 요소와 연관된 CSS 데이터를 스타일 정보 처리 서버(200)로부터 수신한다.
예를 들어, 도 9와 같은 스타일 요소가 있고, 사용자가 블로그 타이틀에 대한 편집을 요청한 경우, CSS 데이터 수신 모듈(302)은 블로그 타이틀과 관련하여 CSS 데이터베이스에 저장된 CSS 데이터 및 각 CSS 데이터와 연관된 썸네일 이미지를 수신한다.
썸네일 표시 모듈(304)은 CSS 데이터 수신 모듈(302)이 수신한 데이터 중 썸네일 이미지를 표시하는 기능을 한다. 전술한 예와 같이, 사용자가 스타일 요소 중 블로그 타이틀에 대한 편집을 요청한 경우, 썸네일 표시 모듈(304)은 블로그 타이틀과 관련되어 수신된 다양한 썸네일 이미지를 표시한다. 사용자는 썸네일 표시 모듈(304)에 의해 표시되는 스타일과 관련된 썸네일 이미지 중 하나를 선택할 수 있다. 물론 사용자는 이미지의 선택과 함께 세부적인 스타일을 함께 설정할 수도 있으며, 예를 들어, 텍스트 서체, 색깔, 배경색 등을 추가적으로 선택할 수 있다.
사용자가 특정 이미지를 선택하고 세부적인 스타일을 설정할 경우, 클라이언트의 CSS 파서 모듈(306)은 수신된 CSS 데이터 중 사용자의 설정과 연관된 CSS 데이터에 대한 파싱을 수행한다. 각 썸네일 이미지와 CSS 데이터가 연관되어 있기 때문에, CSS 파서 모듈(306)은 사용자가 선택한 썸네일 이미지와 연관된 CSS 데이터에 대해 파싱을 수행하며, 일반 텍스트 문자열인 CSS 데이터로부터 선택자, 프로퍼티 및 프로퍼티 값 등을 파싱한다.
오브젝트 문서 변환 모듈(308)은 CSS 파서에 의해 파싱된 데이터를 이용하여 CSS 데이터를 스크립트와 같은 프로그램이 처리 가능한 오브젝트형 문서로 변환하는 기능을 한다.
본 발명의 바람직한 실시예에 따르면, 오브젝트 문서 변환 모듈(308)은 문서 오브젝트 모델(Document Object Model: DOM)의 형태로 파싱된 데이터를 변환할 수 있다. 오브젝트 문서 변환 모듈(308)은 파싱된 CSS 데이터를 문서 오브젝트 모델의 트리 구조 또는 연관 배열 구조로 변환하여 메모리 또는 로컬 저장 장치에 저장한다.
도 4는 본 발명의 일 실시예에 따른 오브젝트 문서 변환 모듈(308)에 의해 파싱된 CSS 데이터를 문서 오브젝트 모델로 변환한 일례를 도시한 도면이다.
도 4를 참조하면, 파싱된 CSS 데이터에서 선택자가 가장 상위에 노드에 존재하고, 각 선택자의 하위 프로퍼티들이 선택자의 하위 노드에 위치하며, 각 프로퍼티 값들이 프로퍼티의 하위 노드에 놓이도록 CSS 데이터는 트리 구조 형태의 문서 오브젝트 모델로 변환된다.
이와 같이, 트리 구조의 문서 오브젝트 모델로 변환될 경우, 스크립트와 같은 프로그램은 CSS 데이터로부터 선택자 및 프로퍼티 종류를 파악할 수 있으며, 각 프로퍼티들이 어떻게 설정되었는지 여부를 판단할 수 있다. 물론, 전술한 바와 같이, 트리 구조 형태가 아닌 연관 배열의 구조로 파싱된 CSS 데이터를 변환할 수도 있 다.
변경 스타일 문서 생성 모듈(310)은 변환된 오브젝트형 문서를 이용하여 사용자의 새로운 설정을 반영한 웹문서를 생성하는 기능을 한다. 변경 스타일 문서 생성 모듈(310)은 스크립트의 형태로 구현될 수 있으며, 상기 오브젝트 문서 변환 모듈에 의해 변환된 문서를 해석하여 어떠한 스타일 요소가 변경되었는지 여부를 판단하고, 변경된 스타일 요소의 새로운 프로퍼티 값들을 판단한다.
한편, 변경 스타일 문서 생성 모듈(310)은 파싱된 사용자 CSS 데이터로부터 사용자가 변경한 스타일 요소에 상응하는 CSS 파싱 데이터를 판단한다. 변경 스타일 문서 생성 모듈(310)은 해당 CSS 파싱 데이터의 프로퍼티 및 프로퍼티 값을 사용자가 설정한 값으로 변환한다.
변경 스타일 문서 생성 모듈(310)은 변경된 스타일의 웹문서를 사용자 디스플레이 장치에 디스플레이하며, 사용자에게 변경된 스타일을 적용할지 여부를 질의하는 인터페이스 버튼을 제공한다.
변경 스타일 적용 모듈(312)은, 사용자가 상기 인터페이스 버튼을 통해 변경 스타일 적용을 요청할 경우, 변경 스타일 문서 생성 모듈에서 생성된 변경 스타일 문서의 CSS를 하나의 데이터로 통합한다. 변경된 사용자의 CSS 데이터는 스타일 정보 처리 서버로 전송된다.
도 7은 본 발명의 바람직한 일 실시예에 따른 사용자가 웹문서 스타일 편집을 요청할 경우 스타일 정보 처리 서버 및 사용자 클라이언트의 동작을 도시한 순서도이다.
도 7을 참조하면, 사용자가 스타일 편집을 요청할 경우, 클라이언트에서 동작하는 프로그램은 스타일 변경 인터페이스를 활성화시킨다(단계 700).
도 10은 본 발명의 일 실시예에 따른 스타일 변경 인터페이스의 일례를 도시한 도면이다
도 10을 참조하면, 스타일 변경 인터페이스는 블로그 타이틀, 블로그 배경, 블로그 메뉴, 포스트 타이틀, 포스트 배경 및 포스트 박스를 편집할 수 있는 버튼을 제공하며, 스킨 및 레이 아웃을 변경할 수 있는 인터페이스 버튼을 제공한다.
클라이언트에서, 스타일 변경 인터페이스가 활성화될 경우, 스타일 변경 인터페이스 활성화 메시지가 스타일 정보 처리 서버로 전송된다(단계 702).
스타일 변경 인터페이스 활성화 메시지가 스타일 정보 처리 서버에 전송되면, 스타일 정보 처리 서버는 해당 메시지를 CSS 파서에 제공하며(단계 704), CSS 파서는 스타일 편집을 요청한 사용자의 개인 CSS 데이터를 사용자 CSS 데이터베이스로부터 추출한 후 CSS 데이터 파싱을 수행한다(단계 706).
파싱된 사용자 CSS 데이터는 스타일 정보 처리 서버에 제공되고(단계 708), 스타일 정보 처리 서버는 파싱된 사용자 CSS 데이터를 사용자 클라이언트에 전송한다(단계 710). 물론, CSS 파서가 스타일 정보 처리 서버 내부의 모듈로 포함될 경우, CSS 파서와 스타일 정보 처리 서버 사이의 통신 절차는 생략될 수 있다.
사용자는 활성화된 스타일 변경 인터페이스를 통해 특정 스타일 요소의 편집을 요청한다(단계 712). 예를 들어, 스타일 변경 인터페이스에 표시된, 블로그 타이틀, 블로그 배경, 포스트 타이틀과 같은 스타일 요소 중 어느 하나에 대한 편집 을 요청한다.
사용자가 선택한 스타일 요소를 포함하는 스타일 편집 요청 정보는 스타일 정보 처리 서버에 전송된다(단계 714).
스타일 정보 처리 서버는 CSS 데이터베이스로부터 사용자가 선택한 스타일 요소의 CSS 데이터를 추출하며, 추출된 CSS 데이터를 사용자 클라이언트에 전송한다(단계 716). 전술한 바와 같이, 선택된 스타일 요소의 썸네일 이미지들 및 이와 연관된 CSS 데이터가 사용자 클라이언트에 전송된다.
도 8은 본 발명의 바람직한 일 실시예에 따른 스타일 요소에 대한 CSS 데이터 및 사용자 CSS 데이터를 이용하여 웹문서 스타일 변경을 위해 클라이언트에서 수행되는 동작을 도시한 순서도이다.
도 8을 참조하면, 클라이언트에서 동작하는 스타일 변경을 위한 프로그램은 스타일 정보 처리 서버로부터 수신된 사용자가 선택한 요소의 썸네일 이미지들을 디스플레이한다(단계 800).
사용자가 특정 썸네일 이미지를 선택할 경우, 해당 썸네일 이미지와 연관된 CSS 데이터에 대한 파싱을 수행한다(단계 802). 파싱에 의해 사용자가 선택한 썸네일 이미지와 연관된 CSS 데이터의 선택자, 프로퍼티 및 프로퍼티 값 등을 추출한다.
CSS 데이터에 대한 파싱이 수행되면, 파싱된 데이터를 프로그램이 인식할 수 있는 형태의 문서 오브젝트 모델로 변환한다(단계 804). 전술한 바와 같이, CSS를 프로그램이 인식할 수 있도록 트리 구조 또는 연관 배열의 형태로 변환하며, 이를 위한 스크립트의 일례를 다음과 같다.
function css2obj(css) {
var items = css.split(/;\s*/g);
var sty, obj = {};
for(var i=0; i < items.length; i++) {
new RegExp('^([a-z0-9\-]+)\\s*:\\s*(.+)$','i').exec(items[i]);
obj[RegExp.$1] = RegExp.$2;
}
return obj;
}
파싱된 CSS가 문서 오브젝트 모델의 형태로 변환되면, 사용자가 선택한 썸네일 이미지가 어떠한 스타일 요소에 대한 변경을 요청하였는지 여부를 판단한다(단계 806).
변경된 스타일 요소를 판단한 후, 문서 오브젝트 모델로 변환된 CSS 설정값을 사용자 CSS 데이터에 적용함으로써 사용자 CSS 데이터를 변경한다.
이때, 문서 오브젝트 모델로 변환된 CSS 설정값을 사용자 CSS 데이터에 적용하는 스크립트의 일례는 다음과 같다.
function applyRuleExec(cssRule, num) {
var objs;
for(var x in cssRule) {
objs = $s(x);
// save this rule
adaptedRule[x] = css2obj(cssRule[x][num]);
// apply
for(var i=0; i < objs.length; i++) objs[i].style.cssText = cssRule[x][num];
}
$('preview_loading').style.display = 'none';
}
// key 값에 해당하는 CSS규칙을 가져온다.
var getRule = function(key) {
getRule.executed = true;
if (typeof adaptedRule[key] == 'undefined') {
adaptedRule[key] = {};
}
return adaptedRule[key];
}
getRule.executed = false;
사용자 CSS 데이터가 변경되면, 변경된 CSS 데이터에 기초하여 스타일이 변경된 웹문서를 디스플레이한다(단계 810).
사용자가 디스플레이된 웹문서와 같은 스타일을 적용할 것을 요청할 경우, 변 경된 통합 CSS 데이터를 생성하며, 생성된 통합 CSS 데이터를 스타일 정보 처리 서버에 전송한다(단계 812).
상기한 본 발명의 바람직한 실시예는 예시의 목적을 위해 개시된 것이고, 본 발명에 대해 통상의 지식을 가진 당업자라면 본 발명의 사상과 범위 안에서 다양한 수정, 변경, 부가가 가능할 것이며, 이러한 수정, 변경 및 부가는 하기의 특허청구범위에 속하는 것으로 보아야 할 것이다.