JavaFX로 만드는 세련된 데스크탑 계산기 애플리케이션: 기본에서 고급 UI까지

데스크탑 애플리케이션 개발의 전통적 접근 방식은 점점 더 직관적인 UI/UX와 결합되고 있다. 특히 Java를 사용하는 개발자에게 JavaFX는 현대적인 UI를 구축하는 강력한 수단으로 자리잡았다. 본 글에서는 JavaFX를 활용해 숫자 입력과 사칙연산을 수행하는 간단한 계산기 애플리케이션을 구현하고, 기본 기능에서 시각적으로 향상된 디자인까지 다룬다.


JavaFX의 핵심 요소: Scene Graph

JavaFX는 전통적인 Swing보다 훨씬 직관적인 구조인 Scene Graph 모델을 중심으로 구성된다. UI는 트리 형태로 구성된 노드(Node)들의 계층 구조로 정의되며, 각 노드는 화면에 표시되는 하나의 구성 요소(Button, TextField 등)를 의미한다. 이러한 구조 덕분에 각 구성요소 간의 관계, 레이아웃, 이벤트 처리를 명확하게 설계할 수 있다.


기능 요구사항 정의

이 프로젝트의 핵심 목표는 다음과 같다:

  • 두 개의 숫자 입력 필드
  • 덧셈, 뺄셈 기능 버튼
  • 결과를 표시하는 레이블
  • 향상된 UI: 컬러, 폰트, 여백 등 시각적 완성도 고려

기능 자체는 간단하지만, JavaFX를 활용한 구조화된 코드와 FXML을 통한 UI 분리는 실제 프로젝트에서도 매우 중요한 패턴이다.


구조 설계: MVC에 가까운 분리

JavaFX는 FXML을 통해 UI 레이아웃을 XML 기반으로 정의할 수 있고, Controller 클래스는 UI 로직을 담당한다. 이로 인해 시각적인 구조와 기능 코드가 명확하게 분리된다. 본 예제에서는 VBox, HBox, TextField, Button, Label 등을 사용해 사용자 인터페이스를 구성한다.


코드 구성 핵심

FXML 구성 요소

<VBox spacing="20" alignment="CENTER">
    <TextField fx:id="numberField1" promptText="첫 번째 숫자" />
    <TextField fx:id="numberField2" promptText="두 번째 숫자" />
    <HBox spacing="10" alignment="CENTER">
        <Button text="합 계산" onAction="#handleSumButton" />
        <Button text="빼기 계산" onAction="#handleSubtractButton" />
    </HBox>
    <Label fx:id="resultLabel" text="결과가 여기에 표시됩니다." />
</VBox>

Java Controller

@FXML
protected void handleSumButton() {
    int num1 = Integer.parseInt(numberField1.getText());
    int num2 = Integer.parseInt(numberField2.getText());
    resultLabel.setText("합: " + (num1 + num2));
}

@FXML
protected void handleSubtractButton() {
    int num1 = Integer.parseInt(numberField1.getText());
    int num2 = Integer.parseInt(numberField2.getText());
    resultLabel.setText("차: " + (num1 - num2));
}

입력값 검증을 위한 try-catch 처리도 필수적이다. 특히 TextField에서 NumberFormatException은 흔한 예외이므로 사용자 메시지로 친절하게 피드백을 주는 UI도 중요하다.


스타일링과 디자인 고도화

JavaFX의 강점 중 하나는 CSS 기반 스타일링이다. 간단한 XML에 스타일 속성을 추가하거나 외부 CSS 파일을 연결하면 UI를 웹 애플리케이션처럼 디자인할 수 있다. 예를 들어 다음과 같은 속성은 버튼을 모던하게 꾸며준다:

-fx-background-color: #4CAF50;
-fx-text-fill: white;
-fx-font-weight: bold;
-fx-background-radius: 10;

또한, StackPane을 사용해 전체 배경에 그라데이션 효과를 주면 더욱 시각적인 깊이를 줄 수 있다. linear-gradient 속성을 통해 시각적으로 세련된 결과를 만들 수 있으며, 이는 브랜딩이 중요한 어플리케이션에서 특히 강력한 요소로 작용한다.


실행 환경과 빌드 전략

JavaFX는 Java 11 이후 JDK에서 분리되었기 때문에, Maven과 같은 빌드 도구를 활용한 의존성 관리가 권장된다. 본 프로젝트에서는 OpenJFX 19 라이브러리를 Maven으로 가져와 모듈 시스템과의 충돌 없이 손쉽게 실행할 수 있도록 구성했다. javafx-maven-plugin을 사용하면 mvn clean javafx:run으로 바로 실행 가능하다.


결론

본 프로젝트는 JavaFX의 기본적인 사용법을 넘어서 시각적으로 완성도 있는 데스크탑 애플리케이션의 구현 예시를 보여준다. UI와 로직의 분리, FXML과 CSS의 조합, 모던한 디자인과 사용자 피드백 처리까지 고려된 이 구조는 확장성과 유지보수성 측면에서도 이상적이다.

JavaFX는 단순한 학습용 도구를 넘어서, 실전 환경에서도 충분히 활용할 수 있는 강력한 프레임워크다. 제대로 활용한다면, 데스크탑 애플리케이션도 웹 못지않게 매력적인 사용자 경험을 제공할 수 있다.

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다