나만의 XE 레이아웃 만들기

레이아웃이란?

레이아웃의 형태레이아웃(Layout, 배치라는 뜻)이란 단어는 여러 분야에서 참 많은 의미를 가지고 있습니다. 책이나 신문 등에서는 기사의 중요도를 구분하고 구독자로 하여금 읽기 쉽고 빠르게 정보를 전달하고자 글의 내용과 사진등의 적절한 배치를 항상 고민합니다. 정원을 보기 좋고 아름답게 꾸미는 일도 레이아웃이라고 할 수 있구요 건물이나 빌딩, 하다못해 조그마한 강아지 집과 같은 건축물도 설계도면에 따라서 유효적절하게 공간을 분할하는 레이아웃이 필요하게 됩니다.

레이아웃은 눈에 보이는 것 뿐만 아니라 소프트웨어적인 부분도 많습니다. 시내버스의 이동 경로를 설계하는 것, 키보드의 자판 배열, 반도체와 소프트웨어의 설계 그리고 운동장에서의 트랙 등도 레이아웃에 해당하지요. 심지어 여러분이 좋아하는 족구를 하려고 해도 선은 그어야 합니다. 이렇게 그려진 선은 곧바로 규칙이 되고 어기면 반칙이 되죠!

웹사이트를 운영하는 사람에게 레이아웃이란 일종의 패션입니다. 그러면서도 사이트의 정보와 내용을 단 한마디로 표현할 수 있는 그림 이야기인 것이죠. 어떤 사람은 메뉴가 오른쪽에 있는 것이 보기에 좋다고도 하고 또 어떤 사람은 왼쪽에 있는 것이 더 편리하다고 말할 수 있습니다. 이렇게 웹사이트에서의 레이아웃은 심미성(보기에 아름다움)과 기능성(사용하기에 편리함) 사이에서 개인의 성향과 단체의 사업 목적에 따라 여러가지 레이아웃이 존재하게 됩니다. 이러한 과정을 디자인이라고 말합니다.

음악에서는 "작곡이 먼저인가? 작사가 먼저인가?"하는 방법론이 있습니다. 그러면 웹사이트는 프로그램 설계가 먼저일까요? 레이아웃 디자인이 먼저일까요? 둘다 서로에게 중요한 상관관계가 있습니다. 디자이너가 아무리 멋진 디자인을 그린다고 해도 프로그램으로 코딩되고 작동되지 않으면 소용이 없겠죠? 또한 프로그래머는 웹사이트에서 필요한 기능과 설계 때문에 마음껏 표현하지 못하는 부분도 많습니다. 결국 레이아웃은 프로그램 기능과 그림 이야기의 적절한 조화를 이루면서 방문자들에게 심미성과 편리성 등을 함께 제공 할 때 멋진 홈페이지로서 기억에 남을 수 있습니다.


레이아웃은 땅따먹기!

레이아웃을 만든다는 것은 이제 여러분도 디자이너가 되는 것입니다. 디자이너에게 가장 필요한 요소는 창의성입니다. 다른 사람의 디자인을 모방하지 않으면서 자신만의 독특한 표현과 구성을 현실화하는 것이야 말로 가장 훌륭한 디자이너라고 말할 수 있지요. 하지만 그 이전에 다른 디자인을 벤치마킹(benchmark, 비교평가) 해보고 공부하는 것은 전혀 부끄러운 일이 아닙니다. 오히려 더욱 빠르게 성장할 수 있는 아주 특별한 공부방법일 것입니다.

image

위의 레이아웃은 XE의 기본 레이아웃입니다. 기본이라는 것은 가장 필요한 요소만을 가지고 있는 구성이라는 뜻이죠. 그럼 어떤 것들이 기본구성요소일까요? 가장 먼저 헤더(Header)가 눈에 들어옵니다.

헤더(Header)는 말 그대로 가장 우두머리의 역할을 합니다. 이 영역은 웹사이트에서 가장 중요한 의사표현의 수단이자 최고의 기술구현(?)을 집약시켜 놓는 곳이기도 하지요...^^ 최고의 기술구현이란 제 생각이지만, 무엇보다도 웹사이트를 대표할 수 있는 이미지를 가장 먼저 배치하게 되고 각각의 페이지로 이동하는 메뉴(Menu)를 여러가지 방법과 최신 웹기술로 표현하게 되는 곳이 이곳이기 때문입니다. 이 헤더에서의 디자인은 곧 하위 내용과 구성 페이지의 디자인에 가장 큰 영향을 준다고도 볼 수 있을것 같습니다.

사이드바(Side Bar)는 여러가지 이름으로 표현 되기도 합니다. Side Left 또는 Side Right, Banner 등등. 하지만 역할에 있어서는 역시 서브 메뉴의 기능과 강조하고 싶은 링크주소의 배너광고가 주된 내용입니다. 요즘은 헤더 메뉴에서 하위 페이지의 링크를 여러가지 방법으로 표현하기 때문에 이 영역은 점차 광고적인(Banner) 디자인이 늘어나는 추세이지요. 하지만 방문자들에게 디자인만 강조한 나머지 편리성을 제공하지 않는다면 웹서핑(페이지를 옮겨 다니는 것)은 무척 불편해 질 것입니다. 적절한 구성과 조화가 정말로 필요한 영역입니다.

콘텐츠(Content,내용) 영역은 두말할 나위도 없이 가장 넓고 큰 땅을 가진 땅부자입니다. 이 영역은 가끔 더 많은 땅을 갖고 싶어서 다른 요소를 침범(?)하기도 합니다. 무척 욕심이 많은 요소이기도 하구요...^^ 그도 그럴수 밖에 없는 이유가 이 영역은 HTML에서도 CSS에서도 세로의 크기값(height)을 정해주지 않기 때문이고, 그런 성향 때문인지 가끔은 가로값(width) 마저도 무시하려고 하는 아주 욕심많은 친구입니다...^^ 결국 CSS양에게 잔소리를 많이 들어야 "우리 아이가 달라졌어요!" 의 효과를 볼 수 있습니다. 콘텐츠의 영역의 나쁜 버릇을 바로잡지 않으면 맨 아래에 있어야 할 푸터(Footer)마저 덩달아 말썽을 부린답니다. 실제로 여러분들이 이 콘텐트 때문에 속상함을 많이 경험하게 되실 수 있습니다. 하지만 너무 걱정하지 마세요. CSS양의 잔소리 몇마디면 콘텐츠 영역의 성격도 바로잡을 수 있습니다. "가만, 기다려! 너는 나를 힘으로 이길 수 없어!!!"

푸터(Footer)는 웹사이트의 기본적인 정보를 제공하기도 하고 헤더와 콘텐츠의 주된 내용을 마무리 짓는 구성요소입니다. 맨 아래에 있다보니 푸터라고 불리우겠지요. 디자인적인 요소로서 푸터까지 세심하게 배려한다면 완성도가 높은 멋진 사이트가 될 수 있습니다. 이 영역에는 저작권에 대한 안내와 간단한 이메일 주소 등의 기본정보들이 들어가게 됩니다.


XE로 나만의 레이아웃 만들기

XE 코어를 이용해 홈페이지를 만들고, 내 마음껏 레이아웃을 수정하고 편집하는 일은 정말 즐겁고 기분좋은 일입니다. 홈페이지라는 단어 자체가 가지는 가장 멋진 노동이기도 하구요. 요즘은 불로그, 까페, 싸이, 트위터, 페이스북 등이 유행한다고는 하지만 그러한 서비스의 최대 목적은 디자인적인 요소보다는 모바일 환경과 더불어 간편한 접속과 글의 무지향적인 전달 효과라고 할 수 있습니다.

홈페이지의 본래 의미는 월드와이드웹(WWW / Web은 거미줄이라는 의미)에 여러분만의 집(Home)을 설계하고 디자인하는 곳입니다. 이 집에는 항상 많은 손님들이 방문하게 되고 여러분이 수집하고 모아놓은 글과 이미지 등을 구경하게 됩니다. 하지만 XE 코어에서 활용할 수 있는 레이아웃을 만들려면 코어가 다루는 함수의 결과물, 즉 객체 변수에 대한 기초적인 이해가 필요합니다. XE 코어에서 함수는 곧 객체(Object)이기도 합니다.

"나만의 XE 레이아웃 만들기"는 레이아웃에서 필요한 객체 변수를 살펴보고 어떻게 활용할 수 있는지에 대해 살펴보는 이야기 주제입니다. 이제부터 XE로 여러분만의 멋진 레이아웃을 만들어 보세요!