The note of Legendre

제프리 젤드만의 웹표준 가이드(부제:웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택)를 읽었습니다. 이 책은 Desinging With Web Standards 2판의 번역서인데요. 웹표준을 다루는 여러 책들 중에서, 가장 과도기적 접근을 추구하는 책입니다. 받아들이기 쉽게 다양한 스크린샷 사례를 들면서 웹표준을 소개하는 이 책은, 무리하게 표준 준수를 강요하지는 않습니다. 하지만 표준을 사용하면 어떤 장점이 있는지, 비즈니스적 가치로는 무엇이 있는지 알려줍니다.

그래서 이 책은 구형 웹브라우저 사용자가 많은 웹페이지를 위해, CSS 핵도 언급하고 있습니다. Gecko 표준모드에서 인라인 엘리먼트일 때 Baseline^[각주:1] 밑에 공백이 생긴다는 이야기는 모르고 있었는데요, 흥미롭게 읽었습니다. 이미지 태그는 보통 인라인 엘리먼트로 취급되기 때문에, CSS를 통해 display 속성을 블록으로 속성을 바꾸어주면 공백이 사라진다는 게 신기했습니다.

웹 접근성에 대한 이슈들도 뒷부분에서 꽤 비중있게 다루고 있었는데요. 제프리 젤드만은 디자이너들이 일반적으로 생각하는 접근성에 대한 오해들을 설명하고 있습니다. 현실적으로는 "시각장애 억만장자들"이라는 부분이었는데요. 여기서 말하는 억만장자는 검색엔진이었습니다. 구조와 표현이 분리되지 않은 마크업으로 페이지가 구성되어 있다면, 스크린리더 웹브라우저와 시각장애 억만장자들은 그 페이지에 접근하기 어렵습니다.

아직 웹표준에 대해 고민하고 있다면, 이 책을 통해 웹표준을 자발적으로 선택할 수 있는 계기가 되리라 봅니다.

DOM 스크립트라는 책을 읽게 되었습니다. 이 책을 번역해 주신 분은 Channy's Blog를 운영하는 분이기도 합니다. 막상 책을 직접 잡을 때까지는 몰랐는데, 만박님, 현석님, 주일님이 추천의 글을 써 주셨더라고요. DOM이라는 이름도 저에게는 되게 생소했는데, 1장에서 브라우저 전쟁에 대한 이야기와 함께 어떻게 지금의 사태까지 흘러왔는지 설명되어 있었습니다. 저는 DOM^[각주:1]도 무슨 언어이겠거니 하고 오해를 하고 있었는데, 책에서는 API^[각주:2]처럼 라고 생각해보라고 이야기 해주더군요.

자바스크립트^[각주:3]의 문법은 이전에 보았던 C와 대체로 비슷했습니다. 주석 형식도, 문장 뒤에는 세미콜론을 붙이는 것도. "결합형 배열"같은 개념은 루비의 해시나 파이썬의 딕셔너리와 유사하다고 느꼈지요. 연산자, 조건문, 반복문, for문 C와 유사했습니다. for 문 안에 변수 선언이 된다는 점은 제외하고요.
"객체"라는 것에 대해 많이 이야기를 듣기는 합니다. "객체지향"이라는 형태로 쓰이기도 하지요. 하지만 막상 다른 사람에게 "객체"를 설명해보라고 하면 자꾸 막히곤 합니다. 자바스크립트에서도 객체가 있더군요.

각 장의 끝 부분에는 "이러이러한 내용을 배웠고, 저러저러한 내용을 배울 것이다"라고 정리가 되어 있어서 장마다 독자가 읽은 내용을 확인하도록 도와줍니다. 작은 부분이지만, 전 마음에 들었습니다.

책에서 중심이 되는 예제는 사진첩 예제인데요. 처음에는 사진첩을 간단하게 만들어 보고, 중간에 표준에 관한 내용이 설명된 후, 그에 맞게 개선하는 작업이 나와 있습니다. 그중 "단계적 기능 축소"라는 부분이 공감이 되었습니다. 파이어폭스^[각주:4] 브라우저를 사용할 때, 내비게이션에 나쁜 방법으로 자바스크립트를 써서 작동되지 않을 때 불편했던 기억이 떠올랐기 때문입니다. 가능하면 스크립트코드를 바깥쪽으로 빼내고, 브라우저 지원을 위해 방어적으로 코드를 작성할 것을 여기선 추천합니다.

온전히 기술적인 내용만 다루고 있는게 아니라, "조엘 온 소프트웨어" 느낌이 드는 글이 포함되어 있어서 왜 이렇게 해야하는가에 대해 설득력있게 다루고 있습니다.

부록에는 메소드/프로퍼티 참조자료, DOM 식으로 개발되어 바로 가져다 쓸 수 있는 예제^[각주:5], 협업 방법론^[각주:6]에 대한 글이 실려 있습니다.

책을 받은 지 3개월이 넘었고, 학기말이다 뭐다 하면서 그동안 CSS 마스터 전략을 제대로 읽지 못했어요. 그래서 이번에 한 번 부지런하게 읽어봐야겠다고 생각해서 한 번 쭉 읽었습니다. 모든 부분을 자세히 이해하면서 넘어가려면 끝까지 못 읽을 것 같아서, 그냥 끝까지 책을 한 번 두루 살펴 보았죠.

우선, 책을 쓴 사람은 기본적인 컴퓨터 활용능력과, (X)HTML에 대한 어느 정도의 지식이 있는 사람을 대상으로 한 것으로 보입니다. 1장에서 다시 짚어 주기는 하지만, 진도의 상승폭이 상당히 빠르기 때문이죠. 이미지, 링크, 레이아웃 등으로 CSS 사용의 범주를 기준으로 나누어서 설명하는 게 특징입니다. 이런 방식은 나중에 CSS에 대해 참고하고자 할 때, 편리하게 작용하겠죠. 비록 인터넷 익스플로러 버전 6 이하에서는 CSS의 기능(속성선택자도 그 중 하나)을 완벽하게 지원하지 않지만, 속성선택자를 이용해 외부링크, PDF 아이콘을 동적으로 만들어 주는 게 신기했습니다. 리모트 롤오버 기능도 인상 깊었습니다. 어떻게 활용하느냐에 따라 넘길 수 있는 사진첩도 만들 수 있고, 상단메뉴 위에 올리면 부속메뉴가 나오도록 할 수 있고. 학교 도서관 홈페이지에서는 자바스크립트를 이용해서 이런 처리를 하는데, 파이어폭스에서는 제대로 작동하지 않았습니다. 그 때 이런 기능을 사용하면 대안적으로 해결할 수 있지 않을까 생각했어요.

뒷 부분에는 핵과 필터에 관한 내용이 나옵니다. 처음에는 그 의미를 이해해 보려고 했지만, 상당히 어려웠습니다. 브라우저 간의 호환성을 어떻게 지킬 것인가에 대한, 사람들의 고민과 그 결과가 담겨 있습니다.

부록에는 앞에서 배운 내용을 기초로 하여 준-실전용 페이지를 만드는 연습을 합니다. 이 부분에서는 레이아웃을 단 형식으로 배치하는 것이 인상깊었습니다. 음수 마진 값을 적절히 활용하는 사례에 대해 조금 더 구체적으로 볼 수 있었습니다.

에이콘 출판사에서 나온 방탄웹과 실용예제로 배우는 웹표준은 아직 읽지 못했는데, 기회가 된다면 이 책들도 읽어보고 싶네요.