[python] GUI programming 소개

 

GUI란 ?

GUI란 그래픽 사용자 인터페이스(Graphical User Interface)의 약자이다.

사용자가 장치에 명령을 내리고 그결과를 받는 데 사용하는 도구이다.

그래픽 사용자 인터페이스라는 의미가 어떤 의미일까, 살펴보도록하자.

 

터미널(Terminal)이란 ?

아주 오랫동안 디스플레이는 컴퓨터의 일부로 취급되지 않았다.

컴퓨터는 매우 큰 상자였고, 수천개의 색깔있는 불꽃이 끊임없이 깜빡이고, 수백개의 스위치가 있었다.

오래전엔 컴퓨터를 제어하려면, 터미널이라는 전문적이고 완전히 분리된 장치가 필요했었다.

터미널은 컴퓨터에 연결해야 했고, 같은 방에 두는 경우는 거의 없었다.

최초는 단색(검정색 배경의 회색/호박색/녹색 점이 표시될 수 있었음)이였으며,

문자 숫자 몇가지 다른 문자 외에는 아무것도 표시할 수없었다.

단색이라는 제한은 그림도, 영화도 볼 수 없는 상황의 색상이 없는 상태를 의미한다.

이러한 장비 제작에 가장 큰 영향을 끼치고 전 세계 산업 표준이 된 두 가지의 고전적 단말기를 살펴보자.

IBN 3270

Digital Equipment Corporation 의 VT100

현재의 시점에서 해당 단말기들을 보게 되면, 단점이 많이 보이게 된다.

마우스, 색상등 모든 것이 없고, 키보드만 존재하는 상태이다.

일부 매우 비싼 단말기들은 화면의 영역을 가르키기 위한. 즉, 마우스같은 광펜이 장착될 수 있었다.

마우스라는 말에 현혹될 필요 없이, 이당시의 광펜은 매우 무겁고, 케이블이 빳빳하고 불편함도 현재와 비교할 수 없다.

 

이렇게 제한된 상황속에서, 컴퓨터와 사용자 간의 상호작용을 어떻게 구성되었는가에 대한 답은

철저히 텍스트로 상호작용을 했다는 것이다.

가장 흔히 사용되는 터미널은 80열의 25줄만 표시가 가능했고,

사용자는 약속된 키 세트를 눌러 입력하고, 답을 얻었다.

사용자의 입장에서 불편함이 있을 수 밖에 없었고, 새로운 것을 원하게 되었다.

더 유연하고 직관적인 GUI가 그 해답이였고, 오늘날애도 널리 사용되고 있다.

https://ko.wikipedia.org/wiki/그래픽_사용자_인터페이스

그래픽 사용자 인터페이스 - 위키백과, 우리 모두의 백과사전

 

시각적 프로그래밍(Visual programming)

GUI 기능을 활용할 수 있는 어플리케이션을 만드는 것을 시각적 프로그래밍이라고도 한다.

애플리케이션의 모양이 기능만큼 중요하다.

단순이 화면에 보이는 것만이 아닌, 상태를 어떻게 사용자가 변경하고, 사용자의 의지대로 사용할 수 있는지도 중요하다.

 

시각적 프로그래밍의 몇가지 중요한 측면을 요약해본다면 다음과 같다.

작동하는 GUI 애플리케이;션은 화면에 표시되는 창들을 생성하여 자신의 존재를 외부화 한다.

일부 환경(ex ) 모바일 기기)에서는 창이 전체화면을 차지할 수 있도록 화면에 한번에 두개 이상의 애플리케이션을 표시할 수 없다.

애플리케이션 창에서는 일반적으로 제목표시줄, 프레임, 아이콘 등의 특정 형식이 있다.

이러한 창의 디자인이나 배치 방식은 운영체제의 특징이 있어, 화면에 표시되는 색상과 모양만으로 Window 인지, Mac 인지 구별이 가능할 것이다.

일부 운영 환경에서는 전체화면을 하나의 애플리케이션에 할당하기 떄문에 창이 단순하거나 없을 수 있다.

다행히도 이러한 부분은 개발자의 작업에 영향을 끼치지 않는다.

---

위젯(widget)

사용자는 마우스를 이용하여 클릭 또는 드래그등 제스처를 사용하여 GUI와 상호작용을 할 수 있다.

(터치스크린의 경우 탭 또는 스와이프 등)

이러한 제스처를 수신하도록 설계된 GUI요소를 컨트롤(Control) 또는 위젯(Widget)이라고 한다.

 

특정 창 안의 위젯 중 하나가 포커스를 소유한다.

이 위젯은 사용자의 동작 일부 또는 전부를 기본적으로 수신한다.

물론 포커스의 소유자가 변경될 수 있는데 이는 일반적으로 Tab 키를 이용하여 변경한다.

예를 들어 스페이스바를 누르면 현재 창의 어떤 위젯의 포커스가 있는지에 따라 다양한 활동이 활성화 될 수 있다.

 

창의 구성 요소를 살펴보자

• 제목 표시 줄 : 창의 제목과 함께 제목 표시 줄 안에는 여러 제어 버튼이 있을 수 있고, 닫기 버튼이 하나 있다.
• 위젯 세트
  • 클릭할 수 없는 요소
    • 아이콘 : 사용자가 문제를 빠르게 식별하는 데 도움이 된다.
    • 레이블 : 창 내부의 텍스트로 창의 목적을 설명한다.
  • 클릭할 수 있는 요소
    • 버튼
      • 예(Y)버튼 주위에 얇은 점선으로 있는 데, 스페이스바를 누르면 긍정으로 인식한다.
      • 아니요(N)버튼은 아직 포커스가 맞춰진 상태가 아니며, tab을 통해 이동이 가능하다.
      • 밑줄친 글자는 단축키를 의미하며  Y/N를 누르면 해당하는 버튼을 누른것으로 인식한다.

이것들은 무엇을 의미할까 ?

개발자들이 이러한 위젯을 제어할 수 있어야한다는 것을 의미한다.

 

아래의 슈도 코드를 살펴 보자.

while True:
  사용자 행동을 기다리는 상태
  if 버튼 yes를 누른다면 :
    yes 이후의 상태
  elif 버튼 no를 누른다면 :
    no 이후의 상태
  elif 마우스로 버튼 yes를 누른다면 :
    yes 이후의 상태
  elif 마우스로 버튼 no를 누른다면 :
    no 이후의 상태
  elif tab키를 누른다면:
    if 포커스 = 'yes':
      yes 이후의 상태
    elif 포커스 = 'no':
      no 이후의 상태

의사코드는 완전한 상태가 아니다. 합리적으로 동작하려면 상당한 개발이 필요할 것이다.

이런 코드는 누구라도 작성하고 싶지 않을 것이다.

다행히도 그럴 필요가 없다.

 

시각적 프로그래밍은 완전히 다른 패러다임을 요구한다.

GUI 애플리케이션을 만드는데 널리 이용되는 이 패러다임은 이벤트 기반 프로그래밍(event-driven programming)이라고 한다.

---

고전적 패러다임(Classical)과 이벤트 기반(event-driven) 패러다임

이벤트 기반 패러다임(Event Driven Paradigm, 이하 EDP)은 어떻게 다른 것일까?

우선, 사용자의 모든 동작을 감지, 등록, 분류하는 것은 프로그래머의 통제 범위를 벗어나게 된다.

이 모든 것을 대신 처리하는 이벤트 컨트롤러(event controller)라는 전담 구성 요소가 있다.

이 구성요소는 자동으로 실행되며 완전히 불투명하다.

시스템을 작동하기 위해 아무것도 할 필요가 없지만, 다른 작업을 해야한다.

 

(마우스클릭과 같은) 특정 이벤트가 발생할 떄 수행할 작업을 이벤트 컨트롤러에게 알려야한다.

이는 이벤트 핸들러라는 특수 함수를 작성하여 수행한다.

이벤트 핸들러는 처리하려는 이벤트에 대해서만 작성한다.

다른 모든 이벤트들은 기본동작을 활성화 한다.

 

물론 이러한 이벤트 핸들러를 구현하는 것으로는 충분하지 않고, 이벤트 컨트롤러에서도 이를 인식하도록 해야한다.

 

예를 들어 DoSomething()이라는 함수가 있다고 가정하고, 사용자가 버튼을 눌렀을때 해당 함수가 호출되어  Do it 이라는 문자를 보여주도록 한다면,

 

이전 방식으로는 이렇게 처리해야한다.

1. 클릭을 발견하고 그 클릭이 버튼 위에서 일어났는지 확인한다.
2. 클릭을 반영하도록 실제로 누른 것과 같은 ui를 보여준다.
3. 함수를 호출한다

이벤트 기반 패러다임은 다르게 처리한다.

1. 이벤트 컨트롤러는 스스로 클릭을 감지한다.
2. 클릭 대상을 그 자체로 식별하고 원하는 기능을 스스로 호출한다.

• 이벤트란 ?

이벤트 매니저가 관리하는 이벤트는 엄청나게 많다.

예를 들어 

• 마우스 버튼을 누르는 것
• 마우스 버튼을 놓는 것 (일반적으로 마우스 클릭은 이 두가지 이벤트로 구성된다.)
• 마우스 커서를 움직이는 것
• 마우스 커서 아래로 무언가를 끌어다 놓는것
• 키를 누르는 것
• 화면을 탭하는 것
• 시간을 추적하는것
• 위젯의 상태 변경 모니터링
• 등등...

 

이후 이제 파이썬에서의 GUI  프로그래밍에 대해 알아보도록 하자.