W' page

홈페이지를 구축하려면 크게 3가지가 필요하다고 한다. 그 3가지는 다음과 같다.
(아래 각 항목에 대한 설명은 내가 이해한 것들이다. 틀리거나 보강할 것이 있으면 개의치 말고 알려주십시길..)
 

1. Apache

 
인터넷을 하는 우리 모두에겐 고유한 ip가 있다. (허브 및 공유기를 통해 고유한 ip를 여러명이 나눠쓰기도 한다.)
쨋든 외부에서 내 ip나 특정 Domain을 입력하여 내 PC까지 왔을때 '이리로 가시오~'라고 안내해 주는 것이 필요하다.
이러한 안내의 역할을 해주는 것이 Apache이다.
(일반적으로 80번 포트를 개방해주고 Apache 프로그램에서 지정한 폴더 안에 있는 index.html 이나 index.php 를 띄우도록 해준다.)
 

 
2. PHP

친절한 Apache를 통해 내 PC의 정문을 통해 내가 만들어 놓은 공간에 누군가 들어왔다.
근데 이 공간이 보여주기만 하는, 아주 정적인 박물관같이 꾸며져 있으면 참 재미없을것이다.

요즘 움직이는 박물관이 유행하듯이 내 홈페이지를 방문한 사람의 행동에 반응하는 것이 필요하다. 그래서 필요한 것이 PHP 이다.
사용자들이 보기만 하는 것이 아니라 함께 소통할 수 있도록 움직이는 공간을 구현해주는, 동적인 것을 구현해 주는 것이 PHP 이다.

(가장 간단한 예로 게시판을 들 수 있다. 사용자가 '쓰기'를 눌러 글을 쓴 다음 '등록'을 누르면 홈페이지에 변화가 생긴다.)
 

 
3. Mysql

홈페이지 공간을 구성하는 요소 요소가 바로 Database 일 것이다. 이 Database를 효과적으로 주무르기 위해 존재하는 것이 Mysql 이다.

 
이 3가지가 홈페이지를 구축하는데에 필수적인 것들이다.  헌데 이 필수적인 3가지를 손쉽게 설치할 수 있는 프로그램이 있다.
바로 APMSETUP7 이라는 프로그램이다. (http://www.apmsetup.com/download.php 에서 다운받아 설치할 수 있다.)
 
나는 APMSETUP 프로그램을 내가 따로 파티션 나눠놓은 D드라이브에 설치했다.

혹시 모를 상황을 대비해 백업용인 다른 드라이브에 설치하는 것을 추천한다.
 

/*
 
위 3가지를 전문가처럼 직접 설치하는 방법은 나도 잘 모른다. 하지만 인터넷에 나와있는 방법을 '나를 위해' 적어놓겠다.
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=download&wr_id=17266&page=1
위 링크의 글에 있는 첨부파일을 참조!                                                                                                           */
 

 
설치가 완료면 인터넷 브라우저에 localhost 라는 주소가 띄워지면서 APMSETUP 이 잘 설치되었다는 화면이 나올 것이다.
그리고 그 화면은 APMSETUP이 설치된 폴더 안의 htdocs 에 있는 index.php 파일일 것이다.
외부에서 내 PC로 접속하면 이제 htdocs 폴더 안의 index.php 혹은 index.html 로 안내가 되는 것이다.

(htdocs 말고 다른 곳으로도 오게 할 수 있다. 그 설정은 apmsetup 모니터링 프로그램의 서버설정에 들어가면 된다.)
 

이제 인터넷 세계에서 내 PC의 정문으로까지의 길을 닦아 놓았으니, 이젠 내가 보여줄 공간을 꾸미기만 하면 된다.
헌데 이 공간을 꾸미는 방법이... 옛날과는 많이 달라진것 같다.
(옛날이라 하면 내가 초딩때의 제로보드 시절...)
홈페이지를 쉽고 있어보이게 꾸미는 방법은 여러가지가 있지만 나는 내가 이 홈페이지를 만든 XE 라는 툴 사용법에 대해 적으려 한다.

※ 만약 고정ip를 사용하며 이미 보유한 DNS가 있다면 아래쪽 WoL의 내용만 보면 된다.

1. DDNS

 
각각의 사이트들에는 고유한 주소가 있다. 도메인(ex www.naver.com)이든 ip주소(ex 164.124.101.2) 이든 말이다.
그렇다면 내가 만든 홈페이지에 접속하기 위해서도 어느 특정한 주소가 필요하다.
 
원래는  ip주소를 고정으로 놓고 DNS 설정을 해주어 내가 원하는 도메인이 내 ip주소로 연결될 수 있도록 하는 것이
가장 깔끔하고 추천할 방법이라고 할 수 있겠다.
그러나 일반 가정집에서는 고정ip가 아닌 미리 인터넷 업체에서 보유한 ip들 중 그때 그때 비어있는 ip를 분배해주는
이른바 유동ip를 사용하고 있다. 그렇기 때문에 오늘의 내 ip주소와 내일의 내 ip주소가 다를 수 있다.
그렇다면 일반 가정집에 있는 사람들은 컴퓨터를 재부팅 할때마다 바뀐 ip주소로 재설정을 해야하는가?!
다행히 친절하게 바뀐 ip로 DNS 설정을 자동으로 변경해주는 시스템이 있다. 이것이 바로 DDNS 라는 것이다.

"DDNS는 실시간으로 DNS를 갱신하는 방식이다. 주로 도메인의 ip가 유동적인 경우 사용된다."
라고 우리의 위키백과가 알려준다. (출처 : http://ko.wikipedia.org/wiki/DDNS)
이러한 셋팅은 iptime 공유기에서 요즘은 기본적으로 지원해준다고 한다..!!
(일반적으로 WoL 서비스 때문에 많이 쓴다. WoL에 관한 이야기는 아래쪽에 쓰겠다.)
하지만 나 같이 대중적이지 않은 공유기를 사용하거나(북인천방송 인터넷전화기 전용 공유기) 모뎀에서 바로 컴퓨터로 연결하는
일반적인 사람들은 iptime의 서비스를 이용하지 못한다. (iptime 공유기 사용자는 이곳을 참조 : http://ccami.tistory.com/58)
 
그렇다면 iptime 공유기 사용자만 DDNS 서비스를 이용할 수 있는가? - 당연히 No! 겠다.
예전에는 DDNS 서비스를 이용하도록 해주는 서비스가 많았던것 같다. (인터넷 검색 결과....)
그러나 많은 서비스가 문을 닫았고 여러 검색 루트를 통해 DDNS 서비스를 제공해주는 업체를 발견했다.
http://freedns.afraid.org 라는 홈페이지에서 DDNS 서비스를 간단하게 설정할 수 있다. 설정하는 방법은 아래와 같다.

  
① http://freedns.afraid.org 사이트에 접속 -  왼쪽 메뉴 중 Dynamic DNS 메뉴 클릭
② setup an account here(회원가입) 클릭 - 내용 기재 후 Send activation email 클릭 - 기재한 이메일 계정으로 로그인 하여 활성화
③ 활성화 됬으면 다시 http://freedns.afraid.org 사이트의 Dynamic DNS 메뉴 들어가서 add 버튼을 잘 찾아 클릭 후 아래와 같이 입력
 

Type : A
Subdomain : 내가 원하는 도메인 이름
domain : Subdomain 뒤에 붙을 도메인
Destination : 현재 자신의 ip주소 - 구글에 what is my ip 로 검색하면 나온다.
                  (시작 - 실행 - cmd - ipconfig 에 나오는 자신의 ip를 믿으면 안된다!!)

아래의 TTL 과 Wildcard 는 건드리지 않아도 된다.
다 적었으면 SAVE. 이제 내가 선택한 http://subdomain.domain 이 나의 주소가 된다.
 
자, 이제 마지막으로 자신의 공유기에서 DDNS 설정을 하면 된다.

공유기 설정의 DDNS 설정에 들어가 내가 입력한 정보 그대로를 적으면 설정이 완료!
 
그런데 이렇게 설정한 DDNS를 홈페이지 주소만을 위해 사용하는 것 말고 원격 부팅을 위해서도 사용할 수 있다~

그래서 원격부팅인 WoL에 대해서도 적어볼까 한다. (iptime 공유기 설정방법은 여기를 참조 : http://ccami.tistory.com/59)
 

2. WoL

    
WoL(Wake on Lan) 이란 이름에서도 알 수 있듯이(.. 정말..?) Lan을 통해 Wake 시키는 것이다. 헌데 이 Wake 시키는 대상은 바로... 내 PC!
우리가 PC를 키기 위해선 보~~~~~~~~~~~~통 본체의 전원 버튼을 누른다.   
헌데 본체의 전원을 누르는 이 행동을 대신 해주는 기능이 있다. 바로.. WoL(Wake on Lan)이다.
    
WoL의 원리는 간단하다. 전원을 누르는 행동 대신 LAN 케이블을 통해 메인보드에 "전원을 켜!"라는 신호를 주는 것이다.
    

구체적인 설정 방법은 다음과 같다. 하는 순서나 방법들은 다 거기서 거기다.

     
① CMOS 설정

CMOS 설정에 들어가 Wake on Lan 항목을 Enable 시킨다.

(CMOS 설정 : 컴퓨터 켜지자 마자 F2나 DEL을 연타하면 나오는 설정창. 나는 이미 되어있었다.)
각 메인보드사마다 해당 기능의 이름이 다르다. 구체적인 것은 구글에 검색하길 바란다.

3dp chip이라는 프로그램을 설치, 실행하면 자신의 메인보드 모델을 알 수 있으며,
http://neoray.tistory.com/281#.U-xtXfl_tsI 여길 참조하면 메인보드 설정에 대한 좀 더 자세한 이야기를 볼 수 있다.

 
② Windows 설정

컴퓨터 우클릭(바탕화면 혹은 윈도우 탐색기에 있다.) - 속성 - 장치관리자 - 네트워크 어댑터 - 오른쪽 우클릭 - 설정 에 들어가서
Wake on Lan 에 관련된 항목을 다 켜준다. (이 역시 제조사마다 다르므로 http://neoray.tistory.com/281#.U-xtXfl_tsI 여길 참조.)

③ 공유기 설정

공유기에서의 WoL 설정 (공유기가 없거나 WoL 지원 안하는 공유기는 이용 불가)     
  - 공유기 설정창 들어가는 방법 : 시작 (- 실행) - cmd - ipconfig 하면 기본게이트웨이 ip 주소가 나올 것이다.

    그 주소가 바로 자신의 공유기 설정에 접근할 수 있는 주소다. 인터넷 브라우저에 해당 ip 입력하여 접속한다.
    (공유기 제조사 별로 관리 id/pw 가 다르다. 이 역시 구글링 통해 알아봐야 한다.)
    
 - MAC 주소 : 시작 (- 실행) - cmd - ipconfig /all 하면 물리적주소 라고 해서 나는데, 그걸 입력하면 된다.

이렇게 WoL의 설정까지 끝!

홈페이지를 돌릴 생각이 없는 사람이라도 ftp설정만 추가로 해주면 언제든 컴퓨터를 키는 것만으로 웹하드를 사용할 수 있으며

언제든 원격접속으로 내 컴퓨터를 조종할 수 있게 된 것이다.

원래는 무료 호스팅 업체를 통해 XE로 개인 블로그를 운영하였지만

감사하게도(?) 무료 호스팅에서 제공해줄 수 있는 서비스의 수준을 넘어서 쫒겨났다.

그래서 선택한 것이 이 Tistory.

나중을 위해 Tistory 에서 내가 설정한 것들을 기록하려 한다

1. Skin

스킨명 : Divergence(Mint)

스킨 위자드로 변경

배경 : 색상

타이틀 : 패턴

제목 및 게시글 : 글꼴, 글자색

글영역 넓이 : 900px (헌데 기본 본문 가로 사이즈가 824px 이라 변경이 될지는 모르겠다.)

2. CSS

1) 게시글의 줄간격이 너무 좁아 p 태그에 css를 줬다.

HTML/CSS - style.css - /* 본문 */

.article,

.article p { line-height: 170%; }

a:hover {text-decoration: underline; }

*

.article p { line-height: 170%; }  추가

2) 본문의 링크 색이 잘 보이지 않아 a 태그의 색을 노란색으로 변경하였다.

HTML/CSS - style.css - /* 공통요소 */

a {color: #ffcc00; text-decoration: none; }
a:hover {text-decoration: underline; }

*

#415360 -> #ffccoo 으로 변경

3) 카테고리의 글씨가 잘 보이지 않아 글씨 색 변경

HTML/CSS - style.css - /* 본문 */

.article_head .title {display: inline; color: #ffffff; line-height: 1.2em; padding: 0 0 0

*

#181818 -> #ffffff 으로 변경

4) 글 아래 태그 글씨 색 변경

HTML/CSS - style.css - /* 본문 */

.article_tag a {color: #FCEEFD; }

*

#2d353b -> #FCEEFD 으로 변경

3. HTML

1) 카테고리 밑 글들도 색이 잘 안보인다. CSS 로 수정하려 했으나 잘 모르겠어서 HTML 안에 font 태그를 넣어 수정했다.

HTML/CSS - skin.html

<ol class="article_post">
    <s_list_rep>
        <li>
            <span class="date"><font color=#FCEEFD>##_list_rep_regdate_##</span>
            <span class="title">
                <a href="##_list_rep_link_##"><font color=#FCEEFD>##_list_rep_title_##</a>

                <span class="count">##_list_rep_rp_cnt_##</font></span>
             </span>
        </li>
    </s_list_rep>
</ol>

*

각각의 ##_list_rep_regdate_## & ##_list_rep_title_## & ##_list_rep_rp_cnt_## 를 font 태그로 감쌌다.

각 ##변수## 앞 뒤로 대괄호가 있다는 것 주의! (본문에 나타나지 않음)

2) Google Analytics 사용 위한 코드 삽입

HTML/CSS - skin.html

<head>

<!-- Google Analytics -->

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-61222542-1', 'auto');

  ga('send', 'pageview');

  ga(‘set’, ‘&uid’, {{USER_ID}}); // 로그인한 User-ID를 사용하여 User-ID를 설정합니다.

</script>

*

head 태그 바로 밑에 태그 삽입하였다.