실용예제로 배우는 웹 표준 - 현재까지의 감상

  • Post author:
  • Post category:
  • Post comments:0 Comments
  • Post last modified:February 8, 2020

xhtml_css

나는 모회사에서 웹프로그래머로 잠시 일해봤었기 때문에 보통 말하는 현업 환경이라는 것을 안다. 회사마다 약간의 차이는 있겠지만 작업순서는 거의 같다고 생각한다. 먼저 기획단계를 거쳐 디자이너에게 바톤이 넘어간다. 이때 디자이너는 앞서 정해진 내용을 기초로 레이아웃을 잡고 포토샵 작업 등을 진행한다. 이 두 단계에서 대부분의 경우 사용자 접근성 등은 무시되기 일쑤다. 어느 정도 이름있는 회사에서는 UI 이론을 적용하려고 노력하기도 하는데, 이 경우라도 문제는 있다. 기획자나 디자이너 중 상당수가 사실 웹프로그래밍에는 조예가 없다. 그래서 그들은 도화지에 수채화 그리듯 디자인을 한다. 이렇게 해서 만들어진 디자인 파일이 웹프로그래머에게 넘겨지는데, 이때 소스 코드를 보면 가관인 경우가 많다. 수많은 ‹tr›, ‹td›가 페이지 위에서 춤을 춘다. 언뜻 이해가 가지 않는다면 아무 곳이나 생각나는 유명한 포탈 사이트에 가서 소스보기를 해보시라.

이제 프로그래머는 디자인 파일에 맞춰 ASP나 PHP 등의 스크립트 언어를 페이지 중간중간에 써넣는다. 이러고 나면 소위 말하는 스파게티 소스코드가 완성된다. 이 코드는 고급 레스토랑에서 파는 것과는 그 맛에서 비할 바가 못 된다. 상당히 맛이 없을 뿐 아니라 먹다 보면 어지러워지기까지 한다. 이런 맛없고 건강까지 해치는 소스코드만 먹다 보니 웹개발자는 몸이 성하지 않고, 그래서 자신의 직업에 회의를 느끼기까지 한다.

나는 그런 경험을 어느 정도 한 후에 다시는 웹에는 손대지 않겠다고 생각했더랬다. 그런데 얼마 전에 내 블로그의 디자인을 바꾸면서 새로운 세상을 보게 됐다. http://AlexKing.org 에 가보니 CSS 와 그림 몇개만 압축된 파일만 다운로드하게 되어 있었다. 아니 디자인을 바꾸는데 CSS 파일만 바꾸면 된다는 말인가? 그때부터 XHTML과 CSS에 본격적으로 관심이 가게 됐고, 실용예제로 배우는 웹 표준을 구매하게 된 것이다.

이제 실용예제로 배우는 웹 표준의 절반 가량을 읽었다. 제목 그대로 실용예제를 통해 아주 쉽게 풀어서 표준 웹페이지 작성 방법을 알려준다. 그런 점이 이 책의 진입장벽을 낮게 한다. 쉬운 설명이 이 책의 전부는 아니다. 곳곳에서 웹 표준이 철학을 엿볼 수 있다. 어떻게 의미론적인 문서를 작성하고 그 위에 디자인을 해야 하는가. 이러한 고민과 저자 나름의 해답이 제시된 책이다.

이 책을 읽으며 내가 웹에 무지했음을 깨달았고, 앞으로는 표준 준수에 노력하려고 한다. 우선 내 블로그의 HTML Button을 글 마지막에 제시한 바와 같이 바꾸어 놨다. 또한 http://validator.w3c.org 에서 웹페이지를 검사했다. 잘못된 곳이 너무 많아서 우선 중요한 것부터 손봤다. 400개가 넘는 모든 글을 검사해서 고칠 수는 없는지라 우선 수정한 것에 만족하고, 앞으로 좀더 엄격하게 포스팅하도록 할 생각이다.

마지막으로 실용예제로 배우는 웹 표준의 부제목(?)을 읽어보자. 기획자, 개발자, 디자이너가 함께 보는 XHTML + CSS 활용 가이드. 절대 혼자 보지 말고 같이 일하는 직장 동료에게 추천하자.

<b>‹code_table›</b> ‹table bgcolor=“#F1F2EF“›‹tr›‹td› ‹/td›‹/tr›‹/table›
<b>‹code_table›</b> ‹code› ‹/code›

<b>‹bq›</b> ‹blockquote› ‹/blockquote›
<b>‹bq›</b> ‹blockquote cite=“”› ‹/blockquote›

<b>‹b›</b> ‹b› ‹/b›
<b>‹strong›</b> ‹strong› ‹/strong›

<b>‹i›</b> ‹i› ‹/i›
<b>‹em›</b> ‹em› ‹/em›

<b>‹q›</b> ‹q lang=“ko”› ‹/q›

<ins datetime="20050917"><b>‹strike›</b> ‹strike› ‹/strike›
<b>‹ins›</b> ‹ins› ‹/ins›

<b>‹del›</b> ‹del› ‹/del›</ins>
Author Details
Kubernetes, DevSecOps, AWS, 클라우드 보안, 클라우드 비용관리, SaaS 의 활용과 내재화 등 소프트웨어 개발 전반에 도움이 필요하다면 도움을 요청하세요. 지인이라면 가볍게 도와드리겠습니다. 전문적인 도움이 필요하다면 저의 현업에 방해가 되지 않는 선에서 협의가능합니다.
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments