Black & White 사진/갤러리용 스킨 (최종 수정 : 08.10.03)

고경원님의 이글루스는 왜 스킨 업데이트를 안할까 라는 글을 읽고, Yurica님의 깔끔한 흑백 조화가 돋보이는 Black & White 1단 스킨을 사진/갤러리용으로 가공해봤습니다. (Yurica님, 감사드립니다) 이 스킨을 적용한 샘플 블로그를 따로 개설했으니, 보실 분은 클릭해주세요.

현재는 가로 750픽셀에 맞춰놨지만, 포스트폭을 더 좁게/넓게 변경하기 쉽도록 제작했습니다. 정확히는, 일부러 그 점에 초점을 맞추어 제작했습니다. 아래에 변경법을 따로 설명드리겠지만 html이나 css에 대해 전혀 모르더라도 어렵지 않으실 겁니다.



▶ 스킨 개요

1단 스킨은 양쪽에 치렁치렁한 메뉴의 방해가 없어 포스트만 돋보이는 장점이 있지만, 그 점이 단점이기도 합니다. 메뉴를 아래쪽에 몰아버림으로서 덧글 한번 확인하려면 저 아래 아득히 스크롤을 내려야 하고, 그렇다고 메뉴를 위로 끌어올리면 이번엔 포스트를 보는데 스크롤을 내려야 해서 굳이 1단 스킨을 선택한 보람이 없어집니다. 그래서 화면 가득한 시야감이 그리 중요치 않은 유저들은 2단이나 3단 스킨을 주로 사용하곤 합니다.

이 스킨은 1단 형식이지만 메뉴를 감춰놨다가 마우스를 대면 보이게 함으로서 평소에는 사진 감상을 방해하지 않고, 또한 스크롤 여행을 하지 않고도 메뉴를 쉽게 확인해볼 수 있도록 구성했습니다.

왼쪽 끝의 [MENU] 박스 위치는 모니터 해상도에 따라 가변적입니다. 정확히는, 모니터에 상관없이 [MENU] 딱지는 제일 왼쪽에 붙어있고 포스트는 정중앙에 박혀있습니다.

가로 1024 모니터

[MENU] 위에 마우스를 올렸을 때

가로 1280 모니터

[MENU] 위에 마우스를 올렸을 때

▶ 카테고리 배치

이 스킨은 메뉴의 배치가 약간 까다롭습니다. 샘플 블로그에 직접 가서 보시면 알겠지만 이 스킨은 카테고리 배열에 특화되어 있습니다.

이렇게

카테고리를 세로가 아닌 가로 한줄로 배열했습니다. 카테고리가 많아서 두줄 세줄 넘치면 세로열이 안 맞아서 보기 좋지 않겠죠. 다시 말해서 이 스킨은 카테고리를 죽 늘어놔도 한줄에 수납될 정도로 카테고리수가 적은 분에게 추천하는 스킨입니다. (혹은 카테고리가 많더라도 모두 4글자라는 식으로 사이즈가 일정하면 괜찮을듯.)

또한, 실은 이 스킨은 생긴 건 이래도 3단 스킨(...)입니다. 실제로 메뉴 구성은 이렇게 되어 있습니다.

다시 말해서

메뉴관리 항목에서 오른쪽 사이드에는 '카테고리' 항목만 보이게 해야 스킨이 의도한 대로 보입니다. (다른 항목을 넣어도 되긴 하지만, 결과물이 그다지...;;)


─ 이상에서 보는 것과 같이, 그다지 범용적인 스킨은 아닙니다. 디자인이 특화되어 있어서 사용에 신경을 써야 합니다. 이런 걸 공개해도 될까 살짝 고민도 했습니다. (지금 쓰는 포스트잇 스킨을 공개하지 않는 것도, 너무 마니악해서...;;;)
그럼에도 불구하고 사진/갤러리 용으로 마땅한 스킨이 없다는 분들에게 도움이 될까 싶어 공개합니다. 혹시라도 필요한 분이 유용하게 써주시면 기쁠 따름입니다.


▶ 설치 방법

다시 말씀드리지만, 생긴 건 이래도 3단 스킨입니다. 그러니 만들 때 반드시 3단 스킨을 고르셔야 합니다.

1. 스킨 바꾸기로 들어간다.
2. 새로 만들기로 들어가서 이렇게 3단으로 생긴 것을 고른다. (파란색 녹색 아무 거나 상관없음)
3. 아무렇게나 만든 뒤 저장하고 빠져나온다. 이름은 마음대로 붙여도 됨.
4. 방금 저장한 스킨을 '소스고침'을 눌러서 본격적으로 고치기 시작한다.

이 중 포스트 이미지 사이즈는 아래쪽에 따로 설명. 나머지는 그대로 따라하세요.

5. 그 다음 HTML 및 CSS 박스 안에 내용물을 싹 지우고 각각의 파일 내용을 복사해 넣는다.

※ 주의 : 익스플로러 사용자는 파일을 반드시 오른클릭해서 하드에 저장한 후, 메모장 등에서 열어서 내용물을 복사해 붙이세요. 브라우저에서 그냥 클릭하면 소스가 깨집니다.

● HTML 박스에 들어갈 내용물

구조가 복잡한 만큼 html 소스도 메인화면-본문-왼쪽날개-오른쪽날개 모조리 다 갈아야 합니다. 각각의 상자를 마우스로 클릭하면 해당 박스가 오렌지색으로 활성화됩니다. 순서대로 복사해 넣으세요.

main.txt
center.txt
left.txt
right.txt

● CSS 소스 박스에 들어갈 내용물 : css.txt

6. 저장한다.
7. 스킨을 적용한다.


.
.
.
.

이상입니다.


▶ 포스트 폭 조절 방법

윗부분에서도 언급했듯이, 이 스킨은 포스트 가로폭 조절이 쉽도록 하는 데에 주안점을 두고 구성했습니다. 방법은 간단합니다.
css.txt 를 살펴보면 이런 곳이 세 군데 있을 텐데요,

#container1 { /* 가운데 두꺼운 줄로 싸인 영역입니다 */
width: 850px; /* 포스트 이미지 + 양쪽 여백을 더한 수치 */
background : #ffffff;

#sidebar2 { /* 헤드와 본문 사이에 끼는 메뉴(카테고리) 부분 */
width: 750px; /* 포스트 이미지와 같은 수치를 넣어주세요 */
}

#content div.post { /* 포스트의 모습을 지정해줍니다 */
width: 750px; /* 포스트 이미지와 같은 수치를 넣어주세요 */

설명 그대로입니다. 아까 설치 4번에서 지정한 '각 부분별 가로사이즈' 중에 '포스트 이미지' 항목이 있죠? 거기에 자신이 원하는 사진 사이즈를 넣고, 그에 맞춰서 저 세군데의 css 소스 숫자를 고쳐주면 됩니다.
포스트 이미지 사이즈를 800으로 했으면 sidebar2와 content div.post 의 숫자는 800, container1의 숫자는 800에 포스트 양쪽의 여백을 더한 숫자(850이든 900이든)을 넣고 저장하기를 누르면 땡입니다. 쉽죠? ^^*


▶ 왼쪽의 MENU 네모칸 길이 늘리는 법

네모칸이 너무 작아서 찾기 힘들다는 분이 계실지도 몰라, 길이를 늘리는 팁을 적습니다.

#Lmenu { /* 왼쪽에 MENU라고 된 까만 박스 */
position : absolute; top : 10px; left : 0px;
color : silver;
background : #000;
width : 15px;
height : 100%; <- 요걸 추가해주세요.
border-top : 1px solid #cccccc;
border-right : 1px solid #555555;
border-bottom : 1px solid #222222;
border-left : 1px solid #888888;
padding : 30px 3px;
line-height : 1em;
text-align : center;
}

이렇게 하면 MENU네모의 길이가 아래로 쭉 늘어납니다. 저 100%값은 물론 마음대로 바꾸시면 됩니다. (1500px이라든지 150%등등)



▶ 마무리로 한마디

여기에 덧붙여, 애초에 이 스킨의 발단이 된 고경원님의 글의

※ 본 값은 스킨의 속성을 지정하는 것 뿐입니다. 실제로 보이는 모습은 직접 HTML/CSS 상에서 편집하셔야 합니다.
그런데 '본 값' 외에 어느 부분을 HTML/CSS 상에서 편집해야 하는지 초심자들이 어캐 아느냐고OTL. 관건은 그거란 말이지.

부분에 대한 설명을 좀 해볼까 합니다.

그러니까 그게 말이죠, 어느 부분을 편집해야 하는지는 스킨마다 다 다릅니다. 가령 이 스킨은 저 세군데만 고치면 되지만 지난 번에 만든 레이스 스킨의 경우엔 포스트 폭을 늘리려면 배경에 깔린 레이스 그림부터 포토샵에서 늘려야 합니다.
그리고 그렇게 그림이 이용된 스킨이 이글루스에는 꽤 많아요. 포스트 테두리가 둥근 스킨은 폭 변경을 하려면 모조리 그림부터 뜯어고쳐야 한다고 보면 틀리지 않습니다. 물론 monolog처럼 소스의 숫자만 바꿔도 되는 스킨도 있지만, 그런 스킨 역시 어느 부분을 고쳐야 하느냐는 것은 스킨마다 모두 다 다릅니다.

그런 상황에서 모든 스킨에 적용되는 범용적인 설명을 쓰기란 불가능하고, 그렇다고 각 스킨마다 개별 설명서를 첨부하라는 것도 쉬운 일은 아니겠죠. 레이아웃이 정교한 경우엔 숫자 하나만 바꿔도 스킨이 통째로 틀어지는 경우도 있습니다. 그런 것은 88사이즈 옷을 55 만들듯이 스킨을 전체적으로 손봐야합니다. 그런 케이스 바이 케이스를 모두 상정해서 편집 가이드를 만든다면 그 설명서는 설명서가 아니라 거의 css 입문서가 되어버리겠지요.

애초에 이글루스도 태터처럼 사용자 스킨을 파일째 업로드하면 땡! 하는 시스템으로 나갔으면 더 좋았겠지만, 이제 와서 시스템을 뜯어고치기도 쉽진 않겠죠. 하지만 네이버 블로그도 아이템 팩토리를 개설해서 회원 스킨을 활발히 공유하는 걸 보면 뭔가 좀 개선할 방법이 있을 것 같은데... 라는 생각이 안 드는 건 아닙니다. 특히나 새 스킨 업뎃이 몇달 째 멈춰있는 요즘의 이글루스를 보고 있노라면 답답하기도 하지요.

그래도 아무튼, 현재의 시스템 하에서는 초보자용 스킨 편집 요령서 같은 것은 쉽지 않다...는 말씀을 드리고 싶어서 몇 자 적어봅니다.

좋은 하루 되세요 ^^