만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.


State 1 : Hour 버튼의 경우를 예를 들면,


먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.

이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.

2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.

이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.

그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.

최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.


<Hour 버튼 중 ①번에 적용될 인터랙션>


  • Trigger : Tap
  • Action : Set variable
  • Variable Name : keypad_hour (default: empty)
  • Value type : Custom value
  • New Value : "{keypad_hour}".replace("undefined", "") + 1
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : length_hour (default: empty)
  • Value type : Custom value
  • New Value : "{length_hour}".substr(0,2)
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : parseInt("{keypad_hour}")
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : {integer_hour} > 23 ? "00" : {integer_hour}
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "0{integer_hour}".slice(-2)
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.


<Minute 버튼 중 ①번에 적용될 인터랙션>

변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.


{integer_minute} < 60 ? {integer_minute} : "00"


적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.


<텍스트 필드 인터랙션>

시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.


- Hour 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : hour reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 1
  • Delay : 0


- Minute 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : minute reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 2
  • Delay : 0


- reset all time 리셋 버튼 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : all reset State
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Minute
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0


<텍스트 필드 초기화 인터랙션>

첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.


- 인터랙션 1 Hour 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


- 인터랙션 2 : Minute 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0

두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).


프로젝트를 저정하고 미리보기로 확인합니다.

기본기본

한자리 숫자 입력값한자리 숫자 입력값 - 앞에 0 붙임

잘못된 입력값잘못된 입력값 - 00 으로 초기화





블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

전에 포스팅한 "다이얼 패드" 이용하여 텍스트필드에 시간을 넣는 인터페이스를 만들어보려고 합니다.

다이얼 패드에서는 특별히 값에 대한 범위가 적용이 되어 있지 않지만, 시간을 넣기 위해서는 시와 분에 각각 범위가 정해져 있어서 최소값으로 "00:00" 최대값으로 "23:59"가 입력이 되어야 하기 때문에 변수의 설정이 조금 복잡해 집니다.




<인터페이스 제작>

라이브러리의 버튼, 텍스트 필드 등을 사용하여 다음과 같이 인터페이스를 디자인합니다. 키패드는 위치만 선정하고 제작은 나중에 할 것입니다.

  • 스크린 이름 : Setting Time
  • 시 텍스트 필드 : Hour
  • 분 텍스트 필드 : Minute
  • 리셋 버튼 : reset all time


주의할 점으로 텍스트 필드의 속성 중 Placeholder Texts 항목은 반드시 빈 칸으로 설정합니다.



<변수의 생성>

변수는 시, 분 각각 다음과 같이 최소 4개씩이 필요합니다. 메인 메뉴에서 "Variables(X)" 클릭하고 시, 분에 사용될 변수를 생성합니다. 기본적으로 값은 비워 놓고 Evaluate는 체크합니다.


- 시

  • keypad_hour : Text, Evaluate (default: empty) : 탭
  • length_hour : Text, Evaluate (default: empty) : 문자열 자르기
  • integer_hour : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
  • zero_hour : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기


- 분

  • keypad_minute : Text, Evaluate (default: empty) : 탭
  • length_minute : Text, Evaluate (default: empty) : 문자열 자르기
  • integer_minute : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
  • zero_minute : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기



<변수 리셋 스크린 생성>

Setting Time 스크린에서 하단의 "+ NEW SCREEN STATE"를 클릭하여 기본상태인 "State 1"이외에 변수를 리셋하는 상태인 "hour reset State", "minute reset State", "all reset State"를 각각 생성합니다.


State 1을 제외한 각각의 상태에 인터랙션을 추가하여 각각의 변수를 모두 0 으로 초기화 합니다. 다음의 이미지는 hour reset State 의 인터랙션입니다. 나머지 인터랙션도 같은 방법으로 넣습니다.

  • Trigger : State enter
  • Action : Set variable
  • Variable Name : keypad_hour (default: empty)
  • Value type : Custom value
  • New Value : 0
  • Delay : 0

>>>콜백

...

위와 같이 length_hour, integer_hour, zero_hour 값을 0로 설정

...

>>>콜백

  • Action : Change Screen State
  • Screen : Setting Time (스크린 이름)
  • State : State 1
  • Delay : 0


<키패드 제작>

키패드는 Hour 용과 Minute 용이 별도로 있어야 합니다. 그렇기 때문에 반드시 컨테이너로 만들어져야 하고 그 내부에는 두 개의 상태가 있어야 합니다(여기에서는 기본값인 State 1, State 2 로 생성하였습니다).

State 1 : Hour 입력용 키패드State 1 : Hour 입력용 키패드

State 2 : Minute 입력용 키패드State 2 : Minute 입력용 키패드

다음 포스트에는 버튼에 들어갈 인터랙션을 다룹니다.

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

김프의 키보드 단축키를 포토샵에서 사용하는 것처럼 수정하였다면 다음으로는 프로그램의 레이아웃도 포토샵처럼 바꾸면 (상대적으로) 더 편해질 듯 합니다. 


먼저 김프의 레이아웃이 '단일창 모드'로 되어 있는지 확인합니다. 설치했을 때의 기본값은 작업창과 도구창이 별도로 분리되어 있기 때문입니다.

김프 단일창 모드 적용김프 단일창 모드 적용


선택영역을 레이어로 만드는 기능 추가


포토샵에는 있고 김프에는 없는 기능인 "Layer via Cut"을 구현하기 위해 플러그인도 설치합니다. 이 기능은 선택영역을 새로운 레이어로 만들 때 매우 편리하게 사용할 수 있습니다.


먼저 플러그인 홈페이지에서 관련 플러그인을 찾아봅니다.

http://registry.gimp.org/node/26396

김프 플러그인 검색김프 플러그인 검색


플러그인이 검색되면 배포되는 홈페이지에서 파일을 다운로드 받습니다.

http://some-gimp-plugins.com/contents/en/extensions/002/

플러그인 다운로드 페이지플러그인 다운로드 페이지


다운로드 받은 파일의 압축을 풀고, 생성된 파일들을 클립보드에 복사(ctrl+c)한 후 김프 플러그인 폴더(C:\Users\유저이름\.gimp-2.8\plug-ins)에 붙여 넣습니다.

플러그인 폴더에 파일 넣기플러그인 폴더에 파일 넣기


김프가 열려있다면 프로그램을 닫고 다시 실행시킵니다.

레이어 메뉴 하단에 Layer via Copy와 Layer via Cut 기능이 추가된 것을 확인할 수 있습니다.

Layer via Copy & Cut 기능 확인Layer via Copy & Cut 기능 확인


유저 인터페이스 변경


김프는 테마(스킨) 기능를 지원하고 있습니다. 그렇기 때문에 UI 변경을 쉽게 할 수 있습니다. 인터넷 검색을 통해 김프에서 사용할 수 있는 포토샵 인터페이스 테마를 다운로드 받습니다.

http://gnome-look.org/content/show.php/?content=159293

포토샵 아이콘 테마포토샵 아이콘 테마

포토샵 아이콘 테마 적용 모습포토샵 아이콘 테마 적용 모습


다운로드 받은 파일의 압축을 풀고 이 파일들은 김프 설정 폴더(C:\Users\유저이름\.gimp-2.8)에 붙여 넣습니다. 몇몇 설정 파일을 덮어 쓰게 됩니다.

파일 복사 후 김프 설정 폴더에 붙여넣기파일 복사 후 김프 설정 폴더에 붙여넣기


김프가 열려있다면 프로그램을 닫고 다시 실행시킵니다.

테마가 적용되어 도구 아이콘이 변경된 것을 확인할 수 있습니다.

도구 아이콘 변경 확인도구 아이콘 변경 확인


만일 변화가 없다면 상단 메뉴에서 <편집> - <기본설정>을 클릭하고 테마 항목에서 "PsIcons"를 선택 후 [확인] 버튼을 클릭합니다.

테마 설정 창테마 설정 창


테마를 적용한 후 레이아웃을 정리하기 위해 상단 메뉴 중 <창> - <도킹 가능한 대화> 중 사용할 대화 상자를 선택하여 불러옵니다.

각종 대화상자 열기각종 대화상자 열기


불러온 창들은 마우스 드래그&드롭으로 프로그램 창의 좌우측 패널 영역으로 이동시킬 수 있습니다.

대화상자 레이아웃 수정대화상자 레이아웃 수정


또한 각 패널 좌측 상단의 화살표 버튼을 클릭하여 "탭 추가"를 통해 대화 상자를 추가할 수 있습니다.

패널 옵션 버튼으로 탭 추가패널 옵션 버튼으로 탭 추가


이렇게 프로그램의 레이아웃을 수정한 후 이를 고정시키기 위해서 <편집> - <기본 설정>을 열고 "도구 옵션" 항목에서 "마칠 때 도구 옵션 저장(S)"를 체크한 후 [확인]을 클릭합니다.

도구 옵션 저장도구 옵션 저장

김프 레이아웃 정리 완료김프 레이아웃 정리 완료



김프가 포토샵의 기능에 비해 아무래도 한 수 딸리는 것은 어쩔 수 없는 사실입니다. 하지만 활용하기에 따라 포토샵에 못지 않은 활약을 보일 수도 있습니다. 김프 고유의 인터페이스도 나쁘지 않지만 만일 자신이 포토샵 사용법이 더 익숙한 상태에서 김프를 사용해야 한다면 이와 같이 테마 설치와 환경 설정을 통해 프로그램 활용성을 높이는 것도 좋은 방법일 것입니다.

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,