css 디자인을 하면서 개인적으로 느끼는 점들

[zotoon]

1년 가까이 table 레이아웃과 1픽셀 투명이미지를 사용하다가
작년 겨울 파이어폭스1.0pr과 함께 css디자인의 놀라움을 느끼고 있는 초보 웹디자이너입니다.

주변의 몇몇 디자이너들과 css디자인의 효율성에 대해 적지 않은 이야기를 나눴지만,
대부분의 경우 현재의 작업스타일에서 변화를 생각하지 않더군요.

저 역시 처음 div 박스모델링을 연습할 때엔 수십번을 좌절했습니다.
table layout에서 환상적 기능(레이아웃 표 모드)을 발휘하는 드림위버MX2004라는 툴조차 div box 모델링을 제대로 표현하지 못하는 게 현실입니다.
(웹디자인툴만 다뤄온 요즘 디자이너 중에선 핸드코딩에 좌절 안할 이도 별로 없을 듯 싶네요)

국내에서 마땅히 참고할만한 사이트도 거의 없는 현실에
해외로 눈을 돌리자니 몇년동안 접어뒀던 english가 문제더군요. -_-;

기존에 사용하던 한글2004의 한글사전이라는 프로그램의 경우 익스플러 웹페이지에서 영단어를 자동해석해주는 기능이 파이어폭스에서 먹통이되자 한동안 사전을 가까이 하기도 했습니다.

그동안 영어 공부를 게을리한 저의 잘못이었겠지요.
하지만, 웹 표준화에 대한 문제가 불거지기 전까지만 해도, 아니 많은 이들에겐 아직까지도 해외보단 국내의 웹디자인 수준이 높다라는 잘못(!)된 인식이 퍼져있기에
프로그래머들 보다 디자이너들이 해외 사이트에 눈을 돌리지 않는 문제도 있는 듯 싶습니다.
(글이 너무 자의적으로 작성되는 듯 싶네요.. -_-;;; )

물론, 요즘은 FastDic이라는 확장기능을 유용하게 이용하고 있습니다.

해외 사이트들이나 국내 여러 고수분들은 css핵을 통해 div box 모델링을 하더군요.
하지만, 중첩 table 모델링에 익숙한 저로는 한동안 중첩 div 태그들을 난발하게 ㅤㄷㅚㅆ답니다.
(솔직히 div 태그들을 난발해도 table 태그보다는 단순하거든요. -_-;;; )

내용과 형식의 분리라는 측면에선 css핵이 옳을지 몰라도
저처럼 중첩 table에 익숙한 상태에서 css핵보다는 중첩 div가 다가오는 게 사실이었습니다.
(진짜 문제는 IE가 CSS를 제대로 표현하지 못하는 문제이지만요...)


이상은 디자이너 관점(메인시안 작업에서 끝이 아닌 코딩을 병행하는 수준)에서 처음 css디자인을 공부하면서 느낀 점입니다.

css디자인 공부할 시간에 다른 사이트들 둘러보면서 안목이나 키워라는 충고도 있었지만,

몇년만에 영한사전 펴보면서 느끼는 좌절감이나
최고의 툴이라 생각했던 dreamwaver의 무능함과
핸드코딩해가면서 영타의 필요성 등
정말 많은 부분을 느꼈던 것 같습니다.

아! 마지막으로,
제생각엔 해외에서 css디자인이 광범히하게 퍼진 이유 중 하나가 설치형 블로그들이라고 생각하는데요.
국내 모 설치형 블로그 툴의 경우 거의 모든 스킨들이 table 태그로 만들어졌더군요.
누군가 나서서 스킨들을 모조리 div 태그로 바꿔줘야 할텐데..라는 생각만 듭니다.(행동은 할 수 있으려나...쩝)

점심시간의 압박과 쓸데 없이 너무 긴글에 대한 죄송함에 이만 마치렵니다.

[zotoon]

여기 자주 오시는 분들 중에선 프로그램을 다루시는 분이 디자인을 다루시는 분보다 많다는 생각에 초보 디자이너의 관점에서 글을 작성해보려고 노력했습니다.

이 곳에 방문하는 웹디자이너가 많아지길 바랍니다.
(마치 몇년전에 제로보드 게시판 설치후기를 쓰는 듯한 느낌입니다. )

[hyeonseok]

국내 모 설치형 블로그 툴의 경우 거의 모든 스킨들이 table 태그로 만들어졌더군요.
누군가 나서서 스킨들을 모조리 div 태그로 바꿔줘야 할텐데..라는 생각만 듭니다.(행동은 할 수 있으려나...쩝)

TT 를 말씀 하신다면...제가 해놓은게 있기는 합니다. ㅎㅎ
툴 자체에서 code 로 박혀 있어서 스킨에서 손댈 수 없는 부분도 좀 있고..
결정적으로 디자인이 후져서 아직 배포는 안했습니다. --;

[tenshi]

다음 블로그나 soojung 블로그..
css 기반 블로그가 우리나라에도 몇 있어요~~
전 soojung 블로그를 쓰는데, 꽤 만족하고 있습니다 ^^


저 같은 경우 div+css 레이아웃으로 홈페이지를 만들면서 느끼는 제일 큰 문제는..
우후죽순처럼 퍼져있는 IE6 때문에 근 5년간(IE7 이상의 버전이 IE사용자의 95%이상이 될것으로 어림잡아서 계산한 기간.. IE7이 또 css 지원에 모자라다면 낭패 .. OTL)은 css hack이니 html의 컨텐츠와 무관한 div tag의 남용이 불가피하다는 점입니다. 많은 개발자나 디자이너들이 이 점 때문에 div+css 레이아웃을 꺼리기도 하고요.. =_=

[빛알갱이]

css hack이니 html의 컨텐츠와 무관한 div tag의 남용이 불가피하다는 점입니다. 많은 개발자나 디자이너들이 이 점 때문에 div+css 레이아웃을 꺼리기도 하고요.. =_=

그래도 10겹은 족히 되도록 table을 쓰는 것보다는 훨씬 낫지 않을까요? table로 중첩된 곳을 Firefox의 DOM Inspector로 들여다 보면 정말 '첩첩산중'이 따로 없더군요. (혹시 모르시는 분을 위해서: DOM inspector는 기본 설치를 하면 깔리지 않지만, 맞춤형 설치를 하면 깔립니다. 또, 나중에 추가로 설치할 수도 있고요. 웹 디자인할 때 '검증 및 디버그 단계'에서 쓰시면 매우 편리할 것입니다. )

Dreamweaver의 CSS 지원 수준이 그 정도 밖에 안 되다니 실망스럽군요. 아래에 있는 CSS 관련 도구들 가운데 하나 (예를 들어 Westciv)를 써 보면 어떨까요?

http://www.w3.org/Style/CSS/

[hyeonseok]

브라우져가 스펙을 제대로 지원 못한다고 하여서 의미에 맞는 markup 을 포기해서는 안된다고 W3C 문서에 써져 있습니다. (어떤 문서였는지 기억은 잘 안나네요) ul, li 표현이 잘 안되어서 <div class="ul"> <div class="li"> 를 사용했던 저에게는 충격이었습니다.

고로, CSS 지원이 미약하다고 div 남발을 하면 안됩니다.
차라리 CSS Hack 이나 javascript 로 해결 하는 것이 좋습니다.
가장 중요한 것은 기계도 이해 할 수 있는 의미에 맞는(semantic) markup 입니다.
참고 semantic web ( http://100.naver.com/100.php?id=780515 )

그리고 DreamWeaver MX 2004 는 css layout 로 훌륭하게 표현을 해 줍니다. (물론 완벽하지는 않습니다만..) MX 2004 에 내장되어 있는 템플릿을 보면 다 CSS Layout 으로 되어 있는 것을 보실 수 있습니다. CSS 랜더링이 제대로 안되는데 템플릿을 CSS Layout 으로 넣어 놓지는 않았겠지요.
Windows 플랫폼에서는 최고의 웹저작도구라고 생각합니다.

[inureyes]

국내 모 설치형 블로그 툴의 경우 거의 모든 스킨들이 table 태그로 만들어졌더군요.
누군가 나서서 스킨들을 모조리 div 태그로 바꿔줘야 할텐데..라는 생각만 듭니다.(행동은 할 수 있으려나...쩝)

TT 를 말씀 하신다면...제가 해놓은게 있기는 합니다. ㅎㅎ
툴 자체에서 code 로 박혀 있어서 스킨에서 손댈 수 없는 부분도 좀 있고..
결정적으로 디자인이 후져서 아직 배포는 안했습니다. --;

CSS 기반으로 TT소스 포함해서 div 박싱모델로 작업한 적이 있습니다.
(그러나 몇몇부분 (특히 트리!)은 테이블을 대체하는 식이라 중첩한 정도가 장난이 아닙니다 3단계까지도 갈지도-_-)

CSS가지고 논다고 이것저것 해보았는데, 저도 디자인은 역시 =_=입니다.
http://inureyes.bluemime.com/forest 에서 보실 수 있습니다. CSS 이용해서 외양변경도 장난삼아 집어넣어 보았으니 구경해보세요

[박민권]

주변의 몇몇 디자이너들과 css디자인의 효율성에 대해 적지 않은 이야기를 나눴지만,
대부분의 경우 현재의 작업스타일에서 변화를 생각하지 않더군요.

맞습니다. 제 주변도 수두룩합니다. 특히 경력이 많을수록 못바꿉니다.
오히려 초보웹디자이너가 CSS레이아웃을 익히는 속도가 월등합니다.
모짜르트에 대한 이야기중 실력있는 아이의 레슨비가 더 비싸서 이유를
묻자 "처음부터 가르치는 것보다 잘못된 버릇을 고치는 것이 더 어렵기
때문입니다." 라고 했다죠.

저 역시 처음 div 박스모델링을 연습할 때엔 수십번을 좌절했습니다.

저도 수십번 좌절했습니다. 테이블 개념을 버리는데 너무 힘들었죠.

table layout에서 환상적 기능(레이아웃 표 모드)을 발휘하는 드림위버MX2004라는 툴조차 div box 모델링을 제대로 표현하지 못하는 게 현실입니다.

그래도 드림위버MX2004는 표현은 완벽하게 구현하지 못해도 표준을
많이 지켜주고 macromedia.com도 css레이아웃입니다.
저의 css레이아웃 공부에 매크로미디어사 홈피의 영향도 있었습니다.
어차피 전 하드코딩만 하기 때문에 태그자동입력되는 드림위버가
좋더군요.

국내에서 마땅히 참고할만한 사이트도 거의 없는 현실에
해외로 눈을 돌리자니 몇년동안 접어뒀던 english가 문제더군요. -_-;

한컴사전, 네이버사전은 내친구 ㅡㅡ;

아직까지도 해외보단 국내의 웹디자인 수준이 높다라는 잘못(!)된 인식이 퍼져있기에
프로그래머들 보다 디자이너들이 해외 사이트에 눈을 돌리지 않는 문제도 있는 듯 싶습니다.

전 어플쪽만 공부하다가 직장 때문에 웹에 발을 디딘지 10여개ㅤㅇㅝㅀ후
불여우를 만나고 표준을 공부하게 된 순간 국내 웹 수준이 밑바닥수준
이란것을 알고 충격받았습니다.

하지만, 중첩 table 모델링에 익숙한 저로는 한동안 중첩 div 태그들을 난발하게 ㅤㄷㅚㅆ답니다.

어서 개념을 바꾸세요. 테이블 그물을 짜고 그물 안에 배치를 하는 것이
아닌 상자들을 위에 얻는다는 그런 개념을 갖도록 노력해보세요.

css디자인 공부할 시간에 다른 사이트들 둘러보면서 안목이나 키워라는 충고도 있었지만,

헐~! css디자인에 익숙해지는 순간 코딩속도가 엄청나지고 코드 재활용성 유지보수, 테이블로는 불가능한 레이아웃, 그 어떠한 레이아웃도 겁나지 않는 자신감, 팀작업시 융통성등 최곱니다.

제생각엔 해외에서 css디자인이 광범히하게 퍼진 이유 중 하나가 설치형 블로그들이라고 생각하는데요.

제 생각에는 생산성이 뛰어나기 때문으로 생각됩니다.

저희 개발팀원들도 점점 CSS의 장점을 몸소 느끼면서 꾸준히 공부하고
있습니다. 클래스 및 ID 이름짓는 방법도 문서화 시켰고 자주쓰는 이름은
아예 정하고 약속했습니다.
또 기본적인 부분은 Ver 0.9.4 이런식으로 버전관리를 하고 있습니다.

아직은 초기 단계지만 이것이 익숙해지면 새로운 사이트 제작시 생산속도가
무척 빨라질 것이라고 생각되며 수정시에도 쉽고 빨라질 것이라 확신합니다.
단순한 믿음이 아닌 결과가 나타나고 있기 때문이죠.

한가지 예로 제가 디자인이 없는 프로그램 코딩을 약속한 이름으로 디자이너에게 넘겨줍니다.

<div class="area-menu">메뉴~</div>

디자이너는 디자인을 입히기 위해서 소스코드를 수정할 필요도 없고
미리 약속했기 때문에 곧바로 스타일을 짜서 디자인을 입힙니다.

디자인이 나오길 기다릴 필요도 없고 디자이너도 코드를 건드릴 필요가
없으며 디자인이 나오기전에 미리 필요한 클래스명을 프로그래머에게
적어주거나 약속한대로 나갑니다.

단가가 싸고 기간이 급한 사이트는 이전에 사용한 css파일을 적용합니다.
약속된 이름이 있으므로 별다른 수정없이 디자인이 적용됩니다.

표준, css레이아웃, 불여우 이런 단어가 각종 잡지책, 뉴스, 커뮤니티에서
그냥 흘러나오는 것이 아닙니다. 대세는 변하고 있죠. 변하지 않으면
분명 도태되버린다고 생각합니다. CSS 열심히 공부하세요.
좋은정보는 여기도 올려주세요. 저두보게요. ㅎㅎ