KR102679462B1 - 전자 장치 및 그의 사용자 인터페이스를 제공하는 방법 - Google Patents

Abstract

본 개시의 일 실시예에 따른 전자 장치에서 사용자 인터페이스를 제공하는 방법은, 제1 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 제1 데이터를 획득하는 단계, 상기 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환하는 단계, 상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계 및 상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하는 단계를 포함할 수 있다.

Description

전자 장치 및 그의 사용자 인터페이스를 제공하는 방법{ELECTRONIC DEVICE AND METHOD OF PROVIDING USER INTERFACE THEREOF}

본 개시는 전자 장치 및 그의 사용자 인터페이스를 제공하는 기술에 관한 것이다.

기술 발전에 따라 전자 상거래는 쇼핑을 비롯한 다양한 서비스를 제공할 수 있게 되었다. 고객은 직접 쇼핑몰이나 시장에 가지 않고도 온라인 상에서 상품을 구매할 수 있다. 전자 상거래 서비스와 관련한 시스템은 다양한 상품들을 온라인 상점에 등록하고, 온라인 상점을 통해 거래를 중개한다. 고객은 휴대용 단말 장치(예: 스마트폰, 태블릿 PC)를 이용하여, 온라인 상점에 관한 애플리케이션에 접속하고, 해당 애플리케이션에서 원하는 상품을 거래할 수 있다.

종래에는 온라인 상점에 관한 애플리케이션 화면을 구성하기 위하여, 개발자가 화면과 관련된 사용자 인터페이스(user interface, UI)를 코딩하고 있다. 백엔드 서버에서 화면과 관련된 코딩을 작성한 경우, 코딩에 대응하는 화면을 확인하기 위해서는, 애플리케이션으로 코드를 배포한 후, 애플리케이션을 통해(즉, 앱 단에서) 코딩의 결과물인 화면을 확인해야 하였다. 즉, 화면에 대한 코드가 제대로 작성되었는지 확인하기 위해서는 항상 애플리케이션으로 배포하여야만 했다. 구체적으로, 애플리케이션 단(App-side)에서 사용자 인터페이스를 표기하기 위해서는 게이트웨이를 통해 도메인 서버로 http를 호출해야 된다. 이후, 서버로부터 게이트웨이를 통해 호출에 대응하는 JSON 형식의 데이터(파일)를 수신한다. 애플리케이션은 JSON 형식의 데이터에 포함된 컴포넌트 및 내용을 확인하고, 이에 대응하는 컴포넌트 속성 및 라이브러리를 호출한다. 즉, 코드를 실시간으로 시뮬레이션하기 어렵다는 문제가 있다.

또는, 가상의 기기를 이용하여 화면을 시뮬레이션하는 방법이 사용될 수도 있는데, 구체적으로, 가상의 기기를 생성하고, 가상의 기기를 통해 화면을 시뮬레이션하는 방식을 사용할 수 있다. 상기의 경우, 가상의 기기를 생성해야만 한다는 번거로움이 있다.

본 개시의 일 실시예에 따르면, 화면을 구성하는 사용자 인터페이스를 코딩하는 경우, 작성한 코드에 대응하는 사용자 인터페이스를 실시간으로 확인할 수 있도록 하는 것을 기술적 해결 과제로 한다.

본 개시의 일 실시예에 따르면, 사용자가 작성한 코드와 코드에 대응하는 사용자 인터페이스를 한 화면에서 표시할 수 있도록 하는 것을 기술적 해결 과제로 한다.

본 개시의 일 실시예에 따르면, 복수의 단말에게 동시에 렌더링 서비스를 제공하는 것을 기술적 해결 과제로 한다.

본 개시의 일 실시예에 따른 전자 장치에서 사용자 인터페이스를 제공하는 방법은, 제1 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 제1 데이터를 획득하는 단계; 상기 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환하는 단계; 상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계; 및 상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하는 단계를 포함할 수 있다.

일 실시예에 따른 상기 하나 이상의 사용자 인터페이스를 렌더링하는 단계는, 상기 제2 형식의 제1 데이터에 포함된 하나 이상의 컴포넌트를 식별하는 단계; 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성하는 단계; 및 상기 하나 이상의 이미지에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계를 포함할 수 있다.

일 실시예에 따른 상기 하나 이상의 컴포넌트에 대응하는 상기 하나 이상의 이미지를 생성하는 단계는, 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 라이브러리를 호출하는 단계; 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 표시 속성을 호출하는 단계; 및 상기 하나 이상의 라이브러리 및 상기 하나 이상의 표시 속성에 기초하여, 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성하는 단계를 포함할 수 있다.

일 실시예에 따른 상기 전자 장치의 메모리에는, 상기 제2 형식에 관한 복수의 컴포넌트, 상기 복수의 컴포넌트에 대응하는 복수의 라이브러리 및 상기 복수의 컴포넌트에 대응하는 복수의 표시 속성이 저장될 수 있다.

일 실시예에 따른 상기 하나 이상의 이미지에 대응하는 상기 하나 이상의 사용자 인터페이스를 렌더링하는 단계는, 상기 제1 단말의 운영체제를 확인하는 단계; 및 상기 확인한 운영체제에 적합하고, 상기 하나 이상의 이미지에 대응하는 상기 하나 이상의 사용자 인터페이스를 렌더링하는 단계를 포함할 수 있다.

일 실시예에 따르면, 상기 제1 형식의 제1 데이터는 JSON 데이터이고, 상기 제2 형식의 제1 데이터는 DTO 데이터일 수 있다.

일 실시예에 따르면 상기 화면을 구성하기 위한 코드는, 하나 이상의 JSON 스키마를 이용하여 생성된 코드인, 제공하는 방법.

일 실시예에 따르면 상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하는 단계는, 상기 코드를 표시하기 위한 제1 영역 및 상기 하나 이상의 사용자 인터페이스를 표시하기 위한 제2 영역을 포함하는 페이지를 상기 제1 단말로 제공하는 단계를 더 포함할 수 있다.

일 실시예에 따른 상기 제1 단말로 상기 렌더링된 하나 이상의 사용자 인터페이스를 제공하는 도중에, 제2 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식의 제2 데이터를 획득하는 단계; 상기 제1 형식의 제2 데이터를 제2 형식의 제2 데이터로 전환하는 단계; 상기 제2 형식의 제2 데이터에 포함된 상기 코드에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계; 및 상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제2 단말로 제공하는 단계를 더 포함할 수 있다.

본 개시의 일 실시예에 따른 전자 장치는, 통신 회로; 메모리; 및 프로세서를 포함하고, 상기 프로세서는, 제1 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 제1 데이터를 획득하고, 상기 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환하고, 상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하고, 상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하도록 구성될 수 있다.

본 개시의 일 실시예에 따른 기록매체는, 전자 장치에서 사용자 인터페이스를 제공하는 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 비일시적 기록매체일 수 있다.

본 개시의 일 실시예에 따르면, 화면을 구성하는 사용자 인터페이스를 코딩하는 경우, 작성한 코드에 대응하는 사용자 인터페이스를 실시간으로 시뮬레이션함으로써, 신속히 확인할 수 있다.

본 개시의 일 실시예에 따르면, 사용자가 작성한 코드와 코드에 대응하는 사용자 인터페이스를 한 화면에서 표시할 수 있다.

본 개시의 일 실시예에 따르면, 복수의 단말에게 동시에 렌더링 서비스를 제공할 수 있다.

도 1은 본 개시의 일 실시예에 따른 시스템을 도시한 도면이다.
도 2는 본 개시의 일 실시예에 따른 전자 장치를 도시한 도면이다.
도 3a 및 3b는 본 개시의 일 실시예에 따른 전자 장치의 소프트웨어 모듈에 대한 모식도이다.
도 4는 본 개시의 일 실시예에 따른 사용자 인터페이스를 렌더링하는 방법을 설명하기 위한 모식도이다.
도 5는 본 개시의 일 실시예에 따른 전자 장치의 처리 흐름도이다.
도 6a 및 6b는 일 실시예에 따른 편집기의 화면을 도시한 도면이다.

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

명세서 전체에서 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 "...부", "...모듈" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.

명세서 전체에서 기재된 "a, b, 및 c 중 적어도 하나"의 표현은, 'a 단독', 'b 단독', 'c 단독', 'a 및 b', 'a 및 c', 'b 및 c', 또는 'a,b,c 모두'를 포괄할 수 있다.

이하에서 언급되는 "단말"은 네트워크를 통해 서버나 타 단말에 접속할 수 있는 컴퓨터나 휴대용 단말로 구현될 수 있다. 여기서, 컴퓨터는 예를 들어, 웹 브라우저(WEB Browser)가 탑재된 노트북, 데스크톱(desktop), 랩톱(laptop) 등을 포함하고, 휴대용 단말은 예를 들어, 휴대성과 이동성이 보장되는 무선 통신 장치로서, IMT(International Mobile Telecommunication), CDMA(Code Division Multiple Access), W-CDMA(W-Code Division Multiple Access), LTE(Long Term Evolution) 등의 통신 기반 단말, 스마트폰, 태블릿 PC 등과 같은 모든 종류의 핸드헬드(Handheld) 기반의 무선 통신 장치를 포함할 수 있다.

아래에서는 첨부한 도면을 참고하여 본 개시의 실시 예에 대하여 본 개시가 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 개시는 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시 예에 한정되지 않는다.

이하, 본 발명의 실시 예를 첨부된 도면을 참조하여 상세하게 설명한다.

실시 예를 설명함에 있어서 본 발명이 속하는 기술 분야에 익히 알려져 있고 본 발명과 직접적으로 관련이 없는 기술 내용에 대해서는 설명을 생략한다. 이는 불필요한 설명을 생략함으로써 본 발명의 요지를 흐리지 않고 더욱 명확히 전달하기 위함이다.

마찬가지 이유로 첨부 도면에 있어서 일부 구성요소는 과장되거나 생략되거나 개략적으로 도시되었다. 또한, 각 구성요소의 크기는 실제 크기를 전적으로 반영하는 것이 아니다. 각 도면에서 동일한 또는 대응하는 구성요소에는 동일한 참조 번호를 부여하였다.

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

이 때, 처리 흐름도 도면들의 각 블록과 흐름도 도면들의 조합들은 컴퓨터 프로그램 인스트럭션들에 의해 수행될 수 있음을 이해할 수 있을 것이다. 이들 컴퓨터 프로그램 인스트럭션들은 범용 컴퓨터, 특수용 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비의 프로세서에 탑재될 수 있으므로, 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비의 프로세서를 통해 수행되는 그 인스트럭션들이 흐름도 블록(들)에서 설명된 기능들을 수행하는 수단을 생성하게 된다. 이들 컴퓨터 프로그램 인스트럭션들은 특정 방식으로 기능을 구현하기 위해 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비를 지향할 수 있는 컴퓨터 이용 가능 또는 컴퓨터 판독 가능 메모리에 저장되는 것도 가능하므로, 그 컴퓨터 이용가능 또는 컴퓨터 판독 가능 메모리에 저장된 인스트럭션들은 흐름도 블록(들)에서 설명된 기능을 수행하는 인스트럭션 수단을 내포하는 제조 품목을 생산하는 것도 가능하다. 컴퓨터 프로그램 인스트럭션들은 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비 상에 탑재되는 것도 가능하므로, 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비 상에서 일련의 동작 단계들이 수행되어 컴퓨터로 실행되는 프로세스를 생성해서 컴퓨터 또는 기타 프로그램 가능한 데이터 프로세싱 장비를 수행하는 인스트럭션들은 흐름도 블록(들)에서 설명된 기능들을 실행하기 위한 단계들을 제공하는 것도 가능하다.

또한, 각 블록은 특정된 논리적 기능(들)을 실행하기 위한 하나 이상의 실행 가능한 인스트럭션들을 포함하는 모듈, 세그먼트 또는 코드의 일부를 나타낼 수 있다. 또, 몇 가지 대체 실행 예들에서는 블록들에서 언급된 기능들이 순서를 벗어나서 발생하는 것도 가능함을 주목해야 한다. 예컨대, 잇달아 도시되어 있는 두 개의 블록들은 사실 실질적으로 동시에 수행되는 것도 가능하고 또는 그 블록들이 때때로 해당하는 기능에 따라 역순으로 수행되는 것도 가능하다.

도 1은 본 개시의 일 실시예에 따른 시스템(10)을 도시한 도면이다. 본 문서에 개시된 시스템(10)은 전자 상거래 서비스를 운영 및 제공하기 위한 시스템(10)일 수 있다. 전자 상거래 서비스는 온라인 상에서 판매자와 구매자를 중개하여, 상품을 사고 파는 온라인 스토어 서비스일 수 있다. 일 실시예에 따른 시스템(10)은, 전자 장치(100) 및 사용자의 단말(terminal)(200)을 포함할 수 있다.

일 실시예에 따른 전자 장치(100)는 전자 상거래 서비스를 운용하기 위한 서버(server)일 수 있다. 전자 장치(100)는 애플리케이션 프로세스와 관련된 서버 단(server-side)과 데이터베이스를 관리해주는 백엔드(back-end) 서버일 수도 있다. 전자 장치(100)는 온라인 스토어 서비스를 운용하기 위한 다양한 프로그램(소프트웨어)을 관리할 수 있다. 전자 장치(100)는 사용자의 단말(200)과 통신 연결되어 다양한 정보를 송수신할 수 있다. 전자 장치(100)는 애플리케이션과 관련된 다양한 정보를 단말로부터 획득하고, 이를 다른 장치에 제공할 수도 있다.

일 실시예에 따른 사용자의 단말(200)은 개발자의 단말 장치일 수 있다. 개발자인 사용자는 단말(200)을 이용하여, 화면을 구성하기 위한 코드를 작성할 수 있다. 사용자는 단말(200)을 통해 서버에 접속하고, 서버에서 제공하는 편집기(editor)를 이용하여 코딩을 수행할 수 있다. 편집기는 사용자 인터페이스에 대응하는 코드를 작성 및 편집하는 프로그램일 수 있다. 편집기는, 예를 들어, JSON 데이터 모델(또는 JSON 데이터)을 직접 편집하는 코드(code) 편집기일 수도 있고, 데이터 모델의 JSON 스키마(schema)를 이용하여 편집하는 JSON 스키마 기반의 편집기일 수도 있다. JSON 스키마 기반의 편집기를 사용하는 경우, 사용자는 각 데이터 모델의 유효 값과 속성을 기억할 필요가 없다. 즉, 사용자는 JSON 형식의 복수의 데이터 모델을 이용하여 코드를 작성할 수 있기 때문에, XML 레이아웃을 사용할 필요가 없다.

종래의 경우, 단말에서 사용자 인터페이스를 렌더링하기 위해서는, 단말에서 서버로 JSON 형식의 데이터 모델의 검색을 요청하고, 서버로부터의 응답을 구문 분석해야만 하였다. 본 개시의 일 실시예에 따르면, 전자 장치의 RDS 플레이그라운드에서 JSON 형식의 데이터 모델을 직접 검색할 수 있기 때문에, 외부 장치에게 요청을 하거나 외부 장치로부터의 응답을 분석할 필요가 없다.

본 도면에서는 설명의 편의를 위하여, 사용자의 단말(200)의 개수를 1개로 도시하였지만, 사용자의 단말(200)은 2개 이상 존재할 수도 있다.

도 2는 본 개시의 일 실시예에 따른 전자 장치(100)를 도시한 도면이다. 일 실시예에 따른 전자 장치(100)는 프로세서(110), 메모리(120) 및 통신 회로(130)를 포함할 수 있다. 전자 장치(100)에 포함된 구성요소들 중 적어도 하나가 생략되거나, 다른 구성요소가 전자 장치(100)에 추가될 수 있다. 추가적으로 또는 대체적으로 일부의 구성요소들이 통합되어 구현되거나, 단수 또는 복수의 개체로 구현될 수도 있다. 전자 장치(100) 내의 적어도 일부의 구성요소들이 통합되어 구현되거나, 단수 또는 복수의 개체로 구현될 수도 있다. 전자 장치(100) 내의 적어도 일부 구성요소들은 버스(bus), GPIO(general purpose input/output), SPI(serial peripheral interface) 또는 MIPI(mobile industry processor interface) 등을 통해 서로 연결되어, 데이터 및/또는 시그널을 주고 받을 수 있다.

일 실시예에 따른 전자 장치(100)의 프로세서(110)는 전자 장치(100)의 각 구성요소들의 제어 및/또는 통신에 관한 연산이나 데이터 처리를 수행할 수 있는 구성으로서, 전자 장치(100)의 구성요소들과 작동적으로 연결될 수 있다. 프로세서(110)는 전자 장치(100)의 다른 구성 요소들로부터 수신된 명령 또는 데이터를 메모리(120)에 로드하고, 메모리(120)에 저장된 명령 또는 데이터를 처리하며, 결과 데이터를 저장할 수 있다. 특별한 사정이 없는 한, 본 개시에서 프로세서(110)는 하나 이상의 프로세서(110)의 집합을 의미할 수 있다.

일 실시예에 따른 전자 장치(100)의 메모리(120)는 적어도 하나의 구성요소(예: 프로세서(110))에 의해 사용되는 다양한 데이터를 저장할 수 있다. 메모리(120)는 상기에 기재된 프로세서(110)의 동작에 대한 인스트럭션들을 저장할 수 있다. 프로그램은 메모리(120)에 소프트웨어로서 저장될 수 있으며, 예를 들어, 운영체제, 미들 웨어 또는 애플리케이션을 포함할 수 있다. 특별한 사정이 없는 한, 본 개시에서 메모리(120)는 하나 이상의 메모리(120)의 집합을 의미할 수 있다.

일 실시예에 따른 전자 장치(100)의 통신 회로(130)는 외부 장치(예: 사용자의 단말(200))과 유선 또는 무선 통신 채널을 설립하고, 외부 장치와 다양한 데이터를 송수신할 수 있다. 전자 장치(100)의 통신 회로(130)는 외부 장치와 유선으로 통신하기 위하여, 외부 장치와 유선 케이블로 연결되기 위한 적어도 하나의 포트를 포함할 수 있다. 전자 장치(100)의 통신 회로(130)는 셀룰러 통신 모듈을 포함하여 셀룰러 네트워크(예: 3G, LTE, 5G, Wibro 또는 Wimax)에 연결되도록 구성할 수 있다. 일 실시예에 따르면, 전자 장치(100)의 통신 회로(130)는 근거리 통신 모듈을 포함하여 근거리 통신(예를 들면, Wi-Fi, Bluetooth, Bluetooth Low Energy(BLE), UWB)을 이용해 외부 장치와 데이터 송수신을 할 수 있으나, 이에 제한되지 않는다.

도 3a 및 3b는 본 개시의 일 실시예에 따른 전자 장치(100)의 소프트웨어 모듈에 대한 모식도이다. 구체적으로, 도 3a는 제1 운영체제에 적합한 화면을 렌더링할 수 있는 전자 장치(100)의 소프트웨어 모듈(300a)에 대한 블록도이고, 도 3b는 제2 운영체제에 적합한 화면을 렌더링할 수 있는 전자 장치(100)의 소프트웨어 모듈(300b)에 대한 블록도이다.

도 3a를 참조하면, 일 실시예에 따른 전자 장치(100)의 소프트웨어 모듈(300a)은 제1 운영체제를 위한 소프트웨어 모듈(300a)일 수 있다. 소프트웨어 모듈(300a)은 제1 운영체제에 적합한 화면을 시뮬레이션하기 위한 프로그램일 수 있다. 소프트웨어 모듈(300a)의 이름은, 예를 들어, RDS(rocket design system) 플레이그라운드(Playground)일 수 있다. RDS는 프로그램 이름일 수 있다. 제1 운영체제는, 예를 들어, 안드로이드 운영체제일 수 있다. 즉, 사용자는 RDS 플레이그라운드를 이용하여 코드를 쉽고 빠르게 시뮬레이션 해볼 수 있다.

일 실시예에 따른 소프트웨어 모듈(300a)은 RDS 익스텐션(Extension) 모듈(301), RDS 오픈 플랫폼(Open Platform) 모듈(303), CRDM(Common Rendering Data Model) 모듈(305), RDS 표준 라이브러리 모듈(307) 및 서드 파티 모듈(309), JetPack 모듈(311), LayoutLib 모듈(313), SpringBoot 모듈(315), 제1 운영체제 SDK 모듈(317) 및 JVM 모듈(319)을 포함할 수 있다.

일 실시예에 따른 CRDM 모듈(305)은, YAML 파일에 정의된 일련의 렌더링 데이터 모델이고, CRDM의 직렬화 또는 역직렬화를 지원하기 위한 코드를 생성하는 모듈일 수 있다. CRDM 모듈(305)은 렌더링 데이터 모델에 포함된 컴포넌트의 속성을 확인하고 가져올 수 있다.

일 실시예에 따른 RDS 오픈 플랫폼 모듈(303)은 외부 API와 같은 개방형 표준을 기반으로 하는 소프트웨어 시스템일 수 있다. 일 실시예에 따른 RDS 표준 라이브러리 모듈(307)은 RDS에서 사용되는 사용자 인터페이스 컴포넌트 라이브러리일 수 있다. 일 실시예에 따른 RDS 익스텐션 모듈(301)은, 사용자 인터페이스 컴포넌트에 CRDM을 적용하기 위한 라이브러리일 수 있다. 서드 파티 모듈(309)은 라이브러리를 만드는 외부 생산자에 관한 모듈일 수 있다.

일 실시예에 따른 JetPack 모듈(311)은 개발자가 중요한 코드에 집중할 수 있도록 권장사항 준수, 상용구 코드 감소, 여러 버전과 기기에서 일관되게 작동하는 코드 작성을 돕기 위한 라이브러리 묶음을 나타내는 모듈일 수 있다. JetPack 모듈(311)은 제1 운영체제의 여러 버전 및 제1 운영체제를 사용하는 기기에서 일관되게 작동할 수 있는 코드에 관한 라이브러리 묶음을 저장하는 모듈일 수 있다.

일 실시예에 따른 LayoutLib 모듈(313)은, 제1 운영체제 스튜디오 내에서 실행되도록 설계된 제1 운영체제 뷰(view) 프레임워크의 커스텀 버전으로서, 레이아웃 미리보기(preview)를 제공하기 위한 레이아웃 라이브러리 모듈일 수 있다. 일 실시예에 따른 SpringBoot 모듈(315)은 Spring 프레임워크를 사용하여 애플리케이션을 개발하도록 돕는 툴일 수 있다. Spring 프레임워크는 Java 애플리케이션 개발을 편하게 할 수 있도록 해주는 오픈소스 애플리케이션 프레임워크를 의미할 수 있다.

일 실시예에 따른 제1 운영체제 SDK 모듈(317)은 포괄적인 개발 도구를 포함하는 소프트웨어 개발 키트일 수 있다. 제1 운영체제 SDK 모듈(317)은, 예를 들어, 디버거, 라이브러리, QEMU 기반의 에뮬레이터, 샘플 코드 및 튜토리얼을 포함할 수 있다. 일 실시예에 따른 JVM(Java Virtual Machine) 모듈(319)은, Java로 개발한 프로그램을 컴파일하여 만들어지는 코드를 실행시키기 위한 가상 머신이다. JVM 모듈(319)은 코드 최적화와 백엔드를 담당할 수 있다.

도 3b를 참조하면, 일 실시예에 따른 전자 장치(100)의 소프트웨어 모듈(300b)은 제2 운영체제를 위한 소프트웨어 모듈(300b)일 수 있다. 소프트웨어 모듈(300b)은 제2 운영체제에 적합한 화면을 제공하기 위한 프로그램일 수 있다. 소프트웨어 모듈(300b)의 이름은, 예를 들어, RDS(rocket design system) 플레이그라운드(Playground)일 수 있다. RDS는 프로그램 이름일 수 있다. 제2 운영체제는, 예를 들어, macOS 또는 iOS 운영체제일 수 있다.

일 실시예에 따른 소프트웨어 모듈(300b)은 RDS 익스텐션 모듈(301), RDS 오픈 플랫폼 모듈(303), CRDM 모듈(305), RDS 표준 라이브러리 모듈(307) 및 서드 파티 모듈(309), UIKit 모듈(321), vapor 모듈(325), 제2 운영체제 SDK 모듈(323) 및 제2 운영체제 모듈(327)을 포함할 수 있다. 도 3a와 중복되는 구성에 대해서는 설명을 생략하기로 한다.

일 실시예에 따른 UIKit 모듈(321)은 제2 운영체제를 이용하는 애플리케이션의 사용자 인터페이스를 구현하고, 발생하는 이벤트를 관리하는 프레임워크일 수 있다. 일 실시예에 따른 vapor 모듈(325)은, 제2 운영체제의 서버를 구성하는 웹 프레임워크일 수 있다. 일 실시예에 따른 제2 운영체제 SDK 모듈(323)은 포괄적인 개발 도구를 포함하는 소프트웨어 개발 키트일 수 있다. 제2 운영체제 모듈(323)은 제2 운영체제를 이용하는 애플리케이션에게 사용자 인터페이스를 제공하는 모듈일 수 있다.

도 4는 본 개시의 일 실시예에 따른 사용자 인터페이스를 렌더링하는 방법을 설명하기 위한 모식도이다.

도 4를 참조하면, 일 실시예에 따른 편집기(410)는 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 데이터를 서버인 전자 장치(100)로 전송할 수 있다. 사용자는 단말(200)을 통해 서버에 접속하고, 서버에서 제공하는 편집기(editor)를 이용하여 코딩을 수행할 수 있다. 편집기(410)는, 예를 들어, JSON 데이터 모델(또는 JSON 데이터)을 직접 편집하는 코드 편집기일 수도 있고, 데이터 모델의 JSON 스키마를 이용하여 편집하는 JSON 스키마 기반의 편집기일 수도 있다. 즉, 사용자는 단말(200)에서 편집기(410)를 통해 화면을 구성하기 위한 코드를 입력할 수 있다. 상기의 경우, 편집기(410)는 화면을 구성하기 위한 코드를 포함하는 제1 형식의 데이터를 전자 장치(100)의 프로세서(421)(또는, 렌더링 컨트롤러)로 전송할 수 있다. 제2 형식의 데이터는 JSON 데이터(또는 JSON 파일)일 수 있다. JSON(JavaScript Object Notation) 데이터는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식에 관한 데이터이다. 즉, 사용자가 단말(200)을 통해 작성한 코드는 JSON 형식의 데이터로서 서버인 전자 장치(100)로 전송될 수 있다.

일 실시예에 따른 프로세서(110)는 전자 장치(100)에서 화면을 렌더링하기 위한 일련의 프로세스를 관리 및 처리하는 렌더링 컨트롤러일 수 있다. 프로세서(110)는 JSON 데이터를 DTO(data transfer object) 데이터로 변환할 수 있다. DTO란 계층 간 데이터 교환을 사용하는 객체로서, 네트워크 간에 데이터를 어떤 식으로 보낼지를 정의한 객체이다. 프로세서(110)는 편집기를 통해 수신한 코드를 포함하는 JSON 형식의 데이터를 DTO 형식의 데이터로 변환할 수 있다. DTO 형식의 데이터는, JSON 형식의 데이터에 포함된 객체를 캡슐화한 데이터를 의미할 수 있다. 프로세서(110)는 DTO 형식의 데이터를 렌더링 서비스 모듈(422)로 전송할 수 있다.

일 실시예에 따른 렌더링 서비스 모듈(422)은 DTO 형식의 데이터를 수신하고, DTO 형식의 데이터에 대하여 비즈니스 로직을 처리할 수 있다. 렌더링 서비스 모듈(422)은 해당 데이터에 포함된 컴포넌트 및 라이브러리를 확인할 수 있다. 렌더링 서비스 모듈(422)은 CREM 모듈 및 RDS 익스텐션 모듈로부터 가져온 속성 및 라이브러리에 기초하여, 뷰(view)를 생성할 수 있다.

일 실시예에 따른 RDS 익스텐션 모듈(423)은, 사용자 인터페이스 컴포넌트에 CRDM을 적용하기 위한 라이브러리일 수 있다. 일 실시예에 따른 RDS 모듈(425)은 RDS에서 사용되는 사용자 인터페이스 컴포넌트 라이브러리일 수 있다. 일 실시예에 따른 CRDM 모듈(424)은, YAML 파일에 정의된 일련의 렌더링 데이터 모델이고, CRDM의 직렬화 또는 역직렬화를 지원하기 위한 코드를 생성하는 모듈일 수 있다. CRDM 모듈(424)은 렌더링 데이터 모델에 포함된 컴포넌트의 속성을 확인하고 가져올 수 있다.

일 실시예에 따른 렌더러 모듈(426)은 렌더링 서비스 모듈(422)로부터 받은 뷰에 대응하는 사용자 인터페이스를 렌더링할 수 있다. 일 실시예에 따른 Java AWT 그래픽스 모듈(428)은, Java의 GUI(graphic user interface) 위젯 툴킷일 수 있다. Java AWT 그래픽스 모듈(428)은 Java 환경에서 실행될 버퍼된 이미지를 가져올 수 있다. 일 실시예에 따른 ART 모듈(427)은 제1 운영체제에서 사용되는 런타임 환경으로서, 해당 데이터를 제1 운영체제 런타임 환경에서 실행되는 명령으로 변환하는 작업을 수행할 수 있다.

일 실시예에 따른 프로세서(110)는 렌더링된 사용자 인터페이스에 해당하는 이미지를 편집기로 전송할 수 있다. 이미지는, 예를 들어, png 형식의 파일일 수 있다. 사용자의 단말(200)은 렌더링된 사용자 인터페이스를 표시할 수 있다. 예를 들어, 사용자 단말(200)은 편집기(410)를 통해, 작성한 코드와 코드에 대응하는 사용자 인터페이스를 함께 표시할 수 있다. 이를 통해, 사용자는 편집기를 통해 화면을 구성하기 위한 코드를 작성하면 실시간으로 코드에 대응하는 사용자 인터페이스를 확인할 수 있다.

도 5는 본 개시의 일 실시예에 따른 전자 장치(100)의 처리 흐름도이다.

처리 흐름도 500을 참조하면, 일 실시예에 따른 전자 장치(100)의 프로세서(110)는, 단계 510에서, 제1 단말(예: 도 1의 단말(200))로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식의 제1 데이터를 획득할 수 있다. 제1 사용자는 제1 단말을 통해 편집기를 사용할 수 있다. 편집기는 서버인 전자 장치(100)로부터 제1 사용자의 제1 단말로 제공될 수 있다. 제1 사용자는 편집기를 이용하여 애플리케이션의 화면을 구성하기 위한 코드를 작성할 수 있다. 편집기는, 예를 들어, JSON 데이터 모델(또는 JSON 데이터)을 직접 편집하는 코드(code) 편집기일 수도 있고, 데이터 모델의 JSON 스키마(schema)를 이용하여 편집하는 JSON 스키마 기반의 편집기일 수도 있다. 제1 사용자는 코드 편집기를 이용해 직접 애플리케이션의 화면을 구성하기 위한 코드를 작성할 수도 있고, JSON 스키마 기반의 편집기를 이용해 코드를 쉽게 작성할 수도 있다.

도 6a 및 6b는 일 실시예에 따른 편집기의 화면(600a. 600b)을 도시한 도면이다. 사용자는 사용자의 단말(200)을 이용하여, 서버인 전자 장치(100)가 제공하는 편집기를 사용할 수 있다. 편집기는 코드 작성 영역(610)과 렌더링 영역(620)을 포함할 수 있다. 사용자는 코드 작성 영역(610)에 코드를 입력할 수 있다. 도 6a을 참조하면, 사용자의 단말(200)은 코드 작성 영역(610)의 코드 편집(Code Editor) 아이콘(611)을 선택하기 위한 사용자 입력을 수신하는 경우, 코드 작성 영역(610)에 코드 편집 화면을 표시할 수 있다. 사용자는 표시된 코드 편집 화면을 통해 JSON 형식의 데이터를 직접 작성 및 수정할 수 있다. 즉, 사용자는 코드 편집 화면을 통해 애플리케이션의 화면을 구성하기 위한 코드를 직접 작성 및 수정할 수 있고, 편집기는 작성된 코드에 대응하는 JSON 형식의 데이터를 생성할 수 있다.

도 6b를 참조하면, 사용자의 단말(200)은 코드 작성 영역(610)의 스키마 편집(Schema Editor) 아이콘(613)을 선택하기 위한 사용자 입력을 수신하는 경우, 코드 작성 영역(610)에 스키마 편집 화면을 표시할 수 있다. 사용자는 표시된 스키마 편집 화면을 통해, JSON 스키마에 기초하여 코드를 작성 및 수정할 수 있다. 코드를 구성하는 복수의 컴포넌트에 대응하는 복수의 데이터 모델이 전자 장치(100)에 미리 저장되어 있기 때문에, 사용자는 미리 저장된 복수의 데이터 모델을 이용하여 간단하고 쉽게 코드를 작성할 수 있다. 상기의 경우, 사용자는 각 데이터 모델의 속성이나 유효 값을 기억할 필요가 없기 때문에, 간단하고 쉽게 코드를 작성할 수 있다.

상술한 방법을 이용하여, 사용자가 코드 작성 영역(610)에 코드를 입력하는 경우, 사용자의 단말(200)은 코드를 포함하는 제1 형식의 제1 데이터를 전자 장치(100)로 전송할 수 있다. 제1 형식의 데이터는 JSON 형식의 데이터(또는 파일)일 수 있다.

일 실시예에 따른 프로세서(110)는, 단계 520에서, 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환할 수 있다. 프로세서(110)는 JSON 형식의 제1 데이터를 DTO 형식의 제1 데이터로 전환할 수 있다. DTO 형식의 제1 데이터로 전환함으로써, 데이터 전송의 편리성을 높일 수 있다.

일 실시예에 따른 프로세서(110)는, 단계 530에서, 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링할 수 있다. 프로세서(110)는 제2 형식의 제1 데이터에 포함된 하나 이상의 컴포넌트를 식별할 수 있다. 예를 들어, 프로세서(110)는 DTO 형식의 제1 데이터에 포함된 코드에 대하여, 코드를 구성하는 하나 이상의 컴포넌트를 식별할 수 있다. 프로세서(110)는 식별한 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성할 수 있다. 구체적으로, 프로세서(110)는 하나 이상의 컴포넌트에 대응하는 하나 이상의 라이브러리를 호출할 수 있다. 프로세서(110)는 하나 이상의 컴포넌트에 대응하는 하나 이상의 표시 속성을 호출할 수 있다. 프로세서(110)는 하나 이상의 라이브러리 및 하나 이상의 표시 속성에 기초하여, 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성할 수 있다. 구체적으로, 전자 장치(100)의 메모리(120)에는 복수의 컴포넌트, 복수의 컴포넌트에 대응하는 복수의 라이브러리 및 복수의 컴포넌트에 대응하는 복수의 표시 속성이 저장될 수 있다. 프로세서(110)는 하나 이상의 이미지에 대응하는 하나 이상의 인터페이스를 렌더링할 수 있다.

일 실시예에 따르면, 프로세서(110)는, 하나 이상의 이미지에 대응하는 상기 하나 이상의 사용자 인터페이스를 렌더링하기 위하여, 제1 단말의 운영체제를 확인할 수 있다. 예를 들어, 프로세서(110)는 제1 단말의 운영체제가 안드로이드 운영체제인지 아니면 iOS 또는 macOS 운영체제인지 여부를 확인할 수 있다. 프로세서(110)는 확인한 운영체제에 적합하고, 하나 이상의 이미지에 대응하는 하나 이상의 사용자 인터페이스를 렌더링할 수 있다. 프로세서(110)는, 사용자가 선택한 옵션에 기초하여, 제1 운영체제에 적합한 사용자 인터페이스를 렌더링할지, 제2 운영체제에 적합한 사용자 인터페이스를 렌더링할지 결정할 수도 있다.

일 실시예에 따른 프로세서(110)는, 동작 540에서, 렌더링된 하나 이상의 사용자 인터페이스를 제1 단말로 전송할 수 있다. 프로세서(110)는 편집기를 통해 렌더링된 하나 이상의 사용자 인터페이스를 제1 단말로 전송할 수 있다. 도 6a를 참조하면, 사용자의 제1 단말은 편집기의 렌더링 영역(620)을 통해 상기 렌더링된 하나 이상의 사용자 인터페이스를 표시할 수 있다. 사용자가 편집기의 코드 작성 영역을 통해 코드를 작성하는 경우, 편집기는 실시간으로 렌더링 영역에 코드에 대응하는 하나 이상의 사용자 인터페이스를 표시할 수 있다. 예를 들어, 사용자가 코드 작성 영역에 코드를 작성하는 경우, 수 초(예: 3초 내지 5초) 이내에 렌더링 영역에 상기 코드에 대응하는 하나 이상의 사용자 인터페이스가 표시될 수 있다. 즉, 사용자는 애플리케이션의 화면을 구성하기 위한 코드가 제대로 작성되었는지 확인하기 위하여, 별도의 애플리케이션 배포 과정을 거칠 필요가 없고, 시뮬레이션을 위한 가상의 기기를 생성 및 이용할 필요가 없이, 편집기의 화면을 통해 실시간으로 코드에 대응하는 하나 이상의 사용자 인터페이스를 확인할 수 있다. 이를 통해, 사용자는 코드를 실시간으로 시뮬레이션할 수 있으므로, 코드를 신속하게 검사할 수 있다.

일 실시예에 따르면, 프로세서(110)는 복수의 단말에게 동시에 시뮬레이션 할 수도 있다. 프로세서(110)는 제1 단말로 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하고, 렌더링된 하나 이상의 사용자 인터페이스를 제1 단말로 제공하는 도중에, 제2 단말에게도 제2 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하고 제공할 수도 있다. 구체적으로, 프로세서(110)는, 제1 단말로 상기 렌더링된 하나 이상의 사용자 인터페이스를 제공하는 도중에, 제2 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식의 제2 데이터를 획득할 수 있다. 프로세서(110)는 제1 형식의 제2 데이터를 제2 형식의 제2 데이터로 전환할 수 있다. 프로세서(110)는 제2 형식의 제2 데이터에 포함된 코드에 대응하는 하나 이상의 사용자 인터페이스를 렌더링할 수 있다. 프로세서(110)는 렌더링된 하나 이상의 사용자 인터페이스를 제2 단말로 제공할 수 있다. 이와 같이, 전자 장치(100)는 동시에 복수의 단말에 대한 렌더링 서비스를 제공함으로써, 수평 확장이 가능하다.

한편, 본 명세서와 도면에는 본 발명의 바람직한 실시 예에 대하여 개시하였으며, 비록 특정 용어들이 사용되었으나, 이는 단지 본 발명의 기술 내용을 쉽게 설명하고 발명의 이해를 돕기 위한 일반적인 의미에서 사용된 것이지, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시 예 외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형 예들이 실시 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이다.

전술한 실시예들에 따른 장치 또는 단말은, 프로세서, 프로그램 데이터를 저장하고 실행하는 메모리, 디스크 드라이브와 같은 영구 저장부(permanent storage), 외부 장치와 통신하는 통신 포트, 터치 패널, 키(key), 버튼 등과 같은 사용자 인터페이스 장치 등을 포함할 수 있다. 소프트웨어 모듈 또는 알고리즘으로 구현되는 방법들은 상기 프로세서상에서 실행 가능한 컴퓨터가 읽을 수 있는 코드들 또는 프로그램 명령들로서 컴퓨터가 읽을 수 있는 기록 매체 상에 저장될 수 있다. 여기서 컴퓨터가 읽을 수 있는 기록 매체로 마그네틱 저장 매체(예컨대, ROM(read-only memory), RAM(random-Access memory), 플로피 디스크, 하드 디스크 등) 및 광학적 판독 매체(예컨대, 시디롬(CD-ROM), 디브이디(DVD: Digital Versatile Disc)) 등이 있다. 컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결된 컴퓨터 시스템들에 분산되어, 분산 방식으로 컴퓨터가 판독 가능한 코드가 저장되고 실행될 수 있다. 매체는 컴퓨터에 의해 판독 가능하며, 메모리에 저장되고, 프로세서에서 실행될 수 있다.

본 실시 예는 기능적인 블록 구성들 및 다양한 처리 단계들로 나타내어질 수 있다. 이러한 기능 블록들은 특정 기능들을 실행하는 다양한 개수의 하드웨어 또는/및 소프트웨어 구성들로 구현될 수 있다. 예를 들어, 실시 예는 하나 이상의 마이크로프로세서들의 제어 또는 다른 제어 장치들에 의해서 다양한 기능들을 실행할 수 있는, 메모리, 프로세싱, 로직(logic), 룩 업 테이블(look-up table) 등과 같은 집적 회로 구성들을 채용할 수 있다. 구성 요소들이 소프트웨어 프로그래밍 또는 소프트웨어 요소들로 실행될 수 있는 것과 유사하게, 본 실시 예는 데이터 구조, 프로세스들, 루틴들 또는 다른 프로그래밍 구성들의 조합으로 구현되는 다양한 알고리즘을 포함하여, C, C++, 자바(Java), 어셈블러(assembler), 파이썬(Python) 등과 같은 프로그래밍 또는 스크립팅 언어로 구현될 수 있다. 기능적인 측면들은 하나 이상의 프로세서들에서 실행되는 알고리즘으로 구현될 수 있다. 또한, 본 실시 예는 전자적인 환경 설정, 신호 처리, 및/또는 데이터 처리 등을 위하여 종래 기술을 채용할 수 있다. "매커니즘", "요소", "수단", "구성"과 같은 용어는 넓게 사용될 수 있으며, 기계적이고 물리적인 구성들로서 한정되는 것은 아니다. 상기 용어는 프로세서 등과 연계하여 소프트웨어의 일련의 처리들(routines)의 의미를 포함할 수 있다.

전술한 실시예들은 일 예시일 뿐 후술하는 청구항들의 범위 내에서 다른 실시예들이 구현될 수 있다.

Claims (11)

1. 전자 장치에서 사용자 인터페이스를 제공하는 방법에 있어서,
   제1 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 제1 데이터를 획득하는 단계;
   상기 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환하는 단계;
   상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계; 및
   상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하는 단계를 포함하고,
   상기 제2 형식의 제1 데이터는 상기 제1 형식의 제1 데이터에 포함된 객체를 캡슐화한 데이터이고,
   상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계는,
   상기 제1 형식의 제1 데이터에 포함된 객체를 캡슐화한 상기 제2 형식의 제1 데이터에 기초하여, 상기 제2 형식의 제1 데이터에 포함된 하나 이상의 컴포넌트를 식별하는 단계;
   상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 라이브러리 및 표시 속성에 기초하여, 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성하는 단계; 및
   상기 하나 이상의 이미지에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계를 포함하고,
   상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하는 단계는,
   상기 코드를 표시하기 위한 제1 영역 및 상기 하나 이상의 사용자 인터페이스를 표시하기 위한 제2 영역을 포함하는 페이지를 상기 제1 단말로 제공하는 단계를 더 포함하는,
   제공하는 방법.
2. 삭제
3. 삭제
4. 제1항에 있어서,
   상기 전자 장치의 메모리에는, 상기 제2 형식에 관한 복수의 컴포넌트, 상기 복수의 컴포넌트에 대응하는 복수의 라이브러리 및 상기 복수의 컴포넌트에 대응하는 복수의 표시 속성이 저장되는, 제공하는 방법.
5. 제1항에 있어서,
   상기 하나 이상의 이미지에 대응하는 상기 하나 이상의 사용자 인터페이스를 렌더링하는 단계는,
   상기 제1 단말의 운영체제를 확인하는 단계; 및
   상기 확인한 운영체제에 적합하고, 상기 하나 이상의 이미지에 대응하는 상기 하나 이상의 사용자 인터페이스를 렌더링하는 단계를 포함하는, 제공하는 방법.
6. 제1항에 있어서,
   상기 제1 형식의 제1 데이터는 JSON 데이터이고, 상기 제2 형식의 제1 데이터는 DTO 데이터인, 제공하는 방법.
7. 제1항에 있어서,
   상기 화면을 구성하기 위한 코드는,
   하나 이상의 JSON 스키마를 이용하여 생성된 코드인, 제공하는 방법.
8. 삭제
9. 제1항에 있어서,
   상기 제1 단말로 상기 렌더링된 하나 이상의 사용자 인터페이스를 제공하는 도중에, 제2 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식의 제2 데이터를 획득하는 단계;
   상기 제1 형식의 제2 데이터를 제2 형식의 제2 데이터로 전환하는 단계;
   상기 제2 형식의 제2 데이터에 포함된 상기 코드에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하는 단계; 및
   상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제2 단말로 제공하는 단계를 더 포함하는, 제공하는 방법.
10. 전자 장치에 있어서,
    통신 회로;
    메모리; 및
    프로세서를 포함하고,
    상기 프로세서는,
    제1 단말로부터 화면을 구성하기 위한 코드를 포함하는 제1 형식(format)의 제1 데이터를 획득하고,
    상기 제1 형식의 제1 데이터를 제2 형식의 제1 데이터로 전환하고,
    상기 제2 형식의 제1 데이터에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하고,
    상기 렌더링된 하나 이상의 사용자 인터페이스를 상기 제1 단말로 제공하도록 구성되고,
    상기 제2 형식의 제1 데이터는 상기 제1 형식의 제1 데이터에 포함된 객체를 캡슐화한 데이터이고,
    상기 프로세서는,
    상기 제1 형식의 제1 데이터에 포함된 객체를 캡슐화한 상기 제2 형식의 제1 데이터에 기초하여, 상기 제2 형식의 제1 데이터에 포함된 하나 이상의 컴포넌트를 식별하고,
    상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 라이브러리 및 표시 속성에 기초하여, 상기 하나 이상의 컴포넌트에 대응하는 하나 이상의 이미지를 생성하고,
    상기 하나 이상의 이미지에 대응하는 하나 이상의 사용자 인터페이스를 렌더링하고,
    상기 코드를 표시하기 위한 제1 영역 및 상기 하나 이상의 사용자 인터페이스를 표시하기 위한 제2 영역을 포함하는 페이지를 상기 제1 단말로 제공하도록 구성되는,
    전자 장치.
11. 제1항의 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 비일시적 기록매체.

Images