파이썬 KIVY | 간단한 시계 만들기 | 파이썬 GUI 프레임워크

파이썬 키비(Kivy)는 파이썬의 크로스 플랫폼 GUI 프레임워크다.

파이썬의 GUI 중에서도 터치패드를 지원하여 모바일 앱을 만들 수 있다는 것과 kv 언어(자체 HTML 같은 것)를 사용한다는 것이 특징적이다.

PC에서는 SDL2와 OpenGL 을 사용해서 그래픽 API를 사용할 수 있고 모바일 환경에서 OpenGL ES (임베디드 시스템용 OpenGL)를 사용하여 균일하고 안정적인 그래픽을 표현할 수 있다.

Kivy의 개발 방식은 자체 마크업 언어인 Kivy Language 를 사용해서 디자인과 프로그램 로직이 분리되어 있다. FXML을 사용하는 JavaFX와도 비슷하다. 이렇게 디자인과 로직을 분리해놓으면 디자이너와 협업하는 일이 수월하다.

가끔 보면 상당히 훌륭한 오픈소스인데 시장점유율이 낮은 경우가 있는데 kivy 프레임워크가 이런 류에 해당한다. kivy 같은 경우는 약간 만능 스타일이다. 데스크탑 앱 뿐만 아니라 모바일(안드로이드, IOS)도 개발할 수 있고, SDL2와 OpenGL을 지원하기에 게임도 개발할 수 있다. 이런 프레임워크는 특정 분야의 프로 엔지니어보다는 이것도 해보고 저것도 해보길 좋아하는 매니아들이 좋아하게 된다. 하긴 파이썬 커뮤니티의 상당수가 직업적 목적도 있지만 순수 프로그래밍을 즐기는 사람들이 많다.

물론 사람들은 직업을 위해서 코딩을 해야하지만 이 세상에는 코딩에서 그 이상의 것을 얻어가려는 사람도 있다. 의외로 매너리즘에 빠진 사람도 Kivy에서 그런 재미를 찾을 수도 있다.

아래의 채널은 해외 유튜버인데 불과 11살의 나이에 Kivy 로 모바일 앱을 만드는 강의를 하고 있다;;; 물론 영어사용권의 아이니까 코딩에 더 쉽게 접근하는 것도 있겠지만 보면서도 충격을 금치 못하고 있다. 어떻게 하면 10살에 저런 강의를 할 수 있을까? 진짜 11살이 맞나? 외국은 만이니까 우리 나이로는 12 ~ 13살? 그렇다 하더라도 말이 안된다.

강의가 한 두개가 아니라 시리즈로 올리고 있다. 어느새 외국 초딩의 파이썬 객체지향 프로그래밍 강의를 듣고 있는 필자가 레전드다;;;

How To Make Mobile Apps with Python - Kivy Tutorial #1 - YouTube

모바일 앱을 만드는 외국 초딩에게 뒤쳐지지 않으려고 열심히 살아야 겠다고 다짐한다 ㅠㅠ

대부분 프레임워크는 시작하는 것 조차 버겁기 때문에 이것을 일이라고 생각하면 까마득하다. 파이썬의 기초를 막 벗어난 사람들도 쉽지 않다.

이를 극복하는 여러가지 방법이 있지만 한 가지 좋은 방법은 쉬운 작업물 부터 만들어 보는 것이다. 프레임워크는 보통 특정의 목적을 가지고 설계되어 있기 때문에 그 프레임워크를 사용해서 쉽게만들 수 있는 프로그램이 반드시 존재한다.

GUI 프레임워크는 윈도우창을 띄우기 쉽고 이벤트 루프가 이미 구현되어 있다. 메소드를 오버라이딩하는 것만으로 interval 기능을 사용할 수 있다. 파이썬 kivy의 문법은 다르지만 이벤트 루프의 작동방식에 있어서 JavaScript 와 유사한 부분이 있다고 한다.

이 포스팅에서는 kivy로 간단한 시계를 만들어 본다. 시계는 간단한 코드로 작성할 수 있는 유용한 프로그램이다. 데스크탑용 내장 시계들은 볼품이 없다. 디지털 시대에도 꼭 비싼 손목시계를 착용해야 마음이 편해지는 사람들이 있는 것 처럼 자신만의 시계를 커스터 마이즈 하는 것은 프로그래머의 로망이기도 하다. 일단 자신의 시계를 만들어 놓으면 시계가 리턴하는 값으로 예약 실행 프로그램도 만들 수 있다. 어떤 GUI를 시작하더라도 시계를 구현해보면 좋다.

먼저 Kivy 언어 파일이다.

여기서는 파일명과 확장자가 정확해야 한다. 파일명을 clock.kv 라고 정했다. 왜냐하면 main.py 에서 kivy 기본 클래스 이름을 ClockApp 이라고 지었기 때문이다. Clock + App 에서 Clock 을 소문자로 바꾼 것이 kivy 언어 파일의 이름이 되야 작동을 한다. 그게 규칙이다.

BoxLayout:
    orientation: 'vertical'

    Label:
        id: time
        text: '[b]00[/b]:00:00'
        font_name: 'Roboto'
        font_size: 55
        markup: True

BoxLayout 이 Root 프레임이 된다. Root는 하나만 둘 수 있다. orientation 은 수직 (vertical)의 속성을 준다. 그 다음에 Label은 위젯이다. 철자를 주의해야한다. 은근히 규칙들이 숨어있다. Label 이 원래 클래스 이름이므로 그대로 레이블을 생성한다.

id: time 아이디를 지정하면 main.py 에서 사용할 수 있게 된다. text는 표시할 문자열이다.

여기서 HTML 태그같은게 나온다. [b] [/b] 맞다. HTML에서 볼드(굵은 글씨) 태그와 기능이 같다. font_name은 main에서 지정하는 내용을 넣어야 한다. main.py에서 자신이 사용하려는 폰트의 이름을 지정할수 있다. markup 기능을 활성화 시켜야 [b] 같은 태그들이 작동한다. HTML 방식의 태그를 응용했기 때문에 적응하는데 어렵지는 않다.

from time import strftime

from kivy.app import App
from kivy.clock import Clock
from kivy.core.window import Window
from kivy.core.text import LabelBase
from kivy.utils import get_color_from_hex

# 윈도우 설정
Window.size = (400, 300)
Window.clearcolor = get_color_from_hex('#3385ff')


class ClockApp(App):
    def update_clock(self, nap):
        self.root.ids.time.text = strftime('   Clock\n[b]%H[/b]:%M:%S')

    def on_start(self):
        Clock.schedule_interval(self.update_clock, 1)


if __name__ == '__main__':
    ClockApp().run()

LabelBase.register(name='Roboto',
                   fn_regular='./font/Roboto-Thin.ttf',
                   fn_bold='./font/Roboto-Medium.ttf')

* 위의 코드는 main.py 파일이다. import문에는 사용 모듈만 지정했는데 kivy 언어 파일은 import 하는게 아니라 프레임워크에서 자동으로 인식한다. 그래서 파일명의 정확성에 대해 이야기 한 부분이다. ClockApp -> clock.kv 와 연결된다.

윈도우의 세팅은 Window 클래스를 가져와서 하는데 다른 GUI들과 크게 다를바 없다. 윈도우 창 크기에는 항상 width, height 두 인수는 들어가게 되있다. 배경색도 마찬가지다. 내가 지정하지 않았는데 자동으로 실행되는 부분들은 전부다 프레임워크에서 지정한 디폴트(기본값)값이 있다고 보면 된다. GUI프로그래밍은 정확한 윈도우를 그리는 것이기 때문에 하나의 윈도우창을 띄운때도 프로그램에 모든 인수를 전달해줘야한다. 대부분 기본값들을 지원하기 때문에 크게 손볼 필요는 없고 윈도우 창의 크기 정도 지정한다.

마지막 세줄의 코드를 먼저 좀 보면 폰트를 등록하는 과정이다. 두가지 폰트를 등록한다. bold -> [b] 태그에 연결되있다. name 을 Roboto 로 지정해두면 kv 파일에서는 폰트 정보를 이름으로 꺼내와서 사용한다.

클래스에서 def update_clock 은 시계가 1초마다 해야할 일을 정의한 사용자 정의 메소드이다. self.root 는 BoxLayout 을 말한다. 계층구조가 되어 있으므로 BoxLayout 의 하위인 Label 을 검색해서 id가 time 인 것을 찾아내고 업데이트한 시간을 기록한다.

def on_start 는 App 클래스의 오버라이딩이다. 앱이 시작하면 이벤트 루프에 들어가는 메소드다. 여기서 interval 을 1초 단위로 두고 시간을 업데이트 한다.

실행이 성공하면 아래와 같은 결과를 볼 수 있을 것이다.