Premium XpressEngine Beta

Scroll Your HTML Elements with jQuery Scrollable

2009-11-27T10:52:25+09:00

jQuery Scrollable is to provide generic scrolling capability to your pages. Anytime y...

Supersized – Full Screen Slideshow jQuery Plugin

2009-11-27T10:46:44+09:00

Supersized is a jQuery plugin that automatically resizes (background) images to the size o...

Design Insprition for Apple

2009-11-23T17:04:15+09:00

MobileMe is a service that pushes new email, contacts, and calendar events over the air to all your devices. So your iPhone, Mac, and PC stay in perfect sync. No docking required. And that’s just one of many ways MobileMe simplifies your life.

Push email.

When you join MobileMe, you get a me.com email account that’s always up to date. New messages are pushed to your iPhone or iPod touch automatically, and you’re notified the instant they arrive. MobileMe constantly checks for new messages, so you don’t have to. And when you use MobileMe, you’ll notice that the inbox on your iPhone looks a lot like the inbox on your Mac at home, which also looks a lot like the inbox on your PC at work. That’s because it is. Read messages are marked as read, and all your folders are exactly the way you left them, no matter what device you use to check your email. Last but not least, your MobileMe inbox is entirely ad free and includes spam and virus protection.

How to make XE layout?

2009-08-05T06:16:00+09:00

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

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

그럼 객관적으로 생각해 볼때 XE가 다른 CMS보다 분명 좋은 점은 있는 것인가? 이건 확실히 대답할 수 있다. 있다.

트랜드 지향적이면서도 다른 CMS에는 없는 새로운 것들을 넣으려고 노력한다.
복잡한 PHP 코드를 볼일이 많이 줄었다. 결정적일때는 봐야하지만 그래도 숨어있는게 고맙다.

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

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

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

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

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

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

각설하고, 그림과 같이 모든 웹 브라우저들은 크게 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에 맞춰주면 된다. 위의 그림은 한개의 브라우저가 오작동이나 뒤틀림을 보였을 때 같은 문제점을 보이는 브라우저가 무엇인지 가늠케 할 뿐이지 버그 수정의 우선순위를 알려주는 맵은 아니다. 본래는 버그수정의 전개도를 추가 할 생각이었느나 너무나 많은 경우의 수 때문에 작성도중 두손을 들고 말았다. 이 부분은 아쉽지만 자기 스스로 해결해가면서 터득하길 바랄 뿐이다.

텍스트큐브, 그누보드, 워드프레스와 같은 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의 레이아웃을 디자인 하는 여러분들께 충분히 애용되리라 생각된다.

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

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

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

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

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

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

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

피팅하기 전에 먼저 배경그림과 같은 기타 부분들을 타겟 사이트와 맞춰놓고 시작하자. 일단 배경 이미지는 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"

style="width:{$layout_info->container_site_width};"

style="width:800px;"

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

How to make scanning line?

2009-08-03T05:27:49+09:00

주사선 효과란?

PXE Super Screen v2.1 스킨의 샘플로 사용된 동영상에서 티브이 주사선을 보셨을겁니다. 이런 화면 망점을 표현하는 기법을 간략히 소개합니다. 옛날에도 이런 주사선을 표현하는 튜터리얼이 있었습니다. 그 당시는 거의 수평 주사선으로서 지금 생각해보면 참 단순하다고 생각했습니다(물론 효과는 좋았습니다만). 이제는 세월도 흘렀고 주사선을 만드는 방법도 더 어려워졌습니다. 저도 화면을 3800%로 확대해서 눈이 빠지게 픽셀을 찍어댔으니까요. 지금부터 고급 주사선 효과를 한번 내보겠습니다. 더 고급 방법은 거의 광학적인 지식과 수학이 합해져야 하는 고통이 따르므로 중간단계 난이도만 만들어 봅시다.

어떤 효과를 주는가?

PXE Super Screen v2.1의 동영상을 보시면서 전체화면에서도 꽤나 깔끔한 화질의 영상임을 느꼈을겁니다. 사실 본래 원본 소스 동영상은 크게 확대하면 픽셀이 전부 깨지게 마련이죠. PXE Super Screen v2.1의 원본 동영상도 주사선 효과 없이 그냥 풀 스크린으로 확대되면 아래와 같이 화질이 그다지 좋지 않습니다.

여기에 주사선 효과를 넣으면 생각보다 환상적인 결과를 가져다주죠. (꼭 이미지 클릭해서 원본 사이즈로 보세요)

눈속임입니다. 주사선 효과 때문에 픽셀의 뭉개짐이 감춰진 것이죠. 게다가 이런 주사선 효과는 꽤나 열악한 환경의 스크린을 통해 보는 느낌을 주기 때문에 원본 소스 자체도 뭔가 지하실에서 몰래 촬영됐다거나 하는 등의 비밀스러운 느낌을 가지고 있어야 합니다. 공포영화 링에 나오는 귀신도 아주 후진 TV에서 기어나오죠. 귀신이 기어 나오는 티브이가 영화에서 엄청난 주사선을 발산합니다. 이처럼 주사선을 사용 할 대상은 왠만해선 정상이 아니어야 합니다. 너무 정상인 이미지나 동영상에 이 주사선을 넣으면 느낌이 제대로 살지를 않습니다.

PXE Super Screen v2.1의 동영상도 클럽이라는 촬영하기에 아주 열악한 환경이라는 점이 인식되기 때문에 이 주사선이 먹힌다고 볼 수 있습니다. 게다가 좀 선정적인 이미지도 이 주사선이 어느정도 커버를 해주거든요. 이제 각설하고 주사선 만드는 법을 알아봅시다. 자세하게는 설명을 안하므로 그냥 포토샵 키시고 순서대로 따라해주세요.

포토샵에서 주사선 만들기

1. 가로너비 8px, 세로너비 8px의 흰색 배경의 캔버스를 하나 만들고 돋보기툴로 최대 확대(3200%) 합니다.

2. 새로운 레이어를 하나 만들고 검은색으로 채웁니다

3. 검은색으로 채운 레이어의 투명도(Opacity)를 27%로 설정합니다

4. 검은색으로 채운 레이어를 감춥니다. 다른 작업에 방해가 되거든요. 레이어 팔레트에서 눈 모양 클릭하면 감추기/보이기 되는거 아시죠?. 그리고 새로운 레이어를 하나 만들고 위 그림과 같이 검은색 사각형을 그린 후 투명도를 35%로 설정합니다. 그냥 복잡하게 생각하지 말고 위 그림대로 똑같은 위치에 그리면 됩니다. 왜 저기에 그려야 하는지 설명하기 시작하면 별에 별 이야기 다 해야하므로 그냥 무작정 따라하기로 갑니다.

5. 작업했던 레이어를 또 감추고 다시 새로운 레이어를 하나 만듭니다. 위 그림과 똑같이 검은색으로 채웁니다. 이제부터는 연필툴로 1픽셀씩 찍는게 편합니다. 그리고 투명도를 40%로 낮춥니다.

6. 작업하던 레이어를 감추고 새로운 레이어를 또 만듭니다. 연필툴로 위 그림과 똑같은 위치에 픽셀을 찍습니다. 투명도는 그대로 100%입니다.

7. 작업하던 레이어를 감추고 새로운 레이어를 또 만듭니다. 연필툴로 위 그림과 똑같은 위치에 픽셀을 찍습니다. 투명도는 그대로 5%로 설정합니다.

8. 이제 지금까지 가려놓았던 레이어를 전부 보이게 합니다. 다 키면 위 그림과 같이 됩니다.

9. 이제 레이어중에 가장 하단에 있는 흰색 백그라운드 레이어를 삭제합니다. 그러면 이제 백그라운드 레이어가 없으므로 위 그림과 같이 투명배경이라는 뜻의 점박이 무늬가 나타나죠. 이제 모든 레이어를 선택해서 포토샵 메뉴의 Layer > Merge Layer를 적용해서 1개의 레이어로 합칩니다. 이로써 주사선을 구성하는 1개의 단위가 만들어졌습니다. 지금까지 만든 이 1개의 단위가 패턴화되면 화면을 주사선으로 메우게 됩니다.

이 상태에서 그대로 PNG 포맷으로 저장을 하면 웹에서도 사용 할 수 있습니다. 백그라운드에 이미지를 깔고 그 위에 DIV를 하나 만들어서 여기에 이 주사선 패턴을 넣으면 완벽하게 작동하죠. 문제는 포토샵에서 일반적인 이미지에 적용할 때 입니다. 포토샵의 Define Pattern 명령을 사용해서 패턴화 시켜서는 안됩니다. 그 명령어는 화면 자체를 스크린샷으로 찍어버리는 효과를 가지고 있기 때문에 백그라운드의 점박이 문양까지 전부 찍히게 됩니다.

저도 포토샵에 올인 한 사람은 아니기 때문에 무식하게 그냥 카피해서 붙이기로 사용합니다. 처음에 한 몇개 붙여 놓고 레이어 합치고, 다시 합친 레이어 카피해서 또 붙이는 무식하고 원시적인 방법을 사용하죠. 혹시 좋은 방법 아시는 분은 귀뜸 좀? 아무튼 패턴화 된 파일도 첨부해서 올리니 필요하신 분은 잘 사용해 보시기 바랍니다. Grid.zip

Create a Five-color Magazine Cover

2009-07-15T17:25:39+09:00

First off, you’ll export an InDesign template into Photoshop, then assemble a multi-channel, complex illustration. Then discover how to incorporate the same spot color information into your Illustrator files. You’ll then assemble all these elements using InDesign and utilize some of its’ advanced output preview features. Finally, I’ll show you how to export a printer-friendly PDF and give it a preflight check with Acrobat Professional.

Feel free to use your own images, but bear in mind the process we’ll be using doesn’t lend itself to every image type – for example the stock image of the girl is an ideal choice because of her silver dress.

Here's a list of images I used:

The large version of the girl from iStockphoto
The vector flourishes from iStockphoto
The CD from stock.xchng

다른 것은 둘째치고라도 포토샵에서 이미지를 추출하는 부분에 대해서 만큼은 거의 완벽한 튜토리얼을 제공하고 있네요. 예전 포토샵 CS3까지만 해도 Extraction이라는 기능이 있어서 자동 마스크 기능으로 쉽게 머리카락과 같은 부분을 편하게 추출했었는데 포토샵 CS4에서는 어디로 자취를 감춘지 모르겠네요.

결국 다시 옛날 방식으로 추출을 해야하는 불편함이 있지만 아무튼 이미지 추출기술은 웹, 인쇄를 막론하고 피부톤 보정과 함께 최고 난이도에 속하는 기술입니다.

원문 위치 : http://psd.tutsplus.com/tutorials/designing-tutorials/create-a-five-color-magazine-cover-using-a-spot-metallic/

Colors Come to Life in 3D with ColoRotate

2009-07-13T03:18:34+09:00

Like taste and smell, color is a sense that is processed by our brains in multiple dimensions. Yet traditional methods of choosing colors on computers are limited to obscure sliders and flattened two-dimensional viewers. With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs.

막강한 기능의 Color Scheme이군요. 다만 사이트 디자인 배색 문제인지 아니면 컬러 팔레트에 그라데이션을 넣어서인지 다소 색채가 톤 다운되어 보이는 경향이 있네요. 이 부분은 조금 비쥬얼을 죽이고서라도 해결을 해야 할 것 같습니다. 정확한 컬러를 찾는데 방해가 되는 듯 싶군요

FWA Photo Day

2009-11-11T07:30:24+09:00

Xesta v2.5 Coming Soon

2009-10-16T09:31:57+09:00

Xesta 2에서 발견 된 버그들을 수정하고 XE Core 1.2.6에 최적화 된 XHTML과 CSS로 새로 ...

How to make XE layout?

2009-08-05T06:16:00+09:00

항상 생각해도 글의 첫 서두를 쓰는건 정말 힘들군요. 제목 그대로 XE의 레이아웃 스킨을 만드...

Hot stuff for Xesta 2

2009-08-03T19:42:07+09:00

PXE Xesta 2 제작에 사용된 포토샵 원본 파일입니다. 스킨 틀을 이루고 있는 모든 요소가 포...

How to make scanning line?

2009-08-03T05:27:49+09:00

주사선 효과란?PXE Super Screen v2.1 스킨의 샘플로 사용된 동영상에서 티브이 주사선을 보...

The Fonts Used In Logos of Popular Websites

2009-07-20T12:50:43+09:00

BuildInternet has done some research with the help of Google and WhatTheFont, in ...

Create a Five-color Magazine Cover

2009-07-15T17:25:39+09:00

First off, you’ll export an InDesign template into Photoshop, then assemble a multi-c...

jQuery iPod Drilldown and Flyout Styles Menu System

2009-07-14T17:02:16+09:00

The iPod Drilldown and Flyout Styles Menu System can be used to create a simple dro...