스마트웹 사용자 메뉴얼 - igkorea.co.kr 디자인편집 - 프로그램 다운로드 ......

스마트웹 사용자 메뉴얼

스마트웹을 이용하시는데 이해를 돕기 위해 본 매뉴얼을 제공합니다.

고객의 꿈을 이룰 수 있는 E- 비지니스 파트너.

사용설명서의 화면과 그림과는 약간의 차이는 있을 수 있습니다.

http://www.igkorea.net

목차

- 스마트웹에 접속하기

① 주소를 직접입력한 접속방법

② QR코드를 이용한 접속방법

- 북마크 아이콘 생성방법

- 메인화면 구성

- 서브화면 구성

- 회원가입하기

- 관리자권한받기

- 게시판 글쓰기

① 글쓰기

② 에디터 사용방법

- 게시판 변경방법

- 회원관리 및 접속현황

- 스마트웹 메뉴관리

① 대 메뉴관리

② 소 메뉴 관리

Chapter1. 스마트웹 활용

Chapter2. 스마트웹 구성

Chapter3. 회원가입

Chapter4. 게시판 활용

Chapter5. 관리자 기능

- 로고 바꾸기

- 아이콘 바꾸기

- 배경 바꾸기

- 기타

① 이미지 변경등록하는 방법

② 메뉴 아이콘 순서 바꾸는 방법

③ 스마트웹 색상 변경하기

Chapter6. 디자인 편집

- 프로그램 다운로드

- 인코딩 과정

- 동영상 등록하기

Chapter7. 동영상 인코딩

http://www.igkorea.net


> 01 주소를 직접입력한 접속방법 - PC로 접근 시

▶ 스마트웹에 접속하기

1

2 익스플로러 상단에 보시면 주소 입력이 있는데 이

곳에 스마트웹주소인 샘플교회.aub.kr를 입력하고

[Enter] 실행을 합니다.

인터넷 익스플로러창을 실행시킵니다.

3 왼쪽 그림과 같이 인터넷으로 홈페이지에 접속하신

것을 확인하실 수 있습니다.


> 01 주소를 직접입력한 접속방법 - 스마트폰으로 접근 시


1

2 익스플로러 상단에 보시면 주소 입력이 있는데 이

곳에 스마트웹주소인 샘플교회.aub.kr을 입력하고

[이동] 또는 [Go] 를 클릭합니다.

스마트폰에서 인터넷을 실행시킵니다.

3 왼쪽 그림과 같이 스마트폰에 적합한 스마트웹 홈페

이지를 접속하신 것을 확인 하실 수 있습니다.

참고 ※ 아이폰은 safari를 실행합니다.


> 02 QR코드를 이용한 접속방법


1

3 왼쪽 그림과 같은 화면이 보여지게 되는데 메뉴중에

[코드] 라는 버튼을 클릭합니다.

4 QR코드를 찍을 수 있는 카메라가 실행되는데 QR코

드를 인식할 수 있는 거리에 1~3초 가만히 계시면

스마트웹 홈페이지가 자동으로 접속이 되는 것을 확

인 하실 수 있습니다.

QR코드는 스마트폰 보급이후 다양한 정보를 담을 수 있다는 점에 널리 사용되고 있으며, QR코드를 찍기 위해선 QR코드

리더기가 필요한데 안드로이드의 마켓이나 아이폰의 앱스토어에서 쉽게 무료어플을 받아서 사용하실 수 있습니다. 보편

적으로 많이 사용되는 네이버어플로 QR코드를 찍어 보겠습니다.

네이버 어플을 실행시킵니다. 다음그림의 오른쪽 화

면이 보여지게 됩니다.

보여진 화면의 하단부분에 네이버 어플 기능메뉴가

보이는데 [검색] 이란 버튼을 클릭합니다.

2

※ QR 코드를 찍을 수 있는 어플로는 네이버, 스캐

니, 쿠루쿠루 등 다양한 어플들이 있으며 QR코드어

플은 안드로이드(안드로이드마켓), 아이폰(어플스토

어) 에서 다운 받으 실 수 있습니다.

> 01 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 안드로이드(1)

▶ 북마크 아이콘 등록방법

1

2 [★추가] 버튼을 클릭하고 북마크추가 설정창이 나오

면 [확인]버튼을 눌러줍니다.

스마트웹에 접속합니다. 상단에 주소창 옆에 보면

북마크 버튼을 클릭하여 줍니다.

3 왼쪽 그림과 같이 북마크 리스트에 방금 추가한 것

이 생긴 것을 확인 하실 수 있습니다.

4 확인 후 2초 이상 누르고 계시면 다음과 같은 창이

보여집니다.



5

6 “Android 홈에 바로가기('샘플교회')가 생성되었습니

다.”라는 알림메세지가 뜹니다.

리스트중 [홈에 바로가기 추가] 버튼을 선택합니다.

7 스마트폰 바탕에 보시면 아이콘이 추가 되있는 것을

확인하실 수 있습니다. 언제라도 클릭하시면 주소입

력없이 자동으로 페이지가 열리게 됩니다.

> 01 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 안드로이드(2)


※ 핸드폰 기종마다 메뉴의 이름은 다를 수 있습

니다. 예) [대기화면에 단축메뉴 추가]

> 02 나중에도 바로 접속할 수 있도록 바로가기 아이콘을 만들자 – 아이폰[IOS]


1

2 홈페이지접속한 상태에서 하단 메뉴들중 가운데에

있는 버튼을 클릭합니다.

스마트웹에 접속합니다. 상단에 주소창 에 주소를 입

력하고 [Go] 버튼을 클릭합니다.

3 메뉴가 보여지게 되는데 [홈 화면에 추가] 버튼을 클

릭합니다.

4 상단 우측에 보이는 [추가] 버튼을 클릭합니다.


5 스마트폰 배경에 보시면 북마크 아이콘이 생성되어

있는 것을 확인하실 수 있습니다.

> 01 스마트웹 메인화면 구성내용

▶ 메인화면 구성

1 로고 : 교회의 로고가 들어가는 부분입니다.


1 2

3

4

5

6

2 사이트맵 : 사이트맵 버튼입니다. 그룹메뉴 및 서

브메뉴를 한눈에 확인하실 수 있으며 페이지를 바

로 이동할 수 있는 편리성을 띄고 있습니다.

3 메인 이미지 : 스마트웹의 메인화면입니다. 이미지

로 들어가며 교회의 모습이나 목사님 사진 등 교

회를 대표할만한 이미지를 넣으실 수 있습니다.

4 메뉴 어플 아이콘 : 많이 사용되고 있는 메뉴들을

어플 스타일의 형식으로 보여집니다. 관리자가 직

접 대표적인 메뉴들을 구성하실 수 있습니다.

5 최근게시물 컨텐츠 : 최근 게시물 컨텐츠 부분으

로 새로 올라온 글을 바로 확인할 수 있으며 관리

자는 보여지는 게시판 및 순서를 변경하실 수 있

습니다.

6 시스템 아이콘 : 스마트웹의 기본 아이콘입니다.

홈으로 가기, 로그인, 관리자 페이지 등을 담고 있

습니다.

> 02 스마트웹 서브화면 구성내용

▶ 서브화면 구성

1 그룹 메뉴 : 그룹 메뉴명이 보여집니다.


1

2

3

4

2 서브 페이지 : 그룹안의 서브 페이지들이 보여집니

다.

3 내용 : 페이지마다 보여지는 화면이며 html,

gallery, basic스킨을 적용하여 관리자가 보여주고

싶은 내용을 편집 및 수정, 실시간으로 보여줄 수

있습니다.

4 메뉴 어플 아이콘 : 메인에 있는 메뉴 어플아이콘

이 서브페이지 하단에 따라와서 페이지를 다본 후

쉽게 이동할 수 있는 편의성이 있습니다.

※ 서브페이지 스타일은 3가지 타입을 제공하며 관

리자의 방식에 따라 달라 질 수 있습니다.

Basic 메뉴스타일 상하메뉴 A스타일 상하메뉴 B스타일


> 01 회원가입을 해보자(1)

▶ 회원가입하기

1

2 좌측 모바일 화면 스크롤을 내려보시면 시스템아이

콘에 [로그인] 버튼을 클릭해줍니다.

사이트에 접속한 화면입니다.

3 왼쪽 그림과 같이 로그인 화면이 나오게 되는데 [회

원가입] 버튼을 클릭합니다.

※ 스마트폰에서 접속 후에도 회원가입 진행방법은

동일합니다.


> 01 회원가입을 해보자(2)

▶ 회원가입하기

4

6 회원 개인정보를 입력하시고 하단의 [회원가입완료]

버튼을 클릭합니다.

회원정보 약관과 개인정보 취급방침에 대해 읽어 보

시고 [동의] 버튼에 체크를 합니다.

7 [홈 으로 이동 버튼] 을 클릭하시면 가입이 정상적으

로 진행된 것입니다.

5 약관에 동의 하시고 [약관동의 확인] 버튼을 클릭합

니다.


> 02 회원가입 후 관리자모드에 접속할 수 있는 권한을 부여받자

▶ 관리자 권한받기

1

2 회원가입 후 아이지코리아 고객센터 1577-5865에

전화주시면 관리자확인 후 관리자 승인하여 드립니

다.

회원가입은 하였지만 왼쪽 그림의 관리자로그인을

위해서는 관리자권한을 부여 받아야 홈페이지 관리

를 하실 수 있으십니다.


> 01 관리자 승인을 받았으면 이제 글을 써보자. (1)

▶ 게시판 글쓰기

1

2 로그인하시면 왼쪽 그림과 같이 페이지의 글을 수정

하고 편집할 수 있는 [모바일 페이지 수정] 화면을 확

인 하실 수 있습니다.

- 공지사항에 글을 써보도록 하겠습니다.

관리자 승인이 끝났으니 승인받은 아이디와 비밀번

호을 입력하고 [관리자 로그인] 버튼을 클릭합니다.

3 우측 하단에 [글쓰기] 버튼을 클릭합니다.


> 01


4

5 입력을 완료 했으면 하단에 [글쓰기] 버튼을 클릭합

니다.

다음화면에서 글 제목 및 내용을 입력합니다.

- 공지 : 관리자 일경우 나타나는데, 공지를 체크

하면, 현재 쓴글을 처음글로 제일 위에 표시 할 수

있습니다.

- 제목 : 제목을 입력합니다.

- 내용 : 내용을 입력합니다.

- 모바일 동영상 링크 : 동영상 주소를 입력하면,

모바일웹에서 동영상을 재생 할 수 있습니다.

- 웹 동영상 링크 : 동영상 주소를 입력하면, 홈페

이지내에서 동영상을 재생 할 수 있습니다.

- 파일첨부 : 이미지파일/동영상파일/기타파일 을

업로드 할 수 있습니다.

관리자 승인을 받았으면 이제 글을 써보자. (2)

6 방금 쓴 글이 좌측 그림과 같이 보여집니다.

※ 우측 그림은 스마트폰으

로 확인한 것입니다.

PC화면에서 보

여지는 화면과 스마트폰에

서 보여지는 모습은 다소 다

를 수 있으니 유념하시기 바

랍니다.

참고


> 02


에디터 기능을 알아보자.

붙여넣기 : 다른 곳에서 복사된 내용을 글쓰기 클

립보드에 붙여 넣기를 할 수 있습니다.

전체선택 : 입력한 내용을 전부 선택합니다.

글씨 진하게 : 글씨를 진하게 표시합니다.

글씨 기울임 : 글씨를 기울게 표시합니다.

글씨 밑줄긋기 : 글씨에 밑줄을 긋습니다.

글씨 취소선 : 글씨중간에 줄을 긋습니다.

형광펜 : 글씨를 강조할 때 글씨 쓴 뒷부분에 색을

형광펜처럼 칠하여 줍니다.

글자색 : 글씨 색상을 변경해줍니다.

왼쪽정렬 : 글 정렬을 왼쪽으로 합니다.

가운데정렬 : 글 정렬을 가운데로 합니다.

오른쪽정렬 : 글 정렬을 오른쪽로 합니다.

양쪽정렬 : 글 정렬을 양쪽으로 합니다.

스타일 : 글의 스타일을 정하여 줍니다.

글꼴 : 글씨 서체를 정하여 줍니다.

글꼴 크기 : 글씨의 크기를 정하여 줍니다.

서식 지우기 : 글의 스타일이 있다면 서식을 지워

기본으로 바꿔줍니다.

글상자 : 글상자를 만들어 줍니다.

특수 문자 : 특수문자를 입력합니다.

가로줄 : 가로줄을 입력합니다.

테이블 만들기 : 테이블(표)를 만들 수 있습니다.

테이블 고치기 : 테이블(표)를 수정 할 수 있습니다.

하이퍼링크 : 선택 영역에 URL 링크를 넣어줄 수

있습니다.

하이퍼링크 없애기 : 링크가 있으면 링크를 없애

줍니다.

내 PC 사진넣기 : 자신의 컴퓨터에 있는 사진을

올릴 수 있습니다.

웹 사진넣기 : 웹에 있는 사진의 URL을 입력하여

가져 올 수 있습니다.

지도 : 구글지도서비스로 주소를 입력하여 지도

를 삽입할 수 있습니다.

글쓰기 게시판에 편의를 위하여 위지위그(WYSIWYG) 글쓰기를 제공하여 손쉽게 편집할 수 있도록 에디터를 제공하고 있

습니다. 에디터의 기능을 알고 사용하면 좀 더 멋진 글쓰기 표현이 될 것입니다. 이제 에디터의 기능에 대해서 알아보도록

하겠습니다.

> >> 관리자 편의에 맞게 게시판 스킨을 바꿔보자. (1)

▶ 게시판 변경방법

1 예를들어 섬기는분들 gallery스킨을 basic스킨으로

바꿔 보도록 하겠습니다.

모바일 페이지 수정에서 gallery게시판인 섬기는분

들 게시판에 들어갑니다. 게시판 우측 상단에 [관리

자] 버튼을 클릭합니다.

2 왼쪽 그림과 같이 새창으로 관리자 페이지가 열립니

다.


글쓰는 방법은 동일하지만 스킨스타일따라 보이는 모습이 달라 용도에 맞게 변경하여 사용하실 수 있습니다. 기본적으로

스마트웹에 맞게 basic, html1, gallery스킨을 제공하고 있으며 관리자는 게시판 스킨을 변경할 수 있습니다.

html1스킨 gallery스킨 basic스킨

※ 관리자 로그인이 된 상태라면 게시판 상단에

[관리자]라는 버튼이 보이게 됩니다.

※ html1 스킨은 우측 하단에 보입니다.

> >>

▶ 게시판 변경방법

3

4 하단 [확인] 버튼을 클릭하시면 변경이 됩니다.

보이는 창 스크롤을 내려 아래쪽에 보시면 스킨 디

렉토리라는 부분이 있습니다. 스킨을 보면 gallery스

킨으로 되어 있는 것을 확인할 수 있습니다. 스킨을

basic스킨으로 바꿔서 선택합니다.


관리자 편의에 맞게 게시판 스킨을 바꿔보자. (2)

6 스킨이 어떻게 스마트폰으로 바뀌었는지 확인해 보

겠습니다. 좌측 [그림1] 은 바꾸기 전인 gallery스킨

이며 [그림2] basic스킨으로 변경 후 모습입니다.

[그림1] [그림2]

5 좌측 그림과 같이 gallery스킨이 basic스킨으로 바뀐

것을 확인 하실 수 있습니다.

> 01

▶ 회원관리 및 접속현황

1

2 등록된 회원은 관리자 메인페이지에서도 확인할 수

있지만 권한부여 및 등급설정은 좌측그림에서와 같

이 회원관리 < 회원관리를 클릭합니다.

[관리자페이지] 버튼을 클릭합니다.

3 권한을 변경하고 [선택수정]을 클릭하면 권한을 쉽게

변경하실 수 있습니다.


스마트웹에 가입된 회원들을 관리하자.

※ 하지만 앞서 말한 것과 같이 목록 앞에 체크버튼

에 체크를 하지 않고 [선택수

정] 버튼을 클릭하면 수정되지

않습니다. 수정할 목록은 선택

해주는 것이 필수입니다.


로 접속했을 때의 화면입니

다.

> 02

▶ 회원관리 및 접속현황

1

2 상단 메뉴에서 회원관리 < 접속자현황을 클릭합니다.


3 기간별로 접속한 IP 및 접속경로, 브라우저, OS, 시간

을 정리하여 보여줍니다. 접속자, 도메인, 브라우저,

OS, 시간, 요일, 날짜별로 통계를 낼 수 있습니다.


스마트웹의 접속현황을 보자.


로 접속했을 때의 화면입니

다.

> 01

▶ 스마트웹 메뉴관리

1

2 상단 메뉴에서 홈페이지 편집 < 대 메뉴관리를 클릭

합니다.


3 대 메뉴관리 목록이 나오는데 이 곳에서 원하는 그룹

메뉴이름과 순서를 설정하실 수 있습니다.


대 메뉴관리, 그룹메뉴이름 및 순서를 바꿔보자.(1)

> 01


4

7 좌측 그림과 같이 순서와 이름이 바뀌었습니다.

어떻게 바뀌었는지 스마트폰으로 확인해 보겠습니다.

예를 들어 교회소개라는 그룹의 이름을 샘플교회로

바꾸고 순서를 2번째로 바꿔보겠습니다.


5 교회소개 목록 앞에 체크를 해주시고 교회소개이름

을 샘플교회로 바꿉니다.

6 메뉴순서는 0에서 1번으로 바꾸고 메뉴순서가 1번

이었던 말씀과찬양은 0번으로 바꿔주고 [선택수정]

을 클릭하여 줍니다.

※ 순서는 중복되는 번호가 없게 해주셔야 하며 0

부터 첫번째입니다. 예) 0-첫번째, 1-두번째 …

8 쉽게 사이트맵을 확인해 보겠습니다.

[그림1]은 바꾸기전 화면이고 [그림2]는 대 메뉴를 수

정한 다음의 모습입니다.

[그림1] [그림2]

※ 교회소개그룹은 샘플교회로 이름이 바뀌었고 2

번째로 이동되었고 말씀과 찬양은 1번째로 이동이

된 것을 확인 하실 수 있습니다.

※ 소 메뉴 역시 동일한 방법으로 수정하시면 됩니

다.

대 메뉴관리, 그룹메뉴이름 및 순서를 바꿔보자.(2)

> 02


홈페이지 관리 > 소 메뉴관리


소 메뉴관리 - 소 메뉴를 생성하기

3 좌측 그림과 같이 소 메뉴가 생성 된것을 확인하실

수 있습니다.

※ 검색순서는 중복 되지 않게 바꿔주셔야 합니다.

기본 적으로 생성되면 검색순서는 0으로 잡힐 것입

니다.

소 메뉴관리 역시 동일한 방법으로 대 메뉴관리와 같이 수

정하시면 되며 소메뉴 생성 방법에 대해 알아 보겠습니다.

1 생성 버튼을 클릭합니다.

2 소 메뉴를 만들 그룹을 선택하고 게시판 제목을 입력

하고 [확인] 버튼을 클릭합니다.

http://980780.igkorea.net/adm/board_form.php

> 02



3 좌측 그림과 같이 소 메뉴가 복사생성 된것을 확인하

실 수 있습니다.

※ 기본 적으로 복사생성되면 검색순서는 해당 그룹

내에 마지막번호로 자동으로 입력됩니다.

생성 되있는 소 메뉴를 복사하는 방법을 알아 보겠습니다.

1 [복사] 버튼을 클릭합니다.

2 게시판 제목과 복사 유형을 체크 하시고 [복사] 버

튼을 클릭하시면 복사 됐다는 알림메세지와 함께

바로 소 메뉴가 복사되어 생성이 됩니다.

소 메뉴관리 - 소 메뉴를 복사생성하기

> >>

▶ 로고 바꾸기

1

2 상단 메뉴에서 홈페이지편집 > 모바일 디자인을 클릭

합니다.

3 모바일 다자인 메뉴 화면이 나오면 스크롤을 내려

아래쪽에 메인로고 부분 카테고리가 보일 것입니다.

이 곳에 이미지를 첨부 하시고 [등록] 버튼을 클릭하

면 바뀌게 됩니다.


로고를 바꿔 보자.


※ 로고 이미지 사이즈는

가로 200px ~ 260px,

세로 67px(고정)으로 작

업하셔야 합니다.

> >>

▶ 아이콘 바꾸기

1


합니다.

3 모바일 다자인 메뉴 페이지 처음에 메뉴 편집기 부

부분이 있습니다. 이 곳에 이미지를 첨부 하시고 [등

록] 버튼을 클릭하면 바뀌게 됩니다.


메인 어플 아이콘을 바꿔 보자.


※ 아이콘 이미지 사이즈는

가로 65px, 세로 65px를 권

장합니다. 보다 커도 상관은

없으며 가로,세로 비율은 1:1

로 큰 이미지를 넣어도 자동

으로 이미지 사이즈가 65px

로 잡혀서 들어가지며 선명해

집니다.

> >>

▶ 배경 바꾸기

1

3


메인 아이콘 배경을 바꿔 보자.


※ 아이콘배경 이미지 사

이즈는 세로 315px를 권

장합니다. 가로사이즈는

상관은 없지만 똑같은 패

턴으로 반복되는 점을 알

아두세요.

모바일 다자인 메뉴 화면이 나오면 스크롤을 내려

아래쪽에 메인어플 메뉴 부분 카테고리가 보일 것입

니다. [이미지사용]을 체크, 이미지를 첨부 하시고

[등록] 버튼을 클릭하면 바뀌게 됩니다.


합니다.

> 01

▶ 기타

1

3


이미지 변경등록하는 방법(1)

예를 들어 교회소개 아이콘 이미지를 변경등록해 보

겠습니다.

[찾아보기] 버튼을 클릭합니다.

※ 변경된 이미지가 미리보기가 되지 않는 다면 인

터넷 익스플로러 [도구] > [인터넷옵션] > [검색기록 설

정]에서 [페이지를 열 때마다]가 체크 되어있는지 확

인합니다.

아이콘이 변경된 것을 왼쪽그림을 보시면 바뀔 이

미지 모습을 미리 확인할 수 있습니다.

2 업로드할 파일을 선택합니다. 그리고 [열기] 버튼을

클릭합니다.

> 01

▶ 기타

4


이미지 변경등록하는 방법(2)

스크롤을 내려 [등록] 버튼을 클릭합니다.

※ 다른 이미지 변경등록도 지금해본 아이콘 이미지

변경등록 방법과 다를바가 없습니다. 변경하고 직접

확인하여 보다 더 멋진 개인 스마트웹을 만들어 봅

시다.

5 저장이 잘 되었는지 모바일로 확인해 보겠습니다.

[그림1]은 기존 아이콘 모습이고 [그림2]는 지금

바꿔본 아이콘 모습입니다.

[그림1] [그림2]

> 02

▶ 기타

1

4


메뉴 아이콘 순서 바꾸는 방법

스마트웹 메인에 보면 보이는 12개의 어플 아이콘

순서들을 바꿔 보겠습니다.

좌측 그림과 같이 사용여부와 메뉴순서를 입력하는

곳을 확인하실 수 있습니다.

※ 아이콘은 12개 이상 들어

가도 무방하나 첫페이지 전부

보여지는 것이 아니라 우측

화면처럼 계속적으로 추가되

어 보여집니다.

※ 아이콘 메뉴 아래 버튼으

로 다음, 이전페이지를 확인할

수 있습니다.

좌측 [그림1]은 아이콘 메뉴 순서를 변경 전 모습이

고 [그림2]는 아이콘 메뉴 순서를 변경등록한 모습입

니다.

2 변경하실 순서를 잘 생각하신다음에 사용여부에 필

요한 아이콘만 12개를 체크하고 메뉴순서에는

0~11까지 12개의 순서를 정하여 줍니다.

※ 중복되는 번호가 있으면 메뉴가 틀어질 수 있으

니 유의하세요.

3 스크롤을 내려 [등록] 버튼을 클릭합니다.

[그림1] [그림2]

※ 우측 빨간 표시된 부분

> 03

▶ 기타

1

5


스마트웹 색상 변경하기

색상 변경은 의외로 간단합니다. 바꿀 부분의

색깔이 있다면 그 곳의 색상코드만 입력하고

[등록]하면 끝이니까요.

서브 페이지를 보면 그룹 메뉴색상을 변경해 보

도록 하겠습니다.

※ 다른 부분들도 색상을

이와 같이 변경하시면됩니

다.

※ 헤드부분 라인색상은 빈

칸으로 하시면 투명처리됩

니다.

[등록] 버튼을 클릭합니다.

우측을 보시면 색상이 바뀐

것을 확인하실 수 있습니다.

3

2

4 [그림1]과 같이 그룹부분 배경 색상 옆에 색상코드를

클릭하면 [그림2]와 같은 색상코드표가 나오는데 원

하는 색상을 선택합니다.

[모바일 디자인 페이지]로 이동합니다.

[그림1] [그림2]

> >>

▶ 프로그램 다운로드

1

4


프로그램 다운로드 설치하기(1)

프로그램은 2가지가 필요합니다. [다음팟인코더]

와 [MP4BOX]라는 프로그램입니다.

[다음] 버튼을 클릭합니다.

2 좌측 그림과 같은 페이지가 열리는데 [팟인코더 다운

로드]를 클릭합니다.

3 아래 그림과 같은 팝업창이 뜨면 [실행] 버튼을 클릭

합니다.

관리자 페이지를 접속하면 상단 우측에 [다음팟인코

더]를 클릭합니다.

※ 다음팟인코더는 mp4로 변환하는데 필요하며

MP4BOX는 스트리밍MP4파일로 변환을 위해 사

용됩니다.

※Mp4로 한번만 변환해서 문제는 없으나 실행시

다운로드를 다 받아야 플레이 되서 큰 용량일 수

록 기다려야하는 시간이 있어 MP4BOX로 스트리

밍파일로 한번더 변환하여 기다림없이 바로 재생

을 위함입니다.

> >>


5

7



[동의함] 버튼을 클릭합니다.

설치 경로를 확인하시고 [설치] 버튼을 클릭합니다.

6 구성요소를 확인하시고 [다음] 을 클릭합니다.

※ Daum을 시작페이지로 설정, Daum 클리너 설

치는 사실상 불필요합니다. 체크 해제하세요.

8 설치가 완료되면 [마침] 버튼을 클릭합니다.

다음팟 인코더는 설치되었습니다.

다음 MP4BOX 다운로드 설치과정으로 넘어

가겠습니다.

> >>


9



관리자 페이지 상단 우측 메뉴에서 [MP4BOX] 버튼

을 클릭합니다.

10 [실행]을 클릭합니다.

11 [Next] 버튼을 클릭합니다.

> >>


12



[Next] 버튼을 클릭합니다.

13

14

[I accept the agreement]를 체크하고 [Next] 버튼을

클릭합니다.

설치 경로를 확인하고 [Next] 버튼을 클릭합니다.

설치가 진행이 됩니다.

> >>


13



14

15 [Finish] 버튼을 클릭하여 설치를 완료합니다.

이로써 MP4BOX도 설치가 되었습니다. 2개의 프로

그램을 설치하였으니 준비가 끝나셨습니다. 다음 인

코딩방법으로 넘어가겠습니다.

바탕화면에 아이콘을 생성할지 묻는 화면입니다.

[Next] 버튼을 클릭합니다.

[Install] 버튼을 클릭합니다. 설치과정이 진행됩니다.

> >>

▶ 인코딩 과정

1


동영상 인코딩 하기 (1)

다음팟 인코더를 실행합니다.

2 [불러오기 +] 버튼을 클릭하여 변환할 동영상을 불러

옵니다.

3 좌측 그림과 같이 동영상이 추가된 것을 확인할 수

있습니다.

4 우측의 [환경설정] 버튼을 클릭합니다.

> >>


5



환경설정창에 형식을 클릭하여 [MP4]PSP, iPod 및

핸드폰용을 선택합니다.

6 코덱설정부분의 비디오 코덱을 MPEG-4 AVC/H.264

로 선택하여 줍니다.

7 화면크기는 320x240(qvga)를 선택합니다.

※ 대부분 모바일의 동영상파일은 MP4이 가장 많이

사용되는 확장자이며 거의 모든 기종을 지원한다고

보시면됩니다.

※ 화면크기는 더 크게 하셔도 무방하나 크기가 커

질수록 용량이 늘어난다는 점 유의하시길 바랍니다.

※ 스마트폰에선 MPEG-4 AVC/H.264코덱이 널리

사용되고 있습니다.

8 [확인] 버튼을 클릭합니다.

> >>


9



환경설정이 끝났으면 인코딩될 동영상의 저장경로

를 설정합니다.

10 우측 하단의 [인코딩 시작] 버튼을 클릭합니다.

11 인코딩과정이 보여지는 창이 뜨며 인코딩이 완료되

면 알림창이 뜹니다. [닫기]를 누르시면 동영상 1차

인코딩이 끝난것입니다.

※ 환경설정 창에서 코덱설정부분의 비디오 코덱 앞의 [+]

버튼을 누르면 상세설정할 수 있는 옵션이 나타납니다.

참고 동영상 화질을 높이는 방법

※ 비트레이트를 500이상 높이면 화질의 선명도가 좋아

집니다. 키프레임 간격과 프레임(fps)를 20이상 높이면

화면의 끈김현상이 줄고 자연스러운 재생이 됩니다.

※ 설정을 높게 해주면 동영상의 퀄리티가 좋아지기 때

문에 용량도 배로 늘어난다는 점 유의하시기 바랍니다.

※ 원본동영상이 화질이 나쁘면 설정에서 올려도 더 좋

아 지지 않습니다.

> >>


12



MP4Box를 실행시킵니다.

13 우측 상단에 [Add] 버튼을 클릭하여 다음팟인코딩한

mp4 파일을 불러옵니다.

14 좌측 그림과 같이 목록이 추가되면 우측하단의 [Mux]

버튼을 클릭합니다.

좌측하단에 보시면 Ready… 부분이 인코딩 과정이 진

행되며 완료가 되면 다시 Ready… 상태가 됩니다.

15 [Clear] 버튼을 클릭하시면 2차 인코딩 과정까지 끝나

신겁니다.

※ 파일은 mp4파일을 불러왔던 폴더경로에 파일명

이 mp4-muxed라고 뒤에 추가되어 생성되어있습

니다.

예) Wildlife.mp4 → Wildlife.mp4-muxed.mp4

> 01

▶ 동영상 등록하기

1

2 상단 메뉴에서 홈페이지 편집 < 동영상 관리를 클릭

합니다.


3 상세설명에 어떤 동영상인지 주석을 다시고 [찾아보

기] 버튼을 클릭하여 동영상파일을 불러옵니다.


인코딩한 동영상을 이제 스마트웹에 올려보도록 하자. (1)

※ 동영상 호스팅을 신청하셨을 경우 동영상 관

리라는 관리자 페이지를 제공합니다.

> 01


4

5 좌측 그림과 같이 동영상이 업로드가 완료 되었습니

다.

[확인] 버튼을 클릭하시면 동영상이 업로드됩니다.

6 모바일 페이지 수정에서 동영상을 올릴 해당 게시판

에 들어가시고 [글쓰기] 버튼을 클릭합니다.



※ [미리보기] 버튼

을 클릭하시면 동영

상 미리보기 플레이

어가 재생되어 바로

확인을 할 수 있습

니다.

※ 스마트웹에서도 정상적으

로 재생되는 것을 확인할

수 있습니다.

> 01


7

8 위 그림과 같이 업로드된 동영상 파일 목록이 나옵니

다. 여기서 원하는 동영상을 넣어 주시면 됩니다.

인코딩을 한 mp4파일을 버튼을 클릭하여 선

택합니다.

제목과 내용을 입력하고 아래 메뉴에 모바일 동영상

링크 부분 우측에 버튼을 클릭합니다.

9 웹 동영상 링크에도 파일을 추가합니다.



※ 모바일 동영상 링크에만 올리셔도 무방하지만

웹 동영상 링크에도 추가해 주는 이유는 pc로 접속

하였을 경우에도 이상없이 재생을 위한 것입니다.

10 [글쓰기] 버튼을 클릭하면 동영상 첨부글 작성이 완

료욉니다.

11 정상적으로 동영상 플레이가 되는 것을 확인할수 있

습니다.

스마트웹 사용자 메뉴얼 - igkorea.co.kr 디자인편집 - 프로그램 다운로드 ......

Documents