본문 바로가기
파이썬 (Python)

[Python] QT Designer .ui파일을 .py로 변환하는 법

by Minkyu Lee 2025. 10. 31.

개요

qt designer로 구성한 ui를 .py 코드로 변환하는 법에 대해 알아본다.
 

영상

https://youtu.be/g9_JT6VJjxI

 

결론

  1. UI 파일 저장: Ctrl+S를 눌러 현재 디자인을 .ui 확장자 파일(예: login.ui)로 저장합니다 [08:38].
  2. 파이썬 코드 변환 시도: QT Designer 메뉴의 '폼(Form)' -> '파이썬 코드 보기(View Python Code...)'를 클릭합니다 [08:52].
  3. 오류 발생: 처음 실행 시, 'uic'를 실행할 수 없다는 에러가 발생합니다 [08:52].
  4. 오류 원인 및 해결: 이 에러는 PySide6 패키지 내부에 uic.exe 파일이 있어야 할 위치에 없기 때문에 발생합니다.
    • venv\Lib\site-packages\PySide6 폴더로 이동합니다 [09:03].
    • 해당 위치에 bin이라는 이름의 새 폴더를 생성합니다 [09:26].
    • 다시 venv\Scripts 폴더로 이동하여 pyside6-uic.exe 파일을 찾습니다 [09:39].
    • 이 pyside6-uic.exe 파일을 복사(Copy)합니다.
    • 방금 생성한 venv\Lib\site-packages\PySide6\bin 폴더 안에 붙여넣기(Paste) 합니다.
    • 붙여넣기 한 파일의 이름을 pyside6-uic.exe에서 uic.exe로 변경합니다 [09:52].
  5. uic.exe의 역할: 이 파일은 .ui 파일을 파이썬 코드(.py)로 변환해주는 역할을 합니다 [10:18].
  6. 변환 재시도: 설정을 완료한 후 다시 '폼' -> '파이썬 코드 보기'를 클릭하면, 에러 없이 자동 변환된 파이썬 코드가 팝업창으로 나타나는 것을 확인할 수 있습니다 [10:27].

 

타임라인별 상세 요약

[00:00:00 - 00:00:43] 도입: 왜 QT Designer를 사용하는가?

영상은 PySide6를 이용해 GUI를 만들 때, 코드로 직접 UI를 구성하는 방식의 문제점을 지적하며 시작합니다. 위젯들의 위치를 코드 단에서 일일이 맵핑하는 것은 시간이 굉장히 오래 걸리는 번거로운 작업입니다 [00:24]. 또한 디자인을 입히는 과정도 직관적이지 않습니다. QT Designer는 이러한 과정을 마우스로 처리할 수 있게 해주는 PySide6 내장 프로그램으로, 이 도구의 사용법을 실습을 통해 알아볼 것임을 밝힙니다.

[00:00:43 - 00:01:44] 1단계: 프로젝트 환경 설정

본격적인 실습에 앞서 VS Code 터미널에서 프로젝트 환경을 설정합니다.

  1. mkdir 명령어로 프로젝트 폴더(영상에서는 11.pyside_ui)를 생성합니다 [00:55].
  2. cd 명령어로 해당 폴더로 이동합니다.
  3. python -m venv venv 명령어로 가상환경(venv) 폴더를 생성합니다 [01:08].
  4. 프로젝트 폴더 내에 app.py 파일을 생성하여 가상환경 폴더와 분리합니다 [01:22].
  5. venv\Scripts\activate 명령어로 가상환경을 활성화합니다 [01:31].
  6. pip install pyside6 명령어를 실행하여 PySide6 라이브러리를 설치합니다 [01:44].

[00:01:44 - 00:04:04] 2단계: QT Designer 실행 및 기본 사용법

설치가 완료된 후, QT Designer를 실행하는 방법을 보여줍니다.

  1. QT Designer는 가상환경 폴더 내의 venv\Scripts 안에 다른 exe 파일들과 함께 설치되어 있습니다 [02:04].
  2. 파일 탐색기에서 해당 경로로 이동하여 pyside-designer.exe 파일을 찾아 더블클릭하여 실행합니다 [02:28]. (영상에서는 pyside6-uic를 먼저 언급하지만 실제 실행 파일은 pyside-designer입니다.)
  3. QT Designer가 실행되면 'Main Window' 템플릿을 선택하고 '생성'을 클릭합니다 [02:41].
  4. 왼쪽의 위젯 상자(Widget Box)에서 원하는 위젯을 마우스로 끌어다 화면에 배치할 수 있습니다. Push Button(버튼), CheckBox(체크박스), Line Edit(HTML의 input 태그와 유사한 한 줄 텍스트 입력창), Text Edit(HTML의 textarea와 유사한 여러 줄 텍스트 입력창) 등을 배치해보며 사용법을 간단히 보여줍니다 [00:02:40 - 00:03:04].
  5. 이렇게 마우스로 위젯을 배치하면 x, y 좌표가 자동으로 설정되는데, 이를 코드로 직접 하는 것보다 훨씬 효율적이라고 다시 한번 강조합니다 [03:40].

[00:04:04 - 00:08:27] 3단계: 실습 - 로그인 UI 만들기

간단한 로그인 폼 UI를 직접 만들면서 QT Designer의 구체적인 기능들을 살펴봅니다.

  1. 배경 설정: 'Display Widgets'의 'Label'을 크게 배치하고, 오른쪽 클릭 -> '스타일시트 바꾸기'에서 background-color: white;를 적용하여 흰색 도화지처럼 사용합니다 [04:42].
  2. 레이블 추가: 'Label' 위젯을 두 개 더 추가하여 각각 '아이디', '비밀번호' 텍스트를 입력합니다 [05:00].
  3. 입력창 추가: 'Input Widgets'의 'Line Edit' 위젯을 두 개 추가하여 아이디와 비밀번호 입력란을 만듭니다 [05:36].
  4. 버튼 추가: 'Buttons'의 'Push Button' 위젯을 추가하고 텍스트를 '로그인'으로 변경합니다 [05:23].
  5. 스타일링 (속성 편집기): '아이디', '비밀번호' 레이블을 선택하고, 우측의 '속성 편집기(Property Editor)'에서 폰트(font) 속성을 찾아 크기를 13포인트, 굵게(Bold) 설정합니다 [06:00].
  6. 플레이스홀더: 'Line Edit' 입력창을 선택하고 속성 편집기에서 'placeholderText' 속성을 찾아 각각 "아이디를 입력해 주세요", "비밀번호를 입력해 주세요"라고 입력합니다 [06:26].
  7. 스타일링 (스타일시트): '로그인' 버튼을 우클릭하여 '스타일시트 바꾸기'를 선택합니다. CSS와 유사한 문법으로 background-color: red; color: white; 등을 적용해 버튼 스타일을 변경합니다 [06:57]. 영상에서는 강사의 로고 색상인 RGB 값(rgb(23, 230, 37))을 직접 입력하여 적용하는 모습도 보여줍니다 [07:33].

[00:08:27 - 00:11:12] 4단계: UI 파일을 Python 코드로 변환하기 (오류 해결)

QT Designer로 만든 UI를 파이썬 코드에서 사용하기 위해 변환하는 과정과, 이 과정에서 발생하는 치명적인 오류 및 해결 방법을 설명합니다.

  1. UI 파일 저장: Ctrl+S를 눌러 현재 디자인을 .ui 확장자 파일(예: login.ui)로 저장합니다 [08:38].
  2. 파이썬 코드 변환 시도: QT Designer 메뉴의 '폼(Form)' -> '파이썬 코드 보기(View Python Code...)'를 클릭합니다 [08:52].
  3. 오류 발생: 처음 실행 시, 'uic'를 실행할 수 없다는 에러가 발생합니다 [08:52].
  4. 오류 원인 및 해결: 이 에러는 PySide6 패키지 내부에 uic.exe 파일이 있어야 할 위치에 없기 때문에 발생합니다.
    • venv\Lib\site-packages\PySide6 폴더로 이동합니다 [09:03].
    • 해당 위치에 bin이라는 이름의 새 폴더를 생성합니다 [09:26].
    • 다시 venv\Scripts 폴더로 이동하여 pyside6-uic.exe 파일을 찾습니다 [09:39].
    • 이 pyside6-uic.exe 파일을 복사(Copy)합니다.
    • 방금 생성한 venv\Lib\site-packages\PySide6\bin 폴더 안에 붙여넣기(Paste) 합니다.
    • 붙여넣기 한 파일의 이름을 pyside6-uic.exe에서 uic.exe로 변경합니다 [09:52].
  5. uic.exe의 역할: 이 파일은 .ui 파일을 파이썬 코드(.py)로 변환해주는 역할을 합니다 [10:18].
  6. 변환 재시도: 설정을 완료한 후 다시 '폼' -> '파이썬 코드 보기'를 클릭하면, 에러 없이 자동 변환된 파이썬 코드가 팝업창으로 나타나는 것을 확인할 수 있습니다 [10:27].

[00:11:12 - 00:13:06] 5단계: 효율적인 UI 수정 및 변환 워크플로우

터미널에서 직접 명령어를 쳐서 변환하는 방식과 QT Designer의 기능을 이용하는 방식을 비교하며 효율적인 작업 흐름을 제안합니다.

  1. 비효율적인 방식: UI를 수정할 때마다 터미널을 열고 Scripts 폴더로 이동한 뒤, pyside6-uic.exe login.ui 같은 명령어를 매번 입력하여 수동으로 변환하는 것은 매우 번거롭습니다 [11:12].
  2. 효율적인 방식 (추천): 4단계의 오류 해결 설정을 완료했다면, 다음과 같은 워크플로우가 가능합니다.
    • QT Designer에서 UI를 수정합니다 (예: 로그인 버튼 위치 변경) [11:30].
    • Ctrl+S를 눌러 login.ui 파일을 저장합니다.
    • '폼' -> '파이썬 코드 보기'를 클릭하여 변환된 코드를 확인합니다.
    • 팝업창의 '저장' 버튼을 눌러 파이썬 파일(예: UI_login.py)로 저장(덮어쓰기)합니다 [11:39].
  3. 이 방식은 UI 변경 사항을 코드에 즉각적이고 빠르게 반영할 수 있어 생산성이 가장 높으며, 강사 본인도 외주 개발 시 실제로 사용하는 방식이라고 강조합니다 [12:11].
  4. 마무리: 영상은 QT Designer 사용법과 UI 파일을 파이썬 코드로 내보내는(export) 방법을 다루었으며, 다음 강의에서는 이렇게 변환된 UI_login.py 파일을 app.py에서 실제로 어떻게 불러와서(import) 적용하는지 실습할 것을 예고하며 마무리됩니다 [12:50].
저작자표시 (새창열림)

댓글

티스토리툴바