21. miniProject(11) - miles / km 변환기 (feat. tkinter)

이번에는 miles 로 입력받은 숫자를 km 로 변환하는 프로그램을 작성해보자. 

 

이 프로젝트에서 우리는 tkinter 라는 것을 사용할 것이다. 그렇다면 tkinter 는 무엇일까?

 

tkinter 을 배우기 앞서 우리는 GUI 의 개념에 대해 먼저 배워야한다. 

 

GUI 는 Graphic User Interface로, 사용자 그래픽 인터페이스를 의미한다. 

 

이는 컴퓨터 사용시에 유저가 그래픽을 이용하여 컴퓨터와 상호작용할 수 있도록 도와주는 것을 의미한다. 

 

우리가 늘상 컴퓨터로 환경설정을 할 떄 뜨는 창, 버튼 등등을 GUI 라고 할 수 있다. 

 

이런 GUI 를 사용하면 사용자 입장에서 더 쉽고 직관적으로 컴퓨터를 조작할 수 있는데,

 

이런 GUI 를 파이썬에서도 사용할 수 있다. 

 

이 때 사용하는 module 이 바로 tkinter 이다. 

 

tkinter 는 파이썬에서 많이 사용하는 GUI module 이다. 

 

이는 파이썬에 기본적으로 내장되어 있기 떄문에 따로 설치할 필요가 없다. 

 

tkinter 로 프로그램 생성 할 경우 크게 화면을 생성하고 화면에 위치할 위젯 등을 생성, 구성한다. 

 

대표적인 tkinter 의 위젯을 간단히 설명하면 아래와 같다. 

 

위젯	설명
Button	단순한 버튼
Label	텍스트 혹은 이미지 표시
CheckButton	체크박스
Entry	단순한 한 라인 텍스트 박스
ListBox	리스트 박스
Text	멀티 라인 텍스트 박스
Frame	컨테이너 위젯, 다른 위젯들을 그룹화할 때 사용
Canvas	그래프와 점들로 그림을 그릴 때 사용

 

실질적인 실행 방법은 프로젝트를 해보면서 설명하자. 

 

---

먼저 우리가 구현하려는 화면을 보자. 

 

tkinter 로 구현한 Miles to Kilometer

 

그림에서 살펴볼 수 있 듯이, 우리가 입력한 miles 이 몇 km 인지 변환해주는 기능을 가진 Entry 를 만들어야한다.

 

또 창의 내용을 배치시킬 위치를 잡고 calculate 버튼을 만들어야한다. 

 

그렇다면 전체 코드를 작성해보자. 

 

main.py

 

tkinter 는 기본적으로 python 에 내장된 module 이라 import 만 하면 된다. 

 

우리의 결과물이 나올 창을 window 로 저장할 것이기 떄문에 tkinter.Tk() 를 window 에 저장한다. 

 

여기서 중요한 것은 우리가 tkinter.Tk() 를 통해 만든 창에서 구현하고 싶은 모든 코드 내용은 window.mainloop() 사이에

입력되어야 한다는 것이다. 

 

window.minsize() 와 window.title(), window.config() 을 통해서 창의 크기, 제목 그리고 가로, 세로의 패딩값을 정한다. 

 

이제, 앞서 결과 화면에서 나왔던 miles 입력하는 창을 만들자. 

 

tkinter.Entry() 를 사용하여 생성하고 이를 miles_input 라는 변수로 저장할 것이다. 그리고 위치를 grid() 를 사용하여

column=1, row=0 로 정한다. 

 

여기서 gird는 위젯들을 테이블 레이아웃에 배치하는 것으로 지정된 row와 column 에 위치하도록 한다. 

 

즉 가상의 구역을 등분하여 지정한 위치에 위젯을 위치한다는 소리이다. 

 

우리가 입력한 miles 에 해당하는 단위 miles 를 위치할 곳은 Entry 바로 옆이기에 grid(row=0, column=2) 가 될 것이다. 

 

이런식으로 grid 를 위치하면 is_equal_label 은 grid(row=1, column=0) , kilometer_result_label 은 grid(row=1, column=1) 가  될 것이다. 

 

자, 이제 calculate 버튼을 클릭했을 때, 계산을 해서 결과값을 알려줄 함수가 필요하다. 

 

함수 miles_to_km

 

함수 miles_to_km 가 호출되면 위에서 만들었던 kilometer_result_label 를 자동으로 km 에 저장한 값으로 변환하여 나타나도록 설정한다. 

 

 

이렇게 10을 입력하고 calculate 버튼을 클릭하면 결과가 자동적으로 나오는 것을 확인할 수 있다.