[QT] QT Designer 로 디자인하기

개요

지금까지 카카오톡 대화를 전처리하여 데이터프레임화 하고 시각화 함수를 작성해보는 시간을 가졌다.

[DA][Python] (수정) 대화 분석 기능 - 시각화하여 출력 코드로 수정

 

[DA][Python] 대화 분석 기능 - 사용자별 평균 답변 시간 분석 (4)

이제 이 시각화한 결과를 시스템의 기능 버튼에 맞춰서 클릭하면 시각화가 출력될 수 있는 GUI를 만들어 볼 예정이다.

그러기 위해서는 우선 전체적인 시스템의 밑그림이 필요했다.

---

색상 및 상단 디자인

우선 컨셉은 카카오톡 대화 분석이기 때문에 카카오톡 로고와 노란색, 갈색의 대표적인 색상을 가져와서 디자인하였다.

최상단의 디자인이며 아래에는 기능에 대한 설명 및 버튼이 들어가야 해서 버튼에 대해 고민 해보았다.

 

필요한 카테고리

분석 데이터 설정

처음으로는 분석하고자 하는 txt 파일을 입력하는 것이다.

파일을 삽입할 수 있는 [찾아보기] 버튼 및 경로명을 나타내주는 레이블을 삽입하였다. 

그리고 내가 만든 기능이 총 4개 이기 때문에 이 기능의 종류를 사용자가 선택하여 시각화 값을 볼 수 있도록 드롭박스도 추가하였다.

• 또한 txt 파일만 가능하기 때문에 관련 문구도 작게 추가하였다.

 

기능별 필터링

내가 만든 함수 중에 사용자별 활동 시간대에 따른 분석결과를 파이차트로 도출하는 기능이 있다. 

해당 기능은 유일하게 각 사용자의 개별 파이차트 결과를 확인할 수 있기 때문에 여기에만 해당되는 사용자 입력 버튼을 만들었다.

원래 드롭박스로 하려 했지만 직접 사용자 이름을 입력하는 것이 더 쉽게 만들 수 있어서 TextEdit 박스를 삽입했다.

또한 기능은 오류 값이나 빈칸으로 출력하면 전체가 출력되도록 설정했기 때문에 관련된 부분에 대한 문구를 추가하여 완성하였다. 

지금 알았는데 시간대 별 활동 빈도 분석 기능 이라는 문구가 수정이 안되어있다.. 사용자별 활동 시간대인데

 

결과 저장

이제 마지막으로 출력된 시각화를 png 파일로 저장하고 싶을 때 사용할 수 있는 카테고리를 만든다.

이미지 다운로드 버튼이 필요하고 저장할 때는 png로만 가능하다는 문구를 추가해준다.

이미지 다운로드 버튼을 누르면 png를 저장하고 싶은 파일 위치를 선택하고 저장할 수 있다. 

 

시각화 도출

시각화를 도출하기 위해서는 분석을 시작할 수 있는 버튼과 경로 및 선택한 버튼을 초기화하는 버튼 두 개가 필요하다.

또한 시각화 이미지를 확인할 수 있는 화면도 필요하다.

각 버튼은 ToolButton으로 만들었으며 시각화 화면이 도출되는 곳은 레이블로 크기를 지정하여 연결하였다.

 

---

최종 디자인

이렇게 만들면 전체적인 화면은 아래와 같이 완성된다.

 

이제 만들어둔 QT 객체들을 파이썬을 이용하여 함수들과 연결하는 작업을 진행하면 된다.