나는 디자인의 이론에 대해서 체계적인 교육을 받지 못했다. 다만 책과 인터넷을 통한 독학과 웹사이트를 제작했던 경험을 통해서 나름대로의 지식을 쌓았다. 그런 나이지만 자칭 웹디자이너로써, 디자인의 최대 목표 중 하나가 통일성(일관성)이라고 생각한다. 이는 사용자 중심 디자인이라는 범위를 넘어 디자인 전체를 아우르는 심오함이 숨어있다. 그런 점에서 CSS 디자인은 통일성을 유지하는 가장 효율적인 방법을 제시한다. CSS는 Cascading Style Sheet의 [...]

최근 국내 포털사이트중 하나인 엠파스와 네이트가 개편됐다. 아직 미약한 부분들이 많지만, 테이블 태그를 벗어나서 웹 표준(Web Standards) 방식으로 사이트를 개편한 점은 크게 환영할 일이다. 요즘 들어 코드 분석을 하는 일이 없는 나이지만, 최근 포털 사이트의 개편은 적지 않은 시간을 투자해서, 코드를 분석할만큼 호기심을 준다. 왜 A라는 태그를 사용했는지, B라는 태그를 사용하는 것이 구조적/의미론적으로 올바르지 않는지, 왜 [...]

어제 오전 일찍, 수만님의 웹 2.0을 이끄는 방탄웹을 읽어보려고 시내 서점에 다녀왔다. 원래 목표는 오전부터 시작해서 오후 늦게까지 서점에 책 한권을 모두 읽으려고 했는데(^^;), 생각보다 빨리 읽혀서 난감해졌다. 광주 시내에 있는 2곳의 대형 서점을 차례대로 둘러보며, 관심있는 분야의 책들을 읽던 중 뜻밖의 엄청 난 책을 발견했다. 제목마저 감미로운 “웹사이트 최적화 테크닉“이라는 책인데, 오랫만에 성안당에서 좋은 [...]

인터넷 익스플러 7의 2번째 베타버전이 유출됐다. (via JWC 블로그) 윈도우 XP sp2 이상에서만 설치할 수 있는 것으로 알고 있는데, 나는 윈도우2003를 사용함으로 대략 난감.. 작년 여름에 IE7 beta1이 유출됐을때(그후 공개 테스트), 일몰님과 지윤님 등 몇몇 CDK(CSS Design Korea 포럼)의 회원분들이 테스트했던 기억이 난다. 이번에도 시간이 좀 지나면 여러 사용기들을 볼 수 있겠지? ㅎㅎ 지난 IE7 beta1 테스트 [...]

이제 div 태그를 삽입해서 레이아웃을 구성해보자. 미리 생각하고 있는 레이아웃이 있다면 상관없겠지만, 그렇지 않다면 리틀 박스에서 맘에 드는 레이아웃을 골라보자. 지난번에 작성한 HTML은 CSSLook.com의 첫화면(홈페이지)를 구성할 것으로, 상단+몸통+하단 구성에 몸통은 소개+갤러리+뉴스의 3단 구성으로 레이아웃을 작성할 계획이다. 먼저 상단을 분리시키기 위해서, 드림위버에서 1번째 머릿글(로고)과 메뉴들을 마우스로 선택한다. 그리고 드림위버 상단 메뉴에서 삽입(alt+I) -> 레이아웃 객체(Y) -> Div 태그(D)에서 [...]

일단, 참고할만한 신문(개인적으로 한겨레를 추천)을 하나 준비한 후에 드림위버를 실행시킨다. 파일을 새로 하나 만들고, 페이지 속성에서 제목/문서유형/인코딩을 변경한다. 디자인 보기 모드를 활성화 시키고, 워드프로세서 툴을 사용하던 것처럼, 편하게 글을 쓰기 시작한다. 글을 쓰다가 코드 보기 또는 분활 보기를 통해서 코드를 확인하면, 곳곳에 p 태그가 입력된 것을 확인할 수 있다. 제목글이나 목록형식, 또는 글자 강조 같은 꾸미기는 나중에 [...]

작년 여름부터 준비(만)했던 CSSLook.com 사이트를 다시 제작하려고 한다. 작년 8월말에 급작스래 국회에서 일하게 되면서 전혀 작업의 진도가 없었는데, 무려 5개월이 지난 지금에서야 조금이나마 여력이 생겼기 때문이다. (이 여유도 이달이 얼마 오래가지 못할 듯 싶다. ㅜㅜ) 이번 작업과정은 철저하게 공개하면서 진행할 생각이다. 2000년에 첨으로 웹사이트를 제작하기 시작했으니, 벌써 횟수로만 7년째 이 일을 하고 있는데, 나의 작업 진행은 [...]

CSS는 Cascading Style Sheet의 약자이다. 의역하면, 계단형(상속형) 스타일 시트이다. CSS는 (x)HTML의 외양을 꾸미는 역할을 하며, 이름에서 알 수 있듯이 CSS의 가장 큰 특징은 상속형이다. 각각의 CSS 요소들의 정의된 성질들이 조상/자손, 부모/자식 관계 속에서 상속된다는 것이다. 이렇게 상속되는 특징을 잘 이해하고, CSS를 제작한다면, 웹문서는 출렁이는 파도처럼 부드러움을 갖게될 것이다. 웹사이트 전체적인 통일성과 유동성을 쉽게 구성할 수 있고, [...]

2006년 Digital Web Magazine의 첫번째 기사가 등록됐다. Designing for the Web이라는 제목의 이 기사는 변화된 웹의 환경 속에서 디자인할 때 고려해야할 것들을 정리/분석했다. 다루고 있는 것들 해상도 (모니터, 브라우저, 이미지) 브라우저를 고려한 디자인 (경향, 기반, px/% 넓이) 웹 안전색 이미지 포맷 형식 글자 (글꼴) 예전에 고교시절때 타임지 독해서클을 만들어서 친구들과 열심히 번역했던 기억이 난다. 웹디자인을 하려는 분(특히 학생)이라면, Digital Web Magazine의 [...]

웹디자이너는 출판디자이너와 다르다. 출판디자이너는 인쇄물의 모든 것들을 자신이 조정할 수 있지만, 웹디자이너는 웹사이트의 아무 것도 자신이 조정할 수 없다. yser님의 웹 표준과 접근성, 그리고 사용자의 관점이라는 글을 보면서 떠오른 생각이다. 웹디자이너가 결국 할 수 있는 일이라곤, 자신의 모니터에 보여지는 웹사이트의 디자인일 뿐이다.800×600 해상도의 모니터를 소유한 사람은 가로스크롤바를 이리저리 욺직이면서 웹사이트의 가로크기에 불만을 토로할 것이며, 핸드폰이나 pda로 [...]