Python CustomTkinter #3 - How To Use Frames

▣ Frames

CustomTkinter에서 Frame은 다른 위젯들을 그룹화하고 관리하기 위해 사용되는 컨테이너 위젯입니다. 여러 위젯을 논리적으로 묶어 하나의 단위로 다루게 해주기 때문에, 복잡한 GUI 레이아웃을 구성할 때 필수적으로 사용됩니다.

주요 사용 이유와 장점은 다음과 같습니다.

1. 레이아웃 관리의 용이성

Frame을 사용하면 여러 위젯을 개별적으로 배치하는 대신, 프레임 내부에 위젯들을 배치하고 그 프레임 자체의 위치만 조정하면 됩니다. 이는 코드를 훨씬 깔끔하고 구조적으로 만들어 줍니다. 예를 들어, 버튼 2개를 포함하는 프레임을 만들면, 프레임만 이동시켜도 그 안의 버튼들이 함께 움직이므로, 복잡한 좌표 계산을 줄일 수 있습니다.

2. 위젯 그룹화

GUI 애플리케이션에서는 서로 관련된 위젯들을 한 그룹으로 묶는 경우가 많습니다. 예를 들어, 로그인 창을 만들 때 사용자 이름, 비밀번호 입력란, 로그인 버튼을 하나의 Frame에 묶으면, 코드를 더 쉽게 읽고 관리할 수 있습니다.

3. 독립적인 스타일 적용

각 Frame에 개별적인 배경색, 테두리, 패딩 등을 적용할 수 있습니다. 이를 통해 애플리케이션의 특정 섹션을 시각적으로 구분하여 사용자가 UI를 더 쉽게 이해하도록 돕습니다.

4. 재사용성 및 모듈화

자주 사용되는 UI 컴포넌트(예: 탐색 메뉴, 상태 바 등)를 Frame으로 만들고 함수나 클래스로 정의해두면, 필요한 곳에서 쉽게 가져와 재사용할 수 있습니다. 이는 코드의 재사용성을 높이고 개발 시간을 단축시킵니다.

Frame은 GUI의 논리적, 시각적 구조를 만드는 데 핵심적인 역할을 합니다. 복잡한 애플리케이션을 만들 때는 단순히 위젯을 추가하는 것보다 Frame을 활용하여 계층적으로 구성하는 것이 훨씬 효율적입니다

▣ Frames 메뉴얼

CTkFrame | CustomTkinter

 

---

▣ Frames 예시 코드

import tkinter
import customtkinter

app = customtkinter.CTk()
app.geometry("400x240")

app.title("Frame Example")
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("green")

frame = customtkinter.CTkFrame(master=app,
                               width=200,
                               height=200,
                               corner_radius=20,
                               bg_color="yellow")

frame.pack(padx=20, pady=20)

button1 = customtkinter.CTkButton(master=frame, text="Button_1")
button1.place(relx=0.5, rely=0.3, anchor=tkinter.CENTER)

button2 = customtkinter.CTkButton(master=frame, text="Button_2")
button2.place(relx=0.5, rely=0.7, anchor=tkinter.CENTER)

app.mainloop()

▣ Frames 동작 화면

 

frame = customtkinter.CTkFrame(master=app,
                               width=200,
                               height=200,
                               corner_radius=20,
                               bg_color="yellow")

이 코드는 프레임(Frame) 위젯을 생성하고 frame이라는 변수에 할당합니다. 프레임은 다른 위젯들을 담는 컨테이너 역할을 합니다.

 

• master=app: 이 프레임이 배치될 부모 위젯을 지정합니다. 여기서는 app, 즉 메인 창 안에 프레임이 만들어집니다.
• width=200: 프레임의 너비를 200픽셀로 설정합니다.
• height=200: 프레임의 높이를 200픽셀로 설정합니다.
• corner_radius=20: 프레임 모서리를 20픽셀만큼 둥글게 만듭니다.
• bg_color="yellow": 프레임의 배경색을 노란색으로 설정합니다.

 

frame.pack(padx=20, pady=20)

이 코드는 pack() 기하학적 관리자를 사용하여 프레임을 화면에 배치합니다.

• pack(): 위젯을 자동으로 정렬해주는 함수입니다. 기본적으로 위젯을 상단 중앙에 배치합니다.
• padx=20: 프레임의 좌우에 20픽셀의 외부 여백(padding)을 추가합니다.
• pady=20: 프레임의 상하에 20픽셀의 외부 여백을 추가합니다.

이 두 줄의 코드는 둥근 노란색 프레임을 생성하고, 그 프레임을 메인 창의 중앙에 배치하는 역할을 합니다.

button1 = customtkinter.CTkButton(master=frame, text="Button_1")
button1.place(relx=0.5, rely=0.3, anchor=tkinter.CENTER)

master=frame은 button1 버튼이 frame이라는 프레임 위젯의 자식(child)으로 소속된다는 의미입니다.

이는 매우 중요한 개념인데요, 다음과 같은 역할을 합니다.

1. 계층적 구조 형성: button1은 이제 독립적인 위젯이 아니라 frame의 내부에 종속됩니다. frame이 이동하거나 크기가 바뀌면 button1도 함께 이동하고, frame이 파괴되면 button1도 함께 사라집니다.
2. 좌표계의 기준: button1의 위치를 지정할 때 사용하는 relx와 rely 값의 기준이 app (메인 창)이 아닌 frame이 됩니다.

• relx=0.5는 app 창의 중앙이 아니라 frame 위젯의 가로 중앙을 의미합니다.
• rely=0.3은 app 창의 상단에서 30% 떨어진 지점이 아니라 frame 위젯의 상단에서 30% 떨어진 지점을 의미합니다.

결론적으로, master=frame은 "이 버튼을 frame 안에 만들어주세요" 라는 명령과 같습니다. 이를 통해 복잡한 GUI를 논리적으로 구조화하고, 각 위젯의 위치를 해당 부모 위젯을 기준으로 쉽게 관리할 수 있게 됩니다.

 

유튜브 동영상

---

예시 코드) Frame을 활용하여 계층적으로 구성

import tkinter
import customtkinter

# Create the main application window
app = customtkinter.CTk()
app.geometry("800x600")
app.title("Frame Hierarchy Example")



# --- Left Section: Menu Frame ---# Set the appearance mode and default color theme
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("green")
# Create a frame for the menu on the left side
# 왼쪽 메뉴를 위한 프레임을 생성합니다.
# width를 200으로, corner_radius를 0으로 설정하여 직사각형 모양으로 만듭니다.
menu_frame = customtkinter.CTkFrame(master=app, width=200, corner_radius=0)
# pack()을 사용하여 프레임을 창의 왼쪽에 배치합니다.
menu_frame.pack(side="left", fill="y", padx=(10, 0), pady=10)

# Add a label to the menu frame
# 메뉴 프레임에 "메뉴" 레이블을 추가합니다.
menu_label = customtkinter.CTkLabel(master=menu_frame, text="메뉴", font=("Arial", 20, "bold"))
menu_label.pack(pady=20)

# Add buttons to the menu frame
# 메뉴 프레임 내부에 버튼들을 추가합니다.
menu_button1 = customtkinter.CTkButton(master=menu_frame, text="메뉴 1")
menu_button1.pack(pady=(10, 5))

menu_button2 = customtkinter.CTkButton(master=menu_frame, text="메뉴 2")
menu_button2.pack(pady=5)

# --- Right Section: Content Frame ---
# Create a frame for the main content on the right side
# 오른쪽 메인 콘텐츠를 위한 프레임을 생성합니다.
# 이 프레임은 남은 공간을 모두 차지하도록 만듭니다.
content_frame = customtkinter.CTkFrame(master=app, corner_radius=10)
# pack()을 사용하여 남은 공간을 채우도록 배치합니다.
content_frame.pack(side="right", fill="both", expand=True, padx=10, pady=10)

# Add a label to the content frame
# 콘텐츠 프레임에 "콘텐츠" 레이블을 추가합니다.
content_label = customtkinter.CTkLabel(master=content_frame, text="메인 콘텐츠 영역", font=("Arial", 24, "bold"))
content_label.pack(expand=True)

# Start the main event loop
app.mainloop()

 Frame을 활용하여 계층적으로 구성 프로그램 실행 화면

 

예시 코드) Frame 활용

2. Using Frames | CustomTkinter

 

by korealionkk@gmail.com

---