🖼️ 갤러리 만들기 예제로 그래픽 프로그래밍 경험하기

그래픽 프로그래밍 비유

현실 세계	그래픽 프로그래밍 개념	설명
1) 화가	컴포넌트 (Canvas, Panel 등)	스스로 그릴 수 있는 객체
2) 그리는 행위	컴포넌트가 가진 메서드 (paint())	그리기 동작
3) 그림 그리는 도구 (팔레트 등)	Graphics 객체 (Graphics g)	그리기 도구, 매개변수로 전달됨
4) 그려질 대상 (캔버스)	컴포넌트 자신 (this)	그림이 출력될 대상

✅ 체크포인트

• 모든 컴포넌트는 실행 시 스스로를 그림

• 이 작업은 내부적으로 paint(Graphics g)
  또는 paintComponent(Graphics g)에서 처리됨.

• 우리가 ⭐paintComponent()를 오버라이딩⭐하면,
  기본 그림을 “가로채고” 새롭게 그릴 수 있음.

• 이때, Graphics는 붓이자 팔레트이고, 컴포넌트 자신은 그려지는 대상.

Swing에서는 paintComponent() 오버라이딩 권장

Swing에서는 paint()를 직접 오버라이딩하는 건 권장되지 않음
→ paintComponent()만 오버라이딩하라고 공식 문서에도 명시

이유: paint()는 전체를 다 관리하는 메서드라 위험함

//Swing 컴포넌트의 paint() 메서드는 다음 세 가지를 순서대로 호출
protected void paint(Graphics g) {
    paintComponent(g);  // 🔥 본문(배경, 텍스트 등)
    paintBorder(g);     // 테두리
    paintChildren(g);   // 자식 컴포넌트들
}

오버라이딩 시 super.paintComponent(g);호출 후 커스텀 코드 작성하기
(부모 메서드 호출)

---

repaint( )

"컴포넌트 다시 그려줘~(요청)"

그래픽 프로그래밍에서 컴포넌트에 약간의 변화라도 생기면,
기존에 그려진 그림은 무효화되고, 다시 그려져야 함.
이 과정은 개발자가 직접 처리하는 게 아니라,
JVM과 OS(Graphics 시스템)가 자동으로 렌더링을 수행

컴포넌트를 리사이즈하거나 내부 데이터를 변경했을 때:
repaint();를 개발자가 호출하면
시스템은 내부적으로 아래 과정을 자동 수행

🎨 AWT의 그리기 흐름 (깜빡임 있음)

repaint()
↓
update(Graphics g)
↓ (배경 clearRect() 등으로 지움)
paint(Graphics g)
↓
[사용자가 직접 그림]

🖼️ Swing의 그리기 흐름 (이중 버퍼링, 깜빡임 없음)

repaint()
↓
update(Graphics g)
↓ (배경 안 지움 → 오버라이딩으로 바로 paint 호출)
paint(Graphics g)
↓
paintComponent(Graphics g)

• paintComponent(g) ← 🔥 사용자 커스텀 그림 여기에 작성
• paintBorder(g)
• paintChildren(g)
  ↓
  [사용자가 직접 그림]

⚠️ paint()는 절대로 개발자가 직접 호출하면 안 됨!
→ 시스템이 호출해줘야 정해진 흐름대로 동작함

---

Toolkit을 이용한 이미지 로딩 ⭐

Toolkit : 이미지 등의 리소스를 로드할 때, 시스템 환경에 맞게 가져오는 도구 클래스

Toolkit kit = Toolkit.getDefaultToolkit();
Image img = kit.getImage("이미지 경로");

갤러리 예제에서는...이미지 객체를 바로 배열에 넣어버림

Toolkit kit = Toolkit.getDefaultToolkit();
Image[] imgArray = new Image[9];
imgArray[i] = kit.getImage("이미지 경로");

//이 중간변수 생략한 거임
Image img = kit.getImage("경로"); //이미지 객체 만들고
imgArray[i] = img; //이미지 객체를 배열에 넣고

---

윈도우창 닫을 때, 프로세스 종료시키기

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JFrame 창을 닫을 때 프로그램(프로세스)도 함께 종료되도록 설정하는 코드

---

갤러리 만들기

이전/다음 버튼을 누르면 사진이 넘어가고
Label에는 파일명이 나오게 구현해봄!

Gallery 클래스

package gui.graphic;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Gallery extends JFrame implements ActionListener {
	JPanel p_north;
	JButton bt_prev, bt_next;
	FilenameLabel la_title;

	Toolkit kit; //✅ 시스템의 이미지를 개발자 대신 얻어다 주는 객체
	MyCanvas myCanvas;
	//이미지 객체를 모아놓을 배열 준비 (⚠ 크기 명시 필수!)
	Image[] imgArray = new Image[9];

	String[] path = new String[] {
		"animal1.jpg",
		"animal2.jpg",
		"animal3.jpg",
		"animal4.jpg",
		"animal5.jpg",
		"animal6.jpg",
		"animal7.jpg",
		"animal8.jpg",
		"animal9.jpg"
	};

	int index = 0;

	public Gallery() {
		p_north = new JPanel();
		bt_prev = new JButton("이전");
		la_title = new FilenameLabel(path[index]);
		bt_next = new JButton("다음");

		kit = Toolkit.getDefaultToolkit(); //✅ 툴 킷의 인스턴스 얻기
		myCanvas = new MyCanvas();

		p_north.add(bt_prev);
		p_north.add(la_title);
		p_north.add(bt_next);
		p_north.setPreferredSize(new Dimension(600, 50));

		add(p_north, BorderLayout.NORTH);
		add(myCanvas);
        
		//초기 이미지 준비 및 적용
		createImg();
		myCanvas.setImg(imgArray[index]);

		bt_prev.addActionListener(this);
		bt_next.addActionListener(this);

		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setSize(600, 500);
		setVisible(true);
	}
	//✅ 이미지 배열에 이미지 객체 9개를 준비
	public void createImg() {
		for (int i = 0; i < path.length; i++) {
			imgArray[i] = kit.getImage("C:/.../res/geographic/" + path[i]);
		}
	}

	public void showImg(int n) {
		index += n;

		if (index >= imgArray.length) {
			index = 0;
		} else if (index < 0) {
			index = imgArray.length - 1;
		}

		myCanvas.setImg(imgArray[index]);
		myCanvas.repaint(); // "패널을 다시 그려줘~"
		la_title.setText(path[index]);
	}
	//리스너 메서드 오버라이딩
	public void actionPerformed(ActionEvent e) {
		Object obj = e.getSource();

		if (obj == bt_prev) {
			showImg(-1);
		} else if (obj == bt_next) {
			showImg(1);
		}
	}

	public static void main(String[] args) {
		new Gallery();
	}
}

어제 유효성 체크에서는 length( )를 썼던 것 같은데…
오늘 배열의 길이에는 왜 그냥length지?

• length → 배열의 길이를 나타내는 변수(필드)
• length() → 문자열의 길이를 구하는 메서드(함수)

MyCanvas 클래스

package gui.graphic;
import javax.swing.*;
import java.awt.*;

public class MyCanvas extends JPanel {
	Image image; //필요하면 보유하기

	public MyCanvas() {
		setBackground(Color.PINK);
		setPreferredSize(new Dimension(600, 450));
	}
	//✅ 이미지를 넘겨받을 메서드를 선언하자 (setter 주입)
	public void setImg(Image image) {
		this.image = image;
	}

	public void paint(Graphics g) {
		g.drawImage(image, 0, 0, 600, 450, this); //Jpanel 자신을 👀이미지옵저버로 지정
	}
}

👀 ImageObserver

Java에서 이미지를 로딩할 때는 비동기 방식으로 진행되기 때문에,
이미지가 아직 다 로드되지 않은 상태에서 화면에 그려지려 할 수도 있음

👀 ImageObserver : 이미지가 비동기 로딩되는 상황에서도,
완전히 로드되었을 때 자동으로 다시 화면에 표시될 수 있도록 도와주는 감시자 역할

개발자는 이 옵저버 역할을 수행할 객체를 지정해야 하는데,
JPanel은 ImageObserver 인터페이스를 구현하고 있기 때문에
자기 자신(this)을 옵저버로 지정할 수 있다.

<참고>
JPanel, JButton, JLabel, JFrame 등 대부분의 GUI 컴포넌트는 Component 상속 구조에 있기 때문에 전부 ImageObserver 역할을 수행할 수 있다.

Filename 클래스

package gui.graphic;
import javax.swing.JLabel;

public class FilenameLabel extends JLabel {

	public FilenameLabel(String filename) {
		super(filename); //JLabel의 매개변수가 있는 생성자 호출 
       					 //→ 제목 출력 가능
	}
}