달력

11

« 2017/11 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  

'웹개발'에 해당되는 글 1

  1. 2009.10.26 XE(XpressEngine) 기본 개념을 이해하자. 제로보드 XE 접근방법 ! (20)
본 글은 XE(XpressEngine) 를 처음 접하거나 이제막 사이트를 개발하려는 XE 초보자를 위한 XE 접근 방법에 관한 소개 입니다.

쓸만한 Tip은 아니지만 XE를 처음 접하거나 이제 막 사이트 개발을 하려는 초보자들을 위한 XE 접근 방법에 관한 간단한 설명 정도 됩니다.

1. 헤더와 푸터로 나누고 게시판만 붙이려면 어찌해야 하나요?
2. 드림위버나 나모로 작업하고 게시판만 붙이고 싶은데 어떻게 하나요?
3. 게시판만 따로 빼내서 붙이려면 어찌해야 하나요?

위와 같은 질문들이 XE 공식 사이트 지식인 게시판에 계속 올라옵니다.
좀 안다하는 분들은 계속 중복되는 질문에 식상하여 이젠 대답도 잘 안합니다.
응답을 한다 해도 단답형이라 XE 무경험자들은 속만 답답할 뿐.......... ㅋㅋㅋ

이미 XE를 다뤄본 사람들은 아주 간단하지요?
하지만 이제 막 XE로 작업을 하려는 사람들은 막막하기 이를데가 없는데, 여기저기 설명서 또는 동영상 메뉴얼을 봐도, 보면 볼수록 궁금증만 더하고 답답하기만 합니다.
어디서 부터 무엇을 어떻게 접근을 해야 할지 도통 모르겠지요?

예전 ZB4 방법은 잘 아는데, 그렇게 접근하려고 시도를 해보지만 여기저기 설명글을 읽어 보거나 질문 게시판에 질문을 던져봐도 속시원히 답이 안나오다 보니 머리를 쥐어뜯게되지요?

뭐 그런저런 궁금증을 조금 해소할 수 있는 정도의 글입니다.
XE 초보이신 분들이 한번 지나는 정도로 봐두셔도 손해나지 않을겁니다.

아무튼 XE 초보들은 좀 난감한 것들이 많은데..... 조금이라도 도움이 될지 모르겠습니다.

본 글을 퍼가거나 스크랩할 경우 반드시 출처를 명기해주시고 퍼가는 곳에 대한 댓글을 부탁 드립니다.
    - 쏘울 -  (DuRi)


꽤 오랜기간 제로보드 ZB4 버전을 기반으로하는 웹사이트를 운용해 오던중 최근 해킹의 피해가 심각해서 약 한달반에 걸쳐서 XE를 기반으로 전면 재개발 작업을 진행했다.

ZB4는 워낙에 오랜기간 업데이트가 이루어지지 않았고, 공식적으로도 더이상 업그레이드 지원이되지 않는 문제점을 안고 있었지만 기존에 익숙해진 툴을 버리고 새로운 툴에 적응하기 번거롭고 웹사이트 전체를 재개발 내지는 리뉴얼 한다는게 엄두가 나지 않아서 차일피일 미루다가 본의 아니게 해커의 방문(??)을 받고 말았다.

XE(XpressEngine)를 설치하고 이전의 ZB4와 같은 방법으로 구현할 생각이었지만 ZB4와 XE는 완전히 다른 툴이기에 XE의 새로운 여러 기능과 많은 새로운 용어들과 그에 따르는 전체적인 흐름이나 전반적인 기본 개념을 파악하고 적응하는데 약간의 어려움이 따른다.

간단히 말하여 XE란 놈에 대해 분위기 파악이 않되니, 웬만큼의 경험을 가지고 있는 웹개발자라도 처음엔 머리를 쥐어뜯어야만 한다.
어느정도 웹개발 경험이 있는 개발자라 하더라도 XE에 대한 사전 지식이 부족하고, 여기저기 흩어져 있는 설명 또는 메뉴얼, 질의 응답 내용 등등을 퍼즐 맞추듯 꿰어 맞추어 보아도 대부분 단편적인 것들이어서 일목요연하고 간결하게 썸머리되어 있는 접근 방법이 아쉽기만 하다.

아마도 이전의 ZB4를 이용한 개발컨셉의 방법론에 익숙해진 고정관념이 작용해서 이겠지만, XE를 기반으로 하는 웹사이트를 개발하는데 있어서 XE의 전반적인 요구 컨셉이 무엇인가를 이해하는데 까지 좀은 당황스럽고 적응하기 쉽지 않은 문제가 있다.

물론 XE가 요구하는 기본 컨셉을 충분히 이해를하고 보면 별것도 아니지만 처음 접하는 사람이라면 적이 당황스러운 상황을 맞이하게 된다.
XE의 가장 뚜렸한 변화라면, 사이트의 가장 기본이 되는 "레이아웃"이라는 개념과 구현 방법론이 필요하고, 관리자 페이지에서 제공하는 게시판을 비롯한 각종 기능들을 어떻게 상호 연결하고 상호작용하게 할것인가에 대한 개념 파악과 전체적인 XE의 처리 프로세스와 구조 파악이 쉽지 않다.


지금도 XE 공식개발 사이트인 http://www.xpressengine.com 질문게시판에 보면 XE의 기본개념 파악에 어려움을 격는 많은 사람들의 질문글이 계속 올라오고 있는 것을 볼수가 있다.
이에 본인이 작업을 하면서 느낀바를 토대로 아주 기본적인 개념파악을 위한 방법론을 설명하고자 한다.

1. XE의 보드(즉, 게시판)를 이용할 수 있는 웹사이트를 구성(개발)하기 위해서 알아야할 것들.
2. XE의 여러 기능들 중에서 작업의 우선순위에 따라 전체 틀을 어떻게 연결할 것인가?
3. XE 관리자 페이지에서 제공하는 각각의 기능들은 상호 어떻게 연결이 되고 작용을 하는가?
4. XE가 제공하는 일률적인 기본 레이아웃을 이용하지 아니하고 자신만의 디자인 컨셉에 맞게 ZB4에서 처럼 Header, Footer로 나누고 XE의 게시판을 이용하고 싶을때 어떻게 해야 하는가?

위와 같은 궁금증을 해결하는 몇가지에 대해 언급해보고자 한다.
본 글은 PHP를 이해하는자, 웹 디자인과 설계 경험자이면서 기본적으로 ZB4를 사용해본 경험자이되 XE를 처음 접하는 사람을 전제로 설명을한다.

XE를 기반으로 하는 웹사이트를 개발하기 위해서는 우선 가장먼저 준비해야 할 것이 "레이아웃"인데 이는 웹사이트의 기본 틀을 구성하는 전체적인 화면 설계라 하겠다.
사이트를 구성하는 가장 기본적인 레이아웃 구조는 아래 그림1과 같이 Header와 좌측 또는 우측 메뉴 그리고 본문내용과 Footer로 이루어진다.

그러나 XE에서의 레이아웃은 기존에 우리가 익숙해져있는 Table 태그를 이용하는 방법이기 보다는 XE가 요구하는 XE Template 문법과 div 태그 그리고 css라는 새로운 웹개발 추세에 맞추어야 하는 새로운 과제가 존재한다.
물론 이미 div 태그와 css를 사용하는 시스템 개발에 숙달이 되어 있는 개발자라면 큰 어려움이 없을것이다.

아래 기본 레이아웃은 premiumxe.com에서 제공하는 가장 씸플하면서 거의 완벽하게 XE Template 문법에 맞춘 기본 레이아웃을 빌려온 것인데, XE Template 문법과  div 태그 그리고 css에 어려움을 느끼는 사람이거나 XE에서 기본으로 제공하는 레이아웃에 의한 일률적인 모양의 사이트 디자인을 원치않을 경우, 스스로가 XE Template 문법에 맞춘 레이아웃을 만들어야 하는데 이것이 XE를 처음 접하는 개발자에게는 결코 쉬운일이 아니다.

어짜피 본인만의 독자적인 웹 디자인 컨셉으로 사이트를 구성할 것이라면
premiumxe.com에서 제공하는 아래와 같은 빈 레이아웃을 가져다가 자신만의 디자인을 입혀 보는 것이 좋을 것이다.

< 가장 기본적인 레이아웃에 XE 게시판을 연결한 상태의 모습 그림1 >

상기 그림에서 보이는 노란색 부분의 영역은 기본 레이아웃(헤더, 위젯 1이 위치하는 영역, 추가위젯 영역 1, 추가위젯 영역 2, 추가위젯 영역 3, 푸터 서브메뉴)을 제외하고 XE에서 컨텐츠라는 이름으로 정의하는 구역으로서 위에서처럼 "게시판"을 삽입하거나 "외부 페이지"를 삽입하거나, XE가 요구하는 "페이지"라는 컨텐츠를 삽입하는 공간영역이다.
다시말하면.... 게시판이 들어가거나 본문 내용 또는 최근 게시물이 들어가는 공간으로 이해를 하면 된다.

따라서, 기본 레이아웃(헤더, 위젯 1이 위치하는 영역, 추가위젯 영역 1, 추가위젯 영역 2, 추가위젯 영역 3, 푸터 서브메뉴) 영역에는 개발자가 생각하는 본인만의 웹디자인에 따라 소스를 각 위치에 맞게 집어 넣으면 된다.  이렇게 함으로 해서 XE가 제공하는 기본 레이아웃을 이용하는 것이 아니고 XE에 맞게 만들어진 별도의 빈 레이아웃에다가 본인만의 독자적인 웹 디자인 컨셉에 맞게 작업된 소스들을 집어넣어서 자신만의 특징적인 웹디자인 작업을 진행할 수가 있다.

< XE 관리자 페이지에서 제공하는 각종 기능들 그림2 >

자 이제 XE의 관리자 페이지에 나와 있는 각 기능에 대해 알아보고 그것들이 상호 어떻게 연결되고 상호 어떻게 연동 되는가를 알아보자.

상기 그림의 각 메뉴에 번호 순서는 XE를 기반으로 하는 웹사이트 개발에 있어서 작업 우선 순위에 따라 번호를 붙여봤다.
작업 우선 순위에 대한 규칙이 반드시 필요한 것은 아니지만 본인이 작업을 해본 결과 각 단계별로 전체적인 사이트 구성이 진행되는 순서에 따라 각기 상호 필요한 것들이 연결되고 연동이 되어야 하는데, 이에 가장 편리한 순서를 나열한 것이다.

즉, XE를 처음 접하는 개발자 입장에서 무조건 따라해보기를 해봄으로 해서 전체적인 개념을 이해하고 개발에 있어서 시행착오를 줄이는 방법이라 이해 하자.
1 --> 2 --> 3 --> 4 --> 5 --> 6 의 순서로 작업을 하다 보면 자연스럽게 전체적인 시스템 구성이 이루어진다.
1. 레이아웃 : 상기 그림1에서 언급했던 레이아웃(헤더, 위젯 1이 위치하는 영역, 추가위젯 영역 1, 추가위젯 영역 2, 추가위젯 영역 3, 푸터 서브메뉴)을 설정하는 부분으로, 본인이 XE Template 문법에 맞게 설계한 레이아웃을 사용하거나 위에서 안내한 premiumxe.com에서 제공하는 레이아웃을 가져다가 설정하면 된다.

1. 가져온 레이아웃 파일들을 XE의 /xe/layouts/ 경로에 집어넣는다. 여러개의 레이아웃을 필요로 하는 경우 원하는만큼 폴더명을 각각 다르게 해서 넣어준다. (경로는 각자에게 맞는 위치 확인)

2. 상기 관리자 페이지 레이아웃에서 생성 --> 레이아웃 이름 --> 제목 과정을 처리해준다.

3. 위와 같이 레이아웃 생성 과정이 완료되면, 별도의 웹 에디터가 아닌 관리자 페이지에서 레이아웃 편집이 가능하다.
그러나 관리자 페이지에서 레이아웃을 편집하는 것에 대한 단점이 있는데, 웹 에디터로 소스를 직접 보면서 작업하는 방법에 익숙해져 있는 개발자라면 관리자 페이지에서 제공하는 편집 기능이 매우 불편하고 또 이렇게 편집되어진 파일들은 XE의 files 폴더와 cache 폴더에 저장이되는데 혹여 실수로라도 초기화 버튼을 잘못 눌렀을땐 말그대로 초기 상태로 되돌아가는 아주 황당한 경우가 발생한다.
따라서 관리자 페이지에서 레이아웃을 편집하는 것은 가급적 권하지 않는다.

그렇다면 레이아웃 편집은 어떤 방법이 좋을까?
상기 1에서 만든 경로에 있는 layout.html과 default.css 파일을 직접 수정 편집하면 된다.
즉, 상기 그림1에 보이는 비어 있는 레이아웃 layout.html 파일에다가 본인이 원하는 디자인의 소스들을 각각의 위치(헤더, 위젯 1이 위치하는 영역, 추가위젯 영역 1, 추가위젯 영역 2, 추가위젯 영역 3, 푸터 서브메뉴)에 맞게 집어 넣어주면 된다.

일반적인 html 소스를 보면 대략 아래와 같은 형태인데, 상기의 XE 레이아웃 각각의 위치에 자신의 웹디자인 소스를 집어 넣을때는 아래 소스에서 보이는 상단과 아래쪽의 소스들은 다 버리고 붉은색 부분의 실제 내용들만 넣어야 한다.
XE에서는 가급적이면 table 태그 보다는 div 태그를 권하지만 table 태그를 사용해도 무방하다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>내용이 들어갈 위치</td>
  </tr>
</table>
</body>
</html>

2. 게시판 : ZB4에서와 같은 방법으로 웹사이트에서 사용할 게시판을 생성하고 스킨을 설정하고 게시판 생성이 완료되면 최종적으로는 상기 1. 레이아웃에서 설정한 레이아웃을 연결 시켜야 한다.

3. 페이지 : 그림1의 노란색 부분의 컨텐츠 영역에 들어갈 페이지를 생성한다. 즉, ZB4에서 처럼 최근 게시물을 출력하여 보여주는 부분으로서 각종 최근글(문서 및 이미지 그림, 또는 동영상 등등)을 출력해서 보여주는 부분이다.
이러한 최근글을 출력하여 보여주기 위해서는 상기 그림2의 5번에 있는 위젯이라는 기능을 이해하고 활용해야 한다. 또한 본인이 원하는 소스를 지접 입력할 수도 있다.
페이지를 설정했다면 마찬가지로 상기 1. 레이아웃에서 설정한 레이아웃을 연결해야 한다.

4. 외부 페이지 : XE 를 기반으로 개발하는 사이트의 경우 레이아웃을 포함하여 대부분의 소스를 XE라는 틀 구조안에 집어 넣어야 한다. 그러나 이러한 방법외에 외부페이지 설정을 통하여 이미 별도로 작성되어진 별도의 외부 소스 파일을 불러들여서 화면에 보여주기 위한 기능이다.
이 외부 페이지 또한 그림1의 노란색 부분의 컨텐츠 영역에 적용되는 것으로만 한정이 되어있다.
외부 페이지 설정이 완료되면 이것도 마찬가지로 상기 1. 레이아웃에서 설정한 레이아웃을 연결해야 한다.

5. 위젯 : 상기 3. 페이지에서 생성한 페이지라는 공간에 각종 최근글(문서 및 이미지 그림, 도는 동영상 등등)을 출력하기 위해서는 최근 게시물 스킨들이 필요한데, XE에서는 이것을 위젯이라 한다.
다양하고 예쁜 위젯(최근 게시물 스킨과 스타일)들을 구하기 위해서는 XE 공식 자료실에서 맘에 드는 것들을 찾아서 등록하면 될것이고 이렇게 등록어진 각종 위젯들을 관리하는 곳이다. 위젯은 필요하다면 본인이 직접 수정해서 사용하면 된다.

6. 애드온 : 애드온은 웹 사이트 이용자에게 뭔가를 보여주기 위한 기능이기 보다는 전체적으로 XE로 만들어진 사이트 시스템을 관리할때 편리한 추가 기능들을 일종에 플러그인 개념으로 동작하게 하는 별도의 프로그램들을 말하는데, 이 또한
XE 공식 자료실에서 맘에 드는 것들을 찾아서 설정하면 된다.(즉, 직접적으로 웹사이트를 설계하고 개발하는 부분과 관련이 있는 것이라기 보다 개발이 완료되어 사이트를 운영할때 필요한 편리한 추가 기능들이라고 보면된다.)

위 설명을 간략하게 다시 정리를 하자면, 기본적으로 사이트의 기본 골격이 되는 레이아웃을 가장 먼저 준비해야하고 이 레이아웃에다가 게시판, 페이지, 외부 페이지 등을 연결해야만 각각의 기능들을 동작시킬 수 있다.

요점정리 : XE에서 생성해야 하는 것들은.....!

1. 레이아웃 (사이트의 가장 기본 골격이 되는 것)
2. 게시판 (순수한 게시판 기능)
3. 페이지 (최근 게시물을 출력하여 보여주기 위한 페이지로서 위젯이라는 기능을 사용하여 최근 게시물을 출력해야 한다)
4. 외부 페이지 (XE라는 틀 구조안에 소스를 집어 넣지 않고도 기존의 외부 파일을 가져다가 하나의 웹페이지로서 보여줄수 있는 기능 - 외부 파일을 include 시키는 개념과 비슷하다고 생각하면된다)

위에 생성한 것들 중에서 1,2,3번 까지는 무조건 XE틀 구조안에서 생성하고 모든 소스는 XE틀 구조안에 들어가야 하는데, 4번의 외부 페이지는 XE틀 구조안에 소스를 집어 넣지 않고 별도의 파일로 존재하지만 XE에서 위 1번의 레이아웃이라는 틀과 연결(결합)하여 하나의 웹 페이지로 보여줄수 있다.

또한 위 1번의 레이아웃은 독자적인 링크를 가지고 있지 아니하지만, 1 + 2, 1 + 3, 1 + 4와 같이 뭔가와 연결(결합)이 되어야만 비로소 하나의 링크된 웹페이지로서 동작이되는 구조이다.

부연하면 위 2,3,4번의 것들은 본 글 맨위에 있는 그림1
XE에서 컨텐츠라는 이름으로 정의하는 구역인 노란색 부분에 들어가는 것들이다.


▩ 레이아웃을 연결(결합)하는 방법


1번 레이아웃에다가 2번 게시판을 연결(결합)하는 예를 설명한다. 즉, 상기 1 + 2의 경우이며 나머지 1 + 3, 1 + 4도 같은 방법으로 수행하면된다. (아래 그림3 참조)

첫째. 스스로 만든 레이아웃을 적용하는 경우 또는 상기에 소개한 premiumxe.com에서 제공하는 레이아웃을 가져온 경우이든 /xe/layouts/ 경로에 폴더를 만들고 레이아웃 파일을 복사한다.

둘째. 관리자 페이지 레이아웃(A)에서 생성 --> 레이아웃 이름 --> 제목 과정을 처리해준다.

셋째. 관리자 페이지 게시판(B)에서 새로운 게시판을 생성할때 게시판 이름(모듈 이름)(C)을 적어주고 위 두번째에서 생성한 레이아웃(D) 선택 및 기타 설정을 완료하고 저장한다.(게시판에 레이아웃을 연결)

그런 다음 게시판 보기(View)를 클릭하면 비로소 레이아웃이 결합된 게시판을 볼수가 있다.
< 관리자 페이지에서 게시판에 레이아웃을 연결하는 화면 그림3 >

이것을 계속 강조하는 이유는 XE를 처음 접하는 개발자들이 XE에 대한 개념 파악을 할때 각각의 기능들이 어떻게 연결되고 어떻게 연동이 되는가에 대한 구조적인 문제를 파악하는데 어려움을 느끼는 문제가 있기 때문이다.

따라서 XE를 기반으로 하는 사이트를 개발시 위에 나열한 순서에 의해 작업을 진행 한다면 혼란이 없을 것이며 시행착오를 격지 않아도 된다.

추가로 상기 그림2에 보이는 "사이트 설정" 아래에 "메뉴" 기능은 XE가 제공하는 기본 레이아웃을 그대로 사용하지 않고 자신만의 별도 디자인을 사용할 것이라면 굳이 메뉴 기능은 사용하지 않아도 된다.
그리고 사이트 통합검색 기능과 다국어 언어설정, 또는 방문자 카운터 기능 등은 위젯을 이용하여 소스를 출력하고 이것을 원하는 페이지 위치에 붙여넣거나 하면 된다.

그외에 기본적으로 XE를 이용하기 위해서는 관리자 페이지에서 제공하는 각각의 메뉴들을 유효적절히 활용할 수 있는 테크닉이 필요한데 이것은 각자가 숙달을해야할 몫들이다.

XE는 ZB4에서 처럼 Header, Footer를 따로 나누고 하는 방법이 아니고, XE가 요구하는 레이아웃이라는 폼안에서 해결을해야 한다.

개발결과 참조 사이트 : http://www.scanmac.com


알아두어야할 주의사항

  1. XE 설치 버전에 관한 문제  
XE를 처음 접하고 설치하는 사람은 XE 버전 1.2.4 Full 버전을 먼저 설치할것을 권한다.

XE(XpressEngine)는 계속 업그레이드 되고 있는데, 최근에는 Full 패케이지가 아닌 Core 버전으로 배포가 되기 때문에 처음에 접하는 초보자들이 Core 버전을 설치 했을시 추가로 게시판과 모듈, 위젯, 위젯 스타일, 등등 추가 적인 것들을 일일이 찾아다가 설치하는 작업이 쉽지 않기 때문이다.

따라서 일차적으로 XE 버전 1.2.4 Full 버전을 설치하고 난 다음 신버전의 Core 패케이지로 업그레이드 할것을 권한다.
XE 각 버전 다운받기

  2. XE 설치 폴더에 관한 문제  
XE 프로그램을 다운 받으면 압축파일 안에 xe라는 폴더 이름으로 들어 있는데, 이것을 설치시 반드시 xe라는 폴더 이름을 만들고 설치해야 하는것은 아니다.
필요에 따라서는 xe라는 이름을 빼고 프로그램 전체를 웹서버 Root에 막바로 업로드하고 설치를 해도 무방하다.
그러나 xe 프로그램 전체를 별도의 폴더 없이 Root에 막바로 올려서 설치했을때는 아래 그림에서 보듯이 관리자 페이지에서 지정한 기본 URL 경로의 페이지가 초기 화면이 된다.

아주 심플한 개인 용도의 홈페이지를 구성시는 초기 화면을 하나로 고정해 놓고 사용해도 무방하기에 별문제 없지만, 사업 용도 또는 기업 용도의 사이트에서는 필요에 따라 초기 메인 화면의 경로를 수시로 변경할 여지가 많으므로 가급적이면 XE 프로그램이 들어갈 별도의 폴더를 만들고 업로드하여 설치 하는 것을 권한다.

별도의 폴더를 만들때 반드시 xe라는 이름이어야만 하는 것은 아니므로 각자가 원하는 이름으로 폴더를 만들면 된다.  가급적이면 기본적인 xe라는 이름 보다는 다른 이름으로 만들 것을 권한다.  왜냐하면 혹시 있을지 모르는 봇에 의한 스팸글이 등록된다 던지 하는 것을 줄이기 위해서 인데, 이를 간과한 대부분의 웹 개발자들은 xe라는 이름을 많이 사용할 것이기 때문에 봇을 만드는 나쁜류에 사람들은 xe라는 폴더 이름을 찾게 만들 가능성이 많기 때문이다.

XE를 별도의 폴더에 넣고 운영시, 일반 사용자들이 도메인 이름으로 사이트에 접속하면 시스템은 웹서버의 Root에 있는 index.html 또는 index.php 파일을 참조하여 지정한 페이지를 초기 화면으로 열게 될것이므로, 사이트 운영자는 index.html 또는 index.php 파일에서 초기 메인화면 페이지의 경로를 원하는 대로 수시로 바꿀 수 있는 장점이 생긴다.

그리고 많은 개발자 또는 운영자들이 원하는 주소고정 즉, 사이트내에서 어떤 링크를 열더라도 브라우저 주소 표시줄에는 도메인 이름으로만 표시되게 하거나, 브라우저 하단에 링크표시가 나타나지 않게 하거나 하는 스크립트를 사용하는 경우가 있는데 이때에도 Root에 있는 index.html 또는 index.php 파일에서 간단하게 처리할 수 있다.

이에 대한 자세한 것은 다음 글을 참고.
웹사이트 접속시 브라우저 주소줄에 나타나는 주소를 Domain Name으로 고정하는 방법

내 경우는 개인적인 필요에 의해 이러한 방법을 통해 사이트 구성시 7개의 메인 메뉴 페이지를 두어서 동일한 도메인 네임으로 접속을 하더라도 메인 메뉴 페이지가 random하게 바뀌면서 매번 다른 초기화면이 뜨게하면서 주소고정 스크립트도 사용하고 있다.

그러나 XE를 별도의 폴더가 아닌 Root에 막바로 올려서 설치를 한다면 관리자 페이지에서 지정한 URL의 메인 페이지 하나로만 지정되기 때문에 초기화면 변경이나 주소고정 스크립트를 사용하기 불편할 수도 있다.


  3. rewrite mod 사용여부에 관한 문제  
XE를 설치하는 과정중에 상기 그림에보는 것과 같이 "rewrite mod 사용" 여부를 체크하도록 되어 있는데 (관리자 페이지에서도 설정 변경가능)이것을 사용하도록 체크하면 사이트 전체에 올라가는 모든 글의 링크주소 길이를 줄여서 단순화 시킬수 있는 장점이 있는데, 이는 그냥 사용가능한게 아니고 웹호스팅 서버의 Apache 설정에서 지원이 되느냐에 따라 사용 가능여부가 판가름나기 때문에 반드시 사전에 웹호스팅사에 문의를 해본다음 결정을해야 한다.

대부분의 국내 웹호스팅사들은 이를 기본적으로 지원하지만 외국의 호스팅사들은 서버단 트래픽 또는 서버의 퍼포먼스 문제로 지원을 하지 않는 경우가 있다.
아래에서 소개하는 웹사이트 개발작업에 필요한 로컬서버용 APM 툴들은 기본적으로 이것을 지원하도록 설정이 되어 있는데, APM 로컬 서버에서 개발을 완료하고 웹호스팅 서버에 업로드했을시 정작 rewrite mod가 지원되지 않는다면 사이트의 모든 연결 링크들을 전부 재작업해주어야 하는 어려움을 격게 되기 때문이다.

결론은 웹호스팅 서버에서 rewrite mod가 지원되지 않는다면 모든 링크에 "?mid=" 이 추가되어야 하기때문이다.



참고하면 좋은 XE를 기반으로 하는 사이트 개발관련 강좌 페이지들

1. XE 초보자를 위한 동영상 강좌 페이지
2. XE Template 문법 소개 페이지
3. XE 스킨제작 방법 소개 페이지
4. XE 메뉴얼 페이지
5. XE 메뉴얼 Wiki 페이지
6. 사이트 제작 및 활용 가이드 페이지
7. 레이아웃 및 사이트 제작 관련 동영상 강좌 페이지  (ZB4때 부터 동영상 강좌를 진행하고 있는 개인 사이트)
8. ZB4 DB를 XE로 마이그레이션 하기 안내 페이지  (XE 사이트에 잘 알려진 백성찬님 개인 사이트)

지금까지 공개된 마이그레이션 툴은 중국어로 운영되는 사이트의 DB를 마이그레이션시 잘 되지 않는 문제가 있는데, 이를 위해 특별히 zero님이 내게 지원해준 별도의 툴을 첨부하니 필요한 사람들은 이용해 보시라.(기존의 문자셋 euc-kr, utf-8 이외에 중국어인 gb2312를 지원하도록 만들어진 툴이다, 사용법은 위 8번 페이지에서 소개하는 방법과 동일)



9. 본 글에 소개한 기본 레이아웃 제공 페이지  (premiumxe.com)
10. 사이트 개발작업에 필요한 로컬서버 운영을위한 APM(Apache, PHP, MySQL) 서버툴 제공 국내사이트 (1)
최근 상기 사이트에서 제공하는 APMSetup이 7로 업그레이드 되었는데, 테스트 해본 결과 XE에서 약간의 문제점이 발견된다.  관리자 페이지에서 레이아웃 설정 또는 게시판 설정등을 할때 저장이 잘 안되면서 "압축 모드"를 사용하기 때문에 문제가 있다는 메세지가 뜬다. 이것이 내 컴퓨터에서만의 문제일지 모르지만....가능하면 APMSETUP6_2009071000.exe를 사용할 것을 권한다.
APMSETUP7_2009103000.exe(신 버전이라고 다 좋은것은 아닌 모양이다.)

11. 사이트 개발작업에 필요한 로컬서버 운영을위한 APM(Apache, PHP, MySQL) 서버툴 제공 외국사이트 (2)

본 글에 소개한 레이아웃 소스 파일은 저작권자인 premiumxe.com 운영자께서 해외 웹하드에 올려 놓고 공개를 하셨었는데 아마도 시간이 오래 지나다 보니 자동 삭제된 듯 합니다.
그 래서 본 글을 읽는 많은 User들이 받을 방법이 없는지 하는 댓글이 달리기 시작하면서 원 저작권자의 허락 없이 제가 공개적으로 배포하는 것은 문제가 될 듯 싶어 한동안 개인 메일로 전달을 해드렸는데....요청하는 분들이 많아지고 또 제가 매일 이곳을 들여다 볼 시간이 부족하므로 부득이 이곳에 파일을 올려 놓겠습니다.

단, 원 저작권자께서 문제 제기하시면 즉시 삭제 하겠습니다.



[추가] ZB4로 현재까지 사이트를 운영하는분들 긴급 상황안내 (???)


8년 가까이 ZB4로 사이트를 몇개 운영해오고 있었는데, 약 2개월전에 그중 하나의 사이트를 해킹 당했습니다.


지금까지 배포된 ZB4 보안패치는 하나도 안빼고 전부 적용했었지요.

그런데도 자꾸만 뚫리더군요.

방법을 찾다가 XE로 마이그레이션하고 완전히 재개발하여 우선 해킹당한 사이트를 복구했습니다.(본글에 소개된 사이트)


그런데, 며칠전 또 다른 사이트 하나가 해커에게 완전 장악을 당해서, 다시금 XE로 마이그레이션 준비중입니다.


사이트 운영이 국내가 아닌 타국에서 현지어로 서비스되고 있는데, 이 문제로 2번이나 해당 국가 사이버테러방지 담당 부문에서 경고를 먹었습니다.

사이트 자체가 장악당한 문제의 손실도 있지만 해당 사이트를 숙주로 만들어 다른 사이트까지 영향을 끼치게 하다보니.....

다시 이런문제가 발생시 영구폐쇄시킬테니 잘하라라는 경고 입니다. ㅠ.ㅠ


아마도 해커들에게 ZB4의 보안결함 문제가 광범위하게 퍼져 있는듯, 물론 상기에 말한 2개의 사이트에 모든 ID와 비번은 서로 상이하게 운영되고 있던 것인데......!

아무튼 아직까지 ZB4로 사이트를 운영하는 분들은 조기에 XE로 갈아타든 또다른 방법으로 리뉴얼을 하든 긴급조치하시기 바랍니다.


P.S : 해킹의 증상

사이트에 접속시 로그인을 안해도 리다이렉션 되어 이상한 금융결제 사이트로 자동으로 넘어갑니다.

해킹된 폴더에는 "Paypal" (금융결제 사이트 잘알지요?) 이라는 폴더를 만들고 무수히 많은 소스 파일들을 올려 놓았더군요.

그외에도 이상한 바이러스 파일도 들어가 있고..... 난리도 아닙니다.


소스와 폴더에 uk라는 단어가 있는 것으로 보아 정확하지는 않지만 영국쪽 해커가 아닐까 추정하고 있습니다.(Log 파일을 분석중)

2009년 11월 21일 긴급 추가한 글




신고
Posted by NiCo of ScanMAC

댓글을 달아 주세요

  1. Favicon of http://yeeryu.com BlogIcon 여인 2009.10.28 14:11 신고  댓글주소  수정/삭제  댓글쓰기

    언젠가는 감을 잡아야 하는데...

  2. 연필 2009.11.13 13:38 신고  댓글주소  수정/삭제  댓글쓰기

    와~ 덕분에 기본 개념은 잡혔네요. ^^
    제로보드가 더이상 업그레이드가 안된다고해서 보안 문제 때문에
    XE로 이전을 할까...하다가도 XE만 보면 넘 복잡해보여서 엄두가 안나더라고요.ㅠㅠ
    홈페이지 자료들도 좀 광대하고...언젠가는 옮기긴 해야겠는데..
    제로보드 개발이 멈춰진게 넘 아쉬워요.ㅠㅠ

    • Favicon of http://scanmac.textcube.com BlogIcon 쏘울 2009.11.13 14:07 신고  댓글주소  수정/삭제

      ZB4가 더이상 업그레이드 지원이되지 않으면서 보안 문제가 심각합니다.
      언젠가 옮겨야할 일이니 가급적 빨리 옮기시는게 좋을듯 합니다.
      기본 개념을 잡는데 도움이 되셨다니 반갑습니다.

  3. 루진 2009.11.17 13:10 신고  댓글주소  수정/삭제  댓글쓰기

    많은 도움이 되었습니다; 그런데

    한가지 질문이있습니다.

    위젯 1부분을 Height속성을 100%를 주고싶은데

    아무리줘도 100%가 되지않습니다. 어찌 해결해야할까요?..

  4. 루저.. 2009.11.20 11:05 신고  댓글주소  수정/삭제  댓글쓰기

    .. 읽어도 모르겟어요..
    제로보드4도 안써봤는데..
    ㅠㅠ
    너무 어려워요.....
    으앙~

  5. mooeng? 2009.11.21 17:22 신고  댓글주소  수정/삭제  댓글쓰기

    개념 잡기 정말 좋은글 감사합니다.^^
    잘 읽고 갑니다.

  6. 차동박 2009.11.29 23:24 신고  댓글주소  수정/삭제  댓글쓰기

    말씀 그대로 ZB 는 사용을 하고 있으나, XE는 처음인 초보입니다.
    XE를 배워보고 해야하는 것이 순서인데, 그저 꿰어맞출려고만 생각해서는 안되겠구나 라는 깨달음이 생깁니다.
    맨땅에 헤딩하는 것이 잘 하는 짓이 아닌 줄 알면서도 어리석은 짓를 또 한번 저지를 뻔 했습니다,
    찬찬히 한번 잘 배워보고 그런 다음에 적용하도록 순서를 정하겠습니다.
    좋은 글이 큰 도움이 되었습니다
    감사합니다.

    • Favicon of http://scanmac.textcube.com BlogIcon 쏘울 2009.12.13 13:54 신고  댓글주소  수정/삭제

      ZB4를 사용해본 경험자들은 이전 방법을 알고 있는 탓에 XE도 그방법으로 접근 하려는 시도가 있을수 밖에 없습니다. 물론 저도 처음엔 그렇게 시도를 했었고요.

      그러다보니 본의 아닌 삽질을 좀 했던 경험때문에 이글을 올려 놓은거랍니다.

      도움이 되셨다니 반갑습니다.

  7. 장가방 2009.12.13 10:26 신고  댓글주소  수정/삭제  댓글쓰기

    정독은 아직 하지 않았지만 해결의 실마리를 찾은 것 같아서
    먼저, 미리 고마움을 전하고 싶어 글을 올립니다.

    제로보드4에서 xe로 바꾸어야겠다고 생각하고 기본 준비를 한지가 1개월이 되어 갑니다.
    홈페이지 제작을 위한 프로그램에 대해서는 절대무지한 자이였지만
    제로보드4 사용시는 한 일주일 삽질하였더니, index, head, foot, 외부로그인, 최근게시물
    제로카운터 등 원하는 것들이 홈패이지를 사용하는데 지장이 없을 정도로 완성이 되었지만
    이 xe는 삽질한지가 한 달이나 되었지만 통~ 개념정리가 안되었습니다.

    오늘 포기할까 하고 마지막으로 xe에 접속하였던 중에 우연히 이 게시물을 보게 되었습니다.
    아직 정독은 하지 않았지만 머릿속에서 번쩍 하는 서광을 본듯 합니다.

    업디려 108배라도 하고 싶은 감동의 물결이 밀려 옵니다.

    xe가 아무리 앞서가는 훌륭한 보석이라 할지라도
    어여쁜 백성들의 심정을 헤아려 그 눈 높이를 맞추어 주지 못한다면
    저에게서 처럼 길거리에 나뒹굴수 밖에 없을 한 쓰레기에 불과할 뿐입니다.

    한낱 쓰레기가 될뻔 하였던 보석을
    다시 한번 인지할 수 있는 기회를 주신 님께 진심으로
    고마움을 전합니다.

  8. 카이로 2010.02.12 14:56 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 이제야 감이 잡힙니다.

  9. 하이델베어거 2010.02.20 01:56 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 쏘울님,

    저도 ZB4만 사용하던 유저였다가 이젠 XE로 바꿔야하는데 계속 ZB4방식으로 XE를 사용해

    왔었습니다. 그런데 제 기능을 사용하지 않고 그렇게만 쓰다보니 원하는 홈페이지로 만들기

    어렵더군요.

    그래서 이젠 레이아웃을 제대로 사용해 보기로 마음먹고 쏘울님의 글을 보니 더욱 해보고

    싶은 마음도 듭니다.

    허나, 한가지 제가 이 글을 보면서도, 또 다른 곳을 찾아보면서도 궁금한점은

    모든 레이아웃이 비슷한 디자인으로만 만들어지는것 같은데,

    제가 만든 디자인은 기본 레이아웃과 굉장히 달라서 적용하기 좀 어렵더라구요.

    이런 문제를 해결할 수 있는 정보를 제가 이곳에서 얻을 수 있을까요?

    제 질문을 요약하자면, XE레이아웃 편집으로 어떤 모양이던 원하는 디자인으로

    바꿀 수가 있을까요? 할 수 있다면 그 설명이 좀 자세히 나온글이나 정보가 어디있을까요?

    입니다. 글 감사드립니다.

    • Favicon of http://scanmac.textcube.com BlogIcon 쏘울 2010.02.20 12:06 신고  댓글주소  수정/삭제

      하이델베어거님 안녕하세요.

      제가 본 글에서 강조하고 싶었던 것이 바로 님처럼, 모양이 비슷 비슷한 기본 레이아웃이 싫어서 독자적인 디자인을 XE가 요구하는 포멧에 맞추어 사용할 수 있게 설명하는 것이었는데 아마도 제 설명이 부족했던 모양이군요.

      XE를 사용하는(XE를 가지고 사이트를 설계하고 디자인하는...) 방법은 각자 나름대로 여러 편법이 있을 수 있지만,
      처음부터 사이트를 디자인 할 때 최소한 XE가 요구하는 본래의 제대로된 방법으로 설계를 해야 나중에라도 문제가 발생하지 않고 또 이후에 리뉴얼을 한다던지 하는 유지보수 측면에서도 정석대로 사용해야 한다고 생각을 합니다.

      위에 본 글에서 언급한 개발결과 참조 사이트 : http://www.scanmac.com 도 그냥 보기에는 XE 기본 레이아웃 처럼 특별해 보이지 않는 디자인 처럼 보이지만, 실은 XE의 레이아웃 포멧(양식)만 준수하고 있으며, 모든것은 독자적인 디자인 구조입니다.

      자 이제 질문하신 요점의 방법은......

      위 본글에서도 언급 했지만 XE를 사용하기 위해서는 XE가 요구하는 XE Template 문법과 div 태그 그리고 css라는 새로운 웹개발 추세에 맞추어진 레이아웃이 중요합니다.
      그런데 XE를 처음 접하는 입장에서는 XE Template 문법에 맞는 레이아웃 구조를 만든다는게 쉽지 않기 때문에
      이미 XE Template 문법에 맞추어 잘 만들어진 빈껍데기만 있는 XE 레이아웃(본문 그림1과 같은)을 http://www.premiumxe.com/blog/textyle/17083 에서 가져다가 파일을 편집 하는 겁니다.
      가져온 파일중에 layout.html 을 열고 위에서 설명한 대로 각각의 위치에(헤더, 위젯 1이 위치하는 영역, 추가위젯 영역 1, 추가위젯 영역 2, 추가위젯 영역 3, 푸터 서브메뉴) 자신이 만든 별도의 디자인 소스를 집어넣으면 됩니다.
      단, layout.html 파일 내부에 이미 정해져 있는 프로그램 구조를 임의로 변경하거나 삭제 하거나 하면 이상한 화면이 출력될 수 있으므로 작업을 하면서 하나하나 실제 화면 출력을 보면서 작업을 하시기 바랍니다.
      그리고 필요에 따라서는 포함되어 있는 default.css 파일을 추가로 수정하면 됩니다.

      이와 같은 방법으로 하면 XE를 정석대로 사용하면서 자신만의 독특한 그 어떤 디자인이라도 적용이 가능합니다.
      본문의 글에서 말하고자 하는 주제는 XE를 정석대로 사용하면서 자신만의 독자적인 디자인을 XE가 요구하는 포멧에 맞추어 쉽게 대입시키는 방법을 말하고자 한것입니다.

      이해가 안된다면 또 질문 하시기 바랍니다.

  10. 하이델베어거 2010.02.20 18:45 신고  댓글주소  수정/삭제  댓글쓰기

    다시한번 자세한 설명에 감사드립니다.

    제가 이해한 쏘울님의 말씀은 자기만의 디자인을 레이아웃에 맞출수는 있되,

    너무 변형된 디자인을 가지고 레이아웃에 끼워 맞춰려다간 나중에 유지보수나 업그레이드때

    어려울 수 있다는 말씀이시죠? 제가 제대로 이해 했나요?

    그래서 자기만의 디자인을 하되 기본 XE 레이아웃의 형식, 즉 왼쪽과 윗쪽에 메뉴,

    밑에부분에 위젯 이렇게 위치설정을 거의 바꾸지 않은채 그 안에서 디자인을 자유롭게 해라.

    이게 제일 좋다는 말씀이신거죠?

    아무래도 제가 디자인한 페이지를 보여드려야 이게 가능하다 못하다를 말씀해 주시기가

    편하실것 같습니다. 제가 파일을 보내드리면 어디로 보내드려야 할까요?

    • Favicon of http://scanmac.textcube.com BlogIcon 쏘울 2010.02.20 20:23 신고  댓글주소  수정/삭제

      제 설명을 아직 정확하게 이해하지 못하고 계시는군요.
      제 설명 능력이 부족한가 봅니다. ㅋㅋㅋ

      연락처를 알려주시면, 제가 받을 수 있는 메일 주소를 알려드리겠습니다.
      비밀글로 댓글을 남겨주세요.

  11. 2010.02.22 19:51  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  12. 때곰 2010.03.09 17:58 신고  댓글주소  수정/삭제  댓글쓰기

    몇년만에 홈페이지 제작을 해보려고 했는데 너무 많이 바뀌어서 헤매고 있었습니다^^;;
    빛과 소금같은 글입니다. 감사합니다.