본문 바로가기

[Tkinter] 40강 ttk Button 스타일 커스터마이징

@도마22026. 2. 9. 21:00
728x90


이 강의는 Tkinter GUI 강의 40강입니다

39강에서는
기본 테마별 UI 차이를 비교하며
테마가 UI의 기본값 세트라는 것을 확인했습니다.

이번 강의에서는
테마 위에서
ttk Button의 스타일을 직접 조정해 봅니다.

이번 강의의 목표는 분명합니다.
Button 스타일을 통해
스타일이 어떻게 위젯 외형을 제어하는지
구조적으로 이해하는 것입니다.


스타일 커스터마이징은 어디서 시작할까

가장 좋은 시작점은
Button입니다.

이유는 단순합니다.

  • 거의 모든 화면에 존재
  • 상태 변화가 명확함
  • 스타일 효과가 잘 보임

ttk Button 기본 스타일 다시 확인하기

아무 스타일도 적용하지 않은
기본 ttk Button입니다.

import tkinter as tk
from tkinter import ttk

window = tk.Tk()
window.geometry("300x200")

ttk.Button(window, text="기본 버튼").pack(pady=40)

window.mainloop()

이 버튼은
현재 선택된 테마의
기본 스타일을 그대로 사용합니다.


Style 객체로 Button 스타일 변경하기

Button 스타일은
Style 객체의
configure()로 설정합니다.

style = ttk.Style()
style.configure("TButton", font=("Arial", 12))

이제
모든 ttk Button의
폰트가 변경됩니다.


전체 Button 스타일 적용 예제

import tkinter as tk
from tkinter import ttk

window = tk.Tk()
window.geometry("300x200")

style = ttk.Style()
style.configure("TButton", font=("Arial", 12))

ttk.Button(window, text="확인").pack(pady=10)
ttk.Button(window, text="취소").pack(pady=10)

window.mainloop()

여기서 중요한 점은
버튼마다 옵션을 주지 않았다는 것입니다.


커스텀 Button 스타일 만들기

특정 버튼만
다르게 보이게 하려면
커스텀 스타일을 사용합니다.

style.configure("Primary.TButton", font=("Arial", 14))
ttk.Button(window, text="주요 버튼", style="Primary.TButton")

이 방식이
ttk 스타일의
기본 패턴입니다.


Button 스타일 이름 다시 정리하기

Button 스타일 이름은
다음 구조를 가집니다.

커스텀이름.TButton

예시:

  • Primary.TButton
  • Danger.TButton
  • Small.TButton

이 규칙을 지키면
스타일 관리가 쉬워집니다.


padding 옵션으로 버튼 여백 조절하기

버튼 크기는
폰트뿐 아니라
padding으로도 조절합니다.

style.configure(
    "Primary.TButton",
    font=("Arial", 12),
    padding=(10, 6)
)

이제
버튼이
더 여유 있어 보입니다.


Button 상태(state) 개념 이해하기

Button은
상태에 따라
외형이 바뀝니다.

대표적인 상태는 다음과 같습니다.

  • normal
  • active
  • disabled

ttk는
이 상태별 스타일도
지원합니다.


상태별 스타일 설정 맛보기

style.map(
    "Primary.TButton",
    foreground=[("disabled", "gray")]
)

이 코드는
버튼이 비활성화되었을 때
텍스트 색상을 바꿉니다.


스타일은 “역할 이름”으로 설계하자

실무에서
가장 중요한 팁 하나입니다.

X RedButton
O PrimaryButton

색상 기반 이름이 아니라
역할 기반 이름을 쓰는 것이 좋습니다.

이렇게 하면
테마가 바뀌어도
코드를 고칠 필요가 없습니다.


ttk 스타일은 다른 GUI에서도 그대로 이어진다

이 구조는
Tkinter 전용이 아닙니다.

  • PyQt의 StyleSheet
  • 웹의 CSS 클래스
  • Unity UI 스타일

전부
같은 사고 방식입니다.

지금은
GUI 공통 언어를
배우고 있는 단계입니다.


스타일 커스터마이징의 적정선

이 단계에서
너무 많은 디자인을 하려 하지 마세요.

권장 범위는 이 정도입니다.

  • 폰트
  • 여백
  • 역할별 버튼 구분

색상, 그림자, 효과는
필요할 때만 추가하면 됩니다.


이번 강의 핵심 정리

이번 강의에서 꼭 기억해야 할 내용입니다.

  • ttk Button 스타일은 Style 객체로 관리한다
  • 기본 스타일과 커스텀 스타일을 구분한다
  • 스타일 이름은 역할 기준으로 정한다
  • 테마 위에서 스타일이 동작한다

다음 강의 예고

다음 강의에서는
ttk Label과 Entry 스타일 적용을 다룹니다.

이제
화면 전체에
일관성이 생기기 시작합니다.


728x90
도마2
@도마2 :: 도마의 코드노트

초보자를 위한 코딩 강의를 정리합니다. 파이썬부터 C#, Unity 게임 제작까지 차근차근 기록합니다. — 도마

목차