Premium XpressEngine Skins

PXE Board Pro 3 Skin Manual

diver — Wed, 10 Mar 2010 21:20:53 +0900

PXE Board Pro 3가 XE의 기본 게시판을 토대로 프리미엄의 이름에 걸맞는 뛰어난 기능과 고급 디자인을 목표로 만들어진 PXE Board의 스킨으로 다시 거듭났습니다. 스크린샷, 다운로드파일 등록이 가능하여 자료실기능으로 사용할 수 있으며 등록자, 사용자 별점 기능을 더하여 완벽한 리뷰 게시판으로 활용이 가능합니다.

스크린샷 및 다운로드 파일을 등록할 수 있는 자료실 기능이 추가되었습니다.
등록자 및 사용자 별점 기능으로 리뷰 게시판으로 활용이 가능합니다.
다른 브라우저는 물론 IE6에서도 100%의 호환성을 가집니다
모든 디자인 요소 및 기본 HTML/CSS 은 표준을 준수합니다.
Clean Type 기능을 이용하여 항목명을 말끔한 이미지 서체로 변경할 수 있습니다
목록설정에 등록자별점, 사용자 별점이 추가되었습니다.
기존 확장변수를 사용한 미리보기 및 라벨 이미지 출력을 모듈에서 직접 지원하므로 사용이 편리해 졌습니다.
넣고 싶은 링크에 깔끔한 툴팁을 띄울 수 있습니다
썸네일에 미리보기 이미지를 추가하여 툴팁에서 출력시킬 수 있습니다
제목과 썸네일을 링크화 시켜서 본문보기 페이지가 아닌 다른 URL로 링크시킬 수 있습니다
기 본 스타일 3개(리스트, 웹진, 갤러리) 외에 구현이 안되어 있던 블로그 형식이 추가되었고 스튜디오 형식 보기가 새롭게 추가되었습니다(Board Pro 2). 이 형식은 이제 갤러리 보기에서처럼 양쪽에 마진이 남지않고 정확하게 양쪽 정렬할 수 있게끔 정렬관련 함수 및 jQuery가 추가되었습니다
확장변수는 이제 내용이 들어가 있는 변수만 리스트에 출력시킵니다
썸네일에 라벨을 달아 게시물을 환기시킬 수 있습니다
XpressEditor가 에러없이 제대로 작동합니다. 앞으로 만들어지는 PXE의 레이아웃에서도 이제 default 에디터를 사용하지 않고 XpressEditor를 사용 할 수 있습니다
이미지로 사용된 텍스트들은 Naver의 나눔글꼴을 사용하여, 이용자가 포토샵에서 쉽게 텍스트를 바꿀 수 있도록 하였습니다
스튜디오 형식 보기에서는 썸네일이 첨부되어 있지 않은 게시물은 리스트에서 표시시키지 않습니다. 스펨성 게시글이 달려도 관리자에게만 보이도록 설정되었습니다
스튜디오 형식 보기에서는 중요도가 떨어지는 항목(조회, 추천등)은 사라지고 썸네일에 마우스를 올리면 썸네일 자체에 블록이 나타나며 제목과 등록일등의 간단한 정보만 출력시켜 가독성을 올렸습니다
"이 게시물을..." 옵션을 표시할지 안할지 관리자에서 지정할 수 있으며, 표시하지 않을 경우 자동으로 각 항목들이 버튼으로 출력됩니다
제목 옆에 관리자의 수정/삭제 버튼이 있어 이제 게시물을 수정하기 위해 스크롤을 내려 버튼을 찾아다니지 않아도 됩니다. 목록으로 돌아가기 버튼도 추가 될 예정이었으나 공간의 문제로 이 부분은 다음 패치 때 이루어집니다

4개의 컬러셋 중 하나를 선택할 수 있습니다.

흰색 컬러셋
검은색 컬러셋
밝은색 바탕용 컬러셋
어두운색 바탕용 컬러셋

PXE Board Pro 3는 PXE Board 전용 스킨이므로 반드시 PXE Board가 먼저 설치된 상태에서 설치합니다. 압축을 풀면 pxeboard와 Image_Source 폴더가 나오는데 pxeboard 폴더를 XE가 설치된 폴더의 modules 폴더 아래로 복사해 넣거나 혹은 서버에 업로드 합니다.

XE가 설치 된 폴더/modules/pxeboard

제어판 > 모듈 에서 PXE 게시판에 빨강색 설치 링크가 나타나면 꼭 클릭하셔서 모듈 설치를 끝내시기 바랍니다.

XE 관리자 페이지로 접속하여 서비스 관리 > PXE 게시판에서 생성 버튼을 눌러 PXE Board pro 3를 선택하여 생성합니다

1. 글목록 형식 설정

PXE Board Pro 3는 5개의 글목록 형식을 지원합니다.

일반 목록
웹진
갤러리
스튜디오
블로그

일반목록, 웹진, 갤러리는 XE기본 게시판에서 지원되는 형식으로 일반 회원이 임의로 형식을 변경할 수 있지만 스튜디오, 블로그 형식은 사용자가 임의로 변경할 수 없습니다.

2. 자료실 게시판으로 설정하기

기존의 게시판으로 자료실로 활용하기가 쉽지 않았는데요 PXE Board Pro 3의 자료실 기능을 사용하시면 손쉽게 자료실 게시판으로 만드실 수 있습니다.

자료실 기능을 사용하기 위해서는 제어판 > 서비스관리 > PXE 게시판 > 스킨관리에서 자료실 기능을 사용으로 변경해 주세요.

분류, 자료 제목 등이 스크린샷 이미지 옆으로 출력될 수 있도록 확장변수를 추가해 줍니다.

3. 리뷰 게시판으로 설정하기

등록자 별점, 사용자별점을 사용하여 리뷰 게시판으로 활용할 수 있습니다.

리뷰 게시판으로 활용하시려면 등록자 별점 및 사용자 별점 기능을 켜주시면 됩니다.

4. 자료실 리뷰 게시판으로 설정하기

자료실 기능과 등록자, 사용자 별점 기능을 함께 사용하면 완벽한 자료실 리뷰 게시판이 만들어 집니다.

5. 라벨 달기

스크린샷 및 글목록의 썸네일에 왼쪽 혹은 오른쪽 위치에 라벨 이미지를 달 수 있습니다.

라벨 기능을 사용하기 위해서는 스킨관리에서 라벨관련 설정을 켜주시면 됩니다.

라벨 이미지 출력을 출력으로 설정하시면 글 쓰기 할 때 라벨 이미지 항목이 나타납니다.

기본라벨 출력을 출력으로 설정해 놓으면 라벨 이미지를 등록하지 않은 게시물은 기본라벨로 출력됩니다. 만약 이 기본라벨을 변경하고 싶으시면 기본라벨 이미지를 직접 변경해 주시면 됩니다.

왼쪽 정렬 라벨은 아래 파일을 변경해 줍니다.

img/label/labelDefault_left.png

오른쪽 정렬 라벨은 아래 파일을 변경해 줍니다.

img/label/labelDefault_right.png

6. 미리보기 이미지 설정하기

PXE Board Pro 3에서는 기존의 확장변수로 등록해야 했던 미리보기 이미지를 게시물 등록시 직접 이미지를 올려서 등록하도록 개선이 되었습니다. 스킨관리에서 미리보기 이미지 출력을 출력으로 설정하시면 됩니다.

이 보드 모듈은 XE 1.4 이상에서 작동합니다.
이 보드 모듈은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
이 보드는 PXE Gallery Widget과 jQuery 플러그인을 공유합니다. 따라서 PXE Gallery Widget과 함께 사용 할 때는 레이아웃 설정의 헤더 부분에 넣는 자바스크립트 코드를 추가하지 말고 사용하시기 바랍니다. 이에 대한 자세한 내용은 PXE Gallery Widget의 설정하기 설명부를 참조해 주시기 바랍니다
포인트 시스템 관리 모듈별 설정에서 PXE Board 목록이 나타나지 않습니다. 게시판의 추가설정에서 설정하세요.
파일 다운로드시 포인트가 + 혹은 - 되지 않습니다.

비영리 라이센스 : 60,000원
영리 라이센스 : 240,000원

구매하길 원하시면 지불과 다운로드 안내(지불과 다운로드 안내 탭 클릭하여 보세요)를 참조해서 구매하신 후 스토어에 등록된 PXE Board Pro 자료를 통해 다운로드 받으세요.

PXE 공식 레이아웃

PremiumXE — Thu, 11 Feb 2010 22:11:31 +0900

PXE Official Layout은 Premiumxe의 공식 레이아웃 입니다. 이 레이아웃은 이용자 설정을 통해 사이트의 구조를 대단히 다양하게 구성할수 있습니다. 기존의 PXE Sky나 PXE Leaflet Pro의 기능들이 일부 흡수되었으며 이 레이아웃 고유의 강화된 기능들도 만나볼수 있습니다. 아래의 특징은 기존의 레이아웃들이 흡수 된 부분입니다. 먼저 기본 기능을 살펴보고 그 아래 새로 추가된 기능들도 함께 참고해 보세요.

넓은 리플릿 영역과 좁은 리플릿 영역을 설정하는 리플릿 스타일링 기능이 있습니다
리플릿 영역을 왼쪽이나 오른쪽에 위치시킬 수 있고, 혹은 사용하지 않음으로 설정할수도 있습니다
좁은 리플릿 영역을 설정하는 경우 4단계 세로메뉴인 위치표시기를 출력할수 있습니다
리플릿 영역은 배너를 적용하여 링크시킬수도 있습니다
본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
1단계 메인메뉴를 상단에 표시할 수 있습니다
2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다
아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다. 이 메뉴는 사이드바의 폭에 따라 너비가 자동으로 조정됩니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다.
하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다
포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다

아래 내용은 위의 기존 기능들에 추가된 PXE Official Layout만의 기능입니다.

기존에 단 6개 단 구조에서 12개 단 구조로 확장되었습니다. 플랫 형식을 사용하게 되면 네이버 메일 화면과 같이 컨텐츠와 사이드바의 마진이 사라지고 전체화면에서도 잘 어울리는 플랫한 느낌으로 구성할수 있습니다.
오른쪽 사이드바에서는 별도의 메뉴 설정을 통해 사이드바를 강조할수 있는 영역을 표현할수 있습니다.
스카이 블루, 코코아 블랙에 이어 PXE Official Layout 고유의 메인 컬러셋인 Cyan(샤이안)이 추가되었습니다.
모든 컬러셋은 12개의 단 구조를 모두 사용할수 있도록 재코딩 되었습니다.
검색 박스의 너비를 지정할수 있습니다.

1. 압축을 풀어 나온 PXE_official_layout 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > layouts > PXE_official_layout
2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 공식 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 공식 레이아웃을 연결합니다

1. 컬러셋
PXE 공식 레이아웃은 총 3개의 컬러셋이 있습니다. 기본으로 제공되는 3가지 컬러셋은 안정적인 업그레이드를 위해 파일을 수정하지 말고 유지시키면서, 사용자 지정 컬러셋을 선택하여 커스터마이징 하는 것이 효과적입니다. 이 방법에 대해서는 고급 설정에서 다시 설명합니다.

스카이 블루 (PXE Leaflet Pro와 동일)
코코아 블랙 (PXE Leaflet Pro와 동일)
샤이안 (Cyan)
사용자 지정 (샤이안과 동일)

2. 리플릿 스타일 선택
리플릿은 NHN Deview 공식 사이트와 같이 왼편에 본문과는 독립된 영역입니다. PXE 공식 레이아웃에서는 이 리플릿의 스타일을 선택할수 있습니다.

리플릿 출력 안함 : 리플릿을 출력시키지 않습니다
넓은 리플릿(436px) : NHN Deview 공식 사이트의 첫 페이지와 같이 폭이 넓은 리플릿을 출력시킵니다
일반 리플릿(279px) : NHN Deview 공식 사이트의 서브 페이지와 같이 폭이 좁은 리플릿을 출력시킵니다

3. 리플릿 위치 선택
리플릿을 어느쪽에 위치시킬지 결정할수 있습니다.

위치시키지 않음 : 리플릿을 출력시키지 않을 경우 여기서도 위치시키지 않음으로 설정합니다
리플릿을 왼쪽에 위치 : NHN Deview 공식 사이트와 같이 리플릿이 화면의 왼편에 위치합니다
리플릿을 오른쪽에 위치 : 이 샘플 화면과 같이 리플릿을 화면의 오른편에 위치시킵니다.

4. 본문부 레이아웃 구성 선택
사이트의 본문부를 몇 단으로 구성 할 것인지 설정 할 수 있습니다. 6개식 2셋트, 총 12가지 구조를 설정할수 있습니다. 일반 형식과 플랫 형식으로 나뉘어져있는데, 일반 형식은 본문부와 사이드바 부분이 어느정도 마진(여백)을 두고 있으며 플랫 형식의 경우는 마진이 없이 실선으로 구역이 나뉘어져 있습니다. 쉽게말해 플랫 형식은 네이버 메일에 로그인 했을시의 화면과 같으며 전체화면을 사용합니다.

5. 메인메뉴 선택

일반 1단 형식 : 일반적으로 메뉴바에 생성되는 메인 메뉴입니다
일반 2단 형식 : 2차 서브 메뉴를 메뉴바 하단에 출력시켜줍니다. 본문부 레이아웃 구성을 플랫 형식으로 지정한 경우에는 디자인과 매치되지 않으니 사용하지 않는것이 좋습니다
4단 풀다운 형식 : 메인 메뉴에 마우스를 올리면 서브 메뉴가 풀다운되어 나타나는 형식입니다

6. 우측 단일메뉴 선택

우측 단일메뉴란, 레이아웃 구성 선택에서 3단 형식의 스타일을 지정하여 사이드바 2가 출력될때 해당 사이드바를 좀 더 강조시키는 역할을 합니다. 웹 표준화 가이드 사이트인 NULI 사이트에서와 같이 메뉴바의 우측에 초록색으로 Blog라고 적힌 부분과 같은 역할을 합니다.

7. 서브메뉴(세로) 출력

1단 형식이 아닌 경우 사이드바 1의 위치에 2차 메뉴를 출력합니다. 이 서브메뉴는 반드시 관리자 설정의 메뉴에서 2차 메뉴들이 생성되어 있는 조건하에 출력됩니다.

8. 리플릿 위치표시기 출력 여부

리플릿을 사용하는 경우 리플릿 영역에 현재 위치한 페이지를 메뉴 형태로 보여줍니다. 넓은 리플릿을 사용했을 경우에만 위치표시기가 출력됩니다.

9. 사이트 너비, 위젯공간 1의 너비, 위젯공간 2의 너비

이 부분은 일단 아무런 수치도 기입하지 말고 빈 상태로 놔두시면 기본 셋팅된 수치로 적용이 됩니다. 일단 빈 상태로 놔두신 후 나중에 입맛에 맞게 수치를 넣어보세요.

P.S : 이후부터의 추가적인 설명이 필요한 것들은 팁 형식으로 유저포럼에 등록하겠습니다.

이 레이웃은 모바일 대응을 위하여 코드의 클래스명등이 함축적인 의미로 짧아져있기 때문에 핸드코딩을 하시는 분들은 다소 복잡할수 있습니다.
샘플 화면에 나타나는 사이드바의 요소들은 말그대로 샘플만을 위해 임의적으로 넣어놓은 것들이기 때문에 작동을 하지 않는것도 있습니다. 사이드바의 요소는 위젯을 사용하여 이용자가 스스로 꾸며야 합니다.
이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.

현재까지 문제점이 없습니다

Scroll Your HTML Elements with jQuery Scrollable

PremiumXE — Fri, 27 Nov 2009 10:52:25 +0900

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

Supersized – Full Screen Slideshow jQuery Plugin

PremiumXE — Fri, 27 Nov 2009 10:46:44 +0900

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

PXE AppBlog

PremiumXE — Wed, 25 Nov 2009 15:20:40 +0900

PXE AppBlog는 Apple 아이폰용 앱스토어(AppStore)에서 개발자들이 주로 사용하는 GUI(Graphic User Interface)로 디자인 된 최신 트랜드의 텍스타일 블로그 스킨입니다. 무미건조하고 일륜적인 디자인의 한국 블로그와 차별화 된 자신만의 하이엔드 블로그를 운영하시고자 하는 분들, 그리고 IT 업종에 종사하는 분들께 이 블로그 스킨을 권해드립니다. 이제 2009년 11월 28일부로 KT에서도 아이폰(iPhone)이 출시되고 국내 스마트폰 시장도 앱스토어와 같은 고급 디자인으로 무장한 막강한 애플리케이션들의 상용화에 접어들기 시작합니다.

PXE AppBlog는 iPhone 애플리케이션을 제작하는 해외의 유명 디자이너 및 개발자들의 블로그 디자인과 일맥상통하며, 이를 이용하면 이러한 최신의 트랜드와도 확실히 결부되는 장점을 가지고 있습니다. 이 스킨이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭하십시오.

플랫(Flat)하면서도 황금색의 컬러 키포인트가 이 블로그 스킨만의 매력입니다
토글 버튼을 이용하면 방명록, 태그, 프로필과 검색창등의 옵션 영역을 열거나 닫을수 있습니다
웹진 형식 보기, 리스트 형식 보기, 블로그형 보기 모두 나름대로의 특색을 살린 디자인으로 마무리 되었습니다
방명록, 태그, 프로필, 검색결과등과 같은 부수 페이지들의 디자인이 모두 완성되어 있습니다
별도의 위젯을 설치하거나 설정하지 않아도 카테고리, 최근 댓글, 최근 게시물, 태그등과 같은 위젯이 디자인에 매치되어 기본으로 작동합니다
댓글보기에서는 PXE AppBlog와 PXE Photoware에서만 볼수있는 개성있는 날짜 출력형식이 사용됩니다
몇몇 텍스트에는 음영효과를 살려 텍스트가 디자인에 더 잘 녹아들어 보이도록 해줍니다
디자인에 사용된 모든 요소가 포토샵 원본 파일로 제공됩니다. 꼭 디자인에 커스터마이징이 필요하신 분들께서 적절히 사용할수 있습니다

PXE AppBlog는 텍스타일의 구조상 1개의 기본 컬러셋만 존재합니다.

압축을 풀어 나온 PXE_AppBlog_textyle 폴더를 아래의 경로에 위치시킨 후 서버에 업로드 합니다
XE가 설치된 폴더/modules/textyle/skins/PXE_AppBlog_textyle

1. 관리자 화면에 접속하여 상단의 TexTyle을 선택합니다 (기존에 TexTyle을 이미 만드신 분은 1번부터 4번까지 패스하십시오)

2. TexTyle 생성 버튼을 눌러 새 텍스타일을 만듭니다

3. 접속방법과 관리자를 설정 한 후 TexTyle 생성 버튼을 누릅니다

4. 생성 된 텍스타일 이름을 클릭합니다

5. 생성 된 기본 TexTyle 스킨에서 우측 상단의 Admin을 클릭하여 관리자로 접속합니다

6. Textyle 관리자 화면에서 스킨선택을 클릭합니다

7. PXE_AppBlog_textyle의 썸네일에서 스킨적용을 클릭합니다. (아래 이미지는 다른 스킨입니다)

작성 준비중입니다

이 모듈 스킨은 XE 1.2.6 이상에서만 작동합니다.
이 스킨은 IE6/7/8, FireFox2/3, Opera, Safari Windows에서 테스트 되었습니다.

현재까지 알려진 문제가 없습니다

텍스타일 스킨은 레이아웃 스킨과 달리 관리자가 직접 설정에서 마우스 클릭만으로 단 구조등을 변경하는 등의 기능이 제공되지 않고 있습니다. 이러한 부분은 CSS 프레임워크를 만져야만 가능하나 이 스킨에서는 현재 왼편에 위젯, 오른편에 본문이 위치하는 1개의 구조만 사용하고 있습니다. 다른 구조로의 변경이나 너비등을 수정할 경우 스킨이 오작동을 할수있으니 가급적 로고와 같은 그래픽적인 부분만 변경해서 사용하십시오.
PXE AppBlog는 개인이 입맛에 맞게 디자인을 수정하거나 커스터마이징 할 필요없이 모든 디자인 컨셉이 잡혀있는 완성형 스킨입니다. 불필요하게 많은 부분을 수정하여 디자인 컨셉이 흐려지지 않도록 유의해주세요.
텍스타일 스킨은 레이아웃 스킨보다 스킨의 코드등이 더 복잡하고 섬세합니다. 스킨에 사용된 기본적인 코드를 임의로 수정해서 발생하는 문제들은 일체 기술지원에 포함되지 않습니다.
이 스킨을 텍스타일 허브등을 이용하여 다른 이용자에게 분양하는 경우에는 분양형 멀티 라이센스에 해당됩니다.
Platinum 영리 멤버쉽의 경우는 분양형 멀티 라이센스를 사용할수 있습니다.

싱글 라이센스(영리/비영리 구분없음) : 150,000원
분양형 멀티 라이센스 : 800,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하여 이메일로 보내주시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화

Design Insprition for Apple

PremiumXE — Mon, 23 Nov 2009 17:04:15 +0900

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?

PremiumXE — Wed, 05 Aug 2009 06:16:00 +0900

항상 생각해도 글의 첫 서두를 쓰는건 정말 힘들군요. 제목 그대로 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?

WTA — Mon, 03 Aug 2009 05:27:49 +0900

주사선 효과란?

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

WTA — Wed, 15 Jul 2009 17:25:39 +0900

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

WTA — Mon, 13 Jul 2009 03:18:34 +0900

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

PXE Photoware

PremiumXE — Mon, 16 Nov 2009 07:22:47 +0900

PXE Photoware는 사진과 관련된 업종에 종사하는 분들을 위한 포토갤러리 전용 레이아웃입니다. 이 레이아웃을 이용하면 해외 유명 포토그래퍼들의 블로그나 개인 웹사이트의 최신 트랜드와 경쟁할 수 있을 정도의 하이엔드급 디자인을 제공합니다.

본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
3차 세로형 메뉴를 사용할수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다. 이 레이아웃에서는 기본적으로 배경 마진이 없는 형태를 사용하는 것이 좋습니다
마우스 토글에 따라 추가 옵션 위젯영역단이 슬라이드 되어 보여집니다
기본 로그인 기능과 팝업 로그인 기능이 모두 있어 원하는 기능을 선택해서 사용할수 있습니다
하단부에 1단계형 메뉴를 사용할수 있습니다
PXE Gallery Widget의 기능을 사용한 최근 이미지 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
최근 게시물 및 최근 댓글 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
로그인 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다

PXE Photoware는 총 3개의 컬러셋을 가지고 있으며 이 컬러셋들은 단순히 색상만 변경시키는 것에 그치지 않고 마치 1개의 컬러셋만을 위해 제작된듯이 각 메뉴등과 같은 요소들이 컬러셋에 잘 녹아 들어있습니다

1. 압축을 풀어 나온 PXE_photoware폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > layouts > PXE_Photoware

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 포토웨어 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 포토웨어 레이아웃을 연결합니다

1. 사이트 단 구성 선택
사이트의 본문부를 몇 단으로 구성 할 것인지 관리자 화면에서 설정 할 수 있습니다. 총 6가지의 설정을 아래의 그림을 참조하여 선택하세요.

2. 사이트 기본 환경 설정 확인
위의 단 구성을 선택했다면 이제 다른 설정항목들은 일단 전부 무시하고 게시판에 연결하여 레이아웃을 띄워보세요. 별다른 항목들을 입력하지 않아도 기본 구성이 되어진 레이아웃이 나타나게 됩니다. 너비는 기본크기인 1094px에 맞춰져 있습니다.

레이아웃을 설치하고 나면 맨 위의 샘플 이미지와 완전히 동일한 화면이 나타나는 것은 아닙니다. 화면에 보면 사용자 정의 공간 1과 같은 형태로 사용자가 해당 공간을 자유롭게 이용할 수 있도록 비워놓은 공간들이 있습니다. 이 공간에 자신이 원하는 위젯이나 혹은 이미지들로 정보를 채워나가면 됩니다.

3. PXE Photoware 전용 위젯 설치

다운로드 받은 파일의 압축을 풀어 widgets 폴더를 서버에 업로드 합니다. 최근 이미지, 최근 게시물, 최근 댓글, 로그인 위젯까지 총 4종류의 위젯이 있습니다.

4. jQuery 플러그인과 스크립트 코드 활성화

위젯이 서버에 업로드 되었으면 관리자로 접속합니다. 사이트 설정 > 레이아웃에 들어가서 PXE Photoware 레이아웃의 설정화면에서 아래 이미지와 같이 헤더 스크립트 영역에 코드를 넣어야 합니다.

코드는 다음과 같습니다
<script type='text/javascript' src='widgets/newest_images/skins/PXE_official_photoware/js/jquery.tooltip.js'></script>
<script type='text/javascript' src='widgets/newest_images/skins/PXE_official_photoware/js/global.js'></script>

주의! : PXE Board Pro 2는 이미 동일한 jQuery 플러그인에 대한 환경설정이 되어 있습니다. 동일한 설정이 중복되면 충돌현상이 발생하므로 PXE Board Pro 2를 사용하는 레이아웃에는 위의 코드를 추가하지 말고 사용하시기 바랍니다. 이 부분의 설명이 난해하게 느껴진다면 여기를 클릭하여 다른분이 질문하신 내용에 대한 답변을 확인해보면 쉽게 이해가 갑니다.

5. 위젯 위치시키기

PXE Photoware에는 상단 토글 영역에 3개의 위젯 영역, 하단부에 4개의 위젯 영역 총 7개가 준비되어 있습니다. 여기서 로그인과 검색창이 2개의 상단 토글 영역에 이미 자리잡고 있기 때문에 이 이외의 5개의 위젯 영역을 여러분이 원하는대로 꾸밀 수 있습니다. 위젯 코드생성을 통해 발생한 코드를 layout.html 파일을 열어 추가 위젯 영역 1과 같이 적혀 있는 부분에 붙여 넣으시면 됩니다.

6. 최근 이미지 위젯을 사용하여 마우스 오버 미리보기 이미지 및 라벨 사용하기

PXE Photoware 레이아웃에는 PXE Gallery Widget의 기능을 가진 최근 이미지 위젯이 있습니다. 이 위젯을 100% 활용하는 방법은 여기를 클릭하여 참고하세요. PXE Gallery Widget과 사용방법이 동일합니다.

최근 이미지 위젯과 PXE Board Pro 2에서 사용하는 겔러리 보기 형식의 jQuery가 충돌하지 않으려면 반드시 위에서 설명한 주의사항을 염두해 주세요.
샘플 화면에 나타나는 위젯등은 정식 등록자에 한해 모두 무료로 배포되고 있습니다

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
일부 IE6에서 토글 영역의 로그인 박스에서 로그인 박스가 좁아지고 로그아웃 버튼이 이상한 곳에 위치하는 CSS 버그가 있습니다. 이러한 버그가 나타나는 IE6 이용자분들로부터 피드백을 받고 있는 중이며 곧 수정 될 내용입니다

비영리 라이센스 : 40,000원
영리 라이센스 : 150,000원

FWA Photo Day

PremiumXE — Wed, 11 Nov 2009 07:30:24 +0900

Xesta v2.5 Coming Soon

PremiumXE — Fri, 16 Oct 2009 09:31:57 +0900

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

PXE Tab Widget Part 1

PremiumXE — Tue, 06 Oct 2009 21:59:02 +0900

PXE Sky와 PXE Leaflet Pro 레이아웃의 샘플 화면에 사용된 탭 방식 최근글 위젯입니다

본 위젯은 샘플용 위젯으로서, 흰 색 계열 1개의 컬러셋으로만 구성되어 있습니다

1. 압축을 풀어 나온 tab_pxe_01 폴더를 귀하의 widgets\tab_newest_document\skins 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > widgets > webzine >skins > tab_pxe_01
2. 관리자로 접속하여 사이트 설정 > 위젯 > 탭 방식 최근 문서 출력에서 코드생성 버튼을 눌러 PXE Tab 형식 최근글 스킨 파트 1을 선택 한 후 세부사항을 설정합니다.

이 위젯은 샘플 위젯으로서 몇가지 부분은 이용자의 코드 수정이 필요한 경우가 있습니다. 기본적으로는 목록이 5개가 출력 될때 제대로 보이게 되어 있으며, 만일 목록수를 늘리게 될 경우에는 css/normal.css에서 .PXE_tab_01{ position:relative; height:160px; } 부분의 파란색 코드의 수치를 높여 위젯의 높이를 전체적으로 올려줘야 합니다.
이 위젯은 탭 부분을 이미지로 사용하고 있기 때문에 탭에 적히는 부분의 모듈 제목이 길어지게 되면 탭 영역을 벗어나게 됩니다. 모듈 이름은 항상 탭을 넘지 않도록 짧게 지정하십시오.
위젯 특성상 글 제목만 표기되도록 되어 있으니 조회수와 추천수는 표시로 설정하셔도 화면에는 표시되지 않습니다.
이 위젯은 업데이트 및 다운로드 코너에서는 다운로드 링크가 없습니다. 직접 PXE Sky와 PXE Leaflet Pro를 다운로드 받는 페이지로 이동하셔서 다운로드 해주세요.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

무료

PXE Leaflet Pro

PremiumXE — Tue, 06 Oct 2009 21:44:28 +0900

PXE Leaflet Pro는 PXE Leaflet Lite의 모체가 되는 기능 강화판으로서, PXE Sky의 본문부 가변형 다단 기능이 포함된 프리미엄 레이아웃 입니다. 이 레이아웃이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭해서 살펴보세요

넓은 리플릿 영역과 좁은 리플릿 영역을 설정하는 리플릿 스타일링 기능이 있습니다
리플릿 영역을 왼쪽이나 오른쪽에 위치시킬 수 있고, 혹은 사용하지 않음으로 설정할수도 있습니다
좁은 리플릿 영역을 설정하는 경우 4단계 세로메뉴인 위치표시기를 출력할수 있습니다
리플릿 영역은 배너를 적용하여 링크시킬수도 있습니다
PXE Sky의 주력 기능인 본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
1단계 메인메뉴를 상단에 표시할 수 있습니다
2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다(샘플에서는 보여지지 않고 있습니다만 아주 예쁘게 자리를 잡아 놓았습니다)
아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다. 이 메뉴는 사이드바의 폭에 따라 너비가 자동으로 조정됩니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다. 이 레이아웃에서는 기본적으로 배경 마진이 없는 형태를 사용하는 것이 좋습니다
하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다
포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다

PXE Leaflet Pro는 흰 색 계열의 스카이 블루와 검은 색 계열의 코코아 블랙 두가지의 컬러셋이 있습니다

1. 압축을 풀어 나온 PXE_leaflet_pro폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요. 레이아웃의 기본 사용법을 알고 싶다면 XE 동영상 메뉴얼을 참조하시기 바랍니다.

XE가 설치 된 폴더 > layouts > PXE_leaflet_pro

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 리플릿 프로 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 리플릿 프로 레이아웃을 연결합니다

본 레이아웃은 PXE Leaflet Lite 버전을 통해 대부분의 메이저 버그가 이미 수정된 안정화(Stable) 레이아웃입니다
샘플 화면에 나타나는 위젯등은 정식 등록자에 한해 모두 무료로 추가 배포되고 있습니다

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

비영리 라이센스 : 40,000원
영리 라이센스 : 150,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화