[Python] Tkinter Drag&Drop Designer

[Python] Tkinter Drag&Drop Designer

원래는 QTDesigner를 썼는데 윈도에서 맥으로 넘어오면서 굉장히 불편한 점이 많았습니다.

 

그래서 그냥 가볍게 외주뛰거나 할 때는 Electron을 쓰는 게 정신건강에 좋겠구나 싶었지만

 

엄청나게 좋은 툴을 찾았습니다.

---

글 읽기 귀찮으시면 여기 들어가셔서 바로 사용하셔도됩니다.

GitHub - ParthJadhav/Tkinter-Designer: Create Beautiful Tkinter GUIs by Drag and Drop ☄️

 

---

사용법

1.Figma로 내가 만들 프로그램의 GUI를 꾸밈

2.git clone 후 Figma에서 만든걸 그대로 python파일로 뽑음

3. 빌드된 걸 실행시켜보고 박수를 친다.

 

이게 QTdesigner보다 훨씬 이쁘고 쉽고 잘되어있습니다.

 

Figma가 원래 디자이너 분들이 협업도 편하고 쓰기도 편해서 자주 사용하신다는데

 

확실히 포토샵보다 편하고 무엇보다 QTdesigner보다 좋습니다 제 맘대로 만들어도 되니까요

 

일단 Figma 프로젝트 생성해주시고

Figma: the collaborative interface design tool.

 

이걸로 Frame이라는 걸 하나 만들어주셔야지 빌드가 됩니다.

 

GUI 환경에서 제일 필요한 Input과 Button만 설명하도록 하겠습니다

 

뭐든지 레이어들 이름은 규칙에 맞게 지어줘야 합니다.

 

---

입력창

그냥 사각형으로 입력창처럼 만들면 됩니다.

여기서 중요한 게 저렇게 만든 도형의 레이어 이름?을 TextBox로 만들어주셔야지 빌드할 때input으로 만들어줍니다. 

 

.

 

---

버튼

 

버튼도 마찬가지로 그냥 도형으로 버튼처럼 만들어 놓고 이름을 Button으로 바꾸셔야 합니다

 

얘도 마찬가지로 도형 위에 있는 애는 Command+G로 그룹화해서 그룹 이름을 Button으로 바꾸셔야 합니다.

 

근데 자꾸 버튼 뒤에 이상하게 검은색이 생겨서 도형으로 가렸습니다.

그냥 텍스트는 상관없습니다.

 

완성된 모습

제가 디자이너가 아니라 좀 구려 보이는 건 어쩔 수 없어요..

 

 

빌드해보기

오른쪽 상단 Setting > 맨 아래로 스크롤 > 토큰 복사 후 메모장 같은데 붙여 넣기

 

그리고 아까 그 작업했던 프로젝트의 URL도 복사하고 메모장에 붙여 넣기!

 

 

그리고 이걸 그대로  Terminal에 따라 치세요

 

cd 바탕화면으로 가기

md 빌드된 파일 받을 폴더

git clone https://github.com/ParthJadhav/Tkinter-Designer.git

cd Tkinter-Designer

pip install -r requirements.txt 

cd gui

python3 gui.py

 

그럼 이런 게 나옵니다

 

설명 안 해도 어디다가 뭘 넣어야 할지 아시겠죠

 

이제 빌드하려고 버튼을 누르는데?

 

no module named tkinter 이런 에러가 뜬다면

 

no module named tkinter 에러 해결 방법/ 맥 Big Sur

안 뜨면 빌드된 파일을 봅시다.

 

 

정말 대박인 거 같습니다. 너무 편해요

 

근데 사실 QTdesigner가 된다면 그냥 QT 쓰는 게 좋은 거 같아요

 

근데 이건 디자인적인 면에서 QT보다 자유롭다는 면이 있는 거 같습니다.