스킨의 영역과 위젯, 템플릿. 그리고 레이아웃 by lark

안녕하세요. 운영자 lark 입니다.
네비바 없이는 살 수 없다? 공지 이후로 스킨 2.0 이야기를 들려드리기 쉽지 않았습니다. 오랜만에 다시 찾아왔네요. 오늘은 스킨의 구조에 대한 개념적인 내용을 좀 알려드리려고요. 관심이 없는 분들께는 조금 어려운 얘기일 수 있는데, 스킨을 직접 제작하려는 분들을 위해 상세하게 설명드릴께요.

이글루스 스킨은 크게 4개의 영역(Area)으로 구분합니다. 가장 기본적인 스킨 레이아웃인 2단 스킨으로 설명드리겠습니다.

1. 영역 (Area)

왼쪽의 이미지를 보시면 이해하기 쉬우실텐데요, 각 영역에 대해 간단하게 설명드릴께요.

Header : 이글루 제목과 URL이 표시되는 영역입니다. 1.0 스킨과 달리 2.0 스킨에는 Top Menu 영역을 추가하여 메뉴들을 나열할 수 있습니다. Header 영역은 필수 항목 외에 본인이 원하시는 내용을 html 형식으로 추가하실 수 있습니다.

Content : 포스트, 덧글, 와이드위젯, 페이징이 표시되는 영역입니다. 이 중 와이드위젯은 선택 가능합니다.

Sidebar : 사이드바에는 최근덧글, 라이프로그 및 위자드팩토리, 다음 위젯뱅크 등에서 제공하는 외부 위젯을 추가할 수 있는 영역입니다. 그리고 스킨에디터에서 위젯의 위치를 마우스로 끌어서 이동할 수 있는 영역이기도 하죠.

Footer : Copyright 정보와 스킨 제작 정보, 그리고 RSS 정보가 포함되어 있습니다. Header와 마찬가지로 본인이 원하는 내용을 html 형식으로 추가하실 수 있습니다.

2. 위젯 (Widget)

위젯이라는 이름은 인터넷 상에서 다양하게 사용됩니다. 이글루스 스킨에서의 위젯은 영역(Area) 내에 들어가는 모듈을 말합니다. 왼쪽 그림처럼 Content 영역 내에는 와이드위젯(WideWidget), 포스트(Post), 포스트 덧글(Post Comment) 위젯들이 포함되어 있습니다. 이 외의 위젯들은 모두 사이드바에 포함되어 있고요.

사이드바가 3개 존재하는 스킨도 있고, 최대 7개를 가지고 있는 스킨도 존재합니다. 사이드바의 개수는 스킨마다 다르며 구분을 위하여 숫자가 붙습니다. 새스킨 만드실 때 사이드바의 위치와 개수에 따라 본인이 원하는 형태의 레이아웃을 잘 선택해야 합니다. 위젯을 어떻게 배치할지는 사이드바의 개수와 위치에 따라 결정되기 때문이죠.


위의 썸네일처럼 포스트 위젯의 위/아래에 사이드바를 배치할 수도 있는데, 구글 애드센스나 알라딘 TTB2와 같은 위젯을 넣을 때 유용합니다. 레이아웃 종류에 대한 자세한 설명은 스킨 2.0 완전정복의 '새 스킨 만들기 - 레이아웃' 을 참고하시기 바랍니다.


3. 템플릿

템플릿은 위젯 스타일의 다양성을 말합니다. 위젯은 기본적인 html 구조를 가지고 있고 css 편집을 통해 다양한 스타일을 구현할 수 있습니다. 기본적으로 제공하는 스타일(템플릿)은 "스킨에디터 - 템플릿변경" 에서 제공하고 있습니다만, 각 위젯의 html 구조만 알 수 있으면 css를 통해 다양한 템플릿을 제작하실 수 있습니다.

현재는 위젯의 html 구조를 확인하기 어려워 실제로 스킨 제작 시에 위젯의 다양한 스타일을 구현하기 어렵습니다. 하지만 추후 위젯 템플릿 제작 관련한 기능을 추가할 예정이니 조금만 기다려 주시기 바랍니다.


4. 레이아웃

앞서도 잠시 언급드렸지만, 스킨 내의 영역들이 어떻게 배치되어 있는지, 사이드바의 개수가 몇 개인지에 따라 다양한 레이아웃이 존재합니다. 레이아웃 선택 새로운 스킨을 만들때 선택이 가능하며 "스킨에디터 - 새스킨만들기" 에서 다양한 레이아웃 중 하나를 고르실 수 있습니다.
스킨에디터에서는 하단 사이드바가 없는 레이아웃구글 애드센스, 알라딘 TTB2와 같은 블로그 광고를 삽입할 수 있는 레이아웃을 다수 추가하여 현재 47개의 레이아웃을 제공하고 있습니다.


위의 내용을 간단하게 요약하자면 이글루스 스킨은 4개의 영역(Area)으로 쪼개져 있고, 각 영역은 위젯(Widget)을 품고 있으며 각 위젯의 다양한 스타일을 템플릿이라고 합니다. 그리고 다른 영역과는 달리 사이드바는 한 스킨에 여러 개를 포함할 수 있는데, 사이드바의 개수와 위치에 따라 다양한 레이아웃이 만들어 집니다.

오늘은 좀 어려운 스킨 구조의 개념들을 설명드렸습니다. 회원님들이 스킨 제작을 하시려면 개념적인 얘기보다는 실제 도움말이 필요하실 거예요. 스킨 2.0 도움말 이글루인 "스킨 2.0 완전정복" 은 계속 업데이트 되고 있으니 도움말은 이 곳을 참고하시기 바랍니다.


덧글

  • 올비 2009/08/10 15:08 #

    좋은 글이네요. 1번의 내용은 스킨 2.0 완전정복에도 넣어주심 좋을 듯 한데요.
    직접 제작하는 사람들에게 아주 유용한 내용이고 하니까요 ^^
  • 리셋⁴ 2009/08/10 19:36 #

    소스 한번 훑어보면 알 기본중의 기본 아닌가요 이건...;

    뭐 이건 개인적인 감상입니다만, 좀 더 실질적인 도움을 주는 내용이였다면 좋지 않았을까...하는 생각이 들어서 아쉽습니다. 무엇보다 이글루 전용 명령어의 공개는 언제쯤 하실지 궁금하네요.

    이메일로 태그가 레벨 4,5는 적용되지 않는 오작동에 대해 제보하면서, 레벨당 적용되는 포스팅 수를 제어하는 명령어에 대한 문의 또한 요청드렸었는데, 지적한 부분은 잠수함 패치로 수정하셨습니다만 정작 제가 물어보았던 부분에 대해서는 답장에서 일언반구도 없으시더군요 -_-
  • ydhoney 2009/08/11 18:15 #

    아니 그러니까 믹시업 위젯을 포스트 영역 내부에 꾸준히 잘 넣고싶은데 어쩌냐능?
  • 천체관측 2009/08/11 21:26 #

    아직까진 어렵게 느껴집니다
  • 2009/08/11 21:53 # 비공개

    비공개 덧글입니다.
  • 아이리스 2009/08/12 14:05 #

    사이드바의 프로필 이미지 크기가 css가 아닌 html 소스에 지정되어 있어서 자유롭게 변경하는데 무리가 따르더군요. 사용하기 편리하면서도 자유롭게 편집 가능하게 개선해주시기 바랍니다...
  • 심플리스트 2009/09/13 00:24 #

    스킨 제작하기를 선택해서 전문가용으로 들어가서 css 를 다 삭제했는데도
    덧글과 트랙백 관련 부분, 페이징 및 기타 등등 서식이 강제로 지정되어 있는 곳이 많습니다.
    네이버처럼 하는 것도 좋겠지만...
    서식을 그냥 내 맘대로 바꿀 수 있게 내버려 두셨으면 좋겠습니다.
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


2016 대표이글루