PySide6: MDI SubWindow 내부 스크롤바 색상 변경하기

PySide6: MDI SubWindow 내부 스크롤바 색상 변경하기

🏷️ 소개

PySide6를 사용하여 MDI(Multiple Document Interface) 애플리케이션을 개발할 때, QMdiArea 내부에 추가된 QMdiSubWindow의 스크롤바 색상을 사용자 지정하는 방법을 알아봅니다. 일반적으로 Qt의 기본 스크롤바 스타일은 다소 밋밋할 수 있으나, 스타일 시트를 활용하면 **사용자 경험(UX)**을 개선할 수 있습니다.

 

🧩 1. MDI 및 스크롤바 스타일 변경 원리

PySide6에서는 QMdiArea를 통해 **다중 문서 인터페이스(MDI)**를 구현할 수 있습니다. 해당 영역에 **서브 윈도우(SubWindow)**를 추가하고, 내부에 QTextEdit와 같은 스크롤이 필요한 위젯을 배치할 경우 스크롤바가 생성됩니다.

이 스크롤바는 스타일 시트(QSS) 를 통해 색상, 모양, 크기 등을 변경할 수 있습니다. 주요 변경 포인트는 다음과 같습니다:

• 배경색(background): 스크롤바의 전반적인 배경색
• 핸들 색상(handle): 사용자가 드래그하는 스크롤바 핸들의 색상
• 호버 색상(hover): 마우스를 올렸을 때의 색상 변화
• 클릭 색상(pressed): 마우스로 클릭할 때의 색상 변화

---

🛠️ 2. 예제 코드: MDI 내부 스크롤바 색상 변경

아래는 PySide6을 사용하여 MDI 인터페이스를 생성하고, 내부 서브 윈도우에 스크롤바 스타일을 변경하는 코드입니다.

from PySide6.QtWidgets import (
    QApplication, QMainWindow, QMdiArea, QMdiSubWindow, QTextEdit
)
from PySide6.QtCore import Qt

class MDIExample(QMainWindow):
    def __init__(self):
        super().__init__()

        # MDI Area 생성
        self.mdi_area = QMdiArea()
        self.setCentralWidget(self.mdi_area)

        # 스타일 시트 적용 (스크롤바 색상 변경)
        self.setStyleSheet("""
            QMdiArea QWidget {
                background: #2E3440;
            }

            /* 세로 스크롤바 스타일 */
            QScrollBar:vertical {
                border: none;
                background: #3B4252;
                width: 10px;
                margin: 0px 0px 0px 0px;
            }
            QScrollBar::handle:vertical {
                background: #88C0D0;
                min-height: 20px;
                border-radius: 5px;
            }
            QScrollBar::handle:vertical:hover {
                background: #81A1C1;
            }
            QScrollBar::handle:vertical:pressed {
                background: #5E81AC;
            }
            QScrollBar::sub-line:vertical, QScrollBar::add-line:vertical {
                background: none;
                height: 0px;
            }

            /* 가로 스크롤바 스타일 */
            QScrollBar:horizontal {
                border: none;
                background: #3B4252;
                height: 10px;
                margin: 0px 0px 0px 0px;
            }
            QScrollBar::handle:horizontal {
                background: #88C0D0;
                min-width: 20px;
                border-radius: 5px;
            }
            QScrollBar::handle:horizontal:hover {
                background: #81A1C1;
            }
            QScrollBar::handle:horizontal:pressed {
                background: #5E81AC;
            }
            QScrollBar::sub-line:horizontal, QScrollBar::add-line:horizontal {
                background: none;
                width: 0px;
            }
        """)

        # 서브 윈도우 추가
        self.add_sub_window()

    def add_sub_window(self):
        sub_window = QMdiSubWindow()
        text_edit = QTextEdit()
        text_edit.setPlainText("\n".join([f"Line {i+1}" for i in range(100)]))  # 스크롤 테스트용
        sub_window.setWidget(text_edit)
        sub_window.setWindowTitle("Sub Window")
        self.mdi_area.addSubWindow(sub_window)
        sub_window.show()

if __name__ == "__main__":
    app = QApplication([])
    window = MDIExample()
    window.resize(800, 600)
    window.show()
    app.exec()

반응형

🎨 3. 스타일 시트(QSS) 구성 요소 설명

PySide6의 스타일 시트는 CSS와 유사한 문법을 사용합니다. 아래는 스크롤바 색상 변경을 위한 스타일 시트 구성을 정리한 표입니다.

요소	스타일키	기본 값	설명
전체 배경색	QMdiArea QWidget	#2E3440	MDI 영역의 배경색
세로 스크롤바 배경	QScrollBar:vertical	#3B4252	세로 스크롤바의 배경색
세로 핸들 색상	QScrollBar::handle:vertical	#88C0D0	세로 스크롤바 핸들 색상
세로 핸들 호버 색상	QScrollBar::handle:vertical:hover	#81A1C1	세로 핸들에 마우스를 올렸을 때 색상
세로 핸들 클릭 색상	QScrollBar::handle:vertical:pressed	#5E81AC	세로 핸들을 클릭 시 색상
가로 스크롤바 배경	QScrollBar:horizontal	#3B4252	가로 스크롤바의 배경색
가로 핸들 색상	QScrollBar::handle:horizontal	#88C0D0	가로 스크롤바 핸들 색상
가로 핸들 호버 색상	QScrollBar::handle:horizontal:hover	#81A1C1	가로 핸들에 마우스를 올렸을 때 색상
가로 핸들 클릭 색상	QScrollBar::handle:horizontal:pressed	#5E81AC	가로 핸들을 클릭 시 색상

🔍 4. 실행 결과

코드를 실행하면 다크 테마 스타일의 MDI 애플리케이션이 실행됩니다.

• MDI 영역 배경색: 어두운 회색(#2E3440)
• 세로/가로 스크롤바: 회색(#3B4252)
• 스크롤 핸들 색상: 기본 하늘색(#88C0D0)
• 마우스 호버 시: 더 진한 하늘색(#81A1C1)
• 마우스 클릭 시: 파란색(#5E81AC)

스크롤이 필요한 MDI SubWindow를 추가할 경우 스타일 시트가 적용된 커스텀 스크롤바를 확인할 수 있습니다.

 

⚠️ 5. 주의 사항 및 팁

1. 스타일 시트 우선순위: 스타일 시트는 QApplication, QMainWindow, QMdiArea 등에 적용 가능하나, 우선순위를 고려해야 합니다.
2. 다크 모드 고려: 어두운 테마를 적용할 경우, 스크롤바 색상 대비가 충분한지 확인하세요.
3. 스크롤바 크기: width(세로), height(가로)를 너무 작게 설정하면 터치 디바이스에서 불편할 수 있습니다.

 

🏆 6. 마치며

이번 포스팅에서는 PySide6을 사용하여 MDI SubWindow 내부의 스크롤바 색상을 변경하는 방법을 살펴봤습니다.

스타일 시트를 통해 UI를 커스터마이징하면, **사용자 경험(UX)**이 크게 개선될 수 있습니다. PySide6의 다양한 위젯을 활용하여 스타일링 경험을 확장해보세요! 😎

감사합니다! 🙌