한양과기고 에듀테크 수업도구 대시보드

1옵저버 패턴이란?

주체(Subject)의 상태가 바뀔 때, 그 상태를 지켜보는 관찰자(Observer)들에게 자동으로 알림을 보내는 디자인 패턴입니다. Subject는 Observer가 누구인지 몰라도 되고, 그저 "구독자 목록"에 등록된 이들을 순회하며 update()를 호출할 뿐입니다 — 이 일대다(1:N) 의존 관계의 느슨한 결합이 핵심입니다.

Subject (채널)

subscribe() / unsubscribe() / notify()

Observer A
update()

Observer B
update()

Observer C
update()

Subject는 등록된 목록만 알 뿐, 각 Observer의 내부 구현은 모른다

class Subject { observers = []; subscribe(observer) { this.observers.push(observer); } unsubscribe(observer) { this.observers = this.observers.filter(o => o !== observer); } // 상태 변경 시 전체 구독자에게 전파 notify(data) { this.observers.forEach(o => o.update(data)); } }

핵심: 새 Observer가 추가돼도 Subject 코드는 한 줄도 바뀌지 않습니다. 이는 개방-폐쇄 원칙(OCP)의 대표 사례이며, 브라우저의 addEventListener·유튜브 구독·Vue/React의 반응형 상태도 같은 구조입니다.

2직접 해보는 채널 구독 알림

"채널"이 Subject, 아래 구독자 목록이 Observer입니다. 새 영상 업로드 버튼을 누르면 Subject의 notify()가 실행되어 구독 중인 모든 Observer의 update()가 순서대로 호출됩니다. 구독을 해지한 사람에게는 알림이 가지 않는다는 점도 확인해보세요.

한양코딩 채널

구독자 0명에게 알림

// notify() 호출 로그가 여기 표시됩니다

3Push vs Pull, 그리고 실전 사례

알림을 보낼 때 Push 모델은 변경된 데이터를 통째로 넘겨주고(update(data)), Pull 모델은 "바뀌었다"는 신호만 보내고 Observer가 필요한 값을 직접 가져오게 합니다(update() → subject.getState()). Push는 간단하지만 결합도가 살짝 올라가고, Pull은 유연하지만 매번 조회 비용이 듭니다.

실전 사례	Subject	Observer	모델
DOM 이벤트	EventTarget	addEventListener 콜백	Push
유튜브 구독	채널	구독자 알림함	Push
React/Vue 상태	reactive state	렌더 함수	Pull(재조회 후 diff)
Pub/Sub 메시지 큐	Broker(중개자)	Consumer	Push (단, 직접 참조 없음)

Pub/Sub와의 차이: 옵저버 패턴은 Subject가 Observer 목록을 직접 들고 있는 인메모리 구조지만, Pub/Sub(메시지 큐)는 그 사이에 브로커가 끼어 발행자·구독자가 서로의 존재조차 몰라도 되도록 한 단계 더 분리한 형태입니다.