'스킨'에 해당되는 글 5건

  1. 2010/08/26 CSS 정리중인데 CSS 에서 변수를 사용해서 정리하려니 무척이나 복잡하군요.
  2. 2008/04/09 봄맞이 스킨 변경
  3. 2008/02/01 Forum Beta : 스킨 디자인할 때 UI 관련해서 고민해 봅시다
  4. 2007/12/05 Mac Blog 의 제일 상단에 Model Aid 메뉴를 넣어보자 #2
  5. 2007/12/04 Mac Blog 의 제일 상단에 Model Aid 메뉴를 넣어보자 (7)

CSS 정리중인데 CSS 에서 변수를 사용해서 정리하려니 무척이나 복잡하군요.

2010/08/26 21:32

Mac CEO ModelAid 고민 , , , View Comments

모든 페이지가 같은 코드 진행 방식으로 구성되어 있는 사이트 특성상 몇가지 색상값만 바꾸면 각 메뉴별로 색상을 달리할 수 있는데 - 이전부터 그랬었죠 - 나중에라도 색상을 교체하기 쉽도록 이것들을 변수화해서 사용할 수 없을까를 고민만 하다가 CSS 에서는 변수를 지원하지 않는다는 것을 알고 포기했었더랍니다.

그러던 중 몇 가지 수정해야 할 것이 있어 KimsQ 소스를 수정하던 중 CSS 안에서 변수를 사용하고 있는 것을 확인하게 되었습니다.

그렇다면 이전에 체크했던 시점 이후로 뭔가 개발된 것인가 하고 한참을 뒤적거리고 이런저런 테스트를 진행한 결과 그 방법을 알게 되었습니다.

아직은 스킨 개념으로 구조화시킨 것이 아니라 우선은 이전에 있던 CSS 파일을 변수를 포함한 CSS 형태로 수정하는 중인지라 복잡하기 이를데 없지만 일단은 수정해 놓고 다시 정리하면서 스킨화시켜야 겠습니다.

이 복잡한 일을 하는 이유는 나중에 모바일이나 인쇄등 다양한 환경에서도 사이트가 제대로 보일 수 있도록 만들 필요가 있는데 이때 별도의 CSS 를 치수 계산해 가며 새로 작성하기는 번거로우니 몇가지 특정 변수들을 이용해서 만들어 보겠다는 아주 아주 장기적인 계획때문입니다.

일단은 작업을 마저 진행해보고 중간중간에 브라우저 테스트도 거치면서 완성되고 감이 잡히면 새로운 포스팅으로 요령에 대해서 정리해 보도록 하겠습니다.

사용자 삽입 이미지

2010/08/26 21:32 2010/08/26 21:32

댓글0 Comments (+add yours?)

트랙백1 Tracbacks (+view to the desc.)

봄맞이 스킨 변경

2008/04/09 15:50

Mac CEO ModelAid 고민 , , , , , View Comments

드디어 봄이 왔군요.

시간이 지날수록 날이 따뜻해지는 것이 어딘가 김밥이라도 싸서 여행이라도 가야 마땅할 것만 같은 그런 날씨가 계속되는군요.

음...

최근에 사용하고 있는 데스크탑 배경화면 유틸리티 (http://www.desktoptopia.com) 에서 순간적으로 흘러나온 이 이미지가 제대로 봄 냄새까지 풍겨주는군요.

외국의 Ari Zanuto 라는 작가가 만든 그림인데 (사진이라 하기에는 너무나 티없이 맑은 것이 아무래도 자연은 아닌 것 같다는 느낌이로군요) 어쨌거나 봄내음 물씬입니다.

지금 살짝 비가 내려주고 있는데 오래간만에 맞는 주중 휴일을 즐겁게 마무리해 주셔야겠습니다.

모두들 즐거운 봄입니다.

참... 저도 봄맞이 기념으로 스킨을 바꿨더랍니다.


사용자 삽입 이미지

2008/04/09 15:50 2008/04/09 15:50

댓글0 Comments (+add yours?)

트랙백0 Tracbacks (+view to the desc.)

Forum Beta : 스킨 디자인할 때 UI 관련해서 고민해 봅시다

2008/02/01 21:25

Mac CEO ModelAid 고민/Test Over , , , , , , , View Comments

Model Aid Community Forum 엔진 테스트


구분 : 스킨 디자인시 참고


테스트 환경 :
 - MacOS X (Loepard 10.5.1) / Safari 3.04
 - MacOS X (Loepard 10.5.1) / Firefox 3.0b2
 - Windows XP / IE6 (VMware Virtual Client 환경)
 - Windows XP / IE7

내용 :

기본 스킨 중에서 RSS, 로그인, 회원 가입 부분은 게시판 부분만이 아니라 전체 디자인 속에 녹아 들어가는 것이 좋을 듯 싶군요.

만약 게시판 설정 내용중에 헤더나 푸터의 내용을 RSS 아이콘 아랫쪽에 있는 검은색 바~ 쪽으로 이동시킬 수 있다면 모델에이드처럼 복잡스러운 (플래쉬를 이용한 UI 구성) 디자인에 녹아들어가지 않아도 되는 경우라면 매우 쉽게 분리시킬 수 있겠군요. (마치 포탈에서 제공하는 공통 메뉴같은 분위기)

그리고 버튼에 대한 부분도 스킨 작업중에 조금은 정리가 되리라 생각되지만 현재 글 내용 바로 아래에 있는 메뉴들은 빠른 편의성을 제공하는 부분과 현재 보고 있는 글과 관련된 내용으로 크게 나눌 수 있는데 글 쓰기 버튼은 그런 특성을 기준으로 놓고 보면 조금은 무관한 위치에 와 있는 듯 싶습니다.

오히려 코멘트 까지 마무리되고 그 아래에 글 쓰기 버튼이 나오는게 맞지 않을까 싶습니다만 그러다 보면 글쓰기 버튼만 홀로 아리랑을 해야 하는 수도 있으므로 편의성 버튼과 글쓰기 버튼을 묶어서 아래로 내리는 디자인은 어떨까 싶습니다.

나중에 모델에이드에 맞춰 스킨을 재조정할 때 고민해 보도록 합시다.

재현성 :

글쓴이로 로그인했을 때 보여지는 환경

관련 스크린 샷 :

사용자 삽입 이미지


p.s. 이 포스팅은 Model Aid Forum 재건을 위한 게시판 테스트 과정에서 체크하고 있는 기술적 내용에 대한 포스팅입니다. 버그를 비롯한 대부분의 개선 사항이 해소된 후에 공개적인 테스트 과정과 설치를 시작할 예정입니다.

2008/02/01 21:25 2008/02/01 21:25

댓글0 Comments (+add yours?)

트랙백0 Tracbacks (+view to the desc.)

Mac Blog 의 제일 상단에 Model Aid 메뉴를 넣어보자 #2

2007/12/05 09:05

Mac CEO ModelAid 고민 , , , , View Comments

어제의 테스트 결과 <html> 태그보다 echo 구문이 먼저 나오는 이상한 점을 발견했었다.

역시 뭔가 이상한 것이지만 그래도 화면이 잘 나오길래 아무 생각하지 않고 있었는데 럴수럴수 이럴수가...

Safari 에서는 그런 악독한 코드도 제대로 뿌려주는데 IE 에서는 영 의도하지 않은대로 나온다.

사용자 삽입 이미지
<Safari 화면>

사용자 삽입 이미지
<IE 화면>

크게 다른 두가지는 블로그 제목 아래에 Home / Location / Tagcloud / Keyword / Guestbook 등의 메뉴가 표현되지 않는다는 것과 가운데 정렬로 구성되어 있는 것이 좌측 정렬로 바뀌어 버린다는 것이다.

음...
역시 브라우저 호환성을 맞추는 일은 복잡스러운 일인 것이다.

문제는 다시 원점부터 출발해야 할 것 같다.

이 문장을 제 위치에 넣을만한 후보로 <html> 태그가 있는 파일을 검색해 보니...
lib/view/view.php
lib/view/pages.php
lib/view/html.php
의 3가지로 압축이 되는군요.

그 와중에 스킨에 따라 레이아웃이 뒤틀려버리는 경우도 있으므로 오히려 더 큰 문제가 발생하는 분위기인지라 상단의 메뉴는 해결 방법을 찾을때까지 포기 (ㅠㅠ) 하도록 하겠습니다.
2007/12/05 09:05 2007/12/05 09:05

댓글0 Comments (+add yours?)

트랙백0 Tracbacks (+view to the desc.)

Mac Blog 의 제일 상단에 Model Aid 메뉴를 넣어보자

2007/12/04 10:09

Mac CEO ModelAid 고민 , , , , View Comments

Mac Blog 의 제일 상단에 Model Aid 메뉴를 넣어보자.
이 간단한 질문이 요 몇일간 텍스트큐브를 사용하면서 한쪽 머리 구석을 떠나지 않던 것이었다.

고민의 이유는 이렇다.

  1. 블로그 이용자들이 스킨을 자유롭게 선택해서 사용할 수 있어야 한다.
  2. 블로그로 링크될 때 새 창을 띄우는 것이 아니라 현재 창에서 바로 보일 수 있어야 한다.
  3. 선택된 개별 스킨상에서도 Model Aid 로의 복귀가 쉬워야 한다.
  4. 프레임은 사용하지 않겠다.
  5. 안타깝지만 텍스트큐브 플러그인을 개발할 능력은 안된다. ㅠㅠ
이런 이유로 고민을 시작하게 되었다.

요약하자면 조금은 운영자의 욕심이겠지만 블로그 이용에 불편을 주지 않으면서도 Model Aid 라고 하는 원래의 흐름을 잃어버리지는 말자는 것이다. 이 부분은 네이버나 다음에서도 그렇게 하는 것이므로 한편으로는 당연한 거라고 우겨도 될 것이다. ㅡ,ㅡ;;;

여하튼... 스킨을 수정해서 구현할 수도 있겠지만 이용자들이 다운로드 받은 스킨을 매번 확인하고 스킨을 수정한다는 것은 나에게는 사실상 불가능한 일이다.

시간도 없는데 어느 세월에 그걸 모두 확인할 것이며, 언제 모든걸 수정하겠느냐 말이다.

그래서 텍스트큐브 질문답변 게시판 에도 문의를 했지만 내가 할 수 있는 형태의 답변은 아직 올라오지 않았다.

그러던 중 inureyes 님의 [1.5] 개별 포스트에서 페이징을 보지 않기 라는 포스팅에서 힌트를 얻게 되었다.

이 포스팅은 포스팅 페이지 아래쪽에 있는 페이지 번호를 보지 않게 하는 것이었는데 내용에서 스킨과 무관한 텍스트큐브의 Footer 에 해당하는 파일 이름을 접하게 된 것이다.

그렇다면 Header 에 속하는 것도 있을 것이고, 이 Header 를 손본다면 결국 스킨과 무관하게 링크를 구현할 수 있을 것이라는 부분까지 생각이 확대되었다. 

옳커니~
FTP 에 접속...
파일을 찾았다.
[텍스트큐브폴더]/lib/piece/blog/begin.php 이 녀석이로구나.
간단하게 테스트를 했더니 바로 성공이다.
꺄울... 난 천재~ ^^v
현재는 이 녀석을 열고 파일의 제일 앞쪽에...

echo("<div align='center' style='font-size:7pt; color: white; background-color: black;'>
<a href='http://www.modelaid.com'>Model Aid Home</a> | <a href='http://www.modelaid.com/community'>Community</a> | <a href='http://www.modelaid.com/lecture'>Lecture</a> | <a href='http://www.modelaid.com/review'>Review</a> | <a href='http://www.modelaid.com/workroom'>Workroom</a> | <a href='http://www.modelaid.com/portfolio'>Portfolio</a> | <a href='http://www.modelaid.com/explore'>Explore</a> | <a href='http://www.modelaid.com/library'>Library</a></div>");
라고 넣어준 상태이다.

하지만 아직 두가지 문제점이 남아있다.

  1. 스킨에서 올라온 CSS 를 이용하는게 전체적인 스킨의 디자인을 해치지 않을텐데... 링크와 바탕색의 대비가 되는 CSS Class 나 ID 값의 공통 분모를 찾는 것
  2. Top Margin 이 설정된 스킨에서는 Margin 이후에 내용이 출력되면서 상단이 붕~ 뜨는 스타일이 될 텐데 어떻게 해결할 것인가?
하는 것이다.

첫번째 조합은 기본 스킨과 수정된 스킨을 열어 링크, 배경, 바탕색등에 대한 기본적인 흐름을 분석해야 겠다.
누군가 알려주시면 대략 감사~ (스킨 작업을 여러번 해 보신 분이라면 이미 알고 계실듯...)
Save my time, please

두번째는 블로그와 분명한 선을 긋기 위해 블럭 형태로 넣을까 하는 생각을 하고 있기 때문에 문제가 되는 것인데 과연 Top Margin 마저도 무시하고 무작정 윗쪽으로 찰싹 달라붙는 형태를 만들수는 없을까 하는 문제입니다.

이 두가지 질문에 대한 답을 찾는 여행은 잠시 쉬었다가 어느날 문득 머리 오른쪽 상단에서 전구가 반짝거릴때 떠나도록 하겠습니다.
2007/12/04 10:09 2007/12/04 10:09

7 Comments (+add yours?)

트랙백1 Tracbacks (+view to the desc.)

Newer Entries Older Entries