[PyQt5]버튼으로 팝업 띄워보기! - QMessageBox

안녕하세요, Dibrary입니다. 이번에는 Qt Designer를 써서 Button으로 이것 저것을 해 볼 겁니다.

버튼으로 해 볼 수 있는게 뭐가 있을까요?

• 버튼을 눌러서 확인하는 것
• 버튼을 눌러서 저장하는 것
• 버튼을 눌러서 끄는 것
• 버튼을 눌러서 새로운 화면으로 넘어가는 것
• 버튼을 눌러서 시작하는 것

네 간략하게 몇 개 적어봤지만, 실제로도 엄청 많은 걸 할 수 있죠? 당장 마우스 가지고 파일이나 폴더를 돌아다녀보면서 무엇을 할 때 클릭을 하는지 확인 해 보세요.

제 개인적인 생각인데, GUI의 핵심은 버튼이 아닐까 싶습니다. 그래서 Button을 가장 먼저 해보기로 정했습니다.

 

# 버튼을 눌러서 팝업이 뜨게 하기

인터넷 여기저기를 돌아다니시다가 버튼을 잘못 누르면 '경고' 혹은 '금지'팝업이 뜬 경험이 있으실 겁니다.

GUI도 역시 그런 기능을 구현할 수 있습니다. 

주된 사용 예로는

• 로그인 화면에서 값을 입력 안하고 로그인 하려고 할 때
• 숫자를 입력해야하는 곳에 잘못된 값을 입력 했을 때
• 처리를 하다가 문제가 생겼을 때

등등이 있습니다. 실제로도, 제가 HMI를 구현할 때 위와 같은 상황이 생기면 간단히 팝업을 통해 처리하곤 합니다.

 

당연히 Qt Designer를 먼저 실행하셔야 합니다.

단순히 Dialog로 생성을 했습니다. 

어떻게 여는지 까먹으셨다면 참고하세요.

2021.07.08 - [프로그래밍/PyQt5] - PyQt5의 편리함 느껴보기! - 손코딩과 Designer의 차이

PyQt5의 편리함 느껴보기! - 손코딩과 Designer의 차이

 

우리는 버튼에 팝업을 띄울 것이니까, 당연히 버튼이 있어야겠죠? 버튼을 드래그 해서 넣어줍니다.

테스트로 만든 버튼만 있는 화면

네 저는 3개의 버튼을 넣어보았습니다. (버튼을 여러 개 넣으셔도 됩니다.)

게다가 글자를 다르게 해 주었습니다. 각기 다른 결과의 팝업을 띄워보려고 한 것이죠.

Qt Designer로 만든 파일을 내가 파이썬 코드를 돌릴 경로에 저장하고, 파이썬 툴을 실행합니다. (저는 여느때와 마찬가지로 Jupyter lab을 사용합니다.)

보시면 popup.ui라고 보이죠? 저는 popup이라는 이름으로 저장을 했답니다.

위와 같이 코드를 작성하고 실행 해 보면.

아까 Qt Designer로 만든 화면이 그대로 나타납니다!. 

하지만 버튼을 아무리 눌러도 우리가 원하는 어떤 변화가 일어나지 않습니다. 

 

참고로 알려드리면, 여기서 말하는 어떤 변화는 프로그래밍을 할 때 대부분 '이벤트'라고 지칭합니다.

네 이벤트가 발생하지 않네요~ 왜 그럴까요? 당연히 우리는 코드에 아무런 작업을 하지 않았기 때문입니다.

그럼 어떤 작업을 해야 할지 구상 해보면

1. 버튼을 누르는 것을 인식해야 함
2. 버튼이 눌리면 그에 맞는 팝업이 떠야 한다.
3. 팝업은 미리 만들어져 있던가, 눌리는 순간에 만들어져야 한다.

이 정도로 생각 해 볼 수 있겠네요.

아직 Qt Designer는 안 끄셨죠? 혹시나 이미 꺼버리셨다면, 다시 실행하셔서 아까 작업 했던 popup.ui 파일을 열어보세요.

오른쪽에 보시면 이런 화면이 나와있을 겁니다. (전 3개의 버튼을 만들었으니 3개가 나오네요. 1개의 버튼만 만드셨으면 한 개가 나옵니다.)

여기서 pushButton, pushButton_2, pushButton_3 이 해당 버튼 객체의 '이름'입니다.

우리가 코드에서 Qt Designer로 만든 버튼을 사용하려고 하면 그 '이름'을 가지고 뭔가를 할 수 있습니다.

그래서 이 이름은 까먹으면 안 됩니다. 근데 _2, _3 이렇게 달리니까 굉장히 복잡하죠?

쉽게 바꿔보겠습니다. 이름은 내 마음대로 바꿀 수 있답니다. 

이렇게 pushButton_2 위에 곧바로 더블클릭을 해서 변경 해 버리면 됩니다.

저는 각각의 버튼 이름과 똑같게 만들고 뒤에 btn만 붙인 이름으로 정했습니다. 이 이름을 기억하셔야 합니다!.

그 이름을 기억하고 와서 아래와 같이 코드를 작성 해 보시죠. (이름만 자신이 바꾼 이름으로 바꾸시면 됩니다.)

저는 버튼이 3개였으니, clicked.connect부분도 3개, 이벤트와 관련된 메서드도 3개 있네요.

코드가 정확히 뭘 의미하는지는 모르겠으나, 잘 보시면 ok_btn은 ok_event로 이어지고, ok_event안에는 "OK"랑 "오케이"가 나오는거 같죠?

과연 그런지 보죠

OK버튼

ERROR 버튼

왕버튼

네 버튼별로 팝업이 다 뜨네요!. 

 

소스코드를 분석 해 보겠습니다.

 

1. self.ok_btn.clicked.connect(self.ok_event)

이 코드에 앞에 있는 self.는 우리가 ui파일로 GUI 그린 것을 가져왔으므로, 붙여주는 거라고 생각하시면 편합니다.

정확히는, 인스턴스 자체를 지칭하는 것이라고만 알아두세요.

그 화면 자체(self)에 있는 ok_btn 버튼을 누르면 에서, '누르면'에 해당되는 것이 clicked 입니다.

누르면 이벤트가 동작해야겠죠? 해당 이벤트를 '연결'해 주는 것이 connect 입니다.

그리고 connect 괄호 안에 있는 이벤트가 연결되는 것임을 알 수 있습니다.

괄호 안에는 self.ok_event라고 적혀있고, 아래 보시면 def로 ok_event 라는 메서드가 정의가 되어 있네요.

즉, self.ok_event는 해당 인스턴스에서 정의된 ok_event 메서드를 가리키는 겁니다.

 

나머지 코드들도 보시면 알파벳만 다르지 코드 꼴이 똑같습니다. 그쵸?

 

2. QMessageBox.information(self, "OK", "오케이")

이 코드는 QMessageBox라는 요소를 쓰는 겁니다. 이게 우리가 원하던 '팝업창' 입니다.

근데 바로 뒤에 information이 나왔죠? 이는 팝업창에 들어가는 이미지가 달라지는 겁니다.

그쵸? 하나는 동그란 느낌표, 하나는 경고하는 느낌표. 

경고하는 느낌표 이미지는 .warning을 쓰면 저렇게 나옵니다.

저는 information과 warning만 보여드렸지만, question이라던지, critical 같은 여러가지로 이미지를 바꿀 수 있습니다.

critical로 바꾼 큰 창의 팝업

그리고 괄호 안에 OK와 '오케이' 글자가 있죠? 이 중에 앞에 쓴 것은 팝업창 자체에 뜨는 이름이고,

두 번째 쓴 '오케이'글자는 팝업창 내부에 들어가는 글자입니다. 직접 버튼을 눌러보면서 확인 해 보세요.

이제 원하는 버튼을 누르면 팝업이 뜨는 것을 구현 할 수 있게 되었습니다~

 

마지막으로, 이 기능을 구현할 때 가장 중요한 점은 

Qt Designer 에서 만든 버튼의 '이름'을 까먹지 않는 것

 

네 굉장히 쉬운거 같죠? 하지만 나중에 이 이름이 안 맞아서 에러가 나는 경우가 꽤나 많습니다.