Python Kivy BoxLayout 위젯 완벽 가이드 – 버튼 레이아웃 만들기

Kivy란 무엇인가?

Kivy는 멀티터치 앱처럼 혁신적인 사용자 인터페이스(UI)를 활용하는 애플리케이션을 빠르게 개발할 수 있도록 도와주는 오픈 소스 Python 라이브러리입니다. 안드로이드 앱은 물론 데스크톱 애플리케이션 개발에도 폭넓게 사용되고 있습니다.

이 글에서는 Kivy의 BoxLayout 위젯을 활용해 서로 다른 방향(가로·세로)과 다양한 색상을 가진 버튼들을 배치하는 방법을 단계별로 살펴보겠습니다.

BoxLayout의 기본 구조

아래 예제 코드는 다음과 같은 계층 구조로 화면을 구성합니다.

• 외부 박스(outerBox) : 전체 레이아웃을 감싸는 세로(vertical) 방향 컨테이너
• 첫 번째 행(Row1) : 두 개의 버튼이 나란히 놓이는 가로(horizontal) 방향 레이아웃
• 두 번째·세 번째 행(Row_2_3) : 버튼이 위아래로 쌓이는 세로(vertical) 방향 레이아웃

이렇게 만든 모든 행을 외부 박스에 담고, 각 버튼 위젯에는 서로 다른 텍스트와 배경색을 지정합니다.

예제 코드

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

# 메인 Kivy 클래스
class BoxLayoutApp(App):

    def build(self):
        # 외부 세로 방향 박스
        outerBox = BoxLayout(orientation='vertical')

        # 나란히 배치되는 위젯을 위한 가로 방향 레이아웃
        Row1 = BoxLayout(orientation='horizontal')

        # 첫 번째 행의 버튼 생성
        btn1 = Button(text="One",
            background_normal ='',
            background_color= (1, 0, 1, 1),
            font_size=25,
            size_hint=(0.7, 1))
        btn2 = Button(text="Two",
            background_normal='',
            background_color=(1, 1, 0, 0.8),
            font_size=25,
            size_hint=(0.7, 1))

        # 첫 번째 행에 버튼 추가
        Row1.add_widget(btn1)
        Row1.add_widget(btn2)

        # 두 번째, 세 번째 행의 버튼
        Row_2_3 = BoxLayout(orientation='vertical')

        btn3 = Button(text="Three",
            background_normal='',
            background_color=(1,0,0,0.75),
            font_size=25,
            size_hint=(1, 10))
        btn4 = Button(text="Four",
            background_normal='',
            background_color=(0,1,0,0.75),
            font_size=25,
            size_hint=(1, 15))

        # 두 번째, 세 번째 행에 버튼 추가
        Row_2_3.add_widget(btn3)
        Row_2_3.add_widget(btn4)

        # 모든 위젯을 외부 박스에 추가
        outerBox.add_widget(Row1)
        outerBox.add_widget(Row_2_3)
        return outerBox

# BoxLayoutApp() 클래스의 루트 객체 생성
main_layout = BoxLayoutApp()
main_layout.run()

위 코드를 실행하면 아래와 같은 결과 화면을 확인할 수 있습니다.

실행 결과

핵심 속성 정리

• orientation : 'vertical'(세로) 또는 'horizontal'(가로) 값을 지정해 자식 위젯의 배치 방향을 결정합니다.
• background_color : (R, G, B, A) 형식의 RGBA 값으로 배경색을 지정합니다. 각 값은 0~1 사이의 실수이며, 마지막 값(A)은 투명도를 의미합니다.
• background_normal : 기본 배경 이미지를 비우기 위해 빈 문자열('')로 설정해야 background_color가 정상적으로 적용됩니다.
• size_hint : 부모 레이아웃 안에서 위젯이 차지하는 상대적인 크기를 지정합니다. 예를 들어 (0.7, 1)은 너비의 70%, 높이의 100%를 차지한다는 의미입니다.