KR102579484B1 - 위지위그 편집 도구를 제공하는 방법 및 시스템 - Google Patents

Abstract

본 개시는 적어도 하나의 컴퓨팅 장치에 의해 수행되는, 위지위그 편집 도구를 제공하는 방법에 관한 것이다. 편집 도구를 제공하는 방법은, 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하는 단계, 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링하는 단계 및 렌더링된 테마를 포함한 페이지를 출력하는 단계를 포함한다. 여기서 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함한다.

Description

위지위그 편집 도구를 제공하는 방법 및 시스템{METHOD AND SYSTEM FOR PROVIDING WYSIWYG EDITOR}

본 개시는 위지위그 편집 도구를 제공하는 방법 및 시스템에 관한 것으로, 구체적으로, 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하고, 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링하여 출력하는 방법에 관한 것이다.

인터넷, 통신 기술의 발달과 전자 기기의 발달에 따라, 사용자들은 개인 게시물을 작성하고 발행함으로써 다른 사용자들과 의견을 나눌 수 있다. 예를 들어, 자신의 일상과 관심사를 공유하는 개인 블로그 서비스, 공통 관심사를 가진 사용자가 모인 카페 서비스, 질의-답변 서비스 등을 이용하는데 있어서, 사용자는 개인 게시물을 작성하고 발행할 수 있다. 사용자가 게시물을 작성하는데 있어서, 문서 편집 도구가 제공될 수 있다. 사용자가 게시물을 작성 및 편집할 때 사용자 단말을 통해 출력되는 화면 그대로 게시물이 발행되고 다른 사용자들에게 공유될 수 있도록 하는 위지위그(WYSIWYG; what you see is what you get) 방식의 편집 도구가 제공될 수 있다.

한편, 종래 기술에 따라 제공되는 편집 도구는 CSS(Cascading Style Sheets) 구조를 기반으로 제공되므로, CSS 종속적이라는 문제가 있었다. 따라서, 종래의 편집 도구들은 멀티 플랫폼에서 지원되지 않으며, 각 플랫폼 별로 별도의 에디터를 제공해야 한다는 문제점이 있었다. 이 경우, 웹에서 작성된 게시물을 애플리케이션에서 출력하거나, 애플리케이션에서 작성된 게시물을 웹에서 출력하면, 사용자가 게시물을 작성 및 편집할 때 나타나는 화면 그대로 출력되지 않을 수 있다. 즉, 위지위그 편집 도구로서의 기능을 제공할 수 없다는 문제가 발생할 수 있다.

본 개시는 상기와 같은 문제를 해결하기 위한 방법, 기록 매체에 저장된 컴퓨터 프로그램 및 장치(시스템)를 제공한다.

본 개시는 방법, 장치(시스템) 또는 판독 가능 저장 매체에 저장된 컴퓨터 프로그램을 포함한 다양한 방식으로 구현될 수 있다.

본 개시의 일 실시예에 따르면, 적어도 하나의 컴퓨팅 장치에 의해 수행되는, 위지위그(WYSIWYG) 편집 도구를 제공하는 방법은, 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하는 단계, 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링하는 단계 및 렌더링된 테마를 포함한 페이지를 출력하는 단계를 포함한다. 여기서, 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함한다.

본 개시의 일 실시예에 따른 위지위그 편집 도구를 제공하는 방법을 컴퓨터에서 실행하기 위해 컴퓨터 판독 가능한 기록 매체에 저장된 컴퓨터 프로그램이 제공된다.

본 개시의 일 실시예에 따른 정보 처리 시스템은, 통신 모듈, 메모리 및 메모리와 연결되고, 메모리에 포함된 컴퓨터 판독 가능한 적어도 하나의 프로그램을 실행하도록 구성된 적어도 하나의 프로세서를 포함하고, 적어도 하나의 프로그램은, 외부 시스템으로부터 복수의 기준 테마 및 복수의 기준 테마에 대한 메타 데이터를 수신하고, 수신된 복수의 기준 테마 및 메타 데이터를 CDN 서버에 제공하고, 사용자 단말로부터 업데이트 요청에 응답하여, 복수의 기준 테마 및 메타 데이터 중 적어도 일부를 사용자 단말에 전송하기 위한 명령어들을 포함하고, 복수의 기준 테마의 각각은 하나 이상의 컴포넌트에 대한 정보를 포함한다.

본 개시의 일부 실시예에서, 컴포넌트 형 편집 도구를 제공할 수 있다. 각 컴포넌트가 텍스트의 영향을 받지 않고, 주체적으로 레이아웃과 스타일을 가지며, 각 컴포넌트는 구분되어 있어 사용자가 쉽게 콘텐츠를 생성할 수 있다. 즉, 사용자가 사용하고자 하는 컴포넌트를 추가하고, 컴포넌트에 대한 레이아웃 및 스타일을 변경함으로써 손쉽게 게시물을 작성 및 발행할 수 있다.

본 개시의 일부 실시예에서, 멀티 플랫폼을 지원하는 온라인 편집 도구를 제공할 수 있다. 즉, 웹 형태뿐만 아니라, 안드로이드, IOS 등의 애플리케이션 형태로도 온라인 편집 도구를 제공할 수 있다. 이를 위해, 메타 포맷을 이용하여 플랫폼 상관없이 테마에 대한 값을 정의하여 제공할 수 있다. 즉, CSS(Cascading Style Sheets)에 종속적인 스타일링이 아닌, 안드로이드나 IOS에 모두 적용할 수 있도록 패턴화된 테마를 정규화하여 저장한 메타 파일을 제공할 수 있다. 또한, 테마는 동적으로 업데이트될 수 있다.

본 개시의 효과는 이상에서 언급한 효과로 제한되지 않으며, 언급되지 않은 다른 효과들은 청구범위의 기재로부터 본 개시가 속하는 기술분야에서 통상의 지식을 가진 자(이하, '통상의 기술자'라 함)에게 명확하게 이해될 수 있을 것이다.

본 개시의 실시예들은, 이하 설명하는 첨부 도면들을 참조하여 설명될 것이며, 여기서 유사한 참조 번호는 유사한 요소들을 나타내지만, 이에 한정되지는 않는다.
도 1은 본 개시의 일 실시예에 따라 사용자에게 위지위그 편집 도구를 제공하는 예시를 나타내는 도면이다.
도 2는 본 개시의 일 실시예에 따른 위지위그 편집 도구를 제공하기 위하여, 정보 처리 시스템이 복수의 사용자 단말과 통신 가능하도록 연결된 구성을 나타내는 개요도이다.
도 3은 본 개시의 일 실시예에 따른 사용자 단말 및 정보 처리 시스템의 내부 구성을 나타내는 블록도이다.
도 4는 본 개시의 일 실시예에 따른 위지위그 편집 도구를 제공하는 방법을 나타내는 흐름도이다.
도 5는 본 개시의 일 실시예에 따라 위지위그 편집 도구를 제공하기 위해, 사용자 단말에 메타 파일을 제공하는 예시를 나타내는 도면이다.
도 6은 본 개시의 다른 실시예에 따라 위지위그 편집 도구를 제공하기 위해, 사용자 단말에 메타 파일을 제공하는 예시를 나타내는 도면이다.
도 7은 본 개시의 일 실시예에 따른 인용구 컴포넌트에 대하여 패턴화된 기준 테마의 예시를 나타내는 도면이다.
도 8은 본 개시의 일 실시예에 따라 동일한 기준 테마에 상이한 스타일이 적용되는 경우의 렌더링 결과의 예시를 나타내는 도면이다.
도 9는 본 개시의 일 실시예에 따른 메타 포맷 내의 값을 변경함에 따라 컴포넌트에 대한 스타일을 변경하여 파생 테마를 생성하는 예시를 나타내는 도면이다.
도 10은 본 개시의 일 실시예에 따라 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하여 파생 테마를 생성하는 예시를 나타내는 도면이다.

이하, 본 개시의 실시를 위한 구체적인 내용을 첨부된 도면을 참조하여 상세히 설명한다. 다만, 이하의 설명에서는 본 개시의 요지를 불필요하게 흐릴 우려가 있는 경우, 널리 알려진 기능이나 구성에 관한 구체적 설명은 생략하기로 한다.

첨부된 도면에서, 동일하거나 대응하는 구성요소에는 동일한 참조부호가 부여되어 있다. 또한, 이하의 실시예들의 설명에 있어서, 동일하거나 대응되는 구성요소를 중복하여 기술하는 것이 생략될 수 있다. 그러나, 구성요소에 관한 기술이 생략되어도, 그러한 구성요소가 어떤 실시예에 포함되지 않는 것으로 의도되지는 않는다.

개시된 실시예의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나, 본 개시는 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시예들은 본 개시가 완전하도록 하고, 본 개시가 통상의 기술자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것일 뿐이다.

본 명세서에서 사용되는 용어에 대해 간략히 설명하고, 개시된 실시예에 대해 구체적으로 설명하기로 한다. 본 명세서에서 사용되는 용어는 본 개시에서의 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어들을 선택하였으나, 이는 관련 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 발명의 설명 부분에서 상세히 그 의미를 기재할 것이다. 따라서, 본 개시에서 사용되는 용어는 단순한 용어의 명칭이 아닌, 그 용어가 가지는 의미와 본 개시의 전반에 걸친 내용을 토대로 정의되어야 한다.

본 명세서에서의 단수의 표현은 문맥상 명백하게 단수인 것으로 특정하지 않는 한, 복수의 표현을 포함한다. 또한, 복수의 표현은 문맥상 명백하게 복수인 것으로 특정하지 않는 한, 단수의 표현을 포함한다. 명세서 전체에서 어떤 부분이 어떤 구성요소를 포함한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다.

또한, 명세서에서 사용되는 '모듈' 또는 '부'라는 용어는 소프트웨어 또는 하드웨어 구성요소를 의미하며, '모듈' 또는 '부'는 어떤 역할들을 수행한다. 그렇지만, '모듈' 또는 '부'는 소프트웨어 또는 하드웨어에 한정되는 의미는 아니다. '모듈' 또는 '부'는 어드레싱할 수 있는 저장 매체에 있도록 구성될 수도 있고 하나 또는 그 이상의 프로세서들을 재생시키도록 구성될 수도 있다. 따라서, 일 예로서, '모듈' 또는 '부'는 소프트웨어 구성요소들, 객체지향 소프트웨어 구성요소들, 클래스 구성요소들 및 태스크 구성요소들과 같은 구성요소들과, 프로세스들, 함수들, 속성들, 프로시저들, 서브루틴들, 프로그램 코드의 세그먼트들, 드라이버들, 펌웨어, 마이크로 코드, 회로, 데이터, 데이터베이스, 데이터 구조들, 테이블들, 어레이들 또는 변수들 중 적어도 하나를 포함할 수 있다. 구성요소들과 '모듈' 또는 '부'들은 안에서 제공되는 기능은 더 작은 수의 구성요소들 및 '모듈' 또는 '부'들로 결합되거나 추가적인 구성요소들과 '모듈' 또는 '부'들로 더 분리될 수 있다.

본 개시의 일 실시예에 따르면, '모듈' 또는 '부'는 프로세서 및 메모리로 구현될 수 있다. '프로세서'는 범용 프로세서, 중앙 처리 장치(CPU), 마이크로프로세서, 디지털 신호 프로세서(DSP), 제어기, 마이크로제어기, 상태 머신 등을 포함하도록 넓게 해석되어야 한다. 몇몇 환경에서, '프로세서'는 주문형 반도체(ASIC), 프로그램가능 로직 디바이스(PLD), 필드 프로그램가능 게이트 어레이(FPGA) 등을 지칭할 수도 있다. '프로세서'는, 예를 들어, DSP와 마이크로프로세서의 조합, 복수의 마이크로프로세서들의 조합, DSP 코어와 결합한 하나 이상의 마이크로프로세서들의 조합, 또는 임의의 다른 그러한 구성들의 조합과 같은 처리 디바이스들의 조합을 지칭할 수도 있다. 또한, '메모리'는 전자 정보를 저장 가능한 임의의 전자 컴포넌트를 포함하도록 넓게 해석되어야 한다. '메모리'는 임의 액세스 메모리(RAM), 판독-전용 메모리(ROM), 비-휘발성 임의 액세스 메모리(NVRAM), 프로그램가능 판독-전용 메모리(PROM), 소거-프로그램가능 판독 전용 메모리(EPROM), 전기적으로 소거가능 PROM(EEPROM), 플래쉬 메모리, 자기 또는 광학 데이터 저장장치, 레지스터들 등과 같은 프로세서-판독가능 매체의 다양한 유형들을 지칭할 수도 있다. 프로세서가 메모리로부터 정보를 판독하고/하거나 메모리에 정보를 기록할 수 있다면 메모리는 프로세서와 전자 통신 상태에 있다고 불린다. 프로세서에 집적된 메모리는 프로세서와 전자 통신 상태에 있다.

본 개시에서, '테마'는 게시물 또는 문서를 구성하는 레이아웃 및 스타일을 포함한 전반적인 정보를 지칭할 수 있다. 예를 들어, 테마는 콘텐츠 영역에서 페이지의 전체 스타일(예를 들어, 배경색, 배경 이미지, 그 외 꾸밈 요소 등)을 포함할 수 있다. 다른 예로서, 테마는 콘텐츠 텍스트 요소들이 사용한 폰트 정보를 포함할 수 있다. 또 다른 예로서, 테마는 각 컴포넌트의 레이아웃 및/또는 레이아웃 요소의 스타일(예를 들어, 크기, 배경색, 폰트 색, 간격, 정렬, 투명도, 상대적인 위치, 그 외 스타일 요소 등)을 포함할 수 있다.

본 개시에서, '컴포넌트'는 게시물 또는 문서에 삽입될 수 있는 콘텐츠의 항목, 콘텐츠 블록 등을 지칭할 수 있다. 예를 들어, 컴포넌트는 '인용구', '이미지', '장소', '동영상', '문서 제목'등의 각 콘텐츠의 항목을 지칭할 수 있다. 다른 예로서, 게시물에서 콘텐츠의 항목으로 구별되는 각 블록을 지칭할 수 있다.

본 개시에서, '레이아웃'은 컴포넌트를 구성하는 요소, 각 요소들의 배치 구성, 각 요소들의 스타일 등을 지칭할 수 있다. 일 실시예에서, 레이아웃은, 컴포넌트를 구성하는 렌더링 단위를 지칭할 수 있다. 예를 들어, 문서 제목 컴포넌트의 레이아웃은 컴포넌트 래퍼, 제목, 부제목, 배경 이미지를 포함할 수 있다. 다른 예로서, 동영상 컴포넌트의 레이아웃은 컴포넌트 래퍼, 동영상 프리뷰, 캡션, 플레이 버튼, 플레이 시간을 포함할 수 있다. 추가적으로 또는 대안적으로, 레이아웃은 컴포넌트에서 제공하는 고유 렌더링 목록을 지칭할 수 있다. 추가적으로 또는 대안적으로, 레이아웃은 고유 렌더링 목록의 렌더링 커스텀을 위해 패턴화된 타입을 지칭할 수 있다. 즉, 레이아웃은 컴포넌트를 구성하는 각 요소들의 배치 상태에 대한 정보를 포함할 수 있다.

본 개시에서, '스타일'은 컴포넌트, 컴포넌트의 레이아웃에 대하여, 디자인 커스텀을 할 수 있도록 제공되는 대상에 해당할 수 있다. 예를 들어, 컴포넌트 또는 컴포넌트의 레이아웃의 너비, 높이, 크기, 배경색, 그림자 처리, 폰트, 배치, 정렬, 글꼴(예를 들어, italic, bold 등), 폰트 사이즈, 폰트 색, 테두리, 여백, 패딩 등을 포함할 수 있다.

도 1은 본 개시의 일 실시예에 따라 사용자에게 위지위그 편집 도구를 제공하는 예시를 나타내는 도면이다. 도 1에 도시된 화면(120)은, 사용자(100)가 사용자 단말(예를 들어, 데스크 탑, 스마트폰, 태블릿 PC 등)(110)에서 게시물 작성과 연관된 애플리케이션(예를 들어, 블로그 애플리케이션, 질의 애플리케이션, 커뮤니티 애플리케이션 등) 및/또는 웹(WEB) 브라우저(예를 들어, 웹 브라우저 애플리케이션 등)를 실행하여 게시물을 작성하는데 있어서, 위지위그 편집 도구를 제공받는 예시를 보여준다. 일 실시예에서, 사용자는 게시물 작성과 연관된 애플리케이션 및/또는 웹 브라우저를 통해 컴포넌트 기반의 위지위그 편집 도구를 제공받을 수 있다.

사용자 단말(예를 들어, 사용자 단말의 적어도 하나의 프로세서 등)(110)은 위지위그 편집 도구를 제공하기 위해, 외부 시스템(예를 들어, 정보 처리 시스템)으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다. 여기서, 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함할 수 있다. 사용자 단말(110)은 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링할 수 있다. 일 실시예에서, 사용자 단말(110)은 리소스(예를 들어, 이미지, 폰트 등), 기준 테마 및 기준 테마에 대한 메타 데이터를 이용하여 페이지를 렌더링할 수 있다.

일 실시예에서, 도 1에 도시된 바와 같이, 편집 도구가 특정 플랫폼에서 동작되는 웹(예를 들어, 데스크 탑 Web)을 통해 제공되는 경우, 사용자 단말(110)은 언어 독립형 데이터 포맷(예: Json 형태의 데이터 포맷 등)으로부터 변환된 웹 상에서 지원되는 스타일시트 데이터 포맷(예: CSS 형태의 데이터 포맷 등)의 메타 파일을 수신할 수 있다. 이에 따라, 사용자 단말(110)은 수신된 스타일시트 데이터 포맷의 메타 파일을 이용하여 테마를 포함한 페이지를 렌더링할 수 있다. 다른 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 애플리케이션을 통해 제공되는 경우, 사용자 단말(110)은 해석 모듈에 의해 메타 파일을 해석하여 테마를 포함한 페이지를 렌더링할 수 있다. 여기서, 해석 모듈은 테마를 정의하는 메타 파일을 해석하도록 구성되고, 사용자 단말(110) 및/또는 외부 시스템에 포함될 수 있다.

도시된 바와 같이, 사용자 단말(110)은 렌더링된 테마를 포함한 페이지를 출력할 수 있다. 일 실시예에서, 사용자(100)는 편집 도구에서 컴포넌트를 선택하고, 컴포넌트 내에 콘텐츠(예를 들어, 텍스트, 이미지 등)를 입력하고, 스타일(예를 들어, 폰트, 폰트 사이즈, 폰트 색, 배경색, 배경 등)을 변경함으로써, 원하는 형태의 컴포넌트를 포함하는 게시물을 작성할 수 있다. 컴포넌트 및 스타일을 선택하는 사용자 입력에 응답하여, 사용자 단말(110)은 메타 파일 내의 스타일 값을 설정하여 페이지를 렌더링하고, 렌더링된 페이지를 출력할 수 있다. 예를 들어, 사용자(100)가 사진 컴포넌트를 선택하고, 저장 장치 등에 저장된 사진을 선택함에 따라, 사용자 단말(110)은 사진 컴포넌트를 포함한 테마를 포함하는 페이지를 출력할 수 있다. 추가적으로, 사용자(100)가 인용구 컴포넌트를 선택하고, 인용구에 대한 텍스트를 입력함에 따라, 인용구 컴포넌트를 포함한 테마를 포함하는 페이지를 출력할 수 있다. 또한, 페이지 형태의 배경, 배경색 또는 폰트 중 적어도 하나는 테마의 공통 요소에 해당할 수 있다.

도 1에서는 컴포넌트의 예로서, 사진, SNS 사진, 동영상, 스티커, 인용구, 구분선, 장소, 링크, 파일, 일정, 소스코드, 표, 수식 등을 나타내고 있으나, 이에 한정되지 않는다. 페이지 내에서 이러한 컴포넌트 각각의 배치 순서는 사용자의 입력에 따라 결정되거나 변경될 수 있다. 예를 들어, 도 1에서는 사진 컴포넌트가 인용구 컴포넌트의 상위에 배치되어 있으나, 사용자 입력에 따라 사진 컴포넌트가 인용구 컴포넌트의 하위에 배치되도록 변경될 수 있다.

본 개시의 실시예들에 따르면, 멀티 플랫폼을 지원하는 온라인 편집 도구를 제공할 수 있다. 즉, 웹 형태뿐만 아니라, 안드로이드, IOS 등의 애플리케이션 형태로도 온라인 편집 도구를 제공할 수 있다. 또한, 본 개시의 실시예들에 따르면, 컴포넌트 형 편집 도구를 제공할 수 있다. 사용자는 이러한 컴포넌트 형 편집 도구에서 각 컴포넌트에 대한 레이아웃 및 스타일을 변경함으로써 손쉽게 게시물을 작성 및 발행할 수 있다.

도 2는 본 개시의 일 실시예에 따른 위지위그 편집 도구를 제공하기 위하여, 정보 처리 시스템이 복수의 사용자 단말과 통신 가능하도록 연결된 구성을 나타내는 개요도이다. 정보 처리 시스템(230)은 위지위그 편집 도구를 제공할 수 있는 시스템(들) 및/또는 게시물 작성/발행 등의 서비스를 제공할 수 있는 시스템(들)을 포함할 수 있다. 일 실시예에서, 정보 처리 시스템(230)은 위지위그 편집 도구 제공 서비스 및/또는 게시물 작성/발행 서비스와 관련된 컴퓨터 실행 가능한 프로그램(예를 들어, 다운로드 가능한 애플리케이션, 웹 브라우저 등) 및 데이터를 저장, 제공 및 실행할 수 있는 하나 이상의 서버 장치 및/또는 데이터베이스, 또는 클라우드 컴퓨팅 서비스 기반의 하나 이상의 분산 컴퓨팅 장치 및/또는 분산 데이터베이스를 포함할 수 있다. 예를 들어, 정보 처리 시스템(230)은 위지위그 편집 도구 제공 서비스 및/또는 게시물 작성/발행 서비스를 위한 별도의 시스템(예를 들어, 서버)들을 포함할 수 있다.

정보 처리 시스템(230)에 의해 제공되는 위지위그 편집 도구 제공 서비스, 게시물 작성/발행 서비스 등은, 복수의 사용자 단말(210_1, 210_2, 210_3)의 각각에 설치된 웹 브라우저, 웹 애플리케이션, 게시물 작성과 연관된 애플리케이션(예를 들어, 블로그 애플리케이션 등) 등을 통해 사용자에게 제공될 수 있다. 예를 들어, 정보 처리 시스템(230)은 웹 브라우저, 게시물 작성과 연관된 애플리케이션 등을 통해 사용자 단말(210_1, 210_2, 210_3)로부터 수신되는 편집 도구에 대한 요청에 대응하는 정보를 제공하거나 대응하는 처리를 수행할 수 있다.

복수의 사용자 단말(210_1, 210_2, 210_3)은 네트워크(220)를 통해 정보 처리 시스템(230)과 통신할 수 있다. 네트워크(220)는 복수의 사용자 단말(210_1, 210_2, 210_3)과 정보 처리 시스템(230) 사이의 통신이 가능하도록 구성될 수 있다. 네트워크(220)는 설치 환경에 따라, 예를 들어, 이더넷(Ethernet), 유선 홈 네트워크(Power Line Communication), 전화선 통신 장치 및 RS-serial 통신 등의 유선 네트워크, 이동통신망, WLAN(Wireless LAN), Wi-Fi, Bluetooth 및 ZigBee 등과 같은 무선 네트워크 또는 그 조합으로 구성될 수 있다. 통신 방식은 제한되지 않으며, 네트워크(220)가 포함할 수 있는 통신망(일례로, 이동통신망, 유선 인터넷, 무선 인터넷, 방송망, 위성망 등)을 활용하는 통신 방식뿐 아니라 사용자 단말(210_1, 210_2, 210_3) 사이의 근거리 무선 통신 역시 포함될 수 있다.

도 2에서 휴대폰 단말(210_1), 태블릿 단말(210_2) 및 PC 단말(210_3)이 사용자 단말의 예로서 도시되었으나, 이에 한정되지 않으며, 사용자 단말(210_1, 210_2, 210_3)은 유선 및/또는 무선 통신이 가능하고 웹 브라우저, 게시물 작성과 연관된 녹음 애플리케이션 등이 설치되어 실행될 수 있는 임의의 컴퓨팅 장치일 수 있다. 예를 들어, 사용자 단말은, 스마트폰, 휴대폰, 내비게이션, 컴퓨터, 노트북, 디지털방송용 단말, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 태블릿 PC, 게임 콘솔(game console), 웨어러블 디바이스(wearable device), IoT(internet of things) 디바이스, VR(virtual reality) 디바이스, AR(augmented reality) 디바이스 등을 포함할 수 있다. 또한, 도 2에는 3개의 사용자 단말(210_1, 210_2, 210_3)이 네트워크(220)를 통해 정보 처리 시스템(230)과 통신하는 것으로 도시되어 있으나, 이에 한정되지 않으며, 상이한 수의 사용자 단말이 네트워크(220)를 통해 정보 처리 시스템(230)과 통신하도록 구성될 수도 있다.

일 실시예에서, 사용자 단말(210_1, 210_2, 210_3)은 정보 처리 시스템(230)으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다. 여기서, 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함할 수 있다. 추가적으로 또는 대안적으로, 사용자 단말(210_1, 210_2, 210_3)은 정보 처리 시스템(230)로부터 페이지를 구성하는데 사용될 리소스를 수신할 수 있다. 이 경우, 정보 처리 시스템(230)은 CDN 서버(미도시)를 포함하도록 구성될 수 있으나, 이에 한정되지 않으며, 정보 처리 시스템(230)은 CDN 서버와 별도로 구성될 수 있다.

일 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 웹을 통해 제공되는 경우, 사용자 단말(210_1, 210_2, 210_3)은 정보 처리 시스템(230)으로부터 언어 독립형 데이터 포맷으로부터 변환된 웹 상에서 지원되는 스타일시트 데이터 포맷의 메타 파일을 수신할 수 있다. 예를 들어, 사용자 단말(210_1, 210_2, 210_3)은 웹을 통해 제공되는 편집 도구가 로딩되기 전에, 정보 처리 시스템(230)으로부터 스타일시트 데이터 포맷의 메타 파일을 수신할 수 있다. 다른 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 애플리케이션을 통해 제공되는 경우, 사용자 단말(210_1, 210_2, 210_3)은 애플리케이션이 로딩되는 시점 또는 로딩된 이후에, 정보 처리 시스템(230)으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다.

도 3은 본 개시의 일 실시예에 따른 사용자 단말 및 정보 처리 시스템의 내부 구성을 나타내는 블록도이다. 사용자 단말(210)은 웹 브라우저, 게시물 작성과 연관된 애플리케이션(예를 들어, 블로그 애플리케이션, 커뮤니티 애플리케이션, SNS 애플리케이션 등) 등이 실행 가능하고 유/무선 통신이 가능한 임의의 컴퓨팅 장치를 지칭할 수 있으며, 예를 들어, 도 2의 휴대폰 단말(210_1), 태블릿 단말(210_2), PC 단말(210_3) 등을 포함할 수 있다. 도시된 바와 같이, 사용자 단말(210)은 메모리(312), 프로세서(314), 통신 모듈(316) 및 입출력 인터페이스(318)를 포함할 수 있다. 이와 유사하게, 정보 처리 시스템(230)은 메모리(332), 프로세서(334), 통신 모듈(336) 및 입출력 인터페이스(338)를 포함할 수 있다. 도 3에 도시된 바와 같이, 사용자 단말(210) 및 정보 처리 시스템(230)은 각각의 통신 모듈(316, 336)을 이용하여 네트워크(220)를 통해 정보 및/또는 데이터를 통신할 수 있도록 구성될 수 있다. 또한, 입출력 장치(320)는 입출력 인터페이스(318)를 통해 사용자 단말(210)에 정보 및/또는 데이터를 입력하거나 사용자 단말(210)로부터 생성된 정보 및/또는 데이터를 출력하도록 구성될 수 있다.

메모리(312, 332)는 비-일시적인 임의의 컴퓨터 판독 가능한 기록매체를 포함할 수 있다. 일 실시예에 따르면, 메모리(312, 332)는 RAM(random access memory), ROM(read only memory), 디스크 드라이브, SSD(solid state drive), 플래시 메모리(flash memory) 등과 같은 비소멸성 대용량 저장 장치(permanent mass storage device)를 포함할 수 있다. 다른 예로서, ROM, SSD, 플래시 메모리, 디스크 드라이브 등과 같은 비소멸성 대용량 저장 장치는 메모리와는 구분되는 별도의 영구 저장 장치로서 사용자 단말(210) 또는 정보 처리 시스템(230)에 포함될 수 있다. 또한, 메모리(312, 332)에는 운영체제와 적어도 하나의 프로그램 코드(예를 들어, 웹 브라우저, 게시물 작성과 연관된 애플리케이션 등을 위한 코드)가 저장될 수 있다.

이러한 소프트웨어 구성요소들은 메모리(312, 332)와는 별도의 컴퓨터에서 판독가능한 기록매체로부터 로딩될 수 있다. 이러한 별도의 컴퓨터에서 판독가능한 기록매체는 이러한 사용자 단말(210) 및 정보 처리 시스템(230)에 직접 연결가능한 기록 매체를 포함할 수 있는데, 예를 들어, 플로피 드라이브, 디스크, 테이프, DVD/CD-ROM 드라이브, 메모리 카드 등의 컴퓨터에서 판독 가능한 기록매체를 포함할 수 있다. 다른 예로서, 소프트웨어 구성요소들은 컴퓨터에서 판독가능한 기록매체가 아닌 통신 모듈(316, 336)을 통해 메모리(312, 332)에 로딩될 수도 있다. 예를 들어, 적어도 하나의 프로그램은 개발자들 또는 애플리케이션의 설치 파일을 배포하는 파일 배포 시스템이 네트워크(220)를 통해 제공하는 파일들에 의해 설치되는 컴퓨터 프로그램(예를 들어, 웹 브라우저, 게시물 작성과 연관된 애플리케이션 등)에 기반하여 메모리(312, 332)에 로딩될 수 있다.

프로세서(314, 334)는 기본적인 산술, 로직 및 입출력 연산을 수행함으로써, 컴퓨터 프로그램의 명령을 처리하도록 구성될 수 있다. 명령은 메모리(312, 332) 또는 통신 모듈(316, 336)에 의해 프로세서(314, 334)로 제공될 수 있다. 예를 들어, 프로세서(314, 334)는 메모리(312, 332)와 같은 기록 장치에 저장된 프로그램 코드에 따라 수신되는 명령을 실행하도록 구성될 수 있다.

통신 모듈(316, 336)은 네트워크(220)를 통해 사용자 단말(210)과 정보 처리 시스템(230)이 서로 통신하기 위한 구성 또는 기능을 제공할 수 있으며, 사용자 단말(210) 및/또는 정보 처리 시스템(230)이 다른 사용자 단말 또는 다른 시스템(일례로 별도의 클라우드 시스템 등)과 통신하기 위한 구성 또는 기능을 제공할 수 있다. 일례로, 사용자 단말(210)의 프로세서(314)가 메모리(312) 등과 같은 기록 장치에 저장된 프로그램 코드에 따라 생성한 요청 또는 데이터(예를 들어, 편집 도구에 대한 요청 등)는 통신 모듈(316)의 제어에 따라 네트워크(220)를 통해 정보 처리 시스템(230)으로 전달될 수 있다. 역으로, 정보 처리 시스템(230)의 프로세서(334)의 제어에 따라 제공되는 제어 신호나 명령이 통신 모듈(336)과 네트워크(220)를 거쳐 사용자 단말(210)의 통신 모듈(316)을 통해 사용자 단말(210)에 수신될 수 있다. 예를 들어, 사용자 단말(210)은 정보 처리 시스템(230)으로부터 통신 모듈(316)을 통해 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일 등을 수신할 수 있다.

입출력 인터페이스(318)는 입출력 장치(320)와의 인터페이스를 위한 수단일 수 있다. 일 예로서, 입력 장치는 오디오 센서 및/또는 이미지 센서를 포함한 카메라, 키보드, 마이크로폰, 마우스 등의 장치를, 그리고 출력 장치는 디스플레이, 스피커, 햅틱 피드백 디바이스(haptic feedback device) 등과 같은 장치를 포함할 수 있다. 다른 예로, 입출력 인터페이스(318)는 터치스크린 등과 같이 입력과 출력을 수행하기 위한 구성 또는 기능이 하나로 통합된 장치와의 인터페이스를 위한 수단일 수 있다. 도 3에서는 입출력 장치(320)가 사용자 단말(210)에 포함되지 않도록 도시되어 있으나, 이에 한정되지 않으며, 사용자 단말(210)과 하나의 장치로 구성될 수 있다. 또한, 정보 처리 시스템(230)의 입출력 인터페이스(338)는 정보 처리 시스템(230)과 연결되거나 정보 처리 시스템(230)이 포함할 수 있는 입력 또는 출력을 위한 장치(미도시)와의 인터페이스를 위한 수단일 수 있다. 도 3에서는 입출력 인터페이스(318, 338)가 프로세서(314, 334)와 별도로 구성된 요소로서 도시되었으나, 이에 한정되지 않으며, 입출력 인터페이스(318, 338)가 프로세서(314, 334)에 포함되도록 구성될 수 있다.

사용자 단말(210) 및 정보 처리 시스템(230)은 도 3의 구성요소들보다 더 많은 구성요소들을 포함할 수 있다. 그러나, 대부분의 종래기술적 구성요소들을 명확하게 도시할 필요성은 없다. 일 실시예에서, 사용자 단말(210)은 상술된 입출력 장치(320) 중 적어도 일부를 포함하도록 구현될 수 있다. 또한, 사용자 단말(210)은 트랜시버(transceiver), GPS(Global Positioning system) 모듈, 카메라, 각종 센서, 데이터베이스 등과 같은 다른 구성요소들을 더 포함할 수 있다. 예를 들어, 사용자 단말(210)이 스마트폰인 경우, 일반적으로 스마트폰이 포함하고 있는 구성요소를 포함할 수 있으며, 예를 들어, 가속도 센서, 자이로 센서, 마이크 모듈, 카메라 모듈, 각종 물리적인 버튼, 터치패널을 이용한 버튼, 입출력 포트, 진동을 위한 진동기 등의 다양한 구성요소들이 사용자 단말(210)에 더 포함되도록 구현될 수 있다.

일 실시예에서, 사용자 단말(210)의 프로세서(314)는 웹 브라우저, 게시물 작성과 연관된 애플리케이션 등이 동작하도록 구성될 수 있다. 이 때, 해당 애플리케이션과 연관된 프로그램 코드가 사용자 단말(210)의 메모리(312)에 로딩될 수 있다. 애플리케이션 등이 동작되는 동안에, 사용자 단말(210)의 프로세서(314)는 입출력 장치(320)로부터 제공된 정보 및/또는 데이터를 입출력 인터페이스(318)를 통해 수신하거나 통신 모듈(316)을 통해 정보 처리 시스템(230)으로부터 정보 및/또는 데이터를 수신할 수 있으며, 수신된 정보 및/또는 데이터를 처리하여 메모리(312)에 저장할 수 있다. 또한, 이러한 정보 및/또는 데이터는 통신 모듈(316)을 통해 정보 처리 시스템(230)에 제공될 수 있다. 예를 들어, 프로세서(314)는 정보 처리 시스템(230) 및/또는 다른 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하고, 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링할 수 있다.

게시물 작성과 연관된 애플리케이션 등이 동작되는 동안에, 프로세서(314)는 입출력 인터페이스(318)와 연결된 터치 스크린, 키보드, 오디오 센서 및/또는 이미지 센서를 포함한 카메라, 마이크로폰 등의 입력 장치를 통해 입력되거나 선택된 데이터, 텍스트, 이미지, 영상 등을 수신할 수 있으며, 수신된 데이터, 텍스트, 이미지 및/또는 영상 등을 메모리(312)에 저장하거나 통신 모듈(316) 및 네트워크(220)를 통해 정보 처리 시스템(230)에 제공할 수 있다. 일 실시예에서, 프로세서(314)는 터치 스크린, 마우스 등의 입력 장치(320)를 통하여 페이지에 포함된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하는 사용자 입력 등을 수신할 수 있다.

사용자 단말(210)의 프로세서(314)는 정보 및/또는 데이터를 입출력 인터페이스(318)를 통해 입출력 장치(320)로 전송하여, 출력할 수 있다. 예를 들어, 사용자 단말(210)의 프로세서(314)는 디스플레이 출력 가능 장치(예: 터치 스크린, 디스플레이 등), 음성 출력 가능 장치(예: 스피커) 등의 출력 장치(320)를 통해 처리된 정보 및/또는 데이터를 출력할 수 있다. 일 실시예에서, 프로세서(314)는 렌더링된 테마를 포함한 페이지를 디스플레이 등을 통해 출력할 수 있다.

정보 처리 시스템(230)의 프로세서(334)는 복수의 사용자 단말(210) 및/또는 복수의 외부 시스템으로부터 수신된 정보 및/또는 데이터를 관리, 처리 및/또는 저장하도록 구성될 수 있다. 프로세서(334)에 의해 처리된 정보 및/또는 데이터는 통신 모듈(336) 및 네트워크(220)를 통해 사용자 단말(210)에 제공될 수 있다. 일 실시예에서, 정보 처리 시스템(230)의 프로세서(334)는 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 통신 모듈(336) 및 네트워크(220)를 통해 사용자 단말(210)에 제공할 수 있다. 이러한 메타 파일은 미리 생성되어 메모리(322) 및/또는 외부 저장 장치(미도시) 등에 저장될 수 있다.

일 실시예에서, 프로세서(334)는 외부 시스템으로부터 복수의 기준 테마 및 복수의 기준 테마에 대한 메타 데이터를 수신하고, 수신된 복수의 기준 테마 및 메타 데이터를 CDN 서버에 제공할 수 있다. 이 경우, 프로세서(334)는 사용자 단말(210)로부터 수신되는 업데이트 요청에 응답하여, 복수의 기준 테마 및 메타 데이터 중 적어도 일부를 사용자 단말(210)에 전송할 수 있다.

도 4는 본 개시의 일 실시예에 따른 위지위그 편집 도구를 제공하는 방법을 나타내는 흐름도이다. 일 실시예에서, 위지위그 편집 도구를 제공하는 방법(400)은 프로세서(예를 들어, 사용자 단말의 적어도 하나의 프로세서)에 의해 수행될 수 있다. 도시된 바와 같이, 위지위그 편집 도구를 제공하는 방법(400)은 프로세서가 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신함으로써 개시될 수 있다(S410). 여기서, 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함할 수 있다. 추가적으로 또는 대안적으로, 프로세서는 외부 시스템으로부터 페이지를 구성하는데 사용될 리소스(예를 들어, 이미지, 폰트 등)를 수신할 수 있다.

메타 파일은 기준 테마 및 기준 테마에 대한 메타 데이터를 포함할 수 있다. 여기서, 기준 테마에 대한 메타 데이터는 복수의 플랫폼에서 일관성 있는 형식의 페이지를 지원하도록 정규화된 메타 포맷 내에 포함된 값을 포함할 수 있다. 이러한 메타 포맷은 언어 독립형 데이터 포맷(예를 들어, Json 타입)으로 구현될 수 있다. 메타 포맷 내의 값이 변경됨에 따라 기준 테마의 파생 테마가 생성될 수 있다.

일 실시예에서, 기준 테마는 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함할 수 있다. 여기서, 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보는 레이아웃의 집합 내에 포함된 레이아웃들의 패턴에 대한 정보를 포함할 수 있다. 추가적으로 또는 대안적으로, 기준 테마의 공통 요소는 배경, 배경색 또는 텍스트의 폰트 중 적어도 하나를 포함할 수 있다.

프로세서는 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링할 수 있다(S420). 예를 들어, 프로세서는 리소스, 기준 테마 및 기준 테마에 대한 메타 데이터를 이용하여 페이지를 렌더링 할 수 있다. 일 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 웹을 통해 제공되는 경우, 프로세서는 언어 독립형 데이터 포맷으로부터 변환된 웹 상에서 지원되는 스타일시트 데이터 포맷의 메타 파일을 수신할 수 있다. 예를 들어, 프로세서는 웹을 통해 제공되는 편집 도구가 로딩되기 전에, 외부 시스템으로부터 스타일시트 데이터 포맷의 메타 파일을 수신할 수 있다. 그리고 나서, 프로세서는 수신된 스타일시트 데이터 포맷의 메타 파일을 이용하여 테마를 포함한 페이지를 렌더링할 수 있다.

다른 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 애플리케이션을 통해 제공되는 경우, 프로세서는 해석 모듈에 의해 메타 파일을 해석하여 테마를 포함한 페이지를 렌더링할 수 있다. 여기서, 해석 모듈은 테마를 정의하는 메타 파일을 해석하도록 구성되고, 프로세서 및/또는 외부 시스템에 포함될 수 있다. 이를 위해, 프로세서는 애플리케이션이 로딩되는 시점 또는 로딩된 이후에, 외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다.

프로세서는 렌더링된 테마를 포함한 페이지를 출력할 수 있다(S430). 일 실시예에서, 프로세서는 출력된 페이지에 포함된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하는 사용자 입력을 수신할 수 있다. 수신된 사용자 입력에 응답하여, 프로세서는 변경된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 포함한 페이지를 다시 렌더링할 수 있다. 프로세서는 다시 렌더링된 페이지를 출력할 수 있다.

도 5는 본 개시의 일 실시예에 따라 위지위그 편집 도구를 제공하기 위해, 사용자 단말에 메타 파일을 제공하는 예시를 나타내는 도면이다. 일 실시예에서, 사용자 단말(예를 들어, End User)(512, 514)은 정보 처리 시스템(예를 들어, SmartEditor Back-end Primary Customer)(520)으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다. 예를 들어, 사용자 단말(512, 514)은 CDN 서버(CDN server)(522) 및/또는 백엔드 스토어(Backend Store)(즉, meta 스토어)(524) 등에서 메타 파일을 수신할 수 있다. 여기서, 테마를 정의하는 메타 파일은 하나 이상의 컴포넌트에 대한 레이아웃(즉, 컴포넌트 내의 레이아웃) 및 스타일에 대한 정보를 포함할 수 있다.

사용자 단말(512, 514)은 수신된 메타 파일을 기초로 테마를 포함한 페이지를 렌더링할 수 있다. 여기서, 메타 파일은 기준 테마 및 기준 테마에 대한 메타 데이터를 포함할 수 있다. 예를 들어, 사용자 단말(512, 514)은 리소스, 기준 테마 및 기준 테마에 대한 메타 데이터를 이용하여 페이지를 렌더링할 수 있다.

일 실시예에서, 메타 파일은, 플랫폼 독립적인 메타 데이터를 정의할 수 있다. 즉, 인식할 수 있는 렌더링 속성과 구현 방식이 다양한 플랫폼의 종류에 상관없이, 해당 메타 파일의 값을 통해 테마에 대한 값을 정의할 수 있다. 따라서, 사용자 단말(512, 514)은 기준 테마와 메타 데이터를 통해 플랫폼에 상관없이 일관된 형태의 페이지를 구성할 수 있다.

일 실시예에서, 정보 처리 시스템(520)은 외부 시스템(예를 들어, Primary Customer)(530)으로부터 복수의 기준 테마 및 복수의 기준 테마에 대한 메타 데이터를 수신하고, 수신된 복수의 기준 테마 및 메타 데이터를 CDN 서버(522)에 제공할 수 있다. 이 경우, 정보 처리 시스템(520)은 커스텀 테마 API 서버 및 메타 스토어(524)를 포함할 수 있다. 정보 처리 시스템(520)은 사용자 단말(512, 514)로부터 수신되는 업데이트 요청에 응답하여, 복수의 기준 테마 및 메타 데이터 중 적어도 일부를 사용자 단말(512, 514)에 전송할 수 있다. 여기서, 복수의 기준 테마의 각각은 하나 이상의 컴포넌트에 대한 정보를 포함할 수 있다.

복수의 기준 테마에 대한 메타 데이터는, 복수의 플랫폼에서 일관성 있는 형식의 페이지를 지원하도록 정규화(또는 추상화)된 메타 포맷 내에 포함된 값을 포함할 수 있다. 복수의 기준 테마의 각각은, 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함할 수 있다. 여기서, 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보는, 레이아웃의 집합 내에 포함된 레이아웃들의 패턴에 대한 정보를 포함할 수 있다. 즉, 레이아웃 집합에 대한 정보는, 레이아웃의 집합 내에 포함된 레이아웃들의 배치 순서 등에 대한 규칙성을 패턴화한 정보를 포함할 수 있다.

일 실시예에서, 사용자가 테마 스타일라이저(theme stylizer; 미도시)를 이용하거나 직접 메타 정보를 수정할 수 있다. 이렇게 수정된 메타 정보와 수집된 리소스는 테마 빌더에 전달되어, 최종적으로 애플리케이션 및/또는 웹에서 로딩 가능한 형태로 번들링되어 제공될 수 있다. 번들링된 메타 정보와 수집된 리소스를 기반으로 각 플랫폼 별로 아래와 같은 동작이 수행될 수 있다.

예를 들어, 애플리케이션 환경에서, 스마트 에디터 SDK가 각 서비스 애플리케이션에 제공(import)될 수 있으며, 에디터 뷰를 사용자에게 제공하는 경우, 초기화 과정이 수행될 수 있다. 초기화 시점에 메타 정보와 수집된 리소스를 참조할 수 있도록, preload 및 initialize 과정을 거치고 스마트 에디터 뷰를 로딩할 수 있다. 스마트 에디터는 초기화 시 주입된 테마들의 리스트를 사용자에게 썸네일과 함께 노출할 수 있으며, 사용자의 선택에 따라 동적으로 테마가 변경되도록 하는 기능을 제공할 수 있다.

다른 예로서, 웹 환경에서, 스마트 에디터 SDK는 CDN 서버(522)를 통해 제공될 수 있다. 예를 들어, 웹에서는 메타 정보를 CSS 파일로 변경하고, Font, Image등의 리소스를 CDN 서버(522)에 업로드하여 CSS 파일에서 참조할 수 있도록 할 수 있다. 이 경우, 테마 작업 후 메타 정보를 해석한 CSS 파일을 수신할 수 있다. 추가적으로 또는 대안적으로, 메타 정보는 런타임 시에 직접 CSS 파일로 해석될 수 있다. 이에 따라, 스마트 에디터 SDK는 테마를 표시하는 처리 속도를 실시간에 더 가깝도록 하는 형태, 즉, 더욱 강화된 형태로 제공될 수 있다.

도 6은 본 개시의 다른 실시예에 따라 위지위그 편집 도구를 제공하기 위해, 사용자 단말에 메타 파일을 제공하는 예시를 나타내는 도면이다. 일 실시예에서, 편집 도구가 특정 플랫폼(예: OS)에서 동작되는 웹(모바일 WEB, 데스크탑 WEB)을 통해 제공되는 경우, 사용자 단말(612)은 언어 독립형 데이터 포맷으로부터 변환된 웹 상에서 지원되는 스타일시트 데이터 포맷(예를 들어, CSS 파일 등)의 메타 파일을 수신할 수 있다. 예를 들어, 사용자 단말(612)은, 웹을 통해 제공되는 편집 도구가 로딩되기 전에, 외부 시스템(620)으로부터 스타일시트 데이터 포맷의 메타 파일을 수신할 수 있다. 이 경우, 사용자 단말(612)은 수신된 스타일시트 데이터 포맷의 메타 파일을 이용하여 테마를 포함한 페이지를 렌더링할 수 있다.

다른 실시예에서, 편집 도구가 특정 플랫폼에서 동작되는 애플리케이션을 통해 제공되는 경우, 사용자 단말(614)은 테마를 정의하는 메타 파일을 해석하도록 구성된 해석 모듈(즉, 메타 해석 모듈)을 포함할 수 있다. 이에 따라, 사용자 단말(614)은 해석 모듈에 의해, 수신된 메타 파일을 해석하여 테마를 포함한 페이지를 렌더링할 수 있다. 이 경우, 사용자 단말(614)은 애플리케이션이 로딩되는 시점 또는 로딩된 이후에, 외부 시스템(620)으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신할 수 있다.

추가적으로 또는 대안적으로, 사용자 단말(612, 614)은 외부 시스템(620)으로부터, 페이지를 구성하는데 사용될 리소스(예를 들어, Theme Resource)를 수신할 수 있다. 추가적으로 또는 대안적으로, 외부 시스템(620)은 SDK 형태로 메타 파일을 제공하고, 사용자가 동적으로 테마를 변경할 수 있도록 지원할 수 있다. 예를 들어, 애플리케이션을 통해 제공되는 경우, 외부 시스템(620)은 편집 도구의 로딩 시점 또는 로딩 후 API를 통해 사용자가 테마를 설정할 수 있도록 메타 파일을 제공할 수 있다. 다른 예로서, 웹을 통해 제공되는 경우, CSS 파일의 특성상, 테마를 정의하는 메타 파일은 편집 도구의 로딩 전에 사용자 단말에 수신될 수 있다. CSS 파일이 로딩된 경우, 사용자는 UpdateTheme API를 기초로 생성된 event bus를 통해 동적으로 테마를 변경/업데이트할 수 있다. 대안적으로 또는 추가적으로, 메타 파일을 만드는 과정을 자동화하여 사용자(End-User)가 실시간으로 테마 UI 빌더 시스템을 이용하여 메타 파일을 생성하고, 해당 메타 파일의 산출물인 CSS 파일과 리소스를 바로 Static Server(예를 들어, CDN 서버 등)에 업로드하여, 페이 리로딩을 통해 동적으로 호출할 수 있다.

도 7은 본 개시의 일 실시예에 따른 인용구 컴포넌트에 대하여 패턴화된 기준 테마의 예시를 나타내는 도면이다. 일 실시예에서, 메타 파일은 기준 테마 및 기준 테마에 대한 메타 데이터를 포함할 수 있다. 여기서, 기준 테마에 대한 메타 데이터는 복수의 플랫폼에서 일관성 있는 형식의 페이지를 지원하도록 정규화(또는 추상화)된 메타 포맷 내에 포함된 값을 포함할 수 있다. 이러한 메타 데이터를 이용하여 사용자 단말은 플랫폼에 상관없이 일관된 모양의 페이지를 구성할 수 있다. 기준 테마 자체는 별도의 기본 값을 가지지 않을 수 있으며, 기준 테마에 스타일 값 정보(예를 들어, 메타 데이터), 리소스(예를 들어, 이미지, 폰트 등)를 결합하여야 렌더링 가능할 수 있다.

기준 테마는, 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함할 수 있다. 여기서, 레이아웃은, 컴포넌트를 구성하는 요소를 포함할 수 있다. 일 실시예에서, 기준 테마의 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보는, 레이아웃의 집합 내에 포함된 레이아웃들의 패턴에 대한 정보를 포함할 수 있다. 예를 들어, 레이아웃의 집합에 대한 정보는, 레이아웃의 집합 내에 포함된 레이아웃들의 배치 순서에 대한 규칙성을 패턴화한 정보를 포함할 수 있다. 추가적으로 또는 대안적으로, 기준 테마의 공통 요소는, 배경, 배경색 또는 텍스트의 폰트 중 적어도 하나를 포함할 수 있다.

도시된 바와 같이, 인용구 컴포넌트에 대한 기준 테마(710, 720, 730, 740)는, 인용구 컴포넌트의 레이아웃의 집합에 대한 정보를 포함할 수 있다. 여기서, 인용구 컴포넌트의 레이아웃의 집합 내에 포함된 레이아웃들은, 'mark'(예를 들어, 'mark top', 'mark bottom', 'center mark' 등), '인용구', '출처', 'background'에 해당할 수 있다. 인용구 컴포넌트의 기준 테마는, 레이아웃인'mark'(예를 들어, 'mark top', 'mark bottom', 'center mark' 등), '인용구', '출처', 'background'각각의 영역의 범위(또는 크기), 위치, 배치 등에 대한 정보를 레이아웃들의 패턴에 대한 정보로서 포함할 수 있다. 이러한 레이아웃들의 패턴에 대한 정보에 따라, 하나의 컴포넌트에 대하여 복수의 기준 테마(710, 720, 730, 740)가 제공될 수 있다.

기준 테마는 레이아웃의 독창성/패턴화를 기준으로 구분될 수 있다. 예를 들어, 기준 테마를 분리하는 조건은, 컴포넌트 렌더링 스펙에 복잡한 그림자 효과가 추가되는 경우, 컴포넌트 렌더링 스펙에 텍스트 요소 모두 underline이 포함되는 경우, 모바일과 데스크탑 렌더링 일관성이 달라 기존의 기준 테마로는 지원할 수 없는 경우 등을 포함할 수 있다. 즉, 제1 기준 테마(710), 제2 기준 테마(720), 제3 기준 테마(730) 및 제4 기준 테마(740)는 각각 레이아웃의 독창성/패턴화를 기준으로 생성된 것일 수 있다. 각 기준 테마에서, 레이아웃 및/또는 스타일에 대한 정보(예를 들어 사이즈, 위치 등)을 조정하여 파생 테마를 구성할 수 있다. 테마의 공통 요소는 페이지 형태의 배경, 배경색, 폰트 등을 지칭할 수 있다.

도 8은 본 개시의 일 실시예에 따라 동일한 기준 테마에 상이한 스타일이 적용되는 경우의 렌더링 결과의 예시를 나타내는 도면이다. 테마를 정의하는 메타 파일은, 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함할 수 있다. 기준 테마는, 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함할 수 있다. 예를 들어, 레이아웃의 집합에 대한 정보는, 레이아웃의 집합 내에 포함된 레이아웃들(즉, 컴포넌트를 구성하는 요소들)의 배치 순서에 대한 규칙성을 패턴화한 정보를 포함할 수 있다.

예를 들어, 인용구 컴포넌트에 대한 기준 테마(810)는 레이아웃인 'mark top', '인용구', '출처', 'mark bottom'의 패턴에 대한 정보를 포함할 수 있다. 이러한 기준 테마(810)는 'mark top'레이아웃과 'mark bottom' 레이아웃에 대하여 제1 스타일(예를 들어, 가운데 정렬)이 적용된 테마(820)를 포함할 수 있다. 또한, 기준 테마(810)는 'mark top'레이아웃과 'mark bottom' 레이아웃에 대하여 제2 스타일(예를 들어, 왼쪽 맞춤 정렬 및 오른쪽 맞춤 정렬)이 적용된 테마(830)를 포함할 수 있다. 각 레이아웃에 서로 상이한 스타일이 적용된 테마에 해당하더라도, 배치 순서 등 규칙성에 따라 패턴화되어 동일한 레이아웃들의 패턴으로 정의될 수 있으므로, 제1 스타일이 적용된 테마(820)와 제2 스타일이 적용된 테마(830)는 동일한 기준 테마(810)에 포함될 수 있다. 여기서, 제1 스타일이 적용된 테마(820) 및 제2 스타일이 적용된 테마(830)는 기준 테마(810)의 서브 테마 및/또는 파생 테마에 해당할 수 있다.

사용자 단말은 메타 파일을 기초로 테마를 포함한 페이지를 렌더링할 수 있다. 일 실시예에서, 사용자 단말은 리소스, 기준 테마 및 기준 테마에 대한 메타 데이터를 이용하여 페이지를 렌더링할 수 있다. 예를 들어, 사용자 단말은 동일한 기준 테마에 해당하더라도, 해당 기준 테마에 적용된 스타일(예를 들어, 기준 테마의 레이아웃들에 적용된 스타일) 등에 따라 상이한 페이지를 렌더링할 수 있다. 즉, 기준 테마에 적용된 스타일에 따라, 사용자 단말은 메타 파일을 기초로 제1 스타일이 적용된 테마를 포함하는 렌더링 결과(840) 및/또는 제2 스타일이 적용된 테마를 포함하는 렌더링 결과(850)를 출력할 수 있다. 따라서, 한정된 기준 테마에 대하여 여러가지 스타일을 적용함으로써, 여러가지 테마 렌더링 결과가 출력될 수 있다. 즉, 한정된 기준 테마를 포함하는 메타 파일만으로도 다양한 테마로 확장될 수 있다.

도 9는 본 개시의 일 실시예에 따른 메타 포맷 내의 값을 변경함에 따라 컴포넌트에 대한 스타일을 변경하여 파생 테마를 생성하는 예시를 나타내는 도면이다. 일 실시예에서, 메타 포맷은 언어 독립형 데이터 포맷(예를 들어, Json 타입)으로 구현될 수 있다. 여기서, 언어 독립형 데이터 포맷은 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따를 수 있다. 이러한 언어 독립형 데이터 포맷에서, 문자는 " " 형식으로, 숫자는 따옴표 없이. 배열은 [ ] 형식으로 입력될 수 있으며, { }를 이용하여 구조를 구성할 수 있다. 이에 따라, 메타 포맷은 언어 독립형 데이터 포맷으로 구현됨으로써, 매우 유연하게 정보를 저장하고 구조화할 수 있다.

일 실시예에서, 메타 포맷 내의 값이 변경됨에 따라, 기준 테마의 파생 테마가 생성될 수 있다. 예를 들어, 기준 테마에 대한 메타 데이터에서 스타일 값이 설정 또는 변경됨에 따라, 사용자 단말은 설정 또는 변경된 스타일 값에 대응되는 스타일이 적용된 테마를 렌더링할 수 있다. 도시된 바와 같이, 기본 설정 및/또는 사용자 입력에 따라, 문서 제목 컴포넌트의 메타 포맷 내의 "title"의 "backgroundColor"값을 "black"으로 설정함으로써, 사용자 단말은 'title'영역의 배경색이 검은색으로 적용된 문서 제목 컴포넌트의 테마(910)를 렌더링할 수 있다. 다른 예로서, 기본 설정 및/또는 사용자 입력에 따라, 문서 제목 컴포넌트의 메타 포맷 내의 "title"의 "backgroundColor"값을 "red"로 설정함으로써, 사용자 단말은 'title'영역의 배경색이 빨간색으로 적용된 문서 제목 컴포넌트의 테마(920)를 렌더링할 수 있다.

일 실시예에서, 사용자 단말은 출력된 페이지에 포함된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하는 사용자 입력을 수신할 수 있다. 이 경우, 사용자 단말은 수신된 사용자 입력에 응답하여, 변경된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 포함한 페이지를 다시 렌더링할 수 있다. 또한, 사용자 단말은 이렇게 다시 렌더링된 페이지를 출력할 수 있다.

예를 들어, 기본 설정 및/또는 사용자 입력에 따라 문서 제목 컴포넌트의 메타 포맷 내의 "title"의 "fontSize"값을 10px로 설정함으로써, 사용자 단말은 'title'의 폰트 사이즈가 10px로 적용된 문서 제목 컴포넌트의 테마(930)를 포함한 페이지를 렌더링하여 출력할 수 있다. 그리고 나서, 사용자 단말은 출력된 페이지에 포함된 문서 제목 컴포넌트의 'title'의 폰트 사이즈를 20px로 변경하는 사용자 입력을 수신할 수 있다. 이 경우, 사용자 단말은 수신된 사용자 입력에 응답하여, 문서 제목 컴포넌트의 메타 포맷 내의 "title"의 "fontSize"값을 20px로 변경함으로써, 'title'의 폰트 사이즈가 20px로 적용된 문서 제목 컴포넌트의 테마(940)를 포함한 페이지를 다시 렌더링하고, 다시 렌더링된 페이지를 출력할 수 있다.

도 10은 본 개시의 일 실시예에 따라 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하여 파생 테마를 생성하는 예시를 나타내는 도면이다. 도시된 바와 같이, 제목 컴포넌트에 대한 하나의 기준 테마(1010)는 레이아웃으로서 'Background image', 'Title', 'SubTitle', 'Wrapper' 등을 포함할 수 있으며, 패턴화될 수 있다. 사용자는 게시물을 작성하는데 있어서, 사용하고자 하는 기준 테마를 선택하여 수정하고, 스타일을 적용함으로써 파생 테마를 생성하여 자신의 게시물에 사용할 수 있다.

사용자는 제목 컴포넌트의 기준 테마(1010)에서 편집이 허용된 부분을 편집함으로써 파생 테마(1020)를 생성할 수 있다. 예를 들어, 사용자는 기준 테마(1010)에 대하여, 'Background Image'영역의 크기를 변경하고, 'Title'영역을 'Background Image'의 일부 영역에 오버랩되도록 위치와 크기를 변경하고, 'Title'영역의 배경색을 변경할 수 있다. 또한, 사용자는 'SubTitle'영역의 위치, 크기, 폰트 스타일을 변경함으로써, 파생 테마(1020)를 생성할 수 있다. 여기서, 편집이 허용되는 부분은, 컴포넌트의 기준 테마 변경(즉, 복수의 기준 테마 중 다른 기준 테마로 변경), 컴포넌트 내의 레이아웃 변경, 컴포넌트 내의 레이아웃 배치, 각 레이아웃에 적용되는 스타일, 컴포넌트를 구성하는 요소의 스타일, 공통 적용 스타일 등을 포함할 수 있다.

사용자 단말은 이렇게 사용자에 의해 수정/편집되어 생성된 파생 테마(1020)를 포함하는 페이지를 다시 렌더링하고, 다시 렌더링된 페이지를 출력할 수 있다. 따라서, 사용자는 한정된 기준 테마에 다양한 스타일을 적용하고, 편집을 수행함으로써, 자신이 원하는 테마를 새로이 구성할 수 있다. 또한, 사용자는 컴포넌트 형으로 제공되는 테마를 이용하여 손쉽게 게시물을 작성하고 발행할 수 있다.

상술한 방법은 컴퓨터에서 실행하기 위해 컴퓨터 판독 가능한 기록 매체에 저장된 컴퓨터 프로그램으로 제공될 수 있다. 매체는 컴퓨터로 실행 가능한 프로그램을 계속 저장하거나, 실행 또는 다운로드를 위해 임시 저장하는 것일 수도 있다. 또한, 매체는 단일 또는 수개 하드웨어가 결합된 형태의 다양한 기록수단 또는 저장수단일 수 있는데, 어떤 컴퓨터 시스템에 직접 접속되는 매체에 한정되지 않고, 네트워크 상에 분산 존재하는 것일 수도 있다. 매체의 예시로는, 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체, CD-ROM 및 DVD 와 같은 광기록 매체, 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical medium), 및 ROM, RAM, 플래시 메모리 등을 포함하여 프로그램 명령어가 저장되도록 구성된 것이 있을 수 있다. 또한, 다른 매체의 예시로, 애플리케이션을 유통하는 앱 스토어나 기타 다양한 소프트웨어를 공급 내지 유통하는 사이트, 서버 등에서 관리하는 기록매체 내지 저장매체도 들 수 있다.

본 개시의 방법, 동작 또는 기법들은 다양한 수단에 의해 구현될 수도 있다. 예를 들어, 이러한 기법들은 하드웨어, 펌웨어, 소프트웨어, 또는 이들의 조합으로 구현될 수도 있다. 본원의 개시와 연계하여 설명된 다양한 예시적인 논리적 블록들, 모듈들, 회로들, 및 알고리즘 단계들은 전자 하드웨어, 컴퓨터 소프트웨어, 또는 양자의 조합들로 구현될 수도 있음을 통상의 기술자들은 이해할 것이다. 하드웨어 및 소프트웨어의 이러한 상호 대체를 명확하게 설명하기 위해, 다양한 예시적인 구성요소들, 블록들, 모듈들, 회로들, 및 단계들이 그들의 기능적 관점에서 일반적으로 위에서 설명되었다. 그러한 기능이 하드웨어로서 구현되는지 또는 소프트웨어로서 구현되는지의 여부는, 특정 애플리케이션 및 전체 시스템에 부과되는 설계 요구사항들에 따라 달라진다. 통상의 기술자들은 각각의 특정 애플리케이션을 위해 다양한 방식들로 설명된 기능을 구현할 수도 있으나, 그러한 구현들은 본 개시의 범위로부터 벗어나게 하는 것으로 해석되어서는 안된다.

하드웨어 구현에서, 기법들을 수행하는 데 이용되는 프로세싱 유닛들은, 하나 이상의 ASIC들, DSP들, 디지털 신호 프로세싱 디바이스들(digital signal processing devices; DSPD들), 프로그램가능 논리 디바이스들(programmable logic devices; PLD들), 필드 프로그램가능 게이트 어레이들(field programmable gate arrays; FPGA들), 프로세서들, 제어기들, 마이크로제어기들, 마이크로프로세서들, 전자 디바이스들, 본 개시에 설명된 기능들을 수행하도록 설계된 다른 전자 유닛들, 컴퓨터, 또는 이들의 조합 내에서 구현될 수도 있다.

따라서, 본 개시와 연계하여 설명된 다양한 예시적인 논리 블록들, 모듈들, 및 회로들은 범용 프로세서, DSP, ASIC, FPGA나 다른 프로그램 가능 논리 디바이스, 이산 게이트나 트랜지스터 로직, 이산 하드웨어 컴포넌트들, 또는 본원에 설명된 기능들을 수행하도록 설계된 것들의 임의의 조합으로 구현되거나 수행될 수도 있다. 범용 프로세서는 마이크로프로세서일 수도 있지만, 대안으로, 프로세서는 임의의 종래의 프로세서, 제어기, 마이크로제어기, 또는 상태 머신일 수도 있다. 프로세서는 또한, 컴퓨팅 디바이스들의 조합, 예를 들면, DSP와 마이크로프로세서, 복수의 마이크로프로세서들, DSP 코어와 연계한 하나 이상의 마이크로프로세서들, 또는 임의의 다른 구성의 조합으로서 구현될 수도 있다.

펌웨어 및/또는 소프트웨어 구현에 있어서, 기법들은 랜덤 액세스 메모리(random access memory; RAM), 판독 전용 메모리(read-only memory; ROM), 비휘발성 RAM(non-volatile random access memory; NVRAM), PROM(programmable read-only memory), EPROM(erasable programmable read-only memory), EEPROM(electrically erasable PROM), 플래시 메모리, 컴팩트 디스크(compact disc; CD), 자기 또는 광학 데이터 스토리지 디바이스 등과 같은 컴퓨터 판독가능 매체 상에 저장된 명령들로서 구현될 수도 있다. 명령들은 하나 이상의 프로세서들에 의해 실행 가능할 수도 있고, 프로세서(들)로 하여금 본 개시에 설명된 기능의 특정 양태들을 수행하게 할 수도 있다.

이상 설명된 실시예들이 하나 이상의 독립형 컴퓨터 시스템에서 현재 개시된 주제의 양태들을 활용하는 것으로 기술되었으나, 본 개시는 이에 한정되지 않고, 네트워크나 분산 컴퓨팅 환경과 같은 임의의 컴퓨팅 환경과 연계하여 구현될 수도 있다. 또 나아가, 본 개시에서 주제의 양상들은 복수의 프로세싱 칩들이나 장치들에서 구현될 수도 있고, 스토리지는 복수의 장치들에 걸쳐 유사하게 영향을 받게 될 수도 있다. 이러한 장치들은 PC들, 네트워크 서버들, 및 휴대용 장치들을 포함할 수도 있다.

본 명세서에서는 본 개시가 일부 실시예들과 관련하여 설명되었지만, 본 개시의 발명이 속하는 기술분야의 통상의 기술자가 이해할 수 있는 본 개시의 범위를 벗어나지 않는 범위에서 다양한 변형 및 변경이 이루어질 수 있다. 또한, 그러한 변형 및 변경은 본 명세서에 첨부된 특허청구의 범위 내에 속하는 것으로 생각되어야 한다.

100: 사용자
110: 사용자 단말
123: 화면

Claims (20)

1. 적어도 하나의 컴퓨팅 장치에 의해 수행되는, 위지위그(WYSIWYG) 편집 도구를 제공하는 방법에 있어서,
   외부 시스템으로부터 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하는 단계 - 상기 테마를 정의하는 메타 파일은 상기 하나 이상의 컴포넌트에 대한 레이아웃 및 스타일에 대한 정보를 포함함 -;
   상기 수신된 메타 파일을 기초로 상기 테마를 포함한 페이지를 렌더링하는 단계; 및
   상기 렌더링된 테마를 포함한 페이지를 출력하는 단계
   를 포함하고,
   상기 메타 파일은,
   상기 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함하는 기준 테마; 및
   복수의 플랫폼에서 일관성 있는 형식의 페이지를 지원하도록 정규화된 메타 포맷 내에 포함된 값을 포함하는 상기 기준 테마에 대한 메타 데이터
   를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
2. 제1항에 있어서,
   상기 외부 시스템으로부터, 상기 페이지를 구성하는데 사용될 리소스를 수신하는 단계를 더 포함하고,
   상기 렌더링 하는 단계는,
   상기 리소스, 상기 기준 테마 및 상기 기준 테마에 대한 메타 데이터를 이용하여 상기 페이지를 렌더링하는 단계를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
3. 삭제
4. 제1항에 있어서,
   상기 메타 포맷 내의 값이 변경됨에 따라, 상기 기준 테마의 파생 테마가 생성되는,
   위지위그 편집 도구를 제공하는 방법.
   
5. 제1항에 있어서,
   상기 메타 포맷은 언어 독립형 데이터 포맷으로 구현되는,
   위지위그 편집 도구를 제공하는 방법.
   
6. 제5항에 있어서,
   상기 편집 도구가 특정 플랫폼에서 동작되는 웹을 통해 제공되는 경우,
   상기 메타 파일을 수신하는 단계는,
   상기 언어 독립형 데이터 포맷으로부터 변환된 웹 상에서 지원되는 스타일시트 데이터 포맷의 메타 파일을 수신하는 단계를 포함하고,
   상기 렌더링하는 단계는,
   상기 수신된 스타일시트 데이터 포맷의 메타 파일을 이용하여 상기 테마를 포함한 페이지를 렌더링하는 단계를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
7. 제6항에 있어서,
   상기 스타일시트 데이터 포맷의 메타 파일을 수신하는 단계는, 상기 웹을 통해 제공되는 편집 도구가 로딩되기 전에, 상기 외부 시스템으로부터 상기 스타일시트 데이터 포맷의 메타 파일을 수신하는 단계를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
8. 제1항에 있어서,
   상기 편집 도구가 특정 플랫폼에서 동작되는 애플리케이션을 통해 제공되는 경우,
   상기 적어도 하나의 컴퓨팅 장치는 상기 테마를 정의하는 메타 파일을 해석하도록 구성된 해석 모듈을 포함하고,
   상기 렌더링하는 단계는,
   상기 해석 모듈에 의해, 상기 수신된 메타 파일을 해석하여 상기 테마를 포함한 페이지를 렌더링하는 단계를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
9. 제8항에 있어서,
   상기 메타 파일을 수신하는 단계는, 상기 애플리케이션이 로딩되는 시점 또는 로딩된 이후에, 상기 외부 시스템으로부터 상기 하나 이상의 컴포넌트를 포함한 테마를 정의하는 메타 파일을 수신하는 단계를 포함하는,
   위지위그 편집 도구를 제공하는 방법.
   
10. 삭제
11. 제1항에 있어서,
    상기 기준 테마의 상기 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보는, 상기 레이아웃의 집합 내에 포함된 레이아웃들의 패턴에 대한 정보를 포함하는,
    위지위그 편집 도구를 제공하는 방법.
    
12. 제1항에 있어서,
    상기 기준 테마의 공통 요소는, 배경, 배경색 또는 텍스트의 폰트 중 적어도 하나를 포함하는,
    위지위그 편집 도구를 제공하는 방법.
    
13. 제1항에 있어서,
    상기 출력된 페이지에 포함된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 변경하는 사용자 입력을 수신하는 단계;
    상기 수신된 사용자 입력에 응답하여, 상기 변경된 하나 이상의 컴포넌트의 레이아웃 또는 스타일 중 적어도 하나를 포함한 페이지를 다시 렌더링하는 단계; 및
    상기 다시 렌더링된 페이지를 출력하는 단계를 더 포함하는,
    위지위그 편집 도구를 제공하는 방법.
    
14. 제1항, 제2항, 제4항 내지 제9항 및 제11항 내지 제13항 중 어느 한 항에 따른 위지위그 편집 도구를 제공하는 방법을 컴퓨터에서 실행하기 위해 컴퓨터 판독 가능한 기록 매체에 저장된 컴퓨터 프로그램.
    
15. 정보 처리 시스템으로서,
    통신 모듈;
    메모리; 및
    상기 메모리와 연결되고, 상기 메모리에 포함된 컴퓨터 판독 가능한 적어도 하나의 프로그램을 실행하도록 구성된 적어도 하나의 프로세서
    를 포함하고,
    상기 적어도 하나의 프로그램은,
    외부 시스템으로부터 복수의 기준 테마 및 상기 복수의 기준 테마에 대한 메타 데이터를 수신하고,
    상기 수신된 복수의 기준 테마 및 상기 메타 데이터를 CDN 서버에 제공하고,
    사용자 단말로부터 수신되는 업데이트 요청에 응답하여, 상기 복수의 기준 테마 및 상기 메타 데이터 중 적어도 일부를 상기 사용자 단말에 전송하기 위한 명령어들을 포함하고,
    상기 복수의 기준 테마의 각각은, 상기 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보를 포함하고,
    상기 복수의 기준 테마에 대한 메타 데이터는, 복수의 플랫폼에서 일관성 있는 형식의 페이지를 지원하도록 정규화된 메타 포맷 내에 포함된 값을 포함하는,
    정보 처리 시스템.
    
16. 삭제
17. 제15항에 있어서,
    상기 메타 포맷은 언어 독립형 데이터 포맷으로 구현되는,
    정보 처리 시스템.
    
18. 삭제
19. 제15항에 있어서,
    상기 하나 이상의 컴포넌트의 각각의 레이아웃의 집합에 대한 정보는, 상기 레이아웃의 집합 내에 포함된 레이아웃들의 패턴에 대한 정보를 포함하는,
    정보 처리 시스템.
    
20. 제15항에 있어서,
    상기 기준 테마의 공통 요소는, 배경, 배경색 또는 텍스트의 폰트 중 적어도 하나를 포함하는,
    정보 처리 시스템.

Images