웹 기반 원격 지원 화면 뷰어 - 기술 소개서 (공개판)

2026.06.01

웹 기반 원격 지원 화면 뷰어 — 기술 소개서 (공개판)

고객이 브라우저만으로 화면을 공유하고, 관리자가 실시간으로 확인하는 WebRTC 기반 원격 지원 시스템

1. 개요

1.1 목표

고객이 별도 프로그램 설치 없이 웹 브라우저에서 화면을 공유하면, 관리자가 PIN 번호만으로 해당 화면을 실시간 확인할 수 있는 기능을 WordPress 웹사이트에 추가한다.

1.2 핵심 원칙

원칙	내용
설치 없음	고객은 브라우저만 열면 됨
간단한 연결	PIN 번호만으로 연결
보기만	원격 조작 없이 화면 관찰만
관리자 인증	관리자 로그인 시에만 시청 가능

1.3 대상 사용자

역할	행동	필요 조건
고객 (화면 공유자)	사이트 접속 → 화면 공유 → PIN 안내	Chrome/Edge/Firefox 브라우저
관리자 (화면 시청자)	사이트 접속 → PIN 입력 → 고객 화면 실시간 확인	관리자 권한 필요

2. 시스템 아키텍처

2.1 전체 구조

graph TB
    subgraph "고객 브라우저"
        C1["🌐 원격지원 페이지"]
        C2["📤 화면 캡처"]
        C3["🎥 WebRTC Video Track"]
        C1 -->|"화면 공유 클릭"| C2
        C2 -->|"MediaStream"| C3
    end


    subgraph "서버"
        subgraph "WordPress"
            WP["WordPress + 원격지원 플러그인"]
        end
        subgraph "Signaling"
            WS["WebSocket Signaling Server"]
            RM["Room Manager"]
        end
    end


    subgraph "관리자 브라우저"
        A1["🌐 원격지원 페이지"]
        A2["📥 WebRTC 수신"]
        A3["🖥️ 화면 실시간 표시"]
        A1 -->|"PIN 입력"| A2
        A2 -->|"Video Track"| A3
    end


    C3 -->|"P2P WebRTC"| A2
    C1 -->|"1. PIN 생성"| WS
    A1 -->|"2. PIN 연결 요청"| WS
    WS -->|"3. 시그널링 교환"| WS
    WS -->|"4. WebRTC 연결 설정"| C3

2.2 기술 스택

계층	기술	이유
프론트엔드	Vanilla JS + WebRTC API	의존성 최소화, 빠른 로딩
WordPress 플러그인	PHP (shortcode)	기존 아키텍처 유지, 재사용성
Signaling 서버	Node.js + WebSocket	경량, 실시간 양방향 통신
P2P 연결	WebRTC	설치 없이 실시간 영상 전송
NAT 통과	STUN + TURN 서버	모든 네트워크 환경에서 연결 보장
인프라	Docker	컨테이너 기반 관리

3. 연결 시퀀스

3.1 전체 흐름

sequenceDiagram
    actor Customer as 고객
    participant PageC as 고객 페이지
    participant Signal as Signaling 서버
    participant PageA as 관리자 페이지
    actor Admin as 관리자


    Note over Customer,Admin: Phase 1 — PIN 생성


    Customer->>PageC: 원격지원 페이지 접속
    PageC->>Customer: "화면 공유 시작" 버튼 표시
    Customer->>PageC: 버튼 클릭
    PageC->>Customer: 브라우저 화면 공유 선택 팝업
    Customer->>PageC: 공유할 화면 선택
    PageC->>Signal: 방 생성 요청
    Signal-->>PageC: PIN 번호 생성
    PageC->>Customer: PIN 번호 표시


    Note over Customer,Admin: Phase 2 — 관리자 연결


    Admin->>PageA: 원격지원 페이지 접속 (로그인 상태)
    PageA->>Admin: PIN 입력 폼 표시
    Admin->>PageA: PIN 입력 + "연결" 클릭
    PageA->>Signal: PIN으로 방 참여 요청


    Note over Customer,Admin: Phase 3 — WebRTC 연결


    Signal-->>PageC: 관리자 입장 알림
    PageC->>Signal: SDP Offer 전송
    Signal->>PageA: SDP Offer 전달
    PageA->>Signal: SDP Answer 전송
    Signal->>PageC: SDP Answer 전달


    Note over Customer,Admin: ICE Candidate 교환 (자동)


    Note over Customer,Admin: Phase 4 — 실시간 화면 시청


    Customer-->>Admin: WebRTC P2P Video Stream
    Admin->>Admin: 고객 화면 실시간 표시

4. 컴포넌트 설계

4.1 WordPress 플러그인 (Shortcode 아키텍처)

graph TD
    subgraph "플러그인 구조"
        MAIN["플러그인 메인"]
        PAGE["독립형 템플릿"]
        SIG["Signaling 서버"]
        ASSETS["정적 리소스"]
    end


    subgraph "Shortcode 모드 (권장)"
        THEME["테마 페이지 템플릿"]
        SC["WebRTC 렌더링"]
        THEME -->|"do_shortcode()"| SC
        MAIN -->|"add_shortcode()"| SC
    end


    subgraph "독립형 모드"
        MAIN -->|"template_include"| PAGE
    end

다른 WordPress 사이트에서 사용법

플러그인 설치 + 활성화
페이지에 shortcode 삽입
관리자 권한 설정 가능 (필터 훅 제공)

4.2 Signaling 서버

graph TD
    subgraph "Signaling 서버"
        WSS["WebSocket Server"]
        RM["RoomManager"]

        WSS -->|"연결"| CONN["연결 핸들러"]
        CONN -->|"방 생성"| RM
        CONN -->|"방 참여"| RM
        CONN -->|"시그널링 릴레이"| RELAY["메시지 릴레이"]

        RM -->|"PIN 생성"| GEN["PIN Generator
랜덤 생성
중복 체크"]
    end

서버 상태 흐름

stateDiagram-v2
    [*] --> Waiting: 방 생성
    Waiting --> Connected: 관리자 입장
    Connected --> Signaling: WebRTC 시그널링 시작
    Signaling --> Streaming: P2P 연결 완료
    Streaming --> Waiting: 관리자 퇴장
    Streaming --> Ended: 고객 퇴장
    Waiting --> Ended: 고객 퇴장
    Waiting --> Ended: 타임아웃
    Ended --> [*]

4.3 프론트엔드 (WebRTC)

graph TD
    subgraph "WebRTC 로직"
        UI["UI Controller"]
        WS["WebSocket Client"]
        RTC["WebRTC Manager"]

        UI -->|"공유 시작"| SCREEN["화면 캡처 API"]
        UI -->|"PIN 입력"| CONNECT["연결 시도"]

        SCREEN -->|"MediaStream"| RTC
        CONNECT -->|"방 참여"| WS

        WS -->|"시그널링"| RTC
        RTC -->|"Video Track"| VIDEO["비디오 엘리먼트"]
    end

5. UI/UX 설계

5.1 고객 화면 (비로그인)

graph TD
    START["고객 접속"] --> VIEW["안내 문구 +
🔵 화면 공유 시작 버튼"]
    VIEW -->|"클릭"| PICK["브라우저 화면 선택 팝업"]
    PICK -->|"화면 선택"| LIVE["📺 화면 공유 중
PIN 표시"]
    PICK -->|"취소"| VIEW
    LIVE -->|"공유 중지"| VIEW

화면 공유 중 UI:

요소	내용
상태	📺 화면 공유 중
PIN	안내 번호 크게 표시
안내	"이 번호를 상담원에게 알려주세요"
버튼	[공유 중지]
하단 안내	ℹ️ 상담원은 화면을 볼 수만 있으며 원격 조작은 하지 않습니다

5.2 관리자 화면 (로그인)

graph TD
    ADMIN["관리자 접속"] --> FORM["PIN 입력 폼"]
    FORM -->|"PIN 입력 + 연결"| CONNECT["WebRTC 연결"]
    CONNECT -->|"연결 성공"| WATCH["🖥️ 고객 화면 실시간 표시"]
    CONNECT -->|"연결 실패"| ERROR["에러 토스트 표시"]
    WATCH -->|"연결 종료"| FORM

6. 보안 설계

6.1 위협 모델과 대응

graph LR
    subgraph "위협"
        T1["무단 시청"]
        T2["PIN 브루트포스"]
        T3["중간자 공격"]
        T4["방 해킹"]
    end

    subgraph "대응"
        D1["관리자 인증 필수"]
        D2["PIN 시도 횟수 제한"]
        D3["TLS 암호화"]
        D4["PIN 1회용 + 만료"]
        D5["방당 관리자 1명"]
    end

    T1 --> D1
    T2 --> D2
    T3 --> D3
    T4 --> D4
    T4 --> D5

6.2 보안 체크리스트

항목	구현
Signaling 서버	WSS (TLS) 필수
관리자 인증	WordPress 권한 확인
PIN 만료	자동 삭제
PIN 시도 제한	횟수 제한 + 시간 차단
방 인원 제한	1방 = 고객 1명 + 관리자 1명
고객 화면 선택	고객이 공유할 화면 직접 선택
WebRTC 암호화	SRTP — WebRTC 기본 암호화
연결 종료	고객이 언제든 "공유 중지" 가능

7. 인프라 구성

7.1 컨테이너 구조

graph LR
    subgraph "서버 인프라"
        WP["WordPress
웹 서버"]
        SIG["Signaling
WebSocket"]
        TURN["TURN
NAT 릴레이"]
        DB["Database"]
    end


    WP ---|"데이터"| DB
    WP -.->|"시그널링"| SIG


    CLIENT["고객/관리자
브라우저"] -->|"HTTPS"| WP
    CLIENT -->|"WSS"| SIG
    CLIENT -->|"TURN"| TURN

8. WebRTC 설정

8.1 화면 캡처 설정

const screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: {
        displaySurface: 'monitor',  // 전체 화면 권장
        width: { ideal: 1920 },
        height: { ideal: 1080 },
        frameRate: { ideal: 15 }     // 원격지원은 15fps면 충분
    },
    audio: false  // 화면만 공유
});

8.2 NAT 통과 시나리오

graph TD
    A["WebRTC 연결 시도"] --> B{"STUN으로
P2P 연결?"}
    B -->|"성공 (80~90%)"| C["✅ 직접 P2P 연결"]
    B -->|"실패 (10~20%)"| D["TURN 서버
릴레이 연결"]
    D --> E["✅ TURN 릴레이로
연결 성공"]

    style C fill:#4ade80
    style E fill:#4ade80

9. 에러 처리

9.1 시나리오별 대응

상황	대응
고객이 공유 중지	관리자에게 "고객이 공유를 중지했습니다" 알림
관리자가 연결 종료	고객에게 "상담이 종료되었습니다" 알림
네트워크 끊김	재연결 시도 + 안내 메시지
PIN 만료	"PIN이 만료되었습니다. 다시 시도해주세요" 안내
잘못된 PIN	"PIN이 올바르지 않습니다"
브라우저 미지원	"이 브라우저는 화면 공유를 지원하지 않습니다"
고객이 화면 선택 취소	대기 상태 유지

10. 구현 이력

Phase 1: 기반 구축 ✅

작업	상태
Signaling 서버 구축	✅
Room Manager (PIN 생성/매칭)	✅
WordPress 플러그인 (shortcode + 독립형)	✅

Phase 2: WebRTC + TURN ✅

작업	상태
화면 캡처 + WebRTC 연결	✅
TURN 서버 구축 (NAT 통과)	✅
ICE disconnect 처리	✅

Phase 3: UI/UX + 안정화 ✅

작업	상태
고객/관리자 통합 페이지	✅
반응형 (모바일)	✅
관리자 인증	✅
연결 유형 표시 (P2P / TURN)	✅

Phase 4: 배포 ✅

작업	상태
Docker 배포	✅
SSL 인증서	✅
외부망 연결 테스트	✅

Phase 5: 플러그인 분리 리팩토링 ✅

작업	상태
테마 템플릿에서 WebRTC 코드 분리	✅
shortcode 아키텍처 적용	✅
버전 v2.0.0	✅

11. 추후 확장

graph TD
    P1["Phase 1
화면 보기만
(구현 완료)"]
    P2A["Phase 2A
TURN 서버 추가
(구현 완료)"]
    P2B["Phase 2B
음성 채팅 추가
(WebRTC Audio)"]
    P3["Phase 3
원격 조작
(별도 프로그램 필요)"]

    P1 --> P2A
    P1 --> P2B
    P2A --> P3
    P2B --> P3

12. 브라우저 호환성

브라우저	화면 공유	WebRTC	비고
Chrome 94+	✅	✅	권장
Edge 94+	✅	✅	권장
Firefox 66+	✅	✅	지원
Safari 15+	✅	✅	제한적 (모바일은 미지원 가능)
모바일 Chrome	❌	✅	화면 공유 미지원 (관리자 시청만 가능)
모바일 Safari	❌	✅	화면 공유 미지원

고객(공유자)은 데스크톱 브라우저 필요. 관리자(시청자)는 모바일에서도 가능.

▣ 마크 다운(Markdown) 문서(Mermaid 포함) 지원합니다.

글보기
제목	웹 기반 원격 지원 화면 뷰어 - 기술 소개서 (공개판)2026-06-01 00:05
카테고리	기술노트
작성자	lordly
# 웹 기반 원격 지원 화면 뷰어 — 기술 소개서 (공개판) > 고객이 브라우저만으로 화면을 공유하고, 관리자가 실시간으로 확인하는 WebRTC 기반 원격 지원 시스템 --- ## 1. 개요 ### 1.1 목표 고객이 별도 프로그램 설치 없이 웹 브라우저에서 화면을 공유하면, 관리자가 PIN 번호만으로 해당 화면을 실시간 확인할 수 있는 기능을 WordPress 웹사이트에 추가한다. ### 1.2 핵심 원칙 \| 원칙 \| 내용 \| \|------\|------\| \| 설치 없음 \| 고객은 브라우저만 열면 됨 \| \| 간단한 연결 \| PIN 번호만으로 연결 \| \| 보기만 \| 원격 조작 없이 화면 관찰만 \| \| 관리자 인증 \| 관리자 로그인 시에만 시청 가능 \| ### 1.3 대상 사용자 \| 역할 \| 행동 \| 필요 조건 \| \|------\|------\|-----------\| \| 고객 (화면 공유자) \| 사이트 접속 → 화면 공유 → PIN 안내 \| Chrome/Edge/Firefox 브라우저 \| \| 관리자 (화면 시청자) \| 사이트 접속 → PIN 입력 → 고객 화면 실시간 확인 \| 관리자 권한 필요 \| --- ## 2. 시스템 아키텍처 ### 2.1 전체 구조 ```mermaid graph TB subgraph "고객 브라우저" C1["🌐 원격지원 페이지"] C2["📤 화면 캡처"] C3["🎥 WebRTC Video Track"] C1 -->\|"화면 공유 클릭"\| C2 C2 -->\|"MediaStream"\| C3 end subgraph "서버" subgraph "WordPress" WP["WordPress + 원격지원 플러그인"] end subgraph "Signaling" WS["WebSocket Signaling Server"] RM["Room Manager"] end end subgraph "관리자 브라우저" A1["🌐 원격지원 페이지"] A2["📥 WebRTC 수신"] A3["🖥️ 화면 실시간 표시"] A1 -->\|"PIN 입력"\| A2 A2 -->\|"Video Track"\| A3 end C3 -->\|"P2P WebRTC"\| A2 C1 -->\|"1. PIN 생성"\| WS A1 -->\|"2. PIN 연결 요청"\| WS WS -->\|"3. 시그널링 교환"\| WS WS -->\|"4. WebRTC 연결 설정"\| C3 ``` ### 2.2 기술 스택 \| 계층 \| 기술 \| 이유 \| \|------\|------\|------\| \| 프론트엔드 \| Vanilla JS + WebRTC API \| 의존성 최소화, 빠른 로딩 \| \| WordPress 플러그인 \| PHP (shortcode) \| 기존 아키텍처 유지, 재사용성 \| \| Signaling 서버 \| Node.js + WebSocket \| 경량, 실시간 양방향 통신 \| \| P2P 연결 \| WebRTC \| 설치 없이 실시간 영상 전송 \| \| NAT 통과 \| STUN + TURN 서버 \| 모든 네트워크 환경에서 연결 보장 \| \| 인프라 \| Docker \| 컨테이너 기반 관리 \| --- ## 3. 연결 시퀀스 ### 3.1 전체 흐름 ```mermaid sequenceDiagram actor Customer as 고객 participant PageC as 고객 페이지 participant Signal as Signaling 서버 participant PageA as 관리자 페이지 actor Admin as 관리자 Note over Customer,Admin: Phase 1 — PIN 생성 Customer->>PageC: 원격지원 페이지 접속 PageC->>Customer: "화면 공유 시작" 버튼 표시 Customer->>PageC: 버튼 클릭 PageC->>Customer: 브라우저 화면 공유 선택 팝업 Customer->>PageC: 공유할 화면 선택 PageC->>Signal: 방 생성 요청 Signal-->>PageC: PIN 번호 생성 PageC->>Customer: PIN 번호 표시 Note over Customer,Admin: Phase 2 — 관리자 연결 Admin->>PageA: 원격지원 페이지 접속 (로그인 상태) PageA->>Admin: PIN 입력 폼 표시 Admin->>PageA: PIN 입력 + "연결" 클릭 PageA->>Signal: PIN으로 방 참여 요청 Note over Customer,Admin: Phase 3 — WebRTC 연결 Signal-->>PageC: 관리자 입장 알림 PageC->>Signal: SDP Offer 전송 Signal->>PageA: SDP Offer 전달 PageA->>Signal: SDP Answer 전송 Signal->>PageC: SDP Answer 전달 Note over Customer,Admin: ICE Candidate 교환 (자동) Note over Customer,Admin: Phase 4 — 실시간 화면 시청 Customer-->>Admin: WebRTC P2P Video Stream Admin->>Admin: 고객 화면 실시간 표시 ``` --- ## 4. 컴포넌트 설계 ### 4.1 WordPress 플러그인 (Shortcode 아키텍처) ```mermaid graph TD subgraph "플러그인 구조" MAIN["플러그인 메인"] PAGE["독립형 템플릿"] SIG["Signaling 서버"] ASSETS["정적 리소스"] end subgraph "Shortcode 모드 (권장)" THEME["테마 페이지 템플릿"] SC["WebRTC 렌더링"] THEME -->\|"do_shortcode()"\| SC MAIN -->\|"add_shortcode()"\| SC end subgraph "독립형 모드" MAIN -->\|"template_include"\| PAGE end ``` #### 다른 WordPress 사이트에서 사용법 1. 플러그인 설치 + 활성화 2. 페이지에 shortcode 삽입 3. 관리자 권한 설정 가능 (필터 훅 제공) ### 4.2 Signaling 서버 ```mermaid graph TD subgraph "Signaling 서버" WSS["WebSocket Server"] RM["RoomManager"] WSS -->\|"연결"\| CONN["연결 핸들러"] CONN -->\|"방 생성"\| RM CONN -->\|"방 참여"\| RM CONN -->\|"시그널링 릴레이"\| RELAY["메시지 릴레이"] RM -->\|"PIN 생성"\| GEN["PIN Generator<br/>랜덤 생성<br/>중복 체크"] end ``` #### 서버 상태 흐름 ```mermaid stateDiagram-v2 [] --> Waiting: 방 생성 Waiting --> Connected: 관리자 입장 Connected --> Signaling: WebRTC 시그널링 시작 Signaling --> Streaming: P2P 연결 완료 Streaming --> Waiting: 관리자 퇴장 Streaming --> Ended: 고객 퇴장 Waiting --> Ended: 고객 퇴장 Waiting --> Ended: 타임아웃 Ended --> [] ``` ### 4.3 프론트엔드 (WebRTC) ```mermaid graph TD subgraph "WebRTC 로직" UI["UI Controller"] WS["WebSocket Client"] RTC["WebRTC Manager"] UI -->\|"공유 시작"\| SCREEN["화면 캡처 API"] UI -->\|"PIN 입력"\| CONNECT["연결 시도"] SCREEN -->\|"MediaStream"\| RTC CONNECT -->\|"방 참여"\| WS WS -->\|"시그널링"\| RTC RTC -->\|"Video Track"\| VIDEO["비디오 엘리먼트"] end ``` --- ## 5. UI/UX 설계 ### 5.1 고객 화면 (비로그인) ```mermaid graph TD START["고객 접속"] --> VIEW["안내 문구 +<br/>🔵 화면 공유 시작 버튼"] VIEW -->\|"클릭"\| PICK["브라우저 화면 선택 팝업"] PICK -->\|"화면 선택"\| LIVE["📺 화면 공유 중<br/>PIN 표시"] PICK -->\|"취소"\| VIEW LIVE -->\|"공유 중지"\| VIEW ``` 화면 공유 중 UI: \| 요소 \| 내용 \| \|------\|------\| \| 상태 \| 📺 화면 공유 중 \| \| PIN \| 안내 번호 크게 표시 \| \| 안내 \| "이 번호를 상담원에게 알려주세요" \| \| 버튼 \| [공유 중지] \| \| 하단 안내 \| ℹ️ 상담원은 화면을 볼 수만 있으며 원격 조작은 하지 않습니다 \| ### 5.2 관리자 화면 (로그인) ```mermaid graph TD ADMIN["관리자 접속"] --> FORM["PIN 입력 폼"] FORM -->\|"PIN 입력 + 연결"\| CONNECT["WebRTC 연결"] CONNECT -->\|"연결 성공"\| WATCH["🖥️ 고객 화면 실시간 표시"] CONNECT -->\|"연결 실패"\| ERROR["에러 토스트 표시"] WATCH -->\|"연결 종료"\| FORM ``` --- ## 6. 보안 설계 ### 6.1 위협 모델과 대응 ```mermaid graph LR subgraph "위협" T1["무단 시청"] T2["PIN 브루트포스"] T3["중간자 공격"] T4["방 해킹"] end subgraph "대응" D1["관리자 인증 필수"] D2["PIN 시도 횟수 제한"] D3["TLS 암호화"] D4["PIN 1회용 + 만료"] D5["방당 관리자 1명"] end T1 --> D1 T2 --> D2 T3 --> D3 T4 --> D4 T4 --> D5 ``` ### 6.2 보안 체크리스트 \| 항목 \| 구현 \| \|------\|------\| \| Signaling 서버 \| WSS (TLS) 필수 \| \| 관리자 인증 \| WordPress 권한 확인 \| \| PIN 만료 \| 자동 삭제 \| \| PIN 시도 제한 \| 횟수 제한 + 시간 차단 \| \| 방 인원 제한 \| 1방 = 고객 1명 + 관리자 1명 \| \| 고객 화면 선택 \| 고객이 공유할 화면 직접 선택 \| \| WebRTC 암호화 \| SRTP — WebRTC 기본 암호화 \| \| 연결 종료 \| 고객이 언제든 "공유 중지" 가능 \| --- ## 7. 인프라 구성 ### 7.1 컨테이너 구조 ```mermaid graph LR subgraph "서버 인프라" WP["WordPress<br/>웹 서버"] SIG["Signaling<br/>WebSocket"] TURN["TURN<br/>NAT 릴레이"] DB["Database"] end WP ---\|"데이터"\| DB WP -.->\|"시그널링"\| SIG CLIENT["고객/관리자<br/>브라우저"] -->\|"HTTPS"\| WP CLIENT -->\|"WSS"\| SIG CLIENT -->\|"TURN"\| TURN ``` --- ## 8. WebRTC 설정 ### 8.1 화면 캡처 설정 ```javascript const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: 'monitor', // 전체 화면 권장 width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 15 } // 원격지원은 15fps면 충분 }, audio: false // 화면만 공유 }); ``` ### 8.2 NAT 통과 시나리오 ```mermaid graph TD A["WebRTC 연결 시도"] --> B{"STUN으로<br/>P2P 연결?"} B -->\|"성공 (80~90%)"\| C["✅ 직접 P2P 연결"] B -->\|"실패 (10~20%)"\| D["TURN 서버<br/>릴레이 연결"] D --> E["✅ TURN 릴레이로<br/>연결 성공"] style C fill:#4ade80 style E fill:#4ade80 ``` --- ## 9. 에러 처리 ### 9.1 시나리오별 대응 \| 상황 \| 대응 \| \|------\|------\| \| 고객이 공유 중지 \| 관리자에게 "고객이 공유를 중지했습니다" 알림 \| \| 관리자가 연결 종료 \| 고객에게 "상담이 종료되었습니다" 알림 \| \| 네트워크 끊김 \| 재연결 시도 + 안내 메시지 \| \| PIN 만료 \| "PIN이 만료되었습니다. 다시 시도해주세요" 안내 \| \| 잘못된 PIN \| "PIN이 올바르지 않습니다" \| \| 브라우저 미지원 \| "이 브라우저는 화면 공유를 지원하지 않습니다" \| \| 고객이 화면 선택 취소 \| 대기 상태 유지 \| --- ## 10. 구현 이력 ### Phase 1: 기반 구축 ✅ \| 작업 \| 상태 \| \|------\|------\| \| Signaling 서버 구축 \| ✅ \| \| Room Manager (PIN 생성/매칭) \| ✅ \| \| WordPress 플러그인 (shortcode + 독립형) \| ✅ \| ### Phase 2: WebRTC + TURN ✅ \| 작업 \| 상태 \| \|------\|------\| \| 화면 캡처 + WebRTC 연결 \| ✅ \| \| TURN 서버 구축 (NAT 통과) \| ✅ \| \| ICE disconnect 처리 \| ✅ \| ### Phase 3: UI/UX + 안정화 ✅ \| 작업 \| 상태 \| \|------\|------\| \| 고객/관리자 통합 페이지 \| ✅ \| \| 반응형 (모바일) \| ✅ \| \| 관리자 인증 \| ✅ \| \| 연결 유형 표시 (P2P / TURN) \| ✅ \| ### Phase 4: 배포 ✅ \| 작업 \| 상태 \| \|------\|------\| \| Docker 배포 \| ✅ \| \| SSL 인증서 \| ✅ \| \| 외부망 연결 테스트 \| ✅ \| ### Phase 5: 플러그인 분리 리팩토링 ✅ \| 작업 \| 상태 \| \|------\|------\| \| 테마 템플릿에서 WebRTC 코드 분리 \| ✅ \| \| shortcode 아키텍처 적용 \| ✅ \| \| 버전 v2.0.0 \| ✅ \| --- ## 11. 추후 확장 ```mermaid graph TD P1["Phase 1<br/>화면 보기만<br/>(구현 완료)"] P2A["Phase 2A<br/>TURN 서버 추가<br/>(구현 완료)"] P2B["Phase 2B<br/>음성 채팅 추가<br/>(WebRTC Audio)"] P3["Phase 3<br/>원격 조작<br/>(별도 프로그램 필요)"] P1 --> P2A P1 --> P2B P2A --> P3 P2B --> P3 ``` --- ## 12. 브라우저 호환성 \| 브라우저 \| 화면 공유 \| WebRTC \| 비고 \| \|----------\|----------\|--------\|------\| \| Chrome 94+ \| ✅ \| ✅ \| 권장 \| \| Edge 94+ \| ✅ \| ✅ \| 권장 \| \| Firefox 66+ \| ✅ \| ✅ \| 지원 \| \| Safari 15+ \| ✅ \| ✅ \| 제한적 (모바일은 미지원 가능) \| \| 모바일 Chrome \| ❌ \| ✅ \| 화면 공유 미지원 (관리자 시청만 가능) \| \| 모바일 Safari \| ❌ \| ✅ \| 화면 공유 미지원 \| > 고객(공유자)은 데스크톱 브라우저 필요. 관리자(시청자)는 모바일에서도 가능.
태그

댓글
작성자(*)
비밀번호(*)
자동등록방지	(자동등록방지 숫자를 입력해 주세요)
내용(*)

이전	Well Editor — 마크다운 웹 편집기 개발	lordly	2026-06-01
다음	WWeb 빌더 전환 계획서: GrapesJS → Gutenberg 하이브리드 계획서	lordly	2026-05-31

목록으로