KR20210014872A - 웹 컴포넌트 기반 위젯 및 통신 서비스 제공 방법 - Google Patents

Abstract

본 발명은 기존 웹 기반 위젯과 달리 웹 컴포넌트(Web Components)를 사용한 위젯을 제작하여 시스템에서 사용의 복잡함을 해결하여 해당 위젯들이 난해한 방법 없이 표출되어지고, 각 응용에서 위젯의 코드를 수정하지 아니하여도 동기화 통신을 가능하게 하는 방법을 제공한다. 동시에 위젯 제작 및 동기화 통신에 사용되는 규칙을 지정할 수 있는 제작 도구를 제공한다. 이를 통해 위젯을 일반 사용자로 하여금 시스템에서 서비스로서 손쉽게 사용이 가능하게 한다.

Description

웹 컴포넌트 기반 위젯 및 통신 서비스 제공 방법 {Web Components based Widgets and Communication Service System}

본 발명은 웹 컴포넌트(Web Components) 기반으로 제작되어진 위젯 및 해당 위젯들의 통신 서비스를 제공하기 위한 시스템에 관한 것으로, 기존 웹 기반 위젯과 달리 웹 컴포넌트를 사용한 위젯 및 각 응용에서 위젯의 코드를 수정하지 아니하여도 동기화 통신을 가능하게 하는 방법을 제공함과 동시에 코드에 익숙하지 않은 일반 사용자도 단순하게 동기화 통신에 사용되는 규칙을 지정할 수 있는 저작 방식 및 도구를 포함한다.

컴퓨터 개념에서의 위젯(widget)이란 그래픽 사용자 인터페이스(GUI) 환경을 통해 사용자에서 특정한 정보를 보여주거나 상호 작용을 할 수 있는 요소를 의미한다. 예를 들어 간단한 시계, 달력 부터 날씨, 실시간 뉴스 혹은 미세 먼지 수치 표시 등의 기능을 수행하는 역할을 한다.

일반적으로 웹(Web) 기반에서 작동되어지는 위젯은 마크업 언어(HTML), 스타일 시트(CSS), 자바스크립트(JavaScript) 및 여러 자바스크립트 라이브러리(Library)들을 이용하여 작성되어 동적으로 변화하거나 사용자 이벤트와 상호작용을 한다.

하지만 상기 라이브러리를 사용한 개발 방식은 개발자가 UI를 구현하기 위해 HTML 및 그에 따른 CSS와 자바스크립트를 작성해야 하고, 이때 각 구성 요소들의 연관 관계를 신경을 써야하기 때문에 이해하기 난해하고 코드 간 충돌 문제도 존재한다.

또한 상기 개발 방식으로 제작되어진 위젯은 정적으로 미리 구성되어진 시스템이 아닌 동적으로 일반 사용자가 동적으로 위젯들을 구성하여 사용하는 시스템을 구현할 때, 시스템적으로 해당 위젯들을 구성하여 배치하여 사용하는 방법이 표준화 되어 있지 않다. 따라서 각 구현체마다의 구현 방법이 다르기 때문에 이러한 위젯을 다른 시스템에 통합하여 사용하거나, 기존에 제작된 위젯을 현재 시스템에 가져와 사용하는 것이 불가능하다.

한국 공개 특허 제10-2014-0137630호 명칭: 위젯 저작 시스템 및 방법

본 발명은 전술된 전통적인 위젯들의 제작 및 시스템에서 사용의 복잡함을 해결하고 해당 위젯들을 일반 사용자들에게 서비스로서 제공되어지는 동적인 시스템에서의 동작하기 위한 유연한 설계를 위해 웹 컴포넌트 기반의 위젯을 제작한다. 이를 통해 기존 위젯에서 외부에서 노출되는 부분을 캡슐화 하고 재사용 가능한 위젯을 구현한다.

본 발명의 다른 해결 과제는 상기에서 해결된 위젯 간의 유연한 통신 방법을 구현함에 있다. 기존에는 컴포넌트 간 통신을 위해서 컴포넌트 내부의 코드가 수정이 필요하기 때문에 일반 사용자들의 서비스로서 위젯을 사용하기 난해하였지만, 본 발명은 위젯에 종속된 통신 구조를 벗어나 이러한 점을 해결한다.

본 발명의 또 다른 해결 과제는 위젯 제작 및 동기화의 멀티플랫폼(Multi-platform)에서 사용이다. 전통적인 방식은 위젯의 제작 및 사용법이 표준화 되어 있지 않아 여러 웹 기반 시스템에서 사용하는 것이 난해하였지만, 본 발명은 웹 표준들의 명세인 웹 컴포넌트를 사용하므로 어느 시스템이든 이식이 가능하다. 이점을 이용해 웹 기반 디지털 사이니지 (Digital Signage) 시스템에서의 활용까지 적용 영역을 확장한다.

본 발명은 전술한 위젯 제작 및 사용성 문제를 해결하기 위해 웹 기반 위젯 제작 방법으로 웹 컴포넌트(Web Components)라는 표준 웹 기술의 명세 들(Custom Elements v1, Shadow DOM, HTML Template, ES module)의 집합을 사용한다. 라이브러리를 사용하는 전통적인 위젯 제작 방식과는 달리 이 방식은 각 구성 요소들이 연관 관계를 신경 쓸 필요 없이 기능이 캡슐화 되어져 재사용성이 우수하기 때문에 위젯의 제작 기술로서 적합하다.

상기에 언급된 웹 컴포넌트 기반의 위젯을 제작 후, 제작된 위젯을 시스템에서 일반 사용자들에게 서비스로서 위젯을 사용자 설정하여 사용할 수 있도록 위젯 제작 도구 GUI를 제공한다. 해당 위젯 제작 도구는 위젯 기본 틀에 사용자가 입력한 속성 값을 삽입해 위젯 인스턴스를 만들어 데이터베이스에 저장한다.

상기 위젯 제작 도구는 각 위젯 자체가 보유하고 있는 속성에 맞춰 사용자 설정 입력창을 동적으로 구성하여 표출 함으로써 사용자로 하여금 속성 값을 설정할 수 있도록 한다. 이때 제작 도구가 위젯의 속성들을 파악하기 위해 위젯이 개발 될 때 같이 제공되는 JSON 기반의 위젯 속성 구성 데이터를 사용하게 된다.

상기 위젯을 웹페이지에 렌더링 하기 위해 위젯의 자바스크립트 파일을 로드한다. 이후, 위젯의 Custom Element 태그를 생성하고 속성 값을 위젯 Element의 Attributes로 설정하여 DOM의 body에 삽입하여 위젯을 렌더링한다.

상기 위젯들은 서로의 이벤트나 상태 변화를 감지하여 내용 동기화가 가능하여 사용자에게 더욱 극적인 효과를 제공한다. 본디 웹 환경에서는 사용자 이벤트(Custom Events) 모델이나 배포-구독(Publish and Subscribe) 모델을 사용하여 컴포넌트 간 통신을 하지만, 이는 이벤트 처리 코드 및 규칙을 컴포넌트 내부에 삽입시켜야 하기 한다는 한계 때문에 가변적인 콘텐츠의 구성에서 사용하기가 불가능하다.

상기 문제를 해결하기 위해 본 발명에서는 외부에 웹 컴포넌트 기반의 위젯들의 상태 변화 및 이벤트를 감지할 수 있는 동기화 서비스를 제작하여 위젯들의 통신을 중계할 수 있도록 도와준다.

상기 동기화 서비스에서 위젯 간 동기화 기능을 제공한다. 예시로 위젯 A, B, C가 있고 위젯 A의 a1 속성과 와 위젯 C의 c2 속성이 동기화 한다고 가정한다. 이러한 시나리오를 JSON 기반의 위젯 동기화 규칙으로 제작하여 동기화 로직을 조절한다.

상기 위젯 동기화 규칙에 대한 규칙을 일반 사용자들로 하여금 제작하여 동기화 서비스에 적용하기 위해 웹 GUI로서 규칙 제작 도구를 제공한다. 규칙 제작 도구는 위젯 제작 도구와 마찬가지로 위젯의 속성들을 파악하기 위해 위젯이 개발 될 때 같이 제공되는 JSON 기반의 위젯 속성 구성 데이터를 사용하게 된다.

본 발명은 웹 표준 기술의 집합인 웹 컴포넌트를 사용하였다. 웹 컴포넌트는 각 구성 요소들이 캡슐화 되어져 코드 간 충돌 문제가 없기 때문에 연관 관계를 신경 쓸 필요가 없다. 따라서 웹 컴포넌트 위젯을 유연하게 시스템에 적용할 수 있다.

또한 본 발명은 컴포넌트 간 통신 시, 기존 컴포넌트의 방식(사용자 이벤트 / 배포-구독) 과는 달리 웹 컴포넌트 기반 위젯은 외부 이벤트 처리 서비스가 별도로 존재하기 때문에 내부 코드를 추가적으로 수정할 필요가 없다. 따라서 일반 사용자가 사용 가능한 서비스로서 제공이 가능하다.

도 1은 전통적인 라이브러리 기반의 위젯의 사용 예시이다.
도 2는 본 발명의 해결 수단인 웹 컴포넌트 기반으로 제작된 위젯의 예시다.
도 3은 도 2의 위젯의 구현 예시 코드이다.
도 4는 도 3 위젯의 사용 예시이다.
도 5는 위젯 인스턴스를 제작하기 위한 도구 GUI 이다.
도 6은 본 발명의 웹 컴포넌트 기반 위젯의 제작 및 렌더링 과정을 나타낸다.
도 7은 본 발명의 위젯 간 동기화 규칙 스키마를 나타낸다.
도 8은 본 발명의 위젯 간 동기화 규칙 제작 도구 GUI 이다.
도 9는 위젯 간 동기화 과정을 나타낸다.
도 10은 위젯 동기화 규칙의 순환참조를 나타낸다.
도 11은 위젯 동기화 규칙의 순환참조 검사 과정을 나타낸다.

기존 웹 기반의 위젯은 도 1의 예시(10)와 같이 외부 라이브러리를 불러와 DOM 상의 요소를 찾아 해당 요소 자식에 렌더링하여 사용하고는 했다. 하지만 이러한 사용법은 다른 라이브러리나 개발자가 해당 위젯이 참고하고 있는 요소를 중복해서 참조하거나 수정할 수 있는 여지가 있으며, 이를 방지하기 위해 항상 개발자는 모든 라이브러리의 연관관계를 생각하여 만들어야 했다. 결국 해당 문제는 일반 사용자에서 서비스로의 위젯 시스템 제공을 난해하게 하였다.

상기 문제를 해결하기 위해 본 발명에서 위젯은 사용자 정의요소(Custom Elements)와 Shadow DOM 등의 기술들을 사용해 도 4의 예시(40)와 같이 웹 컴포넌트로 제작된다. 웹 컴포넌트는 내부에 동작 스크립트 (자바스크립트)를 포함한 HTML 마크업과 CSS 스타일을 포함하기 때문에 모든 뷰(View)와 기능들이 컴포넌트 안에 캡슐화 된다.

이러한 특징은 위젯이 DOM에서 사용될 때, 타 콘텐츠와 충돌할 확률을 없애준다. 또한 컴포넌트의 마크업이 DOM에 작성되고 나면 내부의 콘텐츠가 알아서 컴포넌트의 Shadow Root 밑에 렌더링이 되므로 추가적인 처리가 불필요하기 때문에 가변적인 콘텐츠로써 사용되는데 적합하다.

상기 과정을 거쳐 도 2의 그림(20)처럼 위젯이 제작되는데, 해당 위젯을 곧바로 사용할 수도 있지만 추가적으로 위젯 속성을 부여하여 사용자 설정을 할 수도 있다. 예를 들어 그림(20) 처럼 날씨를 표출하는 위젯을 제작한다고 할 때, 위젯 속성에 주소를 부여하여 해당 주소의 날씨가 표출되게끔 설정 할 수 있다.

상기 속성을 위젯에 부여하기 위해서는 웹 컴포넌트의 개념을 적용하면 된다. 웹 컴포넌트는 해당 컴포넌트 요소(Element)의 속성(Attribute)를 추가 및 수정하여 속성을 줄 수 있다. 이를 수행하면 도 3의 예시 위젯 코드(30)에서 볼 수 있는 `attributeChangedCallback`라는 이름의 콜백 함수가 호출되어 웹 컴포넌트는 자신의 속성 값이 변경된 것을 알고 추가 작업을 하게 된다.

이에 따라 만약 날씨 위젯의 주소 속성(`address`)을 “서울”에서 “부산"으로 바꾼다면, 서울의 날씨에서 부산의 날씨로 바뀌게 된다.

전술한 위젯의 속성을 바꾸는 작업은 일반 사용자로 하여금 수행하기에는 너무 전문적이고 난해한 작업이다. 따라서 해당 속성 값을 도 5 같이 사용자 친화적인 GUI를 제작하여 제공하므로, 쉽게 속성(100)에 따른 값(101)을 설정하여 구성 데이터로서 저장할 수 있으며 해당 데이터는 JSON 형식으로 데이터베이스(201)에 저장되어 추후 위젯이 도 6에서 처럼 렌더링 되어질 때 사용되게 된다.

상기 위젯 속성 제작 GUI(212)는 각 위젯이 보유하고 있는 속성에 따라 동적으로 생성되며, 각 위젯의 속성은 위젯이 개발될 때 나오는 위젯 속성 메타데이터(211)를 기반으로 한다. 해당 메타데이터에는 속성별로 이름 뿐만 아니라 허용되는 값의 범위, 형식 등이 포함되어 사용자들이 입력하는 값을 GUI 측에서 검증하는 역할도 수행하게 된다.

위젯을 브라우저(220)에 렌더링하여 표출하기 위해서 도 4의 코드(40)와 같이 위젯 파일을 먼저 서버(201)로 부터 받아와 script 태그를 사용하여 위젯 모듈을 로드한다. 위젯 모듈 내부에는 위젯의 custom element를 브라우저(220) 자체의 `customRegistry`라는 저장소에 등록하여 브라우저 내부 DOM 어디서든 해당 위젯의 custom element 태그를 사용할 수 있게끔 한다.

이후 위젯의 속성 메타데이터(211)를 서버(201)로 부터 받아와 위젯 요소 태그를 구성(230)한다. 해당 구성을 위해서는 위젯의 이름(231)과 위젯 속성(232)이 사용되게 되는데, 위젯 이름을 요소 태그의 이름으로 위젯 속성을 요소 태그의 속성으로 사용한다. 예시로 날씨 위젯의 요소 태그를 살펴 보자면 요소 태그는 `<weather-daily address=”서울”></weather-daily>`와 같은 형태로 만들어 진다(221).

이후 DOM(222)에 상기 위젯 요소 태그를 작성하여 주면 태그 내부에 ShadowRoot가 작성되어지고 위젯 콘텐츠가 실제적으로 렌더링 되게 된다.

전술한 과정을 통해 여러 위젯들이 DOM 상에 표출 되어 있는데, 이 때 지도 위젯과 날씨 위젯이 있다고 가정한다. 만약 사용자가 지도를 마우스로 드래그 하여 움직이고, 그에 따라 지도에 나타나는 지역의 날씨를 표출하고 싶다고 할 때, 컴포넌트 간 통신을 하여 내용 동기를 맞추어야 한다.

컴포넌트 간 동기를 맞추는 방법에는 전술하였듯이 여러 방법이 있지만 해당 방법들은 이벤트의 메시지 명과 이벤트를 처리하는 코드를 기존 컴포넌트 내부에 미리 포함시켜야 한다는 한계 때문에 가변적인 콘텐츠의 구성에서 사용하기가 불가능하다.

따라서 본 발명에서는 도 9와 같이 위젯 간 콘텐츠 동기화 서비스(410)를 위젯 외부에 두고, 해당 서비스 내부에 존재하는 MutationObserver(411)를 사용하여 위젯의 변경이나 이벤트를 감지 할 수 있다.

사용자가 지도 위젯(400)과 상호작용하여 현재 지도에 표시되어지고 있는 위치를 이동하면, 해당 위젯 요소의 “address” 속성의 값이 이동된 위치의 주소로 변경된다. 이를 동기화 서비스가 감지하고 지도 위젯의 변경을 알 수 있다.

이후 동기화 서비스는 변경된 콘텐츠에서 추출되어진 값 바탕으로 동기화가 이루어질 대상인 날씨 위젯(401)을 미리 정해진 규칙에 따라 동기화를 이루게 된다. 대상 위젯의 요소를 “querySelector”를 통해 가져와 “setAttribute”를 사용해 속성을 변경하여 위젯에 데이터를 적용시켜 동기를 맞출 수 있다.

상기 하였듯이 동기를 맞추기 위해서는 동기화 로직이 필요하다. 이 로직은 어떠한 것 변경되면 어떤 것을 실행하라 (if... then...)라는 조건문과 실행문의 조합으로 이루어져 있다. 해당 로직에 부합하게 사용자는 도 7의 스키마(5)에 따른 JSON 형식의 규칙을 작성하여 동기화 서비스에 제공하게 되고, 해당 규칙에 따라 동기화 통신이 이루어 지게 된다.

상기 규칙을 일반 사용자가 제작하는 것이 어렵기 때문에 이를 제작할 수 있는 GUI를 도 8과 같이 제공한다. 해당 도구는 “when”(300) 과 “then”(301)으로 나뉘어져 있어 규칙의 조건문과 실행문으로 구별이 되며, 각 위젯을 특정하기 위한 조건(310)들에 대한 값(311)을 작성하여 규칙을 제작하게 된다.

상기 규칙 제작 과정에서 도 10과 같은 순환참조가 발생할 수 있다. 규칙 01”이 “규칙 02”를 참조하고 “규칙 02”가 “규칙 03”을 참조한다고 가정한다. “규칙 01”에 맞춰 동기가 이루어지고 이에 따라 “규칙 02”에 따라 동기가 이루어지는 연쇄 반응이 생긴다. 이때 “규칙 03”이 다시 “규칙 01”을 참조하게 되면 무한히 서로가 서로를 참조하여 빠져나오지 못하는 루프(Loop)가 발생되고 이를 순환 참조라고 한다.

상기 문제를 해결하기 위해 각 동기화 규칙의 참조를 추적해 가면서 참조 관계에 루프가 발생하는지 검사를 하여 해결할 수 있다. 참조 관계 검사 로직은 도 11과 같다. 각 규칙들의 ID(식별자) 및 참조된 규칙 ID를 저장하는 리스트를 생성하여 검사 대상인 규칙 ID가 이전에 참조된 규칙인지 아닌지 검사한다.

100: 위젯 속성 이름
101: 위젯 속성 값 입력창
200: 백엔드
201: 위젯용 API 및 데이터베이스
210: 사용자 조작 프론트엔드
211: 위젯 제작 도구
212: 위젯 속성 메타데이터
220: 브라우저
221: 제작된 위젯 요소
222: DOM 상에 렌더링 된 위젯
230: 위젯 요소 렌더러
231: 위젯 요소 이름 데이터
232: 위젯 요소 속성 데이터
240: 외부 제 3자 API
300: 위젯 규칙 제작 도구 부분 - 조건
301: 위젯 규칙 제작 도구 부분 - 실행
310: 위젯 특정 항목
311: 위젯 특정 항목 값 입력창
400: 웹 컴포넌트 기반 위젯 (지도)
401: 웹 컴포넌트 기반 위젯 (날씨)
410: 위젯 동기화 서비스
411: MutationObserver

Claims (3)

1. 웹 컴포넌트로 위젯을 제작하고, 위젯 인스턴스를 제작하기 위해 위젯이 가지고 있는 속성 값을 추출한 결과물로 나오는 JSON 기반 위젯 속성 구성 데이터 제작 방법; 및
   해당 위젯 속성 구성 데이터를 사용해 동적으로 위젯 제작 도구 및 내부 속성 값 입력 창을 구성하는 위젯 인스턴스 제작 방법
2. 제 1항에서 제작되어진 위젯을 스크립트로 불러와 사용 준비 단계; 및
   상기 위젯을 렌더링 하기 위해 인스턴스를 사용해 위젯 태그를 구성하여 DOM에 표출 과정
3. 제 1항에서 제작되어진 위젯 간 동기화 통신을 위한 동기화 규칙 제작 방법; 및
   상기 규칙에 따라 위젯 내부의 코드 추가 및 수정 없이 위젯 간 동기화 통신 방법

Images