스킨이야기4 Articles

  1. 2006/11/30 Skin Nzene V2:Green 버전입니다 (102)
  2. 2006/11/28 Skin Nzene V2 - Round PNG 를 공개합니다 (67)
  3. 2006/11/26 Skin Nzene V2 - Round PNG
  4. 2006/11/23 Skin-nzene.1 스킨을 나눠드립니다,, (16)
스킨이야기 2006/11/30 15:06

Skin Nzene V2:Green 버전입니다

사용자 삽입 이미지
배경과 사이드바의 색상을 변경한 그린버전 입니다,,
몇가지 자잘한 오류와 IE7에서의 스크립트 에러를 해결하였습니다,,

설치는 역시나 skin.html 의 상단에 작성된

<script language=JavaScript>
<!--
blog_path = http://skin.nzene.com/;
//-->
</script>
스크립트를 찾아 도메인을 자신의 도메인으로 변경해주시면 됩니다;;
주소를 적는 방법은 "http://자신의 도메인/태터가 설치된 폴더이름/" 으로 적어주시면 됩니다,,
만약 자신이 도메인의 루트에 태터를 설치하셨을 경우엔 "http://자신의 도메인/" 으로 적어주시면 됩니다,,

추가로 계정의 호스팅 ID 도메인(예: http://nzene.chol.com/tt/ ) 으로 작성하시면 더 좋다고 하네요;; (태터에서 Alklid님의 피드백)

그리고 중요한건 스킨폴더의 이름을 바꾸시면 안됩니다;;
위에 작성한 블로그 패스의 주소값을 스킨내 png.js 에서 받아 png를 출력하는데 만약 스킨폴더의 이름(nzene_v2_green)을 임의대로 바꿨을 경우 IE6 에선 레이아웃이 제대로 출력되지 않습니다;;

기타 사용에 궁금한점은 댓글달아 주세요,,
본 스킨은 Firefox2.0 과 IE6, IE7에서 테스트 되었습니다;; ㅡㅂㅡ;;

nzene_v2_green.zip

nzene_v2:Green 스킨입니다 (최근 업뎃:12/3)


sidebar_bg_green.psd

nzene_v2:Green 버전의 사이드바 포토샵파일입니다;;


# 추가 업데이트 안내

블로그 아이콘플러그인 사용시 48x48 사이즈로 출력할경우 댓글의 말풍선이 터지던 문제 해결(적그리도님과 유마님 피드백)


# 추가 업데이트 안내

댓글의 비밀글과 방명록의 비밀글 오류해결,,
지역로그 아이콘 추가,,

※ 위의 오류중 비밀댓글에 관한 1.1 버그가 TNF에 올라와 있습니다,, http://dev.tattertools.com/wiki/bugs/1.1
아직 해결이 안된것 같은데 만약 제 스킨을 사용하는데 Illigal Parameters 오류가 발생할 경우 임시적으로 여기를 가셔서 해결하실 수 있습니다,,

위의 전체파일을 받으셔서 덮어씌우시면 됩니다;;


덮어씌우실때 꼭 skin.html 파일의 블로그패스 경로를 꼭 확인하여 주시기 바랍니다;;
41 Trackbacks   102 Comments   Tags : nzene_v2:Green, skin, Tatter Tools
스킨이야기 2006/11/28 07:05

Skin Nzene V2 - Round PNG 를 공개합니다

스킨엔진이 만든 두번째 태터 스킨,, 이름하야 Round PNG 버전입니다,,
전작에 어설픔을 모면하려 부단히 노력해봤는데 과연 괜찮을까 심히 걱정됩니다,, ㅡㅂㅡ;;

본문의 크기는 640px 이고, 사이드바의 출력 가능사이즈는 180px 입니다,,

우선 이번 스킨을 이용하실때는 주의하실점이 하나 있는데요,,
먼저 스킨을 다운로드 받으시면 제일먼저 skin.html 파일을 열어서 상단의

<script language=JavaScript>
<!--
blog_path = http://skin.nzene.com/;
//-->
</script>

부분을 찾아 주소가 적힌곳을 자신의 주소로 바꿔주시고 업로드 하셔야 합니다,,

주소를 적는 방법은 "http://자신의 도메인/태터가 설치된 폴더/" 로 적어주시면 됩니다,
만약 자신이 도메인의 루트에 태터를 설치하셨을땐 "http://자신의 도메인/" 이렇게 적어주시면 됩니다,,

보시면 아시겠지만 전체 레이아웃이 PNG 이미지로 둘러져 있습니다,,
개인적으로 이 PNG 파일을 이용한 스킨을 꼭 한번 만들어 보고싶었는데요,, 스킨에 이 PNG 파일로 레이아웃을 만들면 왜 좋은지는,, 배경 이미지를 바꿔 보시면 쉽게 아실 수 있습니다,,

배경이미지를 바꾸는 방법은 간단히 background.jpg 라는 이름과 확장자로 된 이미지를 스킨폴더속의 images 폴더 안에 넣으시기만 하시면 쉽게 바꾸실 수 있습니다,,

그리고 지난 버전과 마찬가지로 Body-ID 기능을 이용한 탭 하일라이트 기능이 들어가 있구여,,
마지막으로 오른쪽의 사이드바 기능을 이용하실 수 있습니다,,

오른쪽의 사이드바는 두 블럭으로 나눠져 있는데 블럭간의 모듈 위치 조절이나, 혹은 위에서 아래로, 아래에서 위의 블럭으로 각각의 모듈들을 조절하실 수 있습니다,,

단, 블럭간의 위치 변경시 기존의 스타일선언은 감안하셔야 합니다,, (좀 무책임한,, ㅡㅂㅡ;;)

위치 조절 방법은 태터 관리자의 스킨-사이드바 메뉴를 이용하시면 드래그 앤 드랍으로 간단히 조절하실 수 있습니다,,

기타 베이스 레이아웃과 몇가지 아이콘등은 plyfly.net 기본 스킨을 이용하였습니다,,

사용상 궁금하신점이나 문의사항은 여기에 댓글 남겨주세요,,
아는것도 별로 없는게 대답도 늦어서 좀 짜증나셔두 기다리시면 언젠가는 찾아서 알려드리겠습니다;; ㅡ0ㅡ;;;

nzene_v2.zip

nzene_v2 스킨입니다;;

nzene_v2_sidebar.zip

nzene_v2 스킨의 사이드바에 사용된 타이틀용 폰트와 psd 파일입니다,,

sidebar_bg.psd

nzene_v2 스킨에 사용된 사이드바의 배경 psd 파일입니다,,




# 추가 안내

1. 개인 계정 전용입니다,, 티스토리를 쓰시는 분들이 많으셔서 그분들도 같이 이용할 수 있으면 좋겠지만, 제가 티스토리 계정이 없어 테스트해볼 방법이 없어 적용방법이나, 적용시 어떤 오류가 발생할지 저도 모릅니다,,
따라서 티스토리에 적용후 오류에 관한 문의를 하셔도 답변해드릴 수 없습니다,,

2. 1.1.X 전용입니다,, 1.0.X 버전에서는 테스트되지 못했습니다만 아마 Body-ID 기능을 사용하지 못해 오류가 생길수도 있으니 만약 이용시에는 참고하시기 바랍니다,,

3. nzene_v2 스킨폴더의 이름을 바꾸시면 안됩니다;;
많은 분들이 skin.html 에 작성하는 blog_path 때문에 레이아웃이 깨진다거나 오류가 발생한다고 하시는데요,,
이 blog_path 를 이용하는 png.js 에서 nzene_v2 라는 폴더이름이 작성되어 IE Hack이 작동하게 되어있습니다,,

만약 nzene_v2 폴더의 이름을 바꾸셨을경우 png.js 파일내의 nzene_v2 이름도 모두 바꿔 주셔야 문제가 없습니다,,(파이어폭스에서는 폴더이름을 바꿔도 상관이 없지만 IE6 버전에선 폴더를 바꿨을경우 레이아웃이 전혀 출력되지 않을 수 있습니다,,)



# 추가 업그레이드 안내

1. 댓글의 비밀글 작성시 말풍선이 쏠리는 현상을 수정
2. 댓글이 많을경우 이미지 로딩을 줄이기 위해 스타일 수정
3. 트랙백의 레이아웃 변경 (본 포스트의 하단에서 확인하실 수 있습니다)
4. 사이드바의 여백 조절(매니테일님 피드백)

위와 더불어 몇가지 자잘한 오류들을 보안하였으니 본 포스트에 올려져있는 스킨이나, 혹은 태터에 올린 스킨을 새로 받아 이미지 포함해서 모두 덮어 쓰시기 바랍니다,,

이용에 불편을 드려 죄송합니다;; (__);



※ 본 스킨은 FF2.0 / IE6 / IE7 에서 테스트 되었습니다;



# 추가 업그레이드 안내 (마지막 업뎃 12월1일)

1. 댓글 말풍선의 아이콘 48x48 사이즈 사용시 풍선이 터지던 문제 해결,,
2. 비밀 댓글 오류 해결
3. 로컬로그 아이콘 추가
4. 사이드바의 마진 보안

위의 자잘한 버그와 오류들이 보완되었습니다;; 따라서 기존에 사용하시던 분들도 새로 받으셔서 덮어쓰시기 바랍니다;;

※ 위의 오류중 비밀댓글에 관한 1.1 버그가 TNF에 올라와 있습니다,, http://dev.tattertools.com/wiki/bugs/1.1
아직 해결이 안된것 같은데 만약 제 스킨을 사용하는데 Illigal Parameters 오류가 발생할 경우 임시적으로 여기를 가셔서 해결하실 수 있습니다,,




40 Trackbacks   67 Comments   Tags : png, skin, Tatter Tools
스킨이야기 2006/11/26 19:04

Skin Nzene V2 - Round PNG

사용자 삽입 이미지


스킨엔진의 두번째, Round-PNG 버전을 만들었습니다,,
대략적인 코딩은 끝났지만 아직 최적화하려면 시간이 조금 더 걸릴꺼 같네요,,

이번 버전에서의 주요 포인트는 알파값의 대명사 PNG 이미지를 이용한 레이아웃 구성에 중점을 두었는데요,,

다들 아시다시피 유독 IE에서만 PNG를 제대로 출력하지 못하는 버그가 있어 MSIE를 많이 사용하는 우리나라에선 이 PNG 이미지 파일을 잘 쓰지 않았었죠,,(혹자는 일부러 IE에서 막아놓은거라는 얘기도 하던데 진실이 무엇이든 모든 브라우저가 지원하는데 유독 IE에서만 안된다니 답답할 노릇이겠죠?)

그렇다고 아예 못쓰는건 아니지만 IE를 위한 코딩을 따로해야 하는 번거로움은 가히 노가다라 할 수 있을지도 모르겠습니다,, ㅜ.ㅡ

다행이 IE7에선 PNG의 알파값을 제대로 지원한다지만,, 정식이 나온지 얼마되지 않은 지금 IE7에 맞춰 디자인한다는건 수많은 IE6 유저들을 무시하는 처사가 아닐까 싶기도 해서,,

IE6 이하 버전에서도 PNG를 쓸수 있도록 만들어주는 이른바 IE Hack이라 불리는 IE 전용 스타일, 혹은 스크립트를 쓰기로 했습니다,,

이미 수많은 IE Hack이 나와있고, 또 알려져 있습니다만, 그중에서 제가 사용한 코딩은 기존에 1x1.gif 을 이용하지도 않고, 또 이미지의 로딩이 완료된후 출력하는 스크립트처럼 깜박임도 없는 CSS만을 이용한 방법인데,,

다만 아직도 이해를 못하고 있는게 경로상의 문제를 해결하지 못했는데, 이상하게 절대경로에서 ../../ 를 쓰지 못한다는 것입니다,,

아니면 전체 절대경로를 써줘야 하는데 이전버전에서 밝혔듯 다양한 서버환경을 가진 태터유저들에게 많든 적든 CSS 내에 PNG 파일의 절대경로를 이 스킨을 쓰려는 유저들이 직접 경로를 일일이 바꿔줘야 한다는건 너무 방만한 제작이 아닐까  하는 생각도 들어 나름 삽질에 또 곡괭이질까지 해서 다행히 스킨을 쓰려는 유저가 간단히 자신의 도메인을 한줄 스킨에 써 넣는걸로 해결을 했습니다만,, 여전히 위의 문제는 풀리지 않는 의문으로 남아있네요,,

어쨋든 이로써 탭 메뉴 하일라이팅 기능을 이용한 첫 태터스킨과 더불어 IE6이하 모든 브라우저에서 스킨 제작자가 원하는 모습 그대로 PNG 파일의 정확한 출력을 하도록한 공개용 스킨을 만들어 봤습니다,,

아직 숨어있는 수많은 버그와 각종 오류들을 잡으려면 또 얼마나 삽질을 해야할지 모르겠지만 한분이라도 이쁘게 써주신다면야 그 고생이 한순간에 날라가지 않을까 싶네요,,

어서어서 버그잡고 오류고쳐 끝내야 할텐데,, 아후,, ㅡㅂㅡ;;
39 Trackbacks   No Comment   Tags : Alpha channel, png, skin, 스킨
스킨이야기 2006/11/23 07:10

Skin-nzene.1 스킨을 나눠드립니다,,

아직 턱없이 내공이 부족해서 완전히 새로 만들기엔 너무 오래걸릴듯 싶어 우선 태터1.1에 포함된 기본 스킨을 이용한 탭 메뉴 하일라이트 기능을 가진 기본 스킨을 공개합니다,,

보시면 아시겠지만 태터에 포함된 Tattertools_skyline_ko 버전을 기본 틀로 작성하였으며,
워드프레스의 레이아웃들을 참고하여 만들었습니다,,

기존의 기본 스킨과 다른점은 태터1.1에 추가된 body-id 기능을 이용하여 상단의 메뉴들 각각의 페이지로 이동했을때 상단메뉴의 배경이 하일라이팅이 되도록 변형한것입니다,,

사용자 삽입 이미지


이왕이면 png 를 이용한 좀더 새로운 디자인을 구성하려했지만 제가 알고있는 Background-image: 로 png를 쓰는 방법이 서버환경이 다양한 지금의 태터 유저분들에게 일일이 맞추기 힘들어 다음 버전에 추가하기로 했습니다;; ㅡㅂㅡ;;

아무쪼록 "음~ 태터도 이런게 되는구나~"라는 정도로 이쁘게 봐주시고,,
혹시라도 궁금한 점 있으시다면 언제든 질문해주시길 바랍니다;;

잘은 모르지만;; 아는건 있는데로 다 꺼내서 알려드리도록 하지요;;^^

사용자 삽입 이미지

nzene_v1.zip


41 Trackbacks   16 Comments