Tkinter Designer로 Figma 디자인을 Python GUI로 구현하기

카테고리 없음

by nyjeong 2024. 5. 21. 23:19

프로젝트를 진행하다보면, 요구 분석과 설계 단계 사이에 프로토타이핑을 진행합니다.

프로토타입을 만들어 초기 아이디어나 요구사항을 시각화하고 검증할 수 있습니다. 또한 이를 통해 사용자 요구 사항을 더 명확히 파악할 수 있으며 개발 프로세스를 가속화할 수 있습니다.

보통 여러 팀원이 동시에 프로토타입을 작업하기 때문에, 실시간으로 편집 내용을 공유할 수 있으며 동시 작업이 가능한 Figma를 많이 사용합니다.

Figma란, 협업을 위한 디자인 및 프로토타이핑 도구로, 웹 기반의 인터페이스 디자인 툴입니다.

Figma는 다양한 텍스트, 도형, 이미지 등을 활용하여 다음 사진과 같이 구현해야 할 화면의 프로토타입을 제작해 볼 수 있습니다. 또한, Figma에는 interaction을 추가하는 기능도 있어 버튼에 interaction을 추가해 화면 플로우를 시뮬레이션 해볼 수 있습니다.

저희 프로젝트의 경우, '객체 인식과 OCR을 활용한 객관·단답식 시험지 채점 AI 소프트웨어' 를 제작하는 것으로, 필요한 화면에는 시험지 양식 적용과 채점하기 화면이 있습니다. 시험지 양식 적용에 대한 설명은 다음 글을 참고해주시기 바랍니다. 아래 사진이 바로 시험지 양식 적용과 채점하기 화면의 프로토타입을 제작한 화면입니다.

다음과 같이 Figma에서 프로토타입을 제작하였다면, 이제는 직접 GUI로 구현해볼 시간입니다.

보통 웹 애플리케이션 GUI 구현의 경우, HTML, CSS, JavaScript를 많이 이용합니다.

하지만, 이번의 경우, Figma로 프로토타입도 제작하였다 이걸 이용하여 바로 GUI로 구현해보려고 합니다.

바로 "Tkinter Designer"를 이용하는 것입니다.

Tinker Designer란, Python GUI 프로그래에서 GUI를 디자인하고 개발하기 위한 도구입니다.

저와 같은 초보 개발자들은 보통 Python을 더 많이 접해보고 이더 익숙해하실 겁니다.

그래서 Tkinter Designer를 이용하면 더 쉽고 간편하게 GUI를 구현해볼 수 있답니다!

이제 본격적으로 Figma에서 만들었던 프로토타입을 Python 코드로 바꿔오는 과정에 대해 알려드리겠습니다.

우선, 파이썬 GUI tkdesigner를 설치해야합니다.

pip install tkdesigner

다음과 같이 pip 을 이용해 설치를 해야하는데, 여기서 여러 문제가 발생하게 됩니다.

바로 " pillow 버전 문제 " 입니다!

보통 최근 python과 pip, pillow를 업데이트 하시거나 다운받으셨으면, 높은 버전일 확률이 높습니다.

하지만, tkdesigner를 설치하기 위해서는 pillow 버전이 8.4.0 이하여야고, 또 이 pillow 버전을 위해서는 python 버전도 낮춰줘야 하기 때문입니다.

저는 이를 위해 python을 새로 다운 받고 환경 변수 설정까지 모두 새로 한 후, pillow version 8.4.0 와 tkdesigner 설치 완료하였습니다. 환경 변수 설정의 경우, 시스템 속성 / 환경 변수 / USER에 대한 사용자 변수 / path 에 다음과 같이 추가해주시면 됩니다.

참고로 어떤 버전의 python 을 깔아야하는지 고민이신 분들 위해 알려드리면,

저는 "python version 3.9.13", "pip 24.0" 을 사용하였습니다!

새로 계속해서 다운로드 받기 어렵거나 귀찮으신 분들은 위 버전을 참고해 가상 환경을 만들어 이용하셔도 됩니다.

이제 tkdesigner를 설치 완료했다면 추가적으로 필요한 파일들을 다음 코드를 이용해 받아주면 됩니다.

git clone https://github.com/ParthJadhav/Tkinter-Designer.git
cd Tkinter-Designer
pip install -r requirements.txt

git clone을 통해 얻은 requirements.txt 파일로 추가 필요 패키지들을 설치해줍니다.

그렇게 하면 다음과 같이 Tkinter-Designer 폴더안에 여러 파일들과 requirements.txt 파일이 존재하는 것을 볼 수 있습니다.

여기까지 완료되었다면, 이제 현재 cmd 위치가

위와 같을 거고, 이제 gui 폴더 내의 이름이 gui인 파이썬 파일을 실행시켜 주면됩니다.

다음과 같은 코드로 실행을 할 수 있습니다.

cd gui
python gui.py

gui 파일을 실행하게 되면 이제 다음과 같이 Tkinter Designer가 실행됩니다.

이제 Figma 에서 구현할 GUI의 프로로타입의 토큰 ID를 가져옵니다.
여기서 주의해야 할 것이 Tkinter Designer에서 생성된 코드는 Figma 설계의 요소 이름을 기반으로 하므로 요소 이름을 적절하게 지정해야한다는 것입니다. 아래의 깃허브를 참고해서 Figma element들의 이름을 미리 바꾼 후 토큰 ID를 가져와 주세요!

https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md

Figma에서 Token ID를 가져오는 방법은 다음과 같이 자신의 계정을 클릭하면 Personal access tokens에 Generate new token을 선택하시면 오른쪽의 화면이 나오고 직접 Token name을 작성한후 아래 Generate token을 누르시면 됩니다.

이렇게 얻은 token ID와 만드셨던 Figma file URL, output을 저장할 폴더 위치를 위에 Tkinter Designer 에 작성하신 후, Generate 버튼을 누르시면 완료됩니다.

그 후 지정한 output path에 'build'라는 폴더가 생성되고 그 안에 Figma에 있던 사진들과 frame별 python 파일이 만들어져 있는 것을 확인하실 수 있습니다. 사진들의 경우, build/assets 안에 각각의 frame 폴더가 있고 그 안에 따로따로 저장되어있습니다. 저의 경우, build 파일 안에 만들어졌던 채점하기 화면, 즉 home.py 파일을 ' python home.py ' 를 통해 실행해보니 다음과 같이 GUI가 만들어진 것을 확인할 수 있었습니다.

이제 기본적인 위치나 틀이 자동으로 만들어졌으니 원하는 대로 버튼 클릭시 작동할 함수나 글씨체, 여러 기능들을 추가해주면 됩니다.

제가 사용한 tkinter의 대표적인 기능들 몇 가지를 소개해드릴게요!

저희 팀 주제가 시험지 채점이므로 시험지 파일, 답 파일 등 여러 파일들을 업로드 받는데요, 이 파일 업로드 버튼을 만드는 코드가 바로 다음과 같습니다. 아래와 같이 browse_file() 함수를 이용 작성하고, tk.Button의 command에 이 함수를 불러주면 됩니다. 현재는 browse_file() 에서 filetypes 부분이 .pdf로 되어있어, 이는 pdf 파일만 업로드 할수 있도록 해놓은 것입니다. 이 부분을 바꿔주면 업로드 하는 파일의 형식을 원하는 대로 제한할 수 있습니다.

UploadExamSheetsBtn = tk.Button(
        text="시험지 파일 업로드",
        borderwidth=0,
        highlightthickness=0,
        command=browse_file,
        relief="flat"
    )
    
def browse_file():
    file_path = filedialog.askopenfilename(filetypes=(("pdf files","*.pdf*"),))  # 파일 선택 다이얼로그 열기
    file_path_var.set(file_path)

그 다음으로 많이 쓰인 기능은 사용자에게 입력을 받는 칸을 생성한 것입니다. 아래 코드와 같이 Stringvar() 을 이용해 입력을 받을 수 있습니다. 여기서 tk.Entry 안의 bg가 입력 받는 칸의 배경색, fg 가 텍스트 색, highlightbackground가 바로 테두리 색을 의미합니다.

    total_qna_num = tk.StringVar()
    total_qna_num_field = tk.Entry(
        bd=0,
        bg="white",  # 배경색 (흰색)
        fg="#000716",  # 텍스트 색상
        highlightbackground="#d9d9d9",  # 테두리 색상
        highlightthickness=1,
        font=(FONT_PATH, 16 * -1),
        textvariable=total_qna_num
    )

그 다음으로 체크 박스를 생성하는 기능입니다. test_category_mul은 tk.IntVar의 인스턴스로, 정수 값을 관리하기 위해 Tkinter에서 사용하는 변수 클래스로 초기 값을 0으로 해놓았고, 체크박스의 상태를 추적하는데 사용됩니다. 그 다음, tk.Checkbutton을 이용하여 체크 박스를 생성합니다. onvalue=1은 체크박스가 선택되었을 때 test_category_mul 변수에 1이 설정되도록 한 것이고, offvalue=0은 선택 해제시 0이 되도록 한 것입니다. 색깔의 경우는 위의 버튼과 비슷하게 설정하시면 됩니다. 자세한 코드는 아래와 같습니다.

    test_category_mul = tk.IntVar(value=0)
    test_category_mul_checkbox = tk.Checkbutton(
        root,
        text="객관식",
        variable=test_category_mul,
        onvalue=1,
        offvalue=0,
        bg="white",  # 체크박스 텍스트 영역의 배경색을 변경
        activebackground="white",  # 마우스가 올려졌을 때 배경색을 변경하지 않음
    )

마지막으로 조금 더 화면의 완성도를 높일 수 있는 디테일 설정 하는 방법을 소개해드릴게요!

바로 창의 타이틀 바를 수정해주는 것입니다.

# 메인 창 생성
root = tk.Tk()
root.title("POINTCHECKER")
root.geometry("800x660")
root.resizable(False, False)
root.configure(bg = "#FFDED7")#"#FFFFFF")
root.iconbitmap(ICON_PATH)

위 코드와 같이 수정하게 되면 iconbbitmap 은 타이틀 바의 아이콘 사진을 설정하는 것입니다. 원하는 사진의 경로를 ICON_PATH 부분에 넣어주시면 됩니다. 그리고 title은 타이틀 바의 아이콘 옆에 글자를 의미하는데요, 만드시는 웹이나 앱의 이름을 넣어주시면 좋을 거 같아요! 또한 geometry를 바꿔주시면 창의 크기가 변할 거고, 저희 팀의 경우 resizable을 False로 설정해두어 사이즈 변환을 사용자가 할 수 없도록 만들어놨답니다.

최종적으로, 이게 바로 저희 팀의 완성된 GUI 화면입니다.

처음 Figma 화면 보다 훨씬 깔끔해졌죠??

현재 서버와 연결도 되어있어, 시험 정보와 파일 입력 후 채점하기 버튼을 누르게 되면 사용자가 입력한 정보가 서버로 전달되어 채점이 진행되고, 채점이 완료되면 프로그레스 바가 다 채줘져 채점 결과 확인하기 버튼을 통해 채점 결과를 확인할 수 있답니다!!