검색

How to make XE layout?

August 05 in category XpressEngine by WTA   Edit

05 Aug 39
headline.jpg



항상 생각해도 글의 첫 서두를 쓰는건 정말 힘들군요. 제목 그대로 XE의 레이아웃 스킨을 만드는 작업에 관한 이야기를 적으려고 합니다. 이 글의 첫 시작이 좋지 않을 수 있습니다. 제가 글 읽는 분들이 XE나 XHTML 혹은 CSS등의 마크업을 어느정도까지 숙지하고 있는지 배려하지 않을 것이기 때문입니다. 누구나 만들 수 있는 쉬운 XE 레이아웃! 나도 시작해보자! 이런식으로 글을 쓰는 것은 저나 제 글을 읽는 모든 분들께 스트레스만 줄 뿐입니다. 어느정도 글을 읽어 내려가시다가, 아 이 정도면 끝까지 읽어나가도 이해할 수 있겠다 싶으면 이제부터 시작입니다. 그리고 이제부터 반말 입니다. (Premiumxe.com에서 라이센스 구입하신 분들은 무조건 필독하세요!^^; 그래야 레이아웃 활용하시는데 도움이 됩니다. 사실은 질문 좀 덜 받으려고....)






headline_02.jpg


XE 말고도 Wordpress나 그누보드 같은 쟁쟁한 CMS들이 많다. 그리고 이것들은 기존에 제로보드 4 버전을 사용해서 복잡한 PHP 문구를 많이 봐왔던 사람들이라면 그리 어렵지 않게 다룰수도 있다. 물론 파워유저에 한해서다. XE보다 웹 스탠다드 CMS 대열에 먼저 뛰어든 이 프레임워크를 놔두고 굳이 XE를 선택한 사람은 분명 제로보드4의 향수를 가지고 있기 때문이라 하겠다. 옛날에도 한수 보여줬으니 이번에도 한수 보여주겠지라는 생각으로 파보기 시작은 했는데 막상 뚜껑을 열어보니 만만치가 않다. 과연 내가 이 새로움이 주는 장벽을 뛰어넘고 멋진 스킨을 만들어 낼수 있을까? 시간도 엄청 걸릴 것 같은데? 답은 Yes도 아니고 No도 아니다. 제로님을 비롯한 XE 개발 관계자들조차 이 물음을 가지고 있을텐데 우리가 어떻게 답을 알꼬. 단지 객관적인 몇가지 것들을 토대로 나름의 결정을 하고 결국 내 시간을 투자하는 것.

그럼 객관적으로 생각해 볼때 XE가 다른 CMS보다 분명 좋은 점은 있는 것인가? 이건 확실히 대답할 수 있다. 있다.
  • 트랜드 지향적이면서도 다른 CMS에는 없는 새로운 것들을 넣으려고 노력한다.
  • 복잡한 PHP 코드를 볼일이 많이 줄었다. 결정적일때는 봐야하지만 그래도 숨어있는게 고맙다.

으음? 덜렁 2개 뿐인가? 그렇다. 내가 생각하는 좋은 점은 이 두가지가 전부이고 잠재 인프라나 발전 가능성등은 내가 예측하거나 이야기 할 필요가 없는 부분들이다. 그런것들은 실제로 보여져야 진실이지 그 전에는 허구일 뿐이다. 위에 두가지 외에는 다른 CMS도 갖출 것은 다 갖추고 있다. 처음에 거론한 트랜드 지향적이면서도 다른 CMS에 없는 새로운 것들을 넣는다.. 솔직히 이거 하나면 충분하지 않은가. 다른 CMS에 없는게 있다는데 더 말할 필요가 없지 않나.

별에 별 CMS는 다 만져봤지만, XE는 전 세계를 통털어 현존 CMS 중에서 가장 강력한 도구다.






headline_01.jpg


이 기사는 메뉴얼이 아니다. 자세하게 설명하는 부분은 한곳도 없으니 간략히 짚고 넘어가겠다. 스킨을 제작하기 위해서는 비단 XE 뿐만이 아니라 모든 CMS들이 요구하는 기본적 작업환경이 있다.

  • 오토셋 올가 (로컬 컴퓨터에 웹서버를 구성해서 인터넷에 접속하지 않고도 테스트 할 수 있는 환경을 위한 솔루션). 설치하면 Apach 웹서버와 MySQL이 설치되므로 여기에 XE를 설치하면 된다.
  • 크로스 브라우징 테스트를 위한 웹브라우저 다운로드. 사람 잡는 작업에 온것을 환영합니다. 기본 브라우저를 IE7로 설정하고나서 FireFox, Opera, Safari를 다운로드 받는다. 구글에게는 미안하지만 크롬까지 받아서 테스트할만한 여력이 없다. 나오는 브라우저마다 족족 다 테스트하면 테스트만 하다가 볼일 다본다.
  • IE7이 기본 브라우저이기 때문에 IE6는 별도의 방식으로 설치해야 한다. MultipleIE를 다운로드 받아 IE6를 추가로 설치한다.
  • EditPlus나 Dreamweaver의 코드편집기를 사용한다. 메모장이나 워드패드로 코드 고치려고 했다가는 진짜 큰 코 다친다.
  • XE를 설치하고 작업 할 환경을 마무리한다.





headline_03.jpg


실질적으로 레이아웃을 만들어보기전에 우리가 만든 스킨이 여러 브라우저에서 얼마나 다양하게 깨지는지 알아야 한다. 정말 슬픈 일이지만 내 컴퓨터에서 잘 보인다고 다른 사람의 컴퓨터에서 다 잘 보이는게 아니다. 게다가 XE와 같이 코드가 많은 CMS를 사용하면 점점 복잡해지는 구조들 때문에 디자인은 점점 더 나락으로 빠져든다. 그래서 이 크로스 브라우저 테스팅을 무시하고 작업하는 사람들이 있다. 그렇게 되면 말그대로 싼마이가 되는것이다. 완벽하진 못하더라도 노력하면 그 결과는 보장할 수 있다. 앞으로 우리는 적어도 5개 이상의 브라우저에서 스킨을 테스트하게 된다.

각 브라우저들은 서로 닮은 꼴이면서 지멋대로다. 브라우저들이 대충 서로 어떤 관계를 맺고 친한 친구는 누구인지 알아봐야한다. 아래의 그림은 어떤 책에서도 거론하지 않은 순전히 내가 겪어보고 그린 그림이기 때문에 절대 객관적이지 않다. 이것은 경험으로 얻은 정보를 토대로 그린 것이지 객관적 사실은 결코 아니라는 점을 알고 보길 바란다.

ex01.jpg


각설하고, 그림과 같이 모든 웹 브라우저들은 크게 Mozilla라고 하는 초기 웹브라우저의 원형(프로토타입) 브라우저의 자손들로 생각하면 된다. 가장 원류를 잘 따르고 있는 FireFox와 Netscape Navigator를 필두로해서 다른 여러 브라우저들이 개발된다고 생각하면 된다. 따라서 FireFox하에서 스킨 작업을 하게되면 대부분의 웹브라우저에서도 최소한의 기능상 혹은 외형상의 안정성을 확보 할 수 있다. 따라서 처음 스킨을을 코드화 시키고 화면에서 테스트하는 작업은 FireFox에서 한다.

Opera, IE7, Safari는 FireFox만은 못하지만 나름대로 Mozilla 구조를 잘 따르고 있기 때문에 서로 비슷한 화면 랜더링과 퍼포먼스를 보여준다. 다만 이 3가지 브라우저의 특징은 곧잘 이용자들의 편의를 위해 심어놓은 브라우저의 개성(?) 때문에 발생한다. 예를들어 IE7은 안전서체에 대해 안티알리아싱을 적용하여 Clean Type이라고 하는 말끔한 서체 표시기능을 사용하는데, 이 기능 때문에 PNG 투명 이미지가 제대로 표현되지 못하고 심각한 테두리 버그가 발생하기도 한다. 따라서 이들은 FireFox의 하위단에 포함시켜 작업을 하고있다.

FireFox에서 문제가 없다면 이 3개의 브라우저에서도 거의 문제가 없다. 그래서 같은 2차 선상에 묶어놓았다. 특히나 IE7을 제외한 Opera나 Safari의 경우는 FireFox만 테스트에 통과하면 거의 자동통과라 할 수 있다. 결과적으로 우리는 처음부터 끝까지 FireFox를 켜놓고 테스트를 하기 때문에 Opera와 Safari는 스킨이 모두 완료되는 시점까지 거의 킬 일이 없다. 이 브라우저들을 킬 상황은 jQuery나 Prototype등의 일부 기능향상을 위한 자바스크립트 프레임워크를 심을 때 뿐이다.

IE7 역시 FireFox와 크게 차이나는 오작동이나 뒤틀림을 보이지는 않는다. 다만 잘 알려진 몇몇 메이저 버그들이 있는데 이것들은 모두 회유방법들이 많이 나와있기 때문에 그때그때 상황에 맞게 대처하기가 어렵지 않다. 문제는 IE6다. IE6의 경우는 IE7의 조상이기 때문에 IE7이 가지는 문제점을 거의 모두 가지고 있으면서 자신만의 고유한 문제점까지 가지고 있다. 그래서 많은 사람들이 IE6에서 유독 문제를 많이 만나게 된다.

IE8의 경우는 아직 검증이 채 안된 복병과 같은 문제들이 나타나고 있다. 화면 랜더링이나 CPU 퍼포먼스는 월등히 좋아진 반면 기본 마크업 해석쪽에서는 자질구레한 오류들을 그대로 안고 있는 것으로 보여진다. 그래서 위 맵에서도 일단 중간단계 그룹에 속해있긴하지만(대체적으로 Mozilla 계열 브라우저의 표준 퍼포먼스를 보이고 있다는 뜻) 반대로 IE7, IE6가 가지고 있지 않은 IE8만의 개성넘치는 버그도 가지고 있기 때문에 혼자 멀찌감치 떨어트려 놓았다.

한마디로 축약해서 말하면, Opera와 Safari는 IE7의 친구들이므로 그 친구들의 리더인 IE7만 FireFox의 말을 잘 듣게 만들면 4개의 브라우저 모두 문제가 거의 없다는 뜻이 된다. IE6의 경우는 이들과 친구 관계가 아니므로 따로 테스트를 해줘야하며, IE6에서 생긴 문제는 그 혈족인 IE7과 먼저 문제를 해소시켜 주면 대부분 FireFox에서도 문제가 사라진다. IE8의 경우는 전체적으로 문제점이 거의 없다가 한두개씩 극소수의 버그를 발생시키므로 스킨 제작이 거의 완료 된 시점에서 Opera, Safari와 함께 테스트를 하고, 문제가 발생하면 다른 브라우저는 제외하고 혈족인 IE7과 IE6에 맞춰주면 된다. 위의 그림은 한개의 브라우저가 오작동이나 뒤틀림을 보였을 때 같은 문제점을 보이는 브라우저가 무엇인지 가늠케 할 뿐이지 버그 수정의 우선순위를 알려주는 맵은 아니다. 본래는 버그수정의 전개도를 추가 할 생각이었느나 너무나 많은 경우의 수 때문에 작성도중 두손을 들고 말았다. 이 부분은 아쉽지만 자기 스스로 해결해가면서 터득하길 바랄 뿐이다.






headline_04.jpg


텍스트큐브, 그누보드, 워드프레스와 같은 CMS들은 하나의 사이트를 구축하기 위해 몇개 안되는 폴더 혹은 단 1개의 폴더에서 모든 작업을 마칠 수 있다. 그래서 사람들은 XE로 넘어오면서 수도 없이 많은 디렉토리에 일단 혀를 내두른다. 아이러니하게도 그 많은 파일과 디렉토리 구조들은 사실 XE 코드파일들을 열어볼 필요조차 없이 마우스 클릭과 XE 관리자 화면 접속만으로도 하나의 사이트 구축을 가능하게 하기 위한 것들인데 말이다. 어차피 모든 파일들을 직접 텍스트 에디터에서 열어서 모조리 자기 입맛에  바꾸는 것이 몸에 익은 파워유저들에게는 이미 XE의 그런 간단구축등은 의미가 없고, 이유야 어떻든 하루빨리 XE의 복잡한 디렉토리 구조를 빨리 이해해서 더이상 그것들이 복잡해 보이지 않는 수준으로 끌어올리는 방법밖에는 도리가 없다.


레이아웃이란?
이런것에 대한 설명이 필요한 사람이라면 글 읽기를 중단해 주길 바란다. 모른다고 탓하는게 아니라 레이아웃의 개념부터 설명하는 기사가 아니기 때문에 무리하게 읽어 내려가다가 시간낭비하게 되는 일을 방지하기 위해서다.


레이아웃을 이루는 구성요소
레이아웃은 1개의 html파일(layout.html), 최소 1개 이상의 css파일(default.css), 1개의 XML파일(info.xml) 총 3개로 구성된다. CSS 코드를 직접 HTML 파일에 넣어도 되는데 왜 최소 1개 이상의 css파일이 필요하냐고 묻는 사람이 있다면 구조적인 사이트 제작을 위한 기초지식을 먼저 습득하기 바란다. 총 3개의 파일만 있으면 사이트의 그릇 역할을 하는 레이아웃을 만들 수 있다. 그러면 일단 간단한 기본 스킨이라도 받아서 연습을 해봐야하지 않겠나? XE 사이트에서 배포하는 공식 기본 스킨을 받아서 설치하고나서 파일들을 한번 열어보라. 머리통이 타들어가는 고통을 느낄것이다. 말이 기본스킨이지 XE의 기본 레이아웃 스킨은 그렇게 간단해 보이지를 않는다.

많은 사람들이 "기본 제공 스킨이 제일 간단하고 심플한거 아닌가요?"라고 물을 수 있지만 XE의 기본 스킨은 적어도 개발자들이 스킨을 최대한 응용하여 100%의 기량을 발휘 할 수 있도록 모든 기능과 다양한 샘플코드를 넣어놓았다. 말그대로 라이브러리형 레이아웃이라고 생각해도 된다. 레이아웃을 만든 사람은 "별것도 아닌데 되게 호들갑이네"라고 하겠지만, 보는 사람의 입장은 또 그렇지가 않다. 게다가 요새는 XE 공식 레이아웃 Ver2가 나와버렸다. 기왕 공부 시작하는거 새로 만들어진 Ver2 기본 레이아웃으로 해보자라는 생각으로 파일을 한번 열어보라. 바로 창 닫기 버튼에 마우스가 간다.

그래서 나는 여러분들께 최고급 초심플 초경량 기본 스킨을 제공하려고 한다. 이 스킨은 Premiumxe.com의 프리미엄 스킨을 만들 때 사용하는 초기화 된 Dummy(허수아비) 레이아웃이다. 파일을 열어보면 아무것도 없어보이지만 실제로는 막강한 기능을 제공하는 이 스킨은 아마 XE의 레이아웃을 디자인 하는 여러분들께 충분히 애용되리라 생각된다.



download_default_layout.gif




 

headline_05.gif

site.gif

본격적인 레이아웃 만들기에 착수한 것을 환영한다. 다운받은 파일을 레이아웃으로 등록해서 게시판 모듈과 연결해서 FireFox로 화면에 한번 띄워보자. 정말 사랑스러운 레이아웃이 눈앞에 펼쳐진다. 1개의 헤더, 2개의 사이드바(위젯공간), 1개의 메인 컨텐츠부, 추가위젯등을 넣을 수 있는 푸터, 그리고 그 푸터 밑에 Copyright등을 넣는 푸터 서브메뉴까지 사이트 기본 구조에 필요한 것은 모두 갖추었다. 이제 관리자 화면에서 사이트 설정 화면을 한번 보자.


admin.gif

그렇다. 사이트의 너비와 위젯공간의 너비, 컨텐츠의 스타일등을 설정하면 본문부 크기가 자동으로 조절되는 다이나믹한 이용자 환경설정까지 지원한다. 본문과 위젯의 위치도 마우스 클릭만으로 자유자재로 바꿀수 있다. 이제 layout.html 파일과 default.css 파일도 한번 텍스트 에디터에서 열어보기 바란다. 정말 짧은 코드들로 분명 탄성을 자아내게 될것이다. 기존에 보았던 레이아웃들 보다 훨씬 간결하면서도 레이아웃이 필요로 하는 편리한 기능들은 다 가지고 있다. 대충 둘러보았으면 이제 IE7을 비롯해서 다른 여러 브라우저에서도 한번씩 열어보자. 완벽하게 호환하고 있으며 IE6에서도 3px 버그나 더블마진 혹은 Float Drop과 같은 버그도 발생하지 않는다.

이정도는 되어야 레이아웃을 분석 할 맛이 나지 않겠나. XE 공식 레이아웃 Ver2로 분석하려고 했다면 지금 다시한번 그 레이아웃을 열어보기 바란다. 3초안에 닫을것으로 보인다.


무작정 따라하기
다른 메뉴얼 같았으면 아마 info.xml, layout.html, default.css 이 3개의 파일에 대해 상세하게 어떤 기능을 하는지 설명했겠지만 여기서는 패스한다. 어차피 여러분은 위에서 제공한 샘플 레이아웃이 있기 때문에  이 레이아웃으로 샘플 레이아웃 몇개를 제작하다 보면 각 파일이 어떻게 서로 연계되는지 자연스럽게 알게된다. 여기서부터는 무작정 레이아웃 하나를 만들어 본다. 무엇이든 일단 만들어 보는게 가장 최고의 공부다. 그럼 어떤 모양의 레이아웃을 만들어볼까? 아무거나 하나 찍어도 된다. 거의 모든 형태가 이 샘플 레이아웃 하나로 전부 가능하다.

해외에서 꽤 멋진 블로그로 뽑힌 사이트와 똑같이 한번 만들어보자. 우리의 첫번째 타겟은 Ad Goodness다. 이런건 별달리 만질 것도 없이 한번에 나와버린다.

ex02.jpg 

1. 단 구조가 맞는지 확인하고 틀리면 수정한다
가장 처음에 살펴봐야 할 것이 바로 단 구조이다. DIV등으로 구성 된 이 단이 샘플 레이아웃의 단 구조 안에서 해결이 되는지를 살펴야 한다. 다행스럽게도 샘플 레이아웃은 거의 모든 단 구조를 소화 할 수 있다. Ad Goodness(이하 타겟 레이아웃이라 칭함)도 샘플 레이아웃의 단 구조 안에서 해결 할 수 있다. 지금 타겟 레이아웃이 1개의 헤더단 밑에 3개의 컨텐츠단이 위치하고 있는데, 만일 컨텐츠단이 3개를 초과하는 순간 샘플 레이아웃과 단 구조가 틀려지게 되는 것이다. 샘플 레이아웃은 최대 3단까지 소화하도록 디자인 되어있다. 이렇듯 단 구성이 틀려지게 되면 샘플 레이아웃의 구조 먼저 변경 한 후에 작업을 시작한다. 여기서는 단 구조를 충분히 소화하므로 곧바로 다음 단계로 넘어간다.


2. 단의 너비 및 높이, Margin, Padding을 피팅(Fitting)한다
이제 각 단들의 너비와 높이, 마진, 패딩값을 조절하여 몸에 맞게 피팅 할 차례다. 이 피팅 작업은 default.css에서 하게된다. 타겟 레이아웃이 어떻게 피팅 되어 있는지 스크린샷을 찍어 포토샵에서 연 후 각 값들을 측정해 가면서 피팅해보자.

ex03.jpg

피팅하기 전에 먼저 배경그림과 같은 기타 부분들을 타겟 사이트와 맞춰놓고 시작하자. 일단 배경 이미지는 img 폴더에 background.gif로 미리 넣어놓았으니 사용한다. default.css를 열어서 주석문 Customization - 여기서부터 자유롭게 코딩합니다를 찾아 body 클래스에 속성을 넣는다. 앞으로 속성을 표기 할때 빨간색 부분은 삭제, 파란색 부분은 수정 혹은 추가 된 것임을 뜻한다.
body { background:#f7f7f7 url(../img/background.gif); }

이제 배경은 똑같아졌다. 그리고 타겟 사이트처럼 사이트가 브라우저 상단에 딱 붙어야 하므로 샘플 레이아웃의 상단에 있는 여백을 제거해서 동일한 환경으로 만든다. 주석문 Layouts - Margin & Position Preference - 필요에 따라 margin 값만 수정하세요를 찾아 아래의 속성을 변경한다. 그러면 상단의 여백도 없어지면서 타겟 사이트와 같은 모양새가 된다.
#header { margin:0 auto; padding:20px; }

본격적으로 수정에 들어간다. 전체 사이트 너비가 698px이므로 이것부터 수정을 시작하자. 전체 사이트 너비, 헤더 너비, 위젯공간의 너비등과 같이 기본 골격이 되는 부분들은 그냥 관리자 화면에 접속해서 레이아웃 설정에서 정해주면 된다. 레이아웃 설정의 사이트 너비 부분에 부분에 698px을 입력한 후 저장 버튼을 누르고 웹브라우를 새로고침 해보자. 사이트의 폭이 조금 좁아지면서 타겟 사이트의 총 너비와 같아진다.

타겟 사이트를 보면 전체적으로 5px 크기의 간격을 두고 각 단이 서로 떨어져있다. 사이트의 가장 외곽을 감싸고 있는 단의 padding값을 5px로 지정해주면 그 안쪽에 위치하는 단들과 5px의 간격을 유지하게 된다. layout.html을 열어보자. layout.html에서 가장 처음에 만나게 되는 DIV단이 가장 외곽단이 되므로 아래의 코드 부분이 되겠다.

<div id="container_site"
<!--@if($layout_info->container_site_width)-->
    style="width:{$layout_info->container_site_width};"
<!--@else-->
    style="width:800px;"
<!--@end-->
>

위의 DIV단은 본래 <div id="container_site"> 처럼 간단한 구문이지만 관리자 설정에서 너비를 입력한대로 변경 될 수 있도록 조건문을 넣어놓은 것이다. 이런 조건문은 지금은 신경쓰지 않아도 된다. 아무튼 사이트 전체를 감싸는 가장 외곽 DIV단의 이름이 container_site라는 것을 알았으니 이제 default.css를 열어서 이 단의 padding값을 조절해보자.

default.css를 열고 여기서 잠깐 CSS 작성을 어떤 형식으로 했는지 살펴보고 넘어가도록 한다. 똑같은 내용을 여러번 중복해서 기재하고 있음을 볼 수 있다. 어차피 CSS에서 정의하는 요소들은 여러번 중복해서 그 속성을 추가 할 수 있기 때문에, 한줄에 모든 것을 다 넣지 않고 일종의 분류를 한 후에 사용하게 된다. 지금 변경해야 할 부분이 padding 부분인데, 이렇듯 padding이나 margin 같은 것들은 레이아웃의 기본 뼈대이기 때문에 눈에 잘 띄는 곳에 모아서 한번에 처리 할 수 있도록 하는 것이 작업에 유리하다.

주석문을 보면 Layouts - Margin & Position Preference - 필요에 따라 margin 값만 수정하세요라는 부분이 있다. 여기에 기본 뼈대를 구성하는 클래스들을 모아놓고 마진과 패딩부분만 지정을 해놨다. 그러므로 앞으로 기본뼈대의 마진이나 패딩을 고칠때는 이 주석문만 찾아서 빠르게 수정 할 수 있다. 이 주석문 아래에 있는 클래스 중에서 우리가 변경해야 할 클래스는 #container_site { margin:0 auto; } 부분이다. 패딩 5px을 추가하자.

 #container_site { margin:0 auto;  padding:5px; }

브라우저를 새로고침 해보면 분명 각 단들이 조금씩 여백을 가지긴 했지만 #container_site 단의 배경색이 지정되지 않아 구분이 힘들다. 타겟 사이트와 같이 흰색 배경을 넣어주면 확실히 구분이 되니 속성을 추가해주자. 주석문 Layouts - Customization - 여기서부터 자유롭게 코딩합니다를 찾아서 배경색을 넣어준다. 위에서 이미 #container_site { margin:0 auto;  padding:5px; }과 같이 마진과 패딩값이 선언되어 있으므로 여기서는 마진과 패딩을 뺀 다른 부분에 대해서만 속성을 추가하면 된다.

 #container_site { background:#fff }

이제 변경사항을 저장하고 새로고침을 하면 훨씬 타겟 사이트와 비슷한 모양새가 된다. 패딩에 배경색까지 들어갔기 때문에 각 단의 구분이 쉬워졌다.
, 

댓글 쓰기 권한이 없습니다. 회원 가입후에 사용 가능합니다

AppBlog

카테고리

최근 게시물

최근 코멘트

태그