생방송보기

SmartMission MeetUP 스마트미션밴드강좌 오프라인 모임 2013년 7월10일, 서초동 국제전자센터 지하1층

KWMA 선교정보기술개발원 / 프로보노 국제협력재단

스마트미션이란 ?

개인,단체마다 홈페이지를 만들어서 정보를 공유하고 있는데 그 홈페이지의 형태도 천차만

별하다. 우리의 홈페이지의 형태를 분석하고 앞으로 어떻게 나아가야하는지를 검토하는 시

간이 되었으면 한다. 이젠 홈페이지는 전문가의 전용물이 아닌 것이다. 누구나 쉽게 만들고

꾸미고,다양하게 정보를 공유할수 있도록 할 수가 있다.

스마트미션이란 스마트시대에 스마트워크를 통하여 미션(Mission:선교)를 하자는 것이다.

스마트시대에는 스마트폰,스마트TV,스마트기기를 통하여 정보를 공유한다.

따라서 스마트 정보화를 위한 시스템이 구축될수 있는데

그것은 스마트정보화의 3요소인 스마트폰, 스마트코드, 스마트웹앱를 통하여 가능하다.

아이폰과 안드로이드폰으로 나누어지는 스마트폰, 바코드,QR코드,RFID로 나누어지는 스마트

코드, 오브젝트C와 자바로 제작되는 앱(APP)과 HTML/CSS/JS로 제작되는 웹(Web)으로 나누

어지는 스마트웹앱이 그것이다.

이번강좌에서는 구글서비스로 가장 간단하게 QR코드 만드는 방법과 모바일웹을 자동으로

최적화 시켜주는 방법을 알아보고, 회원가입함으로서 웹서비스로 모바일웹을 만드는 방법과

서버에 소스를 설치하여 웹을 구현하고, 모바일웹을 구현하는 방법을 알아보는것으로 하였

다. 스마트시대에 모바일웹앱을 통하여 정보를 공유하기위한 스마트정보 시스템 구축을 위

하여 단계별 알아보자.

1.스마트정보 시스템이 갖추어야할 3가지 요소- 스마트폰, 스마트코드, 스트웹앱

2.웹서비스만으로 모바일웹을 구현할수 있는 구글서비스 3가지로 구글URL단축주소,QR코드

제작서비스,모바일 최적화서비스, 구글앱스에 대하여 알아본다.

3.모바일웹 제작서비스 사이트 - wirenode, winksite, onbile

4.오픈소스CMS 모바일웹 - 블로그(wordpress)와 위키(mediawiki)와 빌더(Joomla)

5.SNS페이지의 필요성과 제작방법에 대하여 알아보자.

smartcloud.pe.kr http://smartcloud.pe.kr/wp/?p=13

스마트정보시스템 구축1 | SmartMission

장원근장원근 선교사선교사 (KWMA선교정보개발원선교정보개발원 원장원장 )

스마트시대에는스마트시대에는 스마트폰스마트폰 ,스마트스마트TV,스마트기기를스마트기기를 통하여통하여 정보를정보를 공유한다공유한다 . 따라서따라서 스마스마트트 정보화를정보화를 위한위한 시스템이시스템이 구축될수구축될수 있는데있는데 그것은그것은 스마트정보화의스마트정보화의 3요소인요소인 스마트폰스마트폰 ,스마트코드스마트코드 , 스마트웹앱를스마트웹앱를 통하여통하여 가능하다가능하다 .아이폰과아이폰과 안드로이드폰으로안드로이드폰으로 나누어지는나누어지는 스마트폰스마트폰 , 바코드바코드 ,QR코드코드 ,RFID로로 나누어지는나누어지는 스스마트코드마트코드 , 오브젝트오브젝트C와와 자바로자바로 제작되는제작되는 앱앱 (APP)과과HTML/CSS/JS로로 제작되는제작되는 웹웹 (Web)으로으로 나누어지는나누어지는 스스마트웹앱이마트웹앱이 그것이다그것이다 . 여기에서는여기에서는 구글서비스로구글서비스로 가장가장간단하게간단하게 QR코드코드 만드는만드는 방법과방법과 모바일웹을모바일웹을 자동으로자동으로최적화최적화 시켜주는시켜주는 방법을방법을 알아보고알아보고 , 회원가입함으로서회원가입함으로서웹서비스로웹서비스로 모바일웹을모바일웹을 만드는만드는 방법과방법과 서버에서버에 소스를소스를설치하여설치하여 웹을웹을 구현하고구현하고 , 모바일웹을모바일웹을 구현하는구현하는 방법을방법을알아보는것으로알아보는것으로 하였다하였다 . 스마트시대에스마트시대에 모바일웹앱을모바일웹앱을통하여통하여 정보를정보를 공유하기위한공유하기위한 스마트정보스마트정보 시스템시스템 구축구축을을 위하여위하여 여러가지여러가지 단계별단계별 형태로형태로 만들어만들어 보았다보았다 .1.먼저먼저 스마트정보스마트정보 시스템이시스템이 갖추어야할갖추어야할 3가지가지 요소로요소로스마트폰스마트폰 , 스마트코드스마트코드 , 스마트웹앱을스마트웹앱을 정하였고정하였고2.웹서비스만으로웹서비스만으로 모바일웹을모바일웹을 구현할수구현할수 있는있는 구글서비구글서비스스 3가지로가지로 구글구글URL단축주소단축주소 ,QR코드제작서비스코드제작서비스 ,모바모바일일 최적화서비스를최적화서비스를 정하였다정하였다 .3.모바일웹모바일웹 제작서비스제작서비스 사이트사이트 3곳으로곳으로 wirenode, winksite, onbile을을 정하였고정하였고 ,4.오픈소스오픈소스CMS 모바일웹으로모바일웹으로 3가지가지 블로그블로그 (wordpress)와와 위키위키 (mediawiki)와와 빌더빌더 (Joomla)을을 정하였다정하였다 .5.본격적인본격적인 모바일웹앱모바일웹앱 개발을개발을 위하여위하여 어도비어도비CS5.5(Dreamweaver5.5 와와 FlashBuilder4.5.1) 과과JQueryMobile(JQTouch) 와와 Phonegap을을 정하였다정하였다 .모바일앱을모바일앱을 만들거나만들거나 , 모바일웹을모바일웹을 프로그래밍하는것프로그래밍하는것은은 여기에서여기에서 생략하고생략하고 , 대신에대신에 “모바일웹모바일웹 개발개발 “이라는이라는 블로그를블로그를 통하여통하여 함께함께 배우면서배우면서 정리해나가도록정리해나가도록하였다하였다 . 덧붙혀덧붙혀 오픈웹오픈웹 (Open Web)의의 세계와세계와 그에따른그에따른 세부사항들은세부사항들은 “오픈웹오픈웹 “이라는이라는 블로그를블로그를 통하여통하여 알알아보도록아보도록 하자하자 .

구글의구글의 모바일웹서비스는모바일웹서비스는 단축주소를단축주소를 이용하여이용하여 스마트코드인스마트코드인 QR코드를코드를 바로바로 만들어주는만들어주는 모바일웹서비모바일웹서비스스 뿐만뿐만 아니라아니라 , 모바일모바일 최적화최적화 웹서비스를웹서비스를 실시하고실시하고 있다있다 .

1.단축주소단축주소 만들기만들기 서비스서비스구글은구글은 단축주소서비스를단축주소서비스를 http://goo.gl를를 통하여통하여 실시하고실시하고 있다있다 . 단축주소는단축주소는 모바일웹으로모바일웹으로 정보를정보를 전달전달할때할때 매우매우 유용하게유용하게 쓰인다쓰인다 .

2.QR코드코드 만들기만들기 서비스서비스구글은구글은 웹사이트주소를웹사이트주소를 바로바로 QR코드로코드로 만들어만들어 이미지로이미지로 저장하여저장하여 사용하도록사용하도록 하였다하였다 . 주소창에서주소창에서 단축단축주소뒤에주소뒤에 .qr를를 붙이고붙이고 엔터를엔터를 치면치면 바로바로 만들어만들어 준다준다 .

3.모바일모바일 최적화최적화 서비스서비스구글은구글은 웹사이트를웹사이트를 모바일웹으로모바일웹으로 만들어만들어 주는주는 최적화서비스를최적화서비스를 http://google.com/gwt/n를를 통하여통하여 하고하고 있있다다 . 최적화최적화 웹페이지로웹페이지로 들어오는들어오는 다른다른 웹페이지들도웹페이지들도 자동적으로자동적으로 최적화최적화 되어되어 들어온다들어온다 . 또한또한 다음다음 코드코드를를 index화일화일 상단에상단에 삽입하면삽입하면 최적화된최적화된 모바일페이지로모바일페이지로 나타낼수나타낼수 있다있다 .{script language=”JavaScript”}if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {document.location = “최적화된최적화된 단축주소단축주소 ”;}{/script}

[si-contact-form form='1']

smartcloud.pe.kr http://smartcloud.pe.kr/wp/?p=20

스마트정보시스템 구축4 | SmartMission구글계정구글계정 만들기만들기구글은구글은 클라우드오피스를클라우드오피스를 실현하기실현하기 위하여위하여구글독스구글독스 (Google Docs)와와 구글앱스구글앱스 (Google Apps)를를 만들었다만들었다 .구글독스는구글독스는 지메일계정으로지메일계정으로 개인이개인이 사용할수사용할수 있도록있도록 만든만든 가입형이라면가입형이라면 ,구글앱스는구글앱스는 도메일메일계정으로도메일메일계정으로 기업이기업이 사용할수사용할수 있도록있도록 만든만든 설치형이다설치형이다

구글서비스를구글서비스를 이용하기이용하기 위하여위하여 먼저먼저 구글계정을구글계정을 확보하자확보하자 .구글계정은구글계정은 지메일계정과지메일계정과 도메인메일계정으로도메인메일계정으로 나눈다나눈다 .지메일계정은지메일계정은 http://gmail.com 에서에서 하고하고 ,도메인메일계정은도메인메일계정은 http://google.com/apps에서에서 등록한다등록한다 .구글토탈서비스구글토탈서비스 http://gpanion.com/를를 이용하기이용하기 위해서는위해서는 지메일계정지메일계정 (Google Accounts)또는또는 도메일메일도메일메일계정계정 (Google Apps)로로 로그인로그인 하여야하여야 한다한다 .

지메일계정지메일계정 신청하기신청하기

도메인메일계정도메인메일계정 신청하기신청하기

도메인메일계정도메인메일계정 만들기에만들기에 대하여대하여 알아보자알아보자 .도메인메일계정을도메인메일계정을 만들기만들기 위해서는위해서는 유료호스팅유료호스팅 도메인도메인이이 있어야한다있어야한다 .무료호스팅은무료호스팅은 메일교환메일교환 (MX)서비스를서비스를 하지하지 않기않기 때문에때문에사용할수가사용할수가 없다없다

1단계단계 : 구글앱스구글앱스 등록등록http://www.google.com/apps ->기타제품버전기타제품버전 :GoogleApps ->시작하기시작하기 -> 도메인이름도메인이름 입력후입력후 시작시작 ->가입정보가입정보입력입력 ->관리자계정생성관리자계정생성 ->등록완료등록완료* 가입정보가입정보 : 이름이름 ,성성 ,이메일주소이메일주소 ,전화번호전화번호 ,국가국가 /지역지역 ,도도메인네임서버변경메인네임서버변경숙지사항숙지사항 체크체크* 관리자계정관리자계정 : 사용자이름사용자이름 ,비밀번호비밀번호 ,단어확인단어확인 ,약관동의약관동의클릭클릭

2단계단계 : 도메인소유권도메인소유권 인증인증관리자화면관리자화면 ( http://www.google.com/a/URL)->대시보드대시보드 ->Google Apps 활성화활성화 ->대체방법대체방법 :서버에서버에 HTML파일파일 업업로드로드 선택후선택후 확인확인 ->인증화일인증화일 서버루트서버루트 업로드후업로드후 확인확인

3단계단계 : 메일교환메일교환 (MX)레코드레코드 변경변경관리자화면관리자화면 ->대시보드대시보드 ->이메일활성화이메일활성화 ->메일교환메일교환 (MX)레코드레코드 변경변경 ->호스팅업체호스팅업체 사이트에서사이트에서 MX변경변경 ->단단계완료계완료* 카페카페24 로그인로그인 ->서비스관리서비스관리 ->호스팅관리호스팅관리 ->도메인도메인 연결관리연결관리 ->메일서버메일서버 (MX)관리관리 ->도메인선택후도메인선택후 DNS관관리리 ->메일서버메일서버 (MX)관리관리 선택선택 ->기존기존MX삭제삭제 ->MX추가추가 ->구글메일서버구글메일서버 (aspmx.l.google.com)와와 우선순위우선순위 (10)입력입력 ->인증완료인증완료

4단계단계 : URL변경하기변경하기1)호스팅업체의호스팅업체의 CNAME 추가추가 (4개개 )호스팅업체호스팅업체 ->로그인로그인 ->나의서비스관리나의서비스관리 ->도메인도메인 연결관리연결관리 ->메일서버메일서버 (MX)관리관리 ->도메인선택후도메인선택후 DNS관리관리 ->별칭별칭 (CNAME)관리관리 ->CNAME추가추가 ->도메인별칭도메인별칭 :calendar,mail,docs,sites.URL->실제도메인실제도메인명명 :ghs.google.com->확인확인

2)구글앱스구글앱스 URL변경하기변경하기 (4개개 )관리자화면관리자화면 ->설정설정 ->캘린더캘린더 ,문서문서 ,이메일이메일 ,사이트의사이트의 URL변경하기변경하기 ->변경사이트선택후변경사이트선택후 계속계속 ->단계완료단계완료[si-contact-form form='1']

오픈소스(Open Source) 사용방법

오픈소스란 서버에 올려서 사용하는 것을 말한다.

블로그, 포토앨범, RSS리더 등의 오픈소스를 사용하는 방법에 대하여 알아보자

먼저 오픈소스를 설치하는 6가지 유형부터 알아보자.

오픈소스 설치유형은 크게 세가지로 나눌수가 있다. 내컴퓨터 웹서버만들기와 NAS웹서버

이용하기와 무료및 유료호스팅 이용하기 이다. 여기에서 내컴퓨터를 웹서버로 만들어

쓰려면 복사(Copy)하면되고, NAS를 웹서버로 쓰려면 소스를 업로드하면 된다. 무료호스팅은

FTP로, 유료호스팅은 SSH, SVN를 이용하여 소스를 서버에 올린다.

서버에 CSS템플릿을 설치하고 wp블로그, xe게시판,photo갤러리를 설치하여 홈페이지를

운영하려면 index화일에서 다음과 같이 코드를 삽입하면 된다.

(실제표기에서는[ ]을< >로 바꾼다)

[frameset rows="*,0" border=0]

[frame src="http://abc.com" frameborder=0 scrolling=auto]

[/frameset]

wx소스를 서버에 설치할수 있는 5가지 유형은 다음과 같다.

(준비사항: 오토셋,닷컴계정,유료호스팅계정,소스(zip,tar), 알zip,알ftp,putty,editplus)

* 소스 다운로드

(1)wp - http://wordpress.org/download

(2)xe - http://www.xpressengine.com/download

(3)wx - http://sangsang.or.kr/wx.tar.gz

(4)photogallery - http://photogallery.pe.kr

(5)CSS템플릿 - http://csstemplatesfree.org

(6)wp테마 - http://wpskins.org

1.오프라인 오토셋-copy(소스:zip)

내컴퓨터를 서버로 만들어서 소스를 설치해보자.오토셋은 xe소스가 내장되어 있으므로

wp만 서버루트에 복사하여 설치한다.

- 오토셋 공식홈페이지 : http://autoset.net/xe

- 오토셋 매뉴얼 : http://autoset.net/xe/manual

- 오토셋 설치 : http://autoset.net/xe/download_autoset_6_3_1->오토셋 6.3.1 전체 설치

파일 클릭->설치완료->오토셋실행->웹서버시작,Mysql시작

- 오토셋 초기화면 : http://localhost/

- MysqlDB정보확인 :

http://localhost/phpmyadmin/->로그인(root,autoset)->DB정보(localhost, root, autoset,

mysql)

서버루트 : c:/AutoSet6/public_html

소스복사 : xe는 기본으로 내장되어 있으니 wp만 서버루트에 복사한다.

(1)게시판XE설치순서 : http://localhost/xe

->DB(localhost,root,autoset,mysql),login(admin,autoset)->설치완료

(2)블로그WP설치순서 : wp-config.php 화일안에

DB정보입력->http://localhost/wp->로그인(admin, autoset)->설치완료

(3)포토갤러리 설치순서 : 소스 루트에 복사후

http://localhost/photogallery->비밀번호1234->한글입력클릭->완료

2.무료호스 팅 닷컴-ftp(소스:zip)

닷컴계정을 가지고 소스를 ftp로 업로드해서 설치해보자

닷컴무료호스팅도 xe가 내장된것을 서비스 받는다.

닷홈계정 : http://sangsangorkr.dothome.co.kr (sangsangorkr,sang****)

3.유료호스팅 카페24(1)wp-ssh(소

스:tar)

유료계정으로 워드프레스(wp)소스를 텔넷으로 설치해보자

카페24계정 : http:://sangsang.or.kr

wordpress-3.3.tar.gz 화일을 ftp로 서버루트에 올리고 텔넷에서 압축을 푼다.

시작->실행->telnet://URL->ID,PW->서버루트에서 tar xvfzp wordpress-3.3.tar.gz ->mv

wordpress wp

4.유료호스팅 카페24(2)wx-ssh(소스:tar)

유료계정으로 워드프레스(wp)와 익스프레스엔진(xe)를 한번에 설치해보자

wx.tar.gz 화일을 ftp로 서버루트에 올리고 텔넷에서 압축을 푼다.

시작->실행->telnet://URL->ID,PW->서버루트에서 tar xvfzp wx.tar.gz

5.유료호스팅 카페24(3)xe-svn

유료계정으로 svn으로 익스프레스엔진(xe)를 한번에 설치해보자

http://www.xpressengine.com/index.php?mid=textyle&vid=blog&document_srl=19644693

시작->실행->telnet://URL->ID,PW->서버루트에서 mkdir xe->svn checkout

http://svn.xpressengine.com/XpressEngine/trunk xe ->chmod 707 xe

-> 웹브라우저 주소창 http://URL/xe ->한국어선택후, 라이센스에 동의합니다->설치를

진행합니다->무시->mysql선택후,설치를 진행합니다

->DB(localhost,user_name,password,DB_name)과 관리자정보(admin,password)입력후,

등록->로그인->초기화면((http://URL/xe)

6.Synology NAS에 wp,xe 업로드

NAS에 오픈소스(wp,xe)를 설치해보자.

NAS에 설치하기 위해서는 NAS의 서버루트에 해당하는 web폴더에 소스를 업로드 하면

된다.DB설정은 phpMyAdmin를 실행시켜 wordpressblog 또는 xe 이름으로 DB Name를

만들어준후 설치한다.

오픈소스 "포토앨범" 사용방법

포토앨범용 오픈소스로 두가지를 소개한다. 하나는 플래시기반의 프로그램으로

"photogallery"이고, 또하나는 DB기반의 프로그램으로 "zenphoto"이다.

소스를 서버에 올려서 사용하게 되는데 시놀로지NAS의 web폴더에 올려서 사용하게되면

사진의 데이타용량에 구애받지 않고 포토앨범을 운영할수 있다.

소스는 각각 공식 홈페이지에서 다운로드 받아 설치하면 된다.

공식홈페이지:http://photogallery.pe.kr/ 와 http://www.zenphoto.org/

1.photogallery 설치하기

(1)소스를 서버에 업로드한다.

(2)초기화면(http://URL/photogallery)에서 열쇠아이콘을 클릭한후 비밀번호 1234 입력후

엔터

(3)톱니바퀴아이콘 클릭후 한국어 설정

(4)첫폴더 자동펼침기능 활성화 설정 (실제표기[ ]->< >)

photogallery/system/folder.php 의 14줄 [autoOpen]N[/autoOpen]을

[autoOpen]Y[/autoOpen]로 수정

(5)사진 업로드

(6)폴더및 화일이동 : 끌어다 원하는 위치에 폴더및 사진배치(drag and drop)

샘플보기 : http://n.mission24.net/photo_juanmt/

2.zenphoto 설치하기

(1)소스를 서버에 업로드한다.

(2)http://URL/zenphoto/zp-core/setup.php ->로그인,DB정보 입력

(3)관리자화면 http://URL/zenphoto/admin ->로그인

(4)관리자화면 메뉴 upload->사진제목,사진선택업로드(한글 미지원)

(FTP로 폴더생성후 앨범사진 직접업로드 가능:zenphoto/albums/폴더명/)

(5)초기화면 http://URL/zenphoto/

샘플보기 : http://sangsang.or.kr/zenphoto/smartcloud2011/

오픈소스 "RSS리더" 사용방법

대부분의 정보가 블로그를 통하여 얻어지는 시대에 RSS리더는 중요한 프로그램이 아닐수

없다. 지속적인 정보를 얻으려면 RSS리더를 통하여 블로그 관리를 잘하여야한다. 오픈소스

RSS리더로서 DB가 필요없는 Lilina 와 MysqlDB가 필요한 rsslounge를 소개한다.

공식홈페이지

Lilina - http://getlilina.org/

rsslounge - http://rsslounge.aditu.de/

< 샘플보기 >

http://n.mission24.net/Lilina/

http://n.mission24.net/rsslounge/

1.Lilina설치순서

(1)소스 업로드 ->권한설정(755->777): Lilina/content/system

(2)설치: http://URL/Lilina/install.php ->Install클릭->사이트이름,ID:admin,

PW:*****->완료

(3)http://URL/Lilina/admin/ ->로그인 ->관리자화면 ->Feeds ->AddManage ->피드할

도메인주소입력

(4)초기화면 http://URL/Lilina/

2.rsslounge설치순서

(1)소스 업로드 ->DB정보입력,로그인(ID:admin,PW:*****),public access체크후 install

rsslounge클릭->완료

(2)http://URL/rsslounge/->start rsslounge클릭->초기화면->톱니바퀴 설정아이콘

클릭->로그인->관리자화면

(NAS에 설치할 경우 DB네임을 먼저 생성하여야한다.

http://n.mission24.net/phpMyAdmin/->로그인(root,smart****)->DB만들기:rsslounge생성)

설문지