스마트웹

사용자

매뉴얼

– APP1스킨

스마트웹을

이용하시는데

이해를

돕기

위해

본

매뉴얼을

제공합니다.

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

사용설명서의

화면과

그림과는

약간의

차이는

있을

수

있습니다.

http://www.igkorea.co.kr

목차

-

스마트웹에

접속하기

①

주소를

직접입력한

접속방법

②

QR코드를

이용한

접속방법

-

북마크

아이콘

생성방법

- 메인화면

구성

-

서브화면

구성

- 회원가입하기

-

관리자권한받기

- 게시판

글쓰기

①

글쓰기

②

에디터

사용방법

- 게시판

변경방법

- 게시글

순서변경방법

- 회원관리

및

접속현황

- 스마트웹

메뉴관리

①

대

메뉴관리

②

소

메뉴

관리

Chapter1.

스마트웹

활용

Chapter2.

스마트웹

구성

Chapter3.

회원가입

Chapter4.

게시판

활용

Chapter5.

관리자

기능

- 인트로

사용하기

- 로고

바꾸기

- 아이콘

바꾸기

- 배경 바꾸기

- 기타

①

이미지

변경등록하는

방법

②

메뉴

아이콘

순서

바꾸는

방법

③

스마트웹

색상

변경하기

Chapter6.

디자인

편집

Chapter7.

동영상

인코딩

http://www.igkorea.co.kr

-

다음팟

인코더, Mp4box

①

프로그램

다운로드

②

인코딩

과정

-

핸드브레이크

①

프로그램

다운로드

②

인코딩

과정

-

동영상

등록하기

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 내용

: 페이지마다

보여지는

화면으로

관리자가

보여주고

싶은

내용을

편집

및

수정, 실시간으로

보여줄

수

있습니다.

4 메뉴

어플

아이콘

: 메인에

있는

메뉴

어플아이콘

이

서브페이지

하단에

따라와서

페이지를

다본

후

쉽게

이동할

수

있는

편의성이

있습니다.

※

서브페이지

스타일은

3가지

타입을

제공하며

관

리자의

방식에

따라

달라

질

수

있습니다.

Basic 메뉴스타일

상하메뉴

A스타일

상하메뉴

B스타일

Chapter3. 회원가입

> 01 회원가입을

해보자(1)

▶

회원가입하기

1

2 좌측

모바일

화면

스크롤을

내려보시면

시스템아이

콘에

[로그인] 버튼을

클릭해줍니다.

사이트에

접속한

화면입니다.

3 왼쪽

그림과

같이

로그인

화면이

나오게

되는데

[회

원가입]

버튼을

클릭합니다.

※

스마트폰에서

접속

후에도

회원가입

진행방법은

동일합니다.

Chapter3. 회원가입

> 01 회원가입을

해보자(2)

▶

회원가입하기

4

6 회원

개인정보를

입력하시고

하단의

[회원가입완료]

버튼을

클릭합니다.

회원정보

약관과

개인정보

취급방침에

대해

읽어

보

시고

[동의] 버튼에

체크를

합니다.

7 [홈

으로

이동

버튼] 을

클릭하시면

가입이

정상적으

로

진행된

것입니다.

5 약관에

동의

하시고

[약관동의

확인] 버튼을

클릭합

니다.

Chapter3. 회원가입

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

▶

관리자

권한받기

1

2 회원가입

후

아이지코리아

고객센터

1577-5865에

전화주시면

관리자확인

후

관리자

승인하여

드립니

다.

회원가입은

하였지만

왼쪽

그림의

관리자로그인을

위해서는

관리자권한을

부여

받아야

홈페이지

관리

를

하실

수

있으십니다.

! 여기서

잠깐

!

※

그림1은

회원가입한

후

바로

로그인한

화면입니다. 하지만

관리자

권한을

부여받지

못했기

때문에

‘일반회원으로

로그인

되었습니다’라고

표시됩니다.

※

그림2는

회원가입한

후

관리자권한을

부여받아

로그인한

화면입니다. 관리자권한을

받으셔야

다음

그림처럼

페이

지

수정과

관리자

페이지

등이

보여지게

됩니다.

[그림1] [그림2]

Chapter4. 게시판

활용

> 01 관리자

승인을

받았으면

이제

글을

써보자. (1)

▶

게시판

글쓰기

1

2

관리자

승인이

끝났으니

승인받은

아이디와

비밀번

호을

입력하고

[관리자

로그인] 버튼을

클릭합니다.

3 우측

하단에

[글쓰기] 버튼을

클릭합니다.

로그인하시면

왼쪽

그림과

같이

페이지의

글을

수정

하고

편집할

수

있는

[페이지

수정] 화면을 확인 하실

수

있습니다.

-

교회소식에

글을

써보도록

하겠습니다. 페이지

수

정

화면에서

왼쪽

메뉴들

중에

교회소식을

클릭합니

다.

Chapter4. 게시판

활용

> 01

▶

게시판

글쓰기

관리자

승인을

받았으면

이제

글을

써보자. (2)

6 방금

쓴

글이

좌측

그림과

같이

보여집니다.

※

우측

그림은

스마트폰으

로

확인한

것입니다.

PC화면에서

보

여지는

화면과

스마트폰에

서

보여지는

모습은

다소

다

를

수

있으니

유념하시기

바

랍니다.

참고

4

5 입력을

완료

했으면

하단에

[글쓰기] 버튼을

클릭합

니다.

다음화면에서

글

제목

및

내용을

입력합니다.

- 공지 : 관리자

일경우

나타나는데, 공지를

체크

하면

현재

쓴글을

제일

위에

표시

할

수

있습니다.

- 제목 : 제목을

입력합니다.

- 내용 : 내용을

입력합니다.

- 링크 #1 & 링크 #2 : 주소를

입력하면

링크가

표시됩니다.

- 음원 URL : 음원파일의

주소를

입력하면

음악

재생이

가능합니다.

-

저화질

URL

& 고화질

URL : 동영상

주소를

입

력하면

동영상을

재생

할

수

있습니다.

-

파일첨부

: 이미지파일/동영상파일/기타파일

을

업로드

할

수

있습니다.

Chapter4. 게시판

활용

> 02

▶

게시판

글쓰기

에디터

기능을

알아보자.

붙여넣기

:

다른

곳에서

복사된

내용을

글쓰기

클

립보드에

붙여

넣기를

할

수

있습니다.

전체선택

:

입력한

내용을

전부

선택합니다.

글씨

진하게

:

글씨를

진하게

표시합니다.

글씨

기울임

:

글씨를

기울게

표시합니다.

글씨

밑줄긋기

:

글씨에

밑줄을

긋습니다.

글씨

취소선

:

글씨중간에

줄을

긋습니다.

형광펜

:

글씨를

강조할

때

글씨

쓴

뒷부분에

색을

형광펜처럼

칠하여

줍니다.

글자색

:

글씨

색상을

변경해줍니다.

왼쪽정렬

:

글

정렬을

왼쪽으로

합니다.

가운데정렬

:

글

정렬을

가운데로

합니다.

오른쪽정렬

:

글

정렬을

오른쪽로

합니다.

양쪽정렬

:

글

정렬을

양쪽으로

합니다.

스타일

:

글의

스타일을

정하여

줍니다.

글꼴

:

글씨

서체를

정하여

줍니다.

글꼴

크기

:

글씨의

크기를

정하여

줍니다.

서식

지우기

:

글의

스타일이

있다면

서식을

지워

기본으로

바꿔줍니다.

글상자

:

글상자를

만들어

줍니다.

특수

문자

:

특수문자를

입력합니다.

가로줄

:

가로줄을

입력합니다.

테이블

만들기

:

테이블(표)를

만들

수

있습니다.

테이블

고치기

:

테이블(표)를

수정

할

수

있습니다.

하이퍼링크

:

선택

영역에

URL 링크를

넣어줄

수

있습니다.

하이퍼링크

없애기

:

링크가

있으면

링크를

없애

줍니다.

내

PC 사진넣기

:

자신의

컴퓨터에

있는

사진을

올릴

수

있습니다.

웹

사진넣기

:

웹에

있는

사진의

URL을

입력하여

가져

올

수

있습니다.

지도

:

구글지도서비스로

주소를

입력하여

지도

를

삽입할

수

있습니다.

글쓰기

게시판에

편의를

위하여

위지위그(WYSIWYG) 글쓰기를

제공하여

손쉽게

편집할

수

있도록

에디터를

제공하고

있

습니다. 에디터의

기능을

알고

사용하면

좀

더

멋진

글쓰기

표현이

될

것입니다. 이제

에디터의

기능에

대해서

알아보도록

하겠습니다.

> >> 관리자

편의에

맞게

게시판

스킨을

바꿔보자. (1)

▶

게시판

변경방법

Chapter4. 게시판

활용

일반형

사진첩형

디자인형

성경말씀형

달력형

구성원소개형

1 예를들어

[섬기는분들] 구성원소개형을

일반형으로

바꿔

보도록

하겠습니다.

먼저

구성원소개형

스킨게시판인

[섬기는분들] 게

시판에

들어갑니다. 게시판

우측

상단에

[관리자]

버튼을

클릭합니다.

※

관리자

로그인이

된

상태라면

게시판

상단에

[관리자]라는

버튼이

보이게

됩니다.

※

디자인형

게시판은

우측

하단에

[관리자]버튼

이

있습니다.

글쓰는

방법은

동일하지만

게시판스타일에

따라

보이는

모습이

달라

용도에

맞게

변경하여

사용하실

수

있습니다. 기본적

으로

스마트웹에

맞게

스타일을

제공하고

있으며

관리자는

게시판

스타일을

변경할

수

있습니다.

> >>

▶

게시판

변경방법

Chapter4. 게시판

활용

관리자

편의에

맞게

게시판

스킨을

바꿔보자. (2)

! 여기서

잠깐

!

※

사진첩리스트

이미지방향과

크기는

사진첩형과

구성원소개형을

클릭했을때

게시판

목록리스트

앞에

이미지를

보

여주게하는

옵션입니다.

※

우측

아이콘

스타일

옵션은

게시판목록

우측에

표시할

스타일을

정합니다.

※

QR코드

생성기

사용유무

옵션은

게시글마다

고유의

QR코드를

생성할

수

있는

기능입니다.

4

[그림1]

[그림2]

2

왼쪽

그림과

같이

구성원소개형

게시판이

일반형

게

시판으로

바뀐

것을

확인

하실

수

있습니다.

※

스킨이

어떻게

스

마트폰으로

바뀌었는

지

확인해

보겠습니다.

우측

[그림1]은 바꾸

기 전인 구성원

소개

형

게시판이며

[그림2]

는

일반형

게시판으로

변경

후

모습입니다.

3 하단

[확인]

버튼을

클릭하시면

변경이

됩니다.

왼쪽

그림과

게시판

관리자설정

하단에

게시판스킨

설정이라는

부분이

있습니다.

스타일을

보면

구성원소개형으로

체크

되어

있는

것

을

확인할

수

있습니다. 스타일을

일반형으로

바꿔

체크

선택

/ 우측

아이콘

스타일을

화살표아이콘으로

체크선택합니다.

>

2 보시는

것과

같이

뒤쪽에

임나래

사모의

게시글이

있습니다. 이

게시글을

앞으로

옮기시면

되는데

게

시글

하단에

보면

화살표

버튼이

있습니다. 초록색

버튼은

앞으로

빨간색

버튼은

뒤로

보내게

됩니다.

초록색

버튼을

클릭해줍니다.

[그림1] [그림2]

1 왼쪽

그림1과 같이 섬기는분들

게시판

하단에

있는

임나래

사모의

게시글을

그림2와

같이제일

위로

옮

겨

보겠습니다.

3 게시글이

앞으로

이동한

것을

확인하실

수

있습니

다.

Chapter4. 게시판

활용

▶

게시글

순서변경방법

게시글의

순서를

변경해보자.(1)>>

>

4 왼쪽

그림과

같이

제일

앞으로

옮기면

스마트

폰

모바일웹에서는

오

른쪽그림과

같이

목록

제일

위에

보여지게

됩

니다.

! 여기서

잠깐

! 다른

게시판의

게시글들은

하단에

화살표

모양이

없으시다구요?

게시판스타일

변경하신것처럼

게시판

관리자

설정

부분

중간에

보시면

리스트

정렬

필드

라는

부분이

있습니다.

wr_order

: 사용자순서

오름차순

을

선택해주고

확인

을

눌러

빠져나오시면

화살표

버튼이

생깁니다.

※ 그 외에 날짜순, 조회글

순, 최신글

순

등

정렬방

법이

있으니

활용해보시기

바랍니다.

Chapter4. 게시판

활용

▶

게시글

순서변경방법

게시글의

순서를

변경해보자.(2)>>

> 01

▶

회원관리

및

접속현황

1

2 등록된

회원은

관리자

메인페이지에서도

확인할

수

있지만

권한부여

및

등급설정은

좌측그림에서와

같

이

회원관리

< 회원관리를

클릭합니다.

[관리자페이지]

버튼을

클릭합니다.

3 권한을

변경하고

[선택수정]을

클릭하면

권한을

쉽게

변경하실

수

있습니다.

Chapter5. 관리자

기능

스마트웹에

가입된

회원들을

관리하자.

※

하지만

앞서

말한

것과

같이

목록

앞에

체크버튼

에

체크를

하지

않고

[선택수

정] 버튼을

클릭하면

수정되지

않습니다. 수정할

목록은

선택

해주는

것이

필수입니다.

※

우측

그림은

스마트폰으

로

접속했을

때의

화면입니

다.

> 02

▶

회원관리

및

접속현황

1

2 상단

메뉴에서

회원관리

< 접속자현황을

클릭합니다.

[관리자페이지]

버튼을

클릭합니다.

3 기간별로

접속한

IP 및

접속경로, 브라우저, OS, 시

간을

정리하여

보여줍니다. 접속자, 도메인, 브라우

저, OS, 시간, 요일, 날짜별로

통계를

낼

수

있습니다.

Chapter5. 관리자

기능

스마트웹의

접속현황을

보자.

※

우측

그림은

스마트폰으

로

접속했을

때의

화면입니

다.

> 01

▶

스마트웹

메뉴관리

1

2 상단

메뉴에서

홈페이지

편집

< 대

메뉴관리를 클릭

합니다.

[관리자페이지]

버튼을

클릭합니다.

3 대

메뉴관리

목록이

나오는데

이

곳에서

원하는

그룹

메뉴이름과

순서를

설정하실

수

있습니다.

Chapter5. 관리자

기능

대

메뉴관리, 그룹메뉴이름

및

순서를

바꿔보자.(1)

> 01

▶

스마트웹

메뉴관리

Chapter5. 관리자

기능

8 쉽게

사이트맵을

확인해

보겠습니다.

[그림1]은

바꾸기전

화면이고

[그림2]는

대

메뉴를

수

정한

다음의

모습입니다.

[그림1] [그림2]

※

교회소개그룹은

샘플교회로

이름이

바뀌었고

2

번째로

이동되었고

말씀과

찬양은

1번째로

이동이

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

※

소

메뉴

역시

동일한

방법으로

수정하시면

됩니

다.

대

메뉴관리, 그룹메뉴이름

및

순서를

바꿔보자.(2)

4

7 좌측

그림과

같이

순서와

이름이

바뀌었습니다.

어떻게

바뀌었는지

스마트폰으로

확인해

보겠습니다.

예를

들어

교회소개라는

그룹의

이름을

샘플교회로

바꾸고

순서를

2번째로

바꿔보겠습니다.

5 교회소개

목록

앞에

체크를

해주시고

교회소개이름

을

샘플교회로

바꿉니다.

6 메뉴순서는

10에서

11번으로

바꾸고

메뉴순서가

11

번이었던

말씀과찬양은

10번으로

바꿔주고

[선택수

정]을

클릭하여

줍니다.

※

순서는

중복되는

번호가

없게

해주셔야

하며

10

부터

첫번째입니다. 예) 10-첫번째, 11-두번째

…

> 02

▶

스마트웹

메뉴관리

Chapter5. 관리자

기능

소

메뉴관리

-

소

메뉴를

생성하기

3 좌측

그림과

같이

소

메뉴가

생성

된것을

확인하실

수

있습니다.

※

검색순서는

중복

되지

않게

바꿔주셔야

합니다.

기본

적으로

생성되면

검색순서는

0으로

잡힐

것입

니다.

2 소

메뉴를

만들

그룹을

선택하고

게시판

제목을

입력

하고

[확인]

버튼을

클릭합니다.

메뉴순서는

대

메뉴관리와

소

메뉴관리

시작

순서

번호가

다르기

때문에

주의하시고

소메뉴

생성

방법에

대해

알아

보겠습니다.

1 생성

버튼을

클릭합니다.

※

소

메뉴관리

역시

동일한

방법으로

대

메뉴관리

와

같이

수정하시면

되며

순서는

대

메뉴관리와

달

리

0번부터

첫번째입니다.

예) 0-첫번째, 1-두번째, 2-세번째, 3-네번째

…

> 02

▶

스마트웹

메뉴관리

Chapter5. 관리자

기능

3 좌측

그림과

같이

소

메뉴가

복사생성

된것을

확인하

실 수 있습니다.

생성

되있는

소

메뉴를

복사하는

방법을

알아

보겠습니다.

1 [복사]

버튼을

클릭합니다.

2 게시판

제목과

복사

유형을

체크

하시고

[복사]

버

튼을

클릭하시면

복사

됐다는

알림메세지와

함께

바로

소

메뉴가

복사되어

생성이

됩니다.

소

메뉴관리

-

소

메뉴를

복사생성하기

※

기본

적으로

복사생성되면

검색순서는

해당

그룹

내에

마지막번호로

자동으로

입력됩니다.

※

복사시

구조만

복사할지

구조와

데이터를

함께

복

사할지의

여부를

확인하시기

바랍니다.

> >>

▶

인트로

사용하기

1

2 상단

메뉴에서

홈페이지편집

> 모바일

디자인을 클릭

합니다.

3 상단부분에

인트로

이미지

부분이

보일

것입니다. 이

곳에

이미지를

첨부, 페이지

이동시간을

입력하시고

[등록]

버튼을

클릭하면

바뀌게

됩니다.

Chapter6. 디자인

편집

인트로

페이지를

만들어

보자.

[관리자페이지]

버튼을

클릭합니다.

※

인트로

이미지

사이즈는

가

로

320px, 세로

510px을

권장

합니다.

※

페이지

이동시간을

초

단위

로

입력하시면

인트로

페이지

가

보이며

빈칸으로

두시거나

0으로

하시면

인트로

페이지가

없이

홈페이지로

이동합니다.

> >>

▶

로고

바꾸기

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]

> 01

1

4

Chapter7. 동영상

인코딩

다음팟

인코더, Mp4box

프로그램

다운로드

설치하기(1)

프로그램은

2가지가

필요합니다. [다음팟인코더]

와

[MP4BOX]라는

프로그램입니다.

[다음] 버튼을

클릭합니다.

2 좌측

그림과

같은

페이지가

열리는데

[팟인코더

다운

로드]를

클릭합니다.

3 아래

그림과

같은

팝업창이

뜨면

[실행] 버튼을

클릭

합니다.

관리자

페이지를

접속하면

상단

우측에

[사용자메뉴

얼]을

클릭하고

매뉴얼

안내창이

새로

열리면

하단에

[다음팟인코더]를

클릭합니다.

※

다음팟인코더는

mp4로

변환하는데

필요하며

MP4BOX는

스트리밍MP4파일로

변환을

위해

사

용됩니다.

※Mp4로

한번만

변환해서

문제는

없으나

실행시

다운로드를

다

받아야

플레이

되서

큰

용량일

수

록

기다려야하는

시간이

있어

MP4BOX로

스트리

밍파일로

한번더

변환하여

기다림없이

바로

재생

을

위함입니다.

▶

다음팟

인코더, Mp4box

>

5

7

Chapter7. 동영상

인코딩

[동의함] 버튼을

클릭합니다.

설치

경로를

확인하시고

[설치] 버튼을

클릭합니다.

6 구성요소를

확인하시고

[다음] 을

클릭합니다.

※

Daum을

시작페이지로

설정, Daum

클리너

설

치는

사실상

불필요합니다. 체크

해제하세요.

8 설치가

완료되면

[마침] 버튼을

클릭합니다.

다음팟

인코더는

설치되었습니다.

다음

MP4BOX 다운로드

설치과정으로

넘어

가겠습니다.

01 다음팟

인코더, Mp4box

프로그램

다운로드

설치하기(2)

▶

다음팟

인코더, Mp4box

>

9

Chapter7. 동영상

인코딩

관리자

페이지를

접속하면

상단

우측에

[사용자메뉴

얼]을

클릭하고

매뉴얼

안내창이

새로

열리면

하단

에

[MP4BOX] 버튼을

클릭합니다.

10 [실행]을

클릭합니다.

11 [Next] 버튼을

클릭합니다.

01 다음팟

인코더, Mp4box

프로그램

다운로드

설치하기(3)

▶

다음팟

인코더, Mp4box

>

12

Chapter7. 동영상

인코딩

[Next]

버튼을

클릭합니다.

13

14

[I accept the agreement]를

체크하고

[Next]

버튼을

클릭합니다.

설치

경로를

확인하고

[Next] 버튼을

클릭합니다.

설치가

진행이

됩니다.

01 다음팟

인코더, Mp4box

프로그램

다운로드

설치하기(2)

▶

다음팟

인코더, Mp4box

>

13

Chapter7. 동영상

인코딩

14

15 [Finish] 버튼을

클릭하여

설치를

완료합니다.

이로써

MP4BOX도

설치가

되었습니다. 2개의

프로

그램을

설치하였으니

준비가

끝나셨습니다. 다음

인

코딩방법으로

넘어가겠습니다.

바탕화면에

아이콘을

생성할지

묻는

화면입니다.

[Next] 버튼을

클릭합니다.

[Install] 버튼을

클릭합니다. 설치과정이

진행됩니다.

01 다음팟

인코더, Mp4box

프로그램

다운로드

설치하기(5)

▶

다음팟

인코더, Mp4box

> 02

▶

다음팟

인코더, Mp4box

1

Chapter7. 동영상

인코딩

다음팟 인코더, Mp4box 동영상 인코딩 하기 (1)

다음팟

인코더를

실행합니다.

2 [불러오기

+] 버튼을

클릭하여

변환할

동영상을

불러

옵니다.

3 좌측

그림과

같이

동영상이

추가된

것을

확인할

수

있습니다.

4 우측의

[환경설정]

버튼을

클릭합니다.

>

5

Chapter7. 동영상

인코딩

환경설정창에

형식을

클릭하여

[MP4]PSP, iPod 및

핸드폰용을

선택합니다.

6 코덱설정부분의

비디오

코덱을

MPEG-4 AVC/H.264

로

선택하여

줍니다.

7 화면크기는

320x240(qvga)를

선택합니다.

※

대부분

모바일의

동영상파일은

MP4이

가장

많이

사용되는

확장자이며

거의

모든

기종을

지원한다고

보시면됩니다.

※

화면크기는

더

크게

하셔도

무방하나

크기가

커

질수록

용량이

늘어난다는

점

유의하시길

바랍니다.

※

스마트폰에선

MPEG-4 AVC/H.264코덱이

널리

사용되고

있습니다.

8 [확인] 버튼을

클릭합니다.

02

▶

다음팟

인코더, Mp4box

다음팟 인코더, Mp4box 동영상 인코딩 하기 (2)

>

9

Chapter7. 동영상

인코딩

환경설정이

끝났으면

인코딩될

동영상의

저장경로

를

설정합니다.

10 우측

하단의

[인코딩

시작] 버튼을

클릭합니다.

11 인코딩과정이

보여지는

창이

뜨며

인코딩이

완료되

면

알림창이

뜹니다. [닫기]를

누르시면

동영상

1차

인코딩이

끝난것입니다.

※

환경설정

창에서

코덱설정부분의

비디오

코덱

앞의

[+]

버튼을

누르면

상세설정할

수

있는

옵션이

나타납니다.

참고 동영상

화질을

높이는

방법

※

비트레이트를

500이상

높이면

화질의

선명도가

좋아

집니다. 키프레임

간격과

프레임(fps)를

20이상

높이면

화면의

끈김현상이

줄고

자연스러운

재생이

됩니다.

※

설정을

높게

해주면

동영상의

퀄리티가

좋아지기

때

문에

용량도

배로

늘어난다는

점

유의하시기

바랍니다.

※

원본동영상이

화질이

나쁘면

설정에서

올려도

더

좋

아 지지 않습니다.

02

▶

다음팟

인코더, Mp4box

다음팟 인코더, Mp4box 동영상 인코딩 하기 (3)

>

12

Chapter7. 동영상

인코딩

MP4Box를

실행시킵니다.

13 우측

상단에

[Add]

버튼을

클릭하여

다음팟인코딩한

mp4 파일을

불러옵니다.

14 좌측

그림과

같이

목록이

추가되면

우측하단의

[Mux]

버튼을

클릭합니다.

좌측하단에

보시면

Ready… 부분이

인코딩

과정이

진

행되며

완료가

되면

다시

Ready… 상태가

됩니다.

15 [Clear]

버튼을

클릭하시면

2차

인코딩

과정까지

끝나

신겁니다.

※

파일은

mp4파일을

불러왔던

폴더경로에

파일명

이

mp4-muxed라고

뒤에

추가되어

생성되어있습

니다.

예) Wildlife.mp4 →

Wildlife.mp4-muxed.mp4

02

▶

다음팟

인코더, Mp4box

다음팟 인코더, Mp4box 동영상 인코딩 하기 (4)

> 01

1

3

Chapter7. 동영상

인코딩

핸드

브레이크

프로그램

다운로드

설치하기(1)

[Next] 버튼을

클릭합니다.

2 파일

다운로드

창이

뜨면

[실행]을

클릭합니다.

▶

핸드

브레이크

관리자

페이지를

접속하면

상단

우측에

[사용자메뉴

얼]을

클릭하고

매뉴얼

안내창이

새로

열리면

하단에

[핸드

브레이크]를

클릭합니다.

>

4

6

Chapter7. 동영상

인코딩

[Finish] 버튼을

클릭하여

설치를

완료합니다.

-

다음

이제

인코딩

방법으로

넘어가보겠습니다.

5

[I Agree] 버튼을

클릭합니다.

설치경로를

지정해

주고

[Install] 버튼을

클릭합니다.

01 핸드

브레이크

프로그램

다운로드

설치하기(2)

▶

핸드

브레이크

> 02

▶

핸드

브레이크

1

Chapter7. 동영상

인코딩

핸드

브레이크

동영상

인코딩

하기

(1)

핸드브레이크를

실행합니다.

2 [source] 버튼을

클릭하고

나오는

메뉴중에

[Video

file]을

클릭하여

변환할

동영상을

불러옵니다.

3 우측에

Presets

부분에서

iphone

& ipod

Touch를 선

택합니다.

4 Output Setting

부분에서

[Web optimized]

를

체크합

니다.

>

5

Chapter7. 동영상

인코딩

저장할

파일이

MP4 file로

선택되어

있는지

확인합

니다.

6 좌측

그림에서

보이는

부분에서

저장할

위치를

정하

여

줍니다. [Browse]버튼을

클릭합니다.

7 파일이름을

적고

파일형식이

MP4로

되어

있는지

확

인 후 [저장]버튼을

클릭합니다.

02

▶

핸드

브레이크

핸드

브레이크

동영상

인코딩

하기

(2)

>

8

Chapter7. 동영상

인코딩

파일확장자가

자동으로

m4v로

나올것입니다. 확장

자를

mp4확장자로

꼭

바꾸시기

바랍니다.

! 여기서

잠깐

!

※

파일

형식을

MP4로

했는데

저장된

파일은

M4v다. 같은

형식이

파일이며

파일명만

MP4로

바꾸시면

됩니다.

※

세부설정은

아래

창에서

하시면

됩니다. 기본적으로

세팅되어

있는

값으로도

만족할만한

화질을

얻으실

수

있는

데

간단히

사이즈값을

바꿔보겠습니다. 그림에

표시된

부분이

동영상

화면영역(사이즈)을

조절하는

부분입니다. 원본

동영상의

사이즈와

변경할

사이즈를

확인하실

수

있습니다.

02

▶

핸드

브레이크

핸드

브레이크

동영상

인코딩

하기

(3)

※

핸드브레이크

창

좌측

하단에

인코딩

진행률이

나옵니다. 100%가

되면

인코딩이

완료된것입니다.

9 [Start]버튼을

클릭하면

인코딩이

진행이

됩니다.

> 01

▶

동영상

등록하기

1

2 상단

메뉴에서

홈페이지

편집

< 동영상

관리를 클릭

합니다.

[관리자페이지]

버튼을

클릭합니다.

3 상세설명에

어떤

동영상인지

주석을

다시고

[찾아보

기] 버튼을

클릭하여

동영상파일을

불러옵니다.

Chapter7. 동영상

인코딩

인코딩한

동영상을

이제

스마트웹에

올려보도록

하자. (1)

※

동영상

호스팅을

신청하셨을

경우

동영상

관

리라는

관리자

페이지를

제공합니다.

> 01

▶

동영상

등록하기

4

5 좌측

그림과

같이

동영상이

업로드가

완료

되었습니

다.

[확인]

버튼을

클릭하시면

동영상이

업로드됩니다.

6 모바일

페이지

수정에서

동영상을

올릴

해당

게시판

에

들어가시고

[글쓰기] 버튼을

클릭합니다.

Chapter7. 동영상

인코딩

인코딩한

동영상을

이제

스마트웹에

올려보도록

하자. (2)

※

[미리보기] 버튼

을

클릭하시면

동영

상

미리보기

플레이

어가

재생되어

바로

확인을

할

수

있습

니다.

※

스마트웹에서도

정상적으

로

재생되는

것을

확인할

수

있습니다.

> 01

▶

동영상

등록하기

7

8 위

그림과

같이

업로드된

동영상

파일

목록이

나옵니

다. 여기서

원하는

동영상을

넣어

주시면

됩니다.

인코딩을

한

mp4파일을

버튼을

클릭하여

선

택합니다.

제목과

내용을

입력하고

아래

메뉴에

모바일

동영상

링크

부분

우측에

버튼을

클릭합니다.

9 웹

동영상

링크에도

파일을

추가합니다.

Chapter7. 동영상

인코딩

인코딩한

동영상을

이제

스마트웹에

올려보도록

하자. (2)

※

모바일

동영상

링크에만

올리셔도

무방하지만

웹

동영상

링크에도

추가해

주는

이유는

pc로

접속

하였을

경우에도

이상없이

재생을

위한

것입니다.

10 [글쓰기]

버튼을

클릭하면

동영상

첨부글

작성이

완

료욉니다.

11 정상적으로

동영상

플레이가

되는

것을

확인할수

있

습니다.