[kivy] 파이썬으로 안드로이드 스마트폰 앱 만들기/Hello World 앱 만들기

---

목차

1. 주제 소개

2. Hello World 앱 만들기(기본)

3. Hello World 앱 만들기(.kv 파일과 Screenmanager 활용)

---

 

1. 주제 소개

 

필자는 앞서 kivy 앱을 안드로이드 앱(.apk)으로 만드는 방법을 소개했었다.

 

파이썬으로 안드로이드 스마트폰 앱(apk 파일) 만들기/kivy, buildozer, wsl

 

kivy 앱 만드는 방법보다 apk 파일 만드는 방법을 먼저 소개한 이유는, 목적지를 먼저 제시하는 것이 더 흥미로울 거라고 생각했기 때문이다. 

 

필자가 kivy 사용법을 익혀가며 생각한 것이 있는데, 앱 만드는 작업이 생각보다 재미있지만은 않다는 것이다.

 

세부적인 디자인 요소들을 수정해 가면서 다시 실행해보는 것의 반복인데, 그 결과로서 스마트폰 앱을 만들 수 있다면 좀 더 동기부여가 될 것이라 생각한다.

 

이제부터는, 얼마나 걸릴지 모르겠지만, 내가 원하는 대로 kivy 앱을 만들어 내는 방법에 대해 조금씩 소개하려고 한다.

 

반응형

 

2. Hello World 앱 만들기(기본)

 

먼저, 모든 프로그래밍 튜토리얼이 그렇듯이, Hello world라는 텍스트를 화면에 출력해 주는 프로그램을 먼저 만들어보자. 쓸 데 없어 보이지만 kivy 앱의 기본적인 구조를 알 수 있다.

 

(필자가 아는 한) 모든 kivy 앱은 아래와 같은 구조로 되어 있다.

 

 

 

from kivy.app import App # (1)
from kivy.uix.label import Label 

class HelloApp(App): # (2)

	def build(self): # (3)
    		return Label(text='Hello world') # (4)

if __name__ == '__main__':  # (5)
	HelloApp().run()

 

(1)과 같이 App 모듈을 불러와주고, (2)와 같이 본인이 만들고자 하는 메인 앱을 클래스로 선언해주면서, (1)에서 불러온 App을 상속한다(괄호 안에 App을 써준다).

 

App을 상속하여 만든 클래스 안에는 항상 (3)과 같이 build 함수를 선언해준다.

 

build 함수에서 return하는 것이 바로 우리가 만들 앱이 되는데, 우리는 지금 Hello world를 출력해주는 앱을 만들고 있으므로, (4)와 같이 Hello world를 텍스트로 하는 라벨을 return해준다.(여기에서 라벨을 넣기 위해서 둘째 줄에서 Label을 import한 것이다)

 

그런 다음, 맨 마지막에는 항상 (5)와 같이 .run() 함수를 실행하여, 앱을 구동하게끔 해준다.

 

여기에서 (4) 부분에 라벨이 아니라 버튼, 이미지 등을 넣어주면 해당 요소가 표시될 것이다.

 

여기에서는 하나만 이해하면 된다. build 함수에서 return해주는 것이 내가 만들 앱이 된다. 

 

반응형

 

3. Hello World 앱 만들기(.kv 파일과 Screenmanager 활용)

 

앞에서 kivy 앱의 기본 구조를 알아보았는데, 실제 앱은 앞서 본 예제처럼 간단하지가 않다. 글자 하나 출력해주는 앱을 만들려는 사람은 없을 것이다.

 

조금 더 복잡한 앱을 만들기 위해서는, kivy의 여러 도구들을 이용해 build 함수에서 return해줄 앱을 구축해야 한다.

 

.kv 파일

 

웹프로그래밍에서 HTML로 웹페이지의 구조를 만들고, CSS로 웹페이지를 꾸미고, Javascript를 이용해 기능적인 부분들을 구현하듯이, kivy에서는 확장자가 .kv인 별도의 파일에서 앱을 디자인할 수 있게 돼 있다.

 

예를 들면 우리가 만들고자 하는 Hello world 앱을 위한 .kv 파일은 아래와 같이 만들 수 있다.

 

 

<MainScreen>:
	Label:
    		text: "hello world"

 

 

위 코드를 말로 설명하면, 우리가 만들 앱의 MainScreen에는 Hello world라고 써진 라벨을 하나 표시해달라는 이야기이다.(여기에서 MainScreen은 어떠한 고유명사가 아니고 그냥 필자가 붙인 이름이니 오해 말기 바란다)

 

레이아웃을 이용하면 아래와 같이 더 복잡한 구조를 만들어낼 수 있다. 말로 표현해보면, 2열로 된 격자형 구조에 라벨 2개를 표시해달라는 이야기이다. 

 

 

 

<MainScreen>:
	GridLayout:
    		cols: 2
    		Label:
    			text: "hello world"
		Label:
    			text: "hello world"

 

 

레이아웃 안에 또 레이아웃을 넣어서 얼마든지 더 복잡한 구조를 만들어낼 수가 있는데, 어찌 보면 이와 같이 계층적 구조를 가지는 점에서 HTML과 비슷하다고 볼 수 있다.

 

반응형

 

Screenmanager

 

무언가 앱을 만들고자 한다면 화면이 하나밖에 없는 앱을 만들려는 경우는 별로 없을 것이다.

 

kivy 앱에서 여러 개의 화면을 구현하는 모듈은 여러 가지가 있는데, 그중 Screenmanger를 먼저 소개하려 한다. 

 

자세한 사용법은 나중에 따로 다뤄보기로 하고, 여기에서는 먼저 Hello world를 출력해주는 스크린 하나만 만들어보자.

 

아래는 위에서 만든 .kv파일을 Screenmanager를 이용해 화면에 띄우는 코드이다.

 

from kivy.app import App
from kivy.lang import Builder # (6)
from kivy.uix.screenmanager import ScreenManager, Screen # (1)

Builder.load_file('main.kv') # (7)

class MainScreen(Screen): # (3)
    pass

class HelloApp(App):
    def build(self):
        sm = ScreenManager() # (2)
        sm.add_widget(MainScreen(name='main')) # (4)
        return sm # (5)

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

 

차례로 살펴보자.

 

먼저 (1)과 같이 ScreenManager와 Screen을 import해주고 나서 (2)와 같이 메인 앱의 build 함수 내에서 ScreenManager의 인스턴스를 생성해준다. 여기에서는 sm이라고 이름을 붙였는데, 이름은 아무렇게나 붙여도 되고, 최종적으로 우리가 실행할 앱이 바로 이것이다.

 

이제는 ScreenManager에 화면을 추가해줄 차례이다. (3)과 같이 추가하려는 스크린의 이름을 마음대로 붙여 클래스를 선언해주고(여기에서는 MainScreen으로 했다), Screen 모듈을 상속해준다. 화면을 만들기만 할 것이기 때문에 클래스만 선언해주고 pass를 입력한다.

 

그런 다음에는 (4)와 같이 add_widget 함수를 이용해 위에서 만들어준 스크린을  ScreenManager에다가 추가해준다. 여기에서 add_widget을 할 때마다 화면이 하나씩 늘어나는 것이다.(name='main' 부분은 나중에 설명하겠다.)

 

화면을 추가해주고 나서, (5)와 같이 build 함수가 sm(ScreenManager)을 return하도록 하면, 내가 추가한 화면이 앱을 실행했을 때 나타난다.

 

앞서 만들었던 .kv 파일을 불러오려면 (6)과 같이 Builder를 import해준 다음, (7)과 같이 .kv 파일을 불러오면 된다.

 

[참고] 참고로 앱 디자인을 꼭 .kv 파일로 해야만 하는 것은 아니다. 앞서 본 것처럼 .py 파일 내에서도 위젯을 추가할 수가 있고, Builder.load_string()을 이용하면 .txt 파일로 작성한 것을 불러와 사용할 수도 있다.

 

여기에서 주의해야 할 점은, .kv 파일의 화살괄호 안에 쓴 스크린의 이름과, .py 파일에서 만든 스크린의 이름(클래스명)이 똑같아야 한다는 것이다.(예제에서는 MainScreen으로 했다)

 

위의 코드를 실행해보면 앞서 더 간단한 방법으로 만들었던 것과 똑같은 화면이 나타날 것이다.

 

여기에서는 .kv파일을 불러오는 방법과 ScreenManager의 기본적인 사용법을 이해하고 넘어가면 되겠다.