적용버전 : XpressEngine 공통 루트(root)의 index.html과 XE 코어의 index.php 파일 연결하기

index.html 누구냐 넌?

도메인으로 사이트(홈페이지)에 접속해 보기

이전 과정에서 XE 코어 프로그램을 서버에 설치하였습니다. 그리고 정상적으로 XE 기본 데모 페이지까지 확인하고 웹브라우저 창을 닫았습니다. 이제 여러분의 홈페이지는 미리 등록해 두었던 도메인(사이트 주소)으로 데모 페이지를 볼 수 있겠지요? 웹브라우저를 열고 주소입력란에 사이트 주소를 입력해 주세요.

image

그런데 이게 왠 일이죠? XE 데모 페이지가 아닙니다. 계정 신청시 보았던 정보 페이지가 계속 보입니다. 우리가 원했던건 XE를 설치하고 마지막에 보았던 그럴싸한 환영(Welcome XE) 페이지를 찾는 것인데 아직까지도 계정 설치 정보 페이지만 보여주고 있네요.


내 이름은 index.html

문서도 자기만의 이름이 있습니다. 아무리 작은 문서파일도 자신의 이름을 정확히 불러주기를 원한답니다. 위와 같은 화면을 만들어낸 문서의 정확한 이름은 index.html(인덱스)입니다. 그리고 보니 루트(root) 디렉터리 안에 index.html 문서를 본 것 같군요. index(인덱스)의 뜻은 (책 등의)색인, 표시, 지표 등으로 해석할 수 있는데 어원의 의미는 집게손가락으로 가리키는 것을 말합니다. 여러분이 사이트 주소만 입력했을 때 서버에서는 누구를 찾는지 정확히 알 수 없었기 때문에 집게손가락으로 가리키며 "얘(index.html)를 찾으시나요?" 하고 보여준 것입니다.

index 뒤에 붙는 html은 파일의 형식을 나타내는 확장자라고 하며 문서의 종류를 나타냅니다. 마치 미국사람의 성(Last Name)과 같습니다. 우리는 성이 앞에 와서 "홍 길동"이라고 하지만 미국식 이름은 "길동 홍"이 맞겠죠? 이름에서 성의 역할은 조상의 직업이나 출신 지역, 가문 등을 말해줍니다. 베이커(Baker) 또는 베커(Becker)는 빵 만드는 사람, 플라이셔(Flei-scher)는 푸줏간 주인, 우리가 잘아는 아인슈타인(Einstein)은 벽돌공이라는 뜻이 숨어 있고 골드슈미트(Goldschmidt)는 금을 세공하던 사람입니다.

html은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지 또는 웹 문서를 일컷는 말로 인터넷을 통해서 다른 사람에게 어떤 글이나 그림을 보여주고 싶을 때는 문서의 이름 뒤에 .html 이라고 붙여서 사용하기로 약속하였습니다. 그런데 문서의 이름조차 모르고 찾아오는 사람들이 아주 많습니다. URL 주소(xeschool.com)는 아는데 홈페이지에서 누구를 찾아야 할지 모릅니다. 그래서 서버 선생님은 고민 끝에 index.html 군에게 반장을 세워 홈페이지 방문자가 누구를 찾는지 모른다면 네가 먼저 나가서 물어보라고 가르쳐 주었답니다. 만약 반장이 화장실에 갔다면 어떻게 할까요? 부반장을 세워야지요. 부반장의 이름은 index.php입니다. 누가 반장을 하고 누가 부반장을 할지는 서버 선생님 마음입니다...^^


반장을 바꾸자 (index.html 만들기)

여러분이 만약 개인적인 서버를 만들고 홈페이지를 운영하려고 생각한다면 누구를 반장으로 세우든지 상관은 없습니다. home.html을 세우든지 main.html을 세우든지 그것은 여러분 마음입니다. 하지만 호스팅 계정을 이용하는 우리는 어쩔 수 없이 약속되어져 있는 이름값을 사용해야 합니다. 서버의 루트(root) 디렉터리 안에는 이미 서버에서 설정된 순위에 따라 index.html이라는 웹문서가 있습니다. 같은 루트 안에 반장과 부반장이 같이 있다면 서버가 순위를 정해놓은 순서대로 방문자에게 먼저 나갈 것입니다. 그밖의 다른 문서들은 그 숫자와 상관없이 이름을 부르지 않으면 가만히 앉아 있게 됩니다.

아래 그림은 루트에 있는 index.html과 하위 디렉터리 xe에 들어있는 index.php입니다. 루트(root) 디텍터리의 반장은 index.html이고 xe 디렉터리의 반장도 같은 이름의 index.php이군요. 하지만, 학급이 다르기 때문에 서로 같은 파일이라고 말할 수는 없겠지요? 이름은 같아도 성격(조금은 여성스러운 php)이 무척 다릅니다.

image

XE 코어를 설치하고 난 후에 가장 먼저 해야 할 일은 루트(root) 디렉터리에 있는 index.html에게 xe 디렉터리의 학급반장(index.php)을 좀 불러달라고 해야 합니다. 나중에 xe 디렉터리 안에 있는 학급반장(index.php)과 그 구성원을 모두 루트(root)로 옮겨 놓을 수도 있겠지만, XE스쿨에서는 기본적으로 xe 디렉터리를 따로 구분해서 운영할 계획입니다. 왜냐하면 xe를 여러 개 설치하는 경우(xe2, xe3 또는 myhome처럼 디렉터리 이름을 바꾸어 설치할 수 있습니다.) 루트(root)에 있는 반장이 해야 할 일을 좀 다르게 시킬 수 있겠지요?

서버에는 이미 만들어져 있는 계정 설치 정보 안내를 위한 index.html 문서가 있지만 여러분의 컴퓨터에는 아직 index.html이 없습니다. 그래서 서버의 index.html 문서의 하는 일을 바꾸어 주어야 하는데 여기서 첫 html 웹문서를 만들어 보려고 합니다. html를 몰라도 어렵지 않습니다. 단 3줄로 끝나는 html 문서를 만들려고 하기 때문에 너무나 쉽습니다. 걱정하지 마시고 준비물이었던 문서 편집기인 에디트플러스(EditPlus)를 실행해 주세요.

에디트플러스는 아래 그림과 같은데 문서 편집기는 여러분이 편하게 사용하실 수 있는 것으로 자유롭게 이용하시면 됩니다. XE스쿨에서는 대한민국의 자랑 에디트플러스를 이용할 것입니다. 처음 문서를 만들기 전에 XE에 알맞은 환경설정을 해야 합니다.
그림을 따라 영구적인 설정부터 해주세요.

  • 문서편집기 에디트플러스▲ 문서 편집기 에디트플러스
  • 영구적인 설정▲ 상단 문서 탭에서 영구적인 설정을 클릭하세요.
  • XHTML 태그사용 설정▲ 일반항목에서 XHTML 태그 사용을 선택해 주세요.
    하단에 오른쪽 마우스버튼에 EditPlus에 체크가 되어 있는지도 확인해 주세요.
  • UTF-8 설정▲ 파일 항목에서 기본 인코딩 유형을 UTF-8로 선택해 주세요. 저장시 백업 파일 생성 옵션은 자유롭게 선택해 주세요.
    옵션에 체크하면 같은 이름의 백업 파일을 만들게 됩니다.
  • 문서 템플릿 확인▲ 문서 템플릿에 XHTML 템플릿이 있는지 확인해 주세요.
  • 설정 완료▲ 설정이 끝났습니다. 확인을 클릭하세요.
  • 새문서▲ HTML 새문서 만들기을 클릭하세요.
  • 문서만들기 준비화면▲ HTML 새문서 만들기가 준비되었습니다.

환경설정이 끝나고 새문서 작성을 위한 준비가 되었다면 새로운 HTML 페이지 형식을 준비합니다. "HTML을 모르는데 어쩌지요?"하시겠지만, 묻지도 따지지도 마시고 문서 안의 태그 내용을 모두 드래그해서 싹~ 지워주세요...^^

image


그리고 아래에 나오는 3줄의 코드를 차례대로 써 주세요. 많은 코드가 아니기 때문에 그림을 보고 천천히 입력해 보세요.

★ 잘 들어봐! 너는 html 문서이지만, 나는 php로 네가 해야 할 일을 말하고 싶어. 우리만의 비밀이니까!
만약 우리 홈페이지(root)에 어떤 손님이 오면, 가장 먼저 네가 해야 할 일(header)은 너보다 하위 디렉터리(location)에 있는 xe 디렉터리로 안내만(/xe/) 해 드리세요. 그러면 xe 디렉터리에 있는 부반장(index.php)이 알아서 손님을 안내할꺼야. 꼭 부탁해!

<?php
   header("Location:/xe/");
?>

image

Tip : 그 외 다른 방법들

1) meta 태그 이용 : HTML 문서의 <head>...</head> 사이에 추가하여 사용합니다.

<meta http-equiv='Refresh' content='0;url=/xe/'>

2) 스크립트 이용 방법 : HTML 문서의 <body>...</body> 사이에 추가하여 사용합니다.

<body>
   <script type="text/javascript">
   <!--
      location.replace('/xe/');
   //-->
   </script>
</body>

입력이 끝나면 파일 탭에서 새 이름으로 저장하기를 클릭합니다.

image


이전에 만들어 두었던 사이트 관리용 폴더 루트(root) 위치에 index.html 문서로 저장합니다. 인코딩 형식은 반드시 UTF-8 을 선택해 주어야 합니다.

image


FTP로 index.html 문서 업로드 하기

새로 만든 index.html 문서는 내 컴퓨터의 사이트 관리용 폴더에 저장되었습니다. 이제 FTP를 실행해서 서버와 연결한 후 새로 만든 index.html 문서를 계정의 최상위 루트(root) 디렉터리에 업로드 해야 하는데, 좌측화면은, 정확히 말하면 서버와 비슷한 트리구조로 관리하는 것이 좋기 때문에 내컴퓨터의 사이트 관리용 루트(root) 디렉터리이고, 우측화면은 서버의 루트(root) 디렉터리를 보여주는데 우리가 설치했던 XE 코어 압축파일과 xe 디렉터리, 계정 설치 정보 안내를 보여 주었던 index.html 문서만 있습니다.

이제 새로 만든 index.html을 서버에 올려야 하는데, 서버에서 이제까지 일하고 있었던 index.html 문서는 삭제를 해도 좋습니다. 하지만 항상 문서를 소중히 생각하는 습관은 정말 귀중한 것입니다. 당장 필요없다고 해서 쉽게 지워버리기 보다는 잠시 반장일을 쉬게 하고 나중에 삭제 또는 정리할 수 있는 습관을 갖게 되기를 바랍니다. 그래서 일단 서버에 있는 index.html 문서의 이름을 수정해 줍니다.

image

FTP에서 마우스 오른쪽 버튼을 클릭하면 이름바꾸기를 할 수 있는데 실수로 더블클릭하게 되면 내 컴퓨터의 관리용 루트(root) 폴더에도 같은 이름의 새로 만든 index.html 문서가 있기 때문에 덮어쓰겠냐고 물어봅니다. 이때 무심코 확인을 클릭하게 되면 애써 만들어 둔 새로운 index.html 문서가 예상치 못하게 덮어 씌어지겠지요? 주의하고 조심해야 할 부분입니다.


image

서버의 index.html 문서는 index.html.bak으로 이름을 수정해 주었습니다. 이제 더이상 이 문서는 반장일을 하지 못합니다...^^
내 컴퓨터에서 새로 만든 index.html 문서를 드래그해서 서버의 루트 디렉터리에 옮겨 줍니다. 마우스 드래그로도 파일이 업로드 되고, 더블클릭해도 파일이 업로드 됩니다. 편한 방법으로 업로드 작업을 하시면 됩니다.

※ 지금의 과정은 앞으로 그림을 통해 설명드리지 않게 됩니다. 파일의 업로드와 다운로드시 루트(root)와 하위 디렉터리의 위치 경로를 꼼꼼히 확인하시고 작업을 해야 합니다.


image

작업이 끝나면 FTP를 닫고 웹브라우저를 열어서 사이트 주소(URL)를 입력해 보세요. 우리가 원했던 XE 데모 페이지가 바로 나타나게 되고 사이트 이름 뒤에 /xe/ 가 자동으로 붙게 된다면 여러분이 처음으로 만든 index.html 문서가 제 역할을 잘 하고 있는 것입니다.

XE 코어는 사이트 접속 시 기본으로 호출될 모듈(시작 모듈)을 미리 지정하여 두고 사용하게 됩니다. 여기서는 최초 설치시 기본으로 설정되어 있는 welcome_page 모듈을 찾아 출력합니다. 이 부분은 다음 과정에서 다루게 됩니다.

예) http://xeschool.com/xe/welcome_page

Tip - xe 폴더 안의 코어 파일과 하위 폴더 전체를 루트(root) 디렉터리로 옮겨 설치한 경우 URL 뒤에 /xe/ 가 붙지 않습니다. 또한 index.html 문서를 별도로 작성하여 업로드하지 않아도 시작모듈을 찾아 출력합니다. 왜냐하면 XE 코어가 가지고 있는 index.php 파일이 최상위 루트(root)에서 반장일을 대신하기 때문입니다.