KR20210073911A - Electronic device and control method thereof - Google Patents
Electronic device and control method thereof Download PDFInfo
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000004891 communication Methods 0.000 claims description 32
- 230000008859 change Effects 0.000 claims description 15
- 230000007423 decrease Effects 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 16
- 230000006870 function Effects 0.000 description 9
- 238000012545 processing Methods 0.000 description 5
- 238000004590 computer program Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000010295 mobile communication Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- XUIMIQQOPSSXEZ-UHFFFAOYSA-N Silicon Chemical compound [Si] XUIMIQQOPSSXEZ-UHFFFAOYSA-N 0.000 description 1
- 230000001133 acceleration Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 229910021420 polycrystalline silicon Inorganic materials 0.000 description 1
- 229920005591 polysilicon Polymers 0.000 description 1
- 229910052710 silicon Inorganic materials 0.000 description 1
- 239000010703 silicon Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/45—Management 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/462—Content 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/4621—Controlling 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
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing 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/44—Processing 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/4402—Processing 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
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/45—Management 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/462—Content 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
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/485—End-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
Description
본 개시는 전자 장치 및 그 제어 방법에 관한 것으로, 보다 상세하게는 디스플레이 화면의 크기 또는 비율에 따라 변경되는 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
본 개시의 일 실시 예에 따르면, 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
본 개시에 따른 제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
그리고, 제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
그리고, 제1 전자 장치(100-1)에서 디스플레이 화면의 비율이 유지되며 디스플레이 화면의 크기가 증가된 제3 전자 장치(100-3)에는 제3 UI(30)가 표시될 수 있다. 제3 UI(30)는 제1 그래픽 엘리먼트(30-1), 제2 그래픽 엘리먼트(30-2) 및 제3 그래픽 엘리먼트(30-3) 를 포함할 수 있다.In addition, the
제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
상술한 실시 예에서는 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
메모리(110)는 전자 장치(100)의 동작에 필요한 각종 프로그램 및 데이터를 저장할 수 있다. 구체적으로, 메모리(110)에는 적어도 하나의 인스트럭션이 저장될 수 있다. 프로세서(120)는 메모리(110)에 저장된 인스트럭션을 실행함으로써 전자 장치(100)의 동작을 수행할 수 있다.The
구체적으로, 메모리(110)는 전자 장치(100)의 적어도 하나의 다른 구성요소에 관계된 명령(instruction) 또는 데이터를 저장할 수 있다. 특히, 메모리(110)는 비휘발성 메모리, 휘발성 메모리, 플래시메모리(flash-memory), 하드디스크 드라이브(HDD) 또는 솔리드 스테이트 드라이브(SSD) 등으로 구현될 수 있다. 메모리(110)는 프로세서(120)에 의해 액세스되며, 프로세서(120)에 의한 데이터의 독취/기록/수정/삭제/갱신 등이 수행될 수 있다. 본 개시에서 메모리라는 용어는 메모리(110), 프로세서(120) 내 롬(미도시), 램(미도시) 또는 전자 장치(100)에 장착되는 메모리 카드(미도시)(예를 들어, micro SD 카드, 메모리 스틱)를 포함할 수 있다. Specifically, the
그리고, 메모리(110)에는 UI를 구성하기 위한 복수의 그래픽 엘리먼트가 저장되어 있을 수 있다. In addition, a plurality of graphic elements for configuring the UI may be stored in the
그리고, 메모리(110)에는 복수의 그래픽 엘리먼트를 이용하여 UI를 표시하는 경우, UI에 표시된 그래픽 엘리먼트 각각의 유형 및 세부 정보들이 저장되어 있을 수 있다. 그래픽 엘리먼트의 유형 및 세부 정보에 대한 자세한 내용은 도 8을 통해 후술하도록 한다.In addition, when a UI is displayed using a plurality of graphic elements in the
프로세서(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
프로세서(120)는 UI를 표시하기 위한 이벤트가 발생되면, UI를 디스플레이 상에 표시하도록 제어할 수 있다. 본 개시의 일 실시 예로, 전자 장치(100)에 디스플레이가 포함된 경우, UI를 표시하기 위한 이벤트가 발생되면, 프로세서(120)는 UI를 디스플레이 상에 표시하도록 디스플레이를 제어할 수 있다. 또는, 전자 장치(100)에 디스플레이가 포함되어 있지 않고, 외부 디스플레이 장치와 연결될 수 있는 경우, UI를 표시하기 위한 이벤트가 발생되면, 프로세서(120)는 UI를 외부 디스플레이 장치에 표시하도록 전자 장치(100)를 제어할 수 있다.When an event for displaying the UI occurs, the
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
디스플레이 화면의 크기 및 비율 중 적어도 하나가 식별되면, 프로세서(120)는 식별된 디스플레이 화면의 크기 또는 비율 중 적어도 하나를 바탕으로 UI를 구성하는 복수의 그래픽 엘리먼트 중 디스플레이 화면에 표시되는 UI에 포함되는 적어도 하나의 그래픽 엘리먼트를 식별할 수 있다. 구체적으로, 전자 장치(100)는 디스플레이 화면의 크기 및 비율을 바탕으로, UI에 포함될 그래픽 엘리먼트를 복수의 그래픽 엘리먼트 중에서 식별할 수 있다.When at least one of the size and ratio of the display screen is identified, the
본 개시에 따른 그래픽 엘리먼트란 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
그리고, 프로세서(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
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
그리고, 본 개시에 따른 일 실시 예로, 디스플레이 화면의 크기가 감소하는 경우, 프로세서(120)는 UI에 포함된 그래픽 엘리먼트 중 적어도 하나를 삭제하여 UI를 표시하도록 제어할 수 있다. 또한, 디스플레이 화면의 크기가 증가하는 경우, 복수의 그래픽 엘리먼트 중 적어도 하나를 UI에 추가하여 표시하도록 제어할 수 있다.And, according to an embodiment of the present disclosure, when the size of the display screen decreases, the
그리고, 본 개시에 따른 일 실시 예로, 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
본 개시의 일 실시 예에 따르면, 전자 장치(100)는 복수의 그래픽 엘리먼트를 외부 서버로부터 수신할 수 있다. 그리고, 외부의 서버에서 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 전자 장치(100)는 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신할 수 있다. 그리고, 수신된 정보를 바탕으로, 프로세서(120)는 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 업데이트하여 UI를 디스플레이 상에 표시하도록 제어할 수 있다. 외부 서버로부터 복수의 그래픽 엘리먼트 및 업데이트된 정보를 수신하는 내용에 대한 자세한 내용은 도 5 및 도 6을 통해 후술하도록 한다.According to an embodiment of the present disclosure, the
본 개시의 일 실시 예로, 그래픽 엘리먼트는 제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
본 개시의 일 실시 예에 따른, 디스플레이가 회전 가능한 경우, 프로세서(120)는 디스플레이의 회전에 따라 변경된 디스플레이 화면의 비율을 식별할 수 있다. 그리고, 프로세서(120)는 식별된 디스플레이 화면의 비율을 바탕으로 UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 크기 및 비율 중 적어도 하나를 변경하여 디스플레이 상에 표시하도록 제어할 수 있다. 예로, 16:9 비율의 디스플레이 화면이 회전되어, 9:16 비율의 디스플레이 화면으로 변경되는 경우, UI에 포함된 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트의 세로 비율이 증가되어 표시될 수 있다.According to an embodiment of the present disclosure, when the display is rotatable, the
상술한 바와 같은 다양한 실시 예들에 의해 디스플레이 화면의 크기 및 비율에 대응되도록 그래픽 엘리먼트의 크기 및 비율이 변경되어, 디스플레이 화면의 크기 및 비율에 맞는 최적의 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
도 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
그리고, 외부 서버(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
본 개시의 일 실시 예로, 제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
그리고, 제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
그리고, 제2 전자 장치(100-2)에서 제1 그래픽 엘리먼트(10-1)가 포함되지 않은 제3 UI(20)가 표시되는 경우, 제2 전자 장치(100-2)는 업데이트된 제2 그래픽 엘리먼트(10-2)에 대한 정보를 수신하여도, 제3 UI(20)를 업데이트 하지 않고 그대로 표시할 수 있다.In addition, when the
상술한 바와 같이 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
그리고, 제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
본 개시의 일 실시 예에 따르면, 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
본 개시의 일 실시 예에 따른, 제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
그리고, 제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
또한, 그리고, 제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
예로, 도 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
상술한 바와 같은 다양한 실시 예들에 의해, 디스플레이의 화면의 크기 또는 비율이 변경되어 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
그리고, 본 개시의 일 실시 예로, 제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
그리고, 제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
또한, 제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 또는 제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
UI를 표시하기 위한 사용자 명령이 입력되면, 전자 장치(100)는 디스플레이 화면의 크기 및 비율 중 적어도 하나를 식별할 수 있다(S920). 디스플레이 화면의 크기 및 비율은 디스플레이 상에 컨텐츠, 영상 또는 UI를 표시하는 스크린 또는 디스플레이 상에 컨텐츠, 영상 또는 UI를 표시하는 영역의 크기 및 비율을 의미할 수 있다.When a user command for displaying the UI is input, the
그리고, 전자 장치(100)는 식별된 디스플레이 화면의 크기 및 비율 중 적어도 하나를 바탕으로, UI를 구성하는 복수의 그래픽 엘리먼트 중 적어도 하나의 그래픽 엘리먼트를 식별할 수 있다(S930). 구체적으로, 전자 장치(100)는 디스플레이 화면의 크기 및 비율을 바탕으로, UI에 포함될 그래픽 엘리먼트를 복수의 그래픽 엘리먼트 중에서 식별할 수 있다.Then, the
본 개시에 따른 그래픽 엘리먼트란 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
디스플레이(1030)는 UI(User Interface) 및 그래픽 엘리먼트를 표시할 수 있다. 예를 들어, UI는 어플리케이션 실행 화면, 메뉴 화면, 잠금 화면, 설정 화면 대기 화면 등과 같은 다양한 화면일 수 있다.The
또한, 디스플레이(1030)는 다양한 영상을 디스플레이할 수 있다. 여기에서, 영상은 정지 영상 또는 동영상 중 적어도 하나를 포함하는 개념으로써, 디스플레이(1030)는 방송 컨텐츠, 멀티 미디어 컨텐츠 등과 같은 다양한 영상을 표시할 수 있다.Also, the
그리고, 디스플레이(1030) 화면의 비율은 21:9, 16:9, 4:1, 1:1 및 9:21을 포함하는 다양한 비율로 구현될 수 있다. 본 개시에서 “디스플레이(1030) 화면의 비율”은 컨텐츠, 영상 또는 UI를 표시하는 전체 스크린 또는 전체 영역의 가로 및 세로의 비(가로 : 세로)를 의미할 수 있다. In addition, the screen ratio of the
또한, 디스플레이(1030) 화면의 비율은, 사용자의 입력에 따라 변경될 수 있고, 디스플레이(1030)가 롤러블 디스플레이, 회전가능한 디스플레이 및 복수의 디스플레이를 조합하여 표시될 수 있는 디스플레이 중 적어도 하나로 구현되어, 디스플레이의 동작에 따라 디스플레이(1030) 화면의 비율이 변경될 수 있다.In addition, the screen ratio of the
그리고, 디스플레이(1030)의 크기는 감소하거나 증가할 수 있다. 구체적으로, 디스플레이(1030)는 디스플레이(1030)가 접힐 수 있는 폴더블 디스플레이, 디스플레이(1030)가 롤링되는 롤러블 디스플레이로 구현될 수 있다. 또는, 복수의 디스플레이(1030)가 연결되거나 분리되는 등 디스플레이의 크기가 변경될 수 있다. 또한, 디스플레이(1030) 화면의 크기는 사용자의 입력에 따라 변경될 수 있다. 예를 들어, 디스플레이(1030)가 롤러블 디스플레이로 구현되는 경우, 디스플레이(1030)의 일부 롤링되는 경우에는 디스플레이(1030) 전체의 크기는 동일하나, 디스플레이(1030) 화면의 표시 가능한 영역의 크기가 달라질 수 있고, 이러한 경우에 디스플레이(1030) 화면의 크기가 변경된 것으로 볼 수 있다.In addition, the size of the
이와 같은, 디스플레이(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
또한, 디스플레이(1030)는 터치 패널과 함께 결합되어 터치 스크린으로 구현될 수도 있다. 다만, 이는 일 실시 예일뿐이고, 디스플레이(1030)는 다양하게 구현될 수 있다.Also, the
전자 장치(1000)는 외부 장치와 통신을 수행하기 위한 통신 인터페이스(1040)를 포함할 수 있다. 통신 인터페이스(1040)는 외부 장치 또는 외부 서버와 통신을 수행하기 위해 다양한 통신 모듈을 포함할 수 있다. 구체적으로, 통신 인터페이스(1040)는 근거리 무선 통신 모듈(미도시) 및 무선 랜 통신 모듈(미도시) 중 적어도 하나의 통신 모듈을 포함할 수 있다. 여기서, 근거리 무선 통신 모듈(미도시)은 근거리에 위치한 전자 장치와 무선으로 데이터 통신을 수행하는 통신 모듈로써, 예를 들어, 블루투스(Bluetooth) 모듈, 지그비(ZigBee) 모듈, NFC(Near Field Communication) 모듈 등이 될 수 있다. 또한, 무선 랜 통신 모듈(미도시)은 와이파이(WiFi), IEEE 등과 같은 무선 통신 프로토콜에 따라 외부 네트워크에 연결되어 통신을 수행하는 모듈일 수 있다. The
이 밖에 통신 인터페이스(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
특히, 통신 인터페이스(1040)는 스마트폰 등의 전자 장치로부터, 전자 장치(1000)의 제어를 위한 사용자 명령을 수신할 수 있다. 예를 들어, 스마트폰의 화면을 통해 디스플레이(1030) 화면의 크기 또는 비율을 결정하는 사용자 명령이 입력된 경우, 통신 인터페이스(1040)는 스마트 폰으로부터 전자 장치(1000)의 디스플레이(1030) 화면의 크기 또는 비율을 결정하기 위한 사용자 명령을 수신할 수 있다. In particular, the
또한, 통신 인터페이스(1040)는 외부 서버로부터 복수의 그래픽 엘리먼트를 수신할 수 있다. 그리고, 외부 서버에서 복수의 그래픽 엘리먼트에 중 적어도 하나에 대한 업데이트가 있는 경우, 통신 인터페이스(1040)는 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신할 수 있다. Also, the
전자 장치(1000)는 통신 인터페이스(140)를 통해 각종 방송 서비스, 인터넷 서비스 등을 전자 장치로부터 제공 받을 수 있고, 주변의 스마트폰이나 노트북 등과 통신할 수 있으며, 사운드 바 등의 미디어 기기와 연결될 수 있다.The
입력 인터페이스(1050)는 전자 장치(100)를 제어하기 위한 사용자 명령을 수신할 수 있다. 특히, 입력 인터페이스(150)에 사용자의 손 또는 스타일러스 펜 등을 이용한 사용자 터치를 입력 받기 위한 터치 패널, 사용자 조작을 입력 받기 위한 물리적 버튼 등이 포함될 수 있다. 그 밖에, 입력 인터페이스(1050)는 전자 장치(1000)와 무선 통신 방식이 가능한 외부 장치에 포함되어 구현될 수 도 있다. 일 실시 예로, 외부 장치는 리모컨(remote control), 가상 키보드, 스마트폰 또는 웨어러블 장치 중 적어도 하나로 구현될 수 있다.The
입력 인터페이스(1050)는 컨텐츠 또는 영상을 출력하기 위한 사용자 명령 또는 UI를 표시하기 위한 사용자 명령을 입력 받을 수 있다. 그리고, 입력 인터페이스(1050)는 사용자의 발화 음성을 통한 명령을 입력받기 위한 마이크로 구현될 수 있다. 구체적으로, 마이크에 의하여 사용자의 발화 음성이 직접 입력되면, 프로세서(1020)는 STT(Speech to Text) 모듈(미도시)을 이용하여 사용자의 명령을 식별할 수 있다.The
그리고, 전자 장치(1000)는 모터(미도시), 센서(미도시)를 포함할 수 있다. 모터(미도시)는 디스플레이(1030)가 롤러블로 구현될 때, 롤을 감기 위한 구성일 수 있다. 또는, 모터는 디스플레이(1030)가 회전 가능한 디스플레이인 경우, 디스플레이(1030)를 회전시키기 위한 구성일 수 있다. In addition, the
센서(미도시)는 자이로 센서, 제스처 센서, 가속도 센서, 그립센서 등 다양한 센서들을 포함할 수 있으며, 각각의 센서에서 수집된 데이터를 이용하여 사용자의 시청 거리를 측정하거나, 롤러블 디스플레이의 크기를 감지하거나, 회전 가능한 디스플레이의 회전 방향을 감지할 수 있다. 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
이상에서 설명된 다양한 실시 예들은 소프트웨어(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
본 개시의 다양한 실시 예들은 기기(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
이러한 명령어가 프로세서에 의해 실행될 경우, 프로세서가 직접, 또는 상기 프로세서의 제어 하에 다른 구성요소들을 이용하여 명령어에 해당하는 기능을 수행할 수 있다. 명령어는 컴파일러 또는 인터프리터에 의해 생성 또는 실행되는 코드를 포함할 수 있다. 예컨대, 저장매체에 저장된 명령어가 프로세서에 의해 실행됨으로써, 상술한 전자 장치의 제어방법이 실행될 수 있다. 일 예로, 저장매체에 저장된 명령어가 기기(또는 전자 장치)의 프로세서에 의해 실행됨으로써, 외부 장치와 최초 연결을 수행하기 위한 적어도 하나의 중계 장치를 포함하는 목록을 획득하여 디스플레이 상에 표시하는 단계, 상기 목록 중 하나의 중계 장치가 선택되면, 상기 선택된 중계 장치에 대한 접속 요청을 상기 선택된 중계 장치로 전송하는 단계, 상기 중계 장치로부터 접속 승인 정보를 수신하면, 상기 중계 장치에 의해 연결을 수행할 수 있는 적어도 하나의 외부 장치에 대한 목록을 상기 디스플레이 상에 표시하는 단계, 상기 적어도 하나의 외부 장치에 대한 목록 중 하나의 외부 장치가 선택되면, 상기 선택된 외부 장치에 대한 인증 요청을 상기 선택된 외부 장치로부터 수신하는 단계 및 상기 인증 요청에 응답하여 사용자 입력이 수신되면, 상기 선택된 외부 장치와 최초 연결을 수행하는 단계가 수행될 수 있다. 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.
상기 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.
상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면,
상기 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.
상기 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.
상기 디스플레이 화면의 크기가 감소하는 경우, 상기 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.
상기 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 ;.
상기 복수의 그래픽 엘리먼트는 외부 서버로부터 수신되고,
상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하는 단계; 및
상기 수신된 정보를 바탕으로, 상기 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.
상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 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.
상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 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.
상기 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.
상기 디스플레이 화면의 크기 및 비율 중 적어도 하나가 변경되면,
상기 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.
상기 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.
상기 프로세서는,
상기 디스플레이 화면의 크기가 감소하는 경우, 상기 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.
상기 프로세서는,
상기 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.
통신 인터페이스를 더 포함하고,
상기 복수의 그래픽 엘리먼트는 상기 통신 인터페이스를 통해 외부 서버로부터 수신되고,
상기 프로세서는,
상기 복수의 그래픽 엘리먼트에 대한 업데이트가 있는 경우, 상기 통신 인터페이스를 통해 외부 서버로부터 업데이트된 그래픽 엘리먼트에 대한 정보를 수신하고,
상기 수신된 정보를 바탕으로, 상기 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.
상기 프로세서는,
상기 전자 장치가 복수의 디스플레이를 조합하여 표시 할 수 있는 장치인 경우, 적어도 하나의 디스플레이의 조합에 따라 변경된 디스플레이 화면의 크기 및 비율을 식별하고, 상기 식별된 크기 및 비율을 바탕으로 상기 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.
상기 프로세서는,
상기 디스플레이가 회전 가능한 경우, 상기 디스플레이의 회전에 따라 변경된 상기 디스플레이 화면의 비율을 식별하고, 상기 식별된 비율을 바탕으로 상기 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.
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)
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)
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 |
-
2019
- 2019-12-11 KR KR1020190164697A patent/KR20210073911A/en not_active Application Discontinuation
-
2020
- 2020-12-10 WO PCT/KR2020/018073 patent/WO2021118267A1/en active Application Filing
Cited By (1)
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 |