코딩유치원

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

GUI(Graphical User Interface) 애플리케이션을 개발할 때, Python의 기본 GUI 라이브러리인 Tkinter를 많이 사용합니다. 하지만 Tkinter의 기본 스타일은 오래되어 모던한 디자인을 적용하기 어렵습니다. 이를 보완하기 위해 등장한 것이 CustomTkinter입니다!

CustomTkinter는 Tkinter를 기반으로 하면서도 더 세련된 디자인과 다크 모드 지원, 커스텀 스타일 적용이 가능한 강력한 GUI 라이브러리입니다. 특히, 기본적으로 반응형 UI 요소를 제공하여 더욱 깔끔하고 현대적인 인터페이스를 구현할 수 있습니다.

이 글에서는 지난 글에서 다루었던 CustomTkinter 기초에 이어서 CustomTkinter의 다양한 위젯을 소개하고, 각 위젯을 어떻게 사용할 수 있는지 코드 예제와 함께 설명해 보겠습니다.

아래는 CustomTkinter에서 제공하는 주요 위젯들을 한 번에 보여주는 코드입니다. 이 후 각 위젯을 개별적으로 설명하겠습니다.

[코드]

import customtkinter as ctk

# CustomTkinter 설정
ctk.set_appearance_mode("Dark")
ctk.set_default_color_theme("blue")

# 메인 윈도우 생성
root = ctk.CTk()
root.geometry("600x800")
root.title("CustomTkinter 위젯 예제")

# Switch 위젯 (모드 토글)
def toggle_mode():
    if ctk.get_appearance_mode() == "Dark":
        ctk.set_appearance_mode("Light")

    else:
        ctk.set_appearance_mode("Dark")

mode_toggle = ctk.CTkSwitch(root, text="모드 변경", command=toggle_mode)
mode_toggle.pack(pady=10, anchor="se", padx=10)

# Entry 위젯
entry = ctk.CTkEntry(root, placeholder_text="이름을 입력하세요")
entry.pack(pady=10)

# Slider 위젯 (라벨 위젯으로 슬라이더 값 표시)
label = ctk.CTkLabel(root, text="슬라이더 값: ")
label.pack(pady=10)

def slider_event(value):
    label.configure(text=f"슬라이더 값: {int(value)}")

slider = ctk.CTkSlider(root, from_=0, to=100, command=slider_event)
slider.pack(pady=10)

# CheckBox 위젯
checkbox = ctk.CTkCheckBox(root, text="동의합니다")
checkbox.pack(pady=10)

# RadioButton 위젯
radio_var = ctk.StringVar(value="옵션1")
radiobutton1 = ctk.CTkRadioButton(root, text="옵션 1", variable=radio_var, value="옵션1")
radiobutton2 = ctk.CTkRadioButton(root, text="옵션 2", variable=radio_var, value="옵션2")
radiobutton1.pack()
radiobutton2.pack()

# ComboBox 위젯
combobox = ctk.CTkComboBox(root, values=["선택 1", "선택 2", "선택 3"])
combobox.pack(pady=10)

# ProgressBar 위젯
progressbar = ctk.CTkProgressBar(root)
progressbar.pack(pady=10)
progressbar.set(0.5)  # 50% 진행 상태

# TabView 위젯
tabview = ctk.CTkTabview(root)
tabview.pack(pady=10)

# 탭 추가
tab1 = tabview.add("탭 1")
tab2 = tabview.add("탭 2")

# 각 탭에 내용 추가
ctk.CTkLabel(tab1, text="탭 1의 내용입니다").pack(pady=10)
ctk.CTkLabel(tab2, text="탭 2의 내용입니다").pack(pady=10) 

# ScrollableFrame 위젯
scrollable_frame = ctk.CTkScrollableFrame(root, width=300, height=150)
scrollable_frame.pack(pady=10)
for i in range(10):
    ctk.CTkLabel(scrollable_frame, text=f"항목 {i+1}").pack()

# 실행
root.mainloop()

[결과]

1. Switch 위젯

전환 가능한 스위치 버튼으로, ON/OFF 상태를 가집니다. CTkSwitch( ) 클래스를 이용해서 추가 가능하며, 이 스위치를 조작했을 때, 다크/라이트 모드가 변경되도록 함수를 정의하고 스위치 클래스와 연결해 보았습니다.

참고로 스위치는 pack( ) 메소드의 anchor 파라미터를 "e"로 설정해서 우측에 위치하도록 하였습니다.

• "n": north (위) / "s": south (아래) / "e": east (오른쪽) / "w": west (왼쪽)  --> 조합도 가능 (ex. "ne")

[코드]

# Switch 위젯 (모드 토글)
def toggle_mode():
    if ctk.get_appearance_mode() == "Dark":
        ctk.set_appearance_mode("Light")

    else:
        ctk.set_appearance_mode("Dark")

mode_toggle = ctk.CTkSwitch(root, text="모드 변경", command=toggle_mode)
mode_toggle.pack(pady=10, anchor="ne", padx=10)

[결과]

2. Entry 위젯

Entry 위젯은 사용자가 텍스트를 입력할 수 있는 입력 필드입니다. Entry라는 용어가 익숙하지 않으신 분들은 Input 위젯이라고 생각하시면 되겠습니다. 이번 시간에는 입력 받은 값을 어떻게 사용하는지는 다루지 않고 이런 위젯이 있다는 것만 언급하고 넘어가도록 하겠습니다.

[코드]

entry = ctk.CTkEntry(root, placeholder_text="이름을 입력하세요")
entry.pack(pady=10)

[결과]

3. Slider 위젯

사용자가 드래그하여 값을 조정할 수 있는 슬라이더입니다. 슬라이더가 조정될 때 변하는 값을 관찰하기 위해서 지난 시간에 배웠던 Label 위젯을 먼저 추가해주었습니다. slider_event 함수는 CTkSlider의 값을 받아서 그 값을 포함한 Label을 출력해주도록 정의하였습니다.

CTkSlider는 "from_" 과 "to" 파라미터로 시작과 끝 값을 지정해주며, command 파라미터의 인자로 위에서 정의한 slider_event 함수를 입력해주었습니다.

여기서 slider_event의 파라미터인 value는 어떻게 입력되는지 잘 이해가 되지 않아서 찾아보니, 슬라이더의 현재 값이 자동으로 command 파라미터로 지정된 함수(slider_event)로 입력된다고 합니다.

[코드]

# Slider 위젯 (라벨 위젯으로 슬라이더 값 표시)
label = ctk.CTkLabel(root, text="슬라이더 값: ")
label.pack(pady=10)

def slider_event(value):
    label.configure(text=f"슬라이더 값: {int(value)}")

slider = ctk.CTkSlider(root, from_=0, to=100, command=slider_event)
slider.pack(pady=10)

[결과]

4. CheckBox 위젯

사용자가 체크할 수 있는 체크박스입니다. 체크 박스 옆의 메시지를 "text" 파라미터로 설정할 수 있습니다.

[코드]

checkbox = ctk.CTkCheckBox(root, text="동의합니다")
checkbox.pack(pady=10)

[결과]

5. RadioButton 위젯

여러 개의 옵션 중 하나를 선택할 수 있는 버튼입니다. radio_var이란 변수를 설정해주고, 그 값을 CTkRadioButton( )의 variable 파라미터의 인자로 넣어주는 이유는 옵션을 선택했을 때 그 옵션의 "value"를 저장하기 위함입니다. 이 값을 다른 코드에서 입력으로 받아서 사용할 수 있도록 말입니다. 참고로 value는 문자열이 아니라 숫자도 가능합니다.

[코드]

radio_var = ctk.StringVar(value="옵션1")
radiobutton1 = ctk.CTkRadioButton(root, text="옵션 1", variable=radio_var, value="옵션1")
radiobutton2 = ctk.CTkRadioButton(root, text="옵션 2", variable=radio_var, value="옵션2")
radiobutton1.pack()
radiobutton2.pack()

[결과]

6. ComboBox 위젯

드롭다운 목록을 통해 값을 선택할 수 있는 콤보박스입니다. values 파라미터에 선택지를 리스트 타입으로 입력합니다.

[코드]

combobox = ctk.CTkComboBox(root, values=["선택 1", "선택 2", "선택 3"])
combobox.pack(pady=10)

[결과]

7. ProgressBar 위젯

진행 상태를 표시하는 프로그레스 바입니다. 프로그레스 바는 무언가 진행되는 정도를 보여주기 위한 위젯이기 때문에 해당 위젯 이외에 프로그레스 바의 수치를 10초간 10%씩 증가시키는 update_progress( ) 함수와 해당 함수를 실행하기 위한 버튼을 추가해주었습니다.

여기서 조금 어려운 포인트는 lambda 함수를 사용해 준 부분입니다. 여기서 lambda 함수를 써준 이유는 버튼 한 번의 클릭으로 두 가지 기능을 수행하기 위함입니다. progressbar.set(0)로 프로그레스 바의 값을 0으로 초기화 해준 다음 update_progress( ) 함수를 수행하게 됩니다.

[코드]

# ProgressBar 위젯
progressbar = ctk.CTkProgressBar(root)
progressbar.pack(pady=10)
progressbar.set(0)  # 초기값 0%

def update_progress():
    current_value = progressbar.get()
    if current_value < 1.0:
        progressbar.set(current_value + 0.1)  # 10% 증가
        root.after(1000, update_progress)  # 1초 후 다시 실행

# 실행 버튼
start_button = ctk.CTkButton(root, text="실행", command=lambda: [progressbar.set(0), update_progress()])
start_button.pack(pady=10)

[결과]

8. TabView 위젯

여러 개의 탭을 포함하여 다양한 화면을 제공하는 위젯입니다. 먼저 CTkTabview( ) 클래스로 TabView 위젯을 하나 생성합니다. 메인 윈도우창인 root만 인자로 입력 받네요. 바로 이어서 방금 생성한 tabview 객체에 add( ) 메소드를 활용하여 "탭 1"과 "탭 2"를 생성해줍니다.

여기까지가 TabView 위젯을 생성하는 것이고, 다음 코드는 생성한 탭 안에 라벨 위젯을 넣는 코드입니다. 익숙한 코드인데 조금 다른 점은 pack( ) 메소드를 곧바로 붙여서 작성했다는 것과, 첫번째 인자를 root가 아니라 tab1과 tab2로 입력해주었다는 것입니다.

[코드]

# TabView 위젯
tabview = ctk.CTkTabview(root)
tabview.pack(pady=10)

# 탭 추가
tab1 = tabview.add("탭 1")
tab2 = tabview.add("탭 2")

# 각 탭에 내용 추가
ctk.CTkLabel(tab1, text="탭 1의 내용입니다").pack(pady=10)
ctk.CTkLabel(tab2, text="탭 2의 내용입니다").pack(pady=10)

[결과]

9. ScrollableFrame 위젯

스크롤 가능한 프레임으로, 많은 항목을 표시할 때 유용합니다. CTkScrollableFrame( ) 클래스는 width와 height 파라미터에 정수형 자료를 입력해서 크기를 조절할 수 있습니다. 그리고 그 안에 내용을 넣을 때는 위에서 탭에 내용을 추가 했을 때 처럼 Label 위젯의 첫번째 인자를 root가 아닌 방금 생성한 scrollable_frame 객체로 해주면 됩니다.

[코드]

scrollable_frame = ctk.CTkScrollableFrame(root, width=300, height=150)
scrollable_frame.pack(pady=10)
for i in range(10):
    ctk.CTkLabel(scrollable_frame, text=f"항목 {i+1}").pack()

[결과]

이번 글에서는 CustomTkinter의 다양한 위젯들을 살펴보며 각각의 기능과 사용법을 익혔습니다. 이제 기본적인 위젯 사용법을 이해했으니, 다음 글에서는 간단한 프로젝트를 통해 실제로 GUI 프로그램을 어떻게 활용할 수 있는지 알아보겠습니다. CustomTkinter를 사용하여 실용적인 애플리케이션을 만들고, 이를 통해 GUI 개발의 흐름과 응용 방법을 배워보도록 하겠습니다.

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

이번 시간에는 우리가 .py 파일에 작성한 코드를 GUI(Graphical User Interface)를 기반으로 사용자 입력을 받아서 실행시킬 수 있는 방법에 대해서 알아보겠습니다.

예전 글에서는 PyQT에 대해서 주로 다루었습니다. 하지만 PyQT의 경우 기능이 많고 예쁜 GUI를 만들 수 있다는 장점이 있는 반면 라이브러리가 무거워서 불필요하게 프로그램 사이즈가 커지는 경우가 자주 발생했습니다. 비유를 들자면 아주 간단한 과자를 주문했는데 그걸 포장한 박스가 아주 비싸고 화려하고 무거운 느낌이랄까요?

그래서 이번 시간에는 파이썬에서 기본적으로 제공하지만 너무 못 생겨서 잘 사용하지 않는 Tkinter를 쓸만 할 정도로 예쁘게 만든 CustomTkinter에 대해서 알아보겠습니다.

1. CustomTkinter란?

CustomTkinter는 Tkinter의 확장 버전으로, 보다 현대적인 UI 디자인을 쉽게 적용할 수 있도록 만들어진 GUI 라이브러리입니다. 기존 Tkinter의 제한적인 디자인을 보완하며, 다크 모드 및 다양한 색상 테마를 지원합니다.

이 글에서는 CustomTkinter의 주요 기능, 장점과 단점, 그리고 간단한 사용법을 소개합니다.

2. CustomTkinter의 장점과 단점

[장점]

1) 모던한 UI 디자인: 기존 Tkinter보다 세련된 스타일을 제공하며, 기본적으로 다크 모드를 지원합니다.

2) Tkinter와의 높은 호환성: 기존 Tkinter 코드와 호환되며, 추가적인 스타일링 기능을 제공합니다.

3) 간단한 코드 작성: 보다 직관적인 API를 제공하여 코드 작성을 단순화합니다.

4) 다크 모드 및 테마 지원: 애플리케이션의 전체적인 색상 테마를 쉽게 조정할 수 있습니다.

5) 크로스 플랫폼 지원: Windows, Mac, Linux에서 원활하게 작동합니다.

[단점]

1) Tkinter의 한계를 가짐: Tkinter 기반이므로 PyQt나 PySide 같은 고급 GUI 프레임워크보다는 기능이 제한적입니다.

2) 커뮤니티 자료가 적음: 비교적 새로운 라이브러리라 CustomTkinter에 대한 예제나 문서가 많지 않습니다.

3. CustomTkinter 설치

터미널(또는 명령 프롬프트)에서 아래 명령어를 실행하세요.

pip install customtkinter

4. CustomTkinter 간단한 사용법

CustomTkinter는 Tkinter와 유사하지만 보다 현대적인 UI 디자인을 쉽게 적용할 수 있습니다. 이번 시간에는 아주 간단히 CustomTkinter 창을 띄우고 라벨과 버튼 하나씩을 창에 추가하는 코드로 CustomTkinter와 친해져보는 시간을 가져보겠습니다.

[코드]

import customtkinter as ctk

# 1) 기본 설정
ctk.set_appearance_mode("Light")  # 창 모드 설정 (System, Light, Dark)
ctk.set_default_color_theme("blue")  # UI 테마 설정 (blue, dark-blue, green)

# 2) 메인 윈도우 생성
root = ctk.CTk()
root.geometry("400x300")
root.title("CustomTkinter 예제")

# 3) 라벨 추가
label = ctk.CTkLabel(root, text="Hello, CustomTkinter!", font=("Arial", 20))
label.pack(pady=20)

# 4) 버튼 추가
def on_click():
    label.configure(text="버튼이 클릭됨!")

button = ctk.CTkButton(root, text="클릭하세요", command=on_click)
button.pack(pady=10)

# 5) 실행
root.mainloop()

1) 기본 설정

[코드]

# 기본 설정
ctk.set_appearance_mode("Dark")  # 다크 모드 설정 (System, Light, Dark)
ctk.set_default_color_theme("green")  # 테마 설정 (blue, dark-blue, green)

CustomTkinter는 3가지 창 모드와 3가지 UI 색상 테마를 설정할 수 있습니다.

창 모드는 set_appearance_mode( ) 클래스로 설정 가능하며, "System", "Light", "Dark" 모드를 괄호 안에 넣어서 설정 가능합니다. 여기서 "System" 모드는 사용자의 운영체제(OS) 설정에 따라서 자동으로 다크 또는 라이트 모드가 적용되는 모드입니다.

컬러 테마는 버튼 혹은 슬라이드, 체크 박스 등의 색상을 결정하는 옵션입니다. "blue", "dark-blue", "green" 모드를 괄호 안에 넣어서 설정 가능합니다. 개인적인 취향이지만 저는 "green"은 별로라서 안쓸 것 같네요.

[결과]

2) 메인 윈도우 생성

[코드]

# 메인 윈도우 생성
root = ctk.CTk()
root.geometry("400x300")
root.title("CustomTkinter 예제")

메인 윈도우 생성은 CTk( ) 클래스를 이용합니다. 보통 GUI 프로그래밍을 할 때, 관례적으로 메인창을 나타내는 변수명은 'root'로 지어줍니다.

창 크기는 geometry( ) 메소드의 괄호 안에 "가로x세로"를 입력함으로써 설정 가능하며, 창의 타이틀은 title( ) 메소드의 괄호 안에 "원하는 타이틀"을 문자열로 입력함으로써 설정 가능합니다.

3) 라벨 추가

[코드]

# 라벨 추가
label = ctk.CTkLabel(root, text="Hello, CustomTkinter!", font=("Arial", 20))
label.pack(pady=20) # pady: 위아래 여백

간단히 텍스트를 추가하는 코드입니다.  GUI 프로그래밍에서는 창 존재하는 텍스트를 "Label"이라고 부르는 편입니다. CTkLabel( ) 클래스를 이용하며 괄호 안에 들어가는 이번 시간에는 3가지만 알아보겠습니다.

버튼, 라벨 등의 위젯(Widget) 관련 클래스는 모두 가장 처음 root를 입력 받습니다. 가장 기본이 되는 규칙이니 기억해주세요. 다음은 라벨의 내용을 text 파라미터에 문자열로 입력해주었으며, 폰트의 글꼴과 사이즈를 튜플 형태로 입력해주었습니다.

pack( ) 메소드의 pady 파라미터를 통해서 텍스트의 위아래 여백도 넣어주었습니다. pack 메소드는 위젯을 창에 배치하는 역할로 넣어주지 않으면 안되는 코드입니다. 항상 어떤 위젯이든지 넣어준다고 생각하면 되겠습니다.

이 외에도 폰트 색상, 텍스트 배경 색상, 텍스트 상자의 크기, 그에 따른 자동 줄바꿈 설정까지 존재하지만, 아마도 이 CustomTkinter를 사용하는 이유가 심플하게 GUI를 구현하는 것이라서 큰 의미는 없을 것이라 생각되네요.

4) 버튼 추가

[코드]

# 버튼 추가
def on_click():
    label.configure(text="버튼이 클릭됨!")

button = ctk.CTkButton(root, text="클릭하세요", command=on_click)
button.pack(pady=10)

버튼을 추가하기 전에, 버튼을 눌렀을 때 실행되기 원하는 함수를 정의해주어야 합니다. on_click( )이라는 함수를 정의해주었고 그 기능은 위에서 만들어 주었던 label의 텍스트를 "버튼이 클릭됨!"으로 수정해주는 것입니다.

함수를 정의해주었으니 이제 버튼을 추가해보겠습니다. 버튼 추가 역시 라벨을 추가했을 때와 거의 동일합니다. CTkButton( ) 클래스로 추가해주며, 필수 요소인 root를 첫번째 인자로 넣어주고 그 다음 버튼을 나타낼 텍스트, 버튼을 눌렀을 때 실행될 함수명을 입력해줍니다. 마지막으로는 라벨 때와 마찬가지로 pack( )을 메소드로 버튼을 창에 배치해줍니다.

버튼을 클릭하니까 위에 있던 라벨이 "버튼이 클릭됨!"으로 변경된 것이 보이시나요?

[결과]

5) 버튼 추가

[코드]

# 실행
root.mainloop()

매우 간단하지만 코드지만 이 코드 한줄이 없으면 GUI 창이 열렸다가 바로 꺼질 정도로 필수적인 코드입니다. 참고로 mainloop()는 GUI 프로그램이 실행되는 동안 계속 동작하면서 사용자의 입력(클릭, 키보드 입력 등)을 감지하고 처리하는 역할을 합니다.

5. CustomTkinter 위젯 종류들

CustomTkinter에는 위에서 소개드린 위젯 (라벨, 버튼) 외에 여러가지 위젯들이 존재합니다. 이러한 위젯들을 활용하면 프로그램 실행에 필요한 변수들을 사용자가 쉽게 조정 가능하죠. 추가적인 위젯들에 대한 내용은 다음 글에서 소개드리도록 하겠습니다.

오늘 준비한 내용은 여기까지입니다. 다음에도 코딩유치원을 찾아주세요~