코딩을 해보자 04 | Ecency

GUI (Graphical User Interface)

용어란건 상당히 중요한데 IT에서는 더더욱 그렇다
한데 불행히도 이해하긴 배로 힘들다
왜냐면 외국어나 번역체로 짬뽕을 시켜놔서이다
척봤을때 알수 있는 애들은 거의 없을 정도로 고대어급의 암호력을 자랑하며
심지어 한글로 봐도 이해할 수 없는 것들 투성이다
하지만 분명하게 굉장한 뜻과 함께 내용마저도 압축되어 있으며
무공수련중 불현듯 그 구결을 깨닫게 되어 내공이 한단계 상승하듯이
그 내용이 굉장히 심오한 경우가 많다
프로그래밍 하는 사람이 내공내공 하며 무협용어 자주 쓰는게
무협의 수련과정하고 내공이며 여러가지 것들이 상당히 닮아 있는게 있어서 그럴것이다

지금 우리가 수련하고 있는건 사실 마공이다..-ㅅ-;;
(미안합니다 사파의 세계로 이끌어서 ㅡ,.ㅡ)
그래도 사공은 아니니 안심하길 바란다

......... 근데 무슨 얘기를 하다가..
아!.. 용어란건 상당히 중요한데 압축형이라서 알아보지도 않고 외우는 경우가 많다
하지만 의외로 풀어보면 굉장히 쉬우며 외울필요 없이 머리에 박히기도 한다
GUI란 그래픽컬 유저 인터페이스의 약자로 UI 는 유저 인터페이스, IU는 여신이다

인터페이스는 생각보다 설명하기 어려운데 해당 기기의 정보를
전달 혹은 조정하기 위한 매개체를 말한다
예를들면 자동차의 핸들과 계기류들도 인터페이스다.
계기류에서 정보를 얻고 핸들로 조종한다. 핸들이 뻑뻑하면 인터페이스가 구린거고
덤으로 핸들이 없으면 매우 난감한 인터페이스가 되는 것이다

과거에는 운영체제도 이런 인터페이스를 썼고 마우스도 없었다
그러다가 좀더 편한걸 추구하게 되었고
인간은 시각의존도가 높으므로 직접적으로 보는 UI가 생겨나게 되었다
그것이 바로 지금 우리가 당연하게 여기는 창, 버튼, 스크롤바 이런 것들이다

지금까지 우리가 만든 프로그램은 유령 같은 존재였다
단축키를 눌러야만 툭튀어나오는..
단축키 모르면 사용도 못한다-ㅅ-;
그러므로 이제 우리도 눈에 보이는 것들을 만들어보자
보통 초보가 착각하는 것이 프로그램에 GUI는
당연히 뚝딱 달려나오는 걸로 아는데 한번 뚝딱이 되는지 안되는지
체험해보자 뚝딱은 커녕 이것도 상당한 노다가란걸 보여주겠다 +ㅠ+

Gui 명령어

Gui에 관련된 명령어는 Gui 이다
참 착한 프로그래밍 문법인거 같다

일단 Gui를 쳐본후
gui 명령어 위에서 F1을 눌러 기능을 확인하자

Gui, sub-command [, Param2, Param3, Param4]

라고 나오는데 [ 대괄호의 안의 것들은 생략가능하며 Param 이라는 건
파라메터의 약자다. sub-command 는 세부지시를 위한 옵션이다
서브 명령어가 필요한 명령어들은 단일명령어로는 의미가 애매한 녀석들이다
차타고 가는데 옆자리 사람이 오 핸들~ 그러면 핸들 뭐? 이렇게 된다
핸들이 어쨌다고? 오른쪽으로 돌리라는건지 왼쪽이라는건지, 뽑으라는건지..
마찬가지로 컴파일러한테 오 GUI~ 이러면 컴파일러도 짜증날것이다

그러므로 위의 명령어를 대충 번역하면

Gui(주명령어), 근데 뭘하라고?(보조명령어), 보조명령어의 옵션

이런 뜻이다. 하지만 글자로 백날 설명해봤자다
예시로 보면서 직접 체험해보자

저걸 대충 해석해보면 다음과 같다

Gui(인터페이스창) 에, Add(추가) 하라, Text(글자)를, (빈곳), 글자
Gui 에, Add, Edit(입력할 곳)을, 변수
Gui, Show (이제 보여라)

자 그럼 새파일(Ctrl+N) 한후 Ctrl+S 로 저장
아래와 같이 친후 F5로 실행해보자

그럼 드디어 이런 GUI 창이 뜰 것이다

Gui, Add 까지는 이제 잘 알 수 있을것이다
GroupBox는 그룹짓는 영역 (지금은 텅텅 비었지만)
Text는 예상했던데로 글자
Edit는 입력창
Button은 버튼이다
Show는 위에것들을 실시간으로 추가하는 모습을 보여줄 순 없으니까
Show 명령어전까지는 보여주지 않다가 다만들고 난후 보여줄려는 목적이다

이외에도 Picture로 하면 그림추가, 등등 그외 것들은 도움말에 보면 나와있다
물론 각각 또다른 옵션이 필요하다 예를들면 그림추가라면 당연히 무슨 그림인지
알려줘야되지 않겠는가? 이런 인간세상에서 당연히 요구하는 것들을 컴터도 요구한다
그런걸 옵션으로 가르쳐줘야되는 것이다

그런데 간혹 옵션으로 요구하긴 한데 없어도 되는 것이 있다
예를들어 내가 이런 명령어를 만들었다 생각해보자

핸들 , 지시어 [, param1, param2, param3]

이때 파라메터1,2,3 은 차례대로

어디로, 샤우팅하며, 각도

이것을 의미하게 만들었다고 해보자

그럼

핸들, 꺽어라, 오른쪽, 아이유!!,  30

이러면 핸들을 오른쪽으로 30도 꺽으면서 아이유를 외친다
훌륭한 명령어이다
허나 param2 는 굳이 안넣어도 될 것 같기도 하다. 말그대로 옵션인 것이다
굳이 쪽을 까면서 저 명령어를 실행하기 싫으면 그부분을 공백으로 두는 방법이 있다

핸들, 꺽어라, 오른쪽, , 30

이런식으로 말이다. 중요한건 순서를 지켜줘야한다는 것이다
왜? 만들때 저렇게 순서대로 넣으라고 만들어줬으니까
'나이 이름' 이라는 양식에다가 '이름 나이'순으로 적으면 안되잖은가?
그래서 순서를 지키다보니 오른쪽, 30 이런게 아니라 오른쪽,, 30 이런식으로 한칸
비워주는 것이다

GUI 정렬

하지만 현재 뜬 건 좀 이상하다
좌표를 설정하지 않았기때문에 애들이 크기도 맘대로고 버튼의 경우는 처참할 지경이다
그러므로 좌표를 설정하여 배치해줘야한다
좌표의 형식은 다음과 같다

Gui, Add, 컨트롤타입, x10 y10 w100 h100

컨트롤타입바로 뒤에 좌표를 쓰면 되는데
하나의 옵션이므로 각각 쉼표없이 띄워쓰기로 쓴다.
위를 해석하면 (10,10) 좌표에 넓이(width) 100, 높이(height) 100 이란 소리다
이때 (10,10) 좌표는 어디가 원점이냐면 Gui를 품은 윈도우 내부안의 좌측 상단이다

직접 실습해보자

불행히도 GroupBox는 좌표에 보정이 들어간다
그러므로 젤 알아보기 쉬운 Edit 상자로 좌표를 알아보자
GroupBox와 Text는 현재 불필요하다
하지만 조금후에 다시 쓸 것이다 이럴땐 지우지말고 주석처리 해버리자
맨앞에 ;를 달아버리면 된다

설명할때도 편하지만 잠시 코드의 일부부만 테스트할때 매우 편리하다