[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

KR20210073911A - Electronic device and control method thereof - Google Patents

Electronic device and control method thereof Download PDF

Info

Publication number
KR20210073911A
KR20210073911A KR1020190164697A KR20190164697A KR20210073911A KR 20210073911 A KR20210073911 A KR 20210073911A KR 1020190164697 A KR1020190164697 A KR 1020190164697A KR 20190164697 A KR20190164697 A KR 20190164697A KR 20210073911 A KR20210073911 A KR 20210073911A
Authority
KR
South Korea
Prior art keywords
size
ratio
graphic
graphic element
type
Prior art date
Application number
KR1020190164697A
Other languages
Korean (ko)
Inventor
김혜령
김석현
박은희
최아름
현수경
Original Assignee
삼성전자주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 삼성전자주식회사 filed Critical 삼성전자주식회사
Priority to KR1020190164697A priority Critical patent/KR20210073911A/en
Priority to PCT/KR2020/018073 priority patent/WO2021118267A1/en
Publication of KR20210073911A publication Critical patent/KR20210073911A/en

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/45Management operations performed by the client for facilitating the reception of or the interaction with the content or administrating data related to the end-user or to the client device itself, e.g. learning user preferences for recommending movies, resolving scheduling conflicts
    • H04N21/462Content or additional data management, e.g. creating a master electronic program guide from data received from the Internet and a Head-end, controlling the complexity of a video stream by scaling the resolution or bit-rate based on the client capabilities
    • H04N21/4621Controlling the complexity of the content stream or additional data, e.g. lowering the resolution or bit-rate of the video stream for a mobile client with a small screen
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/45Management operations performed by the client for facilitating the reception of or the interaction with the content or administrating data related to the end-user or to the client device itself, e.g. learning user preferences for recommending movies, resolving scheduling conflicts
    • H04N21/462Content or additional data management, e.g. creating a master electronic program guide from data received from the Internet and a Head-end, controlling the complexity of a video stream by scaling the resolution or bit-rate based on the client capabilities
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/485End-user interface for client configuration

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

A control method an electronic device is disclosed. The control method of an electronic device according to the present disclosure includes the steps of: displaying a user interface (UI) including a plurality of graphic elements, when a user command for displaying the UI is input; and, when at least one of the size and the ratio of a display screen for displaying the UI is changed, changing the size of the UI to display the UI. In the step of changing the size of the UI and displaying the UI, at least one graphic element among graphic elements included in the UI is displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI.

Description

전자 장치 및 그 제어 방법{Electronic device and control method thereof}Electronic device and control method thereof

본 개시는 전자 장치 및 그 제어 방법에 관한 것으로, 보다 상세하게는 디스플레이 화면의 크기 또는 비율에 따라 변경되는 UI를 표시하는 전자 장치 및 그 제어 방법에 관한 것이다.The present disclosure relates to an electronic device and a method for controlling the same, and more particularly, to an electronic device for displaying a UI that changes according to a size or ratio of a display screen, and a method for controlling the same.

최근 전자 기술의 발달로 다양한 전자 장치들이 개발되고 있다. 특히, 최근에는 초대형 전자 장치, 디스플레이 화면의 크기가 변경될 수 있는 롤러블 전자 장치 및 폴더블 전자 장치, 회전 가능한 전자 장치 및 복수의 디스플레이를 조합하여 하나의 화면으로 표시할 수 있는 모듈형 전자 장치등 다양한 전자 장치가 개발되고 있다.With the recent development of electronic technology, various electronic devices have been developed. In particular, in recent years, an extra-large electronic device, a rollable electronic device and a foldable electronic device in which the size of a display screen can be changed, a rotatable electronic device, and a modular electronic device capable of displaying a plurality of displays by combining them into one screen Various electronic devices are being developed.

전자 장치의 화면이 대형화되고, 화면의 크기 및 비율이 변경됨에도 불구하고, 종래에는 UI를 증가된 화면 비율만큼 동일하게 확대하여 제공하거나, 해당 디스플레이 화면에 맞는 UI를 개별적으로 디자인하여야 하는 경제적 손해가 존재하였다. 따라서, 디스플레이 화면의 크기 및 비율에 따른 최적의 UI를 제공할 필요가 있었다.Although the screen of the electronic device is enlarged and the size and ratio of the screen are changed, in the prior art, there is an economic loss of providing the UI in the same way as the increased screen ratio, or individually designing a UI suitable for the display screen. existed. Therefore, it was necessary to provide an optimal UI according to the size and ratio of the display screen.

본 개시는 상술한 필요성에 의해 안출된 것으로, 본 개시의 목적은 디스플레이 화면의 크기 및 비율에 따라 UI를 구성하는 그래픽 엘리먼트를 식별하여, 식별된 그래픽 엘리먼트가 조합된 UI를 제공하는 전자 장치 및 그 제어 방법을 제공함에 있다. The present disclosure has been devised by the above necessity, and an object of the present disclosure is to identify graphic elements constituting a UI according to the size and ratio of a display screen, and to provide a UI in which the identified graphic elements are combined, and an electronic device and the same To provide a control method.

이상과 같은 목적을 달성하기 위한 본 개시의 일 실시 예에 따른 전자 장치의 제어 방법은, UI를 표시하기 위한 사용자 명령이 입력되면, 복수의 그래픽 엘리먼트를 포함하는 UI를 표시하는 단계; 및 상기 UI를 표시하는 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI의 크기를 변경하여 표시하는 단계;를 포함하고, 상기 UI의 크기를 변경하여 표시하는 단계는, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 상기 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시한다.According to an embodiment of the present disclosure for achieving the above object, a method of controlling an electronic device includes: displaying a UI including a plurality of graphic elements when a user command for displaying the UI is input; and when at least one of a size and a ratio of a display screen for displaying the UI is changed, changing the size of the UI to display it; and changing and displaying the size of the UI is included in the UI At least one graphic element among the displayed graphic elements is displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI.

그리고, 상기 UI는 제1 유형의 그래픽 엘리먼트 및 제2 유형의 엘리먼트를 포함하며, 상기 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율에 따라 표시되며, 상기 UI가 적어도 두 개의 상기 제2 유형의 그래픽 엘리먼트를 포함하는 경우, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트에 기 설정된 비율에 따라 상기 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 표시될 수 있다.And, the UI includes a first type of graphic element and a second type of element, wherein the first type of graphic element is displayed according to a preset size and ratio, and the UI includes at least two types of the second type of graphic element. When the graphic element is included, the at least two second type graphic elements may be displayed according to a preset ratio of the at least two second type graphic elements included in the UI.

그리고, 상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI에 포함된 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않고, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트 간의 기 설정된 비율이 유지되면서 상기 적어도 두 개의 제2 그래픽 엘리먼트 각각의 크기 및 비율 중 적어도 하나가 변경되어 표시될 수 있다.And, when at least one of the size and ratio of the display screen is changed, the size and ratio of the first type of graphic element included in the UI are not changed, and at least two graphic elements of the second type included in the UI are not changed. At least one of a size and a ratio of each of the at least two second graphic elements may be changed and displayed while maintaining a preset ratio between the two graphic elements.

그리고, 상기 UI는 제3 유형의 그래픽 엘리먼트를 더 포함하며, 상기 제3 유형의 그래픽 엘리먼트는 상기 제3 유형의 그래픽 엘리먼트에 포함되는 정보의 크기에 따라 상기 제3 유형의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 표시될 수 있다.The UI further includes a third type of graphic element, wherein the third type of graphic element has a size and ratio of the third type of graphic element according to the size of information included in the third type of graphic element. At least one of them may be changed and displayed.

그리고, 상기 디스플레이 화면의 크기가 감소하는 경우, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 상기 UI를 표시하는 단계; 및 상기 디스플레이 화면의 크기가 증가하는 경우, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여 상기 UI를 표시하는 단계를 더 포함할 수 있다.and displaying the UI by deleting at least one of graphic elements included in the UI when the size of the display screen decreases; and when the size of the display screen increases, adding at least one of the plurality of graphic elements to the UI to display the UI.

그리고, 상기 UI를 변경하기 위한 사용자 명령이 입력되면, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 삭제하거나, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여, 상기 UI를 표시하는 단계;를 더 포함할 수 있다.And, when a user command for changing the UI is input, at least one graphic element among graphic elements included in the UI is deleted, or at least one of the plurality of graphic elements is added to the UI to display the UI. It may further include;

그리고, 상기 복수의 그래픽 엘리먼트는 외부 서버로부터 수신되고, 상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하는 단계; 및 상기 수신된 정보를 바탕으로, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 상기 UI를 표시하는 단계;를 더 포함할 수 있다.The plurality of graphic elements are received from an external server, and when there is an update on the plurality of graphic elements, receiving information on the updated graphic elements from the external server; and displaying the UI by updating at least one graphic element among graphic elements included in the UI based on the received information.

그리고, 상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하는 단계;를 더 포함할 수 있다.In addition, when the electronic device is a device capable of displaying a plurality of displays in combination, the size and ratio of the display screen changed according to the combination of at least one display are identified, and the UI is based on the identified size and ratio. The method may further include changing and displaying at least one of a size and a ratio of at least one graphic element among graphic elements included in the .

그리고, 상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하는 단계;를 더 포함할 수 있다.In addition, when the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, among the size and ratio of at least one graphic element among graphic elements included in the UI. The method may further include changing and displaying at least one.

한편, 상기 목적을 달성하기 위한 본 개시의 일 실시 예에 따른 전자 장치는, 적어도 하나의 인스트럭션을 포함하는 메모리; 및 상기 적어도 하나의 인스트럭션을 실행함으로써, UI(User Interface)를 표시하기 위한 사용자 명령이 입력되면, 복수의 그래픽 엘리먼트를 포함하는 UI를 표시하도록 제어하고, 상기 UI를 표시하는 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI의 크기를 변경하여 표시하도록 제어하는 프로세서;를 포함하고, 상기 프로세서는, 상기 UI의 크기를 변경하여 표시하도록 제어함에 있어서, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 상기 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시하도록 제어한다.Meanwhile, an electronic device according to an embodiment of the present disclosure for achieving the above object includes: a memory including at least one instruction; and when a user command for displaying a UI (User Interface) is input by executing the at least one instruction, control to display a UI including a plurality of graphic elements, and a size and ratio of a display screen displaying the UI When at least one is changed, a processor for controlling the display by changing the size of the UI; includes, wherein the processor controls to change and display the size of the UI, at least among the graphic elements included in the UI Controls display by adjusting the size of one graphic element in a ratio different from that of other graphic elements included in the UI.

그리고, 상기 UI는 제1 유형의 그래픽 엘리먼트 및 제2 유형의 엘리먼트를 포함하며, 상기 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율에 따라 표시되며, 상기 UI가 적어도 두 개의 상기 제2 유형의 그래픽 엘리먼트를 포함하는 경우, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트에 기 설정된 비율에 따라 상기 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 표시될 수 있다.And, the UI includes a first type of graphic element and a second type of element, wherein the first type of graphic element is displayed according to a preset size and ratio, and the UI includes at least two types of the second type of graphic element. When the graphic element is included, the at least two second type graphic elements may be displayed according to a preset ratio of the at least two second type graphic elements included in the UI.

그리고, 상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI에 포함된 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않고, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트 간의 기 설정된 비율이 유지되면서 상기 적어도 두 개의 제2 그래픽 엘리먼트 각각의 크기 및 비율 중 적어도 하나가 변경되어 표시될 수 있다.And, when at least one of the size and ratio of the display screen is changed, the size and ratio of the first type of graphic element included in the UI are not changed, and at least two graphic elements of the second type included in the UI are not changed. At least one of a size and a ratio of each of the at least two second graphic elements may be changed and displayed while maintaining a preset ratio between the two graphic elements.

그리고, 상기 UI는 제3 유형의 그래픽 엘리먼트를 더 포함하며, 상기 제3 유형의 그래픽 엘리먼트는 상기 제3 유형의 그래픽 엘리먼트에 포함되는 정보의 크기에 따라 상기 제3 유형의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 표시되는 것을 특징으로 할 수 있다.The UI further includes a third type of graphic element, wherein the third type of graphic element has a size and ratio of the third type of graphic element according to the size of information included in the third type of graphic element. It may be characterized in that at least one of them is changed and displayed.

그리고, 상기 프로세서는, 상기 디스플레이 화면의 크기가 감소하는 경우, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 상기 UI를 표시하고, 상기 디스플레이 화면의 크기가 증가하는 경우, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여 상기 UI를 표시하도록 제어하는 것을 특징으로 할 수 있다.And, when the size of the display screen decreases, the processor displays the UI by deleting at least one of graphic elements included in the UI, and when the size of the display screen increases, the plurality of graphic elements By adding at least one of the UI to the UI, it may be characterized in that the UI is controlled to be displayed.

그리고, 상기 프로세서는, 상기 UI를 변경하기 위한 사용자 명령이 입력되면, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 삭제하거나, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여, 상기 UI를 표시하도록 제어하는 것을 특징으로 할 수 있다.And, when a user command for changing the UI is input, the processor deletes at least one graphic element among graphic elements included in the UI or adds at least one of the plurality of graphic elements to the UI, Control to display the UI may be characterized.

그리고, 상기 전자 장치는 통신 인터페이스를 더 포함하고, 상기 복수의 그래픽 엘리먼트는 상기 통신 인터페이스를 통해 외부 서버로부터 수신되고, 상기 프로세서는, 상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 상기 통신 인터페이스를 통해 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하고, 상기 수신된 정보를 바탕으로, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 상기 UI를 표시하도록 제어하는 것을 특징으로 할 수 있다.And, the electronic device further includes a communication interface, the plurality of graphic elements are received from an external server through the communication interface, and the processor, when there is an update to the plurality of graphic elements, the communication interface Receives information on the updated graphic element from an external server through, and updates at least one graphic element among graphic elements included in the UI based on the received information to control to display the UI can

그리고, 상기 프로세서는, 상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하도록 제어하는 것을 특징으로 할 수 있다. And, when the electronic device is a device capable of displaying a plurality of displays by combining a plurality of displays, the processor identifies the size and ratio of the display screen changed according to the combination of at least one display, and uses the identified size and ratio Based on the display, at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI may be changed and displayed.

그리고, 상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하도록 제어하는 것을 특징으로 할 수 있다.In addition, when the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, among the size and ratio of at least one graphic element among graphic elements included in the UI. It may be characterized in that at least one is changed and controlled to be displayed.

상술한 바와 같은 다양한 실시 예에 의해, 디스플레이 화면의 크기 및 비율에 따른 최적의 UI가 제공될 수 있다.According to various embodiments as described above, an optimal UI according to the size and ratio of the display screen may be provided.

도 1은 본 개시의 일 실시 예에 따른, 디스플레이의 화면 및 비율에 따른 UI를 나타내는 위한 도면이다.
도 2는 본 개시의 일 실시 예에 따른, 전자 장치의 구성을 설명하기 위한 블록도 이다.
도 3은 본 개시의 일 실시 예에 따른, 그래픽 엘리먼트를 이용하여 UI를 생성하는 방법을 나타내는 도면이다.
도 4는 본 개시의 일 실시 예에 따른, 디스플레이 화면의 크기가 변경되는 경우, UI에 포함된 적어도 하나의 그래픽 엘리먼트의 크기가 변경되는 것을 나타내는 도면이다.
도 5는 본 개시의 일 실시 예에 따른, 복수의 전자 장치가 그래픽 엘리먼트를 외부 서버로부터 획득하여, UI를 표시하는 방법을 나타내는 도면이다.
도 6은 본 개시의 일 실시 예에 따른, 복수의 전자 장치가 그래픽 엘리먼트에 대한 업데이트 정보를 외부 서버로부터 획득하여, 업데이트 된 그래픽 엘리먼트를 표시하는 표시하는 방법을 나타내는 도면이다.
도 7은 UI에 포함된 그래픽 엘리먼트 각각의 종류에 따라 그래픽 엘리먼트 중 적어도 하나의 크기 및 비율이 변경되어 UI가 표시되는 방법을 나타내는 도면이다.
도 8은 본 개시의 일 실시 예에 따른, UI에 포함된 그래픽 엘리먼트 각각을 설정하는 방법을 나타내는 도면이다.
도 9는 본 개시의 일 실시 예에 따른 전자 장치의 제어 방법을 설명하기 위한 흐름도 이다.
도 10은 본 개시의 일 실시 예에 따른, 전자 장치의 구체적인 구성을 설명하기 위한 블록도 이다.
1 is a diagram illustrating a UI according to a screen and a ratio of a display, according to an embodiment of the present disclosure.
2 is a block diagram illustrating a configuration of an electronic device according to an embodiment of the present disclosure.
3 is a diagram illustrating a method of generating a UI using a graphic element, according to an embodiment of the present disclosure.
4 is a diagram illustrating that the size of at least one graphic element included in a UI is changed when the size of the display screen is changed, according to an embodiment of the present disclosure;
5 is a diagram illustrating a method in which a plurality of electronic devices obtain a graphic element from an external server to display a UI, according to an embodiment of the present disclosure.
6 is a diagram illustrating a method by which a plurality of electronic devices obtain update information on a graphic element from an external server and display the updated graphic element, according to an embodiment of the present disclosure.
7 is a diagram illustrating a method in which a UI is displayed by changing a size and a ratio of at least one of graphic elements according to each type of graphic elements included in the UI.
8 is a diagram illustrating a method of setting each graphic element included in a UI, according to an embodiment of the present disclosure.
9 is a flowchart illustrating a method of controlling an electronic device according to an embodiment of the present disclosure.
10 is a block diagram illustrating a detailed configuration of an electronic device according to an embodiment of the present disclosure.

이하에서 설명되는 실시 예는 본 개시의 이해를 돕기 위하여 예시적으로 나타낸 것이며, 본 개시는 여기서 설명되는 실시 예들과 다르게, 다양하게 변형되어 실시될 수 있음이 이해되어야 할 것이다. 다만, 이하에서 본 개시를 설명함에 있어서, 관련된 공지 기능 혹은 구성요소에 대한 구체적인 설명이 본 개시의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명 및 구체적인 도시를 생략한다. 또한, 첨부된 도면은 개시의 이해를 돕기 위하여 실제 축척대로 도시된 것이 아니라 일부 구성요소의 치수가 과장되게 도시될 수 있다.It should be understood that the embodiments described below are illustratively shown to help the understanding of the present disclosure, and the present disclosure may be implemented with various modifications, unlike the embodiments described herein. However, in the following description of the present disclosure, if it is determined that a detailed description of a related known function or component may unnecessarily obscure the subject matter of the present disclosure, the detailed description and specific illustration thereof will be omitted. In addition, the accompanying drawings are not drawn to scale in order to help understanding of the disclosure, but dimensions of some components may be exaggerated.

본 명세서 및 청구범위에서 사용되는 용어는 본 개시의 기능을 고려하여 일반적인 용어들을 선택하였다. 하지만, 이러한 용어들은 당 분야에 종사하는 기술자의 의도나 법률적 또는 기술적 해석 및 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 일부 용어는 출원인이 임의로 선정한 용어도 있다. 이러한 용어에 대해서는 본 명세서에서 정의된 의미로 해석될 수 있으며, 구체적인 용어 정의가 없으면 본 명세서의 전반적인 내용 및 당해 기술 분야의 통상적인 기술 상식을 토대로 해석될 수도 있다. The terms used in this specification and claims have been chosen in consideration of the function of the present disclosure. However, these terms may vary depending on the intention, legal or technical interpretation of a person skilled in the art, and the emergence of new technology. Also, some terms are arbitrarily selected by the applicant. These terms may be interpreted in the meaning defined in the present specification, and if there is no specific term definition, it may be interpreted based on the general content of the present specification and common technical common sense in the art.

본 개시의 설명에 있어서 각 단계의 순서는 선행 단계가 논리적 및 시간적으로 반드시 후행 단계에 앞서서 수행되어야 하는 경우가 아니라면 각 단계의 순서는 비제한적으로 이해되어야 한다. 즉, 위와 같은 예외적인 경우를 제외하고는 후행 단계로 설명된 과정이 선행단계로 설명된 과정보다 앞서서 수행되더라도 개시의 본질에는 영향이 없으며 권리범위 역시 단계의 순서에 관계없이 정의되어야 한다. In the description of the present disclosure, the order of each step should be understood as non-limiting unless the preceding step must be logically and temporally performed before the subsequent step. That is, except for the above exceptional cases, even if the process described as a subsequent step is performed before the process described as the preceding step, the essence of the disclosure is not affected, and the scope of rights should also be defined regardless of the order of the steps.

본 문서에서 사용된 "제1," "제2," "첫째," 또는 "둘째," 등의 표현들은 다양한 구성요소들을, 순서 및/또는 중요도에 상관없이 수식할 수 있고, 한 구성요소를 다른 구성요소와 구분하기 위해 사용될 뿐 해당 구성요소들을 한정하지 않는다. 예를 들면, 제1 사용자 기기와 제2 사용자 기기는, 순서 또는 중요도와 무관하게, 서로 다른 사용자 기기를 나타낼 수 있다. 예를 들면, 본 문서에 기재된 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 바꾸어 명명될 수 있다.As used herein, expressions such as "first," "second," "first," or "second," may modify various elements, regardless of order and/or importance, and refer to one element. It is used only to distinguish it from other components, and does not limit the components. For example, the first user equipment and the second user equipment may represent different user equipment regardless of order or importance. For example, without departing from the scope of the rights described in this document, a first component may be referred to as a second component, and similarly, the second component may also be renamed as a first component.

본 문서에서 사용된 "모듈", "유닛", "부(part)" 등과 같은 용어는 적어도 하나의 기능이나 동작을 수행하는 구성요소를 지칭하기 위한 용어이며, 이러한 구성요소는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어 및 소프트웨어의 결합으로 구현될 수 있다. 또한, 복수의 "모듈", "유닛", "부(part)" 등은 각각이 개별적인 특정한 하드웨어로 구현될 필요가 있는 경우를 제외하고는, 적어도 하나의 모듈이나 칩으로 일체화되어 적어도 하나의 프로세서로 구현될 수 있다.As used herein, terms such as “module”, “unit”, “part”, etc. are terms used to refer to a component that performs at least one function or operation, and such component is implemented in hardware or software or may be implemented as a combination of hardware and software. In addition, a plurality of "modules", "units", "parts", etc. are integrated into at least one module or chip, and are integrated into at least one processor, except when each needs to be implemented in individual specific hardware. can be implemented as

본 명세서에서, "가진다," "가질 수 있다," "포함한다," 또는 "포함할 수 있다" 등의 표현은 해당 특징(예: 수치, 기능, 동작, 또는 부품 등의 구성요소)의 존재를 가리키며, 추가적인 특징의 존재를 배제하지 않는다.In the present specification, expressions such as “have,” “may have,” “include,” or “may include” indicate the presence of a corresponding characteristic (eg, a numerical value, function, operation, or component such as a part). and does not exclude the presence of additional features.

그리고, 본 명세서에서는 본 개시의 각 실시 예의 설명에 필요한 구성요소를 설명한 것이므로, 반드시 이에 한정되는 것은 아니다. 따라서, 일부 구성요소는 변경 또는 생략될 수도 있으며, 다른 구성요소가 추가될 수도 있다. 또한, 서로 다른 독립적인 장치에 분산되어 배치될 수도 있다.In addition, since the present specification describes components necessary for the description of each embodiment of the present disclosure, the present disclosure is not necessarily limited thereto. Accordingly, some components may be changed or omitted, and other components may be added. In addition, they may be distributed and arranged in different independent devices.

나아가, 이하 첨부 도면들 및 첨부 도면들에 기재된 내용들을 참조하여 본 개시의 실시 예를 상세하게 설명하지만, 본 개시가 실시 예들에 의해 제한되거나 한정되는 것은 아니다.Further, an embodiment of the present disclosure will be described in detail below with reference to the accompanying drawings and the contents described in the accompanying drawings, but the present disclosure is not limited or limited by the embodiments.

이하에서는 첨부된 도면을 참조하여 본 개시에 대하여 더욱 상세히 설명하도록 한다.Hereinafter, the present disclosure will be described in more detail with reference to the accompanying drawings.

도 1은 본 개시의 일 실시 예에 따른, 디스플레이의 화면 및 비율에 따른 UI를 나타내는 위한 도면이다.1 is a diagram illustrating a UI according to a screen and a ratio of a display, according to an embodiment of the present disclosure.

본 개시의 일 실시 예에 따른 전자 장치(100-1, 100-2, 100-3)는 TV, 스마트 TV, 모니터, 전자 액자, 전자 칠판, 전자 테이블, 노트북, 테블릿 PC, 데스크탑, 셋탑 박스 등과 같은 다양한 전자 장치로 구현될 수 있으며, 도 1에는 제1 전자 장치(100-1), 제2 전자 장치(100-2) 및 제3 전자 장치(100-3)가 디스플레이를 포함하는 전자 장치인 경우를 나타내고 있다.The electronic devices 100-1, 100-2, and 100-3 according to an embodiment of the present disclosure include TVs, smart TVs, monitors, electronic picture frames, electronic blackboards, electronic tables, notebook computers, tablet PCs, desktops, and set-top boxes. It may be implemented in various electronic devices, such as, in FIG. 1 , the first electronic device 100-1, the second electronic device 100-2, and the third electronic device 100-3 are electronic devices including a display. case is shown.

전자 장치(100-1 내지 100-3)는 디스플레이 상에 UI(User Interface)를 표시할 수 있다. 본 개시에 따른 UI는 어플리케이션 실행 UI, 메뉴 UI, 잠금 UI, 설정 UI, 대기 UI, 영상을 표시하기 위한 UI등과 같은 다양한 UI를 포함할 수 있다. The electronic devices 100 - 1 to 100 - 3 may display a user interface (UI) on a display. The UI according to the present disclosure may include various UIs such as an application execution UI, a menu UI, a lock UI, a setting UI, a standby UI, and a UI for displaying an image.

도 1을 참조하면, 제1 전자 장치(100-1)에는 제1 UI(10)가 표시될 수 있으며, 제1 UI(10)는 복수의 그래픽 엘리먼트를 포함할 수 있다. 본 개시에 따른 그래픽 엘리먼트란 UI를 구성하는 구성요소를 의미할 수 있다. 예컨데, 그래픽 엘리먼트는 UI 또는 UI 엘리먼트를 구성하는 그래픽 툴을 의미할 수 있다. 본 개시의 일 실시 예에 따른, 그래픽 툴은 도 4에 도시된 핸들 엘리먼트(40-2) 및 바 엘리먼트(40-3) 등과 같은 단순한 그래픽 이미지로 구성될 수 있다. 다만, 이에 한정되지 않고, 그래픽 엘리먼트에는 컨텐츠, 아이콘, 텍스트, 위젯을 더 포함할 수 있다. 본 개시의 일 실시 예에 따르면, 복수의 그래픽 엘리먼트 중 적어도 두 개 이상의 그래픽 엘리먼트가 조합되어 UI가 생성될 수 있다. 즉, 그래픽 엘리먼트는 각각의 그래픽 엘리먼트에 지정된 유형에 따라 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 조절되며 UI내에 포함될 수 있다.Referring to FIG. 1 , a first UI 10 may be displayed on a first electronic device 100 - 1 , and the first UI 10 may include a plurality of graphic elements. A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may refer to a UI or a graphic tool constituting the UI element. According to an embodiment of the present disclosure, the graphic tool may be composed of a simple graphic image such as the handle element 40-2 and the bar element 40-3 shown in FIG. 4 . However, the present invention is not limited thereto, and the graphic element may further include content, an icon, text, and a widget. According to an embodiment of the present disclosure, a UI may be generated by combining at least two graphic elements among a plurality of graphic elements. That is, the graphic element may be included in the UI while at least one of the size and ratio of the graphic element is adjusted according to the type specified for each graphic element.

본 개시의 일 실시 예에 따르면, UI가 디스플레이에 표시되는 도중, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI의 크기가 변경되어 표시될 수 있다. 그리고, UI의 크기가 변경되어 표시되면, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트는 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기가 조절되어 표시될 수 있다. 구체적으로, 그래픽 엘리먼트는 제1 유형, 제2 유형, 제3 유형의 그래픽 엘리먼트를 포함할 수 있으며, 각각의 유형에 따라 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트가 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기가 조절되어 표시될 수 있다.도 1의 제1 UI(10)는 제1 그래픽 엘리먼트(10-1), 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)를 포함할 수 있다. 본 개시에 따르면, 제1 그래픽 엘리먼트(10-1)는 제1 유형의 그래픽 엘리먼트이며, 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)는 제2 유형의 그래픽 엘리먼트일 수 있다. According to an embodiment of the present disclosure, if at least one of the size and ratio of the display screen is changed while the UI is being displayed on the display, the size of the UI may be changed and displayed. In addition, when the size of the UI is changed and displayed, at least one graphic element among the graphic elements included in the UI may be displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI. Specifically, the graphic element may include a first type, a second type, and a third type of graphic element, and according to each type, at least one graphic element among graphic elements included in the UI is another graphic included in the UI. The size may be adjusted and displayed in a ratio different from that of the element. The first UI 10 of FIG. 1 includes a first graphic element 10-1, a second graphic element 10-2, and a third graphic element ( 10-3) may be included. According to the present disclosure, the first graphic element 10-1 is a graphic element of a first type, and the second graphic element 10-2 and the third graphic element 10-3 are graphic elements of a second type. can

본 개시에 따른 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율(예로, 가로 x 세로: 6 x 8 pixel의 크기 및 3:4의 비율) 에 따라 표시되며, 디스플레이 화면의 크기 또는 비율이 변경되어도, 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않을 수 있다The first type of graphic element according to the present disclosure is displayed according to a preset size and ratio (eg, width x length: size of 6 x 8 pixels and a ratio of 3:4), even if the size or ratio of the display screen is changed , the size and proportion of the graphic element of the first type may not change.

그리고, 본 개시에 따른 UI에 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 포함되어 있는 경우, UI에 포함된 적어도 두 개의 제2 유형의 엘리먼트 간 기 설정된 비율에 따라 적어도 두 개의 제2 유형의 엘리먼트가 표시될 수 있다.And, when at least two second type graphic elements are included in the UI according to the present disclosure, at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI. can be displayed.

즉, 도 1의 제1 UI(10)에는 제1 그래픽 엘리먼트(10-1)는 제1 유형의 그래픽 엘리먼트로 기 설정된 크기(예, 5 pixel 또는 5 unit) 및 비율(예, 가로: 세로 = 1 : 1)에 따라 제1 그래픽 엘리먼트(10-1)가 표시될 수 있다. That is, in the first UI 10 of FIG. 1 , the first graphic element 10 - 1 is a graphic element of the first type with a preset size (eg, 5 pixel or 5 unit) and a ratio (eg, horizontal: vertical = 1 : 1), the first graphic element 10 - 1 may be displayed.

그리고, 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)는 제2 유형의 그래픽 엘리먼트로, 제2 그래픽 엘리먼트(10-2)와 제3 그래픽 엘리먼트(10-3)의 가로 비율이 3:7로 설정되어 있는 경우, 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)의 가로 영역의 비율이 3:7로 표시될 수 있다.In addition, the second graphic element 10-2 and the third graphic element 10-3 are graphic elements of the second type, and are formed of the second graphic element 10-2 and the third graphic element 10-3. When the horizontal ratio is set to 3:7, the ratio of the horizontal regions of the second graphic element 10 - 2 and the third graphic element 10 - 3 may be displayed as 3:7.

그리고, 제1 전자 장치(100-1)에서 가로 영역으로 디스플레이 화면의 크기가 증가된 제2 전자 장치(100-2)에는 제2 UI(20)가 표시될 수 있다. 제2 UI(20)는 제1 그래픽 엘리먼트(20-1), 제2 그래픽 엘리먼트(20-2) 및 제3 그래픽 엘리먼트(20-3)를 포함할 수 있다. 제2 UI(20)의 제1 그래픽 엘리먼트(20-1)는 제1 유형의 그래픽 엘리먼트로, 제1 UI(10-1)의 제1 그래픽 엘리먼트(10-1)와 크기 및 비율이 동일할 수 있다. 그리고, 제2 UI(20)의 제2 그래픽 엘리먼트(20-1) 및 제3 그래픽 엘리먼트(20-3)는 제2 유형의 그래픽 엘리먼트로, 제1 UI(10-1)의 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)과 동일하게 제2 그래픽 엘리먼트(20-2) 및 제3 그래픽 엘리먼트(20-3) 가로 영역이 3:7의 크기로 표시될 수 있다. 즉, 제2 UI(20)의 제2 그래픽 엘리먼트(20-2) 및 제3 그래픽 엘리먼트(20-3)의 크기 비율은 제1 UI(10)의 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)의 크기의 비율과 동일하나, 각각의 가로 영역의 크기가 증가되어 표시될 수 있다.In addition, the second UI 20 may be displayed on the second electronic device 100 - 2 in which the size of the display screen is increased in the horizontal area in the first electronic device 100 - 1 . The second UI 20 may include a first graphic element 20 - 1 , a second graphic element 20 - 2 , and a third graphic element 20 - 3 . The first graphic element 20-1 of the second UI 20 is a graphic element of the first type, and may have the same size and proportion as the first graphic element 10-1 of the first UI 10-1. can In addition, the second graphic element 20 - 1 and the third graphic element 20 - 3 of the second UI 20 are a second type of graphic element, and a second graphic element of the first UI 10 - 1 . Similarly to (10-2) and the third graphic element 10-3, the horizontal area of the second graphic element 20-2 and the third graphic element 20-3 may be displayed in a size of 3:7. . That is, the ratio of the size of the second graphic element 20-2 and the third graphic element 20-3 of the second UI 20 to the second graphic element 10-2 and the third graphic element 20-3 of the first UI 10 is It is the same as the ratio of the size of the 3 graphic elements 10 - 3 , but the size of each horizontal region may be increased and displayed.

그리고, 제1 전자 장치(100-1)에서 디스플레이 화면의 비율이 유지되며 디스플레이 화면의 크기가 증가된 제3 전자 장치(100-3)에는 제3 UI(30)가 표시될 수 있다. 제3 UI(30)는 제1 그래픽 엘리먼트(30-1), 제2 그래픽 엘리먼트(30-2) 및 제3 그래픽 엘리먼트(30-3) 를 포함할 수 있다.In addition, the third UI 30 may be displayed on the third electronic device 100 - 3 in which the ratio of the display screen is maintained in the first electronic device 100 - 1 and the size of the display screen is increased. The third UI 30 may include a first graphic element 30 - 1 , a second graphic element 30 - 2 , and a third graphic element 30 - 3 .

제3 UI(30)의 제1 그래픽 엘리먼트(30-1)는 제1 유형의 그래픽 엘리먼트로, 제1 UI(10)의 제1 그래픽 엘리먼트(10-1)와 크기 및 비율이 동일할 수 있다. 그리고, 제3 UI(30)의 제2 그래픽 엘리먼트(30-2) 및 제3 그래픽 엘리먼트(30-3)는 제2 유형의 그래픽 엘리먼트로, 제1 UI(10)의 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)와 동일한 가로 영역의 비율인 3:7의 비율로 제2 그래픽 엘리먼트(30-3) 및 제3 그래픽 엘리먼트(30-3)이 표시되며, 제2 그래픽 엘리먼트(30-3) 및 제3 그래픽 엘리먼트(30-3)의 전체적인 비율 또한 유지되어 표시될 수 있다. 다만, 제3 UI(30)의 제2 그래픽 엘리먼트(30-2) 및 제3 그래픽 엘리먼트(30-3)는 제1 UI(10)의 제2 그래픽 엘리먼트(10-2) 및 제3 그래픽 엘리먼트(10-3)에 비해 전체적인 크기가 증가될 수 있다. 즉, 디스플레이 화면의 크기가 변경되어 제1 UI(10)의 가 제3 UI(30)로 크기가 증가되는 경우, 제3 UI(30)에 포함된 제1 그래픽 엘리먼트(30-1)를 제2 그래픽 엘리먼트(30-2) 및 제3 그래픽 엘리먼트(30-3)와 서로 다른 비율로 크기가 조절되어 표시될 수 있다.The first graphic element 30 - 1 of the third UI 30 is a graphic element of the first type, and may have the same size and ratio as the first graphic element 10 - 1 of the first UI 10 . . In addition, the second graphic element 30 - 2 and the third graphic element 30 - 3 of the third UI 30 are graphic elements of the second type, and the second graphic element 10 of the first UI 10 . -2) and the third graphic element 10-3, the second graphic element 30-3 and the third graphic element 30-3 are displayed at a ratio of 3:7, which is the ratio of the same horizontal area, and the second graphic element 30-3 is displayed. The overall ratio of the second graphic element 30 - 3 and the third graphic element 30 - 3 may also be maintained and displayed. However, the second graphic element 30 - 2 and the third graphic element 30 - 3 of the third UI 30 are the second graphic element 10 - 2 and the third graphic element of the first UI 10 . The overall size can be increased compared to (10-3). That is, when the size of the display screen is changed and the size of the first UI 10 is increased to the third UI 30 , the first graphic element 30 - 1 included in the third UI 30 is removed. The size of the second graphic element 30-2 and the third graphic element 30-3 may be adjusted and displayed at different ratios.

상술한 실시 예에서는 UI에 포함된 적어도 두 개의 제2 유형의 엘리먼트 간 기 설정된 비율에 따라 적어도 두 개의 제2 유형의 엘리먼트가 표시되는 것으로, 설명하였으나, 이에 한정되지 않으며, 하나의 제2 유형의 엘리먼트만 UI에 포함될 수 있다. 또한, 추가적으로, 제2 유형의 엘리먼트 하나에 기 설정 범위의 크기 및 비율을 가지는 지정 값이 설정되어 표시될 수 있으며, 자세한 내용은 도 8에서 후술하도록 한다.In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 .

상술한 바와 같은 다양한 실시 예에 의해, 본 개시에 따른 전자 장치(100-1 내지 100-3)의 디스플레이 화면의 크기 및 비율에 따른 최적의 UI가 제공될 수 있다.According to various embodiments as described above, an optimal UI according to the size and ratio of the display screens of the electronic devices 100-1 to 100-3 according to the present disclosure may be provided.

도 2는 본 개시의 일 실시 예에 따른, 전자 장치의 구성을 설명하기 위한 블록도 이다.2 is a block diagram illustrating a configuration of an electronic device according to an embodiment of the present disclosure.

도 2를 참조하면, 전자 장치(100)는 메모리(110) 및 프로세서(120)를 포함할 수 있다. 실시 형태에 따라 도시되지 않았더라도 당업자에게 자명한 수준의 적절한 하드웨어/소프트웨어 구성들이 전자 장치(100)에 추가로 포함될 수 있다.Referring to FIG. 2 , the electronic device 100 may include a memory 110 and a processor 120 . Although not shown according to the embodiment, the electronic device 100 may further include appropriate hardware/software configurations that are obvious to those skilled in the art.

메모리(110)는 전자 장치(100)의 동작에 필요한 각종 프로그램 및 데이터를 저장할 수 있다. 구체적으로, 메모리(110)에는 적어도 하나의 인스트럭션이 저장될 수 있다. 프로세서(120)는 메모리(110)에 저장된 인스트럭션을 실행함으로써 전자 장치(100)의 동작을 수행할 수 있다.The memory 110 may store various programs and data necessary for the operation of the electronic device 100 . Specifically, at least one instruction may be stored in the memory 110 . The processor 120 may perform the operation of the electronic device 100 by executing an instruction stored in the memory 110 .

구체적으로, 메모리(110)는 전자 장치(100)의 적어도 하나의 다른 구성요소에 관계된 명령(instruction) 또는 데이터를 저장할 수 있다. 특히, 메모리(110)는 비휘발성 메모리, 휘발성 메모리, 플래시메모리(flash-memory), 하드디스크 드라이브(HDD) 또는 솔리드 스테이트 드라이브(SSD) 등으로 구현될 수 있다. 메모리(110)는 프로세서(120)에 의해 액세스되며, 프로세서(120)에 의한 데이터의 독취/기록/수정/삭제/갱신 등이 수행될 수 있다. 본 개시에서 메모리라는 용어는 메모리(110), 프로세서(120) 내 롬(미도시), 램(미도시) 또는 전자 장치(100)에 장착되는 메모리 카드(미도시)(예를 들어, micro SD 카드, 메모리 스틱)를 포함할 수 있다. Specifically, the memory 110 may store instructions or data related to at least one other component of the electronic device 100 . In particular, the memory 110 may be implemented as a non-volatile memory, a volatile memory, a flash-memory, a hard disk drive (HDD), or a solid state drive (SSD). The memory 110 is accessed by the processor 120 , and reading/writing/modification/deletion/update of data by the processor 120 may be performed. In the present disclosure, the term "memory" refers to the memory 110, a ROM (not shown) in the processor 120, a RAM (not shown), or a memory card (not shown) mounted in the electronic device 100 (eg, micro SD). card, memory stick).

그리고, 메모리(110)에는 UI를 구성하기 위한 복수의 그래픽 엘리먼트가 저장되어 있을 수 있다. In addition, a plurality of graphic elements for configuring the UI may be stored in the memory 110 .

그리고, 메모리(110)에는 복수의 그래픽 엘리먼트를 이용하여 UI를 표시하는 경우, UI에 표시된 그래픽 엘리먼트 각각의 유형 및 세부 정보들이 저장되어 있을 수 있다. 그래픽 엘리먼트의 유형 및 세부 정보에 대한 자세한 내용은 도 8을 통해 후술하도록 한다.In addition, when a UI is displayed using a plurality of graphic elements in the memory 110 , types and detailed information of each graphic element displayed on the UI may be stored. Details on the type and detailed information of the graphic element will be described later with reference to FIG. 8 .

프로세서(120)는 전자 장치(100)의 전반적인 동작을 제어하기 위한 구성이다. 예를 들면, 프로세서(120)는 운영 체제, 애플리케이션을 구동하여 프로세서(120)에 연결된 다수의 하드웨어 또는 소프트웨어 구성요소들을 제어할 수 있고, 각종 데이터 처리 및 연산을 수행할 수 있다. 프로세서(120)는 CPU(central processing unit) 또는 GPU(graphics-processing unit)이거나 둘 다일 수 있다. 프로세서(120)는 적어도 하나의 범용 프로세서(general processor), 디지털 신호 프로세서(digital signal processor), ASIC(Application specific integrated circuit), SoC(system on chip), MICOM(Microcomputer) 등으로 구현될 수 있다. 프로세서(120)는 메모리(110)에 저장된 컴퓨터 실행 가능한 적어도 하나의 명령어(instructions)를 실행할 수 있다.The processor 120 is a configuration for controlling the overall operation of the electronic device 100 . For example, the processor 120 may control a plurality of hardware or software components connected to the processor 120 by driving an operating system and an application, and may perform various data processing and operations. The processor 120 may be a central processing unit (CPU), a graphics-processing unit (GPU), or both. The processor 120 may be implemented as at least one general processor, a digital signal processor, an application specific integrated circuit (ASIC), a system on chip (SoC), a microcomputer (MICOM), or the like. The processor 120 may execute at least one computer-executable instruction stored in the memory 110 .

프로세서(120)는 UI를 표시하기 위한 이벤트가 발생되면, UI를 디스플레이 상에 표시하도록 제어할 수 있다. 본 개시의 일 실시 예로, 전자 장치(100)에 디스플레이가 포함된 경우, UI를 표시하기 위한 이벤트가 발생되면, 프로세서(120)는 UI를 디스플레이 상에 표시하도록 디스플레이를 제어할 수 있다. 또는, 전자 장치(100)에 디스플레이가 포함되어 있지 않고, 외부 디스플레이 장치와 연결될 수 있는 경우, UI를 표시하기 위한 이벤트가 발생되면, 프로세서(120)는 UI를 외부 디스플레이 장치에 표시하도록 전자 장치(100)를 제어할 수 있다.When an event for displaying the UI occurs, the processor 120 may control to display the UI on the display. As an embodiment of the present disclosure, when the electronic device 100 includes a display and an event for displaying the UI occurs, the processor 120 may control the display to display the UI on the display. Alternatively, if the electronic device 100 does not include a display and can be connected to an external display device, when an event for displaying the UI occurs, the processor 120 displays the UI on the external display device ( 100) can be controlled.

UI를 표시하기 위한 이벤트는 사용자 명령이 입력되는 이벤트, 기 설정된 시간이 도래하는 이벤트, 디스플레이 상에 표시되는 영상이 중단되거나 종료되는 이벤트 등을 포함할 수 있다. 다만, 이는 일 실시 예에 불과할 뿐, 본 개시의 UI를 표시하기 위한 이벤트가 상술한 예에 한정되는 것은 아니다. The event for displaying the UI may include an event in which a user command is input, an event in which a preset time arrives, an event in which an image displayed on the display is stopped or terminated, and the like. However, this is only an embodiment, and the event for displaying the UI of the present disclosure is not limited to the above-described example.

프로세서(120)는 UI를 표시하기 위한 사용자 명령이 입력되면, 디스플레이 화면의 크기 및 비율 중 적어도 하나를 식별할 수 있다. UI를 표시하기 위한 사용자 명령은 전자 장치(100)나 전자 장치(100)를 위한 리모컨에 구비된 특정 버튼을 선택하는 사용자 명령, 디스플레이 상에 표시된 메뉴를 선택하는 사용자 명령 또는 스마트 폰과 같은 사용자 단말 장치에 표시된 메뉴를 선택하는 명령 등을 포함할 수 있다. 상술한 바와 같은 사용자 명령이 입력되면, 프로세서(120)는 디스플레이 화면의 크기 및 비율 중 적어도 하나를 식별할 수 있다. 그리고, 디스플레이는 전자 장치(100)에 포함되어 있을 수 있으나, 이에 한정되지 않고 전자 장치(100)가 외부의 디스플레이 장치와 연결될 수 있으며, 프로세서(120)는 외부 디스플레이 장치의 디스플레이 화면의 크기 및 비율 중 적어도 하나를 식별할 수 있다.When a user command for displaying the UI is input, the processor 120 may identify at least one of a size and a ratio of the display screen. The user command for displaying the UI is a user command for selecting a specific button provided in the electronic device 100 or a remote control for the electronic device 100, a user command for selecting a menu displayed on the display, or a user terminal such as a smart phone. It may include a command for selecting a menu displayed on the device, and the like. When a user command as described above is input, the processor 120 may identify at least one of a size and a ratio of the display screen. In addition, the display may be included in the electronic device 100 , but the present invention is not limited thereto, and the electronic device 100 may be connected to an external display device, and the processor 120 may display a size and ratio of a display screen of the external display device. At least one of them can be identified.

디스플레이 화면의 크기 및 비율 중 적어도 하나가 식별되면, 프로세서(120)는 식별된 디스플레이 화면의 크기 또는 비율 중 적어도 하나를 바탕으로 UI를 구성하는 복수의 그래픽 엘리먼트 중 디스플레이 화면에 표시되는 UI에 포함되는 적어도 하나의 그래픽 엘리먼트를 식별할 수 있다. 구체적으로, 전자 장치(100)는 디스플레이 화면의 크기 및 비율을 바탕으로, UI에 포함될 그래픽 엘리먼트를 복수의 그래픽 엘리먼트 중에서 식별할 수 있다.When at least one of the size and ratio of the display screen is identified, the processor 120 is included in the UI displayed on the display screen among a plurality of graphic elements constituting the UI based on at least one of the identified size or ratio of the display screen At least one graphic element may be identified. Specifically, the electronic device 100 may identify a graphic element to be included in the UI from among the plurality of graphic elements based on the size and ratio of the display screen.

본 개시에 따른 그래픽 엘리먼트란 UI를 구성하는 구성요소를 의미할 수 있다. 예컨데, 그래픽 엘리먼트는 UI 또는 UI 엘리먼트를 구성하는 그래픽 툴을 의미할 수 있다. 본 개시의 일 실시 예에 따른, 그래픽 툴은 도 4에 도시된 핸들 엘리먼트(40-2) 및 바 엘리먼트(40-3) 등과 같은 단순한 그래픽 이미지로 구성될 수 있다. 다만, 이에 한정되지 않고, 그래픽 엘리먼트에는 컨텐츠, 아이콘, 텍스트, 위젯을 더 포함할 수 있다. 그리고, 그래픽 엘리먼트는 그래픽 엘리먼트에 지정된 각각의 유형에 따라, 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 조절되며, UI내에 포함될 수 있다. A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may refer to a UI or a graphic tool constituting the UI element. According to an embodiment of the present disclosure, the graphic tool may be composed of a simple graphic image such as the handle element 40-2 and the bar element 40-3 shown in FIG. 4 . However, the present invention is not limited thereto, and the graphic element may further include content, an icon, text, and a widget. In addition, the graphic element may be included in the UI, with at least one of a size and a ratio of the graphic element being adjusted according to each type specified in the graphic element.

일 실시 예로, 도 3을 참조하면, 복수의 그래픽 엘리먼트는 텍스트를 표시하기 위한 툴팁(Tooltip) 엘리먼트(40-1), 전자 장치(100)의 음량 또는 화면 밝기와 같은 설정 값이 조정됨에 따라 이동될 수 있는 핸들(Handle) 엘리먼트(40-2), 핸들 엘리먼트(40-2)가 움직일 수 있는 영역을 나타내는 바(Bar) 엘리먼트(40-3) 및 사용자가 터치 또는 선택함으로 핸들 엘리먼트(40-2)를 이동되도록 하는 방향 지시 엘리먼트(40-4), 썸네일 이미지가 표시될 수 있는 썸네일 엘리먼트(40-5), 오각형 모양의 엘리먼트(40-6), 화살표 모양의 엘리먼트(40-7) 및 텍스트를 표시하기 위한 텍스트 엘리먼트(40-8)를 포함할 수 있다.For example, referring to FIG. 3 , a plurality of graphic elements are moved as a setting value such as a tooltip element 40 - 1 for displaying text and a setting value such as a volume or screen brightness of the electronic device 100 is adjusted. A handle element 40-2 that can become a handle element 40-2, a bar element 40-3 indicating an area in which the handle element 40-2 can move, and a handle element 40- that the user touches or selects 2) a direction indicating element 40-4 for moving, a thumbnail element 40-5 on which a thumbnail image can be displayed, a pentagon-shaped element 40-6, an arrow-shaped element 40-7, and It may include a text element 40-8 for displaying text.

그리고, 프로세서(120)는 복수의 그래픽 엘리먼트(40-1 내지 40-8) 중 도 3의 음량, 화면 밝기와 같은 전자 장치(100)의 설정 값을 조절하기 위한 UI(40)를 구성하는 적어도 하나의 그래픽 엘리먼트를 식별할 수 있다. 즉, 프로세서는 복수의 그래픽 엘리먼트 중 UI(40)를 구성하는 툴팁(Tooltip) 엘리먼트(40-1), 핸들(Handle) 엘리먼트(40-2), 바(Bar) 엘리먼트(40-3) 및 방향 지시 엘리먼트(40-4)를 식별할 수 있다. In addition, the processor 120 includes at least one of the plurality of graphic elements 40-1 to 40-8 configuring the UI 40 for adjusting the setting values of the electronic device 100, such as the volume and screen brightness of FIG. 3 . One graphic element can be identified. That is, the processor includes a tooltip element 40-1, a handle element 40-2, a bar element 40-3, and a direction constituting the UI 40 among the plurality of graphic elements. An indication element 40-4 may be identified.

UI를 구성하는 복수의 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트가 식별되면, 프로세서(120)는 디스플레이 화면의 크기 및 비율 중 적어도 하나에 대응되도록 식별된 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 조절하여 식별된 적어도 하나의 그래픽 엘리먼트를 포함하는 UI를 디스플레이 상에 표시하도록 제어할 수 있다. 도 3을 참조하면, 프로세서(120)는 식별된 디스플레이 화면의 크기 및 비율 중 적어도 하나에 대응되도록 식별된 그래픽 엘리먼트(40-1 내지 40-4)의 크기 및 비율을 조절하여 음량, 화면 밝기와 같은 전자 장치(100)의 설정 값을 조절하기 위한 UI(40)를 표시하도록 제어할 수 있다. 예로, 도 3의 UI(40)는 디스플레이의 화면의 크기에 따라 바 엘리먼트(40-3)의 크기가 조절되어 표시될 수 있다. 그리고, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 프로세서(120)는 변경된 디스플레이의 화면에 대응되어 UI의 크기를 변경하여 표시하도록 제어할 수 있다. 그리고, 프로세서(120)는 UI의 크기를 변경하여 표시하도록 제어함에 있어서, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시하도록 제어할 수 있다. 구체적으로, UI에 포함된 그래픽 엘리먼트 각각의 종류에 따라, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 크기 및 비율 중 적어도 하나를 변경하여 UI를 표시하도록 제어할 수 있다. 예로, 도 4를 참조하면, 기존 UI(40)가 표시되고 있는 동안 디스플레이 화면의 크기가 증가하면, 프로세서(120)는 디스플레이 화면의 크기에 대응되는 UI(45)를 표시하도록 제어할 수 있다. 즉, 디스플레이 화면의 가로 영역의 비율이 증가되도록 디스플레이 화면의 크기가 증가된 경우, 프로세서(120)는 기존 UI(40)에 표시된 바 엘리먼트(40-3)의 크기를 증가시킨 바 엘리먼트(45-3)를 포함하는 UI(45)를 표시하도록 제어할 수 있다. 도 4에서 디스플레이 화면의 크기 및 비율이 변경됨에 따라, UI(40)의 크기가 변경된 UI(45)가 표시되는 경우, 기존 UI(40)에 포함된 바 엘리먼트(40-3)이 비해 UI(45)에 포함된 바 엘리먼트(45-3)의 크기가 증가될 수 있으나, UI(45)에 포함된 툴팁(Tooltip) 엘리먼트, 핸들(Handle) 엘리먼트 및 방향 지시 엘리먼트의 크기는 기존 UI(40)에 포함된 툴팁(Tooltip) 엘리먼트, 핸들(Handle) 엘리먼트 및 방향 지시 엘리먼트의 크기와 동일할 수 있다. 즉, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 프로세서(120)는 기존 UI(40)의 크기를 변경하여, UI(45)를 표시하도록 제어할 수 있다. 그리고, 프로세서(120)는 UI(45)를 표시하도록 제어함에 있어서, UI(45)에 포함된 바 엘리먼트(45-3)를 UI(45)에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시하도록 제어할 수 있다.When at least one graphic element is identified among the plurality of graphic elements constituting the UI, the processor 120 selects at least one of the size and ratio of the identified at least one graphic element to correspond to at least one of the size and ratio of the display screen. It can be controlled to display a UI including at least one identified graphic element by adjusting it on the display. Referring to FIG. 3 , the processor 120 adjusts the sizes and ratios of the identified graphic elements 40-1 to 40-4 to correspond to at least one of the identified sizes and ratios of the identified display screens, thereby increasing the volume, screen brightness and It is possible to control to display the UI 40 for adjusting the setting value of the same electronic device 100 . For example, in the UI 40 of FIG. 3 , the size of the bar element 40 - 3 may be adjusted and displayed according to the size of the screen of the display. In addition, when at least one of the size and ratio of the display screen is changed, the processor 120 may control to change and display the size of the UI in response to the changed screen of the display. In addition, the processor 120 controls to display by changing the size of the UI, so that at least one graphic element among graphic elements included in the UI is displayed by adjusting the size at a different ratio from that of other graphic elements included in the UI. can be controlled Specifically, the UI may be controlled to be displayed by changing at least one of a size and a ratio of at least one of the graphic elements included in the UI according to the type of each graphic element included in the UI. For example, referring to FIG. 4 , if the size of the display screen increases while the existing UI 40 is being displayed, the processor 120 may control to display the UI 45 corresponding to the size of the display screen. That is, when the size of the display screen is increased so that the ratio of the horizontal area of the display screen is increased, the processor 120 increases the size of the bar element 40-3 displayed on the existing UI 40 to the bar element 45- 3) can be controlled to display the UI 45 including the. As the size and ratio of the display screen are changed in FIG. 4 , when the UI 45 in which the size of the UI 40 is changed is displayed, compared to the bar element 40-3 included in the existing UI 40, the UI ( The size of the bar element 45-3 included in 45) may be increased, but the sizes of the tooltip element, the handle element, and the direction indicating element included in the UI 45 are similar to those of the existing UI 40. It may be the same as the size of the tooltip element, the handle element, and the direction indicating element included in the . That is, when at least one of the size and ratio of the display screen is changed, the processor 120 may change the size of the existing UI 40 to control the UI 45 to be displayed. And, in controlling the UI 45 to be displayed, the processor 120 resizes the bar element 45-3 included in the UI 45 to a different ratio from that of other graphic elements included in the UI 45. You can control the display by adjusting it.

그리고, 본 개시에 따른 일 실시 예로, 디스플레이 화면의 크기가 감소하는 경우, 프로세서(120)는 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 UI를 표시하도록 제어할 수 있다. 또한, 디스플레이 화면의 크기가 증가하는 경우, 복수의 그래픽 엘리먼트 중 적어도 하나를 UI에 추가하여 표시하도록 제어할 수 있다.And, according to an embodiment of the present disclosure, when the size of the display screen decreases, the processor 120 may control to display the UI by deleting at least one of graphic elements included in the UI. Also, when the size of the display screen increases, at least one of a plurality of graphic elements may be added and displayed in the UI.

그리고, 본 개시에 따른 일 실시 예로, UI를 변경하기 위한 사용자 명령이 입력되면, 프로세서(120)는 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 삭제하거나, 복수의 그래픽 엘리먼트 중 적어도 하나를 UI에 추가하여 UI를 표시하도록 제어할 수 있다. 즉, 본 개시에 따른 그래픽 엘리먼트가 사용자에 의해 조합되어, UI 각각에 대한 새로운 디자인을 할 필요 없이 디스플레이 환경에 대응되는 UI가 생성될 수 있다.And, according to an embodiment of the present disclosure, when a user command for changing the UI is input, the processor 120 deletes at least one graphic element among graphic elements included in the UI, or selects at least one of the plurality of graphic elements. You can control the UI to be displayed by adding it to the UI. That is, the graphic elements according to the present disclosure are combined by the user, so that a UI corresponding to the display environment may be generated without the need for a new design for each UI.

본 개시의 일 실시 예에 따르면, 전자 장치(100)는 복수의 그래픽 엘리먼트를 외부 서버로부터 수신할 수 있다. 그리고, 외부의 서버에서 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 전자 장치(100)는 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신할 수 있다. 그리고, 수신된 정보를 바탕으로, 프로세서(120)는 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 UI를 디스플레이 상에 표시하도록 제어할 수 있다. 외부 서버로부터 복수의 그래픽 엘리먼트 및 업데이트된 정보를 수신하는 내용에 대한 자세한 내용은 도 5 및 도 6을 통해 후술하도록 한다.According to an embodiment of the present disclosure, the electronic device 100 may receive a plurality of graphic elements from an external server. And, when there is an update on the plurality of graphic elements in the external server, the electronic device 100 may receive information on the updated graphic elements from the external server. And, based on the received information, the processor 120 may control to display the UI on the display by updating at least one graphic element among graphic elements included in the UI. Details of receiving a plurality of graphic elements and updated information from an external server will be described later with reference to FIGS. 5 and 6 .

본 개시의 일 실시 예로, 그래픽 엘리먼트는 제1 유형, 제2 유형 및 제3 유형의 그래픽 엘리먼트를 포함할 수 있다.In an embodiment of the present disclosure, the graphic element may include a first type, a second type, and a third type of graphic element.

본 개시의 일 실시 예에 따른, 제1 유형의 그래픽 엘리먼트는 UI 내에 기 설정된 크기 및 비율에 따라 표시될 수 있는 그래픽 엘리먼트로, 예로, 사용자에 의해 크기 및 비율이 기 설정되어(예로, 가로 x 세로: 6 x 8 pixel의 3:4 비율) 표시될 수 있다. 그리고, 일 실시 예에 따르면, UI를 표시하는 디스플레이 화면의 크기 및 비율이 변경되어도 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않을 수 있다. 본 개시의 일 실시 예에 따른, 제2 유형의 그래픽 엘리먼트는, UI 내에 제2 유형의 그래픽 엘리먼트가 표시될 영역이 설정되고 UI를 표시하는 디스플레이 화면의 크기 및 비율이 변경되는 경우, UI 전체의 크기 및 비율에 대응되도록 제2 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되며 표시될 수 있다. 즉, 본 개시의 일 실시 예에 따르면, UI 내에 제1 유형의 그래픽 엘리먼트 및 제2 유형의 그래픽 엘리먼트가 포함된 경우, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI 내에 포함된 제1 유형의 그래픽 엘리먼트는 UI 내에 포함된 제2 유형의 그래픽 엘리먼트와 서로 다른 비율로 크기가 조절되며 UI의 크기가 변경되어 표시될 수 있다. According to an embodiment of the present disclosure, the first type of graphic element is a graphic element that can be displayed according to a preset size and ratio in the UI. For example, the size and ratio are preset by the user (eg, horizontal x Vertical: 3:4 ratio of 6 x 8 pixel) can be displayed. And, according to an embodiment, even if the size and ratio of the display screen displaying the UI are changed, the size and ratio of the first type of graphic element may not change. According to an embodiment of the present disclosure, the second type of graphic element may include the entire UI when an area in which the second type of graphic element is to be displayed is set in the UI and the size and ratio of the display screen displaying the UI are changed. The size and proportion of the second type of graphic element may be changed and displayed to correspond to the size and proportion. That is, according to an embodiment of the present disclosure, when the first type of graphic element and the second type of graphic element are included in the UI and at least one of the size and ratio of the display screen is changed, the first type of graphic element included in the UI is changed. The tangible graphic element may be sized at a different ratio from that of the second type of graphic element included in the UI, and the size of the UI may be changed and displayed.

본 개시의 일 실시 예에 따르면, UI 내에 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 포함된 경우, 적어도 두 개의 제2 유형의 그래픽 엘리먼트에 기 설정된 비율에 따라 두 개의 제2 유형의 그래픽 엘리먼트가 표시될 수 있다. 그리고, UI를 표시하는 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트 간의 기 설정된 비율이 유지되면서 적어도 두 개의 제2 유형의 그래픽 엘리먼트 각각의 크기 및 비율 중 적어도 하나가 변경되며 표시될 수 있다. 상술한 실시 예에서는 UI에 포함된 적어도 두 개의 제2 유형의 엘리먼트 간 기 설정된 비율에 따라 적어도 두 개의 제2 유형의 엘리먼트가 표시되는 것으로, 설명하였으나, 이에 한정되지 않으며, 하나의 제2 유형의 엘리먼트만 UI에 포함될 수 있다. 또한, 추가적으로, 제2 유형의 엘리먼트 하나에 기 설정 범위의 크기 및 비율을 가지는 지정 값이 설정되어 표시될 수 있으며, 자세한 내용은 도 8에서 후술하도록 한다. 또한, 제3 유형의 그래픽 엘리먼트는 제3 유형의 그래픽 엘리먼트에 포함되는 정보의 크기에 따라 제3 유형의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 표시될 수 있다. . 즉, 본 개시의 일 실시 예에 따르면, UI 내에 제1 유형의 그래픽 엘리먼트, 제2 유형의 그래픽 엘리먼트 및 제3 유형의 그래픽 엘리먼트가 포함된 경우, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI 내에 포함된 제1 유형의 그래픽 엘리먼트는 UI 내에 포함된 제1 및 제2 유형의 그래픽 엘리먼트와 서로 다른 비율로 크기가 조절되며 UI의 크기가 변경되어 표시될 수 있다. 또한, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI 내에 포함된 제2 유형의 그래픽 엘리먼트는 UI 내에 포함된 제1 및 제3 유형의 그래픽 엘리먼트와 서로 다른 비율로 크기가 조절되며 UI의 크기가 변경되어 표시될 수 있다.According to an embodiment of the present disclosure, when at least two graphic elements of the second type are included in the UI, two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type. can be In addition, when at least one of the size and ratio of the display screen for displaying the UI is changed, a preset ratio between at least two second type graphic elements included in the UI is maintained while at least two graphic elements of the second type are each changed. At least one of size and proportion may be changed and displayed. In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 . Also, the third type of graphic element may be displayed by changing at least one of a size and a ratio of the third type of graphic element according to the size of information included in the third type of graphic element. . That is, according to an embodiment of the present disclosure, when the first type of graphic element, the second type of graphic element, and the third type of graphic element are included in the UI, when at least one of the size and ratio of the display screen is changed , the first type of graphic element included in the UI may be sized at a different ratio from that of the first and second type of graphic elements included in the UI, and the size of the UI may be changed and displayed. In addition, when at least one of the size and ratio of the display screen is changed, the second type of graphic element included in the UI is sized at a different ratio from the first and third type of graphic elements included in the UI, and the size of the UI is changed. The size may be changed and displayed.

그래픽 엘리먼트의 유형에 대해서는 도 7및 도 8을 통해 후술하도록 한다.The type of graphic element will be described later with reference to FIGS. 7 and 8 .

본 개시의 일 실시 예에 따른 전자 장치(100)가 복수의 디스플레이를 조합하여 하나의 화면으로 표시할 수 있는 장치인 경우, 프로세서(120)는 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별할 수 있다. 그리고, 프로세서(120)는 식별된 디스플레이 화면의 크기 및 비율을 바탕으로, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하도록 제어할 수 있다. When the electronic device 100 according to an embodiment of the present disclosure is a device capable of displaying a single screen by combining a plurality of displays, the processor 120 changes the size of the display screen according to the combination of at least one display. and ratios. In addition, the processor 120 may control to change and display at least one of the sizes and ratios of at least one graphic element among the graphic elements included in the UI based on the identified size and ratio of the display screen.

본 개시의 일 실시 예에 따른, 디스플레이가 회전 가능한 경우, 프로세서(120)는 디스플레이의 회전에 따라 변경된 디스플레이 화면의 비율을 식별할 수 있다. 그리고, 프로세서(120)는 식별된 디스플레이 화면의 비율을 바탕으로 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 디스플레이 상에 표시하도록 제어할 수 있다. 예로, 16:9 비율의 디스플레이 화면이 회전되어, 9:16 비율의 디스플레이 화면으로 변경되는 경우, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 세로 비율이 증가되어 표시될 수 있다.According to an embodiment of the present disclosure, when the display is rotatable, the processor 120 may identify a ratio of the display screen changed according to the rotation of the display. In addition, the processor 120 may control to display on the display by changing at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI based on the identified ratio of the display screen. For example, when the 16:9 ratio display screen is rotated and changed to the 9:16 ratio display screen, the vertical ratio of at least one graphic element included in the UI may be increased and displayed.

상술한 바와 같은 다양한 실시 예들에 의해 디스플레이 화면의 크기 및 비율에 대응되도록 그래픽 엘리먼트의 크기 및 비율이 변경되어, 디스플레이 화면의 크기 및 비율에 맞는 최적의 UI가 표시될 수 있다.According to various embodiments as described above, the size and ratio of graphic elements are changed to correspond to the size and ratio of the display screen, so that an optimal UI suitable for the size and ratio of the display screen can be displayed.

도 5는 본 개시의 일 실시 예에 따른, 복수의 전자 장치가 그래픽 엘리먼트를 외부 서버로부터 획득하여, UI를 표시하는 방법을 나타내는 도면이다.5 is a diagram illustrating a method in which a plurality of electronic devices obtain a graphic element from an external server to display a UI, according to an embodiment of the present disclosure.

도 5를 참조하면, 그래픽 엘리먼트를 관리하는 외부 서버(200)로부터 각각의 전자 장치(100-1 내지 100-3)는 복수의 그래픽 엘리먼트를 수신할 수 있다. 그리고, 각각의 전자 장치(100-1 내지 100-3)는 수신한 복수의 그래픽 엘리먼트를 바탕으로 디스플레이 화면의 크기 및 비율에 대응되는 UI(10-1 내지 10-3)를 각각 표시할 수 있다. 구체적으로, 제1 전자 장치(100-1)는 외부 서버(200)로부터 복수의 그래픽 엘리먼트를 수신하여, 제1 전자 장치(100-1)의 환경에 대응되는 UI(10-1)를 표시할 수 있다. 그리고, 제2 전자 장치(100-2)는 외부 서버(200)로부터 복수의 그래픽 엘리먼트를 수신하여, 제2 전자 장치(100-2)의 환경에 대응되는 UI(10-2)를 표시할 수 있다. 또한, 제3 전자 장치(100-3)는 외부 서버(200)로부터 복수의 그래픽 엘리먼트를 수신하여, 제3 전자 장치(100-3)의 환경에 대응되는 UI(10-3)를 표시할 수 있다. 구체적으로, 전자 장치의 디스플레이 화면의 크기 및 비율, 전자 장치의 어플리케이션 환경, 각각의 전자 장치의 사용자의 설정에 따라 복수의 그래픽 엘리먼트 중 적어도 하나의 크기 및 비율을 변경하여 각각의 전자 장치의 환경에 대응되는 UI가 표시될 수 있다.Referring to FIG. 5 , each of the electronic devices 100 - 1 to 100 - 3 may receive a plurality of graphic elements from the external server 200 that manages the graphic elements. In addition, each of the electronic devices 100-1 to 100-3 may display UIs 10-1 to 10-3 corresponding to the size and ratio of the display screen, respectively, based on the received plurality of graphic elements. . Specifically, the first electronic device 100-1 receives a plurality of graphic elements from the external server 200 and displays the UI 10-1 corresponding to the environment of the first electronic device 100-1. can In addition, the second electronic device 100 - 2 may receive a plurality of graphic elements from the external server 200 and display the UI 10 - 2 corresponding to the environment of the second electronic device 100 - 2 . have. In addition, the third electronic device 100 - 3 may receive a plurality of graphic elements from the external server 200 and display the UI 10 - 3 corresponding to the environment of the third electronic device 100 - 3 . have. Specifically, by changing the size and ratio of at least one of the plurality of graphic elements according to the size and ratio of the display screen of the electronic device, the application environment of the electronic device, and the setting of the user of each electronic device, the size and ratio of the display screen of the electronic device are changed to the environment of each electronic device. A corresponding UI may be displayed.

도 6은 본 개시의 일 실시 예에 따른, 복수의 전자 장치가 그래픽 엘리먼트에 대한 업데이트 정보를 외부 서버로부터 획득하여, 업데이트 된 그래픽 엘리먼트를 표시하는 표시하는 방법을 나타내는 도면이다.6 is a diagram illustrating a method by which a plurality of electronic devices obtain update information on a graphic element from an external server and display the updated graphic element, according to an embodiment of the present disclosure.

도 6을 참조하면, 제1 전자 장치(100-1) 내지 제3 전자 장치(100-3) 각각의 외부 서버(200)로부터 복수의 그래픽 엘리먼트를 수신하여, 수신한 복수의 그래픽 엘리먼트 중 적어도 하나를 이용하여 UI를 표시할 수 있다. 구체적으로, 제1 전자 장치(100-1) 내지 제3 전자 장치(100-3) 각각의 환경에 대응되는 UI가 복수의 그래픽 엘리먼트를 통해 표시될 수 있다.Referring to FIG. 6 , a plurality of graphic elements are received from the external server 200 of each of the first electronic device 100-1 to the third electronic device 100-3, and at least one of the received graphic elements is received. can be used to display the UI. Specifically, a UI corresponding to each environment of the first electronic device 100-1 to the third electronic device 100-3 may be displayed through a plurality of graphic elements.

그리고, 외부 서버(200)에서 복수의 그래픽 엘리먼트 중 적어도 하나에 대한 업데이트가 있는 경우, 외부 서버(200)는 제1 전자 장치(100-1) 내지 제3 전자 장치(100-3) 각각에 업데이트된 그래픽 엘리먼트에 대한 정보를 전송할 수 있다. 그래픽 엘리먼트에 대한 업데이트란 그래픽 엘리먼트의 모양, 색상 변경 및 텍스트를 포함하는 그래픽 엘리먼트의 경우 텍스트의 글꼴 또는 텍스트 크기 등이 변경되는 것을 의미할 수 있으며, 다만, 이에 한정되지 않고, 그래픽 엘리먼트에 서 변경 가능한 모든 사항에 대한 업데이트를 포함할 수 있다.And, when there is an update on at least one of the plurality of graphic elements in the external server 200, the external server 200 updates each of the first electronic device 100-1 to the third electronic device 100-3. It is possible to transmit information on the graphic element. The update of the graphic element may mean that the shape and color of the graphic element are changed and, in the case of a graphic element including text, the font or text size of the text is changed, but is not limited thereto, and changes in the graphic element are not limited thereto. It can include updates for anything possible.

본 개시의 일 실시 예로, 제1 전자 장치(100-1)에서 제1 그래픽 엘리먼트(10-1)가 포함된 제1 UI(10)가 표시되고, 외부 서버(200)에서 제1 그래픽 엘리먼트(10-1)가 제2 그래픽 엘리먼트(10-2)로 업데이트된 경우, 외부 서버(200)는 제1 전자 장치(100-1) 내지 제3 전자 장치(100-3)에 업데이트된 제2 그래픽 엘리먼트(10-2)에 대한 정보를 전송할 수 있다. In an embodiment of the present disclosure, the first UI 10 including the first graphic element 10-1 is displayed in the first electronic device 100-1, and the first graphic element 10-1 is displayed in the external server 200 When 10-1) is updated to the second graphic element 10-2, the external server 200 provides the updated second graphic in the first electronic device 100-1 to the third electronic device 100-3. Information on the element 10-2 may be transmitted.

그리고, 제1 전자 장치(100-1)가 외부 서버(200)로부터 업데이트된 제2 그래픽 엘리먼트(10-2)에 대한 정보를 수신하면, 제1 전자 장치(100-1)는 제1 UI(10)에 포함된 제1 그래픽 엘리먼트(10-1)가 제2 그래픽 엘리먼트(10-2)로 업데이트된 제2 UI(15)를 표시할 수 있다. And, when the first electronic device 100-1 receives the updated information on the second graphic element 10-2 from the external server 200, the first electronic device 100-1 displays the first UI ( The first graphic element 10 - 1 included in 10 ) may display the updated second UI 15 with the second graphic element 10 - 2 .

그리고, 제2 전자 장치(100-2)에서 제1 그래픽 엘리먼트(10-1)가 포함되지 않은 제3 UI(20)가 표시되는 경우, 제2 전자 장치(100-2)는 업데이트된 제2 그래픽 엘리먼트(10-2)에 대한 정보를 수신하여도, 제3 UI(20)를 업데이트 하지 않고 그대로 표시할 수 있다.In addition, when the third UI 20 that does not include the first graphic element 10 - 1 is displayed on the second electronic device 100 - 2 , the second electronic device 100 - 2 displays the updated second Even when information on the graphic element 10 - 2 is received, the third UI 20 may be displayed as it is without updating.

상술한 바와 같이 UI를 구성하는 그래픽 엘리먼트 단위로 관리되는 경우, 전자 장치는 기존 UI에서 변경된 그래픽 엘리먼트만 변경하면 되므로, 하나의 그래픽 엘리먼트를 수정하기 위해 UI에 대한 전체적인 수정을 할 필요가 없게 된다.As described above, when managed in units of graphic elements constituting the UI, since the electronic device only needs to change graphic elements that have been changed in the existing UI, there is no need to modify the entire UI in order to correct one graphic element.

도 7은 UI에 포함된 그래픽 엘리먼트 각각의 종류에 따라 그래픽 엘리먼트 중 적어도 하나의 크기 및 비율이 변경되어 UI가 표시되는 방법을 나타내는 도면이다.7 is a diagram illustrating a method in which a UI is displayed by changing a size and a ratio of at least one of graphic elements according to each type of graphic elements included in the UI.

본 개시의 일 실시 예에 따르면, 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, UI에 포함된 그래픽 엘리먼트 각각의 유형에 따라, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 UI가 표시될 수 있다.According to an embodiment of the present disclosure, when at least one of the size and ratio of the display screen is changed, the size and ratio of at least one graphic element among the graphic elements included in the UI according to each type of the graphic element included in the UI At least one of them may be changed to display the UI.

본 개시의 일 실시 예에 따르면, 그래픽 엘리먼트는 제1 유형 그래픽 엘리먼트, 제2 유형 그래픽 엘리먼트 및 제3 유형 그래픽 엘리먼트를 포함할 수 있다. 그리고, 제1 유형 그래픽 엘리먼트, 제2 유형 그래픽 엘리먼트 및 제3 유형 그래픽 엘리먼트 중 적어도 하나의 유형을 포함하는 UI가 표시될 수 있다.According to an embodiment of the present disclosure, the graphic element may include a first type graphic element, a second type graphic element, and a third type graphic element. In addition, a UI including at least one of the first type graphic element, the second type graphic element, and the third type graphic element may be displayed.

본 개시의 일 실시 예에 따른, 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율에 따라 UI내에 표시될 수 있는 그래픽 엘리먼트로, 예로, 사용자에 의해 크기 및 비율이 기 설정되어 표시될 수 있다. 그리고, UI를 표시하는 디스플레이 화면의 크기 및 비율이 변경되어도 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않을 수 있다. 즉, 사용자에 의해 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 한번 기 설정된 경우, 디스플레이 화면의 크기 및 비율이 변경되어 UI 전체의 크기가 변경되어도, 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율을 유지하면서, 표시될 수 있다. 본 개시의 일 실시 예에 따르면, 제1 유형의 그래픽 엘리먼트에 기 설정된 지정 값(reserved value)을 부여함으로, 제1 유형의 그래픽 엘리먼트가 기 설정된 크기 및 비율을 유지하며 표시될 수 있다. 예로, 도 7을 참조하면, 제1 UI(70)에 포함된 제1 그래픽 엘리먼트(70-1)는 제1 유형의 그래픽 엘리먼트 일 수 있다. 일 실시 예로, 제1 그래픽 엘리먼트(70-1)는 텍스트 또는 이미지를 표시하기 위한 그래픽 엘리먼트일 수 있다. 제1 그래픽 엘리먼트(70-1)는 사용자에 의해 지정 값이 지정되어 있을 수 있으며, 가로 및 세로의 길이가 지정되어 있을 수 있다. 이에 더해 제1 그래픽 엘리먼트(70-1)의 색상, 투명도 등이 기 설정(예, 화이트 색상, 투명도 80%)되어 있을 수 있다. According to an embodiment of the present disclosure, the first type of graphic element is a graphic element that can be displayed in the UI according to a preset size and ratio, for example, can be displayed with a preset size and ratio set by a user. Also, even if the size and ratio of the display screen displaying the UI are changed, the size and ratio of the first type of graphic element may not change. That is, when the size and ratio of the first type of graphic element is preset by the user once, even if the size and ratio of the display screen are changed and the size of the entire UI is changed, the first type of graphic element has the preset size and ratio can be displayed while maintaining According to an embodiment of the present disclosure, by giving a preset value (reserved value) to the graphic element of the first type, the graphic element of the first type may be displayed while maintaining the preset size and ratio. For example, referring to FIG. 7 , the first graphic element 70 - 1 included in the first UI 70 may be a graphic element of the first type. As an embodiment, the first graphic element 70 - 1 may be a graphic element for displaying text or an image. The first graphic element 70 - 1 may have a designated value designated by the user, and horizontal and vertical lengths may be designated. In addition, the color and transparency of the first graphic element 70-1 may be preset (eg, white color, transparency 80%).

그리고, 제1 UI(70)를 표시하기 위한 디스플레이 화면의 크기가 감소하는 경우, 제1 UI(70) 전체의 크기가 감소한 제2 UI(80)가 표시될 수 있다. UI 전체의 크기가 감소한 제2 UI(80)가 표시되는 경우에도 제2 UI(80)에 포함된 제1 유형의 그래픽 엘리먼트인 제1 그래픽 엘리먼트(80-1)는 지정 값에 의해 그 크기 및 비율이 유지되며 표시될 수 있다. In addition, when the size of the display screen for displaying the first UI 70 is reduced, the second UI 80 in which the overall size of the first UI 70 is reduced may be displayed. Even when the second UI 80 in which the overall size of the UI is reduced is displayed, the first graphic element 80 - 1, which is a first type of graphic element included in the second UI 80, is the size and The ratio is maintained and can be displayed.

본 개시의 일 실시 예에 따르면, UI는 디스플레이 화면의 크기 또는 비율에 변경되는 정도에 대응되어, UI의 전체 크기 또는 비율이 변경될 수 있다. 예로, 디스플레이 화면의 크기가 2배로 증가되는 경우, UI도 2배로 증가될 수 있다. 다만, 이는 일 실시 예에 불과할 뿐, 본 개시의 디스플레이 화면의 크기 증가에 따른 UI 전체의 크기 증가 정도는 상술한 예에 한정되는 것은 아니다.According to an embodiment of the present disclosure, the overall size or ratio of the UI may be changed in response to the degree to which the UI is changed in the size or ratio of the display screen. For example, when the size of the display screen is doubled, the UI may also be doubled. However, this is only an example, and the degree of increase in the overall size of the UI according to the increase in the size of the display screen of the present disclosure is not limited to the above-described example.

그리고, 제1 UI(70)를 표시하기 위한 디스플레이 화면의 크기가 증가하는 경우, 제1 UI(70) 전체의 크기가 증가한 제3 UI(90)가 표시될 수 있다. UI 전체의 크기가 증가한 제3 UI(90)가 표시되는 경우에도 제3 UI(90)에 포함된 제1 유형의 그래픽 엘리먼트인 제1 그래픽 엘리먼트(90-1)는 지정 값에 의해 그 크기 및 비율이 유지되며 표시될 수 있다.In addition, when the size of the display screen for displaying the first UI 70 increases, the third UI 90 with the overall size of the first UI 70 increased may be displayed. Even when the third UI 90 with an increased size of the entire UI is displayed, the first graphic element 90 - 1, which is a first type of graphic element included in the third UI 90 , has its size and The ratio is maintained and can be displayed.

본 개시의 일 실시 예에 따른, 제2 유형의 그래픽 엘리먼트는, UI 내에 제2 유형의 그래픽 엘리먼트가 표시될 영역이 설정되고 UI를 표시하는 디스플레이 화면의 크기 및 비율이 변경되는 경우, UI 전체의 크기 및 비율에 대응되도록 제2 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되며 표시될 수 있다. 구체적으로, 제2 유형의 그래픽 엘리먼트에 공유 값(shared value)이라는 비율을 나타내는 값을 지정함으로, UI 전체의 크기 및 비율에 대응되도록 제2 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되며 표시될 수 있다. 구체적으로, UI에 제2 유형의 그래픽 엘리먼트가 하나인 경우, UI 내에 제2 유형의 그래픽 엘리먼트가 표시될 영역이 설정될 수 있으며, 이 경우, 하나의 제2 유형의 그래픽 엘리먼트의 공유 값은 1일 수 있다. According to an embodiment of the present disclosure, the second type of graphic element may include the entire UI when an area in which the second type of graphic element is to be displayed is set in the UI and the size and ratio of the display screen displaying the UI are changed. The size and proportion of the second type of graphic element may be changed and displayed to correspond to the size and proportion. Specifically, by designating a value representing a ratio of a shared value to a graphic element of the second type, the size and ratio of the graphic element of the second type can be changed and displayed to correspond to the size and ratio of the entire UI. have. Specifically, when there is one graphic element of the second type in the UI, an area in which the graphic element of the second type is displayed may be set in the UI. In this case, the shared value of one graphic element of the second type is 1 can be

또는, UI에 제2 유형의 그래픽 엘리먼트가 두 개인 경우, UI 내에 두 개의 제2 유형의 그래픽 엘리먼트가 표시될 영역이 설정될 수 있으며, 이 경우, 두 개의 그래픽 엘리먼트의 공유 값의 합이 1이 될 수 있다. 그리고, UI를 표시하는 디스플레이 화면의 크기 및 비율이 변경되어 UI 전체의 크기가 변경되면, UI 내에 두 개의 제2 유형의 그래픽 엘리먼트가 표시될 영역의 크기가 변경되며 표시될 수 있다. 그리고, 두 개의 제2 유형의 그래픽 엘리먼트는 각각 설정된 공유 값의 비율이 유지되며 표시될 수 있다.Alternatively, when there are two graphic elements of the second type in the UI, an area in which the two graphic elements of the second type are displayed may be set in the UI. In this case, the sum of the shared values of the two graphic elements is 1. can be In addition, when the size and ratio of the display screen for displaying the UI is changed and thus the overall size of the UI is changed, the size of the area in which the two second type graphic elements are to be displayed may be changed and displayed. In addition, the two second type graphic elements may be displayed while maintaining a ratio of a shared value set respectively.

예로, 도 7의 제1 UI(70)에는 제2 유형의 엘리먼트인 제2 그래픽 엘리먼트(70-2) 및 제3 그래픽 엘리먼트(70-3)가 포함되어 있을 수 있다. 일 실시 예로, 제2 그래픽 엘리먼트(70-2) 및 제3 그래픽 엘리먼트(70-3)는 텍스트를 표시하기 위한 그래픽 엘리먼트일 수 있다. 제2 그래픽 엘리먼트(70-2) 및 제3 그래픽 엘리먼트(70-3)는 사용자에 의해 공유 값이 각각 0.7, 0.3으로 설정되어 있을 수 있다. 이 경우, UI내에 포함된 제1 그래픽 엘리먼트(70-1) 및 제4 그래픽 엘리먼트(70-4)의 영역을 제외한 나머지 영역에 제2 그래픽 엘리먼트(70-2) 및 제3 그래픽 엘리먼트(70-3)가 표시될 수 있으며, 제2 그래픽 엘리먼트(70-2)와 제3 그래픽 엘리먼트(70-3)는 나머지 영역에 7 : 3의 크기 비율로 표시될 수 있다.For example, the first UI 70 of FIG. 7 may include a second graphic element 70 - 2 and a third graphic element 70 - 3 that are elements of the second type. As an embodiment, the second graphic element 70 - 2 and the third graphic element 70 - 3 may be graphic elements for displaying text. The share values of the second graphic element 70-2 and the third graphic element 70-3 may be set to 0.7 and 0.3, respectively, by the user. In this case, the second graphic element 70-2 and the third graphic element 70- are located in the remaining regions except for the regions of the first graphic element 70-1 and the fourth graphic element 70-4 included in the UI. 3) may be displayed, and the second graphic element 70-2 and the third graphic element 70-3 may be displayed in the remaining area at a size ratio of 7:3.

그리고, 제1 UI(70)를 표시하는 디스플레이의 크기가 감소되어, 제1 UI(70)에서 크기가 감소된 제2 UI(80)가 디스플레이 상에 표시되는 경우, 제2 UI(80)에서 제1 그래픽 엘리먼트(80-1) 및 제4 그래픽 엘리먼트(80-4)를 포함하는 영역을 제외한 나머지 영역에 제2 그래픽 엘리먼트(80-2) 및 제3 그래픽 엘리먼트(80-3)가 7 : 3의 크기 비율로 표시될 수 있다.And, when the size of the display for displaying the first UI 70 is reduced and the second UI 80 with the reduced size in the first UI 70 is displayed on the display, in the second UI 80 In the remaining area except for the area including the first graphic element 80-1 and the fourth graphic element 80-4, the second graphic element 80-2 and the third graphic element 80-3 are 7 : It can be expressed as a size ratio of 3.

또한, 그리고, 제1 UI(70)를 표시하는 디스플레이의 크기가 증가되어, 제1 UI(70)에서 크기가 증가된 제3 UI(90)가 디스플레이 상에 표시되는 경우, 제3 UI(90)에서 제1 그래픽 엘리먼트(90-1) 및 제4 그래픽 엘리먼트(90-4)를 포함하는 영역을 제외한 나머지 영역에 제2 그래픽 엘리먼트(90-2) 및 제3 그래픽 엘리먼트(90-3)가 7 : 3의 크기 비율로 표시될 수 있다. 상술한 실시 예에서는 UI에 포함된 적어도 두 개의 제2 유형의 엘리먼트 간 기 설정된 비율에 따라 적어도 두 개의 제2 유형의 엘리먼트가 표시되는 것으로, 설명하였으나, 이에 한정되지 않으며, 하나의 제2 유형의 엘리먼트만 UI에 포함될 수 있다. 또한, 추가적으로, 제2 유형의 엘리먼트 하나에 기 설정 범위의 크기 및 비율을 가지는 지정 값이 설정되어 표시될 수 있으며, 자세한 내용은 도 8에서 후술하도록 한다. 본 개시의 일 실시 예에 따른, 제3 유형의 그래픽 엘리먼트는 제3 유형의 그래픽 엘리먼트 영역 내에 포함될 수 있는 정보의 크기에 의해 제3 유형의 그래픽 엘리먼트의 영역의 크기가 식별될 수 있다. 즉, 제3 유형의 그래픽 엘리먼트가 텍스트를 표시하기 위한 그래픽 엘리먼트인 경우, 제3 유형의 그래픽 엘리먼트에 표시되는 텍스트의 개수가 증가될수록 제3 유형의 그래픽 엘리먼트의 크기가 증가될 수 있다. 또한, 제3 유형의 그래픽 엘리먼트가 사용자에 의해 선택될 수 있는 아이콘을 표시하기 위한 그래픽 엘리먼트인 경우, 제3 유형의 그래픽 엘리먼트에 포함되는 아이콘의 개수에 따라 제3 유형의 그래픽 엘리먼트의 크기가 변경될 수 있다.Also, when the size of the display displaying the first UI 70 is increased and the third UI 90 having the increased size in the first UI 70 is displayed on the display, the third UI 90 ), the second graphic element 90-2 and the third graphic element 90-3 are formed in the remaining area except for the area including the first graphic element 90-1 and the fourth graphic element 90-4. It can be displayed in a size ratio of 7:3. In the above-described embodiment, it has been described that at least two second type elements are displayed according to a preset ratio between at least two second type elements included in the UI, but the present invention is not limited thereto. Only elements can be included in the UI. In addition, a designated value having a size and a ratio of a preset range may be set and displayed in one element of the second type, and details will be described later with reference to FIG. 8 . According to an embodiment of the present disclosure, in the third type of graphic element, the size of the area of the third type of graphic element may be identified by the size of information that may be included in the area of the third type of graphic element. That is, when the third type of graphic element is a graphic element for displaying text, the size of the third type of graphic element may increase as the number of text displayed in the third type of graphic element increases. In addition, when the graphic element of the third type is a graphic element for displaying an icon that can be selected by the user, the size of the graphic element of the third type is changed according to the number of icons included in the graphic element of the third type can be

예로, 도 7의 제1 UI(70)는 제3 유형의 그래픽 엘리먼트인 제4 그래픽 엘리먼트(70-4)를 포함할 수 있다. UI를 표시하는 디스플레이 화면 및 비율의 변경에 따라서는 제4 그래픽 엘리먼트(70-4)의 크기 및 비율이 변경되지 않으며, 제4 그래픽 엘리먼트(70-4)에 포함되는 정보의 크기에 따라 크기 또는 비율이 변경될 수 있다. 즉, 제1 UI(70)와 UI 전체의 크기가 증가된 제3 UI(90)에서 제4 그래픽 엘리먼트에 포함되는 정보의 크기가 동일한 경우, 제1 UI(70)에 에 포함된 제4 그래픽 엘리먼트(70-4) 및 제3 UI(90)에 포함된 제4 그래픽 엘리먼트(90-4)의 크기 및 비율이 동일할 수 있다. 또한, 제1 UI(70)에서 UI 전체의 크기가 감소된 제2 UI(80)에 포함된 제4 그래픽 엘리먼트(80-4)에 포함된 정보의 크기가 제1 UI(70)에 포함된 제4 그래픽 엘리먼트(70-4)에 포함된 정보의 크기보다 큰 경우, 제2 UI(80)에 포함된 제4 그래픽 엘리먼트(80-4)의 크기가 제1 UI(70)에 포함된 제4 그래픽 엘리먼트(70-4)에 비해 더 클 수 있다.For example, the first UI 70 of FIG. 7 may include a fourth graphic element 70 - 4 that is a third type of graphic element. The size and ratio of the fourth graphic element 70-4 do not change according to the change of the display screen and the ratio for displaying the UI, and the size or ratio according to the size of information included in the fourth graphic element 70-4 The ratio may be changed. That is, when the size of the information included in the fourth graphic element in the first UI 70 and the third UI 90 in which the overall size of the UI is increased is the same, the fourth graphic included in the first UI 70 is The size and ratio of the element 70 - 4 and the fourth graphic element 90 - 4 included in the third UI 90 may be the same. In addition, the size of information included in the fourth graphic element 80-4 included in the second UI 80 in which the overall size of the UI is reduced in the first UI 70 is included in the first UI 70. When the size of the information included in the fourth graphic element 70 - 4 is larger than the size of the fourth graphic element 80 - 4 included in the second UI 80 , the size of the fourth graphic element 80 - 4 included in the first UI 70 is larger than the size of the information included in the first UI 70 . 4 may be larger than the graphic element 70-4.

상술한 바와 같은 다양한 실시 예들에 의해, 디스플레이의 화면의 크기 또는 비율이 변경되어 UI 전체의 크기 또는 비율이 변경되더라도, UI 전체의 크기에 대응되도록 UI에 포함된 그래픽 엘리먼트 각각이 각 유형에 따라 표시될 수 있어, 디스플레이의 화면 및 비율에 맞는 UI를 개별적으로 디자인하여야 할 필요가 없게 될 수 있다.According to various embodiments as described above, even if the size or ratio of the entire UI is changed because the size or ratio of the screen of the display is changed, each graphic element included in the UI is displayed according to each type to correspond to the overall size of the UI Therefore, there may be no need to individually design a UI suitable for the screen and ratio of the display.

도 8은 본 개시의 일 실시 예에 따른, UI에 포함된 그래픽 엘리먼트 각각을 설정하는 방법을 나타내는 도면이다.8 is a diagram illustrating a method of setting each graphic element included in a UI, according to an embodiment of the present disclosure.

도 8을 참조하면, UI(10)는 제1 그래픽 엘리먼트(10-1), 제2 그래픽 엘리먼트(10-2), 제3 그래픽 엘리먼트(10-3) 및 제4 그래픽 엘리먼트(10-4)를 포함할 수 있다. 일 실시 예로, 제1 그래픽 엘리먼트(10-1) 및 제4 그래픽 엘리먼트(10-4)는 텍스트를 표시하기 위한 그래픽 엘리먼트이며, 제2 그래픽 엘리먼트(10-2)는 제3 그래픽 엘리먼트(10-3)가 표시될 수 있는 영역을 지정하기 위한 영역 그래픽 엘리먼트이며, 제4 그래픽 엘리먼트(10-4)는 사용자에 의해 텍스트가 입력되는 위치를 나타내는 커서 아이콘일 수 있다.Referring to FIG. 8 , the UI 10 includes a first graphic element 10-1, a second graphic element 10-2, a third graphic element 10-3, and a fourth graphic element 10-4. may include. In an embodiment, the first graphic element 10-1 and the fourth graphic element 10-4 are graphic elements for displaying text, and the second graphic element 10-2 is the third graphic element 10- 3) is an area graphic element for designating a displayable area, and the fourth graphic element 10 - 4 may be a cursor icon indicating a position where text is input by the user.

그리고, 본 개시의 일 실시 예로, 제1 그래픽 엘리먼트(10-1)는 제1 유형의 그래픽 엘리먼트 일 수 있으며, 제2 그래픽 엘리먼트(10-2)및 제3 그래픽 엘리먼트(10-3)는 제2 유형의 그래픽 엘리먼트일 수 있다. 제4 그래픽 엘리먼트(10-4)는 커서 아이콘이므로, 그 유형이 지정되어 있지 않을 수 있다.And, according to an embodiment of the present disclosure, the first graphic element 10-1 may be a graphic element of a first type, and the second graphic element 10-2 and the third graphic element 10-3 are There can be two types of graphic elements. Since the fourth graphic element 10 - 4 is a cursor icon, its type may not be specified.

본 개시의 일 실시 예에 따르면, 제1 유형의 그래픽 엘리먼트인 제1 그래픽 엘리먼트(10-1)는 그 크기가 고정된 지정 값을 가질 수 있다. 즉, 도 8을 참조하면, 제1 그래픽 엘리먼트(10-1)의 가로의 길이가 17 unit, 세로의 길이가 6 unit으로 고정되어 있을 수 있다. 고정된 지정 값을 가지는 제1 유형의 그래픽 엘리먼트의 경우, UI(10)의 크기 또는 비율이 변경되어도 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않고 표시될 수 있다. 또한, 본 개시의 일 실시 예에 따르면, 제1 그래픽 엘리먼트(10-1)의 색상, 투명도와 같은 속성(property)도 지정될 수 있다.According to an embodiment of the present disclosure, the first graphic element 10 - 1, which is the first type of graphic element, may have a specified value having a fixed size. That is, referring to FIG. 8 , the horizontal length of the first graphic element 10-1 may be fixed to 17 units and the vertical length to be 6 units. In the case of the first type of graphic element having a fixed specified value, even if the size or proportion of the UI 10 is changed, the size and proportion of the first type of graphic element may be displayed without changing. In addition, according to an embodiment of the present disclosure, properties such as color and transparency of the first graphic element 10 - 1 may also be specified.

그리고, 제2 유형의 그래픽 엘리먼트인 제2 그래픽 엘리먼트(10-2)는 기 설정된 범위를 가지는 지정 값을 가질 수 있다. 즉, 본 개시의 일 실시 예에 따른, 제2 유형의 그래픽 엘리먼트는 기 설정된 범위를 가지는 지정 값을 가지거나, 공유 값을 가질 수 있다. In addition, the second graphic element 10 - 2 , which is the second type of graphic element, may have a specified value having a preset range. That is, according to an embodiment of the present disclosure, the second type of graphic element may have a designated value having a preset range or a shared value.

즉, 제2 그래픽 엘리먼트(10-2)의 가로 크기는 UI(10) 전체의 크기에 따라 12 unit 에서 64 unit의 기 설정된 범위를 가지는 지정 값에 따라 표시될 수 있으며, 제2 그래픽 엘리먼트(10-2)의 세로 크기는 UI(10) 전체의 크기에 따라 7unit 에서 9unit의 기 설정된 범위를 가지는 지정 값에 따라 표시될 수 있다. 또한, 본 개시의 일 실시 예에 따르면, 제1 그래픽 엘리먼트(10-1) 및 제2 그래픽 엘리먼트(10-2)는 3 unit의 간격을 두고 배치될 수 있다. 3 unit의 간격은 고정 값으로, UI(10)의 크기가 변경되어도 그 간격이 변경되지 않을 수 있다.That is, the horizontal size of the second graphic element 10-2 may be displayed according to a specified value having a preset range of 12 units to 64 units according to the overall size of the UI 10, and the second graphic element 10 The vertical size of -2) may be displayed according to a designated value having a preset range of 7 units to 9 units according to the overall size of the UI 10 . Also, according to an embodiment of the present disclosure, the first graphic element 10 - 1 and the second graphic element 10 - 2 may be disposed with an interval of 3 units. The interval of 3 units is a fixed value, and even if the size of the UI 10 is changed, the interval may not change.

또한, 제2 유형의 그래픽 엘리먼트인 제3 그래픽 엘리먼트(10-3)는 제2 그래픽 엘리먼트(10-2)의 영역에서 양 끝단에서 가로 3 unit 및 세로 3 unit을 제외한 나머지 영역에 표시될 수 있다. 3 unit의 간격은 고정 값으로, UI(10)의 크기가 변경되어도 그 간격이 변경되지 않을 수 있다.In addition, the third graphic element 10-3, which is the second type of graphic element, may be displayed in the area other than 3 units horizontally and 3 units vertically at both ends in the area of the second graphic element 10-2. . The interval of 3 units is a fixed value, and even if the size of the UI 10 is changed, the interval may not change.

본 개시의 일 실시 예에 따르면, UI 또는 제2 유형의 그래픽 엘리먼트 내에 포함된 제2 유형의 그래픽 엘리먼트가 복수개인 경우, 복수의 제2 유형의 그래픽 엘리먼트 각각에 설정된 공유 값의 총합이 1일 수 있다. 그리고, UI 또는 제2 유형의 그래픽 엘리먼트 내에 포함된 제2 유형의 그래픽 엘리먼트가 하나인 경우, 하나의 제2 유형의 그래픽 엘리먼트에 설정된 공유 값이 1일 수 있다. According to an embodiment of the present disclosure, when there are a plurality of graphic elements of the second type included in the UI or the graphic element of the second type, the sum of the shared values set in each of the plurality of graphic elements of the second type may be 1 have. In addition, when there is one graphic element of the second type included in the UI or the graphic element of the second type, a shared value set in one graphic element of the second type may be 1.

즉, 제2 그래픽 엘리먼트(10-2)에 포함된 제2 유형의 그래픽 엘리먼트는 제3 그래픽 엘리먼트(10-3) 하나이므로, 제3 그래픽 엘리먼트(10-3)의 공유 값은 1일 수 있다.That is, since the second type of graphic element included in the second graphic element 10 - 2 is one third graphic element 10 - 3 , the shared value of the third graphic element 10 - 3 may be 1. .

또한, 본 개시의 일 실시 예에 따르면, 기 설정된 범위를 가지는 지정 값을 가지는 제2 유형의 그래픽 엘리먼트 내에 공유 값을 가지는 제2 유형의 그래픽 엘리먼트가 포함될 수 있다. 일 실시 예로, 기 설정된 범위를 가지는 지정 값을 가지는 제2 유형의 그래픽 엘리먼트 내에 포함된 공유 값을 가지는 제2 유형의 그래픽 엘리먼트가 두 개인 경우, 두 개의 제2 유형의 그래픽 엘리먼트 각각의 공유 값의 합이 1이며(예로, 0.6 : 0.4), 기 설정된 범위를 가지는 지정 값을 가지는 제2 유형의 그래픽 엘리먼트의 크기가 변경됨에 따라, 두 개의 제2 유형의 그래픽 엘리먼트는 각각의 공유 값의 비율(0.6 : 0.4)을 유지하며 크기가 변경될 수 있다. Also, according to an embodiment of the present disclosure, the second type of graphic element having a shared value may be included in the second type of graphic element having a specified value having a preset range. As an embodiment, when there are two graphic elements of the second type having a shared value included in the graphic element of the second type having a specified value having a preset range, the shared value of each of the two graphic elements of the second type is included in the graphic element of the second type. The sum is 1 (eg, 0.6 : 0.4), and as the size of the graphic element of the second type having a specified value having a preset range is changed, the two graphic elements of the second type have a ratio ( 0.6 : 0.4) and the size can be changed.

또한, 기 설정된 범위를 가지는 지정 값을 가지는 제2 유형의 그래픽 엘리먼트 내에 포함된 공유 값을 가지는 제2 유형의 그래픽 엘리먼트가 하나인 경우, 하나의 제2 유형의 그래픽 엘리먼트는 공유 값 1을 가지며, 기 설정된 범위를 가지는 지정 값을 가지는 제2 유형의 그래픽 엘리먼트의 크기가 변경됨에 따라, 하나의 제2 유형의 그래픽 엘리먼트의 크기가 변경될 수 있다. 즉, 기 설정된 범위를 가지는 지정 값을 가지는 제2 그래픽 엘리먼트(10-2) 내에 포함된 제3 그래픽 엘리먼트(10-3)는 공유 값 1을 가지며, 제2 그래픽 엘리먼트(10-2)의 크기 및 비율이 변경됨에 따라 그 크기 및 비율이 변경되어 표시될 수 있다.In addition, when there is one graphic element of the second type having a shared value included in the graphic element of the second type having a specified value having a preset range, one graphic element of the second type has a shared value of 1, As the size of the second type of graphic element having a specified value having a preset range is changed, the size of one second type of graphic element may be changed. That is, the third graphic element 10-3 included in the second graphic element 10-2 having a specified value having a preset range has a shared value of 1, and the size of the second graphic element 10-2 is And as the ratio is changed, the size and ratio thereof may be changed and displayed.

그리고, 커서 아이콘인 제4 그래픽 엘리먼트(10-4)는 1 unit의 가로 크기를 가지며, 세로 크기는 제3 그래픽 엘리먼트(10-3)의 크기에 따라 변경될 수 있다. In addition, the fourth graphic element 10 - 4 as the cursor icon has a horizontal size of 1 unit, and the vertical size may be changed according to the size of the third graphic element 10 - 3 .

상술한 바와 같은 다양한 유형의 그래픽 엘리먼트들을 통해, UI 전체의 크기 또는 비율이 변경되는 경우 기 설정된 크기 범위로 그래픽 엘리먼트 각각이 표시되어, UI를 개별적으로 디자인하여야 할 필요 없이 디스플레이 화면의 크기 및 비율에 대응되는 UI가 표시될 수 있다.Through the various types of graphic elements as described above, when the size or ratio of the entire UI is changed, each graphic element is displayed in a preset size range, so that the size and ratio of the display screen do not need to be individually designed. A corresponding UI may be displayed.

도 9는 본 개시의 일 실시 예에 따른 전자 장치의 제어 방법을 설명하기 위한 흐름도 이다.9 is a flowchart illustrating a method of controlling an electronic device according to an embodiment of the present disclosure.

도 9를 참조하면, 우선 전자 장치(100)는 UI를 표시하기 위한 사용자 명령을 입력 받을 수 있다(S910). UI를 표시하기 위한 사용자 명령은 전자 장치(100)나 전자 장치(100)를 위한 리모컨에 구비된 특정 버튼을 선택하는 사용자 명령, 디스플레이 상에 표시된 메뉴를 선택하는 사용자 명령 또는 스마트 폰과 같은 사용자 단말 장치에 표시된 메뉴를 선택하는 명령 등을 포함할 수 있다.Referring to FIG. 9 , first, the electronic device 100 may receive a user command for displaying a UI ( S910 ). The user command for displaying the UI is a user command for selecting a specific button provided in the electronic device 100 or a remote control for the electronic device 100, a user command for selecting a menu displayed on the display, or a user terminal such as a smart phone. It may include a command for selecting a menu displayed on the device, and the like.

UI를 표시하기 위한 사용자 명령이 입력되면, 전자 장치(100)는 디스플레이 화면의 크기 및 비율 중 적어도 하나를 식별할 수 있다(S920). 디스플레이 화면의 크기 및 비율은 디스플레이 상에 컨텐츠, 영상 또는 UI를 표시하는 스크린 또는 디스플레이 상에 컨텐츠, 영상 또는 UI를 표시하는 영역의 크기 및 비율을 의미할 수 있다.When a user command for displaying the UI is input, the electronic device 100 may identify at least one of a size and a ratio of the display screen ( S920 ). The size and ratio of the display screen may refer to the size and ratio of a screen displaying content, image, or UI on the display or an area displaying content, image or UI on the display.

그리고, 전자 장치(100)는 식별된 디스플레이 화면의 크기 및 비율 중 적어도 하나를 바탕으로, UI를 구성하는 복수의 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 식별할 수 있다(S930). 구체적으로, 전자 장치(100)는 디스플레이 화면의 크기 및 비율을 바탕으로, UI에 포함될 그래픽 엘리먼트를 복수의 그래픽 엘리먼트 중에서 식별할 수 있다.Then, the electronic device 100 may identify at least one graphic element among a plurality of graphic elements constituting the UI based on at least one of the identified size and ratio of the display screen (S930). Specifically, the electronic device 100 may identify a graphic element to be included in the UI from among the plurality of graphic elements based on the size and ratio of the display screen.

본 개시에 따른 그래픽 엘리먼트란 UI를 구성하는 구성요소를 의미할 수 있다. 예컨데, 그래픽 엘리먼트는 컨텐츠, 아이콘, 텍스트, 위젯을 포함할 수 있으며, 단순한 도형과 같은 그래픽 아이템도 포함할 수 있다. UI를 구성하는 적어도 하나의 그래픽 엘리먼트가 식별되면, 전자 장치는 디스플레이 화면의 크기 및 비율 중 적어도 하나에 대응되도록 식별된 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 조절하여 UI를 표시할 수 있다(S940). 즉, 디스플레이 화면의 크기 및 비율에 대응되는 크기 및 비율로 적어도 하나의 그래픽 엘리먼트가 포함된 UI가 표시될 수 있다.A graphic element according to the present disclosure may mean a component constituting a UI. For example, the graphic element may include content, an icon, text, and a widget, and may also include a graphic item such as a simple figure. When at least one graphic element constituting the UI is identified, the electronic device may display the UI by adjusting at least one of the size and ratio of the identified at least one graphic element to correspond to at least one of the size and ratio of the display screen. There is (S940). That is, a UI including at least one graphic element may be displayed with a size and a ratio corresponding to the size and ratio of the display screen.

도 10은 본 개시의 일 실시 예에 따른, 전자 장치의 구체적인 구성을 설명하기 위한 블록도 이다.10 is a block diagram illustrating a detailed configuration of an electronic device according to an embodiment of the present disclosure.

도 10을 참조하면, 전자 장치(1000)는 메모리(1010), 프로세서(1020), 디스플레이(1030), 통신 인터페이스(1040) 및 입력 인터페이스(1050)를 포함할 수 있다. 여기서 메모리(1010) 및 프로세서(1020)의 일부 구성은 도 2에서 도시된 구성과 동일한 바, 중복된 기재는 생략한다.Referring to FIG. 10 , the electronic device 1000 may include a memory 1010 , a processor 1020 , a display 1030 , a communication interface 1040 , and an input interface 1050 . Here, some configurations of the memory 1010 and the processor 1020 are the same as those shown in FIG. 2 , and thus duplicate descriptions will be omitted.

디스플레이(1030)는 UI(User Interface) 및 그래픽 엘리먼트를 표시할 수 있다. 예를 들어, UI는 어플리케이션 실행 화면, 메뉴 화면, 잠금 화면, 설정 화면 대기 화면 등과 같은 다양한 화면일 수 있다.The display 1030 may display a user interface (UI) and graphic elements. For example, the UI may be various screens such as an application execution screen, a menu screen, a lock screen, a setting screen standby screen, and the like.

또한, 디스플레이(1030)는 다양한 영상을 디스플레이할 수 있다. 여기에서, 영상은 정지 영상 또는 동영상 중 적어도 하나를 포함하는 개념으로써, 디스플레이(1030)는 방송 컨텐츠, 멀티 미디어 컨텐츠 등과 같은 다양한 영상을 표시할 수 있다.Also, the display 1030 may display various images. Here, the image is a concept including at least one of a still image or a moving image, and the display 1030 may display various images such as broadcast content and multimedia content.

그리고, 디스플레이(1030) 화면의 비율은 21:9, 16:9, 4:1, 1:1 및 9:21을 포함하는 다양한 비율로 구현될 수 있다. 본 개시에서 “디스플레이(1030) 화면의 비율”은 컨텐츠, 영상 또는 UI를 표시하는 전체 스크린 또는 전체 영역의 가로 및 세로의 비(가로 : 세로)를 의미할 수 있다. In addition, the screen ratio of the display 1030 may be implemented in various ratios including 21:9, 16:9, 4:1, 1:1, and 9:21. In the present disclosure, the “ratio of the screen of the display 1030” may mean a ratio (horizontal: vertical) of the entire screen or the entire area displaying content, image, or UI.

또한, 디스플레이(1030) 화면의 비율은, 사용자의 입력에 따라 변경될 수 있고, 디스플레이(1030)가 롤러블 디스플레이, 회전가능한 디스플레이 및 복수의 디스플레이를 조합하여 표시될 수 있는 디스플레이 중 적어도 하나로 구현되어, 디스플레이의 동작에 따라 디스플레이(1030) 화면의 비율이 변경될 수 있다.In addition, the screen ratio of the display 1030 can be changed according to a user input, and the display 1030 is implemented as at least one of a rollable display, a rotatable display, and a display that can be displayed by combining a plurality of displays. , the ratio of the screen of the display 1030 may be changed according to the operation of the display.

그리고, 디스플레이(1030)의 크기는 감소하거나 증가할 수 있다. 구체적으로, 디스플레이(1030)는 디스플레이(1030)가 접힐 수 있는 폴더블 디스플레이, 디스플레이(1030)가 롤링되는 롤러블 디스플레이로 구현될 수 있다. 또는, 복수의 디스플레이(1030)가 연결되거나 분리되는 등 디스플레이의 크기가 변경될 수 있다. 또한, 디스플레이(1030) 화면의 크기는 사용자의 입력에 따라 변경될 수 있다. 예를 들어, 디스플레이(1030)가 롤러블 디스플레이로 구현되는 경우, 디스플레이(1030)의 일부 롤링되는 경우에는 디스플레이(1030) 전체의 크기는 동일하나, 디스플레이(1030) 화면의 표시 가능한 영역의 크기가 달라질 수 있고, 이러한 경우에 디스플레이(1030) 화면의 크기가 변경된 것으로 볼 수 있다.In addition, the size of the display 1030 may decrease or increase. Specifically, the display 1030 may be implemented as a foldable display in which the display 1030 can be folded and a rollable display in which the display 1030 is rolled. Alternatively, the size of the display may be changed such that the plurality of displays 1030 are connected or separated. Also, the size of the screen of the display 1030 may be changed according to a user input. For example, when the display 1030 is implemented as a rollable display, when a portion of the display 1030 is rolled, the overall size of the display 1030 is the same, but the size of the displayable area of the screen of the display 1030 is different. may vary, and in this case, it may be seen that the size of the screen of the display 1030 has been changed.

이와 같은, 디스플레이(1030)는 LCD(Liquid Crystal Display Panel), LED(light emitting diode), OLED(Organic Light Emitting Diodes), LCoS(Liquid Crystal on Silicon), DLP(Digital Light Processing) 등과 같은 다양한 형태의 디스플레이로 구현될 수 있다. 또한, 디스플레이(1030) 내에는 a-si TFT, LTPS(low temperature poly silicon) TFT, OTFT(organic TFT) 등과 같은 형태로 구현될 수 있는 구동 회로, 백라이트 유닛 등도 함께 포함될 수 있다.As such, the display 1030 is a liquid crystal display panel (LCD), a light emitting diode (LED), an organic light emitting diode (OLED), a liquid crystal on silicon (LCoS), digital light processing (DLP), such as various types of It may be implemented as a display. In addition, the display 1030 may include a driving circuit, a backlight unit, and the like, which may be implemented in the form of an a-si TFT, a low temperature poly silicon (LTPS) TFT, or an organic TFT (OTFT).

또한, 디스플레이(1030)는 터치 패널과 함께 결합되어 터치 스크린으로 구현될 수도 있다. 다만, 이는 일 실시 예일뿐이고, 디스플레이(1030)는 다양하게 구현될 수 있다.Also, the display 1030 may be implemented as a touch screen by being combined with a touch panel. However, this is only an example, and the display 1030 may be implemented in various ways.

전자 장치(1000)는 외부 장치와 통신을 수행하기 위한 통신 인터페이스(1040)를 포함할 수 있다. 통신 인터페이스(1040)는 외부 장치 또는 외부 서버와 통신을 수행하기 위해 다양한 통신 모듈을 포함할 수 있다. 구체적으로, 통신 인터페이스(1040)는 근거리 무선 통신 모듈(미도시) 및 무선 랜 통신 모듈(미도시) 중 적어도 하나의 통신 모듈을 포함할 수 있다. 여기서, 근거리 무선 통신 모듈(미도시)은 근거리에 위치한 전자 장치와 무선으로 데이터 통신을 수행하는 통신 모듈로써, 예를 들어, 블루투스(Bluetooth) 모듈, 지그비(ZigBee) 모듈, NFC(Near Field Communication) 모듈 등이 될 수 있다. 또한, 무선 랜 통신 모듈(미도시)은 와이파이(WiFi), IEEE 등과 같은 무선 통신 프로토콜에 따라 외부 네트워크에 연결되어 통신을 수행하는 모듈일 수 있다. The electronic device 1000 may include a communication interface 1040 for performing communication with an external device. The communication interface 1040 may include various communication modules to communicate with an external device or an external server. Specifically, the communication interface 1040 may include at least one communication module among a short-range wireless communication module (not shown) and a wireless LAN communication module (not shown). Here, the short-range wireless communication module (not shown) is a communication module that wirelessly performs data communication with an electronic device located in a short distance, for example, a Bluetooth module, a ZigBee module, and a Near Field Communication (NFC) module. It can be a module or the like. In addition, the wireless LAN communication module (not shown) may be a module that connects to an external network and performs communication according to a wireless communication protocol such as WiFi or IEEE.

이 밖에 통신 인터페이스(1040)는 3G(3rd Generation), 3GPP(3rd Generation Partnership Project), LTE(Long Term Evoloution) 등과 같은 다양한 이동 통신 규격에 따라 이동 통신망에 접속하여 통신을 수행하는 이동 통신 모듈을 더 포함할 수도 있다. 또한, 통신 인터페이스(1040)는 USB(Universal Serial Bus), IEEE(Institute of Electrical and Eletronics Engineers) 1394, RS-232 등의 유선 통신 모듈(미도시) 중 적어도 하나를 포함할 수도 있고, TV 방송을 수신하는 방송 수신 모듈을 포함할 수도 있다. In addition, the communication interface 1040 includes a mobile communication module for performing communication by accessing a mobile communication network according to various mobile communication standards such as 3rd Generation (3G), 3rd Generation Partnership Project (3GPP), Long Term Evoloution (LTE), etc. may include In addition, the communication interface 1040 may include at least one of a wired communication module (not shown) such as Universal Serial Bus (USB), Institute of Electrical and Electronic Engineers (IEEE) 1394, RS-232, etc. It may include a broadcast receiving module for receiving.

특히, 통신 인터페이스(1040)는 스마트폰 등의 전자 장치로부터, 전자 장치(1000)의 제어를 위한 사용자 명령을 수신할 수 있다. 예를 들어, 스마트폰의 화면을 통해 디스플레이(1030) 화면의 크기 또는 비율을 결정하는 사용자 명령이 입력된 경우, 통신 인터페이스(1040)는 스마트 폰으로부터 전자 장치(1000)의 디스플레이(1030) 화면의 크기 또는 비율을 결정하기 위한 사용자 명령을 수신할 수 있다. In particular, the communication interface 1040 may receive a user command for controlling the electronic device 1000 from an electronic device such as a smartphone. For example, when a user command for determining the size or ratio of the screen of the display 1030 is input through the screen of the smart phone, the communication interface 1040 is the screen of the display 1030 of the electronic device 1000 from the smart phone. A user command to determine a size or ratio may be received.

또한, 통신 인터페이스(1040)는 외부 서버로부터 복수의 그래픽 엘리먼트를 수신할 수 있다. 그리고, 외부 서버에서 복수의 그래픽 엘리먼트에 중 적어도 하나에 대한 업데이트가 있는 경우, 통신 인터페이스(1040)는 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신할 수 있다. Also, the communication interface 1040 may receive a plurality of graphic elements from an external server. In addition, when there is an update on at least one of the plurality of graphic elements in the external server, the communication interface 1040 may receive information on the updated graphic element from the external server.

전자 장치(1000)는 통신 인터페이스(140)를 통해 각종 방송 서비스, 인터넷 서비스 등을 전자 장치로부터 제공 받을 수 있고, 주변의 스마트폰이나 노트북 등과 통신할 수 있으며, 사운드 바 등의 미디어 기기와 연결될 수 있다.The electronic device 1000 may receive various broadcast services and Internet services from the electronic device through the communication interface 140 , communicate with a nearby smart phone or notebook computer, etc., and may be connected to a media device such as a sound bar. have.

입력 인터페이스(1050)는 전자 장치(100)를 제어하기 위한 사용자 명령을 수신할 수 있다. 특히, 입력 인터페이스(150)에 사용자의 손 또는 스타일러스 펜 등을 이용한 사용자 터치를 입력 받기 위한 터치 패널, 사용자 조작을 입력 받기 위한 물리적 버튼 등이 포함될 수 있다. 그 밖에, 입력 인터페이스(1050)는 전자 장치(1000)와 무선 통신 방식이 가능한 외부 장치에 포함되어 구현될 수 도 있다. 일 실시 예로, 외부 장치는 리모컨(remote control), 가상 키보드, 스마트폰 또는 웨어러블 장치 중 적어도 하나로 구현될 수 있다.The input interface 1050 may receive a user command for controlling the electronic device 100 . In particular, the input interface 150 may include a touch panel for receiving a user touch input using a user's hand or a stylus pen, a physical button for receiving a user manipulation, and the like. In addition, the input interface 1050 may be implemented by being included in an external device capable of wireless communication with the electronic device 1000 . As an embodiment, the external device may be implemented as at least one of a remote control, a virtual keyboard, a smart phone, or a wearable device.

입력 인터페이스(1050)는 컨텐츠 또는 영상을 출력하기 위한 사용자 명령 또는 UI를 표시하기 위한 사용자 명령을 입력 받을 수 있다. 그리고, 입력 인터페이스(1050)는 사용자의 발화 음성을 통한 명령을 입력받기 위한 마이크로 구현될 수 있다. 구체적으로, 마이크에 의하여 사용자의 발화 음성이 직접 입력되면, 프로세서(1020)는 STT(Speech to Text) 모듈(미도시)을 이용하여 사용자의 명령을 식별할 수 있다.The input interface 1050 may receive a user command for outputting content or an image or a user command for displaying a UI. In addition, the input interface 1050 may be implemented as a microphone for receiving a command through the user's spoken voice. Specifically, when the user's spoken voice is directly input by the microphone, the processor 1020 may identify the user's command using a Speech to Text (STT) module (not shown).

그리고, 전자 장치(1000)는 모터(미도시), 센서(미도시)를 포함할 수 있다. 모터(미도시)는 디스플레이(1030)가 롤러블로 구현될 때, 롤을 감기 위한 구성일 수 있다. 또는, 모터는 디스플레이(1030)가 회전 가능한 디스플레이인 경우, 디스플레이(1030)를 회전시키기 위한 구성일 수 있다. In addition, the electronic device 1000 may include a motor (not shown) and a sensor (not shown). A motor (not shown) may be configured to wind a roll when the display 1030 is implemented as a rollable type. Alternatively, the motor may be configured to rotate the display 1030 when the display 1030 is a rotatable display.

센서(미도시)는 자이로 센서, 제스처 센서, 가속도 센서, 그립센서 등 다양한 센서들을 포함할 수 있으며, 각각의 센서에서 수집된 데이터를 이용하여 사용자의 시청 거리를 측정하거나, 롤러블 디스플레이의 크기를 감지하거나, 회전 가능한 디스플레이의 회전 방향을 감지할 수 있다. The sensor (not shown) may include various sensors, such as a gyro sensor, a gesture sensor, an acceleration sensor, and a grip sensor, and use the data collected from each sensor to measure the user's viewing distance or measure the size of the rollable display. or the rotation direction of the rotatable display.

한편, 전자 장치(1000)는 도 10에서 상술한 구성에 한정되는 것은 아니며, 전자 장치(1000)의 유형에 따라 일부 구성이 추가되거나 생략될 수 있다.Meanwhile, the electronic device 1000 is not limited to the configuration described above in FIG. 10 , and some configurations may be added or omitted depending on the type of the electronic device 1000 .

이상에서 설명된 다양한 실시 예들은 소프트웨어(software), 하드웨어(hardware) 또는 이들의 조합으로 구현될 수 있다. 하드웨어적인 구현에 의하면, 본 개시에서 설명되는 실시 예들은 ASICs(Application Specific Integrated Circuits), DSPs(digital signal processors), DSPDs(digital signal processing devices), PLDs(programmable logic devices), FPGAs(field programmable gate arrays), 프로세서(processors), 제어기(controllers), 마이크로 컨트롤러(micro-controllers), 마이크로 프로세서(microprocessors), 기타 기능 수행을 위한 전기적인 유닛(unit) 중 적어도 하나를 이용하여 구현될 수 있다. 특히, 이상에서 설명된 다양한 실시 예들은 전자 장치(100)의 프로세서(1020)에 의해 구현될 수 있다. 소프트웨어적인 구현에 의하면, 본 문서에서 설명되는 절차 및 기능과 같은 실시 예들은 별도의 소프트웨어 모듈들로 구현될 수 있다. 상기 소프트웨어 모듈들 각각은 본 문서에서 설명되는 하나 이상의 기능 및 작동을 수행할 수 있다.The various embodiments described above may be implemented by software, hardware, or a combination thereof. According to the hardware implementation, the embodiments described in the present disclosure are ASICs (Application Specific Integrated Circuits), DSPs (digital signal processors), DSPDs (digital signal processing devices), PLDs (programmable logic devices), FPGAs (field programmable gate arrays) ), processors, controllers, micro-controllers, microprocessors, and other electrical units for performing other functions may be implemented using at least one. In particular, the various embodiments described above may be implemented by the processor 1020 of the electronic device 100 . According to the software implementation, embodiments such as procedures and functions described in this document may be implemented as separate software modules. Each of the software modules may perform one or more functions and operations described herein.

본 개시의 다양한 실시 예들은 기기(machine)(예: 컴퓨터)로 읽을 수 있는 저장 매체(machine-readable storage media)에 저장될 수 있는 명령어를 포함하는 소프트웨어로 구현될 수 있다. 기기(machine)는, 저장 매체로부터 저장된 명령어를 호출하고, 호출된 명령어에 따라 동작이 가능한 장치로서, 개시된 실시 예들의 전자 장치(100)를 포함할 수 있다. Various embodiments of the present disclosure may be implemented as software including instructions that may be stored in a machine-readable storage medium (eg, a computer). A machine is a device capable of calling a stored command from a storage medium and operating according to the called command, and may include the electronic device 100 according to the disclosed embodiments.

이러한 명령어가 프로세서에 의해 실행될 경우, 프로세서가 직접, 또는 상기 프로세서의 제어 하에 다른 구성요소들을 이용하여 명령어에 해당하는 기능을 수행할 수 있다. 명령어는 컴파일러 또는 인터프리터에 의해 생성 또는 실행되는 코드를 포함할 수 있다. 예컨대, 저장매체에 저장된 명령어가 프로세서에 의해 실행됨으로써, 상술한 전자 장치의 제어방법이 실행될 수 있다. 일 예로, 저장매체에 저장된 명령어가 기기(또는 전자 장치)의 프로세서에 의해 실행됨으로써, 외부 장치와 최초 연결을 수행하기 위한 적어도 하나의 중계 장치를 포함하는 목록을 획득하여 디스플레이 상에 표시하는 단계, 상기 목록 중 하나의 중계 장치가 선택되면, 상기 선택된 중계 장치에 대한 접속 요청을 상기 선택된 중계 장치로 전송하는 단계, 상기 중계 장치로부터 접속 승인 정보를 수신하면, 상기 중계 장치에 의해 연결을 수행할 수 있는 적어도 하나의 외부 장치에 대한 목록을 상기 디스플레이 상에 표시하는 단계, 상기 적어도 하나의 외부 장치에 대한 목록 중 하나의 외부 장치가 선택되면, 상기 선택된 외부 장치에 대한 인증 요청을 상기 선택된 외부 장치로부터 수신하는 단계 및 상기 인증 요청에 응답하여 사용자 입력이 수신되면, 상기 선택된 외부 장치와 최초 연결을 수행하는 단계가 수행될 수 있다. When such an instruction is executed by a processor, the processor may perform a function corresponding to the instruction by using other components directly or under the control of the processor. Instructions may include code generated or executed by a compiler or interpreter. For example, by executing instructions stored in the storage medium by the processor, the above-described control method of the electronic device may be executed. For example, by executing a command stored in a storage medium by a processor of a device (or electronic device), obtaining a list including at least one relay device for initial connection with an external device and displaying the list on a display; When one relay device from the list is selected, transmitting a connection request for the selected relay device to the selected relay device. Upon receiving access approval information from the relay device, the relay device can perform a connection displaying a list of at least one external device present on the display; when one external device is selected from the list of the at least one external device, an authentication request for the selected external device is sent from the selected external device When a user input is received in response to the receiving and the authentication request, an initial connection with the selected external device may be performed.

기기로 읽을 수 있는 저장매체는, 비일시적(non-transitory) 저장매체의 형태로 제공될 수 있다. 여기서, '비일시적'은 저장매체가 신호(signal)를 포함하지 않으며 실재(tangible)한다는 것을 의미할 뿐 데이터가 저장매체에 반영구적 또는 임시적으로 저장됨을 구분하지 않는다.The device-readable storage medium may be provided in the form of a non-transitory storage medium. Here, 'non-transitory' means that the storage medium does not include a signal and is tangible, and does not distinguish that data is semi-permanently or temporarily stored in the storage medium.

일 실시 예에 따르면, 본 문서에 개시된 다양한 실시 예들에 따른 방법은 컴퓨터 프로그램 제품(computer program product)에 포함되어 제공될 수 있다. 컴퓨터 프로그램 제품은 상품으로서 판매자 및 구매자 간에 거래될 수 있다. 컴퓨터 프로그램 제품은 기기로 읽을 수 있는 저장 매체(예: compact disc read only memory (CD-ROM))의 형태로, 또는 어플리케이션 스토어(예: 플레이 스토어™, 앱스토어™)를 통해 온라인으로 배포될 수 있다. 온라인 배포의 경우에, 컴퓨터 프로그램 제품의 적어도 일부는 제조사의 서버, 어플리케이션 스토어의 서버, 또는 중계 서버의 메모리와 같은 저장 매체에 적어도 일시 저장되거나, 임시적으로 생성될 수 있다.According to an embodiment, the method according to various embodiments disclosed in this document may be included and provided in a computer program product. Computer program products may be traded between sellers and buyers as commodities. The computer program product may be distributed in the form of a device-readable storage medium (eg compact disc read only memory (CD-ROM)) or online through an application store (eg Play Store™, App Store™). have. In the case of online distribution, at least a part of the computer program product may be temporarily stored or temporarily generated in a storage medium such as a memory of a server of a manufacturer, a server of an application store, or a relay server.

다양한 실시 예들에 따른 구성 요소(예: 모듈 또는 프로그램) 각각은 단수 또는 복수의 개체로 구성될 수 있으며, 전술한 해당 서브 구성 요소들 중 일부 서브 구성 요소가 생략되거나, 또는 다른 서브 구성 요소가 다양한 실시 예에 더 포함될 수 있다. 대체적으로 또는 추가적으로, 일부 구성 요소들(예: 모듈 또는 프로그램)은 하나의 개체로 통합되어, 통합되기 이전의 각각의 해당 구성 요소에 의해 수행되는 기능을 동일 또는 유사하게 수행할 수 있다. 다양한 실시 예들에 따른, 모듈, 프로그램 또는 다른 구성 요소에 의해 수행되는 동작들은 순차적, 병렬적, 반복적 또는 휴리스틱하게 실행되거나, 적어도 일부 동작이 다른 순서로 실행되거나, 생략되거나, 또는 다른 동작이 추가될 수 있다.Each of the components (eg, a module or a program) according to various embodiments may be composed of a singular or a plurality of entities, and some of the above-described sub-components may be omitted, or other sub-components may be various. It may be further included in the embodiment. Alternatively or additionally, some components (eg, a module or a program) may be integrated into a single entity to perform the same or similar functions performed by each corresponding component prior to integration. According to various embodiments, operations performed by a module, program, or other component may be sequentially, parallel, repetitively or heuristically executed, or at least some operations may be executed in a different order, omitted, or other operations may be added. can

이상에서는 본 개시의 바람직한 실시 예에 대하여 도시하고 설명하였지만, 본 개시는 상술한 특정의 실시 예에 한정되지 아니하며, 청구범위에서 청구하는 본 개시의 요지를 벗어남이 없이 당해 개시에 속하는 기술분야에서 통상의 지식을 가진 자에 의해 다양한 변형실시가 가능한 것은 물론이고, 이러한 변형실시들은 본 개시의 기술적 사상이나 전망으로부터 개별적으로 이해되어서는 안될 것이다.In the above, preferred embodiments of the present disclosure have been illustrated and described, but the present disclosure is not limited to the specific embodiments described above, and is commonly used in the technical field belonging to the present disclosure without departing from the gist of the present disclosure as claimed in the claims. Various modifications may be made by those having the knowledge of, of course, and these modifications should not be individually understood from the technical spirit or perspective of the present disclosure.

100: 전자 장치
110: 프로세서
120: 메모리
100: electronic device
110: processor
120: memory

Claims (18)

전자 장치의 제어 방법에 있어서,
UI(User Interface)를 표시하기 위한 사용자 명령이 입력되면, 복수의 그래픽 엘리먼트를 포함하는 UI를 표시하는 단계; 및
상기 UI를 표시하는 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI의 크기를 변경하여 표시하는 단계;를 포함하고,
상기 UI의 크기를 변경하여 표시하는 단계는,상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 상기 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시하는 제어 방법.
A method for controlling an electronic device, comprising:
displaying a UI including a plurality of graphic elements when a user command for displaying a user interface (UI) is input; and
When at least one of a size and a ratio of a display screen for displaying the UI is changed, changing and displaying the size of the UI;
The changing and displaying the size of the UI may include adjusting the size of at least one graphic element among graphic elements included in the UI at a different ratio from that of other graphic elements included in the UI and displaying the changed size.
제1항에 있어서,
상기 UI는 제1 유형의 그래픽 엘리먼트 및 제2 유형의 엘리먼트를 포함하며,
상기 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율에 따라 표시되며,
상기 UI가 적어도 두 개의 상기 제2 유형의 그래픽 엘리먼트를 포함하는 경우, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트에 기 설정된 비율에 따라 상기 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 표시되는 제어 방법.
According to claim 1,
The UI includes a graphic element of a first type and an element of a second type;
The first type of graphic element is displayed according to a preset size and ratio,
When the UI includes at least two graphic elements of the second type, the at least two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type included in the UI control method.
제2항에 있어서,
상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면,
상기 UI에 포함된 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않고,
상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트 간의 기 설정된 비율이 유지되면서 상기 적어도 두 개의 제2 그래픽 엘리먼트 각각의 크기 및 비율 중 적어도 하나가 변경되어 표시되는 제어 방법.
3. The method of claim 2,
When at least one of the size and ratio of the display screen is changed,
The size and ratio of the first type of graphic element included in the UI are not changed,
A control method in which at least one of a size and a ratio of each of the at least two second graphic elements is changed and displayed while a preset ratio between the at least two second type graphic elements included in the UI is maintained.
제2항에 있어서,
상기 UI는 제3 유형의 그래픽 엘리먼트를 더 포함하며,
상기 제3 유형의 그래픽 엘리먼트는 상기 제3 유형의 그래픽 엘리먼트에 포함되는 정보의 크기에 따라 상기 제3 유형의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 표시되는 제어 방법.
3. The method of claim 2,
The UI further includes a graphic element of a third type,
In the third type of graphic element, at least one of a size and a ratio of the third type of graphic element is changed and displayed according to a size of information included in the third type of graphic element.
제1항에 있어서,
상기 디스플레이 화면의 크기가 감소하는 경우, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 상기 UI를 표시하는 단계; 및
상기 디스플레이 화면의 크기가 증가하는 경우, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여 상기 UI를 표시하는 단계를 포함하는 제어 방법.
According to claim 1,
displaying the UI by deleting at least one of graphic elements included in the UI when the size of the display screen decreases; and
and displaying the UI by adding at least one of the plurality of graphic elements to the UI when the size of the display screen increases.
제1항에 있어서,
상기 UI를 변경하기 위한 사용자 명령이 입력되면, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 삭제하거나, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여, 상기 UI를 표시하는 단계;를 더 포함하는 제어 방법.
According to claim 1,
When a user command for changing the UI is input, deleting at least one graphic element among graphic elements included in the UI or adding at least one of the plurality of graphic elements to the UI to display the UI A control method further comprising ;.
제1항에 있어서,
상기 복수의 그래픽 엘리먼트는 외부 서버로부터 수신되고,
상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하는 단계; 및
상기 수신된 정보를 바탕으로, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 상기 UI를 표시하는 단계;를 더 포함하는 제어 방법.
According to claim 1,
The plurality of graphic elements are received from an external server,
receiving information on the updated graphic element from an external server when there is an update on the plurality of graphic elements; and
Displaying the UI by updating at least one graphic element among graphic elements included in the UI based on the received information.
제1항에 있어서,
상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하는 단계;를 더 포함하는 제어 방법.
According to claim 1,
When the electronic device is a device capable of displaying a plurality of displays in combination, the size and ratio of the display screen changed according to the combination of at least one display are identified and included in the UI based on the identified size and ratio Changing and displaying at least one of a size and a ratio of at least one graphic element among the graphic elements.
제1항에 있어서,
상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하는 단계;를 더 포함하는 제어 방법.
According to claim 1,
When the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI. Changing and displaying the; Control method further comprising.
전자 장치에 있어서,
적어도 하나의 인스트럭션을 포함하는 메모리; 및
상기 적어도 하나의 인스트럭션을 실행함으로써, UI(User Interface)를 표시하기 위한 사용자 명령이 입력되면, 복수의 그래픽 엘리먼트를 포함하는 UI를 표시하도록 제어하고,
상기 UI를 표시하는 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면, 상기 UI의 크기를 변경하여 표시하도록 제어하는 프로세서;를 포함하고,
상기 프로세서는, 상기 UI의 크기를 변경하여 표시하도록 제어함에 있어서,
상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 상기 UI에 포함된 다른 그래픽 엘리먼트와 서로 다른 비율로 크기를 조절하여 표시하도록 제어하는 전자 장치.
In an electronic device,
a memory including at least one instruction; and
By executing the at least one instruction, when a user command for displaying a UI (User Interface) is input, controlling to display a UI including a plurality of graphic elements,
When at least one of a size and a ratio of a display screen for displaying the UI is changed, a processor for controlling to change and display the size of the UI;
The processor, in controlling to display by changing the size of the UI,
An electronic device for controlling to display at least one graphic element among graphic elements included in the UI by adjusting the size at a different ratio from that of other graphic elements included in the UI.
제10항에 있어서,
상기 UI는 제1 유형의 그래픽 엘리먼트 및 제2 유형의 엘리먼트를 포함하며,
상기 제1 유형의 그래픽 엘리먼트는 기 설정된 크기 및 비율에 따라 표시되며,
상기 UI가 적어도 두 개의 상기 제2 유형의 그래픽 엘리먼트를 포함하는 경우, 상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트에 기 설정된 비율에 따라 상기 적어도 두 개의 제2 유형의 그래픽 엘리먼트가 표시되는 전자 장치.
11. The method of claim 10,
The UI includes a graphic element of a first type and an element of a second type;
The first type of graphic element is displayed according to a preset size and ratio,
When the UI includes at least two graphic elements of the second type, the at least two graphic elements of the second type are displayed according to a preset ratio to the at least two graphic elements of the second type included in the UI becoming an electronic device.
제11항에 있어서,
상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면,
상기 UI에 포함된 제1 유형의 그래픽 엘리먼트의 크기 및 비율이 변경되지 않고,
상기 UI에 포함된 적어도 두 개의 제2 유형의 그래픽 엘리먼트 간의 기 설정된 비율이 유지되면서 상기 적어도 두 개의 제2 그래픽 엘리먼트 각각의 크기 및 비율 중 적어도 하나가 변경되어 표시되는 것을 특징으로 하는 전자 장치.
12. The method of claim 11,
When at least one of the size and ratio of the display screen is changed,
The size and ratio of the first type of graphic element included in the UI are not changed,
The electronic device of claim 1, wherein at least one of a size and a ratio of each of the at least two second graphic elements is changed and displayed while a preset ratio between the at least two second type graphic elements included in the UI is maintained.
제11항에 있어서,
상기 UI는 제3 유형의 그래픽 엘리먼트를 더 포함하며,
상기 제3 유형의 그래픽 엘리먼트는 상기 제3 유형의 그래픽 엘리먼트에 포함되는 정보의 크기에 따라 상기 제3 유형의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나가 변경되어 표시되는 것을 특징으로 하는 전자 장치.
12. The method of claim 11,
The UI further includes a graphic element of a third type,
The third type of graphic element is displayed by changing at least one of a size and a ratio of the third type of graphic element according to a size of information included in the third type of graphic element.
제10항에 있어서,
상기 프로세서는,
상기 디스플레이 화면의 크기가 감소하는 경우, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 상기 UI를 표시하도록 제어하고,
상기 디스플레이 화면의 크기가 증가하는 경우, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여 상기 UI를 표시하도록 제어하는 것을 특징으로 하는 전자 장치.
11. The method of claim 10,
The processor is
When the size of the display screen is reduced, by deleting at least one of the graphic elements included in the UI to control to display the UI,
When the size of the display screen increases, at least one of the plurality of graphic elements is added to the UI to control the UI to be displayed.
제10항에 있어서,
상기 프로세서는,
상기 UI를 변경하기 위한 사용자 명령이 입력되면, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 삭제하거나, 상기 복수의 그래픽 엘리먼트 중 적어도 하나를 상기 UI에 추가하여, 상기 UI를 표시하도록 제어하는 것을 특징으로 하는 전자 장치.
11. The method of claim 10,
The processor is
When a user command for changing the UI is input, at least one graphic element among graphic elements included in the UI is deleted, or at least one of the plurality of graphic elements is added to the UI to display the UI Electronic device, characterized in that.
제10항에 있어서,
통신 인터페이스를 더 포함하고,
상기 복수의 그래픽 엘리먼트는 상기 통신 인터페이스를 통해 외부 서버로부터 수신되고,
상기 프로세서는,
상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 상기 통신 인터페이스를 통해 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하고,
상기 수신된 정보를 바탕으로, 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 상기 UI를 표시하도록 제어하는 것을 특징으로 하는 전자 장치.
11. The method of claim 10,
further comprising a communication interface;
The plurality of graphic elements are received from an external server through the communication interface,
The processor is
When there is an update for the plurality of graphic elements, receiving information about the updated graphic element from an external server through the communication interface,
and controlling to display the UI by updating at least one graphic element among graphic elements included in the UI based on the received information.
제10항에 있어서,
상기 프로세서는,
상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하도록 제어하는 것을 특징으로 하는 전자 장치.
11. The method of claim 10,
The processor is
When the electronic device is a device capable of displaying a plurality of displays in combination, the size and ratio of the display screen changed according to the combination of at least one display are identified and included in the UI based on the identified size and ratio An electronic device, characterized in that the display is controlled to change and display at least one of a size and a ratio of at least one graphic element among the graphic elements.
제10항에 있어서,
상기 프로세서는,
상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 표시하도록 제어하는 것을 특징으로 하는 전자 장치.
11. The method of claim 10,
The processor is
When the display is rotatable, a ratio of the display screen changed according to the rotation of the display is identified, and based on the identified ratio, at least one of a size and a ratio of at least one graphic element among graphic elements included in the UI. An electronic device, characterized in that controlling to change and display.
KR1020190164697A 2019-12-11 2019-12-11 Electronic device and control method thereof KR20210073911A (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR1020190164697A KR20210073911A (en) 2019-12-11 2019-12-11 Electronic device and control method thereof
PCT/KR2020/018073 WO2021118267A1 (en) 2019-12-11 2020-12-10 Electronic device and control method thereof

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190164697A KR20210073911A (en) 2019-12-11 2019-12-11 Electronic device and control method thereof

Publications (1)

Publication Number Publication Date
KR20210073911A true KR20210073911A (en) 2021-06-21

Family

ID=76328965

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190164697A KR20210073911A (en) 2019-12-11 2019-12-11 Electronic device and control method thereof

Country Status (2)

Country Link
KR (1) KR20210073911A (en)
WO (1) WO2021118267A1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023121265A1 (en) * 2021-12-22 2023-06-29 삼성전자주식회사 Display device, modular display device, and method for controlling same

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100950994B1 (en) * 2007-08-23 2010-04-02 주식회사 오비고코리아 System and method for managing user interface of wired/wireless information terminal
KR101408168B1 (en) * 2011-12-09 2014-06-17 도시바삼성스토리지테크놀러지코리아 주식회사 Apparatus and method for providing graphic user interface
KR101397685B1 (en) * 2012-02-29 2014-05-26 주식회사 팬택 User terminal and method for displaying screen
KR102066716B1 (en) * 2013-06-20 2020-01-15 삼성전자주식회사 Method of operating and electronic device thereof
JP6569415B2 (en) * 2015-09-15 2019-09-04 株式会社リコー Display input device, image forming apparatus, electronic apparatus, display control method, and program

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023121265A1 (en) * 2021-12-22 2023-06-29 삼성전자주식회사 Display device, modular display device, and method for controlling same

Also Published As

Publication number Publication date
WO2021118267A1 (en) 2021-06-17

Similar Documents

Publication Publication Date Title
US10503344B2 (en) Dynamic cross-environment application configuration/orientation
US8966379B2 (en) Dynamic cross-environment application configuration/orientation in an active user environment
US9811303B2 (en) Display apparatus, multi display system including the same, and control method thereof
US10073599B2 (en) Automatic home screen determination based on display device
WO2022171054A1 (en) Display refreshing method and apparatus, and electronic device
US20140223341A1 (en) Method and electronic device for controlling dynamic map-type graphic interface
US20160378272A1 (en) Systems and methods for providing multi-focus to applications for collaboration
US9830056B1 (en) Indicating relationships between windows on a computing device
US20130135350A1 (en) Slant and overlaying graphical keyboard
US11068158B2 (en) Electronic apparatus and method for controlling thereof
US9525905B2 (en) Mapping visual display screen to portable touch screen
JP2016031468A (en) Display control device, display device, and display system
KR102161159B1 (en) Electronic apparatus and method for extracting color in electronic apparatus
EP3296859A1 (en) Image output control method, image output control program, and display device
US20150116352A1 (en) Groups control method, system for a dynamic map-type graphic interface and electronic device using the same
EP3704861B1 (en) Networked user interface back channel discovery via wired video connection
KR20210073911A (en) Electronic device and control method thereof
US11599204B2 (en) Electronic device that provides a letter input user interface (UI) and control method thereof
US11735095B2 (en) Electronic apparatus and controlling method thereof
JP2016038619A (en) Mobile terminal device and operation method thereof
KR102328705B1 (en) Electronic apparatus and control method thereof
US20180067632A1 (en) User terminal apparatus and control method thereof
US10845983B2 (en) Virtual multi-display
EP3032492B1 (en) Image processing apparatus and method
US20230400972A1 (en) Electronic apparatus and controlling method thereof

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal