프밍

https://peuming.tistory.com/59

https://peuming.tistory.com/60

서론

오토핫키 스크립트 파일만 가지고 제작을한다면, 사용자입장에서 많은 불편함이 있을 것입니다.

인터페이스 하나로 다음 행동으로 유도할 수 있는 시각적 자료를 제공함으로써 사용자는 더 많이 편리함을 느끼고 사용하는데 문제 없이 사용 가능할 것입니다.  

유저 인터페이스 ( User interfase )를 조금더 쉽게 설명하자면,

컴퓨터의 정보( 데이터 ) 와 사용자의 연결 매게체라고 생각하시면 됩니다. 

흔히, 모바일에서는 어플리케이션 화면, 컴퓨터 응용프로그램에서는 화면에 보여지는 창을 생각하면 되실텐데, 아래와 같은 창 모두 (graphical user interface, GUI) 라고 생각 하시면 됩니다

이와 같이, 사용자가 보는 화면의 창을 생각하시면 됩니다

저희는 이러한 GUI 를 제작할 예정입니다. 

오토핫키는 명백히 위 예시 이미지 처럼 디자인을 쉽고 빠르게 할 수 있는 스크립트 툴이 아닙니다. 

하지만, GUI도 프로그램에 중요한 부분으로써, 이를 간편하게 해결하기위해 skin 라이브러리가 존재하며, 

사용자가 개별로 img 혹은, gdip , brush를 통해 디자인을 할 수 있습니다.

왜 GUI를 만들어야하는가?

• 사용자 편의성: GUI는 사용자에게 직관적인 인터페이스를 제공하여 프로그램을 쉽게 사용할 수 있게 합니다. 복잡한 명령어를 기억할 필요 없이 버튼, 체크박스, 드롭다운 등 다양한 기능을 제공하며 불편함 없이 편하게 작업할 수 있습니다.
• 자동화의 범위 : AutoHotkey를 사용하여 GUI를 만들면, 자동화할 작업의 범위가 넓어집니다. 예를 들어 오늘은 사과를 작업하고 싶고, 내일은 수박을 작업하고 싶을때, 직접 스크립트를 수정하지 않고, 간편하게 사용할 수있도록 합니다.
  
  
• 데이터 입력 및 출력: GUI를 사용하면 데이터 입력과 출력을 더 효율적으로 처리할 수 있습니다. 사용자가 입력해야 하는 데이터나 결과를 보기 좋게 표시할 수 있습니다.
  
  

어떻게 제작하는가?

https://peuming.tistory.com/4

Smart Gui 프로그램을 이용할 예정 입니다.

제 블로그 주소이며, 없으신 분들은 포터블로 다운로드 가능하니, 설치해주시기 바랍니다.

실행파일을 시작하면 처음보는 화면이 나올 것입니다. 

당황하실 필요 없습니다. 

이미지	이름	설명
	Button	동작을 트리거하기 위해 누를 수 있는 푸시 버튼
	CheckBox	켜짐/꺼짐, 예/아니요 등을 나타내기 위해 체크하거나 체크 해제할 수 있는 작은 상자
	Radio	라디오 버튼은 체크(켜기) 또는 체크 해제(끄기)할 수 있는 작은 빈 원입니다.
	Edit	사용자가 자유형 텍스트를 입력할 수 있는 영역입니다.
	Text	사용자가 편집할 수 없는 테두리 없는 텍스트가 포함된 영역
	GroupBox	사용자가 편집할 수 없는 테두리 없는 텍스트가 포함된 영역
	Picture	이미지가 포함된 영역입니다. gif는 ActiveX 를통해 로드
	DropDownList	작은 버튼을 누르면 표시되는 선택 목록
	ComboBox	DropDownList와 동일하지만 목록에서 항목을 선택하는 대신  자유형 텍스트를 입력하는 것도 허용
	ListBox	선택할 수 있는 선택 사항 목록을 포함하는 비교적 높은 상자
	Listview	행과 열의 표 형식 보기를 표시하며, 가장 일반적인 예는 Explorer의 파일 및 폴더 목록 입니다
	DataTime	단일 줄 편집 컨트롤처럼 보이지만 대신 날짜 및/또는 시간을 허용하는 상자
	MonthCal	한 달의 모든 날짜를 달력 형식으로 표시하는 키가 크고 넓은 컨트롤
	Progress	일반적으로 작업 완료를 향해 얼마나 진행되었는지를 나타내는 데  사용되는 2색 막대입니다.
	Slider	사용자가 수직 또는 수평 트랙을 따라 움직일 수 있는 슬라이딩 바. 작업 표시줄 트레이의 표준 볼륨 컨트롤은 슬라이더
	Hotkey	단일 줄 편집 컨트롤처럼 보이지만 대신 사용자가 누른 키보드 조합을 허용하는 상자
	Tab	여러 페이지를 포함하는 큰 컨트롤로,  각 페이지에는 다른 컨트롤을 넣어 관리할 수 있습니다.
	UpDown	사용자가 값을 늘리거나 줄이기 위해 클릭할 수 있는 화살표 버튼 한 쌍
	ChangFont	스마트 구이를 통해 만들어진 GUI에 사용되는 폰트를 설정할 수 있습니다.

GUI 콘트롤 객체를 만드는 방법

드래그 엔 드롭 입니다. 

이름을 변경 하실라면 객체 오른쪽클릭 -> 체인지 라벨 -> 선택해서 변경해주시면 됩니다

( 변경을 굳이 안하시고, 완성후 스크립트에서 수정가능합니다 )

간단하게 GUI 를 만들어봅시다. 

빨간색은, 매크로를 저장하고 불러올 수 있는칸

주황색은, 비활성 값을 보낼 프로세스 선택창, 

현재 GUI는 이미지는 아직없습니다. 

이미지쪽을 다룰때 넣겠습니다

#SingleInstance,Force

title:= "매크로 만들기"
Gui, Add, DropDownList, x12 y9 w160 h20 , DropDownList
Gui, Add, Button, x182 yp w50 h20 , +

Gui, Add, ListView, x12 y69 w220 h260 +grid,no| 내용 | 조작
LV_ModifyCol(1,40) LV_ModifyCol(2,85) LV_ModifyCol(3,80)
LV_SetImageList( DllCall( "ImageList_Create", Int,7, Int,30, Int,0x18, Int,1, Int,1 ), 1 )

Gui, Add, DropDownList, x12 y39 w220 h100, DropDownList

Gui, Add, Button, x12 y339 w70 h20 +Disabled,이름
Gui, Add, Edit, x92 yp w140 h20 ,

Gui, Add, Button, x12 y369 w220 h20 ,저장하기

Gui, Add, Button, x242 y9 w90 h20 +Disabled, 키보드
Gui, Add, DropDownList, x342 y9 w110 h20 , DropDownList
Gui, Add, Button, x462 y9 w30 h20 , +
Gui, Add, Button, x242 y39 w90 h20 +Disabled, 텍스트
Gui, Add, Edit, x342 y39 w110 h20 ,
Gui, Add, Button, x462 y39 w30 h20 , +
Gui, Add, Button, x242 y69 w90 h20 +Disabled, 마우스 [F1]
Gui, Add, Edit, x342 y69 w50 h20 ,
Gui, Add, Edit, x402 y69 w50 h20 ,
Gui, Add, Button, x462 y69 w30 h20 , +

Gui, Add, Button, x242 y369 w250 h20 ,시작하기

Gui, Show, x821 y389 h409 w503,% title
Return

GuiClose:
ExitApp

마치며

이번 강의는, GUI 인터페이스를 왜 만들어야하고, 어떻게 만드는지에 대해 알아보았습니다

천천히 따라와주세요