'All'에 해당되는 글 171

  1. 2009.07.28 디자인도 잘하고, 코딩도 잘하고 (3)
  2. 2009.07.27 효율적인 마크업 뼈대만들기 (1)
  3. 2009.07.22 웹의 역사를 저장한다.
  4. 2009.07.22 사이드바 위젯 어떻게 배치하세요? (8)
  5. 2009.07.17 Design Patterns
  6. 2009.07.17 설치형 텍스트큐브의 UI (8)
  7. 2009.06.26 설치형 텍스트큐브
  8. 2009.03.03 Seamless textures (1)
  9. 2009.03.03 35만 무료이미지 (2)
  10. 2009.01.19 무료이미지 사이트 : photl.com (3)
  11. 2008.12.26 구글 이미지 서치 (1)
  12. 2008.11.20 구글 이메일 테마
  13. 2008.10.28 Color scheme generator
  14. 2008.10.27 magnigraph - 사진변환
  15. 2008.10.10 동영상 검색 enswer의 세계로 초대합니다. (19)
  16. 2008.10.06 당신의 블로그는 각종 브라우저에서 어떻게 보여질까요? (2)
  17. 2008.09.23 IETester 새로운 버전 (2)
  18. 2008.09.03 브라우저에 무슨짓을 한거냣! (12)
  19. 2008.08.25 텍스트큐브 스킨 매뉴얼 (4)
  20. 2008.04.23 플라이투 스킨을 예쁘게 보는 방법 - 맑은 고딕과 ClearType (23)
  21. 2008.04.13 본문 영역을 좀더 넓게 쓰려면? (18)
  22. 2008.04.09 플라이투 스킨! 티스토리에서 사용하기 (19)
  23. 2008.04.07 플라이투 스킨 배포합니다 (133)
  24. 2008.03.29 불안한 상상공장 - 공장 설비 점검중 (18)
  25. 2008.03.24 500여개의 포토샵 브러쉬 무료 다운로드 (5)
  26. 2008.03.22 중이 제머리 깎는중
  27. 2008.03.19 메뉴바를 만들어주는 사이트 (2)
  28. 2008.03.06 IE8 관련 포스트 모음 (8)
  29. 2008.02.29 세상의 모든 아이콘 (13)
  30. 2008.02.28 낚임 근절을 위한 네이버의 배려? (6)
Design도 잘하고 markup도 잘 작성하는 사람이 있다면 더 없이 좋겠지만, 단점이 있다.
Design을 하면서 markup생각을 하게 된다. 아무래도 상상의 나래를 펼치는데 제약이 될 수밖에 없다. 웹디자이너도 사람인지라 디자인 할때는 디자인만, 마크업할때는 마크업만 생각할 수가 없다.

디자인하면서 "이런 레이아웃은 마크업 작성할때 까다롭거나 크로스브라우징에서 분명 문제가 생길꺼야" 라는 생각 안해 본사람이 있을까?

이건 그저 정신수양 말고 다른 방법이 없을것 같다.
아니면 내안에 다중이를 키우거나...

최근에 책에서 본건데...
그럴때는 컴퓨터 앞을 떠나서 연필을 들고, 종이에 스케치를 하라고 한다.
그런다고 markup 생각이 없어 질까만은.... 아예 효과가 없을것 같지는 않다. 
TAG markup
홈페이지를 만드는 일이 업이거나 혹은 지망할 경우 기본적인 디자인 실력은 물론 markup skill도 갖춰야 한다. 물론 국내 유수의 웹에이전시나 세분화가 잘 되어 있는 대규모의 업체라면 논외이지만, 우리나라 대부분의 기업에서는 디자인도 잘하고, 코딩도 잘하고, 기왕이면 자바스크립트 베껴쓰는 정도의 능력을 갖추면 금상첨화이고, 프로그래밍에 기본적인 지식까지 있다면 완전 사랑받는 디자이너라고 할 수 있을것 같다. (우리나라에서 웹관련 종사자들은 정말 슈퍼맨이다.)

markup도 visual design 못지 않게 창의적이고 체계적인 사고방식이 필요한것 같다. 오랜시간 블로그 관리자 화면과 블로그 스킨을 만들면서 하나의 markup이 모든 상황을 모두 커버할수 있는건 아니지만, 어느정도 업무의 효율성은 가져올 수 있다.... 라는 당연한 이론을 뼈저리게 깨닫기 까지는 참 오랜이 걸린것 같다.

사실 나도 수년전만 해도 table로 layout을 구성할 때가 있었다. 그러다가 웹표준, 접근성, 웹2.0등을 접했는데... 사람은 변화를 받아들이는데 참 인색한것 같다. 전에는 몇시간안에 끝났던 코딩이 두배, 세배의 시간이 걸리기 시작하고, 브라우저마다 출력을 달리해주는 통에 고생은 또 배가 되면서 무작정 회의적인 생각만 들었었다.

어느정도 코딩에 익숙해지고, Cross browsing을 당연하게 생각하게 되면서부터 생각이 달라지기 시작했다. 어떻게 하면 더 효율적으로 markup을 할 수 있을지 고민하기 시작했는데.... 그러면서 markup하는데 또 엄청난 시간이 들었다. 이렇게도 해보고 저렇게도 해보고... 뭔가 정답을 바랬던것 같다.

그러다가 효율적인 markup에는 정답이 없다며 포기하기 시작하니까 마음도 편해지고, 또 다른 시선이 생기기 시작했다. 그건 그냥 자신이 정답을 만들면 되는것 같다. 나름대로의 rule을 만들어 그 rule대로 일관성있게 작업을 하면 된다.

사설이 너무 길었는데...
자신만의 knowhow를 서로 공유하면 좋을것 같아서 몇가지만 얘기해보려고 한다.

1. 축약하지 말고 가능하면 변수에 모든 의미를 담아라

authorProf(△) → 틀렸다기보다는 별로 좋지 않음.
authorProfile(O)

축약하고나면 나중에 긴가민가 한다. 직관적이지 않아서 본인조차 헛갈리는 경우가 생긴다.

2. rule을 만들었으면 일관성있게 끌고나가는게 중요한것 같다.

1번의 rule에 따르면 두 단어 이상일 경우가 많다. 그럴경우 class name을 만들때 세가지정도의 방법이 있다. 분명 더 많은 rule들이 존재하겠지만, 일반적인것들만 예를 든다면,

하이픈 : content-header(O)
언더라인 : content_header(O)
카멜표기 : contentHeader(O)

작업할때마다 어떤때는 하이픈이 좋아보이고, 어떨때는 언더라인이 좋아보이지만, 사실 좋아보이는 어떤건 없는것 같다. 일단 일관성을 가지는게 중요한것 같다.

3. common한 요소와 unique한 요소를 찾아라.

효율적인 markup의 핵심인것 같다. unique와 common을 적절히 사용하면 css의 코드 수를 확실히 줄일 수 있으며, 유지보수가 쉬워진다.
예를 들어 블로그 사이드바를 만들경우 각 사이드바 요소들마다 unique한 class명을 각각 주고, 모든 사이드바 요소에 common 클래스명을 동일하게 부여하면, 해당 사이드바 요소들을 동일한 디자인으로도 표현이 가능하고, 사이드바 요소중 원하는 요소의 디자인을 달리 할 수도 있다.

<div id="notice" class="widget">공지사항 리스트 </div>
<div id="category" class="widget">카테고리</div>
.
.
.
<div id="recentPost" class="widget">최글 글 </div>
<div id="recentComment" class="widget">최근에 올라온 댓글 </div>
<div id="recentTrackback" class="widget">최근에 받은 트랙백 </div>

widget라는 공통된 클래스명을 사용하여 일괄적으로 style를 적용할 수도 있고, 각각의 unique한 요소로 각각 다른 style를 적용할 수도 있다. 이 부분은 나중에 다시 다뤄볼 기회가 있으면 좋겠다.

4. 너무 많은 case에 대한 상황을 고려하지는 말자.

이건 주의해야할점에 가까운데 당장 생기지도 않을 너무 많은 상황에 대해 고려를 하기 시작하면 markup은 나도 모르는 괴물로 변해간다. 나중에 그 markup을 봤을때 이 레이어는 왜 넣은거지? 하며 아리송해진다. 엄청난 중첩 레이어에 side effect 때문에 결국 재활용은 커녕 markup을 새로 해야할지도 모른다. 당시 상황에 맞는 최적화된 markup은 나중에 재활용하기도 쉽다.


웹의 역사를 저장한다.

Bookmark | 2009.07.22 12:54 | leezche
이미 아는 사람도 많겠지만, remind차원에서,,,
plyfly.net을 검색해 보면 2003년부터 시작해서 작년초까지 archive되어 있다. 아마 티스토리로 잠깐 옮겨 2차 도메인을 쓰면서 기록이 멈춘것 같다.(확실치 않음) 심심풀이로 주요포털들을 검색해보면 초창기의 포털들의 모습을 볼 수 있다. (참고로 plyfly.net을 운영하기 시작한건 2001년부터이다. 10주년이 얼마 안남은것 같다. )


-
-
-
-

아래 이미지는 1998년말 google의 모습니다
User image
 
TAG 기록

이건 그냥 여러 블로그를 다니면서 느낀건데 블로그를 방문하면 꼭 보게되는 영역만 본다는 것이다. 특히 처음 방문하거나, 오랜만에 방문하거나, 아주 띄엄띄엄 방문하는 방문자라고 가정했을때 그 행동패턴이 더 정형화 되어 있는것 같다.

  1. 먼저 첫페이지 글들을 쭈욱 훑어본다.
  2. 카테고리를 본다. 어떤 카테고리가 있는지, 글들은 얼마나 있는지 본다.
  3. 공지사항이 있나 본다. 보통 해당 블로그가 어떤 블로그인지 주인장은 어떤 사람인지에 관심을 가진다.
  4. 태그클라우드에 눈길을 한번 준다.
  5. 링크를 본다.
  6. 카운터도 한번 본다.

대충 이런 순이다.

블로그를 이용하는 사람을 크게 두 부류로 나눠보면...
블로그를 운영하는 사람, 블로그를 방문하는 사람이 있다.
하지만, 블로그 하나를 놓고 봤을때 블로그를 방문하는 방문자의 사용이 훨씬 더 많다.

블로그에는 운영자가 주로 이용하는 영역이 있고, 방문자가 주로 이용하는 영역이 있다. (물론 관리자 화면은 운영자만 볼수 있기 때문에 논외로 한다. 일단 블로그 화면만 보자)

블로그 운영자는 누가 댓글을 달았는지, 누가 방명록에 글을 남겼는지, 누가 트랙백을 보냈는지를 주로보게 되는데 거의 feedback에 관련된 것들이다.

그렇다면 방문자는 주로 무엇을 보게 될까? 물론 블로그를 방문한 목적인 글을 보기 위함이 제일 클것이다. 그렇다면 글 외에는? 나의 경우에는 카테고리, 카운터, 태그클라우드, 공지사항, 최근글, 검색 정도를 들 수 있다. 아마 이건 개인마다 혹은 방문한 블로그의 성격마다, 혹은 블로그를 방문한 빈도수마다 약간의 차이가 있을 수 있을것이다.

그렇다면 스킨을 만들때, 특히 사이드바를 만들때
좀 더 방문자를 배려한다면 방문자를 위한 사이드바 요소들의 순위를 먼저 나열해 보고, 강조해보면 어떨까?

  1. 검색: 일단 부피가 작고, 작은만큼 눈에 잘 안 띌 수 있기 때문에 제일 상단에 위치시켜도 좋을것 같다.
  2. 공지사항: 카테고리가 더 중요 할 수도 있지만, 공지사항의 부피가 작기 때문에 카테고리보다 상위에 위치해도 좋을것 같다. 보통 한 두개, 많아야 두 세개 정도 될듯하다.
  3. 카테고리 : 카테고리는 태그클라우드보다 블로그의 성격을 가장 잘 파악하게 해주는 요소이다. 카테고리가 중요함에도 불구하고 검색과 공지사항 다음에 위치하는 만큼 다른 요소들 보다 더 '강조'해주는것이 좋을 것 같다.
  4. 태그클라우드: 태그클라우드도 어느정도 블로그의 성격을 정의해 주기는 하지만, 가끔 잘못된길로 인도하기도 한다. 약간은 재미적인 요소가 더 크다는 느낌이다.
  5. 최근글: 사실 최근에 쓴글 목록 보다는 그냥 페이지를 넘겨서 훑어 보는 편인데 이건 제목이 내용을 잘 대변해주지 못하고 있다는 내 편견일 수도 있다고 생각이 든다. 다른 사람들은 어떠려나..
  6. 링크: 이건 종종 보는 편이다. 블로그 운영자의 또다른 관심사나 지인관계를 알고 싶은 훔쳐보고 싶은 묘한 심리랄까? 예전에 이웃로그가 이런 역할을 했던것 같은데.. ㅠ ㅠ;; 사실 나는 링크를 최근글 보다 더 상위에 위치시키고 싶다.

이 정도를 상위에 위치시키고, 나머지 운영자를 위한 사이드바 요소를 아래에 위치시켜보는게 어떨까? 물론 정답이란 있을 수 없지만, 블로그를 운영하는 사람이라면 방문자를 위해 단 5분만이라도 고민해 보면 어떨까 싶다.

관련글
- How to Decide How Many Columns are Best for your Blog

Design Patterns

Design note | 2009.07.17 13:19 | leezche

설치형 텍스트큐브의 UI

Skin story | 2009.07.17 13:15 | leezche
설치형 텍스트큐브의 UI는
불편하고, 예쁘지 않다.
기본적으로 grid가 엉망이다.
grid가 잘 맞춰져 있는 UI는 사용자로 하여금 피곤함을 덜어준다.
기본중의 기본이라고 할 수 있다.

css를 조금 손보려고 하였으나, 효율적이지 못했다.
이내 포기했다.
css만으로는 모든 상황을 커버할 수가 없다.

설치형 텍스트큐브는 오픈소스인데
디자이너가 참여하기엔 장벽이 너무 크다.

텍스트큐브의 UI를 개선하려는 디자이너가 단 한명이라도 있다면
지금보다는 편한 UI를 많은 사람들이 접할 수 있을것 같다.

관리자 화면도 블로그 화면처럼 치환자를 이용한 스킨 시스템이라면
그 단 한명의 디자이너가 더 나은 텍스트큐브를 만드는데 도움을 줄 수 있지 않을까?

텍스트큐브는 정말 좋은 블로그 툴 임에도 불구하고,
그 빛을 발하지 못하는 이유중에 하나가 UI인 것 같다.

하지만 지금 상황은 그 누구도 탓할 수가 없다.
사실 감사하다고 절을 해도 모자랄 판이다.

사실 나도 스킨을 만들어 배포하면서
내가 만든 스킨을 이렇게 해달라 저렇게 해 달라는 이야기가 나올때마다.
힘이  빠진다.
아마 시간이 남아돌아 텍스트큐브를 만드는 사람은 없을거다.

다들 텍스트큐브에 대해 생각도 많고, 하고 싶은것도 많을테지만,
그렇게 하지 못하는 이유를 너무 잘 알것 같다.

감사하며 그냥 써야겠다.
스킨이나 열심히 만들어야겠다.. :)

설치형 텍스트큐브

For blog | 2009.06.26 16:37 | leezche
지난 3월 이후로 처음 글을 쓰는 거니까... plyfly.net에서 완전 백만년만에 쓰는 글 같다.

오늘 잠깐 짬을 내서 1.7.8로 업그레이드 했다. 뭐가 바뀐게 있나 이곳저곳을 돌아보다가 플러그인을 몽땅 켜놓고 글쓰기 화면으로 들어왔더니 뭔가 조금 바뀌긴 한것 같다. 아래 아이콘들도 많이 생기고... 저런건 다 플러그인 같긴한데... 어쨌거나... 상당히 오랜시간 방치하다가 들어와보니 조금 새로운 시선들이 생겼다. (사실 새롭진 않다. 예전부터 갖고 있던 생각들인데 새삼 다시 되새겨진달까)

관리자 화면의 UI와 visual 디자인이 조금 더 정리되고 세련되어졌으면 하는 마음도 있고...
(이건 그냥 직업병이다. 좀 더 편하고, 좀 더 예쁜 화면을 바라는... 아무리 완벽해도 내 눈에는 아마 사소한 것들이 눈에 들어올수도 있을것 같다. 그냥 병이다. )

정말 좋은 기능의 수많은 플러그인들이 여전히 친절하지 않다는것도 있고...
(이쪽 업계에 있는 나도 잘 모르겠는데... 다른 사람들은 오죽할까 싶기도 하다. 이건 스크린샷 몇개만 있어도 해결 될것 같은데... 다른 사람들은 전혀 신경 안쓸지도 모르겠다. 그냥 병이다. )

그리고 여전히 미련을 못버리고 있는 RSS페이퍼(이웃로그)가 다시 부활했으면 하는 생각이다.
(지금 내가 애용하고 있는 hanrss 도 있고, 여기 관리 화면에도 Rss로 수집된 글들을 볼수 있지만, 태터툴즈 초창기의 RSS페이퍼 만큼의 감흥은 없는것 같다. 여러 블로그들 돌아다니면서 RSS 페이퍼를 읽는 재미가 참으로 쏠쏠했던것 같다. 거의 이웃로그 폐인이였다고나 할까. 요즘 social이 붐인것 같은데... RSS 페이퍼야 말로 진정한 social의 초기 단계가 아니였던가 싶다. 그 당시 재훈님의 선견지명이 대단했던거다 분명! 근데 그걸 없앴으니... 거기서 조금만 발전해도 지금쯤이면 텍스트큐브가 워드프레스를 능가하는 툴이 되었을 것이다 분명! 암튼 난 그렇게 믿는다 지금도... 사람들은 벌써 그 존재에 대해서 잊었을지도 모르겠다. 이것도 그냥 이 쪽에 일을 너무 오래한탓에 병인것 같다.)

암튼 갑자기 텍스트큐브가 새로워진다. 2006년인가 처음 입사했을때의 초심이 생각나기도 하고, 그때 함께했던 사람들이 하나 둘 떠오르기도 하고... 2009년 지금 내 상황이 급생소해지기도 하고... 갑자기 설치형에 대한 무한 애정이 생겨 뭐라도 기여하고 싶은 마음이 마구 샘솟는다. 하지만 나는 못할꺼다. 2006년 이후보다 딱 여섯배정도 바빠진것 같다.

User image

다들 잘 계신가요오?!~~~

Seamless textures

Bookmark | 2009.03.03 17:12 | leezche

사용자 삽입 이미지

http://seamlesstextures.net/

35만 무료이미지

Bookmark | 2009.03.03 17:11 | leezche

http://www.sxc.hu



자세한 내용은
http://www.designlog.org/2511756
여길 참고

무료이미지 사이트 : photl.com

Bookmark | 2009.01.19 14:26 | leezche

http://photl.com/

방대한 양의 이미지를 무료로 다운로드 받을 수 있는 곳이다.
역시 블로그 스킨의 배경으로 쓸만한 이미지가 많이 있다.
게다가 제법 큰 해상도의 이미지를 다운로드 받을 수 있어 활용도가 높을것 같다.

p.s. 오늘 아침 CK님이 메일로 보내주신 정보! 거저먹는 주인장... ㅋㅋ



 

TAG ck, Free, 사진

구글 이미지 서치

Misc info | 2008.12.26 15:29 | leezche
몇일전에 구글닷컴에 이미지서치 검색결과를 분류해주는 기능이 생겼다.
Line drawings와 Clip art 인데... 정말 착한 기능이 아닐 수 없다.
특히 이미지 작업할때 모델이 필요하거나, 재료가 필요할때 유용하게 쓰일 수 있을것 같다.


google image search

구글 이메일 테마

Misc info | 2008.11.20 11:11 | leezche
아이구글만 테마가 있으란법 있느냐.... 지메일에도 테마를... !!! ^^ 테마쟁이중에 한사람으로 단조로운 지메일에도 테마가 있었으면 좋겠다고 생각했었는데.. 드디어 테마가 생겼습니다. 정말 긱한 테마도 있더군요... 지메일 애용자들은 놀이 삼아 한번 바꿔보세요..

Tea house

Tea house

Desk

Desk

Terminal

Terminal


Color scheme generator

Bookmark | 2008.10.28 17:03 | leezche
서로 잘 어울리는 색상들의 조합을 제공하며, 제공된 색상들의 조합을 바꿔볼수도 있다. 거기에 몇가지 variation을 제공하여 색상톤들을 다양하게 보여주고 있다. 사용된 색상의 색상값을 제공하여 바로 적용하여 사용해 볼 수도 있다.

사용자 삽입 이미지

Generator of color schemes and palettes to create good-looking and well balanced and harmonic web pages.
http://wellstyled.com/tools/colorscheme2/index-en.html
TAG color

magnigraph - 사진변환

Bookmark | 2008.10.27 14:19 | leezche
업로드한 사진을 흑백의 단순화된 이미지로 변환해 준다. 블로그의 프로필 이미지나 스킨을 만들때 사용하면 아주 유용할것 같다. 파란색과, 빨간색으로도 변환이 가능하고, 각 사이즈별로도 변환이 가능하다. 무엇보다 벡터기반의 svg(Scalable Vector Graphics) 파일 포맷으로도 변환된 파일을 다운로드 받을 수 있어 사용성이 무궁무진할것 같다.
* svg파일 포맷은 illustrator에서 편집이 가능하다.

선착순 10분만요
^_________________^;;;


http://browsershots.org/

아는 사람은 이미 알고 있는 웹사이트를 각종 브라우저에 따라 스크린샷을 제공하는 사이트입니다. 결과 화면도 느리고, 요청이 많으면 나중에 시도하라는 메세지도 나옵니다. 그렇기 때문에 개발용으로 사용하기보다는 그냥 자신의 블로그가 다른 OS의 다른 브라우저에서 어떻게 보이는지 재미삼아 해보세요.

IETester 새로운 버전

Web standards/ETC | 2008.09.23 22:40 | leezche
대충 요랬던 IETester가 다음과 같이 버전업 되었네요.
 
사용자 삽입 이미지


탭브라우징이 대세이긴 한가 봅니다. 어쨌거나 정말 편해졌지 뭡니까.
다시 텍큐 만들고 다듬는 작업에 박차를 가해야겠습니다.  ^____________________^

IETester Download : http://www.my-debugbar.com/wiki/IETester/HomePage

브라우저에 무슨짓을 한거냣!

Misc info | 2008.09.03 15:02 | leezche
군더더기없이 목넘김이 좋구나 크롬! 클놈일세!

Chrome

Chrome


한번 써보세요! Download


그러나... 어찌된 일인지 설치형 텍큐에서 글쓰기가 안되는고나.. 알아봐야겠당!
참고로 난 HTML포맷을 기본으로 지정해 놓고 쓰고 있음. HTML에서 TTML로 변경이 제대로 안됨!
  • 덧1 : 방금 알아보니... 이렇다더라. 결국 위지윅 에디터 표현이 안되는거였음! 실망이다
  • 덧2 : 에또... 팝업창 사이즈를 지멋대로 띄운다.
  • 덧3 : 빠르다 했는데 월등하군!
  • 덧4 : 탭 여러개 띄워놓고, 창닫기버튼을 클릭했더니 짤없다. 진짜 닫을 꺼냐고 한번 물어나 봐 주지... 따로 설정해야 하나 싶어서 찾아 봤는데 그런건 안보인다.
  • 덧5(09.05) : 된장... 드림위버 위지윅 화면으로 텍스트 copy&paste가 안된다. 치명적이닷.
  • 덧5(09.05) : 야후 미니펜도 작동을 안하는것 같다. ㅠ ㅠ;; 대략 난감
텍스트큐브의 전신 태터툴즈 시절부터 작성되어져 왔던 스킨 매뉴얼을 텍스트큐브의 최신버전에 맞춰 내용을 업데이트 하였습니다. 텍스트큐브 설치형 스킨제작에 조금이나마 도움이 되어 더욱 더 다양한 텍스트큐브를 볼 수 있었으면 하는 사용자의 한사람으로 노가다좀 했습니다. ^^

User image


User image


설명 및 스크린샷은 플라이투 스킨을 예로 만들어졌습니다.

티스토리 스킨 매뉴얼은 "티스토리 스킨가이드"를 이용하시면 됩니다.
텍스트큐브 버전업에 따라 업데이트된 내용을 제외한 거의 모든 내용이 동일합니다.

플라이투 스킨은 ClearType을 지원하는 맑은고딕체를 기본으로 사용하고 있습니다. 먼저 맑은고딕체(비스타(Vista), MS 오피스 2007의 한글 공식 글꼴이라고 하네요)를 다운로드 받아 C:\Windows\Fonts에 복사해둡니다. 이렇게 설치된 맑은고딕체를 부드럽고 깔끔하게 보려면 ClearType속성을 이용해야 합니다.

ClearType이란 텍스트에 포토샵으로 작업한것과 같은 효과를 주어 텍스트를 좀 더 고급스럽게 보이도록 Anti Aliasing을 적용시켜 주는 기능입니다. 참고로 굴림이나 돋움체는 ClearType을 지원하지 않습니다.

ClearType을 적용하는 방법에 대하여 알아보겠습니다.

  1. 바탕화면에서 마우스 오른쪽 버튼을 클릭하여 "속성"을 선택한 후 "화면 배색"탭으로 이동하여 "효과"버튼을 클릭합니다
    디스플레이 등록정보 - 화면배색
  2. "화면 글꼴의 가장자리를 다음는데 다음 방법 사용"에서 ClearType을 선택합니다.
    효과

참고로 ClearType을 좀 더 정교하게 설정할 수 있는 ClearType Tuner라는 것도 있습니다.

플라이투 스킨은 사이드바 230pixel, 본문영역이 500pixel이고, 여기에 여백등을 고려하면 스킨의 전체 사이즈가 820pixel 입니다. 여기에서 본문 영역을 넓게 쓰고자할때 어떤 부분을 어떻게 수정하면 되는지 알아보도록 하겠습니다.

step 01. style.css 파일을 편집하겠습니다.
  1. "Layout"이라고 주석처리 되어 있는 곳으로 이동하면, container, content, sidebar 에 각각 width속성이 지정 되어 있습니다. 본문 영역을 200pixel 더 넓혀서 700pixel로 쓰고 싶다면, content의 width를 700px로 수정합니다. 이렇게 되면 스킨 전체 사이즈가 늘어 났기 때문에 container도 200pixel더해서 1020pixel로 수정해야 합니다.
  2. "Article Basic Style"라고 주석처리 되어 있는 부분으로 이동하면 article 레이어에도 width가 지정되어 있습니다. 역시 700px로 수정합니다.
    * article의 width부분을 삭제하셔도 무방합니다. 다만, overflow:hidden; 을 content 레이어로 옯겨주시면 됩니다.
  3. "Content Part" 라고 주석처리 되어 있는 부분으로 이동하면, writeForm 레이어에 textarea와 textField라는 클래스명을 가진 input폼의 가로 사이즈를 각각 200pixel 넓혀 주시면 됩니다. (* 방명록과 댓글이 writeForm이라는 동일한 클래스명을 사용하고 있기 때문에 한번만 수정해 주시면 두곳 모두 수정이 됩니다. )
step 02. index.xml 파일을 편집하겠습니다.
가장 아랫부분으로 이동하면 contentWidth를 지정하는 곳이 나옵니다. 이곳을 700으로 수정해 주어야 합니다. 이 부분이 스킨에 직접적인 영향을 미치는 것은 아닙니다. 다만 글을 작성할때 텍스트 입력폼의 사이즈를 이 수치로 반영하게 됩니다. 또한 본문에 이미지를 삽입할때도 이곳의 수치를 참고하여 이미지의 기본 가로 사이즈를 반영하게 됩니다.

요약하자면...

style.css의 Layout 에서
#container { width:820px;} → #container { width:1020px;}
#content { width:500px;} → #content { width:700px; overflow:hidden;}
style.css의 Article Basic Style 에서
.article { width:500px; overflow:hidden;} → .article { }
style.css의 Content Part 에서
#content .writeForm .textField { width:250px;} → #content .writeForm .textField { width:450px;}
#content .writeForm textarea { width:330px;} → #content .writeForm textarea { width:530px;}
index.xml에서
<contentWidth>500</contentWidth> →<contentWidth>700</contentWidth>

텍스트큐브가 진화(?)하면서 티스토리에서 사용하지 않는 치환자들이 많이 생겨 났습니다. 텍스트큐브용으로 만들어진 스킨에서 다음의 치환자들만 제거하면 티스토리에서도 사용할 수 있습니다.

<head> 영역안

메타 데이터 (삭제)
<meta http-equiv="Keywords" content="[##_meta_http_equiv_keywords_##]" />
RSS 활성화 (삭제)
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments" href="[##_comment_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : trackbacks" href="[##_trackback_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments + trackbacks" href="[##_response_rss_url_##]" />
브라우저 타이틀 (수정)
<title>[##_title_##] <s_page_title> :: [##_page_post_title_##]</s_page_title></title>
수정 -->
<title>[##_title_##] :: [##_page_title_##]</title>

menu 영역

표지 (삭제)
<li id="menuCover"><a href="[##_blog_link_##]cover">Cover</a></li>

content 영역

표지 출력 부분 (삭제)
<s_cover> ... </s_cover>
검색결과 트랙백 리스트 (삭제)
<s_tblist> ... </s_tblist>
키워드 설명 출력 부분 (삭제)
<s_keylog_rep> ... </s_keylog_rep>
에러 페이지 출력 (삭제)
<s_page_error> ... </s_page_error>
방명록 - 오픈 아이디 사용 부분 (삭제)
<s_guest_input_form_openid_only> ... </s_guest_input_form_openid_only>
댓글 - 오픈 아이디 사용 부분 (삭제)
<s_rp_input_form_openid_only> ... </s_rp_input_form_openid_only>

sidebar 영역

저자 출력 부분 (삭제)
<s_sidebar_element><!-- 저자 모듈 --> <s_author_rep> ... </s_author_rep></s_sidebar_element>

footer 영역

표지 메뉴 부분 (삭제)
<a href="[##_blog_link_##]cover">Cover</a>
카피라잇 부분 (수정)
<a href="[##_blog_link_##]"> [##_blogger_##]</a>’s Blog is powered by
<a href="http://www.textcube.org" onclick="window.open(this.href); return false">[##_textcube_name_##] [##_textcube_version_##]</a>
수정 -->
<a href="[##_blog_link_##]"> [##_blogger_##]</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daum</a>

수정이 힘드신 분들은 아래 파일을 다운로드 받아 교체해 주시면 되겠습니다.

잘못된 부분 있으면 신고 바랍니다. 신고는 아래 댓글로 부탁드립니다.

플라이투

플라이투

드디어! 드디어! 배포합니다.
너무 기다리게 한 것 같아 죄송합니다. ㅜ ㅜ;;
틈틈히 스킨 파일들 들여다봤는데... 볼때마다 걸리는것들이 있어서 매일 조금씩 소스를 수정했습니다. 나름대로 신중에 신중을 기하느라 그런것이니 너그럽게 이해해 주세요. ^^

"플라이투" 스킨은 IE7, IE6, FF2, FF3, Opera, Sapari 에서 테스트를 마쳤으며, 플러그인이나, 포스트 본문으로 인한 문제는 제외하고, 스킨 자체의 w3c validator를 통과하였습니다. (버뜨... 문제는 항상 생길 수 있다는거죠! 문제 생기면 신고 바랍니다. 바로 수정해서 업데이트 하겠습니다. _ _ ;; )

앞으로 이 스킨을 가지고 "텍스트큐브 스킨 만들기 강좌"를 진행해 해보려고 합니다.  skin.html 파일을 되도록이면 걷들지 않고, style.css 파일 위주로 진행하겠습니다.  skin.html 파일은 개선점이 나올때마다 그때그때 소폭 수정이 있을 수도 있겠습니다.

디자이너분들중 이제 막 웹표준을 접하는 분들이나, 관련 지식이 전혀 없는 분들도 따라올 수 있도록 진행해 보겠습니다. 제 능력이 어디까지인지는 모르겠으나 열심히 해 볼께요.. ^^;;

이 스킨은 "텍스트큐브 스킨 블로그"에도 배포되었습니다.



현재 이 스킨을 사용중인 곳을 아래 댓글이나 트랙백으로 알려주세요. 저에겐 힘이 됩니다. ^^;; 그리고 무엇보다 강좌를 진행하면서 스킨의 변화된 모습을 여러사람들과 공유해 보아요.

덧붙임... 04.17
검색폼에서 오류나는 문제 해결하였습니다. 제가 바보같은 실수를 했더군요. _ _;;
skin.html 파일의 <s_search></s_search>블럭안의 텍스트필드의 onkeypress 값으로 치환자가 들어가 있는데 언더바를 누락시키는 실수를.. _ _ ;;;;
[##search_onclick_submit##] --> [##_search_onclick_submit_##] 이렇게 수정해 주시면 됩니다. 스킨 다운로드 파일도 패치해 두었습니다. 수정이 어려우신분들은 다시 다운로드 받아 적용시켜 주세요.
이러저러한 이유로  plyfly.net을 티스토리에서 설치형으로 옮겼습니다. 하지만 단 몇시간만에 트래픽 초과에 걸리더군요. 비용을 지불하고, 트래픽 초기화를 하였지만, 3시간만에 또 트래픽 초과! 순수한 방문자때문이라기 보다는 봇들의 엄청난 공격때문인듯 싶습니다. _ _;; 여러가지 조치를 해 보았지만, 소용이 없었습니다.

티스토리에서 텍스트큐브로...

사실  plyfly.net을 설치형으로 옮긴 주된 이유는 세가지 정도로 들 수 있습니다.
티스토리는 스킨 편집이 매우 번거롭습니다. 설치형으로 옮겨 자유롭게 스킨을 편집하기 위함이 하나의 이유였고, 두번째는 업무나 개인적으로 필요한 레퍼런스들을  html로 정리하여 필요할때마다 본다거나, 포트폴리오를 정리해 놓기 위해서였습니다.  
그리고 세번째로는 회사 개발서버는 외부에서 접근이 안되기때문에... 회사에서 작업중인 스킨을 집에서 본다거나 w3c validator를 돌릴수가 없습니다. 그래서 외부에서 접근가능한 공간이 필요했더랬죠.

그런데 세번째 이유에 대해 TNC의 일본인 개발자 겐도는 말했습니다.
"외부에서 접근가능한 지하기지를 만들어 줄수 있다. 나도 그렇게 쓰고 있다" ㅜ ㅜ;;
그리고 validator는 파이어폭스에서 돌리면 된다.(사실 이건 알고 있었는데... 생각을 못했습니다. 임신하면 건망증이 심해진다더니... 도를 넘어선듯 _ _;;;)
사실 업무에 필요한건데 안되는게 어디에 있겠습니까... 것두 TNC에서... ^^;;

암튼 삽질의 몇일을 보냈습니다. 결국 기존보다 10배 이상의 비용을 지불하고 월등히 좋은 사양의 웹 호스팅 서비스로 변경하였습니다. cafe24 호스팅을 쓰고 있는데 몇번의 혼선을 겪었습니다. (모르고 있었다면 금전적 손해를 볼뻔했다는.. _ _;;)

앞으로 "상상공장 스킨공작소"는...

상상공장이 어느정도 안정되면, 지금 보고 계신 스킨을 배포할 예정입니다. 스킨 자체의 유효성 검사를 통과(컨텐츠 영역의 내용이나 플러그인으로 인해 validator를 통과하지 못하는 경우도 종종 발생합니다)하였고, 나름대로 html코드를 최적화하였습니다. 디자인적인 요소는 거의 없습니다. 배포이후에 스킨을 수정하는 것(배경 이미지를 바꾼다거나, 사이드바의 위치를 바꾼다거나, 로고를 만들어 붙인다거나... 등등)에 대해 하나하나 포스팅을 해나갈 예정입니다. 그리고 텍스트큐브 1.6용으로 업그레이드된 스킨 매뉴얼도 업데이트 할 예정입니다. (예정이 많군요 ^^;;)

일단 상상공장을 다시 활기차게 가동시키기 위하여 여러가지를 계획중입니다.
계획하다보니까 제가 잘 할 수 있는것이 역시나 "스킨"이더군요.. ^^;;
생각했던대로 공장이 잘 굴러가줬으면 좋겠습니다.
제가 부지런해져야겠지요.. ^^
아자아자!!
PSBrushes라는 곳인데 포토샵 브러쉬를 무료로 다운로드 받을 수 있는 곳입니다. 
무려 500여개가 넘는 포토샵 브러쉬가 분류별로 잘 정리되어 바쁜 디자이너들의 다운로드를 기다리고 있군요.

종이의 구겨진 느낌을 표현하고 싶을때

종이의 구겨진 느낌을 표현하고 싶을때

노트를 컨셉으로 잡았을때 유용할듯

노트를 컨셉으로 잡았을때 유용할듯

요런 패턴을 이용해서 블로그의 header를 꾸미면 좋을듯

요런 패턴을 이용해서 블로그의 header를 꾸미면 좋을듯

요건 정말 쓸모가 많을듯 한데요.. 배경에써두 좋고, 헤더에 써두 좋구..

요건 정말 쓸모가 많을듯 한데요.. 배경에써두 좋고, 헤더에 써두 좋구..

연필로 그린듯한 이미지

연필로 그린듯한 이미지

프레임에 적당할듯

프레임에 적당할듯

이건 그냥 다양하게...

이건 그냥 다양하게...

중이 제머리 깎는중

Bla~ Bla~ | 2008.03.22 00:57 | leezche
얼마전에 "IE8 관련 포스트 모음"이라는 제목으로 포스팅을 했었는데 "알게뭐야님의 댓글"이 마음에 걸려 제 블로그도 조심스럽게 웹표준화 작업을 진행하고 있습니다. (108개는 조금 심하다 싶군요.) 먼저 html 구조를 다시 만들었습니다. 디자인은 차차 입히도록 하지요.

덧.
티스토리가 뭔가 내부적인 변화가 있었는지 문제가 좀 있는듯 합니다. (사실 티스토리의 문제인지 잘 모르겠음. )
링크를 걸면 링크를 걸려고 블럭을 지정해 놓았던 텍스트가 날아갑니다.
그리고 방문자 수도 조금 이상합니다. 자정을 조금 넘은 이시간 리퍼러에는 3곳이 찍혔는데...
방문자수는 무려 381명입니다.
(지금 파폭에서 글을 쓰고 있는데... 이미지 삽입도 안되는군요. IE로 옮겨서 테스트 해봐야겠습니다. )
암튼 뭔가 좀 구린 냄새가 난다.

암튼 뭔가 좀 구린 냄새가 난다.

(IE7에서는 이미지 삽입이 잘 되는군요)
암튼 로봇 방문횟수를 제외한 이후인데 갑자기 리퍼러가 찍히지 않는 방문자가 늘었다는것이 미스테리 합니다.

암튼 "내블로그 웹접근성 높이기" 꾸준히 진행해 보겠습니다.
더불어 기초부터 다지는 의미에서 웹표준 이야기라는 카테고리에 XHTML과 CSS 기초부터 노하우까지 하나하나 포스팅해나갈 생각입니다. 단순히 공부하는 차원이라 부족한 점이 많지만, 그래도 일단 시작합니다.

메뉴바를 만들어주는 사이트

Bookmark | 2008.03.19 11:00 | leezche
http://www.izzymenu.com/
별개 다 있다. 메뉴바를 만들어주는 사이트. 물론 무료
자신이 원하는 대로 색상을 지정할 수 있고, 마우스 오버기능 및 메뉴명을 바꿀 수 있습니다
원하는 모양이 만들어지면 다운로드를 받아 html과 css를 응용하여 사용이 가능합니다.

사용자 삽입 이미지

IE8 관련 포스트 모음

Bla~ Bla~ | 2008.03.06 20:20 | leezche

오늘 하루 IE8때문에 온라인이 후끈합니다. 저도 궁금한 마음에 설치를 해 보았습니다. 지금 진행중인 프로젝트가 많이 깨지네요. 눈물이 찔끔 납니다. ㅜ ㅜ;; 아직 베타라지만, 아래 글들을 읽으면서도 살짝 걱정스런 마음이 앞섭니다.

아까 잠시 문서 유효성 검사할일이 있어서 w3c에 들렀는데....
타이틀바 부분에 텍스트가 겹치네요... 무척이나 사소한 거긴 하지만, 만약 겹치는 텍스트가 중요한 정보라면, 문제가 되겠지요.

사용자 삽입 이미지
TAG IE8

세상의 모든 아이콘

Bookmark | 2008.02.29 00:25 | leezche

사실 세상의 모든 아이콘까지는 아니지만, 픽셀 아이콘, 3D 아이콘, 16pixel 투명 아이콘, vista 아이콘, mac 아이콘등 왠만큼 필요한 아이콘은 모두 구할 수 있습니다. 이곳에서 제공하는 링크만 타고 들어가도 수많은 아이콘을 접할 수 있습니다. 꼬리에 꼬리를 무는 링크랄까요. 게다가 무료입니다. 개인적으로 사용하는데는 전~~혀 문제가 없는 아이콘 들이니 블로그 꾸미는데 도움이 되었으면 합니다.

사실 이런 가공되지 않은 정보는 크게 도움이 되지 않을 수도 있습니다. 퀄리티가 좋은 아이콘도 있고, 그렇지 않은 아이콘들이 방대한 양으로 함께 섞여 있으니 말입니다.
일단은 여기서 만족 하시고, 언제 아이콘 특집 한번 해보려고 합니다.^^

요즘 진행하는 프로젝트 때문에 벤치마킹도 하고, 아이디어도 얻을겸 해외사이트 서핑중인데 정보들이 무궁무진 하네요.. ^^
하루에도 수십번씩 검색을 위해 구글과 네이버를 들락날락합니다. 먼저 네이버 검색을 이용하고, 검색결과가 마음에 들지 않을 경우 구글 검색을 이용합니다. 그런데 문제는 우리나라 대다수의 사람이 첫번째 검색 사이트로 이용하고 있는 네이버 첫화면에 있다는 거지요. 네이버 뿐만이 아니라 대부분의 포털이 그럴것입니다. 낚임을 당한다는 것입니다. 심지어는 검색을 하러 들어갔다가 순간 내가 뭐하러 왔는지 까먹고, 정신나간 사람 마냥 네이버의 이곳저곳을 방황하고 있고, 정신차리고 나면 이미 시간을 도둑맞은 후입니다.

오로지 검색이 필요하다면 구글 첫화면과 같은 네이버의 SE 검색을 이용해 보는것도 나쁘지 않을것 같습니다.

검색결과 또한 제목 위주의 좀 더 심플한 화면을 제공합니다. 광고 영역 또한 스폰서 링크만 제공되고 있습니다. 사실 스폰서 링크도 안나와줬으면 하는 바램이 있지만... - -;;

해외에서 한글/영문을 입력할 수 있도록 한/영 입력기도 제공하고 있습니다.