🔍 옵저버 패턴(Observer Pattern) 완벽 가이드

📖 옵저버 패턴이란?

옵저버 패턴(Observer Pattern)은 객체 간의 일대다 의존성을 정의하는 행동 디자인 패턴입니다. 한 객체의 상태가 변경될 때, 그 객체에 의존하는 모든 객체들이 자동으로 알림을 받고 업데이트되는 구조를 제공합니다.

이 패턴은 발행-구독(Publish-Subscribe) 패턴이라고도 불리며, 느슨한 결합(Loose Coupling)을 통해 객체 간의 상호작용을 효율적으로 관리할 수 있게 해줍니다.

🏗️ 옵저버 패턴의 구조

옵저버 패턴은 다음과 같은 주요 구성요소로 이루어져 있습니다:

🎯 Subject (주제)

• 옵저버들의 목록을 관리
• 옵저버를 추가하거나 제거하는 메서드 제공
• 상태 변경 시 모든 옵저버에게 알림

👁️ Observer (관찰자)

• Subject의 변경사항을 받기 위한 인터페이스 정의
• 업데이트 메서드를 통해 변경사항에 반응

🏢 ConcreteSubject (구체적 주제)

• Subject 인터페이스를 구현
• 실제 상태를 저장하고 변경사항을 옵저버들에게 통지

👤 ConcreteObserver (구체적 관찰자)

• Observer 인터페이스를 구현
• Subject의 상태 변경에 대한 구체적인 반응 정의

💻 Java 예제: 컴퓨터 성능 모니터링 시스템

import java.util.ArrayList;
import java.util.List;

// Observer 인터페이스
interface PerformanceObserver {
    void update(String component, double usage);
}

// Subject 인터페이스
interface PerformanceSubject {
    void addObserver(PerformanceObserver observer);
    void removeObserver(PerformanceObserver observer);
    void notifyObservers();
}

// ConcreteSubject - 컴퓨터 성능 모니터
class ComputerPerformanceMonitor implements PerformanceSubject {
    private List<PerformanceObserver> observers;
    private String currentComponent;
    private double currentUsage;
    
    public ComputerPerformanceMonitor() {
        this.observers = new ArrayList<>();
    }
    
    @Override
    public void addObserver(PerformanceObserver observer) {
        observers.add(observer);
        System.out.println("🔔 새로운 모니터링 시스템이 등록되었습니다.");
    }
    
    @Override
    public void removeObserver(PerformanceObserver observer) {
        observers.remove(observer);
        System.out.println("❌ 모니터링 시스템이 해제되었습니다.");
    }
    
    @Override
    public void notifyObservers() {
        for (PerformanceObserver observer : observers) {
            observer.update(currentComponent, currentUsage);
        }
    }
    
    public void setPerformanceData(String component, double usage) {
        this.currentComponent = component;
        this.currentUsage = usage;
        System.out.println("📊 " + component + " 사용률: " + usage + "%");
        notifyObservers();
    }
}

// ConcreteObserver - CPU 알림 시스템
class CPUAlert implements PerformanceObserver {
    private String name;
    
    public CPUAlert(String name) {
        this.name = name;
    }
    
    @Override
    public void update(String component, double usage) {
        if (component.equals("CPU") && usage > 80.0) {
            System.out.println("🚨 [" + name + "] CPU 사용률 위험! " + usage + "% - 즉시 확인 필요");
        }
    }
}

// ConcreteObserver - 메모리 알림 시스템
class MemoryAlert implements PerformanceObserver {
    private String name;
    
    public MemoryAlert(String name) {
        this.name = name;
    }
    
    @Override
    public void update(String component, double usage) {
        if (component.equals("Memory") && usage > 90.0) {
            System.out.println("⚠️ [" + name + "] 메모리 부족 경고! " + usage + "% - 메모리 정리 권장");
        }
    }
}

// ConcreteObserver - 로그 시스템
class PerformanceLogger implements PerformanceObserver {
    @Override
    public void update(String component, double usage) {
        System.out.println("📝 [로그] " + component + " 사용률 기록: " + usage + "%");
    }
}

// 사용 예제
public class ComputerMonitoringExample {
    public static void main(String[] args) {
        // Subject 생성
        ComputerPerformanceMonitor monitor = new ComputerPerformanceMonitor();
        
        // Observer들 생성 및 등록
        CPUAlert cpuAlert = new CPUAlert("서버실 관리자");
        MemoryAlert memoryAlert = new MemoryAlert("시스템 관리자");
        PerformanceLogger logger = new PerformanceLogger();
        
        monitor.addObserver(cpuAlert);
        monitor.addObserver(memoryAlert);
        monitor.addObserver(logger);
        
        System.out.println("\n=== 컴퓨터 성능 모니터링 시작 ===");
        
        // 성능 데이터 업데이트
        monitor.setPerformanceData("CPU", 45.2);
        System.out.println();
        
        monitor.setPerformanceData("Memory", 67.8);
        System.out.println();
        
        monitor.setPerformanceData("CPU", 85.7); // CPU 경고 발생
        System.out.println();
        
        monitor.setPerformanceData("Memory", 94.3); // 메모리 경고 발생
    }
}

🌊 TypeScript 예제: 바다 생태계 모니터링 시스템

// Observer 인터페이스
interface MarineObserver {
  update(location: string, temperature: number, depth: number): void;
}

// Subject 인터페이스
interface MarineSubject {
  addObserver(observer: MarineObserver): void;
  removeObserver(observer: MarineObserver): void;
  notifyObservers(): void;
}

// ConcreteSubject - 해양 환경 모니터
class OceanEnvironmentMonitor implements MarineSubject {
  private observers: MarineObserver[] = [];
  private currentLocation: string = "";
  private currentTemperature: number = 0;
  private currentDepth: number = 0;

  addObserver(observer: MarineObserver): void {
    this.observers.push(observer);
    console.log("🐠 새로운 해양 관측소가 등록되었습니다.");
  }

  removeObserver(observer: MarineObserver): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
      console.log("🌊 해양 관측소가 해제되었습니다.");
    }
  }

  notifyObservers(): void {
    this.observers.forEach(observer => {
      observer.update(this.currentLocation, this.currentTemperature, this.currentDepth);
    });
  }

  setEnvironmentData(location: string, temperature: number, depth: number): void {
    this.currentLocation = location;
    this.currentTemperature = temperature;
    this.currentDepth = depth;
    
    console.log(`🌊 [${location}] 수온: ${temperature}°C, 수심: ${depth}m`);
    this.notifyObservers();
  }
}

// ConcreteObserver - 해양 생물 보호 센터
class MarineLifeProtectionCenter implements MarineObserver {
  private centerName: string;

  constructor(centerName: string) {
    this.centerName = centerName;
  }

  update(location: string, temperature: number, depth: number): void {
    // 수온이 너무 높거나 낮으면 경고
    if (temperature > 28 || temperature < 10) {
      console.log(`🚨 [${this.centerName}] ${location} 지역 수온 이상! ${temperature}°C - 해양생물 보호 조치 필요`);
    }
    
    // 깊은 바다 생물 서식지 모니터링
    if (depth > 1000) {
      console.log(`🐙 [${this.centerName}] ${location} 심해 생물 서식지 감지 - 수심 ${depth}m`);
    }
  }
}

// ConcreteObserver - 기상청 해양 예보팀
class WeatherMarineForecast implements MarineObserver {
  update(location: string, temperature: number, depth: number): void {
    // 수온 변화에 따른 날씨 예보 업데이트
    if (temperature > 25) {
      console.log(`☀️ [기상청] ${location} 지역 고수온으로 인한 폭풍 가능성 모니터링 중`);
    } else if (temperature < 15) {
      console.log(`❄️ [기상청] ${location} 지역 저수온 - 한류 영향 분석 중`);
    }
  }
}

// ConcreteObserver - 어업 정보 센터
class FishingInformationCenter implements MarineObserver {
  update(location: string, temperature: number, depth: number): void {
    // 어획량 예측을 위한 환경 분석
    if (temperature >= 18 && temperature <= 24 && depth <= 200) {
      console.log(`🎣 [어업정보센터] ${location} 지역 최적 어업 조건 - 수온 ${temperature}°C, 수심 ${depth}m`);
    } else if (depth > 500) {
      console.log(`🦈 [어업정보센터] ${location} 심해어 서식지 - 특수 어업 장비 필요`);
    }
  }
}

// ConcreteObserver - 해양 데이터 로거
class OceanDataLogger implements MarineObserver {
  private logData: Array<{location: string, temperature: number, depth: number, timestamp: Date}> = [];

  update(location: string, temperature: number, depth: number): void {
    const logEntry = {
      location,
      temperature,
      depth,
      timestamp: new Date()
    };
    
    this.logData.push(logEntry);
    console.log(`📊 [데이터로거] 해양 데이터 저장됨 - ${location}: ${temperature}°C, ${depth}m`);
  }

  getRecentLogs(count: number = 5): void {
    console.log(`\n📈 최근 ${count}개 해양 데이터:`);
    this.logData.slice(-count).forEach((log, index) => {
      console.log(`${index + 1}. ${log.location} - ${log.temperature}°C, ${log.depth}m (${log.timestamp.toLocaleTimeString()})`);
    });
  }
}

// 사용 예제
class MarineMonitoringExample {
  static run(): void {
    // Subject 생성
    const oceanMonitor = new OceanEnvironmentMonitor();
    
    // Observer들 생성 및 등록
    const protectionCenter = new MarineLifeProtectionCenter("제주 해양보호센터");
    const weatherForecast = new WeatherMarineForecast();
    const fishingCenter = new FishingInformationCenter();
    const dataLogger = new OceanDataLogger();
    
    oceanMonitor.addObserver(protectionCenter);
    oceanMonitor.addObserver(weatherForecast);
    oceanMonitor.addObserver(fishingCenter);
    oceanMonitor.addObserver(dataLogger);
    
    console.log("\n=== 🌊 해양 환경 모니터링 시작 ===");
    
    // 다양한 해양 환경 데이터 업데이트
    oceanMonitor.setEnvironmentData("제주 근해", 22.5, 150);
    console.log();
    
    oceanMonitor.setEnvironmentData("동해 심해", 8.2, 1200);
    console.log();
    
    oceanMonitor.setEnvironmentData("서해 연안", 29.1, 45);
    console.log();
    
    oceanMonitor.setEnvironmentData("남해 외해", 19.8, 800);
    console.log();
    
    // 데이터 로그 확인
    dataLogger.getRecentLogs();
  }
}

// 실행
MarineMonitoringExample.run();

✅ 옵저버 패턴의 장점

🔄 느슨한 결합 (Loose Coupling)

Subject와 Observer는 서로의 구체적인 구현에 의존하지 않고, 인터페이스를 통해서만 상호작용합니다.

📈 확장성

새로운 Observer를 쉽게 추가할 수 있으며, 기존 코드를 수정하지 않고도 시스템을 확장할 수 있습니다.

🎯 동적 관계 설정

런타임에 Observer를 추가하거나 제거할 수 있어 유연한 시스템 구성이 가능합니다.

📢 일대다 통신

하나의 Subject가 여러 Observer에게 동시에 알림을 보낼 수 있습니다.

❌ 옵저버 패턴의 단점

🐌 성능 오버헤드

Observer가 많을 경우 모든 Observer에게 알림을 보내는 데 시간이 소요됩니다.

🔍 디버깅의 어려움

Observer 체인이 복잡해지면 프로그램의 흐름을 추적하기 어려울 수 있습니다.

💾 메모리 누수 위험

Observer를 제대로 제거하지 않으면 메모리 누수가 발생할 수 있습니다.

🔄 순환 종속성

Observer와 Subject 간에 순환 종속성이 발생할 수 있습니다.

🎯 언제 사용해야 할까?

옵저버 패턴은 다음과 같은 상황에서 유용합니다:

• 📊 모델-뷰 아키텍처: GUI 애플리케이션에서 데이터 변경 시 화면 업데이트
• 🔔 이벤트 시스템: 사용자 액션이나 시스템 이벤트에 대한 반응
• 📈 실시간 모니터링: 시스템 상태나 데이터 변경 추적
• 🔄 상태 동기화: 여러 컴포넌트 간의 상태 일치 필요
• 📢 알림 시스템: 특정 조건 발생 시 여러 대상에게 알림

🚀 실제 활용 사례

1. 💻 웹 개발

• React의 상태 관리: Redux, MobX 등의 상태 관리 라이브러리
• DOM 이벤트: addEventListener를 통한 이벤트 처리
• WebSocket 통신: 실시간 데이터 업데이트

2. 📱 모바일 앱 개발

• 데이터 바인딩: 데이터 변경 시 UI 자동 업데이트
• 푸시 알림: 서버 이벤트에 따른 클라이언트 알림
• 센서 데이터: GPS, 가속도계 등의 센서 데이터 처리

3. 🏢 엔터프라이즈 시스템

• 로깅 시스템: 다양한 로그 대상에 동시 기록
• 모니터링: 시스템 메트릭 변화 감지 및 알림
• 워크플로우: 비즈니스 프로세스 단계별 처리

💡 구현 팁

1. 🔒 Thread Safety

멀티스레드 환경에서는 Observer 목록 접근 시 동기화를 고려해야 합니다.

private final List<Observer> observers = 
    Collections.synchronizedList(new ArrayList<>());

2. 🎯 타입 안전성

제네릭을 활용하여 타입 안전성을 높일 수 있습니다.

interface Observer<T> {
    void update(T data);
}

3. 🗑️ 메모리 관리

WeakReference를 사용하여 메모리 누수를 방지할 수 있습니다.

private final List<WeakReference<Observer>> observers = new ArrayList<>();

🎨 마무리

옵저버 패턴은 객체 간의 느슨한 결합을 통해 유연하고 확장 가능한 시스템을 구축할 수 있게 해주는 강력한 디자인 패턴입니다. 특히 이벤트 기반 프로그래밍과 실시간 시스템에서 그 진가를 발휘합니다.

패턴을 적용할 때는 시스템의 복잡성과 성능을 균형 있게 고려하여, 적절한 상황에서 올바르게 사용하는 것이 중요합니다. 위의 예제들을 참고하여 여러분만의 창의적인 활용 방법을 찾아보시기 바랍니다!

---