MVC Pattern에 기반한 GUI 라이브러리 JavaFX

Java GUI Programming 라이브러리에는 AWT, SWT, Swing, JavaFX가 있습니다. 저의 경우, AWT와 Swing으로만 프로그래밍 했었는데요. 아마 해보신 분들이라면, Java의 GUI 프로그래밍이 좀 답답함을 많이 느끼실 것입니다.

제가 GUI Programming으로 처음 접했던 것은 Visual Basic 6.0 이었습니다. 딱딱하고 고정적인 느낌의 UI였지만 분명한 것은 컴포넌트를 이용한 프로그래밍어서 굉장히 쉽다는 점과 더불어 디자인을 그냥 마우스로만 왔다갔다 할 수 있었다는 점이 매우 메리트 있었지요. 그리고, 로직만 코드로 짜면, 프로그램이 금방 개발이 되어 생산성이 매우 좋았던 프로그래밍 언어이기도 했었습니다. 물론 지금도 존재하는 언어지요.

하지만 유일한 단점은 "Windows" 에서만 사용이 가능하다는 점이었습니다. 멀티 플랫폼 소프트웨어를 지원하는 데 매우 큰 한계가 있었지요. 지금도 Windows 프로그램을 개발하는 데는 C#만큼이나 대단한 것이 없을 정도란 말이 사실일 정도입니다.

지금은 Mono라는 프로젝트가 Silverlight에 이어서 C#과 .NET에도 힘을 기울여 Linux와 같은 운영체제에서도 개발은 가능하지만, 그렇게 큰 변화의 조짐은 보이지 못하고 있습니다. 그래서 아직까지는 멀티 플랫폼용으로 만들기 좋은 개발의 언어는 Java가 아닌가 생각합니다.

하지만 Java에서 제공하는 Swing 라이브러리는 너무 느렸고, 오류도 굉장히 심해서 개발자들 사이에서 굉장히 악명이 높기도 하지요.. 그래서 Java로는 거의 GUI 프로그램 개발을 안하다 시피했었는데요.

그런데, Swing이 나온 이후, Java의 GUI 프로그래밍 라이브러리가 또 다시 새로 등장하게 되었는데요. 바로 JavaFX라는 것입니다.

What is JavaFX?

JavaFX는 Java SE(Standard Edition)의 표준 라이브러리인 Swing을 대체하기 위해 만들어졌습니다. Swing을 접하신 분들은 아시겠지만, 그 라이브러리가 매우 무겁고, 느려서 잘 쓰지도 않고, 거의 묵혀두고 있는 라이브러리 중에 하나이기도 하죠. 

그런데, 이 JavaFX는 기존 Swing보다 가볍고, 더욱 더 좋은 것은 그래픽을 지원한다는 점과 Web에서도 호환이 된다는 것입니다. 여기서 그래픽을 지원한다는 것은 그래프, 이미지, 영상, 사운드 등의 멀티미디어를 이야기합니다.

본래 JavaFX는 RIA(Rich Internet Application)의 개발을 위해 만들어진 라이브러리입니다. Java 기반에서 동작하기 때문에 Linux, Windows, OS X 할 것없이 Java를 설치할 수 있는 플랫폼이라면 어디서든지 사용 가능하다는 장점을 지니고 있습니다.

지금 현재 JavaFX는 2.2 버전까지 출시된 상태입니다. 본래 JavaFX는 JavaFX Script라고 하는 별개의 언어를 사용해 개발되었던 라이브러리였지만, 1.0 이후, 2.0에서 부터는 일반 Java 언어로도 개발이 가능합니다. 또,  RIA의 개발을 위해 만들어진 라이브러리이지만, 지금은 HTML5와 jQuery 등 스크립트 언어들이 잘 처리되어 있어서 JavaFX는 거의 그 존재가 잊혀질 정도입니다.

하지만 Java 언어를 이용해 GUI 프로그램을 개발하고자 한다면, Swing 보다는 JavaFX가 낫지 않을까 생각합니다.

MVC Design Pattern

이 포스트에 대한 중심적인 주제는 아니지만, MVC 프로그래밍 패턴을 모르는 분들을 위해서 간단하게 MVC 프로그래밍 패턴에 대해 설명을 하고자 합니다.

프로그래밍에도 디자인 패턴이 존재합니다. 이 디자인 패턴은 소프트웨어의 개발 방법의 일종이기도 한데요. 예를 들자면, 우리가 건축물을 만들거나 어떤 제품을 만들 때, 필요한 것이 바로 설계도입니다. 이 설계도는 여러분들이 무언가를 만들기 전에 미리 구성해놓은 어떤 구상도이기도 하죠.

디자인 패턴 또한 이와 비슷합니다. 어떤 정해진 틀이 미리 구성된 것을 그대로 사용해 프로그램을 개발하는 것입니다.

그럼 MVC 디자인 패턴은 무엇일까요?

MVC는 Model, View, Controller의 약자입니다. View는 사용자가 보는 시각적인 페이지, (웹으로 말하면, HTML 코드), Model은 어떤 데이터를 처리하고자 하는 형태, Controller는 View와 Model이 상호 간의 이벤트나 프로그램을 동작을 하는 로직 코드를 이야기합니다. (웹으로 말하면, PHP, Java 코드)

위 사진은 미국 스탠포드 대학교의 Developing Apps for iOS 강의에 나오는 MVC 패턴 슬라이드의 일부입니다. 간략하게 설명드리자면..

사용자는 맨 처음 프로그램을 실행할 때, 어떤 View를 보게 됩니다. 그럼 해당 View에서 어떤 버튼이나 이벤트를 호출할 것입니다. 호출하게 되면 호출된 명령은 Controller에게 전달이 되고, Controller는 Model을 통해서 결과물을 가져오고, 그 결과물을 바탕으로 View를 제어해서 최종적으로 사용자에게 결과물을 View에 보여주는 방식의 디자인 패턴입니다.

MVC 패턴에 기반한 JavaFX

JavaFX는 Swing과 달리 View와 Controller가 분리될 수 있습니다. 이와 비슷한 예로, Spring과 Android Application이 있죠. Android Application을 예로 들자면, Android Application은 Java 코드로 Controller를, XML 언어로 View를 구성하는 것처럼 말이죠.

JavaFX도 이처럼 View와 Controller가 분리된 형태로 존재합니다. 이 라이브러리는 View로 FXML이라고 하는 마크업 언어를 사용하는데, 이 언어는 위젯(컴포넌트)의 배치를 직관적으로 표현해주기 위한 언어이고, Scene Builder라고 하는 개발 도구를 이용해 마우스로 조작해 배치를 쉽게 할 수 있다는 장점을 지니고 있습니다.

위 사진은 Scene Builder를 실행한 모습입니다. 

FXML은 XML과 유사한 마크업 언어인데, 사용하는 방법은 XML과 별반 차이가 없습니다. 그러므로 안드로이드 애플리케이션을 개발해보신 분들이라면, 아마 쉽게 접하실 수 있을 거라 생각합니다.

JavaFX 설치와 개발 도구

기본적으로 JavaFX는 JDK-SE-1.7 버전 이상을 설치하면 같이 설치가 됩니다만, Linux 운영체제에서는 별도의 패키지를 설치해야 합니다.

$ sudo apt install openjfx

Ubuntu, Debian 운영체제에서 JavaFX를 사용하시려면 위 명령어를 이용해서, openjfx 패키지를 설치하셔야 됩니다.

JavaFX를 개발할 수 있는 도구를 대표적인 몇 개만 선출해봤습니다.

- IntelliJ IDEA

- NetBeans

- eFXclipse

저는 개인적으로 IntelliJ IDEA를 Java 개발 프로그램으로 사용하고 있기 때문에, JavaFX Application도 IntelliJ IDEA에서 개발하고 있습니다. 아직 학생 신분이라서, 마음껏 Ultimate을 사용하고 있는 것도 있지만 무료 개발 도구인 NetBeans를 써보니. 역시 IntelliJ를 쓰다가 오기에는 뭔가 불편하다는 점이 많았습니다. ^^;

간단한 JavaFX Application 예제

그럼 IntelliJ IDEA를 이용해서 간단한 JavaFX Application을 만들어보도록 하겠습니다.

IntelliJ IDEA에서 New Project 메뉴를 선택하면, 위 사진과 같이 JavaFX Application 항목이 나옵니다. 해당 항목을 이용해서 새로운 프로젝트를 만듭니다.

그럼 Main Class가 자동으로 만들어지는데요. 이 Main Class는 JavaFX에서 가장 처음 실행하는 클래스로, 이 클래스에는 반드시 Application 클래스가 상속되어야 하고, start 메소드가 오버라이딩 되어 있어야 합니다. 그리고, Java Application의 메인 함수인 main 함수에 반드시 선언되어 있어야 가장 처음 실행됩니다.

JavaFX에서는 Parent라는 객체를 이용해 FXML 파일을 읽어올 수 있고, Stage 객체를 이용해 View를 띄울 수 있습니다.

FXML 파일에 View를 구성하면, Controller와 상호작용이 되어야 합니다. 이는 FXML에서 fx namespace에 존재하는 controller라는 속성을 통해 상호작용할 수 있습니다.

FXML에서 컴포넌트를 불러오려면, 어노테이션(Annotation)을 이용해 불러오시면 됩니다. 단, 불러오실 때 변수 이름은 FXML의 fx:id와 동일하게 주어야 합니다. 다르게 주면, 불러오지를 못하므로 사용해 반드시 유의.

나머지는 Java 코드와 똑같이 사용하시면 됩니다.

그럼 간단한 예제로 주소록 프로그램을 하나 만들어보도록 하겠습니다.

구성은 위와 같이 MVC 패턴의 구성을 따르도록 하겠습니다. 주소록에는 사람의 정보가 들어가기 때문에, Person이라는 Model을 생성하고, samples.fxml과 Controller.java로 구성해봤습니다.

위 소스 코드는 Model 코드입니다. 사람에 대한 정보가 들어가겠죠? 주소록에는 기본적으로 이름, 전화번호, 이메일 주소가 들어갑니다. 그런데, 저는 외국 형식에 맞춰 First Name, Last Name을 이용해 성과 이름을 별도로 구분 지어서 만들어봤습니다.

View는 FXML 파일로 구성되어 있습니다. 주소록을 저는 TableView를 이용해서 표에 차곡차곡 데이터를 쌓아놓는 형태로 하여, 추가와 삭제만 가능하도록 버튼 2개를 생성하고, 데이터를 입력할 수 있도록 텍스트 상자를 4개로 구성하였습니다.

마지막으로 Controller입니다. 추가 버튼을 클릭하면, 추가되었습니다. 라는 메시지와 함께 내용이 TableView에 추가됩니다. 삭제를 하면, 해당 내용이 삭제됩니다. 다만, 여기에 영구적으로 보관할 수 있는 파일 저장에 대한 코드는 적지 않았습니다.

최종 사용자에게 표시되는 프로그램의 모습입니다.

마치며...

여기까지 JavaFX에 대한 설명과 간단한 예제 프로그램을 개발해봤습니다. 

Java에 대한 개발역량이 있으신 분이라면, 충분히 개발할 수 있는 JavaFX 라이브러리입니다. 몇 번 저도 써봤지만 Swing에 비해서는 몇 배나 좋고, 단점이 있다면, FXML로 코딩하기 위해 사용하는 Scene Builder가 버그가 많이 존재한다는 점입니다.

실제로 Oracle 홈페이지에서 제공하는 Scene Builder가 있습니다. 이 버전의 Scene Builder는 FXCollection 등의 외부 태그를 사용하거나 사용자 클래스를 사용하면 프로그램을 실행할 수 없다는 오류를 뱉어내는 버그가 존재합니다.

그래서 저는 Gluon에서 제공하는 Scene Builder 8 버전을 사용합니다. 아래의 버튼을 클릭하시면 다운로드 페이지로 이동합니다.

Download Scene Builder

그 외 JavaFX에서는 그래프, 3D 등 여러가지 그래픽 요소들이 포함되어 있고, 메모리 누수가 일부 존재하는 편이긴 하지만, Swing 라이브러리에 비하면 속도도 훨씬 빠르고, 좋은 편입니다. 혹시라도 Java GUI Application을 개발하시는 분이라면, 해당 라이브러리를 조심스레 추천해봅니다.

한 가지 더, 기존에 Swing으로 개발하셨던 프로그램도 JavaFX와 완벽하게 호환됩니다. JavaFX에서도 기존의 AWT, SWT, Swing의 라이브러리를 사용할 수 있기 때문에, 느린 속도와 불편한 Swing 라이브러리로 불편함을 겪으시는 개발자 분들이라면, 속히 JavaFX로 갈아타보기를 권합니다.