웹 콘텐츠 저작 장치 및 그 제어방법과, 그 제어방법을 실행하기 위한 프로그램을 기록한 기록 매체와, 하드웨어와 결합되어 그 제어방법을 실행시키기 위하여 매체에 저장된 애플리케이션을 제공한다. 본 발명에 따른 적어도 하나의 웹 컴포넌트를 포함하는 웹페이지를 저작하기 위한 웹 콘텐츠 저작 장치의 제어방법은, 적어도 하나의 웹 컴포넌트를 표시하는 단계와; 사용자의 웹 컴포넌트 선택을 감지하는 단계와; 상기 웹 컴포넌트 선택이 감지된 이후, 적어도 하나의 이벤트 항목을 포함하는
이벤트 리스트를 표시하는 단계와; 상기 이벤트 리스트에 포함된 이벤트 항목에 대한 사용자의 선택을 감지하는 단계와; 상기 이벤트 항목의 선택이 감지된 이후, 적어도 하나의 액션 항목을 포함하는 액션 리스트를 표시하는 단계와; 상기 액션 리스트에 포함된 액션 항목에 대한 사용자의 선택을 감지하는 단계와; 상기 액션 항목의 선택이 감지된 이후, 상기 선택이 감지된 웹 컴포넌트에 대한 상기 선택이 감지된 이벤트 항목에 대응되는 이벤트의 발생시, 상기 선택이 감지된 액션 항목에 대응되는 액션이 수행되도록 하는 클라이언트 스크립트를 생성하는 단계를 포함한다.
웹 콘텐츠 저작 장치 및 그 제어방법 본 발명은 웹 콘텐츠 저작 장치 및 그 제어방법과, 그 제어방법을 실행하기 위한 프로그램을 기록한 기록 매체와, 하드웨어와 결합되어 그 제어방법을 실행시키기 위하여 매체에 저장된 애플리케이션에 관한 것으로, 보다 상세하게는 웹 페이지에 포함되는 클라이언트 스크립트를 저작하는 장치 및 그 제어방법과, 그 제어방법을 실행하기 위한 프로그램을 기록한 기록 매체와, 하드웨어와 결합되어 그 제어방법을 실행시키기 위하여 매체에 저장된 애플리케이션에 관한 것이다. 웹 콘텐츠(예를 들어 웹 페이지 또는 웹 어플리케이션 등)에는 적어도 하나의 컴포넌트(Component)들이 포함될 수 있는데, 예를 들어 웹 페이지는 이미지 컴포넌트, 버튼 컴포넌트, 링크 컴포넌트 등의 다양한
컴포넌트들이 포함될 수 있다. 그런데 이러한 웹 콘텐츠 특성상 모든 컴포넌트들은 상황에 따라 지정된 이벤트를 발생시키며 해당 이벤트의 특성에 따라 필요한 동작을 호출한다. 이를 위해 웹 콘텐츠 개발자들은 각 컴포넌트의 특정 이벤트 발생시에 수행될 동작 함수를 작성한다. 그런데 일반적으로 컴포넌트의 각 이벤트에 대응되는 동작 함수의 작성은 기 정의된 프로그램 언어(예를 들어 자바스크립트 언어)로 작성되게 되는데, 이로 인해 이러한 프로그램 언어에 익숙지 않은 사람들(예를 들어 웹 콘텐츠 기획자 또는 디자이너 등)은 웹 콘텐츠를 개발하는 것이 쉽지 않다. 더욱이 개발자라 하더라도 이러한 프로그램 언어를 이용하여 직접 코딩하는 경우 오류가 발생할 가능성이 많고, 또한 많은 작업 시간이 소요되는 문제가 있다. [선행기술문헌] 공개특허 제10-2010-0056938 본
발명은 상기한 종래의 문제점을 해결하기 위해 안출된 것으로서, 그 목적은 웹 콘텐츠에 포함되는 컴포넌트의 활용을 용이하게 하고, 특정 프로그램 언어를 이용할 줄 아는 개발자가 아니라 하더라도, 웹 콘텐츠의 제작이 가능하도록 하는 웹 콘텐츠 저작 장치 및 그 제어방법과, 그 제어방법을 실행하기 위한 프로그램을 기록한 기록 매체와, 하드웨어와 결합되어 그 제어방법을 실행시키기 위하여 매체에 저장된 애플리케이션을 제공하는 것이다. 상기한 목적을 달성하기 위해 본 발명에 따른 적어도 하나의 웹 컴포넌트를 포함하는 웹페이지를 저작하기 위한 웹 콘텐츠 저작 장치는, 디스플레이부와; 적어도 하나의 웹 컴포넌트, 적어도 하나의 이벤트 항목을 포함하는 이벤트 리스트와, 적어도 하나의 액션 항목을 포함하는 액션 리스트를 상기 디스플레이부에 표시하는 표시 제어부와; 사용자의 웹 컴포넌트 선택을 감지하는 1차 감지부와; 상기 이벤트 리스트에 포함된 이벤트 항목에 대한 사용자의 선택을 감지하는
2차 감지부와; 상기 액션 리스트에 포함된 액션 항목에 대한 사용자의 선택을 감지하는 3차 감지부와; 상기 3차 감지부에서 액션 항목의 선택이 감지된 이후, 상기 1차 감지부에서 선택이 감지된 웹 컴포넌트에 대한 상기 2차 감지부에서 선택이 감지된 이벤트 항목에 대응되는 이벤트의 발생시 상기 3차 감지부에서 선택이 감지된 액션 항목에 대응되는 액션이 수행되도록 하는 클라이언트 스크립트를 생성하는 스크립트 생성부를 포함하되, 상기 표시 제어부는 상기 1차 감지부에서 웹 컴포넌트 선택이 감지된 이후 상기 이벤트 리스트를 표시하고, 상기 2차 감지부에서 이벤트 항목의 선택이 감지된 이후 상기 액션 리스트를 표시하는 것을 특징으로 한다. 또, 상기한 목적을 달성하기 위해 본 발명에 따른 적어도 하나의 웹 컴포넌트를 포함하는 웹페이지를 저작하기 위한 웹 콘텐츠 저작 장치의 제어방법은, 적어도 하나의 웹 컴포넌트를 표시하는 단계와; 사용자의 웹 컴포넌트 선택을 감지하는 단계와; 상기
웹 컴포넌트 선택이 감지된 이후, 적어도 하나의 이벤트 항목을 포함하는 이벤트 리스트를 표시하는 단계와; 상기 이벤트 리스트에 포함된 이벤트 항목에 대한 사용자의 선택을 감지하는 단계와; 상기 이벤트 항목의 선택이 감지된 이후, 적어도 하나의 액션 항목을 포함하는 액션 리스트를 표시하는 단계와; 상기 액션 리스트에 포함된 액션 항목에 대한 사용자의 선택을 감지하는 단계와; 상기 액션 항목의 선택이 감지된 이후, 상기 선택이 감지된 웹 컴포넌트에 대한 상기 선택이 감지된 이벤트 항목에 대응되는 이벤트의 발생시, 상기 선택이 감지된 액션 항목에 대응되는 액션이 수행되도록 하는 클라이언트 스크립트를 생성하는 단계를 포함하여 이루어진다. 도 1은 본 발명의 일 실시예에 따른 웹 콘텐츠 저작 장치의 기능 블록도이고, 도 2는 웹 콘텐츠 저작 장치에서 웹 저작 도구가 실행된 화면 구성 상태를 나타낸
도면이고, 도 3은 이벤트 리스트의 일 예를 나타낸 도면이고, 도 4는 특정 이벤트 항목에서 선택 가능한 액션 리스트의 일 예를 나타낸 도면이고, 도 5는 본 발명의 일 실시예에 따른 웹 콘텐츠 저작 장치의 제어 흐름도이다. 이하에서는 첨부도면을 참조하여 본 발명에 대해 상세히 설명한다. 이하 본 발명에 따른 각 실시예는 본 발명의 이해를 돕기 위한 하나의 예에 불과하고, 본 발명이 이러한 실시예에 한정되는 것은 아니다. 특히 본 발명은 각 실시예에 포함되는 개별 구성, 개별 기능, 또는 개별 단계 중 적어도 어느 하나 이상의 조합으로 구성될 수 있다. 본 발명의 일 실시예에 따른 웹 콘텐츠 저작 장치(100)는 도 1에 도시된 바와 같이 디스플레이부(110), 표시 제어부(120), 1차 감지부(130), 2차 감지부(140), 3차 감지부(150),
스크립트 생성부(160), 웹 페이지 생성부(170), 입력부(180), 저장부(190)를 포함하여 구성될 수 있다. 디스플레이부(110)는 웹 콘텐츠(이하에는 '웹 페이지'라 가정함) 저작 과정을 표시하는 것으로서, 예를 들어 LCD(Liquid Crystal Display)를 포함하여 구성될 수 있다. 입력부(180)는 사용자의 입력을 수신하는 기능을 수행하는데, 입력부(180)는 적어도 하나의 누름 버튼을 포함하는 키패드를 포함하여 구성될 수 있고, 또는 터치 입력을 감지하는 터치 패드를 포함하여 구성될 수 있는 등 다양한 구성이 가능하다. 특히 입력부(180)가 터치 패드를 포함하여 구성되는 경우 상술한 디스플레이부(110)와 결합하여 터치스크린 형태로 구성될 수 있다. 표시 제어부(120)는 적어도 하나의 웹 컴포넌트, 적어도 하나의 이벤트 항목을 포함하는 이벤트 리스트와, 적어도 하나의 액션 항목을 포함하는 액션 리스트가
디스플레이부(110)에 표시되도록 제어한다. 여기서 표시 제어부(120)는 디스플레이부(110)에 표시되는 영역 중 소정의 웹 컴포넌트 표시 영역에 포함되어 있는 웹 컴포넌트 중 사용자에 의해 선택된 웹 컴포넌트를 디스플레이부(110) 상의 또 다른 영역인 저작 영역에 표시할 수 있다. 다른 예로써, 표시 제어부(120)는 기 저장된 웹 페이지 중 사용자에 의해 지정된 웹 페이지로부터 웹 컴포넌트를 추출하여 디스플레이부(110)에 표시할 수도 있다. 이 경우 표시 제어부(120)는 웹 페이지를 파싱 또는 해석하는 기능을 포함하여 구성되어야 함은 물론이다. 특히, 표시 제어부(120)는 1차 감지부(130)에서 웹 컴포넌트 선택이 감지된 이후 이벤트 리스트를 표시하고, 2차 감지부(140)에서 이벤트 항목의 선택이 감지된 이후 액션 리스트를 표시할 수 있는데, 1차 감지부(130)와 2차 감지부(140)에 대한 상세한 설명은 후술토록 한다. 여기서 이벤트 리스트에 포함되는 이벤트 항목은 1차 감지부(130)에서 선택이 감지된 웹 컴포넌트에 매칭되어 저장부(190)에 기 저장된 것일 수 있다. 즉, 저장부(190)에는 각 웹 컴포넌트와 그 웹 컴포넌트에서 이용할 수 있는 이벤트 항목이 매칭되어 저장될 수 있는데, 표시 제어부(120)는 사용자에 의해 선택이 감지된 웹 컴포넌트에 매칭된 이벤트 항목들을 저장부(190)로부터 추출하여 이벤트 리스트를 생성 및 표시하는 것이다. 마찬가지로 액션 리스트에 포함되는 액션 항목은 1차 감지부(130)에서 선택이 감지된 웹 컴포넌트와 2차 감지부(140)에서 선택이 감지된 이벤트 항목 중 적어도 어느 하나에 매칭되어 저장부(190)에 기 저장된 것일 수 있다. 여기서 웹 컴포넌트는 웹 페이지와 같은 웹 콘텐츠에 포함되는 구성 요소를 의미하는 것으로서, 예를 들어 이미지 컴포넌트, 버튼 컴포넌트, 링크 컴포넌트 등 웹 콘텐츠에 포함되는 각종 컴포넌트들을 의미한다. 즉, html 태그 중 <img> 태그를 사용하는 구성요소는 이미지 컴포넌트라 할 수 있고, <input> 태그의 button 속성을 사용하는 구성요소는 버튼 컴포넌트라 할 수 있으며, <a> 태그를 사용하는 구성요소는 링크 컴포넌트라 할 수 있다. 특히 웹 페이지의 경우 웹 컴포넌트는 html 태그 내에 'id'가 할당되는 모든 구성 요소를 의미할 수 있다. 이벤트 항목은 각각의 이벤트에 대응되는 것으로서, 여기서 이벤트는 예를 들어 웹 페이지가 생성된 이후, 해당 웹 페이지를 열람하는 사용자의 선택에 따라 각 웹 컴포넌트 상에 발생하는 것으로서, 예를 들어 마우스 포인터가 해당 웹 컴포넌트 위에 위치하는 경우 발생하는 OnMouseOver 이벤트, 마우스 포인터를 이용하여 해당 웹 컴포넌트를 클릭할 때 발생하는 OnClick 이벤트 등 다양하다. 이러한 이벤트 그 자체는 기 공지된 기술에 불과하므로 보다 상세한 설명을 생략한다. 액션 항목은 이벤트 발생에 따라 수행되는 각 액션에 대응되는 것으로서, 예를 들어 특정 웹 컴포넌트를 사용자가 클릭하여 선택하는 경우 다른 웹 컴포넌트의 모양 또는 이미지를 변화시키거나 특정 사이트로 연결되도록 하는 동작이 모두 액션에 해당한다. 1차 감지부(130)는 사용자의 웹 컴포넌트 선택을 감지하는 기능을 수행하고, 2차 감지부(140)는 이벤트 리스트에 포함된 이벤트 항목에 대한 사용자의 선택을 감지하는 기능을 수행하며, 3차 감지부(150)는 상기 액션 리스트에 포함된 액션 항목에 대한 사용자의 선택을 감지하는 기능을 수행한다. 스크립트 생성부(160)는 3차 감지부(150)에서 액션 항목의 선택이 감지된 이후, 1차 감지부(130)에서 선택이 감지된 웹 컴포넌트에 대한 2차 감지부(140)에서 선택이 감지된 이벤트 항목에 대응되는 이벤트의 발생시 3차 감지부(150)에서 선택이 감지된 액션 항목에 대응되는 액션이 수행되도록 하는 클라이언트 스크립트를 생성한다. 예를 들어 1차 감지부(130)에서 제1 웹 컴포넌트에 대한 선택이 감지되고, 2차 감지부(140)에서 OnMouseOver 이벤트 항목의 선택이 감지되었으며, 3차 감지부(150)에서 특정 사이트, 예를 들어 "kipo.go.kr"로의 연결에 해당하는 액션 선택이 감지된 경우, 스크립트 생성부(160)는 추후 웹 페이지를 열람하는 사용자가 제1 웹 컴포넌트에 마우스 포인터를 위치시킨 경우 사이트 "kipo.go.kr"로 연결하도록 하는 스크립트(예를 들어 자바스크립트)를 자동으로 생성하는 것이다. 즉, 스크립트 생성부(160)가 생성한 스크립트에는 제1 웹 컴포넌트에 마우스 포인터를 위치(Over)시키는 것을 감지하는 코드와 그 경우 "kipo.go.kr"로 연결하도록 하는 코드가 포함될 수 있는 것이다. 웹 페이지 생성부(170)는 표시 제어부(120)에 의해 디스플레이부(110)에 표시된 웹 컴포넌트와 스크립트 생성부(160)에서 생성된 클라이언트 스크립트를 모두 포함하는 웹 페이지를 생성하여 저장부(190)(190)에 저장하는 기능을 수행한다. 이렇게 웹 페이지에 웹 컴포넌트와 그 웹 컴포넌트와 관련된 클라이언트 스크립트가 모두 포함되는 경우, 상술한 바와 같이 웹 컴포넌트에 대해서 해당 웹 페이지 열람자가 클라이언트 스크립트에서 정의된 이벤트가 발생하도록 하는 경우, 그 클라이언트 스크립트에서 정의된 액션이 자동으로 수행되는 것이다. 도 2는 본 발명의 일 실시예에 따른 웹 콘텐츠 저작 장치(100)에서 웹 콘텐츠를 저작하기 위한 화면 표시의 일 예이다. 컴포넌트 에디터(112)는 적어도 하나의 웹 컴포넌트들을 생성하거나 생성된 웹 컴포넌트를 표시하는 영역이고, 프로퍼티 에디터(113)는 각 웹 컴포넌트들의 특성을 정의하기 위한 영역이며, 페이지 에디터(115)는 적어도 하나의 웹 페이지를 생성하거나 기 생성된 웹 페이지를 표시하는 영역이고, 레이아웃 에디터는 페이지 에디터에 포함된 적어도 하나의 웹 페이지를 선택하고 해당 웹 페이지에 웹 컴포넌트를 추가하거나 삭제할 수 있도록 하는 웹 페이지를 생성하기 위한 영역이고, 액션 에디터는 레이아웃 에디터 상에 포함된 웹 컴포넌트에 대한 이벤트 및 액션을 정의 내리기 위한 영역이다. 이러한 화면 구성은 일 예에 불과하며 다양하게 변경 가능함은 물론이다. 도 3은 상술한 적어도 하나의 이벤트 항목을 포함하는 이벤트 리스트가 디스플레이부(110) 상에 표시된 일 예이다. 여기서 OnLoad, OnInit, OnShow 등 각각은 이벤트 항목에 해당하는데, 예를 들어 OnLoad는 웹 페이지가 사용자 단말기 상에서 로드되어 표시되는 시점에 발생하는 이벤트를 의미하고, OnClick은 특정 컴포넌트에 대해 사용자가 마우스 또는 터치 클릭을 하는 경우 발생하는 이벤트를 의미한다. 도 3과 같은 이벤트 리스트가 표시된 상태에서 개발자가 OnLoad 항목을 선택하면, 도 4와 같이 액션 선택을 위한 화면이 표시될 수 있다. 예를 들어 Set Property 항목(220)을 개발자가 선택하는 경우, Target 항목(221)과 Property 항목(222)이 표시될 수 있는데, 사용자가 Target 항목(221)에서 Button1을 선택하고 Property 항목(222)에서 Checked를 선택하는 경우, 웹 콘텐츠 저작 장치(100)는 해당하는 클라이언트 스크립트(예를 들어 자바스크립트) 코드를 생성하는데, 그 생성된 클라이언트 스크립트 코드에는 해당하는 웹 페이지가 사용자 단말기에서 표시되는 시점을 감지하는 코드와, 그 순간에 웹 페이지에 포함된 Button1이 Check 된 상태가 되도록 하는 코드가 포함된다. 상술한 예는 웹 페이지 전체가 웹 컴포넌트인 경우의 예에 해당한다. 다른 예로써, 개발자가 웹 페이지에 포함된 제1 웹 컴포넌트(예를 들어 Button3)를 선택하고, 도 3의 OnMouseOver 항목을 선택하고, 액션 항목의 선택은 도 4와 같다고 가정하면, 그 생성된 클라이언트 스크립트 코드에는 해당하는 웹 페이지가 사용자 단말기에서 표시된 상태에서 사용자가 Button3에 마우스 포인터를 위치(Over) 시킬 때 발생하는 이벤트를 감지하는 코드와, 그 순간에 웹 페이지에 포함된 Button1이 Check 된 상태가 되도록 하는 코드가 포함된다. 도 5는 본 발명의 일 실시예에 따른 웹 콘텐츠 저작 장치(100)의 제어흐름을 나타낸 도면이다. 개발자의 요청에 따라 웹 콘텐츠 저장 장치는 저작도구를 실행시킨다(단계 S1). 저작도구 실행에 따라 앞서 설명한 도 2와 같은 화면 구성이 표시될 수 있다. 이때 도 2의 레이아웃 에디터에는 빈 화면이 나타난다(단계 S3). 사용자가 도 2의 페이지 에디터(115)에서 웹 페이지를 생성하면 웹 콘텐츠 저작 장치(100)는 레이아웃 에디터에 빈 웹 페이지를 표시하고(단계 S5), 사용자의 컴포넌트 에디터 조작에 따라 웹 콘텐츠 저작 장치(100)는 추가된 웹 페이지에 UI 컴포넌트를 추가할 수 있다(단계 S7). 이러한 방식으로 레이아웃 에디터의 웹 페이지에는 복수 개의 웹 컴포넌트가 포함될 수 있다. 이후, 사용자가 추가된 복수 개의 웹 컴포넌트 중 어느 하나를 선택하면 웹 콘텐츠 저작 장치(100)는 해당 선택된 웹 컴포넌트를 지정하고(단계 S9), 액션 에디터를 이용한 사용자의 선택에 따라 웹 콘텐츠 저작 장치(100)는 이벤트 항목 및 액션 항목을 지정한다(단계 S11). 이후 웹 콘텐츠 저작 장치(100)는 앞서 지정된 내용에 따라 특정 웹 컴포넌트에서 특정 이벤트가 발생하는 경우 특정 액션이 수행되도록 하는 자바스크립트 코드를 자동으로 생성하여 해당하는 웹 페이지에 포함시킨다(단계 S13). 이어서, 웹 콘텐츠 저작 장치(100)는 웹 페이지에 추가된 웹 컴포넌트와 생성된 자바스크립트를 모두 포함하는 웹 페이지를 생성하여 저장한다(단계 S15). 이처럼 생성된 웹 페이지를 사용자 단말기에 표시되고, 그 웹 페이지에 포함된 특정 웹 컴포넌트에 대해서 클라이언트 스크립트 코드 내에서 정의된 이벤트가 발생하는 경우, 그 클라이언트 스크립트 코드 내에서 정의된 특정 액션이 수행될 수 있는 것이다. 상술한 웹 콘텐츠 저작 장치(100)에 의하면, 개발자는 특정 웹 컴포넌트에 대한 특정 이벤트 발생을 감지하고 그에 따른 특정 기능이 수행되는 클라이언트 스크립트를 수동으로 코딩할 필요가 없어서 클라이언트 스크립트 코딩 시간이 단축됨은 물론 수동 코딩 작업 중 발생할 수 있는 실수를 줄일 수 있다. 뿐만 아니라 필요한 클라이언트 스크립트 코드를 작성하기 위해 직관적인 리스트(즉, 이벤트 리스트 또는 액션 리스트)를 보면서 필요한 선택을 하기만 하면 되므로 클라이언트 스크립트 코드에 대한 문외한인 디자이너 등도 자신이 원하는 클라이언트 스크립트 코드를 쉽게 작성할 수 있는 이점이 있다. 한편, 상술한 각 실시예를 수행하는 과정은 소정의 기록 매체(예를 들어 컴퓨터로 판독 가능한)에 저장된 프로그램 또는 애플리케이션에 의해 이루어질 수 있음은 물론이다. 여기서 기록 매체는 RAM(Random Access Memory)과 같은 전자적 기록 매체, 하드 디스크와 같은 자기적 기록 매체, CD(Compact Disk)와 같은 광학적 기록 매체 등을 모두 포함한다. 이때, 기록 매체에 저장된 프로그램은 컴퓨터나 스마트폰 등과 같은 하드웨어 상에서 실행되어 상술한 각 실시예를 수행할 수 있다. 특히, 상술한 본 발명에 따른 웹 콘텐츠 저작 장치(100)의 기능 블록 중 적어도 어느 하나는 이러한 프로그램 또는 애플리케이션에 의해 구현될 수 있다. 이상 설명한 바와 같이 본 발명에 따르면, 웹 콘텐츠에 포함된 특정 웹 컴포넌트에 대한 특정 이벤트 발생에 따른 특정 액션이 수행되도록 하는 스크립트 생성이 개발자 등의 직관적인 선택에 의해 이루어지므로, 수동으로 스크립트 코드를 생성하는 것에 비해 실수가 줄어들고 스크립트 코드 생성 시간이 짧아진다. 특히 스크립트 코드의 생성을 위해 직관적인 인터페이스 상에서 항목 선택만 하면 되므로 스크립트 코드의 문법을 모르는 디자이너 등도 필요한 스크립트 코드를 쉽게 생성할 수 있다. Claims (14)
Priority Applications (1)
Applications Claiming Priority (1)
Publications (1)
FamilyID=55304270Family Applications (1)
Country Status (1)
Citations (5)* Cited by examiner, † Cited by third party
Patent Citations (5)* Cited by examiner, † Cited by third party
Similar Documents
Legal Events
|
웹 컨텐츠 제공 장치 및 방법 site kipo.go.kr
저작권 © 2024 ko.idkuu.com Inc.
