본문 바로가기

My Blog [Tistory Tip]]/Tutorials

홈서버란? - [테크노트7 홈빌더 & 쇼핑몰 탑재 무료버전 ] - [웹사이트구축을 위한 스토리보드란?]

http://ndlessrain.tistory.com/entry/%ED%99%88%EC%84%9C%EB%B2%84%EB%9E%80

 

[RAID방식 표기 내용정정]

보통 raid는 sw방식과 hw방식으로 나뉘는데 컨트롤러를 장착하거나 칩셋이 지원하면 hw방식 OS의 기능을 이용하며 RAID를 구성하는것을 SW방식 이라고 하는데 ICHR9계열이 지원하는 레이드 방식은 SW방식입니다.  잘못된 정보로 인해 혼선을 드린점 죄송합니다.

물론 저가형보다는 안정성이 괜찮다는 말이 있고 저도 raid 0으로 잘쓰고 있습니다.

raid를 지원하는 칩셋이 SW작동한다니 조금 어처구니가 없지만 올바른 내용으로 정정해드립니다.

http://www.dslreports.com/forum/r18848630-ICH9R-hardware-or-software-RAID

간단한 홈서버 구축방법과 활용방안에 대해 안내해 드리겠습니다. 세단계로 나누어서 설명드립니다.

그동안 써온글을 다시금 정리하는 글이구요..어느정도 중복입니다. 존칭은 생략합니다.

 

홈서버 구축이 유리한 이유: Atom CPU, mini-ITX 규격의 메인보드 출시로 초미니 크기로 조립이 가능하고 소비전력 또한 30~40W대로 2bay NAS와 비슷하거나 약간 더 소모

 

-구축하기 (공통)

먼저 mini-Iitx 규격으로 조립을 한다. 보통 하드1개면 60W대(12V 5A) 아답터를 사용하면 된다.pc는 사용할수록 소음이 증가하니 되도록 쿨링팬이 없는 보드를 고르고 케이스도 워낙 많으니 자기가 맘에 드든걸로 고른다.

컴퓨터는 더운걸 싫어하고 과열하면 뻗어버릴수도 있으니 통풍을 고려한 위치에 설치를 한다.

잘 모르면 아답터 포함 된 제품으로 구매하면 조립하기도 편하다.

하드는 3.5inch를 써도 되고 2.5inch를 써도 되고 비용이 되면 SSD도 가능하다.

대부분 ODD는 노트북용을 쓰거나 os만 설치하고 빼버리므로 크게중요하진 않다. usb로 os설치하기 방법은 인터넷에 많이 퍼져 있으니 참고해 보도록 영화 매니아라면 꼭 NVIDIA ION 모델로 선택을 해야 1080P같은무거운 영상을 부드럽게 돌릴수 있다. d510mo도 ion한테는 안된다. 명심해라.

 

-초급자

먼저 윈도우XP를 깔자. 그리고 웹하드 솔루션인 플러스디스크를 깔아보자 http://cafe.naver.com/plusdisk4nas 카페 가입하면 조건없이 다운로드 가능하다.

여기까지 했어도 50%는 성공한것! 서버를 돌리는 이유가 90%이상

 

파일공유 관련인데 NAS가 자체 제공 하는것들은 기능부족으로 활용도가 떨어지지만 플러스 디스크는 IE에서 4GB초과 되는 파일도 폴더단위로 전혀 변동없이 업로드, 다운로드가 가능하다. 한번 써보면 다른 웹하드 솔루션은 눈에 들어오지 않는다.

그만큼 성능이 좋다. 지인에게 깔아줬더니 File Station은 잘 쓰지도 않는다. 베리즈웹쉐어라는 프로그램이 있는데 내 컴퓨터의 폴더를 외부에서 접속해서 바로 다운이 가능하도록 해주는 http 링크 프로그램 이다. http://berryz.upnl.org/main.php/WebShare/Download/ 가서 받으면 되고 플러스 디스크와 포트만 다르게 해서 동시에 사용이 가능하다.

윈도우에서 공유하는 것처럼 공유시켜 놓은 폴더를 외부에서 http://내컴퓨터ip주/ 로 접속이 되며 다운로드의 경우 속도제한이 없다. 플러스 디스크의 속도는 양향방 100메가 인터넷 기준, 외부 접속 속도는 업로드 7000~7500k, 다운로드 4000~4500k 정도 나온다. 파일질라 FTP서버를 깔아보자 구축방법은 http://blog.portablea.com/1547 참고 하면된다.

 

이 정도만 활용해도 본전은 뽑는다. 플러스디스크급의 성능을 가진 웹하드 솔루션은 수백만원을 호가한다.

싼것도 있지만 기능이 많이 부실하다. 플러스 디스크는 상용웹하드 가 가진 기능을 대부분 포함하고 있다.

NAS에 별도 탑재는 안되고 넷기어 레디나스 제품에 탑재하여 판매하고 있다.

 

-중급자

APM을 설치해서 웹서버를 구축한다.

초보자는 그누보드, 테크노트를 추천하며 자바스크립트가 필요하거나 좀더 복잡한 기능이 필요시 XE로 선택을 한다.

OS가 윈도우, 리눅스에 따라서 설치방법이 다르고 윈도우의 경우 APM,SETUP, 오토셋, RWAPM을 이용하면 쉽게 구축된다.

DB백업 , 복원 및 홈페이지 구축은 당연히 공부를 해야 한다.

 

상업적인 이용시 돈주고 만들어도 되고 리눅스를 메인으로 잡았으면 nas보다 접속속도 가 월등한 웹서버가 된다.

홈페이지 직접 만드는건 엄청난 노가다... 보통 홈페이지 작업은 6명~10명이 분담해서 하므로 상업적 용도를 위해 홈피를 구축해야 한다면 비싸더라도 돈주고 하는게 상책이다. 더이상 설명 안하겠다. 플래시 작업이 얼마나 노가다인지 하는사람 있으면 직접 물어봐라.

 

-고급자 (숙련자라고 생각하고 방법만 소개)

서버가 원거리에 있을때 원격접속방법으로는 네이트온, 원격데스크톱 연결, 리눅스는 VNC로 접속해서 관리하면 된다.

지정된 시간에 자동으로 켜지게 할려면 CMOS에서 alram power on을 이용해서 시간을 지정하면 된다.

반대로 지정된 시간에 꺼지게 하려면 타임가드 2.2를 깔면 알아서 꺼진다.

원격 부팅을 위해서는 iptime 공유기에 맥어드레스 주소 등록해서 WOL기능을 이용하면 된다.

데이터 백업은 하드 2개인경우 스케줄 자동백업 프로그램인 Inte liStor를 이용하면 된다.

db백업은 배치파일로 만들어서 자동으로 되게끔 설정하고 잘 모르겠으면 보통 mysql 폴더 를 백업하면 된다.

해킹을 방지하기 위해 원격접속포트는 다른것으로 바꾸고 필요한 포트이외엔 열어 놓지 않는다.

보안을 유지하는곳은 대부분 80포트만 열어두고 다른 방법의 접근을 막아두고 있다는것을 알아두자.

 

백신은 설치해도 되고 안해도 되는데 카스퍼스키처럼 강한거 설치하면 웹서버 운영시 키젠이나 크랙파일 같은거 첨부로 올리면 감지 때문에 올라가지 않으니 이점은 알고 있어야 한다. 리눅스로 설치하면 반디 같은 웹하드 솔루션의 설치 운영이 가능하다.

에어비디오 서버도 설치가 되나 실시간은 안되고 저용량 vod streaming은 가능하다.

그외 java, tomcat, svn, 이클립스, XBMC등 자기가 필요한거 설치해서 쓰면 된다. 레이드도 가능하다.

 Zotac ION-IT, X-F Wi-Fi 모델이 레이드 컨트롤러를 내장하고 있어 raid 0,1을 지원한다.

요샌 외장하드 케이스도 고급화되서 http://shopping.naver.com/detail/detail.nhn?cat_id=01050205&nv_mid=4119860198&frm=nv_model&tc=3 등을 이용해서 백업을 하면 더욱 더 안전하다.

I-SCSI, NFS는 윈도우2008, 리눅스에서 지원하는데 2008은 아톰서버에 설치하긴 워낙 무거우니 현실성이 없고 리눅스에 설치해야 한다.

4GB이상 메모리 장착시 램디스크를 구성해 속도향상 을 이끌어 낼수 있다.

하드 디스크가 많이 필요한경우 PCI SATA CARD를 이용하면 4포트이상 하드를 달수 있으나 파워는 용량이 큰 제품으로 교체를 해야 한다.

케이스 커지는건 당연지사. 리눅스로 구축시 하드웨어 드라이버 부재 및 운영에 어려움이 있으므로 WINXP PRO, WIN 7라이트버전, WIN 2003 서버로 하는것이 좋다.

공부하면서 배울 사람은 리눅스(레드햇, 센트OS, 수세, 슬랙웨어, 젠투, 우분투, 페도라, 데비안...로 해보는것도좋다.

 

-홈서버 기능 요약

01) 웹서버 (XE, 테크노트등. PHP게시판 운영, 포토앨범-그누보드 포토빌더, 뮤직브라우저- MP3)

02) 파일서버(플러스디스크 웹하드, FTP서버, 링크서버)

03) 미디어서버(Gomx, 스트리밍서버)

04) 토렌트서버(uTorrent, 트랜스미션 기본내장)

05) Divx 플레이어 ( 5.1~ 8.1ch 채널, 480p~1080p, mkv, 코덱을 가리지 않는 재생 )

06) DVD 플레이어 (ODD장착시..고화질 MKV등장으로 죽는추세...너무 불법좋아하지 맙시다)

07) 웹서핑(인터넷 뱅킹, 주식, 메신저.........)

08) VMware WorkStation 이용한 다중 OS구성

09) VPN (원격지에 있는 컴퓨터를 내 내트워크 환경처럼 접속)

10) 윈도우2003 설치시-(메일서버, FTP서버, 웹서버, 스트리밍서버... 1방에 마무리)

11) 저렴한 USB CAM으로 저렴한 감시서버 활용 (팬틸트 캠은 약 15만원)

- 수백만원 하는 팬틸트기능 IP 카메라에 비해 10~20배 비용절감

http://www.mcamkorea.com/shopping/view.asp?GoodsSeq=24&Page=1

14만원 하던게 17만원에 파네요..저가형 IP카메라의 경우 팬틸트 되고 18만원대도 봤습니다.

12) FreeNAS 서버(NAS용 어플리케이션 대부분 탑재..단 영어판이고 기능이 좀 부실하니 기대는금지)

13) 프린터 서버(WiFi 모델인경우 무선프린터서버 구축가능)

- 가끔 어떤회사를 가보면 단지 프린터를 공유용으로만 쓰는 컴을 볼수가 있다.

프린터서버를 이용하면 되는데 초기설치, 관리의 어려움으로 대부분 공유프린터를 활용

14) 외장형 TV카드나, USB 타입 DMB 연걸시 TV 튜너로 활용가능

자세한 내용 참고 : http://dna2k.iptime.org/notice/215

.......................

-정리

장점: 비교적 저렴한 가격으로 구축이 가능하고 확장 및 프로그램 설치에 제한이 없음

단점: 구축/관리를 직접해야하는 불편함, 지식수준에 따라 활용도가 달라짐.

 

 

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=download&wr_id=15185&sca=&sfl=wr_subject%7C%7Cwr_content&stx=zend&sop=and&page=2

 

글쓴이 테크노트INC 날 짜 07-10-10 09:45 조 회 27525
간편URL http://www.phpschool.com/link/download/15185 복사
다운로드1 technote7_free.zip (13.5M), Down : 2156, 2007-10-10 09:45:37
Link1 http://www.technote.co.kr/php/tech7demo/admin.php (4636)
Link2 http://technote.co.kr/php/test/board.php?board=kkkmain&command=skin_in… (3455)
지원 OS : PHP4.x ~ 5.x (GD,iconv,Zend Optimizer) , MySQL3.8 ~ 5.x

개발환경 : (Windows+APM) & (FreeBSD+APM)

사용제한 : 프리웨어, 저작권표시 없음.

제작자 : 테크노트INC

자료설명 :
  ㆍ게시판 + 홈페이지빌더 + 쇼핑몰빌더 기능의 웹프로그 램입니다.
  ㆍ다양한 기능으로 초보자도 쉽게 다이나믹한 홈페이지를 만 들 수 있습니다.
  ㆍ규정된 틀에 억매이지 않고 자유롭게 홈페이지 구성 작업을 할 수 있습니다.
  ㆍMySQL을 사용하는 모든 게시판류의 자료를 테크노트 로 변환,통합할 수 있습니다.
  ㆍ쇼핑몰 기능은 상품등록갯수 50개 이내에서 영구적으로 무료사용 허용됩니다.
  ㆍ사용자 의도에 따라 여러 용도로 응용 이 가능한 확장형 구조입니다.
  ㆍSince:  CGI 버전(1998) , PHP 버전(2006)
  ㆍ테크노트 PHP 버전 3번째 업데이트 판입니다. (TechNote6->TechNote6.9p->TechNote7)
----------------------------------------------
▨ 설치방법:
  1. technote7_free.tar.gz 파일을 홈페이지 에 올리고 압축해제한다.
  2, http;//홈페이지주소 /technote7/admin.php 으로 접속하면 설치 초기 화면이 나타난다.
  3, 설치화면 안내에 따라 MySQL 정보, 관리자 비번등을 등록한다.
  기본설치 설명서: http://technote.co.kr/php/technote1/manual/index.html?3
  업데이트 설명서: http://technote.co.kr/php/technote1/manual/index.html?7

----------------------------------------------
▨ 미리보기 :
  관리 : http://www.technote.co.kr/php/tech7demo/admin.php
  홈페이지 스킨1: http://technote.co.kr/php/test/board.php?board=kkkmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨2: http://technote.co.kr/php/test/board.php?board=qqqmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨3: http://technote.co.kr/php/test/board.php?board=myhome&command=skin_insert&exe=insert_home
  쇼핑몰 스킨1: http://technote.co.kr/php/tech7demo/board.php?board=tnshopmain&command=shop
----------------------------------------------
▨ 기능 :
  기본적인 기능만 소개 합니다. 구체적인 것은 직접 살펴 봐야 알수 있을 것입니다.
 * 일반적 게시판 기능 요소 대부분 적용
 * 일반적 회원등록/관리 기능 요소 대부분 적용
 * 일반적 쇼핑몰 기능 요소 대부분 적용
ㆍ일반스킨, 빌더형 스킨
ㆍ통합 검색,확장검색
ㆍRSS
ㆍSMS
ㆍ멀티설정
ㆍDB관리기
ㆍ파일관리기
ㆍ인기 검색어
ㆍ쪽지
ㆍ포인트,레벨에 의한 권한제어
ㆍ광역 컨버터
ㆍ스크랩
ㆍ불량글 신고
ㆍ포인트 증여
ㆍ6단계 관리자 권한 분할
ㆍ다중설치 가능
ㆍ입력필드 무제한 추가
ㆍ빌더생성
ㆍ백업/복구/ 치료
ㆍ설정테마
ㆍ설정항목 추가생성
ㆍ위지윅 에디터
ㆍ무한 카테고리 확장
ㆍ포인트 결제
ㆍ컨텐츠(파일) 판매적용
ㆍ배송추척 조회
ㆍ추천상품 추출
ㆍ가격비교 사이트 연동
ㆍ구매 포인트 적립
ㆍ다중 카테고리에 분산 등록
ㆍ기본 PG 연동 : 데이콤,이니시스,올더게이트,페이게이트
ㆍ카테고리별 템플릿(스킨) 차별 적용 가능
ㆍajax 타입 inline 게시판및 레이어 적용
ㆍ선택옵션 가격 실시간 적용, 견적기능
ㆍ주문-결제-배송 단계별 통보기능(sms,쪽지,메일)
ㆍ사은품 선택 옵션
ㆍ세금계산서 발급 관리
ㆍ견적서
ㆍ상품 미리보기 레이어 적용
ㆍ좀더 자세한 것은 제작사 홈페이지를 참조 하시기 바랍니다.

글쓴이 테크노트INC 날 짜 07-10-10 09:45 조 회 27525
간편URL http://www.phpschool.com/link/download/15185 복사
다운로드1 technote7_free.zip (13.5M), Down : 2156, 2007-10-10 09:45:37
Link1 http://www.technote.co.kr/php/tech7demo/admin.php (4636)
Link2 http://technote.co.kr/php/test/board.php?board=kkkmain&command=skin_in… (3455)
지원 OS : PHP4.x ~ 5.x (GD,iconv,Zend Optimizer) , MySQL3.8 ~ 5.x

개발환경 : (Windows+APM) & (FreeBSD+APM)

사용제한 : 프리웨어, 저작권표시 없음.

제작자 : 테크노트INC

자료설명 :
  ㆍ게시판 + 홈페이지빌더 + 쇼핑몰빌더 기능의 웹프로그 램입니다.
  ㆍ다양한 기능으로 초보자도 쉽게 다이나믹한 홈페이지를 만 들 수 있습니다.
  ㆍ규정된 틀에 억매이지 않고 자유롭게 홈페이지 구성 작업을 할 수 있습니다.
  ㆍMySQL을 사용하는 모든 게시판류의 자료를 테크노트 로 변환,통합할 수 있습니다.
  ㆍ쇼핑몰 기능은 상품등록갯수 50개 이내에서 영구적으로 무료사용 허용됩니다.
  ㆍ사용자 의도에 따라 여러 용도로 응용 이 가능한 확장형 구조입니다.
  ㆍSince:  CGI 버전(1998) , PHP 버전(2006)
  ㆍ테크노트 PHP 버전 3번째 업데이트 판입니다. (TechNote6->TechNote6.9p->TechNote7)
----------------------------------------------
▨ 설치방법:
  1. technote7_free.tar.gz 파일을 홈페이지 에 올리고 압축해제한다.
  2, http;//홈페이지주소 /technote7/admin.php 으로 접속하면 설치 초기 화면이 나타난다.
  3, 설치화면 안내에 따라 MySQL 정보, 관리자 비번등을 등록한다.
  기본설치 설명서: http://technote.co.kr/php/technote1/manual/index.html?3
  업데이트 설명서: http://technote.co.kr/php/technote1/manual/index.html?7

----------------------------------------------
▨ 미리보기 :
  관리 : http://www.technote.co.kr/php/tech7demo/admin.php
  홈페이지 스킨1: http://technote.co.kr/php/test/board.php?board=kkkmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨2: http://technote.co.kr/php/test/board.php?board=qqqmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨3: http://technote.co.kr/php/test/board.php?board=myhome&command=skin_insert&exe=insert_home
  쇼핑몰 스킨1: http://technote.co.kr/php/tech7demo/board.php?board=tnshopmain&command=shop
----------------------------------------------
▨ 기능 :
  기본적인 기능만 소개 합니다. 구체적인 것은 직접 살펴 봐야 알수 있을 것입니다.
 * 일반적 게시판 기능 요소 대부분 적용
 * 일반적 회원등록/관리 기능 요소 대부분 적용
 * 일반적 쇼핑몰 기능 요소 대부분 적용
ㆍ일반스킨, 빌더형 스킨
ㆍ통합 검색,확장검색
ㆍRSS
ㆍSMS
ㆍ멀티설정
ㆍDB관리기
ㆍ파일관리기
ㆍ인기 검색어
ㆍ쪽지
ㆍ포인트,레벨에 의한 권한제어
ㆍ광역 컨버터
ㆍ스크랩
ㆍ불량글 신고
ㆍ포인트 증여
ㆍ6단계 관리자 권한 분할
ㆍ다중설치 가능
ㆍ입력필드 무제한 추가
ㆍ빌더생성
ㆍ백업/복구/ 치료
ㆍ설정테마
ㆍ설정항목 추가생성
ㆍ위지윅 에디터
ㆍ무한 카테고리 확장
ㆍ포인트 결제
ㆍ컨텐츠(파일) 판매적용
ㆍ배송추척 조회
ㆍ추천상품 추출
ㆍ가격비교 사이트 연동
ㆍ구매 포인트 적립
ㆍ다중 카테고리에 분산 등록
ㆍ기본 PG 연동 : 데이콤,이니시스,올더게이트,페이게이트
ㆍ카테고리별 템플릿(스킨) 차별 적용 가능
ㆍajax 타입 inline 게시판및 레이어 적용
ㆍ선택옵션 가격 실시간 적용, 견적기능
ㆍ주문-결제-배송 단계별 통보기능(sms,쪽지,메일)
ㆍ사은품 선택 옵션
ㆍ세금계산서 발급 관리
ㆍ견적서
ㆍ상품 미리보기 레이어 적용
ㆍ좀더 자세한 것은 제작사 홈페이지를 참조 하시기 바랍니다.

지원 OS : PHP4.x ~ 5.x (GD,iconv,Zend Optimizer) , MySQL3.8 ~ 5.x

개발환경 : (Windows+APM) & (FreeBSD+APM)

사용제한 : 프리웨어, 저작권표시 없음.

제작자 : 테크노트INC

자료설명 :
  ㆍ게시판 + 홈페이지빌더 + 쇼핑몰빌더 기능의 웹프로그 램입니다.
  ㆍ다양한 기능으로 초보자도 쉽게 다이나믹한 홈페이지를 만 들 수 있습니다.
  ㆍ규정된 틀에 억매이지 않고 자유롭게 홈페이지 구성 작업을 할 수 있습니다.
  ㆍMySQL을 사용하는 모든 게시판류의 자료를 테크노트 로 변환,통합할 수 있습니다.
  ㆍ쇼핑몰 기능은 상품등록갯수 50개 이내에서 영구적으로 무료사용 허용됩니다.
  ㆍ사용자 의도에 따라 여러 용도로 응용 이 가능한 확장형 구조입니다.
  ㆍSince:  CGI 버전(1998) , PHP 버전(2006)
  ㆍ테크노트 PHP 버전 3번째 업데이트 판입니다. (TechNote6->TechNote6.9p->TechNote7)
----------------------------------------------
▨ 설치방법:
  1. technote7_free.tar.gz 파일을 홈페이지 에 올리고 압축해제한다.
  2, http;//홈페이지주소 /technote7/admin.php 으로 접속하면 설치 초기 화면이 나타난다.
  3, 설치화면 안내에 따라 MySQL 정보, 관리자 비번등을 등록한다.
  기본설치 설명서: http://technote.co.kr/php/technote1/manual/index.html?3
  업데이트 설명서: http://technote.co.kr/php/technote1/manual/index.html?7

----------------------------------------------
▨ 미리보기 :
  관리 : http://www.technote.co.kr/php/tech7demo/admin.php
  홈페이지 스킨1: http://technote.co.kr/php/test/board.php?board=kkkmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨2: http://technote.co.kr/php/test/board.php?board=qqqmain&command=skin_insert&exe=insert_iboard1_home
  홈페이지 스킨3: http://technote.co.kr/php/test/board.php?board=myhome&command=skin_insert&exe=insert_home
  쇼핑몰 스킨1: http://technote.co.kr/php/tech7demo/board.php?board=tnshopmain&command=shop
----------------------------------------------
▨ 기능 :
  기본적인 기능만 소개 합니다. 구체적인 것은 직접 살펴 봐야 알수 있을 것입니다.
 * 일반적 게시판 기능 요소 대부분 적용
 * 일반적 회원등록/관리 기능 요소 대부분 적용
 * 일반적 쇼핑몰 기능 요소 대부분 적용
ㆍ일반스킨, 빌더형 스킨
ㆍ통합 검색,확장검색
ㆍRSS
ㆍSMS
ㆍ멀티설정
ㆍDB관리기
ㆍ파일관리기
ㆍ인기 검색어
ㆍ쪽지
ㆍ포인트,레벨에 의한 권한제어
ㆍ광역 컨버터
ㆍ스크랩
ㆍ불량글 신고
ㆍ포인트 증여
ㆍ6단계 관리자 권한 분할
ㆍ다중설치 가능
ㆍ입력필드 무제한 추가
ㆍ빌더생성
ㆍ백업/복구/ 치료
ㆍ설정테마
ㆍ설정항목 추가생성
ㆍ위지윅 에디터
ㆍ무한 카테고리 확장
ㆍ포인트 결제
ㆍ컨텐츠(파일) 판매적용
ㆍ배송추척 조회
ㆍ추천상품 추출
ㆍ가격비교 사이트 연동
ㆍ구매 포인트 적립
ㆍ다중 카테고리에 분산 등록
ㆍ기본 PG 연동 : 데이콤,이니시스,올더게이트,페이게이트
ㆍ카테고리별 템플릿(스킨) 차별 적용 가능
ㆍajax 타입 inline 게시판및 레이어 적용
ㆍ선택옵션 가격 실시간 적용, 견적기능
ㆍ주문-결제-배송 단계별 통보기능(sms,쪽지,메일)
ㆍ사은품 선택 옵션
ㆍ세금계산서 발급 관리
ㆍ견적서
ㆍ상품 미리보기 레이어 적용
ㆍ좀더 자세한 것은 제작사 홈페이지를 참조 하시기 바랍니다.

 

http://k.daum.net/qna/openknowledge/view.html?qid=2dC3j&

웹사이트구축을 위한 스토리보드란?

 

원래 스토리보드는 영화나 TV CF, 만화, 그림등의 영상물이나 창작물을 제작할 때 사용되었던 방법으로 의뢰자와 제작자가 작품을 제작하기 전에 제작 전반에 걸친 내용을 간단하게 여러 개의 화면에 전달하고 싶은 영상을 시간적 흐름에 따라 그림으로 표현한 것이었습니다.

보다 구체적으로 설명하자면 제작자 또는 의뢰자가 생각하는 이미지를 시각화하는 작업으로 영화나 CF 제작에 들어가기 전에 각 장면에 대한 카메라와 피사체의 움직임을 설명, 어떤 내용을 어떻게 찍을 것인가를 그림으로 표현, 촬영에 필요한 모든 것을 미리 파악하게 해주는 일종의 설계도와 같은 것입니다.

의뢰자는 스토리 보드를 보고 실제 작품이 만들어 졌을 때 어떤 내용과 이미지를 갖는지 사전에 확인할수 있고, 현재 제작하려는 작품이 과연 효과적인 안인가 아닌가를 검증해 볼 수가 있습니다. 특히 영상매체 제작에는 필수적인 항목이지요.

그럼 웹사이트로 다시 돌아와서, 인터넷 사이트는 기존의 텍스트환경의 네트워크를 탈피하여, 웹을 기반으로 시각, 청각등의 모든 멀티미디어가 표현가능한 종합예술(?)로서의 기능을 가지고 있는 바, 일반적인 말로서의 설명과 구조적인 설명만을 가지고, 아직 제작이 되지 않은 사이트를 설명하기가 힘들어 졌습니다.

또한 어느정도의 규모만 되어도 적어도 기획자, 디자이너, 프로그래머 이 세그룹이 힘을 합해 한가지 작품을 만들어야 하며, 의뢰자의 기존 생각과도 일치 하도록 만들어야 합니다.

다시 말씀드리면 의뢰자, 기획자, 프로그래머, 디자이너, 이렇게 4가지 부류의 사람들이 아직 제작되지 않은 작품에 대해 동일한 컨셉과 이미지를 가지고 제작이 시작되어야 한다는 점입니다.

현재 웹기획자들은 여러분야에서 다른 전공을 가지고 일을 하다가 전업을 하게된 경우가 많습니다.
그중의 한분야가 CF나 기타 영상메체의 프로듀서를 하시던 분들입니다. 어찌되었던 만들어지는 표현의 차이일 뿐 전체를 프로듀싱한다는 점에서는 같으니 말이죠..

이런분야에서 전업하신 기획자님들의 사이트는 그래픽이 섬세하고, 기능적인 부분에 치우치는 경우가 가끔 있다는 단점이 있기는 하지만 이분들이 스토리보드라는 개념들도 같이 가지고 들어오셔서 웹기획일에 또 한가지 중요한 툴을 갖추게 되었죠.

어찌되었건 웹사이트 제작에 있어서 스토리보드의 역할은 의뢰자, 기획자, 디자이너, 프로그래머가 사이트를 제작하기 전에 미리 웹사이트의 조금은 디테일한 내용을 머리속에 같은 그림으로 그릴 수 있다는 점과, 사이트의 설계도로서의 역할을 한다는 것입니다.

스토리 보드의 제작시점은 사이트의 초기 기획서와 견적서가 제출되고, 계약이 이루어지고, 본격적으로 일이 시작되는 시점에 가장 먼저 그리고 가장 중요한 작업이 됩니다.
스토리 보드가 제작되면 의뢰자에서 승인을 받아야 하는 경우도 있고, 스토리 보드 조차도 잘 이해 못하는 의뢰자라면 디자이너가 먼저 중요페이지를 보여주는 부분만 제작하여 승인을 받는 경우도 있습니다.


■ 스토리보드의 제작(1)

스토리보드의 제작은 사이트의 기획과 제작을 이끌어나가는 기획자의 성향에 따라 매우 다양한 방법으로 진행되고, 표현방법도 아주 다양합니다.
아직 적립되지 않은 툴이라 모든 기획자가 나름대로 스토리 보드를 제작하고 있고, 모든 기획자가 다 다르다고 봐도 과언을 아닐 듯합니다.
이 이야기는 제가 지금부터 설명드릴 스토리보드 제작에 대한 방법 또한 일반적인 툴이 아니라는 말씀입니다.
사실은 저만의 방법이었으며, 저는 앞에서 말씀드린 것 처럼 방송쪽의 프로듀서나 CF계통 출신이 아닌 만큼 원래의 스토리보드는 본 적도 없습니다.

제 나름으로 사이트를 제작하기 전에 어떻게 하면 좀 더 모든 사람들이 제작완료 단계의 사이트를 상상할 수 있는 설계도를 작성할 수 있을까?

그리고, 어떻게 하면 이문서를 보고 OK한 사람이 다 만들어진 사이트를 보고 [아니 처음 말한것과 왜 다르냐]는 말을 안나오게 정확한 표현이 가능할 까를 연구한 끝에, 그리고 사이트 제작을 한건, 두건 진행하면서 쌓아온 나만의 방법입니다.

자꾸 이런 말씀을 드리는 것은 개인의 취향에 따라 사이트가 다르게 나오듯이 자신에게 맞는 스토리보드 제작방법이 있으니 사이트 제작 경험을 쌓으시면서 자신만의 방법을 찾으시기를 바라는 때문이며, 저의 방법이 아직은 완벽하지 않음이 많이 있기 때문입니다.

▶ 1단계. 사이트구조도 작성..

먼저 사이트의 구성에 대한 구조가 확립되어야 합니다. 저의 방법은 의뢰자로부터 요청된 내용, 그리고 기획자의 아이디어, 그리고 벤치마킹을 통해 추가되어야 할 부분이라고 생각되는 내용, 또한 최근 인터넷의 흐름 등등 모든 기획적인 요소가 복합적으로 작성되어 사이트의 뼈대가 만들어 집니다.

일단 사이트에 들어가야할 모든 내용을 나열합니다. 그리고는 내용적으로 또는 기능적으로 유사내용끼리 묶음을 만들어 갑니다. 이것이 추후 사이트 메뉴의 기본 틀로 구성됩니다. 내용과 카테고리가 많은 경우 트리구조로 엮어지기도 합니다.

저의 경우 트리구조로 작성된 이 사이트 구조도를 의뢰자와 작업에 참여할 프로그램머, 디자이너와의 각각 상담을 통해 완성 짓고 결정짓습니다. 첫 단추에 승인을 받지 않고 넘어가면 추후 모든 작업을 다시 하거나 곤란에 봉착하는 일들이 많아지더군요..

▶ 2단계. 사이트 맵 작성

사이트구조도가 완성되면 좀더 자세히 사이트맵을 작성합니다. 이 사이트 맵은 추후 스토리보드의 목차역할을 할 뿐 아니라 사이트 제작의 근간이 되기도 합니다. 이 사이트 맵에는 사이트에 들어가는 모든 페이지가 보여져야 합니다.

사이트 맵이 완성되면 그 사이트의 규모나 구조등이 완전히 결정이 되게 됩니다. 항상 반복해서 말씀드리지만 한단계 한단계를 의뢰자의 승인과 함께 같이 프로젝트에 참여하는 모든 사람들의 동의를 얻으십시오.

기획자가 프로그램, 디자인, 기획등 모든 일에 완벽하게 다 알고 있다면 몰라도, 기획자는 신이 아닙니다. 귀를 열고 많은 부분을 받아들이고, 그 다음에 주관을 가지고 결정하신 후 의뢰자의 승인을 받으세요.. 많은 부분들을 설득시키기도 하셔야 할 거고, 새로 추가되어야 하는 내용들도 많이 있을 겁니다. 처음에 완벽한 설계도 작성의 추후에 업무량을 많이 줄여 줍니다(경험).

많은 사이트들이 사이트 맵을 보여주고 있습니다. 이용자들의 편의를 고려하고, 이용자들이 이 사이트에서 제공하는 부분을 가장 쉽게 알 수 있는 페이지 이지요.. 여기서 만드는 사이트 맵은 일반 사이트에서 보여주는 사이트 맵과는 조금은 차이가 있습니다.

모든 페이지가 다 들어있어야 하고, 각 페이지 마다 넘버링을 하여야 합니다. 모든 페이지에 대한 넘버링은 추후 스토리보드의 목차역할을 하게 되는 것입니다. 넘버링 하는 방법은 기획자의 재량이지만 이왕이면 넘버만 보고도 어느 부분에 속하는 페이지인지 알 수 있도록 하는 것이 유리하겠지요. 알파벳약자와 숫자를 섞어 쓰는 것이 좋습니다.

자 사이트 맵이 완성되셨으면 이제 스토리보드를 만드실 모든 준비를 하신 겁니다. 이제는 스토리보드를 한장 한장 그려보도록 하겠습니다.


■ 스토리보드의 제작 (2)

저는 스토리보드를 만들기 전에 사이트맵을 가지고 브레인스토밍을 합니다.
브레인스토밍이란 회의 참가자들이 이견을 제시하지 않고 생각나는 모든 아이디어를 추출하는 회의를 말합니다. 이건 회의시간도 단축되고, 많은 아이디어를 끌어모을 수 있는 아이디어회의 방법중에 하나지요.

프로젝트에 참여하는 기획자, 디자이너, 프로그래머가 모여 브레인스토밍을 한 후 거기서 나온 것을 스토리보드를 만들 때 많이 반영도록 합니다.
그럼 스토리보드에는 어떤 요소들이 들어가야 하는 지를 살펴보시죠.

우선 그 페이지의 구성이 들어가야 합니다.

프레임을 사용하는 지 아닌지, 메뉴의 구성이 상단에 있는 지 좌측에 있는 지 어느 곳에 어떤 내용을 보여 줄 것인지 등 전체적인 화면구성을 보여 주어야 합니다. 메뉴구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차지 하게 됩니다. 페이지 구성시 사용자 편의를 최우선으로 하시구요..

두번째로 그 페이지의 정보를 보여 줍니다.

지금 작성하고 있는 페이지의 정보를 간략하게 보여줍니다. 저장될 디렉토리, 화일이름, 페이지 title등을 기입하여 주는 것이 좋습니다. 사실 디자인을 하다보면 많은 페이지들을 카피해서 사용하게 되고 페이지의 제목(html코드상)에 소홀하게 되는 경우가 많이 있습니다. 하지만 검색엔진의 로보트가 들어온 경우 페이지의 제목이 아주 유용하게 사용됩니다. 메타네임등을 기입할 필요가 있으
면 이것도 적어 주시면 좋구요..

세번째로 링크정보를 보여줍니다.

페이지에 들어간 링크정보를 정리하여 적어 줍니다. 링크를 기입하는 방법은 각 페이지에 넘버를 설정하여 적어주는 경우도 있고 미리 화일네임과 디렉토리를 다 설정하여 적어주는 경우도 있습니다만 서로의 장단점이 있습니다. 물론 후자의 경우로 하는 것이 작업에 많은 도움을 줍니다만, 지면상 아주 협소해 지는 경우가 있으니 잘 생각하셔서 작업을 하세요..

네번째로 프로그램요소를 보여줍니다.

스크립트 기능을 사용하는 경우, ASP나 PHP등의 프로그램을 사용하는 경우 DB를 오픈하고 쿼리를 사용하는 경우등을 표시하고, 그 기능을 적어줍니다.
그리고 기타로 꼭 설명이 필요한 것을 적습니다. 어떤 부분을 작업할 때 유의해야 할 부분이나, 꼭 신경써서 만들어야 할 부분등 프로그래머나 디자이너에게 알려줘야 할 부분을 적어 줍니다.
이 정도면 어느정도 스토리 보드에 들어갈 부분이 정리가 되는 듯 하네요..
그럼 이런 많은 정보를 어떻게 하면 모든 사람이 쉽게 볼 수 있고, 스토리보드를 그리기 쉽게 할 수 있을 까요? 기획자마다 아직은 여러가지 스타일로 만들고 있습니다. 기획자 자신과 또 같이 일을 하는 팀원이 잘 이해할 수 있고, 사이트 제작을 의뢰한 의뢰자가 납득하기 쉬운 폼이라면 어떤 폼이라도 관계없겠지요? 그럼 그런 방법을 한번 알아보겠습니다. 물론 제방법이지만요.


■ 스토리보드의 제작 (3)

이제 화면에다 스토리보드를 그려보도록 하겠습니다.
회원님들의 요청에 의해 지금 자료실에다 스토리보드 예제를 올려 놓았습니다.
필요하신분은 그 화일을 받아 프린트하신후 보시면서 글을 읽으시면 좀 더 쉽게 이해하실 수 있을 듯 하네요. 화일은 엑셀로 되어있는 데 이건 제가 엑셀을 잘 다루고 익숙해져서 그렇구요. 파워포인트나 다른 어떤 툴로 작업을 하셔도 아님 손으로 그리셔도 됩니다.

다들 잘 보이시나요? 잘 안보이신다구요.. 그럼 제가 대략적인 그림을 보여드릴께요..


1.화면 제일 좌측상단에 Name란에는 화일이름을 표시하구요..

사실 초기에 화일이름을 일일히 다 결정하지 않고 작업을 하는 경우에 페이지마다 넘버를 부여해서 사용하는 경우도 있습니다. 그런데 제가 작업을 해본 결과 화일네임을 앞장에서 말씀드렸던 사이트맵 작성하실 때 미리 다 만드시구요.. 화일네임으로 작업을 하시면 미리 링크를 걸수 있어서 좋습니다. 단지 제 방법이구요.. 편리하신 데로 하세요.

2. 고 바로옆에 Floder를 적는 란을 마련했습니다.

현재 작업하시는 파일의 디렉토리를 적어 주시면 됩니다. 링크를 걸 때 상대적인 주소를 사용하게 되는 경우는 이 화일이 있는 위치를 파악하고 있으 면 편리 하지요. 링크를 거는 사람에 대한 배려입니다요..

3. 우측상단에는 타이틀과 Meta라고 적혀있는 부분이 있지요?

Title에는 그 페이지의 제목을 적어 줍니다. html 페이지 상단에 title 코드를 넣게 되는 데 이곳에 제목을 넣게 되면 그 페이지를 열었을 때 모니터 하단에 창이 열렸다는 표시에도 표시가 되구요. 브라우저 제일위에도 보여주게 됩니다. 그리고 더 중요한 것은 메타정보들과 함께 타이틀을 가져가는 로보트들이 있습니다. 검색엔진에서 사용하는 로보트들이 사이트에 들어온 경우 모든 페이지를 읽어가서 자신의 검색사이트에 올리게 되는 데 이 때 타이틀에 제목을 안 적어 준 페이지는 제목없음으로 나오게 되지요.. 그리고 메타네임은 주로 메인페이지에 많이 적어주는 데 자세한 내용은 프로그래머나 디자이너에 맡기시구요. 메인페이지라면 적어도 메타 키워드하고 디스크립션 정도는 적어주십시오. 웹페이지들을 만들다보면 비슷한 페이지를 카피해서 사용하는 경우도 많구요. 제목에 소홀해 지는 경우가 많은 데 작은 곳에서 부터 마켓팅을 준비하시는 자세가 필요합니다.

4. 화면의 좌측하단에 보시면 Link정보라는 란을 마련해 두었습니다.

링크되는 곳과 링크페이지를 보여주어야 하는 데 화면에다가 다 적으면 여기저기 적다가 나중에 적을 곳이 없어서 선을 찍~빼서 적기도 하고 나중에 그것도 안되면, 문방구에 가게됩니다. 큰 종이사러~..
그래서 코드화 했습니다. 물론 제방법이지만 링크는 {}를 사용해서 Link에서 따온 약자 L을 넣고 일련번호를 넣었지요. {L01}, {L02}, {L03}이런 넘버들이 보이시죠.. 이 표시를 메인창 링크들어가는 곳에 넣으시고 그 정보는 하단에 적으시면 편리합니다. 중괄호 { 가 불편하시면 < 나 # 등을 사용하시는 것도 좋구요. 링크정보를 적으실 때 디렉토리까지 적으시면 다른 페이지가 만들어지지 않
은 상황에서 미리 링크를 걸어 놓을 수 있지요. 하지만 미리 링크를 거신 경우에 끊어진 링크가 있는 지 수시로 확인하시고, 사이트가 다 만들어진 경우에 모두 클릭해 보시고 확인해 보셔야 합니다. 끊어진 링크는 사이트의 신뢰를 무지하게 떨어뜨리는 요인이 됩니다.

5. 다음은 페이지 우측하단인데요..

요건 예전엔 안쓰다가 최근에 제가 좀 업데이트를 해서 사용하고 있는 부분입니다. Program란에는 이 페이지에 프로그램 요소가 들어있는 지 유무를 넣는 란이지요.. O, X로 넣기도 하구요. ASP, PHP로 넣기도 합니다.
그리고, DB Query란에는 이페이지에 DB에서 불러오거나 입력 또는 수정하거나 DB내용을 컨트롤 하는 쿼리를 사용하는 지 유무를 체크해 주는 란이구요..그리고 Script라고 써있는 부분은 자바스크립트나 VB스크립트가 이페이지에 사용되는지의 유무를 표시해 줍니다. 마지막으로 Image부분은 이페이지에 필요한 이미지 특히 새로 만들어야 하는 이미지의 숫자를 표시하고 있습니다.
요부분은 프로그래머나 디자이너가 스토리보드를 볼 때 이부분을 보면 대략적으로 이 페이지를 만들 때 어느 정도의 일을 해야하고 어떤 부분을 사용해야 하는지 보여주는 곳으로 일일히 내용을 읽지 않고도 어느 정도 알 수 있지요. 프로그래머나 디자이너들이 좋아하더라구요. 한번 사용해 보세요..

6. 우측하단에 연결Table이란 곳이 보이시지요?

이부분은 Table기획이 끝나고 나서 스토리보드를 만드는 것이 좋다는 것을 미리 알려주고 있습니다. 프로그래머가 DB의 어떤 Table을 사용해야 하는 지를 보여주는 부분인 데, 어떤 분들은 이건 월권이다. DB설계는 프로그래머의 고유권한이다.. 라고 하시는 분들도 있을 지 모르겠습니다. 하지만 웹기획자는 사이트의 모든 부분을 기획하시는 것이 좋습니다. DB기획은 프로그램머와 같이 합니다.
사실 DB기획은 다른 강좌에서 자세하게 설명하겠지만 사이트가 성장(?)했을 때 엄청난 파급효과를 가져오는 부분으로 기획자가 미리 이 사이트가 테이블 별로 어느 시점에 어느 정도 성장할 지 각 테이블이 추후 어떻게 사용이 될지에 대한 정보를 프로그래머에게 주시고, 프로그래머와 잘 상의하셔서 Table에 대한 설계를 하셔야 합니다.
DB가 필요한 부분은 {D01}, {D02}, {D03}같은 코드를 저는 사용하고 있습니다. 메인창에 코드를 표시하고 이곳에다가 Table명을 기입하고 있지요. 프로그램작업하실 때 많이 편리하실 겁니다. 물론 사용하는 컬럼네임까지 적어주면 좋겠지만 지면 관계상 적지 않고 있습니다. DB가 중요한 사이트라면 항목을 한번 만들어 보시는 것도 좋겠네요..

7. 다음은 우측중간에 있는 내용입니다.

여기는 메모창입니다. 창에 각 요소마다 주석을 달아야하는 데 이곳에 적습니다. 저는 코드를 <A>, <B>, <C> 이런 형태로 사용하는 데 이건 좋으실 대로 하세요. 가나다를 쓰시던지 1234를 쓰시던지 말리지 않겠습니다. 주석을 적으실 때는 주석정보를 보실 분, 디자이너 또는 프로그래머에게 의사가 정확하게 전달될 수 있도록 하시고 간결하게 표현하시는 것이 좋습니다. 저의 경우 공간이 부족한 부분은 메인창 뿐아니라 어떤 곳이라도 테그를 달고 이곳에 적습니다. 사용하다보면 공간이 부족한 부분이 많이 생기실 겁니다. 지금 예제에도 메타 De-scription항목에 <J> 라는 코드가 붙어있고 그 내용이 내용의 <J>에 들어 있지요.. 이렇게 사용하시면 됩니다.
다시 한번 노파심에 말씀 드리지만 지금의 예제는 정형화 된 폼이 아닙니다. 이건 제가 사용하는 방법이구요. 이걸 힌트로 기획자님들 각자의 멋진 폼을 만드시고 같이 일하시는 프로그래머, 디자이너가 쉽게 모든 정보를 알 수 있도록 만드시면 됩니다. 그리고, 사이트의 문외한인 의뢰자가 보고도 그 페이지가 어떻게 구성될 지 알 수 있도록 하면서 빨리 작성할 수 있는 툴을 만드십시오.