코딩유치원

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

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

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

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

코딩유치원에서는 파이썬 기초부터 사무자동화, 웹크롤링, 데이터 분석, 머신러닝 등의 다양한 패키지까지 초보자도 알기 쉽도록 내용을 정리해 놓았습니다.

업무는 물론 투자에도 도움이 될만한 전자공시시스템(DART)나 텔레그램(Telegram) 관련 패키지도 배울 수 있으니 많은 관심 부탁드립니다.

오늘은 Pyqt5를 다루면서 항상 의문이었던 부분을 정리해보려 합니다.

바로 파이썬 Pyqt5 패키지로 GUI 창을 만들 때 사용되는 QWidget, QDialog, QMainWindow 클래스 3형제들입니다.

class MyWindow(QWidget):

    def __init__(self):
        super().__init__()

구글링하면 Pyqt5 관련 패키지의 코드들을 보면 QWidget이 들어간 자리에 이 3형제들이 골고루 들어가 있어서 혼란스러웠기에 저같은 분들이 있으실 듯 하여 정리해보는 시간을 갖기로 하였습니다.

참고로 제가 즐겨 사용하는 qt designer을 켜면 아래와 같이 3가지 클래스(Dialog, Main Window, Widget)를 선택하는 창이 가장 처음 출력됩니다.

1. QWidget

QWidget을 딱 한마디로 설명하면 버튼, input 위젯 같은 다양한 위젯들을 올려놓을 수 있는 사각형의 영역입니다.

즉, 그림을 그릴 수 있는 도화지 같은 것이죠.

특징으로는 Main Window와 다르게 상단의 메뉴창과 하단의 상태창을 추가할 수 없습니다.

​

2. QMainWindow

위에서 잠시 보았던 QWidget과 비슷하지만 조금 다릅니다.

QMainWindow는 최상위 위젯으로 메뉴바, 도구 모음, 상태바등이 포함된 미리 정의된 레이아웃을 가지고 있습니다.

qt designer의 객체 탐색기를 살펴보면 QMainWindow라는 상위 클래스에 QWidget이 속해 있는 것을 알 수 있죠.

즉, MainWindow를 도화지와 도화지를 담고 있는 프레임이라고 생각하시면 됩니다.

3. QDialog

항상 별도의 창에 표시되는 대화상자로, 주로 우리가 흔히 보는 팝업창이나 경고창 역할을 주로 합니다.

아래의 그림에서 보시면 기본 템플릿에서 버튼을 제공하는 것이 있는데, 주로 사용자가 간단히 확인, 취소 버튼을 누를 때 사용하기 때문입니다. 아직 테스트는 해보지 않았지만 버튼을 최대로 넣을 수 있는 제한 같은게 있다고 하네요.

겉보기에는 Qwidget과 별 다를 것이 없죠?

4. Modal, Modeless 개념 (참고)

위에서 배운 기본적인 GUI 창 3형제를 더 깊이 이해하려면 Modal 및 Modaless의 개념에 대해서 알아야 합니다.

두 개념은은 MainWindow를 제외한 Widget과 Dialog에서 사용하는 실행 형식입니다.

참고로 Dialog 창은 Modal 속성을 주로 사용한답니다.

1) Modal

- 새롭게 Modal 속성을 가진 창이 열렸을 경우 기존에 있던 창을 사용하지 못하는 '제어권 독점' 방식입니다.

  (이 특성을 이용해서 중요한 메세지를 표시하는 Dialog는 거의 Modal 창을 이용합니다.)

- exec()의 실행 형식으로 독립적입니다. (이 부분은 좀 더 공부 필요)

2) Modeless

- 어느 하나의 Dialog 창이 있어도 프로그램 제어권을 독점하지 않으므로 다른 작업이 가능합니다. (즉, 다른창을 선택 가능)

- show()의 실행 형식으로 독립적이지 않습니다. (이 부분은 좀 더 공부 필요)

<참고자료>

1. 개발자 라면_QWidget과 QDialog의 차이 - Modal/Modeless

https://flower0.tistory.com/457

2. 타스의 개발 블로그_[MFC] Modal&Modeless Dialog: 설명

https://tars-c.github.io/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/mfc/dialog/Dialog-Modal-and-Modeless-%EC%84%A4%EB%AA%85/

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

오늘은 지난번 공유드렸던 아래의 프로젝트를 Pyqt5 패키지를 이용해 GUI로 사용할 수 있도록 만들어보았습니다.

개인적 필요에 의해 만들었던 프로그램인데, 회사의 인사팀에 속해 계신분들은 유용하시지 않을까 생각되네요.

2021.03.29 - [파이썬 프로젝트] - [파이썬 프로젝트] 잡플래닛 리뷰 정보 크롤링 코드 공유

우선 전체 코드는 아래와 같으며, 어떻게 사용하는지는 아래에서 설명드리겠습니다.

사실 Pyinstaller라는 패키지를 이용해 exe 실행 파일로 만들어서 공유드리려 했으나, 관련 패키지를 잔뜩 import 해서인지 프로그램의 크기가 190MB를 넘어가서 그냥 코드로 공유드립니다.

#관련 패키지 import
import time
import pandas as pd
from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import sys
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5 import uic

#UI파일 연결 코드
UI_class = uic.loadUiType("MyGui.ui")[0]

#화면을 띄우는데 사용되는 Class 선언
class WindowClass(QMainWindow, UI_class) :
    def __init__(self) :
        super().__init__()
        self.setupUi(self)

        # GUI의 버튼을 눌렀을 때 아래 정의한 ReviewCrawlingFunction이 실행됨
        self.pushButton.clicked.connect(self.ReviewCrawlingFunction)

    #이하 지난 프로젝트 조금 개선해서 메소드 안에 넣어줌
    def ReviewCrawlingFunction(self) :

        # 크롬 드라이버 실행 및 잡플래닛 로그인 페이지 접속
        driver = webdriver.Chrome("크롬드라이버가 위치하는 경로 ex)/Users/codingkindergarten/Desktop/chromedriver")
        driver.get("https://www.jobplanet.co.kr/users/sign_in?_nav=gb")
        driver.implicitly_wait(10)

        #입력 받은 정보로 로그인
        login_id = driver.find_element_by_css_selector("input#user_email")
        login_id.send_keys(self.lineEdit_ID.text())

        login_pw = driver.find_element_by_css_selector("input#user_password")
        login_pw.send_keys(self.lineEdit_PW.text())

        login_id.send_keys(Keys.RETURN)
        driver.implicitly_wait(10)
		time.sleep(1) #implicityly_wait로 잘 작동하지 않아서 추가함
        
        #원하는 회사의 리뷰 페이지까지 이동
        company = driver.find_element_by_css_selector("input#search_bar_search_query")
        company.send_keys(self.lineEdit_CN.text())
        company.send_keys(Keys.RETURN)
        driver.implicitly_wait(15)

        driver.find_element_by_css_selector("a.tit").click()
        driver.implicitly_wait(15)

        driver.find_element_by_css_selector("button.btn_close_x_ty1 ").click()
        driver.implicitly_wait(15)

        review_cnt_raw = driver.find_elements_by_css_selector("span.num.notranslate")[1]
        review_cnt = int(review_cnt_raw.text)
        review_page = int(review_cnt/5) + 1
        

        #크롤링한 정보를 담을 리스트명 정의
        list_div = []
        list_cur = []
        list_date =[]
        list_stars = []
        list_summery = []
        list_merit = []
        list_disadvantages = []
        list_managers =[]


        #원하는 회사의 직무/근속여부/일시/요약/평점/장점/단점/경영진에게 바라는 점 크롤링 (for문으로 반복)
        for i in range(review_page): 

            #직무, 근속여부, 지역 ,일시
            user_info = driver.find_elements_by_css_selector("span.txt1")

            #한 페이지 안의 리뷰 갯수
            #한 페이지에 정보 5set씩 나옴. 마지막 페이지는 5개 미만일 수 있으므로 count 변수를 반복횟수로 넣어줌.
            count = int(len(user_info)/4)

            list_user_info = []

            for j in user_info:
                list_user_info.append(j.text)

            for j in range(count):            
                a = list_user_info[4*j]
                list_div.append(a)
                
                b = list_user_info[4*j+1]
                list_cur.append(b)

                c = list_user_info[4*j+3]
                list_date.append(c)

            #별점
            stars = driver.find_elements_by_css_selector("div.star_score")
            for j in stars:
                a = j.get_attribute('style')
                if a[7:9] == '20':
                    list_stars.append("1점")
                elif a[7:9] == '40':
                    list_stars.append("2점")
                elif a[7:9] == '60':
                    list_stars.append("3점")
                elif a[7:9] == '80':
                    list_stars.append("4점")
                else:
                    list_stars.append("5점")
                
            #요약 정보
            summery = driver.find_elements_by_css_selector("h2.us_label")

            for j in summery:
                list_summery.append(j.text)
            
            #장점, 단점, 경영진에게 바라는 점
            list_review = []

            review = driver.find_elements_by_css_selector("dd.df1")

            for j in review:
                list_review.append(j.text)

            for j in range(count):            #한 페이지에 정보 5set씩 나옴. 마지막 페이지는 5개 미만일 수 있으므로 count 변수를 반복횟수로 넣어줌.
                a = list_review[3*j]
                list_merit.append(a)
                
                b = list_review[3*j+1]
                list_disadvantages.append(b)

                c = list_review[3*j+2]
                list_managers.append(c)

            # 다음 페이지 클릭 후 for문 진행, 끝 페이지에서 다음 페이지 클릭 안되는 것 대비해서 예외처리 구문 추가
            try:
                driver.find_element_by_css_selector("a.btn_pgnext").click()
                driver.implicitly_wait(15)
                time.sleep(2) #implicityly_wait로 잘 작동하지 않아서 추가함
            except:
                pass


        # step8.pandas 라이브러리로 표 만들기
        total_data = pd.DataFrame()
        total_data['날짜'] = pd.Series(list_date)
        total_data['직무'] = pd.Series(list_div)
        total_data['재직여부'] = pd.Series(list_cur)
        total_data['별점'] = pd.Series(list_stars)
        total_data['요약'] = pd.Series(list_summery)
        total_data['장점'] = pd.Series(list_merit)
        total_data['단점'] = pd.Series(list_disadvantages)
        total_data['경영진에게 바라는 점'] = pd.Series(list_managers)

        # step9.엑셀 형태로 저장하기
        total_data.to_excel(self.lineEdit_CN.text() + "_잡플래닛 리뷰.xls" ,index=True)

        # step10.크롬 드라이버 종료
        driver.quit()

if __name__ == "__main__" :
    #QApplication : 프로그램을 실행시켜주는 클래스
    app = QApplication(sys.argv) 

    #WindowClass의 인스턴스 생성
    myWindow = WindowClass() 

    #프로그램 화면을 보여주는 코드
    myWindow.show()

    #프로그램을 이벤트루프로 진입시키는(프로그램을 작동시키는) 코드
    app.exec_()

<코드를 사용하기 위한 필요조건>

1. 파이썬과 관련 패키지가 설치되어 있을 것

2021.03.02 - [파이썬 기초/개발환경 구축] - [코딩유치원] 파이썬 개발환경 구축 1편 (파이썬 VS 아나콘다)

2. 잡플래닛 계정과 회사 리뷰를 최소 1개 작성할 것 (리뷰를 작성해야만 모든 리뷰가 조회 가능)

3. QtDesigner를 이용해서 아래와 같이 GUI 구성하고, Ui 파일을 파이썬 파일과 같은 폴더에 넣기

    (아래에 제가 만든 ui파일을 파일첨부로 올려두었으니, 다운 받아서 사용하세요)

GUI를 커스터마이징 할 시, designer의 objectname과 파이썬 코드의 objectname을 일치 시킬 것.

<크롤링 결과>

테스트로 네이버랩스의 리뷰를 크롤링 해보았습니다.

크롤링이 끝나면 파이썬 파일과 같은 경로에 엑셀 파일이 생성됩니다.

리뷰 17개가 모두 잘 받아진 것을 확인할 수 있습니다.

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

<파이썬 GUI 프로그래밍 관련 지난 글>

2021.05.07 - [파이썬 패키지/GUI 프로그램] - [파이썬 GUI 프로그래밍] PyQt5 기초_1강.PyQt의 개념과 창 만들기 (창 이름, 사이즈, 변경 및 아이콘 삽입)

2021.05.08 - [파이썬 패키지/GUI 프로그램] - [파이썬 GUI 프로그래밍] PyQt5 기초_2강.위젯의 종류, 시그널과 슬롯, 이벤트 루프

이번 시간에는 GUI 화면을 그래픽 기반의 드래그 앤 드롭 방식으로 쉽게 구성할 수 있도록 도와주는 도구인 Qt Designer에 대해서 알아보겠습니다.

Qt Designer 설치 및 실행

우선 코딩 유치원에서 추천하는 Anaconda로 파이썬을 설치하셨다면, Qt Designer는 이미 설치되어 있습니다.

만약 파이썬 공식 홈페이지를 통해 Python을 설치하셨다면, cmd창에서 pip install pyqt를 입력하시면 설치가 될 것입니다.

Anaconda가 설치되어 있다는 가정하에 Qt Designer의 실행방법은 아래와 같습니다.

Window

Window 시작 메뉴에서 Anaconda Prompt를 검색하여 실행시커나, VScode를 사용하고 계신다면 터미널창에 designer라는 명령어를 입력하면 Qt Designer가 실행됩니다.

Mac

Finder를 실행한 후, 응용 프로그램(Application) 탭을 클릭하거나 launchpad에서 Anaconda Navigator를 찾아서 우클릭하고 Show Original을 누릅니다. Anaconda Navigator 내부로 들어갔다면, bin폴더에 있는 Designer라는 파일을 실행하면 Qt Designer가 실행됩니다.

매번 이렇게 실행시키기는 좀 귀찮겠죠? Qt Designer를 Application 폴더로 복사/붙여넣기 하시면 launchpad에서 Qt Designer를 실행시킬 수 있습니다.

Qt Designer의 화면구성

만약 Qt Designer가 제대로 실행되었다면, 가장 처음 보이는 화면은 아래와 같습니다. (Window OS 기준)

화면 중앙에 위치한 창에서 Dialog without Buttons를 누른 후 Create를 눌러주겠습니다.

Dialog Window

그러면 아래와 같이 'Dialog - untitled' 라는 이름의 창이 뜨는데 우리는 여기에 우리만의 GUI 프로그램을 디자인 해줄 수 있습니다.

그림에 비유하자면 마치 도화지와 같다고 생각하시면 되겠습니다.

Widget Box (위젯 상자)

도화지가 준비되었으니, 도화지를 예쁘게 꾸밀 물감이 필요하겠죠? Widget Box는 그런 물감을 모아놓은 팔레트라고 생각하시면 됩니다.

바로 화면의 좌측에 위치하는 위젯(프로그램에서 기능을 하는 버튼 등의 객체)이 그 역할을 합니다.

이곳에서 원하는 위젯을 Dialog Window로 드래그하여 GUI 프로그램이라는 그림을 그려줄 수 있습니다.

Property Editor (속성 편집기)

우리는 도화지와 물감만 있다고 원하는데로 그림을 그릴 수가 없습니다. 의도한 그림을 구현하기 위해서는 붓이 필요하겠죠?

Property Editor는 위젯의 이름(objectName), 위치와 크기(geometry) 등의 특성을 조정해줄 수 있는 창입니다.

Qt Designer로 내 맘대로 GUI 디자인 해보기

위에서 배운 도화지, 물감, 붓 들을 이용해 나만의 그림(GUI)을 그려 보겠습니다. 저는 이것저것 막 드래그해서 아래와 같이 구성해봤습니다.

똑같이 따라하실 필요는 전혀 없습니다! 단순히 버튼 하나만 넣으셔도 됩니다.

이렇게 만들고 저장해주면 생성되는 ui 파일을 코드에서 가져다 사용하면 됩니다. 정말 쉽죠?

어떻게 코드에서 사용하는지 알아보기 전에, 하나만 알고 넘어가시면 좋을 것 같아요.

바로 objectName입니다. 여기서 제가 추가한 QpushButton 위젯 객체의 이름은 pushButton입니다.

나중에 이 버튼 객체를 지난 시간에 배웠던 슬롯(함수)와 연결시켜 어떤 기능을 하기 위해서는 이름을 알고 있어야 합니다.

앞으로 GUI를 디자인 하실 때, 각 위젯의 objectName에 직관적인 이름을 지어주고 사용하시면 됩니다.

참고로 저장 전에 미리보기를 할 수 있습니다. 미리보기 단축키는 Ctrl(Command) + R입니다.

Qt Designer 파일(.UI) 저장

Qt Designer의 UI는 저장 버튼 혹은 단축키(Ctrl + S / Command + S)로 저장을 할 수 있습니다. 저장된 UI파일은 데이터 저장 규칙인 XML 형식을 가지며, Python 코드에서 이 XML 파일을 Import한 후 위젯들에 기능을 할당해주면 실제로 기능을 가지고 작동하는 GUI프로그램이 되는 것입니다.

UI 파일을 저장할 때 주의할 점은 Python코드에서 import하기 쉽도록 Python 코드와 같은 디렉토리에 위치시키는 것이 좋습니다. UI파일의 이름은 원하는 이름으로 아무렇게나 지정해도 됩니다.

UI 파일과 Python 코드의 연결

UI파일과 Python코드를 연결 방법은 2가지로 나뉩니다.

1) UI파일을 Python 코드에서 import하는 방법

2) UI 파일을 코드로 변환해서 Python 코드에 포함시키는 법

코딩유치원에서는 쉬운 방법인 UI파일을 Python 코드에서 import하는 방법에 대해서만 다루도록 하겠습니다.

혹시, 두 번째 방법이 궁금하신 분들은 아래의 링크를 참고해주세요.

ybworld.tistory.com/10?category=929856

UI파일을 Python 코드에서 import하는 방법

UI파일과 동일한 위치에 Python파일을 하나 만든 후, 아래의 코드를 그대로 복사/붙여넣기 합니다. 이때 중간에 있는 "UI파일이름.ui"는 자신이 가지고 있는 UI의 이름으로 수정해주셔야 합니다.

import sys
from PyQt5.QtWidgets import *
from PyQt5 import uic   # ui 파일을 사용하기 위한 모듈 import

#UI파일 연결 코드
UI_class = uic.loadUiType("UI파일이름.ui")[0]


class MyWindow(QMainWindow, UI_class) :
    def __init__(self) :
        super().__init__()
        self.setupUi(self)

app = QApplication(sys.argv) 

Window = MyWindow() 

Window.show()

app.exec_()

위의 코드를 실행시켰다면 성공적으로 Qt Designer를 이용하여 제작한 GUI가 표시되는 것을 볼 수 있습니다.

다음 시간에는 지금까지 배워왔던 것을 갖고 간단한 기능을 하는 GUI 프로그램을 만들어보겠습니다.

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

코딩유치원에서는 파이썬 기초부터 사무자동화, 웹크롤링, 데이터 분석, 머신러닝 등의 다양한 패키지까지 초보자도 알기 쉽도록 내용을 정리해 놓았습니다.

업무는 물론 투자에도 도움이 될만한 전자공시시스템(DART)나 텔레그램(Telegram) 관련 패키지도 배울 수 있으니 많은 관심 부탁드립니다.

<GUI 프로그래밍 관련 이전 글>

2021.05.07 - [파이썬 패키지/GUI 프로그램] - [파이썬 GUI 프로그래밍] PyQt5 기초_1강.PyQt의 개념과 창 만들기 (창 이름, 사이즈, 변경 및 아이콘 삽입)

2021.05.08 - [파이썬 패키지/GUI 프로그램] - [파이썬 GUI 프로그래밍] PyQt5 기초_2강.위젯의 종류, 시그널과 슬롯, 이벤트 루프

2021.05.10 - [파이썬 패키지/GUI 프로그램] - [파이썬 GUI 프로그래밍] PyQt5 기초_3강.Qt Designer로 내마음대로 GUI 구성하기

지난 시간에는 PyQt가 무엇인지, 대충 어떻게 생겼고 기본적인 창을 만들고 조금조금 바꿔보는 것을 배워봤습니다.

그런데 창 안에는 아무것도 존재하지 않았죠? 오늘은 그 안을 어떤 위젯으로 채울 수 있는지 간단하게 알아보고, 위젯을 조작했을 때 어떤 방식으로 함수와 연결되는지에 대해서 알아보겠습니다.

위젯의 종류

위젯이란 지난 시간 배운 Window라는 Container에 담을 수 있는 내용물을 뜻합니다.

PyQt에는 아래와 같은 위젯들이 존재하며, 각각 다른 모양과 기능을 가지고 있습니다. (여기 있는 것 외에도 위젯들이 있을 수 있습니다)

참고로, 우리는 위젯 구성을 다음시간에 배울 Qt Designer라는 프로그램으로 할 것입니다. 

아래 이미지는 Qt Desinger의 위젯 상자입니다. 여기서 원하는 위젯을 골라서 '드래그 앤 드롭' 하여 사용할 거예요.

시그널과 슬롯

아직 위젯을 만드는 법은 배우지 않았지만 위젯을 추가했다고 가정해봅시다. 현재의 위젯은 마치 그림의 떡과 같이 아무 쓸모가 없습니다.

그래서 우리는 이 위젯이 어떤 기능을 할 수 있도록 추가적인 코드를 작성해주어야 합니다.

위에서 살펴본 위젯들 중, 가장 기초적인 버튼 위젯을 예로 설명해보겠습니다.

사용자가 버튼을 클릭하는 행위를 입력(Input),

위젯에 어떤 입력이 들어왔을 때 발생하도록 정의된 이벤트를 시그널(Signal),

시그널이 발생했을 때 수행할 함수를 '이벤트 핸들러' 혹은 슬롯(Slot)이라고 합니다.

쉽게 비유하자면 제가 친구의 옆구리를 찌른 것이 '입력'이고, 친구가 받은 옆구리의 통증이 시그널, 친구의 반응이 '슬롯'이죠.

시그널은 위젯마다 다르며, 하나의 위젯에 여러개의 시그널이 존재할 수 있습니다.

이 부분을 하나하나 다루기에는 너무 양이 방대하여 링크로 대신하도록 하겠습니다.

[위키독스] 초보자를 위한 Python GUI 프로그래밍 - PyQt5  (위젯과 레이아웃 링크)

wikidocs.net/35483

슬롯은 우리가 직접 함수로 정의해주면 됩니다. 아래의 코드를 보시죠.

import sys
from PyQt5.QtWidgets import *

class MyWindow(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):    
        btn = QPushButton("버튼", self)
        btn.clicked.connect(self.surprise)

    def surprise(self):
        print("으엌! 깜짝이야!!")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.show()
    app.exec_()

이 코드에서 먼저 입력과 시그널, 슬롯은 무엇일까요?

입력은 '사용자의 물리적인 마우스 클릭과 마우스를 통해 변화된 전자적 입력'입니다.

시그널은 btn.clicked.connect( )에서 .cliked 입니다.

이 코드는 btn이란 이름의 QPushButton의 인스턴스가 클릭되었을 때, ( )안의 메소드(슬롯)와 연결해주는 역할을 하죠.

슬롯은 def surprise(self): 로 정의하였습니다. 이 슬롯은 위에서의 .connect( )로 시그널과 연결되는 것입니다.

이벤트 루프

혹시 지난 시간에 배웠던 코드 중에 닫기 버튼 누를 때 까지 계속 GUI 프로그램을 실행시키는 코드를 기억하시나요?

app.exec_( ) 를 프로그램의 마지막에 입력하시면 루프를 돌며, '닫기' 이벤트가 발생하기 전까지 GUI 창을 계속 띄워놓는 코드입니다.

그래서 이벤트 루프라고 부르며, 이벤트라는 것은 사용자가 마우스클 클릭하거나 키보드를 입력하는 것과 같은 동작을 의미합니다.

참고로, exec_( ) 앞에 붙는 app은 QApplication 클래스의 인스턴스이며, 이름은 app 말고도 원하는대로 지어주시면 됩니다.

exec_( ) 메서드를 호출하면 이벤트 루프가 생성되고 실행됩니다. 이를 보다 명확히 알아보기 위해 다음과 같이 print( ) 함수를 추가해서 커맨드 창을 관찰해보시면 좋을 것 같습니다.

import sys
from PyQt5.QtWidgets import *

class MyWindow(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):    
        btn = QPushButton("버튼", self)
        btn.clicked.connect(self.surprise)

    def surprise(self):
        print("으엌! 깜짝이야!!")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.show()
    app.exec_()
    
#해당 코드 실행 시 부터 이벤트 루프 발생 (즉, 이 코드 아래로는 이벤트 발생 전까지 안내려감)
app.exec_()

print("루프 밖")

이번 시간에는  위젯의 종류와 입력/시그널/슬롯 간의 관계에 대해서 알아보았습니다.

다음 시간에는 Qt Designer를 이용해 위젯을 실제로 구성해보고, 슬롯을 정의해서 연결시켜보면서 실제 프로그램을 만들기 위한 공부를 해보겠습니다.