🛠️ 개발 환경 설정하기

자, 이제 본격적으로 JavaFX 개발을 시작해볼까? 먼저 개발 환경을 세팅해야 하는데, 생각보다 간단해! 차근차근 따라오면 금방 준비할 수 있어. ☕

--module-path "JavaFX SDK 경로/lib" --add-modules javafx.controls,javafx.fxml

🎯 첫 번째 JavaFX 애플리케이션 만들기

자, 이제 환경 설정도 끝났으니 본격적으로 첫 번째 애플리케이션을 만들어볼까? 전통적인 "Hello World"부터 시작해보자! 👋

📝 기본 구조 이해하기

JavaFX 애플리케이션은 크게 세 가지 핵심 개념으로 구성돼:

1. Stage (무대) 🎭
Stage는 말 그대로 무대야. 윈도우 창 자체를 의미하지. 하나의 애플리케이션에 여러 개의 Stage를 가질 수 있어. 메인 윈도우, 팝업 창, 다이얼로그 등이 모두 각각의 Stage야.

2. Scene (장면) 🎬
Scene은 Stage 위에 올라가는 컨텐츠 컨테이너야. 하나의 Stage는 한 번에 하나의 Scene만 보여줄 수 있어. 화면 전환이 필요하면 Scene을 교체하는 방식으로 구현하지.

3. Node (노드) 🌳
Node는 Scene 안에 배치되는 모든 UI 요소들을 말해. 버튼, 텍스트, 이미지, 레이아웃 등 모든 것이 Node야. Node들은 트리 구조로 구성되는데, 이를 Scene Graph라고 불러.

💻 Hello World 코드 작성

이제 실제 코드를 작성해볼게. 아래 코드는 가장 기본적인 JavaFX 애플리케이션이야:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HelloJavaFX extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        // Label 생성 (텍스트 표시용)
        Label label = new Label("안녕하세요! JavaFX 세계에 오신 것을 환영합니다! 🎉");
        label.setStyle("-fx-font-size: 18px; -fx-text-fill: #667eea;");
        
        // StackPane 레이아웃 생성
        StackPane root = new StackPane();
        root.getChildren().add(label);
        
        // Scene 생성 (너비 500, 높이 300)
        Scene scene = new Scene(root, 500, 300);
        
        // Stage 설정
        primaryStage.setTitle("나의 첫 JavaFX 앱");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

코드를 하나씩 뜯어볼까? 😊

Application 클래스 상속: 모든 JavaFX 애플리케이션은 Application 클래스를 상속받아야 해. 이게 JavaFX의 시작점이야.

start() 메서드: 이 메서드가 애플리케이션의 진입점이야. 여기서 UI를 구성하고 Stage를 설정하지. primaryStage는 JavaFX가 자동으로 생성해주는 메인 윈도우야.

Label과 StackPane: Label은 텍스트를 표시하는 컨트롤이고, StackPane은 자식 요소들을 중앙에 쌓아서 배치하는 레이아웃이야. 간단한 UI에 딱이지!

CSS 스타일링: setStyle() 메서드로 CSS 스타일을 직접 적용할 수 있어. 웹 개발 경험이 있다면 정말 익숙하게 느껴질 거야.

launch() 메서드: main 메서드에서 호출하는 이 메서드가 JavaFX 런타임을 초기화하고 start() 메서드를 실행시켜줘.

🎨 레이아웃 마스터하기

UI를 만들 때 가장 중요한 게 뭘까? 바로 레이아웃이야! JavaFX는 다양한 레이아웃 컨테이너를 제공하는데, 각각의 특징을 잘 이해하고 상황에 맞게 사용하는 게 중요해. 마치 레고 블록을 조립하듯이 레이아웃을 조합하면 복잡한 UI도 쉽게 만들 수 있어! 🧩

📦 주요 레이아웃 컨테이너

🏗️ BorderPane 실전 활용

실무에서 가장 많이 사용하는 레이아웃 중 하나가 BorderPane이야. 전형적인 애플리케이션 구조를 만들기에 완벽하거든! 예제를 통해 알아보자:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class BorderPaneExample extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        BorderPane root = new BorderPane();
        
        // 상단 메뉴바
        MenuBar menuBar = new MenuBar();
        Menu fileMenu = new Menu("파일");
        Menu editMenu = new Menu("편집");
        Menu helpMenu = new Menu("도움말");
        
        MenuItem newItem = new MenuItem("새로 만들기");
        MenuItem openItem = new MenuItem("열기");
        MenuItem saveItem = new MenuItem("저장");
        fileMenu.getItems().addAll(newItem, openItem, saveItem);
        
        menuBar.getMenus().addAll(fileMenu, editMenu, helpMenu);
        root.setTop(menuBar);
        
        // 좌측 사이드바
        VBox leftPanel = new VBox(10);
        leftPanel.setPadding(new Insets(15));
        leftPanel.setStyle("-fx-background-color: #f0f0f0;");
        
        Label sidebarTitle = new Label("📁 프로젝트");
        sidebarTitle.setStyle("-fx-font-size: 16px; -fx-font-weight: bold;");
        
        ListView<String> projectList = new ListView<>();
        projectList.getItems().addAll(
            "프로젝트 1",
            "프로젝트 2",
            "프로젝트 3"
        );
        
        leftPanel.getChildren().addAll(sidebarTitle, projectList);
        root.setLeft(leftPanel);
        
        // 중앙 컨텐츠 영역
        VBox centerContent = new VBox(15);
        centerContent.setPadding(new Insets(20));
        
        Label titleLabel = new Label("환영합니다! 👋");
        titleLabel.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
        
        TextArea textArea = new TextArea();
        textArea.setPromptText("여기에 내용을 입력하세요...");
        textArea.setPrefRowCount(10);
        
        centerContent.getChildren().addAll(titleLabel, textArea);
        root.setCenter(centerContent);
        
        // 하단 상태바
        HBox statusBar = new HBox();
        statusBar.setPadding(new Insets(5, 10, 5, 10));
        statusBar.setStyle("-fx-background-color: #e0e0e0;");
        
        Label statusLabel = new Label("준비 완료 ✓");
        statusBar.getChildren().add(statusLabel);
        root.setBottom(statusBar);
        
        Scene scene = new Scene(root, 800, 600);
        primaryStage.setTitle("BorderPane 레이아웃 예제");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

이 코드를 실행하면 전문적인 애플리케이션 레이아웃이 나타날 거야! 상단에 메뉴바, 좌측에 사이드바, 중앙에 메인 컨텐츠, 하단에 상태바가 있는 구조지. 이런 레이아웃은 IDE, 텍스트 에디터, 파일 관리자 등 수많은 애플리케이션에서 사용되는 표준 구조야. 📐

📊 GridPane으로 폼 만들기

사용자 입력을 받는 폼을 만들 때는 GridPane이 최고야! 행과 열을 지정해서 깔끔하게 정렬할 수 있거든:

GridPane grid = new GridPane();
grid.setHgap(10);  // 가로 간격
grid.setVgap(10);  // 세로 간격
grid.setPadding(new Insets(20));

// 라벨과 입력 필드 추가
Label nameLabel = new Label("이름:");
TextField nameField = new TextField();
grid.add(nameLabel, 0, 0);  // 0열, 0행
grid.add(nameField, 1, 0);  // 1열, 0행

Label emailLabel = new Label("이메일:");
TextField emailField = new TextField();
grid.add(emailLabel, 0, 1);
grid.add(emailField, 1, 1);

Label passwordLabel = new Label("비밀번호:");
PasswordField passwordField = new PasswordField();
grid.add(passwordLabel, 0, 2);
grid.add(passwordField, 1, 2);

Button submitButton = new Button("제출");
grid.add(submitButton, 1, 3);

GridPane의 add() 메서드는 (노드, 열, 행) 순서로 인자를 받아. 필요하면 setColumnSpan()이나 setRowSpan()을 사용해서 여러 칸을 차지하게 만들 수도 있어! 🎯

🎮 이벤트 처리와 상호작용

UI를 만들었으면 이제 사용자와 상호작용할 수 있게 만들어야겠지? JavaFX의 이벤트 처리 시스템은 정말 직관적이고 강력해! 버튼 클릭, 마우스 이동, 키보드 입력 등 모든 사용자 액션에 반응할 수 있어. 🎯

🖱️ 기본 이벤트 처리

가장 간단한 이벤트 처리 방법은 람다 표현식을 사용하는 거야. Java 8부터 지원되는 람다 덕분에 코드가 정말 깔끔해졌어:

Button button = new Button("클릭하세요!");

// 람다 표현식으로 이벤트 처리
button.setOnAction(event -> {
    System.out.println("버튼이 클릭되었습니다! 🎉");
    button.setText("클릭됨!");
});

// 마우스 이벤트 처리
button.setOnMouseEntered(event -> {
    button.setStyle("-fx-background-color: #667eea; -fx-text-fill: white;");
});

button.setOnMouseExited(event -> {
    button.setStyle("");  // 기본 스타일로 복원
});

이렇게 간단하게 이벤트를 처리할 수 있어! setOnAction()은 버튼 클릭이나 엔터 키 입력 같은 액션 이벤트를 처리하고, setOnMouseEntered()와 setOnMouseExited()는 마우스 호버 효과를 만들 때 유용해. 😊

⌨️ 키보드 이벤트

키보드 입력을 처리하는 것도 중요해. 특히 텍스트 에디터나 게임 같은 애플리케이션에서는 필수지:

TextField textField = new TextField();

textField.setOnKeyPressed(event -> {
    switch (event.getCode()) {
        case ENTER:
            System.out.println("엔터 키 입력: " + textField.getText());
            break;
        case ESCAPE:
            textField.clear();
            break;
        case CONTROL:
            System.out.println("Ctrl 키 눌림");
            break;
    }
});

// 텍스트 변경 감지
textField.textProperty().addListener((observable, oldValue, newValue) -> {
    System.out.println("텍스트 변경: " + oldValue + " → " + newValue);
});

textProperty().addListener()는 정말 유용한 기능이야. 텍스트가 변경될 때마다 실시간으로 반응할 수 있거든. 검색 기능이나 입력 검증에 완벽하지! 🔍

🎨 실전 예제: 간단한 계산기

이벤트 처리를 활용해서 간단한 계산기를 만들어볼까? 이 예제를 통해 여러 개념을 한 번에 익힐 수 있을 거야:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SimpleCalculator extends Application {
    
    private TextField display;
    private double firstNumber = 0;
    private String operator = "";
    private boolean startNewNumber = true;
    
    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(10);
        root.setPadding(new Insets(15));
        root.setAlignment(Pos.CENTER);
        
        // 디스플레이
        display = new TextField("0");
        display.setEditable(false);
        display.setAlignment(Pos.CENTER_RIGHT);
        display.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
        display.setPrefHeight(60);
        
        // 버튼 그리드
        GridPane buttonGrid = new GridPane();
        buttonGrid.setHgap(5);
        buttonGrid.setVgap(5);
        buttonGrid.setAlignment(Pos.CENTER);
        
        String[][] buttons = {
            {"7", "8", "9", "/"},
            {"4", "5", "6", "*"},
            {"1", "2", "3", "-"},
            {"0", "C", "=", "+"}
        };
        
        for (int row = 0; row < 4; row++) {
            for (int col = 0; col < 4; col++) {
                String buttonText = buttons[row][col];
                Button button = createButton(buttonText);
                buttonGrid.add(button, col, row);
            }
        }
        
        root.getChildren().addAll(display, buttonGrid);
        
        Scene scene = new Scene(root, 300, 400);
        primaryStage.setTitle("간단한 계산기 🧮");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private Button createButton(String text) {
        Button button = new Button(text);
        button.setPrefSize(60, 60);
        button.setStyle("-fx-font-size: 18px; -fx-font-weight: bold;");
        
        button.setOnAction(event -> handleButtonClick(text));
        
        // 연산자 버튼 스타일
        if (text.matches("[+\\-*/=]")) {
            button.setStyle(button.getStyle() + 
                "-fx-background-color: #667eea; -fx-text-fill: white;");
        }
        
        return button;
    }
    
    private void handleButtonClick(String value) {
        if (value.matches("[0-9]")) {
            // 숫자 버튼
            if (startNewNumber) {
                display.setText(value);
                startNewNumber = false;
            } else {
                display.setText(display.getText() + value);
            }
        } else if (value.equals("C")) {
            // 초기화
            display.setText("0");
            firstNumber = 0;
            operator = "";
            startNewNumber = true;
        } else if (value.equals("=")) {
            // 계산 실행
            calculate();
            operator = "";
            startNewNumber = true;
        } else {
            // 연산자
            if (!operator.isEmpty()) {
                calculate();
            }
            firstNumber = Double.parseDouble(display.getText());
            operator = value;
            startNewNumber = true;
        }
    }
    
    private void calculate() {
        double secondNumber = Double.parseDouble(display.getText());
        double result = 0;
        
        switch (operator) {
            case "+":
                result = firstNumber + secondNumber;
                break;
            case "-":
                result = firstNumber - secondNumber;
                break;
            case "*":
                result = firstNumber * secondNumber;
                break;
            case "/":
                if (secondNumber != 0) {
                    result = firstNumber / secondNumber;
                } else {
                    display.setText("오류");
                    return;
                }
                break;
        }
        
        display.setText(String.valueOf(result));
        firstNumber = result;
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

와! 이제 완전히 작동하는 계산기가 완성됐어! 🎉 이 예제에서는 GridPane으로 버튼을 배치하고, 각 버튼에 이벤트 핸들러를 연결했어. 상태 관리를 위해 멤버 변수를 사용했고, 조건문으로 다양한 입력을 처리했지.

이런 식으로 이벤트 처리와 상태 관리를 결합하면 복잡한 상호작용도 구현할 수 있어. 계산기는 간단해 보이지만 실제로는 여러 개념이 들어가 있는 좋은 학습 예제야! 💪

🎭 FXML과 Scene Builder로 UI 디자인하기

지금까지는 Java 코드로 직접 UI를 만들었는데, 사실 더 편한 방법이 있어! 바로 FXML과 Scene Builder를 사용하는 거야. FXML은 XML 기반의 마크업 언어로, UI 구조를 선언적으로 정의할 수 있어. 마치 HTML처럼 말이야! 🌐

📄 FXML이란?

FXML을 사용하면 UI 디자인과 비즈니스 로직을 완전히 분리할 수 있어. 이게 왜 중요하냐면, 디자이너와 개발자가 협업하기 쉬워지고, 코드의 유지보수성도 크게 향상되거든!

간단한 FXML 예제를 볼까?

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>

<VBox xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.MyController"
      spacing="10" alignment="CENTER">
    
    <padding>
        <Insets top="20" right="20" bottom="20" left="20"/>
    </padding>
    
    <Label text="사용자 로그인" style="-fx-font-size: 24px; -fx-font-weight: bold;"/>
    
    <TextField fx:id="usernameField" promptText="사용자 이름"/>
    
    <PasswordField fx:id="passwordField" promptText="비밀번호"/>
    
    <Button text="로그인" onAction="#handleLogin"
            style="-fx-background-color: #667eea; -fx-text-fill: white;"/>
    
</VBox>

보다시피 FXML은 정말 읽기 쉽지? XML 태그로 UI 구조를 표현하고, fx:id로 컨트롤에 ID를 부여해서 Java 코드에서 접근할 수 있어. onAction 속성으로 이벤트 핸들러도 연결할 수 있고! 😊

🎨 Scene Builder 활용하기

Scene Builder는 FXML을 시각적으로 편집할 수 있는 도구야. 드래그 앤 드롭으로 UI를 디자인하면 자동으로 FXML 코드가 생성돼. 정말 편리하지? Gluon 웹사이트에서 무료로 다운로드할 수 있어.

Scene Builder 사용 방법:

1. Scene Builder를 실행하고 새 FXML 파일 생성
2. 왼쪽 Library 패널에서 원하는 컨트롤을 드래그해서 중앙 캔버스에 배치
3. 오른쪽 Properties 패널에서 속성 설정 (크기, 색상, 텍스트 등)
4. Controller 클래스 지정 및 fx:id 설정
5. 이벤트 핸들러 메서드 이름 지정
6. 저장하면 FXML 파일 완성! 🎉

🔗 Controller 클래스 작성

FXML 파일을 만들었으면 이제 Controller 클래스를 작성해야 해. Controller는 FXML에 정의된 UI 요소들과 상호작용하는 Java 클래스야:

package com.example;

import javafx.fxml.FXML;
import javafx.scene.control.TextField;
import javafx.scene.control.PasswordField;
import javafx.scene.control.Alert;

public class MyController {
    
    @FXML
    private TextField usernameField;
    
    @FXML
    private PasswordField passwordField;
    
    @FXML
    private void handleLogin() {
        String username = usernameField.getText();
        String password = passwordField.getText();
        
        if (username.isEmpty() || password.isEmpty()) {
            showAlert("오류", "모든 필드를 입력해주세요!");
            return;
        }
        
        // 실제로는 여기서 인증 로직을 수행
        if (username.equals("admin") && password.equals("1234")) {
            showAlert("성공", "로그인 성공! 환영합니다! 🎉");
        } else {
            showAlert("실패", "사용자 이름 또는 비밀번호가 잘못되었습니다.");
        }
    }
    
    private void showAlert(String title, String message) {
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle(title);
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.showAndWait();
    }
}

@FXML 어노테이션이 핵심이야! 이 어노테이션을 붙이면 FXML 파일의 fx:id와 자동으로 연결돼. 메서드에도 @FXML을 붙이면 FXML의 onAction과 연결되고. 정말 편리하지? 🎯

🚀 FXML 로딩하기

마지막으로 Main 클래스에서 FXML을 로딩하는 코드를 작성해야 해:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        // FXML 파일 로딩
        FXMLLoader loader = new FXMLLoader(getClass().getResource("login.fxml"));
        Parent root = loader.load();
        
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("로그인 화면");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

FXMLLoader가 FXML 파일을 파싱하고 UI를 생성해줘. 정말 간단하지? 이렇게 하면 UI 디자인과 로직이 완전히 분리되어서 코드 관리가 훨씬 쉬워져! 👍

🎨 CSS 스타일링으로 UI 꾸미기

JavaFX의 가장 큰 장점 중 하나가 바로 CSS 지원이야! 웹 개발 경험이 있다면 정말 익숙하게 느껴질 거야. CSS를 활용하면 애플리케이션의 외관을 완전히 바꿀 수 있어. 마치 마법처럼! ✨

🖌️ 인라인 스타일 vs 외부 CSS

스타일을 적용하는 방법은 크게 두 가지야:

1. 인라인 스타일 - Java 코드에서 직접 적용

button.setStyle("-fx-background-color: #667eea; " +
                "-fx-text-fill: white; " +
                "-fx-font-size: 16px; " +
                "-fx-padding: 10px 20px; " +
                "-fx-border-radius: 5px;");

2. 외부 CSS 파일 - 별도의 CSS 파일로 관리

/* styles.css */
.custom-button {
    -fx-background-color: #667eea;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
    -fx-border-radius: 5px;
    -fx-cursor: hand;
}

.custom-button:hover {
    -fx-background-color: #5568d3;
}

.custom-button:pressed {
    -fx-background-color: #4451b8;
}

Java 코드에서 CSS 파일을 로딩하는 방법:

scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
button.getStyleClass().add("custom-button");

외부 CSS 파일을 사용하는 게 훨씬 관리하기 편해! 스타일을 한 곳에서 관리할 수 있고, 재사용도 쉽거든. 🎨

🌈 JavaFX CSS 속성 정리

JavaFX CSS는 웹 CSS와 비슷하지만 속성 이름 앞에 -fx- 접두사가 붙어. 주요 속성들을 정리해볼게:

🎯 실전 스타일링 예제

이제 실제로 멋진 스타일을 만들어볼까? 현대적인 다크 테마 버튼을 만들어보자:

/* modern-dark.css */

/* 전체 배경 */
.root {
    -fx-background-color: #1e1e1e;
}

/* 기본 버튼 스타일 */
.modern-button {
    -fx-background-color: linear-gradient(to bottom, #667eea, #764ba2);
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 12px 24px;
    -fx-background-radius: 8px;
    -fx-cursor: hand;
    -fx-effect: dropshadow(gaussian, rgba(102, 126, 234, 0.4), 10, 0, 0, 4);
}

.modern-button:hover {
    -fx-background-color: linear-gradient(to bottom, #5568d3, #6a3f8f);
    -fx-scale-x: 1.05;
    -fx-scale-y: 1.05;
}

.modern-button:pressed {
    -fx-background-color: linear-gradient(to bottom, #4451b8, #5a3576);
    -fx-translate-y: 2px;
}

/* 텍스트 필드 */
.modern-textfield {
    -fx-background-color: #2d2d2d;
    -fx-text-fill: white;
    -fx-prompt-text-fill: #888888;
    -fx-border-color: #667eea;
    -fx-border-width: 2px;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-padding: 10px;
    -fx-font-size: 14px;
}

.modern-textfield:focused {
    -fx-border-color: #764ba2;
    -fx-effect: dropshadow(gaussian, rgba(118, 75, 162, 0.5), 8, 0, 0, 0);
}

/* 레이블 */
.modern-label {
    -fx-text-fill: #e0e0e0;
    -fx-font-size: 16px;
}

.title-label {
    -fx-text-fill: white;
    -fx-font-size: 28px;
    -fx-font-weight: bold;
}

/* 패널 */
.modern-panel {
    -fx-background-color: #2d2d2d;
    -fx-background-radius: 10px;
    -fx-padding: 20px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 15, 0, 0, 5);
}

이 CSS를 적용하면 정말 세련된 다크 테마 UI가 완성돼! 그라디언트, 그림자 효과, 호버 애니메이션까지 모두 포함되어 있어. 🌟

Java 코드에서 이렇게 사용하면 돼:

scene.getStylesheets().add(getClass().getResource("modern-dark.css").toExternalForm());

Button button = new Button("클릭하세요");
button.getStyleClass().add("modern-button");

TextField textField = new TextField();
textField.getStyleClass().add("modern-textfield");
textField.setPromptText("여기에 입력하세요...");

Label titleLabel = new Label("멋진 애플리케이션");
titleLabel.getStyleClass().addAll("modern-label", "title-label");

📊 차트와 데이터 시각화

데이터를 시각적으로 표현하는 건 정말 중요해! JavaFX는 다양한 차트 컴포넌트를 기본으로 제공해서 데이터 시각화가 정말 쉬워. 대시보드, 분석 도구, 모니터링 앱을 만들 때 필수적이지! 📈

📉 JavaFX 차트 종류

JavaFX가 제공하는 주요 차트들을 살펴볼까:

1. LineChart (선 그래프) 📈
시간에 따른 변화를 보여주기에 완벽해. 주식 차트, 온도 변화, 트래픽 추이 등에 사용돼.

2. BarChart (막대 그래프) 📊
카테고리별 비교에 최적이야. 매출 비교, 설문 결과, 순위 등을 표현할 때 좋아.

3. PieChart (원 그래프) 🥧
전체에서 각 부분이 차지하는 비율을 보여줘. 시장 점유율, 예산 배분 등에 사용돼.

4. AreaChart (영역 차트) 🌊
LineChart와 비슷하지만 선 아래 영역을 채워서 누적 효과를 보여줘.

5. ScatterChart (산점도) ⭐
두 변수 간의 상관관계를 보여주는 데 유용해. 통계 분석에 자주 쓰이지.

💻 LineChart 실전 예제

실시간 데이터를 표시하는 LineChart를 만들어볼까? 예를 들어 CPU 사용률을 모니터링하는 차트를 만들어보자:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

import java.util.Random;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class RealtimeChart extends Application {
    
    private XYChart.Series<Number, Number> series;
    private int timeCounter = 0;
    private Random random = new Random();
    
    @Override
    public void start(Stage primaryStage) {
        // X축 (시간)
        NumberAxis xAxis = new NumberAxis();
        xAxis.setLabel("시간 (초)");
        xAxis.setAutoRanging(true);
        
        // Y축 (CPU 사용률)
        NumberAxis yAxis = new NumberAxis(0, 100, 10);
        yAxis.setLabel("CPU 사용률 (%)");
        
        // LineChart 생성
        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("실시간 CPU 모니터링 💻");
        lineChart.setAnimated(false);  // 실시간 업데이트를 위해 애니메이션 끄기
        lineChart.setCreateSymbols(false);  // 데이터 포인트 심볼 숨기기
        
        // 데이터 시리즈 생성
        series = new XYChart.Series<>();
        series.setName("CPU 사용률");
        lineChart.getData().add(series);
        
        // 스타일 적용
        lineChart.setStyle("-fx-background-color: #2d2d2d;");
        
        StackPane root = new StackPane(lineChart);
        Scene scene = new Scene(root, 800, 500);
        
        primaryStage.setTitle("실시간 차트 예제");
        primaryStage.setScene(scene);
        primaryStage.show();
        
        // 실시간 데이터 업데이트 시작
        startDataUpdate();
    }
    
    private void startDataUpdate() {
        ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);
        
        scheduler.scheduleAtFixedRate(() -> {
            Platform.runLater(() -> {
                // 랜덤 CPU 사용률 생성 (실제로는 시스템 정보를 가져와야 함)
                double cpuUsage = 30 + random.nextDouble() * 40;
                
                // 데이터 추가
                series.getData().add(new XYChart.Data<>(timeCounter, cpuUsage));
                
                // 최대 50개 데이터 포인트만 유지
                if (series.getData().size() > 50) {
                    series.getData().remove(0);
                }
                
                timeCounter++;
            });
        }, 0, 500, TimeUnit.MILLISECONDS);  // 0.5초마다 업데이트
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

와! 이제 실시간으로 업데이트되는 차트가 완성됐어! 🎉

이 예제에서 중요한 포인트들:

Platform.runLater(): UI 업데이트는 반드시 JavaFX Application Thread에서 해야 하기 때문에 이 메서드를 사용했어.

ScheduledExecutorService: 백그라운드에서 주기적으로 데이터를 업데이트하기 위해 사용했어. 실시간 모니터링에 필수적이지!

데이터 제한: 무한정 데이터가 쌓이면 메모리 문제가 생기니까 최대 50개로 제한했어. 오래된 데이터는 자동으로 제거되지.

애니메이션 비활성화: 실시간 업데이트에서는 애니메이션이 오히려 방해가 될 수 있어서 꺼뒀어.

🥧 PieChart 예제

이번엔 PieChart로 간단한 예산 분석 차트를 만들어보자:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BudgetPieChart extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(15);
        root.setPadding(new Insets(20));
        root.setStyle("-fx-background-color: #f5f5f5;");
        
        Label titleLabel = new Label("2024년 예산 분석 💰");
        titleLabel.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
        
        // 데이터 생성
        ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
            new PieChart.Data("개발", 35),
            new PieChart.Data("마케팅", 25),
            new PieChart.Data("운영", 20),
            new PieChart.Data("인사", 15),
            new PieChart.Data("기타", 5)
        );
        
        PieChart pieChart = new PieChart(pieChartData);
        pieChart.setTitle("부서별 예산 배분");
        pieChart.setLegendVisible(true);
        
        // 데이터 레이블에 퍼센트 표시
        pieChartData.forEach(data -> {
            data.nameProperty().bind(
                javafx.beans.binding.Bindings.concat(
                    data.getName(), " (", 
                    String.format("%.1f", data.getPieValue()), "%)"
                )
            );
        });
        
        root.getChildren().addAll(titleLabel, pieChart);
        
        Scene scene = new Scene(root, 600, 500);
        primaryStage.setTitle("PieChart 예제");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

PieChart는 정말 간단하지? 데이터만 넣어주면 자동으로 비율을 계산하고 예쁘게 그려줘. 색상도 자동으로 배정되고! 물론 원하면 커스텀 색상을 지정할 수도 있어. 🎨

🗂️ TableView로 데이터 관리하기

TableView는 JavaFX에서 가장 강력한 컴포넌트 중 하나야! 엑셀처럼 표 형태로 데이터를 보여주고 편집할 수 있어. 데이터베이스 관리 도구, 재고 관리 시스템, 고객 관리 프로그램 등에서 필수적이지. 📋

👤 Person 모델 클래스

먼저 TableView에 표시할 데이터 모델을 만들어야 해. JavaFX는 JavaFX Properties를 사용해서 데이터 바인딩을 지원해:

import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.SimpleIntegerProperty;

public class Person {
    private final SimpleStringProperty name;
    private final SimpleIntegerProperty age;
    private final SimpleStringProperty email;
    
    public Person(String name, int age, String email) {
        this.name = new SimpleStringProperty(name);
        this.age = new SimpleIntegerProperty(age);
        this.email = new SimpleStringProperty(email);
    }
    
    // Getter 메서드
    public String getName() {
        return name.get();
    }
    
    public SimpleStringProperty nameProperty() {
        return name;
    }
    
    public int getAge() {
        return age.get();
    }
    
    public SimpleIntegerProperty ageProperty() {
        return age;
    }
    
    public String getEmail() {
        return email.get();
    }
    
    public SimpleStringProperty emailProperty() {
        return email;
    }
    
    // Setter 메서드
    public void setName(String name) {
        this.name.set(name);
    }
    
    public void setAge(int age) {
        this.age.set(age);
    }
    
    public void setEmail(String email) {
        this.email.set(email);
    }
}

SimpleStringProperty와 SimpleIntegerProperty를 사용하는 게 핵심이야! 이렇게 하면 데이터가 변경될 때 TableView가 자동으로 업데이트돼. 정말 편리하지? 😊

📊 TableView 구현

이제 TableView를 만들어보자. CRUD(Create, Read, Update, Delete) 기능까지 모두 구현해볼게:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import javafx.util.converter.IntegerStringConverter;

public class PersonTableView extends Application {
    
    private TableView<Person> table;
    private ObservableList<Person> data;
    
    @Override
    public void start(Stage primaryStage) {
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(15));
        
        // 상단 타이틀
        Label titleLabel = new Label("👥 사용자 관리 시스템");
        titleLabel.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
        HBox titleBox = new HBox(titleLabel);
        titleBox.setPadding(new Insets(0, 0, 15, 0));
        root.setTop(titleBox);
        
        // TableView 생성
        table = new TableView<>();
        table.setEditable(true);  // 편집 가능하게 설정
        
        // 컬럼 생성
        TableColumn<Person, String> nameCol = new TableColumn<>("이름");
        nameCol.setMinWidth(150);
        nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
        nameCol.setCellFactory(TextFieldTableCell.forTableColumn());
        nameCol.setOnEditCommit(event -> {
            event.getRowValue().setName(event.getNewValue());
        });
        
        TableColumn<Person, Integer> ageCol = new TableColumn<>("나이");
        ageCol.setMinWidth(100);
        ageCol.setCellValueFactory(new PropertyValueFactory<>("age"));
        ageCol.setCellFactory(TextFieldTableCell.forTableColumn(new IntegerStringConverter()));
        ageCol.setOnEditCommit(event -> {
            event.getRowValue().setAge(event.getNewValue());
        });
        
        TableColumn<Person, String> emailCol = new TableColumn<>("이메일");
        emailCol.setMinWidth(200);
        emailCol.setCellValueFactory(new PropertyValueFactory<>("email"));
        emailCol.setCellFactory(TextFieldTableCell.forTableColumn());
        emailCol.setOnEditCommit(event -> {
            event.getRowValue().setEmail(event.getNewValue());
        });
        
        table.getColumns().addAll(nameCol, ageCol, emailCol);
        
        // 샘플 데이터
        data = FXCollections.observableArrayList(
            new Person("김철수", 25, "kim@example.com"),
            new Person("이영희", 30, "lee@example.com"),
            new Person("박민수", 28, "park@example.com")
        );
        table.setItems(data);
        
        root.setCenter(table);
        
        // 하단 버튼들
        HBox buttonBox = new HBox(10);
        buttonBox.setPadding(new Insets(15, 0, 0, 0));
        
        Button addButton = new Button("➕ 추가");
        addButton.setStyle("-fx-background-color: #68d391; -fx-text-fill: white; -fx-font-weight: bold;");
        addButton.setOnAction(event -> showAddDialog());
        
        Button deleteButton = new Button("🗑️ 삭제");
        deleteButton.setStyle("-fx-background-color: #f5576c; -fx-text-fill: white; -fx-font-weight: bold;");
        deleteButton.setOnAction(event -> {
            Person selected = table.getSelectionModel().getSelectedItem();
            if (selected != null) {
                data.remove(selected);
            } else {
                showAlert("알림", "삭제할 항목을 선택해주세요.");
            }
        });
        
        Button refreshButton = new Button("🔄 새로고침");
        refreshButton.setStyle("-fx-background-color: #667eea; -fx-text-fill: white; -fx-font-weight: bold;");
        refreshButton.setOnAction(event -> table.refresh());
        
        buttonBox.getChildren().addAll(addButton, deleteButton, refreshButton);
        root.setBottom(buttonBox);
        
        Scene scene = new Scene(root, 600, 500);
        primaryStage.setTitle("TableView 예제");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private void showAddDialog() {
        Dialog<Person> dialog = new Dialog<>();
        dialog.setTitle("새 사용자 추가");
        dialog.setHeaderText("사용자 정보를 입력하세요");
        
        ButtonType addButtonType = new ButtonType("추가", ButtonBar.ButtonData.OK_DONE);
        dialog.getDialogPane().getButtonTypes().addAll(addButtonType, ButtonType.CANCEL);
        
        GridPane grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(20));
        
        TextField nameField = new TextField();
        nameField.setPromptText("이름");
        TextField ageField = new TextField();
        ageField.setPromptText("나이");
        TextField emailField = new TextField();
        emailField.setPromptText("이메일");
        
        grid.add(new Label("이름:"), 0, 0);
        grid.add(nameField, 1, 0);
        grid.add(new Label("나이:"), 0, 1);
        grid.add(ageField, 1, 1);
        grid.add(new Label("이메일:"), 0, 2);
        grid.add(emailField, 1, 2);
        
        dialog.getDialogPane().setContent(grid);
        
        dialog.setResultConverter(dialogButton -> {
            if (dialogButton == addButtonType) {
                try {
                    return new Person(
                        nameField.getText(),
                        Integer.parseInt(ageField.getText()),
                        emailField.getText()
                    );
                } catch (NumberFormatException e) {
                    showAlert("오류", "나이는 숫자로 입력해주세요.");
                    return null;
                }
            }
            return null;
        });
        
        dialog.showAndWait().ifPresent(person -> {
            if (person != null) {
                data.add(person);
            }
        });
    }
    
    private void showAlert(String title, String message) {
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle(title);
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.showAndWait();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

완전한 CRUD 기능을 가진 TableView가 완성됐어! 🎉

주요 기능들을 살펴보면:

편집 가능한 셀: TextFieldTableCell을 사용해서 더블클릭으로 직접 편집할 수 있어.

PropertyValueFactory: 모델 클래스의 property 메서드와 자동으로 연결돼. "name"을 지정하면 nameProperty()를 찾아서 바인딩해줘.

ObservableList: 데이터가 추가되거나 삭제되면 TableView가 자동으로 업데이트돼. 정말 편리하지?

Dialog: 새 데이터를 추가할 때 다이얼로그를 띄워서 입력받아. 사용자 경험이 훨씬 좋아져!

🎬 애니메이션과 전환 효과

JavaFX의 애니메이션 API는 정말 강력해! 부드러운 전환 효과와 동적인 UI를 쉽게 만들 수 있어. 사용자 경험을 크게 향상시킬 수 있지. 움직임이 있는 UI는 훨씬 생동감 있고 전문적으로 보이거든! ✨

🌊 기본 애니메이션 종류

JavaFX는 다양한 애니메이션 클래스를 제공해:

1. TranslateTransition - 위치 이동
2. RotateTransition - 회전
3. ScaleTransition - 크기 변경
4. FadeTransition - 투명도 변경
5. PathTransition - 경로를 따라 이동
6. Timeline - 커스텀 애니메이션

💫 실전 애니메이션 예제

여러 애니메이션을 조합해서 멋진 효과를 만들어보자:

import javafx.animation.*;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimationDemo extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(30);
        root.setAlignment(Pos.CENTER);
        root.setStyle("-fx-background-color: #2d2d2d;");
        
        // 원 생성
        Circle circle = new Circle(50);
        circle.setFill(Color.web("#667eea"));
        
        // 사각형 생성
        Rectangle rectangle = new Rectangle(100, 100);
        rectangle.setFill(Color.web("#764ba2"));
        
        // 버튼들
        Button fadeButton = new Button("🌟 페이드 효과");
        styleButton(fadeButton);
        fadeButton.setOnAction(event -> playFadeAnimation(circle));
        
        Button rotateButton = new Button("🔄 회전 효과");
        styleButton(rotateButton);
        rotateButton.setOnAction(event -> playRotateAnimation(rectangle));
        
        Button scaleButton = new Button("📏 크기 변경");
        styleButton(scaleButton);
        scaleButton.setOnAction(event -> playScaleAnimation(circle));
        
        Button moveButton = new Button("➡️ 이동 효과");
        styleButton(moveButton);
        moveButton.setOnAction(event -> playMoveAnimation(rectangle));
        
        Button comboButton = new Button("🎭 조합 효과");
        styleButton(comboButton);
        comboButton.setOnAction(event -> playComboAnimation(circle));
        
        StackPane shapePane = new StackPane(circle, rectangle);
        shapePane.setPrefHeight(200);
        
        root.getChildren().addAll(
            shapePane,
            fadeButton,
            rotateButton,
            scaleButton,
            moveButton,
            comboButton
        );
        
        Scene scene = new Scene(root, 600, 600);
        primaryStage.setTitle("JavaFX 애니메이션 데모");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private void styleButton(Button button) {
        button.setStyle(
            "-fx-background-color: #667eea; " +
            "-fx-text-fill: white; " +
            "-fx-font-size: 14px; " +
            "-fx-font-weight: bold; " +
            "-fx-padding: 10px 20px; " +
            "-fx-background-radius: 5px;"
        );
        button.setPrefWidth(200);
    }
    
    // 페이드 애니메이션
    private void playFadeAnimation(Circle circle) {
        FadeTransition fade = new FadeTransition(Duration.seconds(1), circle);
        fade.setFromValue(1.0);
        fade.setToValue(0.1);
        fade.setCycleCount(2);
        fade.setAutoReverse(true);
        fade.play();
    }
    
    // 회전 애니메이션
    private void playRotateAnimation(Rectangle rectangle) {
        RotateTransition rotate = new RotateTransition(Duration.seconds(2), rectangle);
        rotate.setByAngle(360);
        rotate.setCycleCount(1);
        rotate.play();
    }
    
    // 크기 변경 애니메이션
    private void playScaleAnimation(Circle circle) {
        ScaleTransition scale = new ScaleTransition(Duration.seconds(1), circle);
        scale.setFromX(1.0);
        scale.setFromY(1.0);
        scale.setToX(2.0);
        scale.setToY(2.0);
        scale.setCycleCount(2);
        scale.setAutoReverse(true);
        scale.play();
    }
    
    // 이동 애니메이션
    private void playMoveAnimation(Rectangle rectangle) {
        TranslateTransition move = new TranslateTransition(Duration.seconds(1), rectangle);
        move.setFromX(0);
        move.setToX(100);
        move.setCycleCount(2);
        move.setAutoReverse(true);
        move.play();
    }
    
    // 조합 애니메이션
    private void playComboAnimation(Circle circle) {
        // 여러 애니메이션을 동시에 실행
        FadeTransition fade = new FadeTransition(Duration.seconds(2), circle);
        fade.setFromValue(1.0);
        fade.setToValue(0.3);
        
        ScaleTransition scale = new ScaleTransition(Duration.seconds(2), circle);
        scale.setToX(2.0);
        scale.setToY(2.0);
        
        RotateTransition rotate = new RotateTransition(Duration.seconds(2), circle);
        rotate.setByAngle(720);
        
        ParallelTransition parallel = new ParallelTransition(fade, scale, rotate);
        parallel.setCycleCount(1);
        parallel.setAutoReverse(true);
        parallel.play();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

와! 다양한 애니메이션 효과를 한 번에 볼 수 있어! 🎨

ParallelTransition을 사용하면 여러 애니메이션을 동시에 실행할 수 있어. 반대로 SequentialTransition을 사용하면 순차적으로 실행할 수 있지.

setCycleCount()로 반복 횟수를 지정할 수 있고, setAutoReverse(true)를 설정하면 애니메이션이 끝난 후 역방향으로 재생돼. 정말 유용하지? 😊

⏱️ Timeline으로 커스텀 애니메이션

더 복잡한 애니메이션이 필요하다면 Timeline을 사용해. KeyFrame을 사용해서 특정 시점의 상태를 정의할 수 있어:

Timeline timeline = new Timeline(
    new KeyFrame(Duration.ZERO, 
        new KeyValue(circle.translateXProperty(), 0),
        new KeyValue(circle.fillProperty(), Color.BLUE)
    ),
    new KeyFrame(Duration.seconds(1),
        new KeyValue(circle.translateXProperty(), 200),
        new KeyValue(circle.fillProperty(), Color.RED)
    ),
    new KeyFrame(Duration.seconds(2),
        new KeyValue(circle.translateXProperty(), 0),
        new KeyValue(circle.fillProperty(), Color.GREEN)
    )
);

timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();

Timeline은 정말 강력해! 여러 속성을 동시에 애니메이션할 수 있고, 복잡한 타이밍 제어도 가능해. 게임이나 인터랙티브 애플리케이션을 만들 때 필수적이야! 🎮

🔧 실전 프로젝트: 간단한 메모장 앱 만들기

지금까지 배운 내용을 모두 활용해서 실제로 사용할 수 있는 메모장 애플리케이션을 만들어보자! 파일 저장/불러오기, 편집 기능, 검색 기능까지 모두 구현할 거야. 이 프로젝트를 통해 JavaFX의 전체적인 흐름을 이해할 수 있을 거야! 📝

📋 프로젝트 구조

먼저 프로젝트 구조를 설계해보자:

Main.java - 애플리케이션 진입점
NotepadController.java - UI 로직 처리
notepad.fxml - UI 레이아웃
styles.css - 스타일 정의

💻 Main 클래스

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("notepad.fxml"));
        Parent root = loader.load();
        
        Scene scene = new Scene(root, 800, 600);
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
        
        primaryStage.setTitle("JavaFX 메모장 📝");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

🎨 FXML 레이아웃

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
            fx:controller="NotepadController">
    
    <top>
        <VBox>
            <MenuBar>
                <Menu text="파일">
                    <MenuItem text="새 파일" onAction="#handleNew"/>
                    <MenuItem text="열기" onAction="#handleOpen"/>
                    <MenuItem text="저장" onAction="#handleSave"/>
                    <SeparatorMenuItem/>
                    <MenuItem text="종료" onAction="#handleExit"/>
                </Menu>
                <Menu text="편집">
                    <MenuItem text="찾기" onAction="#handleFind"/>
                    <MenuItem text="바꾸기" onAction="#handleReplace"/>
                </Menu>
                <Menu text="도움말">
                    <MenuItem text="정보" onAction="#handleAbout"/>
                </Menu>
            </MenuBar>
            
            <ToolBar>
                <Button text="새 파일" onAction="#handleNew"/>
                <Button text="열기" onAction="#handleOpen"/>
                <Button text="저장" onAction="#handleSave"/>
                <Separator/>
                <Button text="찾기" onAction="#handleFind"/>
            </ToolBar>
        </VBox>
    </top>
    
    <center>
        <TextArea fx:id="textArea" wrapText="true"/>
    </center>
    
    <bottom>
        <HBox styleClass="status-bar">
            <Label fx:id="statusLabel" text="준비"/>
        </HBox>
    </bottom>
    
</BorderPane>

🎮 Controller 클래스

import javafx.fxml.FXML;
import javafx.scene.control.*;
import javafx.stage.FileChooser;
import javafx.stage.Stage;

import java.io.*;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Optional;

public class NotepadController {
    
    @FXML
    private TextArea textArea;
    
    @FXML
    private Label statusLabel;
    
    private File currentFile;
    private boolean isModified = false;
    
    @FXML
    private void initialize() {
        // 텍스트 변경 감지
        textArea.textProperty().addListener((observable, oldValue, newValue) -> {
            isModified = true;
            updateStatus("수정됨");
        });
    }
    
    @FXML
    private void handleNew() {
        if (checkSaveBeforeAction()) {
            textArea.clear();
            currentFile = null;
            isModified = false;
            updateStatus("새 파일");
        }
    }
    
    @FXML
    private void handleOpen() {
        if (!checkSaveBeforeAction()) {
            return;
        }
        
        FileChooser fileChooser = new FileChooser();
        fileChooser.setTitle("파일 열기");
        fileChooser.getExtensionFilters().add(
            new FileChooser.ExtensionFilter("텍스트 파일", "*.txt")
        );
        
        File file = fileChooser.showOpenDialog(getStage());
        if (file != null) {
            try {
                String content = new String(Files.readAllBytes(Paths.get(file.getPath())));
                textArea.setText(content);
                currentFile = file;
                isModified = false;
                updateStatus("파일 열림: " + file.getName());
            } catch (IOException e) {
                showError("파일을 열 수 없습니다: " + e.getMessage());
            }
        }
    }
    
    @FXML
    private void handleSave() {
        if (currentFile == null) {
            handleSaveAs();
        } else {
            saveFile(currentFile);
        }
    }
    
    private void handleSaveAs() {
        FileChooser fileChooser = new FileChooser();
        fileChooser.setTitle("다른 이름으로 저장");
        fileChooser.getExtensionFilters().add(
            new FileChooser.ExtensionFilter("텍스트 파일", "*.txt")
        );
        
        File file = fileChooser.showSaveDialog(getStage());
        if (file != null) {
            saveFile(file);
        }
    }
    
    private void saveFile(File file) {
        try {
            Files.write(Paths.get(file.getPath()), textArea.getText().getBytes());
            currentFile = file;
            isModified = false;
            updateStatus("저장됨: " + file.getName());
        } catch (IOException e) {
            showError("파일을 저장할 수 없습니다: " + e.getMessage());
        }
    }
    
    @FXML
    private void handleFind() {
        TextInputDialog dialog = new TextInputDialog();
        dialog.setTitle("찾기");
        dialog.setHeaderText("검색할 텍스트를 입력하세요");
        dialog.setContentText("찾기:");
        
        Optional<String> result = dialog.showAndWait();
        result.ifPresent(searchText -> {
            String content = textArea.getText();
            int index = content.indexOf(searchText);
            
            if (index >= 0) {
                textArea.selectRange(index, index + searchText.length());
                updateStatus("찾음: " + searchText);
            } else {
                showInfo("'" + searchText + "'를 찾을 수 없습니다.");
            }
        });
    }
    
    @FXML
    private void handleReplace() {
        Dialog<ButtonType> dialog = new Dialog<>();
        dialog.setTitle("바꾸기");
        dialog.setHeaderText("텍스트 바꾸기");
        
        ButtonType replaceButtonType = new ButtonType("바꾸기", ButtonBar.ButtonData.OK_DONE);
        dialog.getDialogPane().getButtonTypes().addAll(replaceButtonType, ButtonType.CANCEL);
        
        GridPane grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);
        
        TextField findField = new TextField();
        findField.setPromptText("찾을 텍스트");
        TextField replaceField = new TextField();
        replaceField.setPromptText("바꿀 텍스트");
        
        grid.add(new Label("찾기:"), 0, 0);
        grid.add(findField, 1, 0);
        grid.add(new Label("바꾸기:"), 0, 1);
        grid.add(replaceField, 1, 1);
        
        dialog.getDialogPane().setContent(grid);
        
        Optional<ButtonType> result = dialog.showAndWait();
        if (result.isPresent() && result.get() == replaceButtonType) {
            String findText = findField.getText();
            String replaceText = replaceField.getText();
            
            if (!findText.isEmpty()) {
                String content = textArea.getText();
                String newContent = content.replace(findText, replaceText);
                textArea.setText(newContent);
                updateStatus("바꾸기 완료");
            }
        }
    }
    
    @FXML
    private void handleAbout() {
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle("정보");
        alert.setHeaderText("JavaFX 메모장");
        alert.setContentText(
            "버전: 1.0\n" +
            "JavaFX를 활용한 간단한 메모장 애플리케이션입니다.\n\n" +
            "재능넷(jaenung.net)에서 더 많은 프로그래밍 지식을 공유하세요! 🚀"
        );
        alert.showAndWait();
    }
    
    @FXML
    private void handleExit() {
        if (checkSaveBeforeAction()) {
            System.exit(0);
        }
    }
    
    private boolean checkSaveBeforeAction() {
        if (isModified) {
            Alert alert = new Alert(Alert.AlertType.CONFIRMATION);
            alert.setTitle("확인");
            alert.setHeaderText("변경사항이 있습니다");
            alert.setContentText("저장하시겠습니까?");
            
            ButtonType saveButton = new ButtonType("저장");
            ButtonType dontSaveButton = new ButtonType("저장 안 함");
            ButtonType cancelButton = new ButtonType("취소", ButtonBar.ButtonData.CANCEL_CLOSE);
            
            alert.getButtonTypes().setAll(saveButton, dontSaveButton, cancelButton);
            
            Optional<ButtonType> result = alert.showAndWait();
            if (result.isPresent()) {
                if (result.get() == saveButton) {
                    handleSave();
                    return true;
                } else if (result.get() == dontSaveButton) {
                    return true;
                } else {
                    return false;
                }
            }
        }
        return true;
    }
    
    private void updateStatus(String message) {
        statusLabel.setText(message);
    }
    
    private void showError(String message) {
        Alert alert = new Alert(Alert.AlertType.ERROR);
        alert.setTitle("오류");
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.showAndWait();
    }
    
    private void showInfo(String message) {
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle("알림");
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.showAndWait();
    }
    
    private Stage getStage() {
        return (Stage) textArea.getScene().getWindow();
    }
}

🎨 CSS 스타일

/* styles.css */

.root {
    -fx-background-color: #ffffff;
}

.text-area {
    -fx-font-family: "Consolas", "Monaco", monospace;
    -fx-font-size: 14px;
}

.status-bar {
    -fx-background-color: #f0f0f0;
    -fx-padding: 5px 10px;
}

.status-bar .label {
    -fx-text-fill: #666666;
    -fx-font-size: 12px;
}

.button {
    -fx-background-color: #667eea;
    -fx-text-fill: white;
    -fx-padding: 5px 15px;
    -fx-background-radius: 3px;
    -fx-cursor: hand;
}

.button:hover {
    -fx-background-color: #5568d3;
}

.menu-bar {
    -fx-background-color: #f8f8f8;
}

완성! 🎉 이제 완전히 작동하는 메모장 애플리케이션이 만들어졌어!

이 프로젝트에서 다룬 주요 개념들:

✅ FXML을 활용한 UI 디자인
✅ Controller 패턴으로 로직 분리
✅ 파일 입출력 (FileChooser, Files API)
✅ 다이얼로그 활용 (Alert, TextInputDialog, Custom Dialog)
✅ 이벤트 처리와 상태 관리
✅ CSS 스타일링

이런 구조로 프로젝트를 만들면 유지보수가 정말 쉬워져. UI와 로직이 분리되어 있어서 각각 독립적으로 수정할 수 있거든! 😊

🚀 배포와 패키징

애플리케이션을 완성했다면 이제 다른 사람들이 사용할 수 있도록 배포해야겠지? JavaFX 애플리케이션을 패키징하는 방법을 알아보자! 🎁

📦 JAR 파일 생성

가장 기본적인 배포 방법은 실행 가능한 JAR 파일을 만드는 거야. IntelliJ IDEA에서는 이렇게 해:

1. File → Project Structure → Artifacts
2. + 버튼 클릭 → JAR → From modules with dependencies
3. Main Class 선택
4. JAR files from libraries 옵션 선택
5. Build → Build Artifacts → Build

그러면 out/artifacts 폴더에 JAR 파일이 생성돼!

🖥️ 네이티브 실행 파일 만들기

JAR 파일은 Java가 설치되어 있어야 실행할 수 있어. 더 편리하게 사용하려면 네이티브 실행 파일(.exe, .app, .deb)을 만드는 게 좋아.

jpackage 도구 사용하기 (JDK 14 이상)

jpackage는 JDK에 포함된 도구로, 플랫폼별 설치 패키지를 만들어줘:

# Windows용 EXE 생성
jpackage --input target/ \
         --name MyApp \
         --main-jar myapp.jar \
         --main-class com.example.Main \
         --type exe \
         --icon icon.ico

# macOS용 DMG 생성
jpackage --input target/ \
         --name MyApp \
         --main-jar myapp.jar \
         --main-class com.example.Main \
         --type dmg \
         --icon icon.icns

# Linux용 DEB 생성
jpackage --input target/ \
         --name MyApp \
         --main-jar myapp.jar \
         --main-class com.example.Main \
         --type deb

이렇게 하면 JRE가 포함된 독립 실행 파일이 만들어져! 사용자는 Java를 따로 설치할 필요가 없어. 정말 편리하지? 🎯

🔧 Maven/Gradle로 빌드 자동화

Maven이나 Gradle을 사용하면 빌드 과정을 자동화할 수 있어. Maven의 경우 pom.xml에 이렇게 설정해:

<build>
    <plugins>
        <plugin>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>0.0.8</version>
            <configuration>
                <mainClass>com.example.Main</mainClass>
            </configuration>
        </plugin>
        
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-shade-plugin</artifactId>
            <version>3.2.4</version>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>shade</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

그리고 mvn clean package 명령어를 실행하면 자동으로 빌드돼! 정말 간편하지? 😊