스마트웹 사용자 메뉴얼 스마트웹을 이용하시는데 이해를 돕기 위해 본 매뉴얼을 제공합니다. 고객의 꿈을 이룰 수 있는 E- 비지니스 파트너. 사용설명서의 화면과 그림과는 약간의 차이는 있을 수 있습니다. http://www.igkorea.net
스마트웹 사용자 메뉴얼
스마트웹을 이용하시는데 이해를 돕기 위해 본 매뉴얼을 제공합니다.
고객의 꿈을 이룰 수 있는 E- 비지니스 파트너.
사용설명서의 화면과 그림과는 약간의 차이는 있을 수 있습니다.
http://www.igkorea.net
목차
- 스마트웹에 접속하기
① 주소를 직접입력한 접속방법
② QR코드를 이용한 접속방법
- 북마크 아이콘 생성방법
- 메인화면 구성
- 서브화면 구성
- 회원가입하기
- 관리자권한받기
- 게시판 글쓰기
① 글쓰기
② 에디터 사용방법
- 게시판 변경방법
- 회원관리 및 접속현황
- 스마트웹 메뉴관리
① 대 메뉴관리
② 소 메뉴 관리
Chapter1. 스마트웹 활용
Chapter2. 스마트웹 구성
Chapter3. 회원가입
Chapter4. 게시판 활용
Chapter5. 관리자 기능
- 로고 바꾸기
- 아이콘 바꾸기
- 배경 바꾸기
- 기타
① 이미지 변경등록하는 방법
② 메뉴 아이콘 순서 바꾸는 방법
③ 스마트웹 색상 변경하기
Chapter6. 디자인 편집
- 프로그램 다운로드
- 인코딩 과정
- 동영상 등록하기
Chapter7. 동영상 인코딩
http://www.igkorea.net
Chapter1. 스마트웹 활용
> 01 주소를 직접입력한 접속방법 - PC로 접근 시
▶ 스마트웹에 접속하기
1
2 익스플로러 상단에 보시면 주소 입력이 있는데 이
곳에 스마트웹주소인 샘플교회.aub.kr를 입력하고
[Enter] 실행을 합니다.
인터넷 익스플로러창을 실행시킵니다.
3 왼쪽 그림과 같이 인터넷으로 홈페이지에 접속하신
것을 확인하실 수 있습니다.
Chapter1. 스마트웹 활용
> 01 주소를 직접입력한 접속방법 - 스마트폰으로 접근 시
▶ 스마트웹에 접속하기
1
2 익스플로러 상단에 보시면 주소 입력이 있는데 이
곳에 스마트웹주소인 샘플교회.aub.kr을 입력하고
[이동] 또는 [Go] 를 클릭합니다.
스마트폰에서 인터넷을 실행시킵니다.
3 왼쪽 그림과 같이 스마트폰에 적합한 스마트웹 홈페
이지를 접속하신 것을 확인 하실 수 있습니다.
참고 ※ 아이폰은 safari를 실행합니다.
Chapter1. 스마트웹 활용
> 02 QR코드를 이용한 접속방법
▶ 스마트웹에 접속하기
1
3 왼쪽 그림과 같은 화면이 보여지게 되는데 메뉴중에
[코드] 라는 버튼을 클릭합니다.
4 QR코드를 찍을 수 있는 카메라가 실행되는데 QR코
드를 인식할 수 있는 거리에 1~3초 가만히 계시면
스마트웹 홈페이지가 자동으로 접속이 되는 것을 확
인 하실 수 있습니다.
QR코드는 스마트폰 보급이후 다양한 정보를 담을 수 있다는 점에 널리 사용되고 있으며, QR코드를 찍기 위해선 QR코드
리더기가 필요한데 안드로이드의 마켓이나 아이폰의 앱스토어에서 쉽게 무료어플을 받아서 사용하실 수 있습니다. 보편
적으로 많이 사용되는 네이버어플로 QR코드를 찍어 보겠습니다.
네이버 어플을 실행시킵니다. 다음그림의 오른쪽 화
면이 보여지게 됩니다.
보여진 화면의 하단부분에 네이버 어플 기능메뉴가
보이는데 [검색] 이란 버튼을 클릭합니다.
2
※ QR 코드를 찍을 수 있는 어플로는 네이버, 스캐
니, 쿠루쿠루 등 다양한 어플들이 있으며 QR코드어
플은 안드로이드(안드로이드마켓), 아이폰(어플스토
어) 에서 다운 받으 실 수 있습니다.
> 01 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 안드로이드(1)
▶ 북마크 아이콘 등록방법
1
2 [★추가] 버튼을 클릭하고 북마크추가 설정창이 나오
면 [확인]버튼을 눌러줍니다.
스마트웹에 접속합니다. 상단에 주소창 옆에 보면
북마크 버튼을 클릭하여 줍니다.
3 왼쪽 그림과 같이 북마크 리스트에 방금 추가한 것
이 생긴 것을 확인 하실 수 있습니다.
4 확인 후 2초 이상 누르고 계시면 다음과 같은 창이
보여집니다.
Chapter1. 스마트웹 활용
▶ 북마크 아이콘 등록방법
5
6 “Android 홈에 바로가기('샘플교회')가 생성되었습니
다.”라는 알림메세지가 뜹니다.
리스트중 [홈에 바로가기 추가] 버튼을 선택합니다.
7 스마트폰 바탕에 보시면 아이콘이 추가 되있는 것을
확인하실 수 있습니다. 언제라도 클릭하시면 주소입
력없이 자동으로 페이지가 열리게 됩니다.
> 01 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 안드로이드(2)
Chapter1. 스마트웹 활용
※ 핸드폰 기종마다 메뉴의 이름은 다를 수 있습
니다. 예) [대기화면에 단축메뉴 추가]
> 02 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 아이폰[IOS]
▶ 북마크 아이콘 등록방법
1
2 홈페이지접속한 상태에서 하단 메뉴들중 가운데에
있는 버튼을 클릭합니다.
스마트웹에 접속합니다. 상단에 주소창 에 주소를 입
력하고 [Go] 버튼을 클릭합니다.
3 메뉴가 보여지게 되는데 [홈 화면에 추가] 버튼을 클
릭합니다.
4 상단 우측에 보이는 [추가] 버튼을 클릭합니다.
Chapter1. 스마트웹 활용
5 스마트폰 배경에 보시면 북마크 아이콘이 생성되어
있는 것을 확인하실 수 있습니다.
> 01 스마트웹 메인화면 구성내용
▶ 메인화면 구성
1 로고 : 교회의 로고가 들어가는 부분입니다.
Chapter2. 스마트웹 구성
1 2
3
4
5
6
2 사이트맵 : 사이트맵 버튼입니다. 그룹메뉴 및 서
브메뉴를 한눈에 확인하실 수 있으며 페이지를 바
로 이동할 수 있는 편리성을 띄고 있습니다.
3 메인 이미지 : 스마트웹의 메인화면입니다. 이미지
로 들어가며 교회의 모습이나 목사님 사진 등 교
회를 대표할만한 이미지를 넣으실 수 있습니다.
4 메뉴 어플 아이콘 : 많이 사용되고 있는 메뉴들을
어플 스타일의 형식으로 보여집니다. 관리자가 직
접 대표적인 메뉴들을 구성하실 수 있습니다.
5 최근게시물 컨텐츠 : 최근 게시물 컨텐츠 부분으
로 새로 올라온 글을 바로 확인할 수 있으며 관리
자는 보여지는 게시판 및 순서를 변경하실 수 있
습니다.
6 시스템 아이콘 : 스마트웹의 기본 아이콘입니다.
홈으로 가기, 로그인, 관리자 페이지 등을 담고 있
습니다.
> 02 스마트웹 서브화면 구성내용
▶ 서브화면 구성
1 그룹 메뉴 : 그룹 메뉴명이 보여집니다.
Chapter2. 스마트웹 구성
1
2
3
4
2 서브 페이지 : 그룹안의 서브 페이지들이 보여집니
다.
3 내용 : 페이지마다 보여지는 화면이며 html,
gallery, basic스킨을 적용하여 관리자가 보여주고
싶은 내용을 편집 및 수정, 실시간으로 보여줄 수
있습니다.
4 메뉴 어플 아이콘 : 메인에 있는 메뉴 어플아이콘
이 서브페이지 하단에 따라와서 페이지를 다본 후
쉽게 이동할 수 있는 편의성이 있습니다.
※ 서브페이지 스타일은 3가지 타입을 제공하며 관
리자의 방식에 따라 달라 질 수 있습니다.
Basic 메뉴스타일 상하메뉴 A스타일 상하메뉴 B스타일
Chapter3. 회원가입
> 01 회원가입을 해보자(1)
▶ 회원가입하기
1
2 좌측 모바일 화면 스크롤을 내려보시면 시스템아이
콘에 [로그인] 버튼을 클릭해줍니다.
사이트에 접속한 화면입니다.
3 왼쪽 그림과 같이 로그인 화면이 나오게 되는데 [회
원가입] 버튼을 클릭합니다.
※ 스마트폰에서 접속 후에도 회원가입 진행방법은
동일합니다.
Chapter3. 회원가입
> 01 회원가입을 해보자(2)
▶ 회원가입하기
4
6 회원 개인정보를 입력하시고 하단의 [회원가입완료]
버튼을 클릭합니다.
회원정보 약관과 개인정보 취급방침에 대해 읽어 보
시고 [동의] 버튼에 체크를 합니다.
7 [홈 으로 이동 버튼] 을 클릭하시면 가입이 정상적으
로 진행된 것입니다.
5 약관에 동의 하시고 [약관동의 확인] 버튼을 클릭합
니다.
Chapter3. 회원가입
> 02 회원가입 후 관리자모드에 접속할 수 있는 권한을 부여받자
▶ 관리자 권한받기
1
2 회원가입 후 아이지코리아 고객센터 1577-5865에
전화주시면 관리자확인 후 관리자 승인하여 드립니
다.
회원가입은 하였지만 왼쪽 그림의 관리자로그인을
위해서는 관리자권한을 부여 받아야 홈페이지 관리
를 하실 수 있으십니다.
Chapter4. 게시판 활용
> 01 관리자 승인을 받았으면 이제 글을 써보자. (1)
▶ 게시판 글쓰기
1
2 로그인하시면 왼쪽 그림과 같이 페이지의 글을 수정
하고 편집할 수 있는 [모바일 페이지 수정] 화면을 확
인 하실 수 있습니다.
- 공지사항에 글을 써보도록 하겠습니다.
관리자 승인이 끝났으니 승인받은 아이디와 비밀번
호을 입력하고 [관리자 로그인] 버튼을 클릭합니다.
3 우측 하단에 [글쓰기] 버튼을 클릭합니다.
Chapter4. 게시판 활용
> 01
▶ 게시판 글쓰기
4
5 입력을 완료 했으면 하단에 [글쓰기] 버튼을 클릭합
니다.
다음화면에서 글 제목 및 내용을 입력합니다.
- 공지 : 관리자 일경우 나타나는데, 공지를 체크
하면, 현재 쓴글을 처음글로 제일 위에 표시 할 수
있습니다.
- 제목 : 제목을 입력합니다.
- 내용 : 내용을 입력합니다.
- 모바일 동영상 링크 : 동영상 주소를 입력하면,
모바일웹에서 동영상을 재생 할 수 있습니다.
- 웹 동영상 링크 : 동영상 주소를 입력하면, 홈페
이지내에서 동영상을 재생 할 수 있습니다.
- 파일첨부 : 이미지파일/동영상파일/기타파일 을
업로드 할 수 있습니다.
관리자 승인을 받았으면 이제 글을 써보자. (2)
6 방금 쓴 글이 좌측 그림과 같이 보여집니다.
※ 우측 그림은 스마트폰으
로 확인한 것입니다.
PC화면에서 보
여지는 화면과 스마트폰에
서 보여지는 모습은 다소 다
를 수 있으니 유념하시기 바
랍니다.
참고
Chapter4. 게시판 활용
> 02
▶ 게시판 글쓰기
에디터 기능을 알아보자.
붙여넣기 : 다른 곳에서 복사된 내용을 글쓰기 클
립보드에 붙여 넣기를 할 수 있습니다.
전체선택 : 입력한 내용을 전부 선택합니다.
글씨 진하게 : 글씨를 진하게 표시합니다.
글씨 기울임 : 글씨를 기울게 표시합니다.
글씨 밑줄긋기 : 글씨에 밑줄을 긋습니다.
글씨 취소선 : 글씨중간에 줄을 긋습니다.
형광펜 : 글씨를 강조할 때 글씨 쓴 뒷부분에 색을
형광펜처럼 칠하여 줍니다.
글자색 : 글씨 색상을 변경해줍니다.
왼쪽정렬 : 글 정렬을 왼쪽으로 합니다.
가운데정렬 : 글 정렬을 가운데로 합니다.
오른쪽정렬 : 글 정렬을 오른쪽로 합니다.
양쪽정렬 : 글 정렬을 양쪽으로 합니다.
스타일 : 글의 스타일을 정하여 줍니다.
글꼴 : 글씨 서체를 정하여 줍니다.
글꼴 크기 : 글씨의 크기를 정하여 줍니다.
서식 지우기 : 글의 스타일이 있다면 서식을 지워
기본으로 바꿔줍니다.
글상자 : 글상자를 만들어 줍니다.
특수 문자 : 특수문자를 입력합니다.
가로줄 : 가로줄을 입력합니다.
테이블 만들기 : 테이블(표)를 만들 수 있습니다.
테이블 고치기 : 테이블(표)를 수정 할 수 있습니다.
하이퍼링크 : 선택 영역에 URL 링크를 넣어줄 수
있습니다.
하이퍼링크 없애기 : 링크가 있으면 링크를 없애
줍니다.
내 PC 사진넣기 : 자신의 컴퓨터에 있는 사진을
올릴 수 있습니다.
웹 사진넣기 : 웹에 있는 사진의 URL을 입력하여
가져 올 수 있습니다.
지도 : 구글지도서비스로 주소를 입력하여 지도
를 삽입할 수 있습니다.
글쓰기 게시판에 편의를 위하여 위지위그(WYSIWYG) 글쓰기를 제공하여 손쉽게 편집할 수 있도록 에디터를 제공하고 있
습니다. 에디터의 기능을 알고 사용하면 좀 더 멋진 글쓰기 표현이 될 것입니다. 이제 에디터의 기능에 대해서 알아보도록
하겠습니다.
> >> 관리자 편의에 맞게 게시판 스킨을 바꿔보자. (1)
▶ 게시판 변경방법
1 예를들어 섬기는분들 gallery스킨을 basic스킨으로
바꿔 보도록 하겠습니다.
모바일 페이지 수정에서 gallery게시판인 섬기는분
들 게시판에 들어갑니다. 게시판 우측 상단에 [관리
자] 버튼을 클릭합니다.
2 왼쪽 그림과 같이 새창으로 관리자 페이지가 열립니
다.
Chapter4. 게시판 활용
글쓰는 방법은 동일하지만 스킨스타일따라 보이는 모습이 달라 용도에 맞게 변경하여 사용하실 수 있습니다. 기본적으로
스마트웹에 맞게 basic, html1, gallery스킨을 제공하고 있으며 관리자는 게시판 스킨을 변경할 수 있습니다.
html1스킨 gallery스킨 basic스킨
※ 관리자 로그인이 된 상태라면 게시판 상단에
[관리자]라는 버튼이 보이게 됩니다.
※ html1 스킨은 우측 하단에 보입니다.
> >>
▶ 게시판 변경방법
3
4 하단 [확인] 버튼을 클릭하시면 변경이 됩니다.
보이는 창 스크롤을 내려 아래쪽에 보시면 스킨 디
렉토리라는 부분이 있습니다. 스킨을 보면 gallery스
킨으로 되어 있는 것을 확인할 수 있습니다. 스킨을
basic스킨으로 바꿔서 선택합니다.
Chapter4. 게시판 활용
관리자 편의에 맞게 게시판 스킨을 바꿔보자. (2)
6 스킨이 어떻게 스마트폰으로 바뀌었는지 확인해 보
겠습니다. 좌측 [그림1] 은 바꾸기 전인 gallery스킨
이며 [그림2] basic스킨으로 변경 후 모습입니다.
[그림1] [그림2]
5 좌측 그림과 같이 gallery스킨이 basic스킨으로 바뀐
것을 확인 하실 수 있습니다.
> 01
▶ 회원관리 및 접속현황
1
2 등록된 회원은 관리자 메인페이지에서도 확인할 수
있지만 권한부여 및 등급설정은 좌측그림에서와 같
이 회원관리 < 회원관리를 클릭합니다.
[관리자페이지] 버튼을 클릭합니다.
3 권한을 변경하고 [선택수정]을 클릭하면 권한을 쉽게
변경하실 수 있습니다.
Chapter5. 관리자 기능
스마트웹에 가입된 회원들을 관리하자.
※ 하지만 앞서 말한 것과 같이 목록 앞에 체크버튼
에 체크를 하지 않고 [선택수
정] 버튼을 클릭하면 수정되지
않습니다. 수정할 목록은 선택
해주는 것이 필수입니다.
※ 우측 그림은 스마트폰으
로 접속했을 때의 화면입니
다.
> 02
▶ 회원관리 및 접속현황
1
2 상단 메뉴에서 회원관리 < 접속자현황을 클릭합니다.
[관리자페이지] 버튼을 클릭합니다.
3 기간별로 접속한 IP 및 접속경로, 브라우저, OS, 시간
을 정리하여 보여줍니다. 접속자, 도메인, 브라우저,
OS, 시간, 요일, 날짜별로 통계를 낼 수 있습니다.
Chapter5. 관리자 기능
스마트웹의 접속현황을 보자.
※ 우측 그림은 스마트폰으
로 접속했을 때의 화면입니
다.
> 01
▶ 스마트웹 메뉴관리
1
2 상단 메뉴에서 홈페이지 편집 < 대 메뉴관리를 클릭
합니다.
[관리자페이지] 버튼을 클릭합니다.
3 대 메뉴관리 목록이 나오는데 이 곳에서 원하는 그룹
메뉴이름과 순서를 설정하실 수 있습니다.
Chapter5. 관리자 기능
대 메뉴관리, 그룹메뉴이름 및 순서를 바꿔보자.(1)
> 01
▶ 스마트웹 메뉴관리
4
7 좌측 그림과 같이 순서와 이름이 바뀌었습니다.
어떻게 바뀌었는지 스마트폰으로 확인해 보겠습니다.
예를 들어 교회소개라는 그룹의 이름을 샘플교회로
바꾸고 순서를 2번째로 바꿔보겠습니다.
Chapter5. 관리자 기능
5 교회소개 목록 앞에 체크를 해주시고 교회소개이름
을 샘플교회로 바꿉니다.
6 메뉴순서는 0에서 1번으로 바꾸고 메뉴순서가 1번
이었던 말씀과찬양은 0번으로 바꿔주고 [선택수정]
을 클릭하여 줍니다.
※ 순서는 중복되는 번호가 없게 해주셔야 하며 0
부터 첫번째입니다. 예) 0-첫번째, 1-두번째 …
8 쉽게 사이트맵을 확인해 보겠습니다.
[그림1]은 바꾸기전 화면이고 [그림2]는 대 메뉴를 수
정한 다음의 모습입니다.
[그림1] [그림2]
※ 교회소개그룹은 샘플교회로 이름이 바뀌었고 2
번째로 이동되었고 말씀과 찬양은 1번째로 이동이
된 것을 확인 하실 수 있습니다.
※ 소 메뉴 역시 동일한 방법으로 수정하시면 됩니
다.
대 메뉴관리, 그룹메뉴이름 및 순서를 바꿔보자.(2)
> 02
▶ 스마트웹 메뉴관리
홈페이지 관리 > 소 메뉴관리
Chapter5. 관리자 기능
소 메뉴관리 - 소 메뉴를 생성하기
3 좌측 그림과 같이 소 메뉴가 생성 된것을 확인하실
수 있습니다.
※ 검색순서는 중복 되지 않게 바꿔주셔야 합니다.
기본 적으로 생성되면 검색순서는 0으로 잡힐 것입
니다.
소 메뉴관리 역시 동일한 방법으로 대 메뉴관리와 같이 수
정하시면 되며 소메뉴 생성 방법에 대해 알아 보겠습니다.
1 생성 버튼을 클릭합니다.
2 소 메뉴를 만들 그룹을 선택하고 게시판 제목을 입력
하고 [확인] 버튼을 클릭합니다.
> 02
▶ 스마트웹 메뉴관리
Chapter5. 관리자 기능
3 좌측 그림과 같이 소 메뉴가 복사생성 된것을 확인하
실 수 있습니다.
※ 기본 적으로 복사생성되면 검색순서는 해당 그룹
내에 마지막번호로 자동으로 입력됩니다.
생성 되있는 소 메뉴를 복사하는 방법을 알아 보겠습니다.
1 [복사] 버튼을 클릭합니다.
2 게시판 제목과 복사 유형을 체크 하시고 [복사] 버
튼을 클릭하시면 복사 됐다는 알림메세지와 함께
바로 소 메뉴가 복사되어 생성이 됩니다.
소 메뉴관리 - 소 메뉴를 복사생성하기
> >>
▶ 로고 바꾸기
1
2 상단 메뉴에서 홈페이지편집 > 모바일 디자인을 클릭
합니다.
3 모바일 다자인 메뉴 화면이 나오면 스크롤을 내려
아래쪽에 메인로고 부분 카테고리가 보일 것입니다.
이 곳에 이미지를 첨부 하시고 [등록] 버튼을 클릭하
면 바뀌게 됩니다.
Chapter6. 디자인 편집
로고를 바꿔 보자.
[관리자페이지] 버튼을 클릭합니다.
※ 로고 이미지 사이즈는
가로 200px ~ 260px,
세로 67px(고정)으로 작
업하셔야 합니다.
> >>
▶ 아이콘 바꾸기
1
2 상단 메뉴에서 홈페이지편집 > 모바일 디자인을 클릭
합니다.
3 모바일 다자인 메뉴 페이지 처음에 메뉴 편집기 부
부분이 있습니다. 이 곳에 이미지를 첨부 하시고 [등
록] 버튼을 클릭하면 바뀌게 됩니다.
Chapter6. 디자인 편집
메인 어플 아이콘을 바꿔 보자.
[관리자페이지] 버튼을 클릭합니다.
※ 아이콘 이미지 사이즈는
가로 65px, 세로 65px를 권
장합니다. 보다 커도 상관은
없으며 가로,세로 비율은 1:1
로 큰 이미지를 넣어도 자동
으로 이미지 사이즈가 65px
로 잡혀서 들어가지며 선명해
집니다.
> >>
▶ 배경 바꾸기
1
3
Chapter6. 디자인 편집
메인 아이콘 배경을 바꿔 보자.
[관리자페이지] 버튼을 클릭합니다.
※ 아이콘배경 이미지 사
이즈는 세로 315px를 권
장합니다. 가로사이즈는
상관은 없지만 똑같은 패
턴으로 반복되는 점을 알
아두세요.
모바일 다자인 메뉴 화면이 나오면 스크롤을 내려
아래쪽에 메인어플 메뉴 부분 카테고리가 보일 것입
니다. [이미지사용]을 체크, 이미지를 첨부 하시고
[등록] 버튼을 클릭하면 바뀌게 됩니다.
2 상단 메뉴에서 홈페이지편집 > 모바일 디자인을 클릭
합니다.
> 01
▶ 기타
1
3
Chapter6. 디자인 편집
이미지 변경등록하는 방법(1)
예를 들어 교회소개 아이콘 이미지를 변경등록해 보
겠습니다.
[찾아보기] 버튼을 클릭합니다.
※ 변경된 이미지가 미리보기가 되지 않는 다면 인
터넷 익스플로러 [도구] > [인터넷옵션] > [검색기록 설
정]에서 [페이지를 열 때마다]가 체크 되어있는지 확
인합니다.
아이콘이 변경된 것을 왼쪽그림을 보시면 바뀔 이
미지 모습을 미리 확인할 수 있습니다.
2 업로드할 파일을 선택합니다. 그리고 [열기] 버튼을
클릭합니다.
> 01
▶ 기타
4
Chapter6. 디자인 편집
이미지 변경등록하는 방법(2)
스크롤을 내려 [등록] 버튼을 클릭합니다.
※ 다른 이미지 변경등록도 지금해본 아이콘 이미지
변경등록 방법과 다를바가 없습니다. 변경하고 직접
확인하여 보다 더 멋진 개인 스마트웹을 만들어 봅
시다.
5 저장이 잘 되었는지 모바일로 확인해 보겠습니다.
[그림1]은 기존 아이콘 모습이고 [그림2]는 지금
바꿔본 아이콘 모습입니다.
[그림1] [그림2]
> 02
▶ 기타
1
4
Chapter6. 디자인 편집
메뉴 아이콘 순서 바꾸는 방법
스마트웹 메인에 보면 보이는 12개의 어플 아이콘
순서들을 바꿔 보겠습니다.
좌측 그림과 같이 사용여부와 메뉴순서를 입력하는
곳을 확인하실 수 있습니다.
※ 아이콘은 12개 이상 들어
가도 무방하나 첫페이지 전부
보여지는 것이 아니라 우측
화면처럼 계속적으로 추가되
어 보여집니다.
※ 아이콘 메뉴 아래 버튼으
로 다음, 이전페이지를 확인할
수 있습니다.
좌측 [그림1]은 아이콘 메뉴 순서를 변경 전 모습이
고 [그림2]는 아이콘 메뉴 순서를 변경등록한 모습입
니다.
2 변경하실 순서를 잘 생각하신다음에 사용여부에 필
요한 아이콘만 12개를 체크하고 메뉴순서에는
0~11까지 12개의 순서를 정하여 줍니다.
※ 중복되는 번호가 있으면 메뉴가 틀어질 수 있으
니 유의하세요.
3 스크롤을 내려 [등록] 버튼을 클릭합니다.
[그림1] [그림2]
※ 우측 빨간 표시된 부분
> 03
▶ 기타
1
5
Chapter6. 디자인 편집
스마트웹 색상 변경하기
색상 변경은 의외로 간단합니다. 바꿀 부분의
색깔이 있다면 그 곳의 색상코드만 입력하고
[등록]하면 끝이니까요.
서브 페이지를 보면 그룹 메뉴색상을 변경해 보
도록 하겠습니다.
※ 다른 부분들도 색상을
이와 같이 변경하시면됩니
다.
※ 헤드부분 라인색상은 빈
칸으로 하시면 투명처리됩
니다.
[등록] 버튼을 클릭합니다.
우측을 보시면 색상이 바뀐
것을 확인하실 수 있습니다.
3
2
4 [그림1]과 같이 그룹부분 배경 색상 옆에 색상코드를
클릭하면 [그림2]와 같은 색상코드표가 나오는데 원
하는 색상을 선택합니다.
[모바일 디자인 페이지]로 이동합니다.
[그림1] [그림2]
> >>
▶ 프로그램 다운로드
1
4
Chapter7. 동영상 인코딩
프로그램 다운로드 설치하기(1)
프로그램은 2가지가 필요합니다. [다음팟인코더]
와 [MP4BOX]라는 프로그램입니다.
[다음] 버튼을 클릭합니다.
2 좌측 그림과 같은 페이지가 열리는데 [팟인코더 다운
로드]를 클릭합니다.
3 아래 그림과 같은 팝업창이 뜨면 [실행] 버튼을 클릭
합니다.
관리자 페이지를 접속하면 상단 우측에 [다음팟인코
더]를 클릭합니다.
※ 다음팟인코더는 mp4로 변환하는데 필요하며
MP4BOX는 스트리밍MP4파일로 변환을 위해 사
용됩니다.
※Mp4로 한번만 변환해서 문제는 없으나 실행시
다운로드를 다 받아야 플레이 되서 큰 용량일 수
록 기다려야하는 시간이 있어 MP4BOX로 스트리
밍파일로 한번더 변환하여 기다림없이 바로 재생
을 위함입니다.
> >>
▶ 프로그램 다운로드
5
7
Chapter7. 동영상 인코딩
프로그램 다운로드 설치하기(2)
[동의함] 버튼을 클릭합니다.
설치 경로를 확인하시고 [설치] 버튼을 클릭합니다.
6 구성요소를 확인하시고 [다음] 을 클릭합니다.
※ Daum을 시작페이지로 설정, Daum 클리너 설
치는 사실상 불필요합니다. 체크 해제하세요.
8 설치가 완료되면 [마침] 버튼을 클릭합니다.
다음팟 인코더는 설치되었습니다.
다음 MP4BOX 다운로드 설치과정으로 넘어
가겠습니다.
> >>
▶ 프로그램 다운로드
9
Chapter7. 동영상 인코딩
프로그램 다운로드 설치하기(3)
관리자 페이지 상단 우측 메뉴에서 [MP4BOX] 버튼
을 클릭합니다.
10 [실행]을 클릭합니다.
11 [Next] 버튼을 클릭합니다.
> >>
▶ 프로그램 다운로드
12
Chapter7. 동영상 인코딩
프로그램 다운로드 설치하기(4)
[Next] 버튼을 클릭합니다.
13
14
[I accept the agreement]를 체크하고 [Next] 버튼을
클릭합니다.
설치 경로를 확인하고 [Next] 버튼을 클릭합니다.
설치가 진행이 됩니다.
> >>
▶ 프로그램 다운로드
13
Chapter7. 동영상 인코딩
프로그램 다운로드 설치하기(5)
14
15 [Finish] 버튼을 클릭하여 설치를 완료합니다.
이로써 MP4BOX도 설치가 되었습니다. 2개의 프로
그램을 설치하였으니 준비가 끝나셨습니다. 다음 인
코딩방법으로 넘어가겠습니다.
바탕화면에 아이콘을 생성할지 묻는 화면입니다.
[Next] 버튼을 클릭합니다.
[Install] 버튼을 클릭합니다. 설치과정이 진행됩니다.
> >>
▶ 인코딩 과정
1
Chapter7. 동영상 인코딩
동영상 인코딩 하기 (1)
다음팟 인코더를 실행합니다.
2 [불러오기 +] 버튼을 클릭하여 변환할 동영상을 불러
옵니다.
3 좌측 그림과 같이 동영상이 추가된 것을 확인할 수
있습니다.
4 우측의 [환경설정] 버튼을 클릭합니다.
> >>
▶ 인코딩 과정
5
Chapter7. 동영상 인코딩
동영상 인코딩 하기 (2)
환경설정창에 형식을 클릭하여 [MP4]PSP, iPod 및
핸드폰용을 선택합니다.
6 코덱설정부분의 비디오 코덱을 MPEG-4 AVC/H.264
로 선택하여 줍니다.
7 화면크기는 320x240(qvga)를 선택합니다.
※ 대부분 모바일의 동영상파일은 MP4이 가장 많이
사용되는 확장자이며 거의 모든 기종을 지원한다고
보시면됩니다.
※ 화면크기는 더 크게 하셔도 무방하나 크기가 커
질수록 용량이 늘어난다는 점 유의하시길 바랍니다.
※ 스마트폰에선 MPEG-4 AVC/H.264코덱이 널리
사용되고 있습니다.
8 [확인] 버튼을 클릭합니다.
> >>
▶ 인코딩 과정
9
Chapter7. 동영상 인코딩
동영상 인코딩 하기 (3)
환경설정이 끝났으면 인코딩될 동영상의 저장경로
를 설정합니다.
10 우측 하단의 [인코딩 시작] 버튼을 클릭합니다.
11 인코딩과정이 보여지는 창이 뜨며 인코딩이 완료되
면 알림창이 뜹니다. [닫기]를 누르시면 동영상 1차
인코딩이 끝난것입니다.
※ 환경설정 창에서 코덱설정부분의 비디오 코덱 앞의 [+]
버튼을 누르면 상세설정할 수 있는 옵션이 나타납니다.
참고 동영상 화질을 높이는 방법
※ 비트레이트를 500이상 높이면 화질의 선명도가 좋아
집니다. 키프레임 간격과 프레임(fps)를 20이상 높이면
화면의 끈김현상이 줄고 자연스러운 재생이 됩니다.
※ 설정을 높게 해주면 동영상의 퀄리티가 좋아지기 때
문에 용량도 배로 늘어난다는 점 유의하시기 바랍니다.
※ 원본동영상이 화질이 나쁘면 설정에서 올려도 더 좋
아 지지 않습니다.
> >>
▶ 인코딩 과정
12
Chapter7. 동영상 인코딩
동영상 인코딩 하기 (4)
MP4Box를 실행시킵니다.
13 우측 상단에 [Add] 버튼을 클릭하여 다음팟인코딩한
mp4 파일을 불러옵니다.
14 좌측 그림과 같이 목록이 추가되면 우측하단의 [Mux]
버튼을 클릭합니다.
좌측하단에 보시면 Ready… 부분이 인코딩 과정이 진
행되며 완료가 되면 다시 Ready… 상태가 됩니다.
15 [Clear] 버튼을 클릭하시면 2차 인코딩 과정까지 끝나
신겁니다.
※ 파일은 mp4파일을 불러왔던 폴더경로에 파일명
이 mp4-muxed라고 뒤에 추가되어 생성되어있습
니다.
예) Wildlife.mp4 → Wildlife.mp4-muxed.mp4
> 01
▶ 동영상 등록하기
1
2 상단 메뉴에서 홈페이지 편집 < 동영상 관리를 클릭
합니다.
[관리자페이지] 버튼을 클릭합니다.
3 상세설명에 어떤 동영상인지 주석을 다시고 [찾아보
기] 버튼을 클릭하여 동영상파일을 불러옵니다.
Chapter7. 동영상 인코딩
인코딩한 동영상을 이제 스마트웹에 올려보도록 하자. (1)
※ 동영상 호스팅을 신청하셨을 경우 동영상 관
리라는 관리자 페이지를 제공합니다.
> 01
▶ 동영상 등록하기
4
5 좌측 그림과 같이 동영상이 업로드가 완료 되었습니
다.
[확인] 버튼을 클릭하시면 동영상이 업로드됩니다.
6 모바일 페이지 수정에서 동영상을 올릴 해당 게시판
에 들어가시고 [글쓰기] 버튼을 클릭합니다.
Chapter7. 동영상 인코딩
인코딩한 동영상을 이제 스마트웹에 올려보도록 하자. (2)
※ [미리보기] 버튼
을 클릭하시면 동영
상 미리보기 플레이
어가 재생되어 바로
확인을 할 수 있습
니다.
※ 스마트웹에서도 정상적으
로 재생되는 것을 확인할
수 있습니다.
> 01
▶ 동영상 등록하기
7
8 위 그림과 같이 업로드된 동영상 파일 목록이 나옵니
다. 여기서 원하는 동영상을 넣어 주시면 됩니다.
인코딩을 한 mp4파일을 버튼을 클릭하여 선
택합니다.
제목과 내용을 입력하고 아래 메뉴에 모바일 동영상
링크 부분 우측에 버튼을 클릭합니다.
9 웹 동영상 링크에도 파일을 추가합니다.
Chapter7. 동영상 인코딩
인코딩한 동영상을 이제 스마트웹에 올려보도록 하자. (2)
※ 모바일 동영상 링크에만 올리셔도 무방하지만
웹 동영상 링크에도 추가해 주는 이유는 pc로 접속
하였을 경우에도 이상없이 재생을 위한 것입니다.
10 [글쓰기] 버튼을 클릭하면 동영상 첨부글 작성이 완
료욉니다.
11 정상적으로 동영상 플레이가 되는 것을 확인할수 있
습니다.