KR102228241B1 - 웹 상에서의 가상 입력 방법 및 시스템 - Google Patents

Abstract

웹 상에서의 가상 입력 방법 및 시스템이 개시된다. 일 실시예에 따른 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법은, 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계; 상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및 상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계를 포함할 수 있다.

Description

웹 상에서의 가상 입력 방법 및 시스템{METHOD AND SYSTEM FOR VIRTUAL INPUT ON THE WEB}

아래의 설명은 웹 상에서 데이터를 편집하는 기술에 관한 것이다.

위지윅 웹 에디터를 구현하기 위해 HTML5의 contentEditable 을 사용한다. HTML5의 contentEditable는 브라우저 레벨에서 위지윅 에디팅을 알아서 컨트롤해주기 때문에 간단한 웹 에디터를 만드는데 좋은 방법이다. 이러한 웹 에디터에 단일DOM Element 가 아닌 복잡한 구조로 구성된 DOM Elements 들을 단일 개체처럼 동작하도록 한다거나 고정된 레이아웃 기능을 제공하는 등의 커스터마이징 기능을 추가하려면 여러 가지 문제로 인한 기술적인 한계가 존재한다. 불완전한 contentEditable 스펙으로 인해 브라우저마다 동작방식이 달라서 커서 컨트롤이 어렵고 입출력 영역의 구분이 없기 때문에 선택영역제한이 어렵다. 또한, 최종결과물은 HTML형식이기 때문에 데이터 재활용이 어려워 별도의 정제과정이 필요하다.

한편, 한국공개 특허공보 제10-2011-0076311호는 '테일러링을 지원하는 멀티미디어 웹 에디터 장치 및 방법'에 관한 것으로, 이러한 웹 에디터는 사용자가 HTML(Hypertext Markup Language)과 같은 컴퓨터 언어와 인터넷에 관한 지식이 많 지 않아도 마치 문서작성 소프트웨어를 사용하는 것처럼 손쉽게 텍스트와 이미지 등의 각종 멀티미디어 데이터를 일정한 포맷에 맞추어 생성할 수 있도록 지원한다. 그러나, 종래의 기술은 사용자 입장에서 사용자가 웹 에디터를 이용하여 보다 간편하고 편리하게 이용할 수 있다는 것에 초점을 맞추고 있을 뿐이다. 이에, 개발자의 입장에서 개발자가 웹 에디터를 이용하여 편리하게 확장 구현할 수 있는 기술이 요구된다.

사용자의 인터랙션 정보가 발생함에 따라 레이어와 데이터 모델간의 결합관계를 통하여 데이터를 구조화하는 가상 입력 방법 및 시스템을 제공할 수 있다.

입력 영역과 출력 영역이 분리되어 편집 데이터에 대한 다양한 템플릿을 구현하는 가상 입력 방법 및 시스템을 제공할 수 있다.

브라우저 환경에 상관없이 일관된 편집 인터페이스를 제공하고, 제공된 편집 인터페이스를 통하여 데이터의 편집을 수행하는 가상 입력 방법 및 시스템을 제공할 수 있다.

컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법은, 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계; 상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및 상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계를 포함할 수 있다.

상기 적어도 하나 이상의 레이어를 구성하는 단계는, 데이터의 입력을 담당하는 입력 버퍼 레이어, 입력 장치와의 인터랙션을 통하여 데이터의 출력을 담당하는 편집 영역 레이어 및 입력 가능한 위치 정보와 선택된 영역을 표시하는 가상 커서 레이어를 구성하는 단계를 포함할 수 있다.

상기 모델을 정의하는 단계는, 상기 구성된 적어도 하나 이상의 레이어를 통하여 텍스트 데이터와 이미지 데이터를 포함하는 입력 요소를 표현하기 위한 편집 데이터 모델 및 상기 편집 데이터 모델을 기준으로 선택된 영역을 표현하기 위한 선택 정보 모델을 포함하는 데이터 모델을 정의하는 단계를 포함할 수 있다.

상기 편집 데이터 모델은, 상기 텍스트 데이터와 상기 이미지 데이터를 포함하는 입력 요소를 확장 또는 축소된 형태로 구분하는 단계를 포함할 수 있다.

상기 선택 정보 모델은, 상기 선택된 영역의 시작 지점과 종료 지점으로 구성하고, 상기 시작 지점 및 상기 종료 지점을 컴포넌트(component), 유닛(unit), 문단(paragraph), 텍스트 노드(text node) 및 오프셋(offset) 정보로 구분할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 입력 요소를 가지는 프레임이 생성됨에 따라 입력 장치를 통하여 브라우저에 노출된 편집 영역에 선택된 키 입력 정보를 수신하고, 상기 수신된 키 입력 정보를 핸들링하기 위한 브라우저의 포커스를 상기 입력 버퍼 레이어로 이동시키는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 입력 버퍼 레이어에서 상기 입력 장치로부터 수신된 키 입력 정보를 편집 영역 레이어의 DOM 객체로 전달하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 편집 영역 레이어에서 상기 입력 버퍼 레이어로부터 입력 장치를 통하여 입력된 키 입력 정보를 수신하고, 상기 수신된 키 입력 정보를 통하여 발생하는 인터랙션 정보를 편집 데이터 모델로 모델링하고, 상기 모델링된 편집 데이터 모델로부터 편집 영역 레이어를 렌더링하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 인터랙션 정보가 발생하는 위치 정보를 편집 데이터 모델에 대응하는 요소에 클래스 셀렉터를 추가하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 가상 커서 레이어에서 상기 편집 영역 레이어에서 발생하는 인터랙션 정보를 감지하여 편집중인 위치 정보를 선택 정보 모델을 통하여 갱신하고, 상기 갱신된 선택 정보 모델로부터 가상 커서 레이어를 렌더링하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 편집 중인 위치 정보를 브라우저 화면에 대응하는 화면 위치 정보로 계산하고, 상기 계산된 화면 위치 정보에 해당하는 편집 영역 레이어에 커서 정보를 노출시키는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 선택 정보 모델의 시작 지점과 종료 지점이 일치할 경우, 상기 커서 정보를 캐럿 형태로 노출시키고, 상기 선택 정보 모델의 시작 지점과 종료 지점이 일치할지 않을 경우, 커서 정보를 블럭 영역 형태로 노출시키는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 캐럿 형태의 커서 정보를 깜박이도록 표현하고, 상기 블록 영역 형태의 커서 정보를 상기 시작 지점과 상기 종료 지점 사이에 차지하는 영역을 계산하여 투명도와 색상 정보를 포함하는 DOM 요소를 편집 영역 레이어에 노출되도록 표현하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 JSON 형태의 구조로 데이터화하여 저장하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 저장된 JSON 형태의 구조로 데이터화된 인터랙션 정보를 브라우저 환경에 따라 변환하여 편집 영역 레이어에 렌더링하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 상기 인터랙션 정보를 상기 편집 데이터 모델에 기초하여 모델링함에 따라 템플릿을 구성하는 단계를 포함할 수 있다.

상기 브라우저의 환경에 기초하여 렌더링하는 단계는, 입력 장치를 통하여 브라우저에 노출된 편집 영역 레이어에 선택된 키 입력 정보와 관련된 인터랙션 정보를 상기 정의된 데이터 모델에 모델링하는 단계를 포함할 수 있다.

컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법을 실행시키기 위하여 컴퓨터 판독 가능한 저장매체에 저장된 컴퓨터 프로그램은, 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계; 상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및 상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계를 포함할 수 있다.

컴퓨터로 구현되는 전자 기기의 가상 입력 시스템은, 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 레이어 구성부; 상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 데이터 모델 정의부; 및 상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 렌더링부를 포함할 수 있다.

데이터 모델을 통하여 인터랙션 정보에 대한 복합요소 표현을 제공함으로써 다양한 템플릿을 구현할 수 있다.

서로 브라우저 환경일지라도 인터랙션 정보를 정형화된 데이터로 추출할 수 있다.

구조화된 데이터 형식을 통하여 다양한 종류의 브라우저 환경에서 동작할 수 있으며, 브라우저 환경에 따라 별도의 정제 과정없이 인터랙션 정보를 렌더링할 수 있다.

도 1은 일 실시예에 따른 네트워크 환경의 예를 도시한 도면이다.
도 2는 일 실시예에 따른 전자 기기 및 서버의 내부 구성을 설명하기 위한 블록도이다.
도 3은 일 실시예에 따른 전자 기기의 프로세서가 포함할 수 있는 구성 요소의 예를 도시한 블록도이다.
도 4는 일 실시예에 따른 전자 기기에서 수행되는 가상 입력 방법을 설명하기 위한 흐름도이다.
도 5는 일 실시예에 있어서, 가상 입력을 위한 레이어 구조를 설명하기 위한 예이다.
도 6은 일 실시예에 있어서, 입력 장치를 통하여 인터랙션 정보가 발생했을 때의 레이어와 데이터 모델 간의 상관관계를 통하여 가상 입력 동작을 설명하기 예이다.
도 7 내지 도 9는 일 실시예에 있어서, 브라우저에 데이터 모델을 렌더링하는 것을 설명하기 위한 예이다.

이하, 실시예를 첨부한 도면을 참조하여 상세히 설명한다.

도 1은 일 실시예에 따른 네트워크 환경의 예를 도시한 도면이다.

도 1의 네트워크 환경은 복수의 전자 기기들(110, 120, 130, 140), 복수의 서버들(150, 160) 및 네트워크(170)를 포함하는 예를 나타내고 있다. 이러한 도 1은 발명의 설명을 위한 일례로 전자 기기의 수나 서버의 수가 도 1과 같이 한정되는 것은 아니다.

복수의 전자 기기들(110, 120, 130, 140)은 컴퓨터 장치로 구현되는 고정형 단말이거나 이동형 단말일 수 있다. 복수의 전자 기기들(110, 120, 130, 140)의 예를 들면, 스마트폰(smart phone), 휴대폰, 네비게이션, 컴퓨터, 노트북, 디지털방송용 단말, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 태블릿 PC 등이 있다. 일례로 전자 기기 1(110)은 무선 또는 유선 통신 방식을 이용하여 네트워크(170)를 통해 다른 전자 기기들(120, 130, 140) 및/또는 서버(150, 160)와 통신할 수 있다. 실시예에서는 전자 기기는 클라이언트일 수 있다.

통신 방식은 제한되지 않으며, 네트워크(170)가 포함할 수 있는 통신망(일례로, 이동통신망, 유선 인터넷, 무선 인터넷, 방송망)을 활용하는 통신 방식뿐만 아니라 기기들간의 근거리 무선 통신 역시 포함될 수 있다. 예를 들어, 네트워크(170)는, PAN(personal area network), LAN(local area network), CAN(campus area network), MAN(metropolitan area network), WAN(wide area network), BBN(broadband network), 인터넷 등의 네트워크 중 하나 이상의 임의의 네트워크를 포함할 수 있다. 또한, 네트워크(170)는 버스 네트워크, 스타 네트워크, 링 네트워크, 메쉬 네트워크, 스타-버스 네트워크, 트리 또는 계층적(hierarchical) 네트워크 등을 포함하는 네트워크 토폴로지 중 임의의 하나 이상을 포함할 수 있으나, 이에 제한되지 않는다.

서버(150, 160) 각각은 복수의 전자 기기들(110, 120, 130, 140)과 네트워크(170)를 통해 통신하여 명령, 코드, 파일, 컨텐츠, 서비스 등을 제공하는 컴퓨터 장치 또는 복수의 컴퓨터 장치들로 구현될 수 있다.

일례로, 서버(160)는 네트워크(170)를 통해 접속한 전자 기기 1(110)로 어플리케이션의 설치를 위한 파일을 제공할 수 있다. 이 경우 전자 기기 1(110)은 서버(160)로부터 제공된 파일을 이용하여 어플리케이션을 설치할 수 있다. 또한 전자 기기 1(110)이 포함하는 운영체제(Operating System, OS) 및 적어도 하나의 프로그램(일례로 브라우저나 상기 설치된 어플리케이션)의 제어에 따라 서버(150)에 접속하여 서버(150)가 제공하는 서비스나 컨텐츠를 제공받을 수 있다. 예를 들어, 전자 기기 1(110)이 어플리케이션의 제어에 따라 네트워크(170)를 통해 서비스 요청 메시지를 서버(150)로 전송하면, 서버(150)는 서비스 요청 메시지에 대응하는 코드를 전자 기기 1(110)로 전송할 수 있고, 전자 기기 1(110)은 어플리케이션의 제어에 따라 코드에 따른 화면을 구성하여 표시함으로써 사용자에게 컨텐츠를 제공할 수 있다.

도 2는 일 실시예에 따른 전자 기기 및 서버의 내부 구성을 설명하기 위한 블록도이다.

도 2에서는 하나의 전자 기기에 대한 예로서 전자 기기 1(110), 그리고 하나의 서버에 대한 예로서 서버(150)의 내부 구성을 설명한다. 다른 전자 기기들(120, 130, 140)이나 서버(160)뿐만 아니라 도 1을 통해 설명한 네트워크 환경에 포함될 수 있는 또 다른 전자 기기들이나 또 다른 서버들에도 동일한 또는 유사한 내부 구성요소들이 적용될 수 있다.

전자 기기 1(110)과 서버(150)는 메모리(211, 221), 프로세서(212, 222), 통신 모듈(213, 223) 그리고 입출력 인터페이스(214, 224)를 포함할 수 있다. 메모리(211, 221)는 컴퓨터에서 판독 가능한 기록 매체로서, RAM(random access memory), ROM(read only memory) 및 디스크 드라이브와 같은 비소멸성 대용량 기록장치(permanent mass storage device)를 포함할 수 있다. 또한, 메모리(211, 221)에는 운영체제와 적어도 하나의 프로그램 코드(일례로 전자 기기 1(110)에 설치되어 구동되는 브라우저나 상술한 어플리케이션 등을 위한 코드)가 저장될 수 있다. 이러한 소프트웨어 구성요소들은 드라이브 메커니즘(drive mechanism)을 이용하여 메모리(211, 221)와는 별도의 컴퓨터에서 판독 가능한 기록 매체로부터 로딩될 수 있다. 이러한 별도의 컴퓨터에서 판독 가능한 기록 매체는 플로피 드라이브, 디스크, 테이프, DVD/CD-ROM 드라이브, 메모리 카드 등의 컴퓨터에서 판독 가능한 기록 매체를 포함할 수 있다. 다른 실시예에서 소프트웨어 구성요소들은 컴퓨터에서 판독 가능한 기록 매체가 아닌 통신 모듈(213, 223)을 통해 메모리(211, 221)에 로딩될 수도 있다. 예를 들어, 적어도 하나의 프로그램은 개발자들 또는 어플리케이션의 설치 파일을 배포하는 파일 배포 시스템(일례로 상술한 서버(160))이 네트워크(170)를 통해 제공하는 파일들에 의해 설치되는 프로그램(일례로 상술한 어플리케이션)에 기반하여 메모리(211, 221)에 로딩될 수 있다.

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

통신 모듈(213, 223)은 네트워크(170)를 통해 전자 기기 1(110)과 서버(150)가 서로 통신하기 위한 기능을 제공할 수 있으며, 다른 전자 기기(일례로 전자 기기 2(120)) 또는 다른 서버(일례로 서버(160))와 통신하기 위한 기능을 제공할 수 있다. 일례로, 전자 기기 1(110)의 프로세서(212)가 메모리(211)와 같은 기록 장치에 저장된 프로그램 코드에 따라 생성한 요청(일례로 컨텐츠에 대한 스트리밍 서비스 요청)이 통신 모듈(213)의 제어에 따라 네트워크(170)를 통해 서버(150)로 전달될 수 있다. 역으로, 서버(150)의 프로세서(222)의 제어에 따라 제공되는 제어 신호나 명령, 컨텐츠, 파일 등이 통신 모듈(223)과 네트워크(170)를 거쳐 전자 기기 1(110)의 통신 모듈(213)을 통해 전자 기기 1(110)로 수신될 수 있다. 예를 들어 통신 모듈(213)을 통해 수신된 서버(150)의 제어 신호나 명령 등은 프로세서(212)나 메모리(211)로 전달될 수 있고, 컨텐츠나 파일 등은 전자 기기 1(110)가 더 포함할 수 있는 저장 매체로 저장될 수 있다.

입출력 인터페이스(214, 224)는 입출력 장치(215)와의 인터페이스를 위한 수단일 수 있다. 예를 들어, 입력 장치는 키보드 또는 마우스 등의 장치를, 그리고 출력 장치는 어플리케이션의 통신 세션을 표시하기 위한 디스플레이와 같은 장치를 포함할 수 있다. 다른 예로 입출력 인터페이스(214)는 터치스크린과 같이 입력과 출력을 위한 기능이 하나로 통합된 장치와의 인터페이스를 위한 수단일 수도 있다. 보다 구체적인 예로, 전자 기기 1(110)의 프로세서(212)는 메모리(211)에 로딩된 컴퓨터 프로그램의 명령을 처리함에 있어서 서버(150)나 전자 기기 2(120)가 제공하는 데이터를 이용하여 구성되는 서비스 화면이나 컨텐츠가 입출력 인터페이스(214)를 통해 디스플레이에 표시될 수 있다.

또한, 다른 실시예들에서 전자 기기 1(110) 및 서버(150)는 도 2의 구성요소들보다 더 많은 구성요소들을 포함할 수도 있다. 그러나, 대부분의 종래기술적 구성요소들을 명확하게 도시할 필요성은 없다. 예를 들어, 전자 기기 1(110)은 상술한 입출력 장치(215) 중 적어도 일부를 포함하도록 구현되거나 또는 트랜시버(transceiver), GPS(Global Positioning System) 모듈, 카메라, 각종 센서, 데이터베이스 등과 같은 다른 구성요소들을 더 포함할 수도 있다.

실시예들은 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하고, 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 가상 입력을 구현하는 기술에 관한 것이다. 일례로, 전자 기기1(110)는 서버(150)로부터 웹상에서 가상 입력을 위한 프로그램이 다운로드되어 동작될 수 있다.

도 3은 일 실시예에 따른 전자 기기의 프로세서가 포함할 수 있는 구성 요소의 예를 도시한 블록도이고, 도 4는 일 실시예에 따른 전자 기기에서 수행되는 가상 입력 방법을 설명하기 위한 흐름도이다.

전자 기기 1(110)의 프로세서(222)는 레이어 구성부(310), 데이터 모델 정의부(320) 및 렌더링부(330)를 포함할 수 있다. 이러한 프로세서(212)의 구성요소들은 서버에 저장된 프로그램 코드가 제공하는 제어 명령에 따라 프로세서(212)에 의해 수행되는 서로 다른 기능들(different functions)의 표현들일 수 있다. 프로세서(212) 및 프로세서(212)의 구성요소들은 도 4의 가상 입력 방법이 포함하는 단계들(S410 내지 S430)을 수행하도록 서버를 제어할 수 있다. 이때, 프로세서(212) 및 프로세서(212)의 구성요소들은 메모리가 포함하는 운영체제의 코드와 적어도 하나의 프로그램의 코드에 따른 명령(instruction)을 실행하도록 구현될 수 있다.

프로세서(212)는 가상 입력 방법을 위한 프로그램의 파일에 저장된 프로그램 코드를 메모리에 로딩할 수 있다. 예를 들면, 전자 기기 1(110)에서 프로그램이 실행되면, 프로세서는 운영체제의 제어에 따라 프로그램의 파일로부터 프로그램 코드를 메모리에 로딩하도록 전자 기기 1(110)을 제어할 수 있다. 이때, 프로세서(212) 및 프로세서(212)가 포함하는 레이어 구성부(310), 데이터 모델 정의부(320) 및 렌더링부(330) 각각은 메모리에 로딩된 프로그램 코드 중 대응하는 부분의 명령을 실행하여 이후 단계들(S410 내지 S430)을 실행하기 위한 프로세서(222)의 서로 다른 기능적 표현들일 수 있다.

단계(S410)에서 레이어 구성부(310)는 데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성할 수 있다. 레이어 구성부(310)는 데이터의 입력을 담당하는 입력 버퍼 레이어, 입력 장치와의 인터랙션을 통하여 데이터의 출력을 담당하는 편집 영역 레이어 및 입력 가능한 위치 정보와 선택된 영역을 표시하는 가상 커서 레이어를 구성할 수 있다.

단계(S420)에서 데이터 모델 정의부(320)는 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의할 수 있다. 데이터 모델 정의부(320)는 구성된 적어도 하나 이상의 레이어를 통하여 텍스트 데이터와 이미지 데이터를 포함하는 입력 요소를 표현하기 위한 편집 데이터 모델 및 편집 데이터 모델을 기준으로 선택된 영역을 표현하기 위한 선택 정보 모델을 포함하는 데이터 모델을 정의할 수 있다. 이때, 편집 데이터 모델은 텍스트 데이터와 이미지 데이터를 포함하는 입력 요소를 확장 또는 축소된 형태로 구분할 수 있다. 예를 들면, 편집 데이터 모델은 텍스트 데이터와 이미지 데이터를 포함하는 입력 요소를 컴포넌트(component), 유닛(unit), 문단(paragraph) 및 텍스트 노드(text node)로 구분할 수 있다. 선택 정보 모델은 선택된 영역과 관련된 시작 지점과 종료 지점으로 구성하고, 시작 지점 및 종료 지점을 컴포넌트(component), 유닛(unit), 문단(paragraph), 텍스트 노드(text node) 및 오프셋(offset) 정보로 구분할 수 있다.

단계(S430)에서 렌더링부(330)는 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링할 수 있다. 도 6을 참고하면, 입력 장치를 통하여 인터랙션 정보가 발생했을 때의 레이어와 데이터 모델 간의 상관관계를 통하여 가상 입력 동작을 설명하기 예이다. 도 6(a)를 참고하면, 입력 장치를 통하여 편집 영역 레이어(520)에 키 입력 이벤트가 발생될 수 있다. 예를 들면, 사용자는 마우스를 통하여 브라우저 화면에 터치 또는 선택하는 키 입력 이벤트(예를 들면, 마우스 이벤트)를 발생시킬 수 있다. 이때, 사용자가 브라우저 화면에 입력한 키 입력 이벤트는 편집 영역 레이어(520)에서 인식될 수 있다. 입력 버퍼 레이어(530)에서 입력 요소를 가지는 프레임(예를 들면, iframe)이 생성될 수 있다. 이때, 편집 영역 레이어(520)에서의 사용자 인터랙션 간섭으로 인한 오작동을 최소화하기 위하여 iframe으로 생성될 수 있다. 렌더링부(330)는 입력 버퍼 레이어(530)에서 입력 요소를 가지는 프레임이 생성됨에 따라 입력 장치를 통하여 브라우저 화면에 노출된 편집 영역 레이어(520)에서 선택된 키 입력 이벤트를 수신할 수 있다.

렌더링부(330)는 편집 영역 레이어(520)를 선택하여 발생된 키 이벤트가 가상 커서 레이어(510)로 전달됨에 따라 가상 커서 레이어(510)에서 키 입력 이벤트와 관련된 인터랙션 정보를 선택 정보 모델에 갱신할 수 있다. 만약, 렌더링부(330)는 선택 정보 모델에 저장된 인터랙션 정보가 존재하지 않을 경우, 편집 영역 레이어(520)로부터 전달된 마우스 이벤트와 관련된 인터랙션 정보를 반영할 수 있고, 선택 정보 모델에 저장된 인터랙션 정보가 존재할 경우, 편집 영역 레이어(520)로부터 전달된 마우스 이벤트와 관련된 인터랙션 정보를 갱신할 수 있다. 여기서, 인터랙션 정보는 키 입력 이벤트와 관련하여 발생하는 정보일 수 있다.

렌더링부(330)는 가상 커서 레이어(510)에서 선택 정보 모델에 인터랙션 정보를 갱신함에 따라 커서 정보를 렌더링할 수 있다. 렌더링부(330)는 브라우저 화면에 키 입력 이벤트가 발생한 지점에 커서 정보를 표시할 수 있다. 렌더링부(330)는 가상 커서 레이어(510)에서 선택 정보 모델에 인터랙션 정보를 갱신함에 따라 포커스를 입력 버퍼 레이어(530)로 이동시킬 수 있다. 렌더링부(330)는 실제의 브라우저 포커스를 입력 버퍼 레이어(530)로 강제로 이동시킬 수 있다. 포커스를 강제로 이동시키는 것을 스틸 포커스(Steal Focus) 기능이라고 한다. 이때, 입력 버퍼 레이어(530)는 실제의 입력 영역이 아니기 때문에 사용자가 키 입력을 할 수 없어 사용자의 키 입력 정보를 핸들링할 수 있도록 실제 브라우저의 포커스를 뺏어와야 한다. 포커스를 뺏어올 때, 블록 영역이 선택된 상태였다면, 선택된 블록 영역의 HTML을 입력 영역 레이어에 복사할 수 있다. 사용자가 복사하였을 때 클립보드로 HTML이 복사될 수 있도록 하기 위함이다.

도 6(b)를 참고하면, 입력 버퍼 레이어(530)의 하단에 숨겨진 텍스트 영역에 기초하여 키 입력 이벤트가 발생할 수 있다. 예를 들면, 사용자가 입력 장치(예를 들면, 마우스)를 통하여 브라우저 화면을 선택한 뒤, 다른 입력 장치(예를 들면, 키보드)를 통하여 텍스트 데이터를 입력할 수 있다. 입력 버퍼 레이어(530)에서 입력 요소를 가지는 프레임(예를 들면, iframe)이 생성될 수 있다. 이때, 편집 영역 레이어(520)에서의 사용자 인터랙션 간섭으로 인한 오작동을 최소화하기 위하여 iframe으로 생성될 수 있다. 렌더링부(330)는 입력 버퍼 레이어(530)에서 입력 요소를 가지는 프레임이 생성됨에 따라 입력 장치를 통하여 브라우저 화면에 노출된 편집 영역 레이어(520)에서 선택된 키 입력 이벤트를 수신할 수 있다.

렌더링부(330)는 입력 버퍼 레이어(510)에 수신된 키보드 이벤트와 관련된 인터랙션 정보를 편집 영역 레이어(520)의 편집 데이터 모델에 갱신할 수 있다. 만약, 렌더링부(330)는 편집 영역 레이어(520)에 편집 데이터 모델에 인터랙션 정보가 존재하지 않을 경우, 입력 버퍼 레이어(510)로부터 수신된 키보드 이벤트와 관련된 인터랙션 정보를 반영할 수 있고, 편집 데이터 모델에 인터랙션 정보가 존재하는 경우, 입력 버퍼 레이어(510)로부터 수신된 키보드 이벤트와 관련된 인터랙션 정보를 갱신할 수 있다.

렌더링부(330)는 편집 데이터 모델을 통하여 갱신 또는 반영된 인터랙션 정보를 렌더링할 수 있다. 이에, 사용자로부터 입력되는 텍스트 데이터가 브라우저 화면에 표시될 수 있다. 렌더링부(330)는 편집 영역 레이어(520)의 편집 데이터 모델을 갱신한 후, 인터랙션 정보가 마지막으로 입력된 위치와 관련하여 편집 중인 위치 정보를 가상 커서 레이어(510)의 선택 정보 모델에 갱신할 수 있다. 렌더링부(330)는 가상 커서 레이어(510)의 선택 정보 모델에 갱신된 위치 정보를 렌더링하여 커서 정보를 표시할 수 있다.

도 5는 일 실시예에 있어서, 가상 입력을 위한 레이어의 구조를 설명하기 위한 예이다. 이와 같은 레이어가 중첩된 형태로 구성된 가상입력기 웹 에디터가 제공될 수 있다. 예를 들면, 사용자는 가상입력기 웹 에디터를 통하여 텍스트 데이터 또는 이미지 데이터를 편집할 수 있고, 편집된 데이터가 브라우저 화면에 표시될 수 있다. 실제로 사용자는 가상입력기 웹 에디터에서 편집 영역 레이어를 통하여 데이터를 편집하게 된다.

입력 버퍼 레이어(530)는 입력 장치(예를 들면, 마우스, 키보드, 디지타이징 등)을 통하여 입력되는 키 입력 정보와 관련된 처리를 수행할 수 있다. 입력 버퍼 레이어(530)는 사용자에게 보이지 않는 숨겨진 영역에 존재할 수 있다. 입력 버퍼 레이어는 입력 버퍼 레이어의 하단에 숨겨진 텍스트 영역을 구성하여 사용자의 키보드 입력을 수신하여 데이터화할 수 있다. 또한, 텍스트 영역에 텍스트를 입력할 때 커서 선택 정보를 가지고 있어서, 커서 정보를 가상 커서 레이어로 전달되어 렌더링될 수 있다. 입력 버퍼 레이어(530)는 input Element/textarea Element로 사용자의 키 입력을 수신하여 데이터화하는 과정을 수행할 수 있다. 이때, 입력 버퍼 레이어(530)는 복사/붙여넣기를 수행할 때, HTML을 자유롭게 컨트롤하기 위하여 contentEditable Element를 사용할 수도 있다.

입력 버퍼 레이어(530)는 사용자로부터 편집 영역 레이어(520)를 통하여 인터랙션 정보가 발생함에 따라 실제 브라우저의 포커스를 강제로 이동시킬 수 있다. 또한, 입력 장치를 통하여 입력된 키 입력 이벤트를 편집 영역 레이어의 DOM 객체에 전달할 수 있다. 키 입력 이벤트를 편집 영역 레이어에 전달하는 것을 릴레이 이벤트(Relay Event) 기능이라고 한다. 키 입력 이벤트가 입력 버퍼 레이어(530)에서만 발생하기 때문에 외부 애플리케이션에서 키 이벤트 리스너를 일반 입력 요소처럼 등록할 수 없다. 렌더링부(330)는 입력 버퍼 레이어(530)에서 발생한 키 입력 이벤트를 복제하여 편집 영역 레이어에 전달함으로써 외부 개발자가 일반 DOM 객체처럼 핸들링할 수 있다. 렌더링부(330)는 입력 버퍼 레이어(530)는 입력 장치를 통하여 발생한 입력 정보에 대한 입력값의 변경이 있을 경우, 편집 데이터 모델을 부분 갱신할 수 있도록 커스텀 이벤트를 전달할 수 있다.

편집 영역 레이어(520)는 입력 장치를 통하여 입력되는 인터랙션 정보와 데이터 출력과 관련된 처리를 수행할 수 있다. 편집 영역 레이어(520)는 입력 버퍼 레이어를 통하여 전달된 입력 데이터를 편집 데이터 모델로 모델링하고, 모델링된 편집 데이터 모델로부터 편집 영역 레이어가 렌더링되는 과정을 수행할 수 있다.

편집 영역 레이어(520)는 어느 DOM 요소든 편집 영역이 될 수 있다. 편집 영역 레이어(520)는 입력 버퍼 레이어를 통하여 전달된 입력 장치와 관련하여 발생한 인터랙션 정보를 편집 데이터 모델을 통하여 모델링할 수 있다. 이때, 편집 영역 레이어(520)는 커스터마이징의 자유도를 높이기 위해 실제 모델링된 데이터를 렌더링하는 것은 데이터 편집을 수행하는 측에서 직접 구현하도록 할 수 있다. 편집 영역 레이어(520)는 키 입력 이벤트를 통하여 발생하는 인터랙션 정보가 발생하는 위치 정보를 편집 데이터 모델에 대응하는 요소에 클래스와 id를 포함하는 클래스 셀릭터를 추가할 수 있다.

가상 커서 레이어(530)는 입력 가능한 위치 정보와 선택 영역을 표현하는 처리를 수행할 수 있다. 가상 커서 레이어(530)는 편집 영역 레이어의 위에 깜박이는 캐럿 혹은 블록 영역을 커서 정보로 표시할 수 있다. 가상 커서 레이어(530)는 편집 영역 레이어(530)에서 실제로 사용자가 입력 정보를 입력하고 있는 지점과 관련된 위치 정보를 인지할 수 있다. 가상 커서 레이어(530)는 편집 영역 레이어(520)에서 입력 장치를 통하여 인터랙션 정보가 발생함에 따라 선택 정보 모델을 모델링할 수 있다.

가상 커서 레이어(510)는 실제 DOM 요소를 이용하여 표시할 수 있다. 편집 영역 레이어(520)에서 발생하는 인터랙션 정보를 감지하여 편집 중인 위치 정보를 선택 정보 모델을 통하여 모델링할 수 있다. 가상 커서 레이어(510)는 편집 중인 위치 정보를 브라우저 화면에 대응하는 화면 위치 정보로 계산하고, 계산된 화면 위치 정보에 해당하는 편집 영역 레이어에 커서 정보를 중첩시켜 노출시킬 수 있다. 가상 커서 레이어(510)는 선택 정보 모델의 시작 지점과 종료 지점이 일치할 경우, 커서 정보를 캐럿 형태로 노출시키고, 선택 정보 모델의 시작 지점과 종료 지점이 일치하지 않을 경우, 블랙 영역 형태로 노출시킬 수 있다. 이때, 캐럿 형태의 커서의 경우, DOM 요소를 주기적 또는 비주기적으로 쇼/하이드(show/hide)하여 깜박이는 커서로 표현할 수 있다. 블록 영역은 블록 영역 형태의 커서 정보를 선택 정보 모델의 시작 지점과 종료 지점 사이에 차지하는 영역을 계산하여 투명도와 색상 정보를 포함하는 DOM 요소를 편집 영역 레이어에 노출되도록 표현할 수 있다.

도 7 내지 도 9는 일 실시예에 있어서, 브라우저에 데이터 모델을 렌더링하는 것을 설명하기 위한 예이다.

브라우저 환경에 따라 데이터 모델을 렌더링하는 것을 설명하기 앞서, 편집 데이터 모델에 대하여 설명하기로 한다.

편집 데이터 모델은 텍스트 데이터와 상기 이미지 데이터를 포함하는 입력 요소를 확장 또는 축소된 형태로 구분할 수 있다. 예를 들면, 편집 데이터 모델은 복합요소 표현을 위하여 편집된 데이터를 실제 단위 텍스트까지 4depth로 구성될 수 있다. 편집 데이터 모델은 최상단부터 컴포넌트(component) -> 유닛(unit) -> 문단(paragraph) -> 텍스트 노드(textnode)로 구분할 수 있다. 컴포넌트는 텍스트 데이터 및 이미지 데이터를 포함하는 복합적인 것들을 표현하기 위한 하나의 단위를 의미할 수 있다. 다시 말해서, 컴포넌트를 복합요소의 최상위개체로 정의할 수 있으며, 복수 개의 컴포넌트가 생성될 수 있다. 유닛은 컴포넌트의 하위 레벨 구분 개체로서, 텍스트 영역이 될 수도 있고, 이미지 영역이 될 수도 있다. 예를 들면, 캡션을 갖는 이미지를 하나의 컴포넌트로 정의함에 따라 이미지와 캡션은 각각 유닛이 될 수 있다. 문단은 단락을 구분하는 개체로서, 텍스트에 해당하는 유닛 내에서 단락을 구분하는 용도이다. 텍스트 노드는 단위 텍스트 개체로서, 서로 상이한 스타일을 갖는 단위 텍스트들을 구분할 수 있다.

편집 데이터 모델에서 캡션 이미지 컴포넌트는 도 7의 DATA 부분과 같이 정의될 수 있다. 이와 같이, 편집 데이터 모델에 저장된 인터랙션 정보는 JSON 형태의 구조로 데이터화되어 전자 기기에 저장될 수 있다. 사용자는 JSON 형태의 구조로 저장된 데이터를 브라우저 환경에 따라 변환하여 렌더링할 수 있다. 예를 들면, DATA 부분과 같이 정의된 캡션 이미지 컴포넌트를 HTML로 변환하여 브라우저 화면에 렌더링될 수 있다. 이에, 맨 오른쪽 도면과 같이 브라우저 화면이 노출될 수 있다.

또한, 텍스트 노드가 상이한 스타일을 갖는 경우, 도 8과 같이 스타일이 다른 텍스트 노드를 표현할 수 있다. 다시 말해서, 텍스트 데이터의 굵기, 크기, 색깔, 글씨체(폰트) 등의 스타일을 편집할 수 있다. 예를 들면, 도 8의 DATA 부분과 같이, 편집 데이터 모델에 정의된 복합요소 표현에 기초하여 편집 데이터 모델에 텍스트 데이터를 굵고, 빨간색이 표시되도록 설정될 수 있다. 편집 데이터 모델에 저장된 인터랙션 정보는 JSON 형태의 구조로 데이터화되어 전자 기기에 저장될 수 있다. 예를 들면, DATA 부분과 같이 다른 텍스트 노드의 표현에 대하여 HTML로 변환하여 브라우저 화면에 렌더링될 수 있다. 이에, 맨 오른쪽 도면과 같이 서로 다른 스타일이 적용된 텍스트 노드가 표현된 브라우저 화면이 노출될 수 있다.

이와 같이, 전자 기기에 저장된 JSON 형태의 편집 데이터 모델에 구조화된 데이터를 이용하여 브라우저 환경에 따라 별도의 변환 과정이 수행됨으로써 인터랙션 정보가 브라우저 화면에 렌더링될 수 있다.

편집 데이터 모델의 최종 편집 데이터는 DomainData=[component1, component2, ...];과 같은 형태의 컴포넌트의 배열로 완성될 수 있다. 편집 데이터 모델에서 컴포넌트를 어떻게 정의하느냐에 따라 템플릿이 결정될 수 있어 컴포넌트의 조합에 따라 다양한 템플릿이 구성될 수 있고, 구성된 템플릿으로 브라우저 화면에 렌더링될 수 있다.

선택 정보 모델은 편집 데이터 모델을 기준으로 선택된 영역을 표현하기 위한 모델이다. 인터랙션 정보와 관련하여 편집 중인 시작 지점과 종료 지점을 포함하는 위치 정보로 구성될 수 있다. 이러한 각 지점을 컴포넌트, 유닛, 문단, 텍스트 노드 및 오프셋(offset) 정보를 포함할 수 있다.

도 7에서 설명하였던, 캡션 이미지 컴포넌트의 캡션에 존재하는 커서 정보를 포함하는 선택 정보 모델을 도 9와 같이 표현할 수 있다. 도 9를 참고하면, 캐럿 형태, 텍스트 영역이 선택되었을 때, 컴포넌트가 선택되었을 때의 커서 정보를 설명하기 위한 예이다. 일례로, 가상 커서 레이어는 편집 영역 레이어에서 발생하는 인터랙션 정보를 감지하여 편집중인 위치 정보를 선택 정보 모델을 통하여 갱신하고, 갱신된 선택 정보 모델로부터 커서 정보를 렌더링할 수 있다. 이때, 선택 정보 모델에 저장된 인터랙션 정보와 관련된 위치 정보는 JSON 형태의 구조로 데이터화되어 전자 기기에 저장될 수 있다.

구체적으로, 편집 중인 위치 정보가 브라우저 화면에 대응하는 화면 위치 정보로 계산되고, 계산된 화면 위치 정보에 해당하는 편집 영역 레이어에 커서 정보가 노출될 수 있다. 도 7에서 설명하였던 캡션 이미지 컴포넌트의 맨 앞에 커서 정보가 노출된 브라우저 화면이 렌더링될 수 있다. 이때, 브라우저 화면에 선택 정보 모델의 시작 지점과 종료 지점이 일치할 경우, 커서 정보가 캐럿 형태로 노출될 수 있다. 이때 캐럿 형태의 커서 정보가 캡션 이미지 컴포넌트의 맨 앞에 주기적으로 또는 비주기적으로 깜박거리게 된다. 예를 들면, CSS 조절을 통하여 캐럿 형태의 커서 정보를 쇼(show)/하이드(hide)를 반복적으로 동작시킴으로써 깜박이는 커서를 표현할 수 있다.

또한, 선택 정보 모델의 시작 지점과 종료 지점이 일치할지 않을 경우, 커서 정보가 블럭 영역 형태로 노출될 수 있다. 예를 들면, 블록 영역 형태의 커서 정보를 시작 지점과 종료 지점 사이에 차지하는 영역을 계산하여 투명도와 색상 정보를 포함하는 DOM 요소가 편집 영역 레이어에 노출되도록 표현될 수 있다. 예를 들면, 블록 영역은 반투명한 파란색으로 표시될 수 있다. 도 9와 같이, 브라우저 화면에서 '이미지 캡션' 이라고 기재된 텍스트 영역이 선택될 경우, '이미지 캡션'이라고 기재된 텍스트 영역에 블록 영역 형태의 커서 정보가 생성될 수 있다. 이때, 텍스트 영역에 블록 영역 형태의 커서 정보가 생성될 경우, 브라우저 화면에 텍스트 영역에 해당하는 일부 영역이 블록 영역 형태의 커서 정보로 표시될 수 있다.

또한, 브라우저 화면에서 컴포넌트가 선택될 경우, 컴포넌트 영역에 블록 영역 형태의 커서 정보가 생성될 수 있다. 이때, 컴포넌트 영역에 블록 영역 형태의 커서 정보가 생성될 경우, 브라우저 화면에 컴포넌트에 해당하는 전체 영역이 블록 영역 형태의 커서 정보로 표시될 수 있다.

이상에서 설명된 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 장치 및 구성요소는, 예를 들어, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPGA(field programmable gate array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 애플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리 요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 가상 장치(virtual equipment), 컴퓨터 저장 매체 또는 장치에 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.

실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 실시예를 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다.

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.

Claims (19)

1. 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법에 있어서,
   데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계;
   상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및
   상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계
   를 포함하고,
   상기 적어도 하나 이상의 레이어를 구성하는 단계는,
   데이터의 입력을 담당하는 입력 버퍼 레이어, 입력 장치와의 인터랙션을 통하여 데이터의 출력을 담당하는 편집 영역 레이어 및 입력 가능한 위치 정보와 선택된 영역을 표시하는 가상 커서 레이어를 구성하는 단계
   를 포함하는 가상 입력 방법.
2. 삭제
3. 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법에 있어서,
   데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계;
   상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및
   상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계
   를 포함하고,
   상기 데이터 모델을 정의하는 단계는,
   상기 구성된 적어도 하나 이상의 레이어를 통하여 텍스트 데이터와 이미지 데이터를 포함하는 입력 요소를 표현하기 위한 편집 데이터 모델 및 상기 편집 데이터 모델을 기준으로 선택된 영역을 표현하기 위한 선택 정보 모델을 포함하는 데이터 모델을 정의하는 단계
   를 포함하는 가상 입력 방법.
4. 제3항에 있어서,
   상기 편집 데이터 모델은,
   상기 텍스트 데이터와 상기 이미지 데이터를 포함하는 입력 요소를 확장 또는 축소된 형태로 구분하는
   가상 입력 방법.
5. 제3항에 있어서,
   상기 선택 정보 모델은,
   상기 선택된 영역의 시작 지점과 종료 지점을 포함하는 위치 정보로 구성되고, 상기 시작 지점 및 상기 종료 지점을 컴포넌트(component), 유닛(unit), 문단(paragraph), 텍스트 노드(text node) 및 오프셋(offset) 정보로 구분하는
   가상 입력 방법.
6. 제1항에 있어서,
   상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
   입력 요소를 가지는 프레임이 생성됨에 따라 입력 장치를 통하여 브라우저에 노출된 편집 영역에서 선택된 키 입력 정보를 수신하고, 상기 수신된 키 입력 정보를 핸들링하기 위한 브라우저의 포커스를 상기 입력 버퍼 레이어로 이동시키는 단계
   를 포함하는 가상 입력 방법.
7. 제6항에 있어서,
   상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
   상기 입력 버퍼 레이어에서 상기 입력 장치로부터 수신된 키 입력 정보를 상기 편집 영역 레이어의 DOM 객체로 전달하는 단계
   를 포함하는 가상 입력 방법.
8. 제7항에 있어서,
   상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
   상기 편집 영역 레이어에서 상기 입력 버퍼 레이어로부터 입력 장치를 통하여 입력된 키 입력 정보를 수신하고, 상기 수신된 키 입력 정보를 통하여 발생하는 인터랙션 정보를 편집 데이터 모델로 모델링하고, 상기 모델링된 편집 데이터 모델로부터 상기 편집 영역 레이어를 렌더링하는 단계
   를 포함하는 가상 입력 방법.
9. 제8항에 있어서,
   상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
   상기 인터랙션 정보가 발생하는 위치 정보를 편집 데이터 모델에 대응하는 요소에 클래스 셀렉터를 추가하는 단계
   를 포함하는 가상 입력 방법.
10. 제8항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 가상 커서 레이어에서 상기 편집 영역 레이어에서 발생하는 인터랙션 정보를 감지하여 편집중인 위치 정보를 선택 정보 모델을 통하여 갱신하고, 상기 갱신된 선택 정보 모델로부터 상기 가상 커서 레이어를 렌더링하는 단계
    를 포함하는 가상 입력 방법.
11. 제10항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 편집 중인 위치 정보를 브라우저 화면에 대응하는 화면 위치 정보로 계산하고, 상기 계산된 화면 위치 정보에 해당하는 상기 편집 영역 레이어에 커서 정보를 노출시키는 단계
    를 포함하는 가상 입력 방법.
12. 제11항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 선택 정보 모델의 시작 지점과 종료 지점이 일치할 경우, 상기 커서 정보를 캐럿 형태로 노출시키고, 상기 선택 정보 모델의 시작 지점과 종료 지점이 일치하지 않을 경우, 상기 커서 정보를 블럭 영역 형태로 노출시키는 단계
    를 포함하는 가상 입력 방법.
13. 제12항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 캐럿 형태의 커서 정보를 주기적으로 깜박이도록 표현하고, 상기 블럭 영역 형태의 커서 정보를 상기 시작 지점과 상기 종료 지점 사이에 차지하는 영역을 계산하여 투명도와 색상 정보를 포함하는 DOM 요소를 상기 편집 영역 레이어에 노출되도록 표현하는 단계
    를 포함하는 가상 입력 방법.
14. 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법에 있어서,
    데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계;
    상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및
    상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계
    를 포함하고,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 JSON 형태의 구조로 데이터화하여 저장하는 단계
    를 포함하는 가상 입력 방법.
15. 제14항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 저장된 JSON 형태의 구조로 데이터화된 인터랙션 정보를 브라우저 환경에 따라 변환하여 편집 영역 레이어에 렌더링하는 단계
    를 포함하는 가상 입력 방법.
16. 제8항에 있어서,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    상기 인터랙션 정보를 상기 편집 데이터 모델에 기초하여 모델링함에 따라 템플릿을 구성하는 단계
    를 포함하는 가상 입력 방법.
17. 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법에 있어서,
    데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계;
    상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및
    상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계
    를 포함하고,
    상기 브라우저의 환경에 기초하여 렌더링하는 단계는,
    입력 장치를 통하여 브라우저에 노출된 편집 영역 레이어에서 선택된 키 입력 정보와 관련된 인터랙션 정보를 상기 정의된 데이터 모델에 모델링하는 단계
    를 포함하는 가상 입력 방법.
18. 컴퓨터로 구현되는 전자 기기에 의해 수행되는 가상 입력 방법을 실행시키기 위하여 컴퓨터 판독 가능한 저장매체에 저장된 컴퓨터 프로그램에 있어서,
    상기 가상 입력 방법은,
    데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 단계;
    상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 단계; 및
    상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 단계
    를 포함하고,
    상기 적어도 하나 이상의 레이어를 구성하는 단계는,
    데이터의 입력을 담당하는 입력 버퍼 레이어, 입력 장치와의 인터랙션을 통하여 데이터의 출력을 담당하는 편집 영역 레이어 및 입력 가능한 위치 정보와 선택된 영역을 표시하는 가상 커서 레이어를 구성하는 단계
    를 포함하는 컴퓨터 판독 가능한 저장매체에 저장된 컴퓨터 프로그램.
19. 컴퓨터로 구현되는 전자 기기의 가상 입력 시스템에 있어서,
    데이터 편집을 위한 속성 정보가 부여된 적어도 하나 이상의 레이어를 구성하는 레이어 구성부;
    상기 구성된 적어도 하나 이상의 레이어에서 인식된 입력 정보를 저장하는 데이터 모델을 정의하는 데이터 모델 정의부; 및
    상기 정의된 데이터 모델을 통하여 모델링된 데이터 편집과 관련된 인터랙션 정보를 브라우저의 환경에 기초하여 렌더링하는 렌더링부
    를 포함하고,
    상기 레이어 구성부는, 데이터의 입력을 담당하는 입력 버퍼 레이어, 입력 장치와의 인터랙션을 통하여 데이터의 출력을 담당하는 편집 영역 레이어 및 입력 가능한 위치 정보와 선택된 영역을 표시하는 가상 커서 레이어를 구성하는 전자 기기의 가상 입력 시스템.
    

Images