Xibo 사용자 가이드 (비개발자용)

시작하기 전에

Xibo는 디지털 사이니지(전자 게시판) 시스템으로, TV나 모니터에 광고, 안내문, 이미지, 동영상을 표시하는 프로그램입니다. 이 가이드는 코드를 모르는 일반 사용자도 쉽게 따라할 수 있도록 작성되었습니다.

필요한 것들

• 인터넷이 연결된 컴퓨터
• 크롬(Chrome) 또는 엣지(Edge) 브라우저
• 관리자로부터 받은 로그인 정보

1. Xibo에 로그인하기

로그인 방법

1. 웹브라우저 열기

   • 크롬 또는 엣지 브라우저를 엽니다

2. Xibo 주소 입력

   • 주소창에 관리자가 알려준 주소를 입력합니다
   • 예: http://192.168.1.100 또는 https://signage.company.com

3. 로그인 정보 입력

   ![로그인 화면]

   ┌─────────────────────────────┐
   │      Xibo 로그인            │
   │                             │
   │  사용자명: [___________]    │
   │                             │
   │  비밀번호: [___________]    │
   │                             │
   │      [로그인] 버튼          │
   └─────────────────────────────┘

   • 사용자명과 비밀번호를 입력합니다
   • [로그인] 버튼을 클릭합니다

첫 화면 이해하기

로그인 후 보이는 메인 화면:

┌──────────────────────────────────────────────────┐
│  📊 대시보드  📁 라이브러리  🖼️ 레이아웃  📅 스케줄  │
├──────────────────────────────────────────────────┤
│                                                  │
│  환영합니다!                                      │
│                                                  │
│  • 현재 3개의 디스플레이가 연결됨                  │
│  • 오늘 예약된 콘텐츠: 5개                        │
│  • 저장 공간: 2.5GB / 10GB 사용                   │
│                                                  │
└──────────────────────────────────────────────────┘

2. 콘텐츠 업로드하기

이미지 업로드

단계별 방법:

1. 라이브러리 메뉴 클릭

   • 상단 메뉴에서 📁 라이브러리 클릭

2. 미디어 추가 버튼 찾기

   [➕ 추가] 버튼을 클릭

3. 파일 선택하기

   업로드 창이 나타나면:

   ┌─────────────────────────────────────┐
   │       미디어 업로드                  │
   │                                     │
   │  [파일 선택] 또는                   │
   │                                     │
   │  ┌─────────────────┐               │
   │  │                 │               │
   │  │  여기에 파일을   │               │
   │  │  드래그하세요    │               │
   │  │                 │               │
   │  └─────────────────┘               │
   │                                     │
   │  이름: [___________]                │
   │                                     │
   │  태그: [___________]                │
   │                                     │
   │      [업로드] [취소]                │
   └─────────────────────────────────────┘

4. 파일 정보 입력

   • 이름: 알아보기 쉬운 이름 입력 (예: "2024년 봄 세일 포스터")
   • 태그: 나중에 찾기 쉽도록 태그 추가 (예: "세일", "봄", "이벤트")

5. 업로드 버튼 클릭

이미지 파일 준비 가이드

권장 이미지 설정:

항목	권장 사항	이유
파일 형식	JPG 또는 PNG	가장 호환성이 좋음
해상도	1920×1080 픽셀	Full HD TV 기준
파일 크기	5MB 이하	빠른 로딩을 위해
가로세로 비율	16:9	일반 TV 화면 비율

이미지 준비 팁:

• 윈도우 그림판 사용하여 크기 조절
• 온라인 도구 (예: Canva.com) 활용
• 스마트폰 사진: 가로로 촬영 권장

동영상 업로드

동영상 파일 준비:

1. 지원 형식 확인

   ✅ 가능한 형식: MP4, AVI, MOV
   ❌ 불가능한 형식: MKV, FLV

2. 동영상 크기 확인

   • 최대 500MB 권장
   • 길이: 30초~5분 권장

3. 업로드 과정

   • 이미지와 동일한 방법으로 업로드
   • 업로드 시간이 더 오래 걸림 (진행률 표시됨)

동영상 편집 도구 추천:

• 윈도우: 동영상 편집기 (Windows 기본 프로그램)
• 스마트폰: InShot, CapCut (무료 앱)
• 온라인: Clipchamp (브라우저에서 편집)

오디오 파일 활용

배경음악 추가하기:

1. 오디오 파일 준비

   • MP3 형식 권장
   • 파일 크기: 10MB 이하

2. 업로드 방법

   • 라이브러리 → 추가 → 오디오 파일 선택

3. 사용 예시

   • 매장 배경음악
   • 안내 방송
   • 효과음

3. 레이아웃 만들기 (화면 구성)

새 레이아웃 생성

1. 레이아웃 메뉴 진입

   상단 메뉴 → 🖼️ 레이아웃 → [➕ 레이아웃 추가]

2. 레이아웃 이름 설정

   ┌──────────────────────────────┐
   │  새 레이아웃 만들기           │
   │                              │
   │  이름: [매장 홍보 화면____]   │
   │                              │
   │  해상도:                      │
   │  ○ HD (1920×1080)           │
   │  ○ 세로형 (1080×1920)       │
   │  ○ 사용자 지정              │
   │                              │
   │     [만들기] [취소]          │
   └──────────────────────────────┘

화면 영역 나누기

레이아웃 디자이너 화면:

┌────────────────────────────────────────┐
│  도구 모음:                            │
│  [영역추가] [미디어] [텍스트] [시계]    │
├────────────────────────────────────────┤
│                                        │
│  ┌──────────────────────────────┐     │
│  │                              │     │
│  │     메인 콘텐츠 영역          │     │
│  │     (클릭하여 편집)          │     │
│  │                              │     │
│  └──────────────────────────────┘     │
│                                        │
│  ┌──────────────────────────────┐     │
│  │  하단 정보 영역               │     │
│  └──────────────────────────────┘     │
│                                        │
└────────────────────────────────────────┘

영역에 콘텐츠 추가하기

1. 영역 선택

   • 편집하고 싶은 영역을 클릭

2. 위젯 추가

   선택 가능한 위젯:
   
   📷 이미지 - 사진이나 포스터 표시
   🎬 비디오 - 동영상 재생
   📝 텍스트 - 안내문구 입력
   🕐 시계 - 현재 시간 표시
   🌤️ 날씨 - 날씨 정보 표시
   📰 텍스트 스크롤 - 흐르는 자막

3. 위젯 설정

   • 각 위젯을 클릭하면 설정 창이 나타남
   • 필요한 설정을 조정

4. 슬라이드쇼 만들기

이미지 슬라이드쇼

1. 이미지 위젯 추가

   • 영역 선택 → 이미지 위젯 추가

2. 여러 이미지 선택

   ┌─────────────────────────────────┐
   │  이미지 선택                     │
   │                                 │
   │  □ 봄세일_포스터1.jpg           │
   │  □ 봄세일_포스터2.jpg           │
   │  □ 신제품_안내.jpg              │
   │  □ 이벤트_공지.jpg              │
   │                                 │
   │  [모두 선택] [선택 완료]         │
   └─────────────────────────────────┘

3. 슬라이드 설정

   ┌─────────────────────────────────┐
   │  슬라이드쇼 설정                 │
   │                                 │
   │  표시 시간: [5___] 초            │
   │                                 │
   │  전환 효과:                      │
   │  ○ 페이드 (부드럽게)            │
   │  ○ 슬라이드 (밀어내기)          │
   │  ○ 없음 (바로 전환)             │
   │                                 │
   │  순서:                          │
   │  ○ 순차 재생                    │
   │  ○ 무작위 재생                  │
   │                                 │
   │        [적용] [취소]             │
   └─────────────────────────────────┘

이미지 순서 변경하기

드래그 앤 드롭으로 순서 조정:

1. 📷 봄세일_포스터1.jpg    [↕]
2. 📷 봄세일_포스터2.jpg    [↕]
3. 📷 신제품_안내.jpg       [↕]
4. 📷 이벤트_공지.jpg       [↕]

마우스로 드래그하여 순서 변경

5. 텍스트 콘텐츠 만들기

간단한 안내문 만들기

1. 텍스트 위젯 추가

   • 영역 선택 → 텍스트 위젯

2. 텍스트 편집기 사용

   ┌────────────────────────────────────┐
   │ [B] [I] [U] | 글꼴▼ | 크기▼ | 색상 │
   ├────────────────────────────────────┤
   │                                    │
   │  환영합니다!                        │
   │                                    │
   │  영업시간: 오전 9시 - 오후 10시      │
   │  문의전화: 1588-0000               │
   │                                    │
   └────────────────────────────────────┘
   
   B = 굵게, I = 기울임, U = 밑줄

3. 서식 조정

   • 글꼴: 나눔고딕, 맑은고딕 등
   • 크기: 제목 48pt, 본문 24pt 권장
   • 색상: 배경과 대비되는 색 선택

흐르는 자막 만들기

1. 텍스트 스크롤 위젯 선택

2. 자막 내용 입력

   ┌──────────────────────────────────────┐
   │  흐르는 자막 설정                     │
   │                                      │
   │  텍스트:                              │
   │  [오늘의 특가! 전 품목 20% 할인___]    │
   │                                      │
   │  속도: [보통▼]                       │
   │  방향: [왼쪽으로▼]                   │
   │  배경색: [검정▼]                     │
   │  글자색: [흰색▼]                     │
   │                                      │
   │         [미리보기] [적용]             │
   └──────────────────────────────────────┘

6. 스케줄 설정 (언제 무엇을 보여줄지)

기본 스케줄 만들기

1. 스케줄 메뉴 진입

   상단 메뉴 → 📅 스케줄

2. 새 스케줄 추가

   ┌───────────────────────────────────┐
   │  스케줄 추가                       │
   │                                   │
   │  이벤트 이름: [봄 세일 광고___]     │
   │                                   │
   │  시작: [2024-03-01] [09:00]       │
   │  종료: [2024-03-31] [22:00]       │
   │                                   │
   │  반복:                            │
   │  □ 매일                          │
   │  ☑ 평일만                        │
   │  □ 주말만                        │
   │                                   │
   │  레이아웃 선택:                    │
   │  [봄세일_레이아웃▼]               │
   │                                   │
   │  디스플레이:                       │
   │  ☑ 1층 로비 TV                   │
   │  ☑ 2층 복도 모니터                │
   │  □ 입구 대형 스크린               │
   │                                   │
   │      [저장] [취소]                │
   └───────────────────────────────────┘

시간대별 다른 콘텐츠 설정

예시: 카페 메뉴 시간대별 표시

시간대	표시 콘텐츠	설명
07:00-11:00	모닝 메뉴	아침 메뉴와 커피 할인
11:00-14:00	런치 세트	점심 특선 메뉴
14:00-17:00	디저트 타임	케이크와 음료 세트
17:00-21:00	디너 메뉴	저녁 식사 메뉴

7. 콘텐츠 수정하기

업로드된 이미지 교체

1. 라이브러리에서 찾기

   라이브러리 → 검색창에 이름 입력 또는 태그로 찾기

2. 이미지 위에 마우스 올리기

   ┌─────────────────┐
   │                 │
   │   이미지.jpg    │
   │                 │
   │ [수정] [교체]   │ ← 버튼이 나타남
   │ [삭제] [복사]   │
   └─────────────────┘

3. 교체 버튼 클릭

   • 새 파일 선택
   • 기존 스케줄은 유지됨

텍스트 내용 수정

1. 레이아웃 편집 모드 진입

   • 레이아웃 → 편집할 레이아웃 선택 → 디자인

2. 텍스트 영역 더블클릭

   • 편집기가 열림
   • 내용 수정 후 저장

3. 즉시 반영 확인

   • 저장 후 약 30초~1분 내 화면에 반영

8. 콘텐츠 삭제하기

안전한 삭제 방법

1. 사용 중인지 확인

   미디어 파일 선택 → 정보 보기
   
   ┌──────────────────────────┐
   │  파일 정보               │
   │                         │
   │  사용 중인 레이아웃:     │
   │  • 봄세일 레이아웃       │
   │  • 주말 이벤트          │
   │                         │
   │  ⚠️ 삭제 시 위 레이아웃  │
   │  에서도 제거됩니다       │
   │                         │
   │    [삭제] [취소]        │
   └──────────────────────────┘

2. 대체 콘텐츠 준비

   • 삭제 전 대체할 콘텐츠 먼저 업로드

3. 삭제 진행

   • 확인 메시지에서 '예' 선택

임시 비활성화

삭제 대신 스케줄에서 제외:

• 스케줄 → 해당 이벤트 → 일시정지
• 나중에 다시 활성화 가능

9. 실시간 콘텐츠 변경

긴급 공지사항 표시

1. 긴급 레이아웃 준비

   레이아웃 이름: "긴급공지"
   내용: 크고 눈에 띄는 텍스트
   배경: 빨간색 또는 노란색

2. 즉시 표시 명령

   디스플레이 → 대상 선택 → 
   
   [⚡ 지금 표시] 버튼 클릭
   
   레이아웃 선택: 긴급공지
   표시 시간: [10] 분
   
   [실행]

특정 디스플레이만 변경

1. 디스플레이 관리 화면

   ┌─────────────────────────────────┐
   │  디스플레이 목록                 │
   │                                 │
   │  ✅ 1층 로비 TV     [관리]      │
   │  ✅ 2층 복도        [관리]      │
   │  ❌ 3층 회의실      [관리]      │
   │                                 │
   │  ✅ = 온라인, ❌ = 오프라인      │
   └─────────────────────────────────┘

2. 개별 제어

   • [관리] 버튼 → 레이아웃 변경

10. 모니터링 및 확인

미리보기 기능

1. 레이아웃 미리보기

   레이아웃 → 미리보기 아이콘(👁️) 클릭
   
   새 창에서 실제 표시될 모습 확인

2. 스케줄 달력 보기

   📅 달력 보기로 전환
   
   [3월 2024]
   일  월  화  수  목  금  토
               1   2   3   4
               🟦  🟦  🟦  
   5   6   7   8   9  10  11
       🟦  🟦  🟦  🟦  🟦
   
   🟦 = 스케줄 있음

디스플레이 상태 확인

상태 아이콘 의미:

• 🟢 정상 작동 중
• 🟡 업데이트 중
• 🔴 연결 끊김
• ⚪ 대기 중

11. 자주 사용하는 템플릿

매장 안내 템플릿

┌──────────────────────────────────┐
│          [로고 이미지]           │
├──────────────────────────────────┤
│                                  │
│     [메인 광고 슬라이드]         │
│     (5초마다 자동 전환)          │
│                                  │
├──────────────────────────────────┤
│ 영업시간 | 오늘의날씨 | 시계     │
└──────────────────────────────────┘

메뉴판 템플릿

┌──────────────────────────────────┐
│         MENU                     │
├─────────────┬────────────────────┤
│            │                    │
│  커피      │   디저트            │
│  리스트    │   리스트            │
│            │                    │
├─────────────┴────────────────────┤
│    오늘의 추천: [이미지]          │
└──────────────────────────────────┘

공지사항 템플릿

┌──────────────────────────────────┐
│         📢 공지사항               │
├──────────────────────────────────┤
│                                  │
│  • 첫 번째 공지                  │
│  • 두 번째 공지                  │
│  • 세 번째 공지                  │
│                                  │
├──────────────────────────────────┤
│  문의: 1588-0000 | 하단 흐르는 자막 |
└──────────────────────────────────┘

12. 문제 해결

자주 발생하는 문제

"업로드가 안 돼요"

✅ 해결 방법:

• 파일 크기 확인 (500MB 이하)
• 파일 형식 확인 (JPG, PNG, MP4)
• 인터넷 연결 확인
• 다른 브라우저로 시도

"화면에 안 나타나요"

✅ 해결 방법:

• 스케줄 시간 확인
• 디스플레이 온라인 상태 확인
• 레이아웃이 스케줄에 지정되었는지 확인
• 5분 정도 기다려보기

"이미지가 늘어져 보여요"

✅ 해결 방법:

• 이미지 비율을 16:9로 수정
• 레이아웃 해상도와 TV 해상도 일치 확인
• 이미지 위젯 설정에서 "비율 유지" 선택

"동영상이 끊겨요"

✅ 해결 방법:

• 동영상 용량 줄이기 (100MB 이하 권장)
• 비디오 형식을 MP4로 변환
• 네트워크 속도 확인

도움 받기

1. 시스템 관리자 연락

   • 로그인 정보 문제
   • 권한 관련 문제
   • 시스템 오류

2. Xibo 커뮤니티

   • https://community.xibo.org.uk
   • 다른 사용자들의 경험 공유

3. 유튜브 튜토리얼

   • "Xibo digital signage tutorial" 검색
   • 시각적 학습 가능

13. 효과적인 콘텐츠 제작 팁

디자인 원칙

가독성 우선

• 글자 크기: 3미터 거리에서 읽을 수 있는 크기
• 대비: 밝은 배경에 어두운 글씨 또는 반대
• 간격: 충분한 여백 확보

색상 사용

• 주목도 높은 색: 빨강, 노랑 (세일, 이벤트)
• 편안한 색: 파랑, 초록 (일반 정보)
• 기업 색상: 브랜드 아이덴티티 유지

정보량 조절

• 7초 규칙: 7초 안에 핵심 메시지 전달
• 한 화면 한 주제: 너무 많은 정보 피하기
• 핵심만: 꼭 필요한 정보만 표시

콘텐츠 종류별 제작 가이드

홍보/광고

• 시선을 끄는 이미지 사용
• 간단명료한 문구
• 행동 유도 문구 포함 (예: "지금 구매하세요!")

정보 안내

• 명확한 제목
• bullet point 활용
• 아이콘 사용으로 이해도 향상

분위기 연출

• 계절감 있는 이미지
• 부드러운 전환 효과
• 배경음악 활용 (선택사항)

14. 월별 운영 체크리스트

매일 확인사항

• [ ] 모든 디스플레이 정상 작동 확인
• [ ] 오늘 스케줄 확인
• [ ] 긴급 공지사항 필요 여부

매주 확인사항

• [ ] 다음 주 콘텐츠 준비
• [ ] 스케줄 업데이트
• [ ] 오래된 콘텐츠 정리

매월 확인사항

• [ ] 저장 공간 정리
• [ ] 사용하지 않는 파일 삭제
• [ ] 통계 리포트 확인
• [ ] 디스플레이 청소 (물리적)

15. 용어 설명

용어	설명
레이아웃	화면 구성 템플릿
위젯	레이아웃에 들어가는 구성 요소 (이미지, 텍스트 등)
스케줄	언제 무엇을 보여줄지 정하는 시간표
캠페인	여러 레이아웃을 묶은 그룹
디스플레이	콘텐츠를 보여주는 TV나 모니터
플레이어	TV에 연결된 재생 장치 또는 프로그램
미디어	이미지, 동영상, 오디오 파일
라이브러리	업로드한 파일들을 보관하는 곳
해상도	화면의 선명도 (1920×1080 = Full HD)
종횡비	화면의 가로세로 비율 (16:9 = 일반 TV)

💡 초보자 팁

1. 처음에는 간단한 이미지 하나부터 시작하세요
2. 복잡한 레이아웃보다 단순한 구성이 효과적입니다
3. 정기적으로 백업하는 습관을 들이세요
4. 변경사항은 즉시 메모해두세요

⚠️ 주의사항

• 저작권이 있는 이미지나 음악 사용 주의
• 개인정보가 포함된 내용 게시 금지
• 중요한 변경 전 관리자와 상의
• 테스트 후 실제 적용 권장