Interfascia 한글 입력 - 1

1. Introduction

 

이 예제는 중급 예제입니다. 참고용으로 올려둡니다.

 

Processing v4.4.6 최신판에서 한국어 한글 텍스트의 입력과 출력을 연습합니다. 입출력에 Interfascia v0.0.6 GUI 라이브러리를 활용합니다. 이 라이브러리는 작고 간단한 사용법이 특징입니다. 이전에는 한글 폰트 지원이 되지 않았으나 v0.0.6 버전부터 한글 입력을 지원합니다.

 

한국어를 포함한 아시아 문자 입출력 지원 요청이 있고 나서 몇 년을 기다린 후, 마침내 이번 버전에서부터 한국어 지원이 됩니다. 아직 약간 불편한 면이 남아 있기는 하지만 그래도 아시아권 언어 지원에 대한 요청을 수고스럽게도 결국은 들어 주셨네요. 라이브러리 제작자님에게 감사드립니다.

 

 

2. Code

 

// 아래 Update 1 코드도 함께 올려두니 비교해보세요. 버튼과 그 처리 부분이 추가되었습니다.

import interfascia.*;

PFont KFont;
GUIController c;
IFTextField textField1;

void setup(){
  String myText1 = "";
  String contentStr1 = "입력은 여기에 : ";

  size(720, 480);

  KFont = createFont("D2Coding-Ver1.3.2-20180524.ttf", 24);   

  textFont(KFont);

  c = new GUIController(this);
  c.getLookAndFeel().setFont(KFont);

   // cf. setFont(loadfont("~~~.vlw", 24, 24))

  IFLabel label1 = new IFLabel("한국어도 되나요? ^.^; Interfascia", 24, 24);
  label1.setSize(24, 24);

  c.add(label1);

  // contentStr1 = "James!";
  // for test.

  textField1 = new IFTextField(myText1, 30, 60, 240, contentStr1);
  c.add(textField1);
}

void draw() {
  background(128);
  textAlign(LEFT, TOP);
  textSize(24);
  text("Hello, James! 한국어 지원됩니다!", 24, 94);
}

 

3. Result

결과는 대략 다음과 같습니다.

 

[ Interfascia v0.0.6 TextField : Korean Input and Output - 001 ]

 

 

4. Notes

Interfascia v0.0.6 버전을 '한글 타자 연습'과 같은 종류의 앱을 만드는데 사용하려면 아직 개선되어야 할 부분이 있습니다. 한국어 입력 부분을 개선하기 위해서라면, 소스 코드가 공개되어 있으니 직접 도전해보세요. 기타 GUI로는 ControlP5, UiBooster 등이 유망해 보입니다.

 

위 예제에 사용된 GUI 컨트롤/컴포넌트들은 다음과 같습니다.

 

1) 맨 윗 줄 "한국어도 되나요..." 부분 : IFLabel() - 한국어 표시는 잘 되나, 텍스트 크기 조절에 약간 문제가 있음.

2) 가운데, "한국어 입력 ..." 부분 : IFTextField() - 한국어 입력은 잘 되나, 한글 자모 입력이 완전히 자연스럽지는 않음.

3) 아래, "Hello, James! ... " 부분 : Processing 내장 함수, Text() - 출력 전용. 폰트 크기 조절 잘 됨.

 

■ 한국어 입출력 지원은 한국어 폰트 파일을 필요로 합니다. 폰트 파일은 메인 ~~.pde 파일의 하위 폴더로 폴더명까지 맞추어 data 폴더에 존재해야 합니다. 폰트 파일은 보통 ~~.ttf, ~~.vlw 등이 사용됩니다. 이 예제에 사용된 폰트는 네이버에서 제작해서 오픈 소스로 공개한 '나눔 고딕' 폰트입니다. 누구나 무료로 사용할 수 있습니다.

 

 

■ 응용 연습 과제

1) 어째서 텍스트 입력은 없는지... 내장 GUI 형태로.

2) 있는데 모르고 있는 것일 수도 있.. ㅡ.ㅡ;

3) 폰트 파일로서 ~~.ttc 파일은 직접 테스트해보세요. 폰트 문제가 포함된 이전 프로세싱 예제를 참고하세요.

 

다음 업데이트 1에서는 버튼을 추가하고 함수를 실행하는 방법을 보여줍니다.

 

 

5. Update 1.

// 버튼 추가.

import interfascia.*;

PFont KFont;
GUIController c;
IFTextField textField1;

IFButton btn1 = new IFButton ("No. 1 Button. 버튼 1", 24, 130, 240, 24);
IFButton btn2 = new IFButton ("No. 2 Button. 버튼 2", 24, 160, 240, 24);

void setup(){
  String myText1 = "";
  String contentStr1 = "입력은 여기에 : ";

  size(720, 480);

  KFont = createFont("D2Coding-Ver1.3.2-20180524.ttf", 24);
  textFont(KFont);

  c = new GUIController(this);
  c.getLookAndFeel().setFont(KFont);

  IFLabel label1 = new IFLabel("한국어도 되나요? ^.^; Interfascia", 24, 24);
  label1.setSize(24, 24);

  c.add(label1);

  // contentStr1 = "James!";
  // for test.

  textField1 = new IFTextField(myText1, 24, 60, 240, contentStr1);
  c.add(textField1);

  GUIController ctrD = new GUIController (this);

  btn1.addActionListener(this);
  btn2.addActionListener(this);

  ctrD.add (btn1);
  ctrD.add (btn2);
}

void draw() {
  background(128);
  textAlign(LEFT, TOP);
  textSize(24);
  text("Hello, James! 한국어 지원됩니다!", 24, 94);
}

void actionPerformed (GUIEvent e) {
  if (e.getSource() == btn1) {
    println("버튼 1 번 클릭됨, Button one was clicked");
    println("Message: " + e.getMessage());
  } else if (e.getSource() == btn2) {
    println("버튼 2 번 클릭됨, Button two was clicked");
    println("Message: " + e.getMessage());
  }
}

 

 

Result ::

 

 

6. Files

 

참고 :

 

프로세싱은 파일을 저장할 때, 자바Java 언어에서 적용되는 규칙이 적용되어 파일명과 폴더명이 일치해야 합니다. 여기서 파일명이란 메인main 파일(=제일 중요한 파일)명을 의미합니다. 어떤 프로젝트나 앱이든 그것을 대표하는 가장 중요한 파일의 이름을 의미합니다. 프로세싱의 경우, 보통은, setup() 함수와 draw() 함수가 포함되어 있는 파일을 뜻한다고 생각하시면 됩니다.

 

위 예제의 경우, UniCode_Ex_002_.pde 파일은 UniCode_Ex_002_ 폴더에 존재해야 하며, 폰트 파일은 UniCode_Ex_002_\data 폴더에 존재해야 합니다. data 폴더 명칭은 변경되면 안 됩니다. 일단은! ^.^;

 

# 프로세싱은 기본적으로 ~~.pde 파일을 저장할 때, 자동으로 프로세싱이 동일한 파일명 ~~  폴더를 만들어주고 저장할 파일을 그 폴더에 저장합니다. 그래도 사용자는 제대로 저장되었는지 파일명과 폴더 위치를 반드시 확인해야 합니다. 이런 확인은 윈도 탐색기를 통해서 하시면 됩니다.

 

UniCode_Ex_002_.pde

0.00MB

 

D2Coding-Ver1.3.2-20180524.ttf

3.99MB

 

UniCode_Ex_003_.zip

19.87MB

 

 

7. Ref.

1) https://interfascia.berg.industries/

2) https://github.com/brendanberg/interfascia

3) https://processing.org/reference/libraries/#gui

 

 

Happy Programming!

^.^;