한영타 변환기를 만들어보자! [2] (tkinter로 UI만들기)

한영타 변환기를 만들어보자! [1]

 

저번 글에 이어서 한영타 변환기를 만들것이다. 

저번에 변환에 필요한 기본 알고리즘을 구현했으니, 이번 시간에는 입력과 출력을 보기좋게 할 수있는 인터페이스를 만들거다.

 

파이썬에는 tkinter라는 ui를 만들수있는 기본 라이브러리가 있다.

import tkinter #(python3)
import Tkinter #(python2)

특이 한 점은 기본 라이브러리인데도 파이썬2와 파이썬3의 이름이 대문자 하나가 다르다는 것이다. (사용할 때 주의하자!!!)

 

간단하게 버튼 2개와 입력, 출력창 한개씩 구성하여 미리 완성된 모습을 보여주자면 아래와 같다.

 

Label을 사용하여 우선 입력창 설명(영어, 한글)과 "Made by j-mook"이라는 라벨을 만들거다.

label1 = Label(tk,text='영어\n(입력)').grid(row=0, column=0,padx=10)
label2 = Label(tk,text='한글\n(변환결과)').grid(row=1,column=0,padx=10)
label3 = Label(tk,text='Made by j-mook').grid(row=2,column=1,padx=10, sticky='se')

 grid로 위치를 설정할 수 있다. row와 column옵션으로 n행 m열에 요소를 위치 시킬 수 있다. 

 "Made by j-mook"만 sticky 옵션으로 오른쪽밑에 글자를 배치했다. n이 위쪽으로, 방향은 나침반 방위와 같다. 왼쪽위 (nw)

 

 

Text가 글자를 입력할 수있는 창이다. 

text1 = Text(tk)
text2 = Text(tk)
text1.grid(row=0,column=1,padx=5, pady=10, ipadx=20, ipady=0)
text2.grid(row=1,column=1,padx=5, ipadx=20, ipady=0)

똑같이 grid로 위치를 잡아줬다.

 

 

Button으로 버튼을 만들어 줬는데, 버튼이 눌렸을 때 실행되는 함수는 command 옵션으로 설정 해 준다.

btn1 = Button(tk,text='한/영 변환',command=click_btn).grid(row=2,column=1, pady=10)
btn2 = Button(tk,text='초기화',command=clear).grid(row=2,column=0, pady=10)

def click_btn():
    main_in = text1.get("1.0", END)
    text2.delete("1.0","end")
    text2.insert(END,en2ko(main_in))

def clear():
    text1.delete("1.0",END)
    text2.delete("1.0",END)

함수안의 get은 말그대로 text안의 내용을 그대로 읽어주고, 안의 요소의 뜻은 (1,0)위치 글자부터 끝(END)까지 읽어들인다는 뜻이다.

.delete로 기존 변환되어있던 한타를 지우고, 저번 시간에 만들었던 함수의 결과물을 .insert로 삽입해준다.

 

계속 타이핑을 하고 버튼을 눌러야하는 매우 귀찮은 작업을 생략하기 위해 bind를 사용하였는데, 

tk.bind("<Key>", return_btn)

def return_btn(event):
    main_in = text1.get("1.0", END)
    text2.delete("1.0","end")
    text2.insert(END,en2ko(main_in))

bind의 기능은 클릭, 키보드 입력등을 트리거로 사용하여 함수를 실행 시키는 것이다. 기존의 버튼용 함수와 비슷하지만, event라는 변수가 포함되어야 하므로, 따로 구성하여 연결하였다.

 

이렇게 완성된 전체 코드는 아래와 같고,

def main():
    tk = Tk()
    tk.title('한영 변환기')
    def click_btn():
        main_in = text1.get("1.0", END)
        text2.delete("1.0","end")
        text2.insert(END,en2ko(main_in))

    def return_btn(event):
        main_in = text1.get("1.0", END)
        text2.delete("1.0","end")
        text2.insert(END,en2ko(main_in))
    
    def clear():
        text1.delete("1.0",END)
        text2.delete("1.0",END)
    
    label1 = Label(tk,text='영어\n(입력)').grid(row=0, column=0,padx=10)
    label2 = Label(tk,text='한글\n(변환결과)').grid(row=1,column=0,padx=10)
    label3 = Label(tk,text='Made by j-mook').grid(row=2,column=1,padx=10, sticky='se')

    # 각 단위 입력받는 부분 만들기
    text1 = Text(tk)
    text2 = Text(tk)
    text1.grid(row=0,column=1,padx=5, pady=10, ipadx=20, ipady=0)
    text2.grid(row=1,column=1,padx=5, ipadx=20, ipady=0)


    btn1 = Button(tk,text='한/영 변환',command=click_btn).grid(row=2,column=1, pady=10)
    btn2 = Button(tk,text='초기화',command=clear).grid(row=2,column=0, pady=10)
    tk.bind("<Key>", return_btn)
    tk.mainloop()

tk.mainloop를 통해 마무리 해 주었다.

 

실행 결과, 저번에 만든 알고리즘도 잘 작동하는 것을 확인 할 수있다.

 

- 전체 워크 플로우

 

다음엔 이 프로그램을 실행파일로 만들어 배포 할수 있도록 빌드해 보겠다.

 

GitHub - J-Mook/en2ko