2009년 1월 3일 토요일

em 계산을 쉽게 하세요

em은 폰트 크기의 상대적인 단위로 % 단위와 함께 많이 사용되고 있습니다. 하지만 px 단위와 달리 적용하기가 쉽지 않은데 px 단위를 em 단위로 쉽게 변화해 주는 사이트가 있어 소개해 드립니다.

PXtoEM.com 은 px 단위를 em 단위로 쉽게 계산해 줄 뿐 아니라 바로 사용할 수 있는 css로도 만들어 주고 있습니다. 아울러 Learn 메뉴를 통해서 em 단위에 대한 메뉴얼을 함께 제공하고 있어 em 단위에 대한 학습을 필요로 하는 사용자들에게 매우 유용한 사이트가 될 것 같습니다.

Body 폰트 크기를 고르거나, 직접 입력할 수 있습니다.

사용자가 설정한 크기로 CSS를 작성해줍니다.

em 단위에 대한 메뉴얼을 제공하고 있습니다.

[책] 실전 웹 표준 가이드(2005)

웹표준과 접근성에 대한 이슈가 커져가면서 다양한 가이드와 서적이 나오고 있습니다. 앞으로 몇차례에 걸처 추천할만한 책들을 소개해 볼까 합니다.

실전 웹 표준 가이드 다운로드 사이트

실전 웹 표준 가이드 다운로드 사이트


UI개발 업무를 시작하는 웹퍼블리셔나 개발자들이 커뮤니티에서 가장 많이 묻는 질문이 바로 입문서입니다. 파란책, 노란책, 초록책으로 불리는 에이콘 출판사의 웹표준 완전정복 세트도 굉장히 좋고, 추천 후보중 하나이지만 특별히 공짜로 구할 수 있는 '실전 웹 표준 가이드(2005)'를 가장 먼저 추천합니다.

실전 웹 표준 가이드는 국내에 웹표준에 대한 이슈가 막 일어나기 시작한 2005년에 한국소프트웨어진흥원을 통해서 발행된 PDF 형태의 공개 문서로 윤석찬, 신현석, 이성노, 신정식님 네 분이 공동 저술했습니다.

출판사를 통해 정식으로 발행된 것이 아니라 다소 오타와 문맥이 매끄럽지 못한 점이 흠이지만 번역서만 난무하는 국내 실정에 웹표준에 대한 배경과 필요성. 최소한의 기술 가이드와 참고 자료등을 두루 담아낸 문서가 나왔다는 것은 공동 저자 네 분의 노력과 열정이 아니었다면 쉽지 않은 일이라고 생각됩니다.

차례는 다음과 같습니다.
  • 웹 표준이란 무엇인가?
  • 실전 XHTML 가이드
    • XTHML 소개
    • XHTML 일반 문법 준수
    • 구조적 XHTML 사용 방법
  • 실전 CSS 레이아웃
    • CSS 개념 및 소개
    • CSS 레이아웃(LAYOUT) 기초
    • 실전 예제를 통한 CSS 레이아웃
    • 고급 CSS 레이 아웃
  • 실전 DOM/Script 가이드
    • W3C DOM vs. MS DOM
    • 표준 JAVASCRIPT 사용 방법
    • 올바른 플러그인(PLUGIN) 사용
  • 실전 표준 웹 프로그래밍
    • 표준 MIME 타입 설정
    • 표준 문자 인코딩 지정
  • 실전 웹 표준 개발 프로세스
    • 현재 프로세스 소개(Waterfall 방식)
    • 개선된 모델(퍼블리셔 중심)
    • 새로운 개발 프로세스
  • 맺음말
  • 부록 : 웹 표준 사양-브라우저 호환차트

여전히 주요 커뮤니티 Q&A 게시판에서 다뤄지는 다양한 이슈들에 대한 정리가 잘 되어 있습니다. 입문자에게 이 책을 추천하는 이유이기도 합니다. 게시판을 통해서도 알아낼 수 있는 지식들이긴 하지만 잘 정리된 문서는 불필요한 검색과 되풀이되는 질답을 피할 수 있는 길이기도 하며, 자신의 지식으로 습득하는데도 책(문서) 만한 것이 없다고 봅니다.

모질라 커뮤니티에는 실전 웹 표준 가이드외에도 Cross Browsing 가이드(2003), 웹 표준 기반 홈페이지 구축 가이드(2004)가 역시 PDF 문서로 무료 배포중에 있습니다.

1년 전에 처음 이 가이드를 읽은 뒤에 최근에 다시 한번 살펴보았는데 일부 최근의 경향이 반영되지 않은 것을 제외하면 모자람이 없는 문서이자 책입니다. PDF로 제공되고 있어 화면으로 읽기가 불편할 수 있지만, 두쪽 모아찍기로 출력을 한 뒤에 스프링 제본을 한다면 2,3만원짜리 책 못지 않습니다. 필자는 회사의 제본 서비스를 받아서 사진처럼 책으로 만들어서 보고 있습니다. 1년 전에 스프링 제본으로 만들어 둔 것도 있는데 그 역시 나쁘지 않아서 함께 두고 있습니다.

입문자라면 결코 싸지 않은 최근의 신간 도서들을 놓고 고민하지 말고 실전 웹 표준 가이드를 지금 바로 내려받아서 차근히 읽어보기를 추천해 봅니다.

덧붙임/ 공동 저자 네 분께서 여유가 되신다면 다시 한번 뭉치셔서 2판을 만들어 주셨으면 좋겠습니다. 오타와 문맥을 다듬고, 최근의 경향과 이슈들을 조금 더 붙인다면 좋지 않을까 하는 생각이 들었습니다.

2008년 12월 31일 수요일

새해 복 많이 받으세요.

다사다난했던 2008년이 끝나갑니다. 나라는 MB로 시끌거렸죠. 촛불로 시작해서 촛불로 마무리되어 가고 있는 형국입니다. 거기에 경기는 왜 이렇게나 안 좋은지 주변에 연말연시 분위기를 도통 느낄 수가 없네요. 그래도 다행히 저 개인적으로는 사랑하는 사람을 만나서 행복했던 한 해 였던것 같습니다. 함께 힘든 시간도 있었지만 잘 넘기고 더 단단해진 마음으로 내년에는 좀 더 좋은 소식을 전해 드릴수 있을것도 같구요. 거기에 웹표준 스터디 그룹도 긴 시간 재밌게 해볼 수 있었고, 힘든 선택이었지만 회사를 옮기면서 잘 적응도 했습니다.

2009년에는 2008년에 다짐했다가 못 다 이룬 꿈들을 완성해 나가는 해가 되도록 할겁니다. 아무쪼록 저와 맺어진 모든 인연들에게 행복하고 즐거운 일만 가득하길 바라겠습니다.

새해 복 많이 받으세요~

사랑하는 현정이와

2008년 12월 29일 월요일

좌우가 모두 유동적인 라운드 박스 CSS로 만들기

이전에 자바스크립트를 이용한 라운드박스 만들기를 이야기한 적은 있었는데 CSS Globe Iganaci Ricci가 CSS만을 다루는 방법으로 라운드 박스 만들기(CSS Sprites + Rounded corners)를 쉽게 설명해 놓은 것이 있어서 소개합니다. 이 방법은 저 역시도 자주 사용하는 방법인데 Iganaci Ricci도 마지막에 언급하고 있지만 IE6(역겨운 브라우저라고 표현하고 있군요!)에서는 라운드 박스가 깨지는 문제가 있습니다. 별도의 Conditional Comments를 처리해 주어야 제대로 보여질 것입니다.

 

다섯가지 라운드 박스 예제

다섯가지 라운드 박스 예제

CSS로 만든 수평메뉴(Horizantal Menu) 멋진 예제 120

CSSTEA에서 CSS기반의 멋진 수평메뉴 예제를 소개하고 있습니다. 무려 120개의 예제를 보여주고 있는데, 새로운 UI를 고민하는 웹디자이너나 다양한 수평 메뉴의 CSS 제작 방법에 대해서 궁금해 하는 웹퍼블리셔들에게 좋은 소스가 될 것 같군요. 모름지기 다른 사람이 잘 만들어 놓은 소스를 까 보는 것이 가장 큰 공부가 되곤 하죠.

 

120개의 수평메뉴 예제

2008년 12월 25일 목요일

2009년에는 웹표준에 대한 다양한 이야기가 필요하다

흔히 민주주의 정치는 정당 정치라고도 하고, 크게 보수와 진보로 나뉘죠. (우리나라는 진보가 아닌 진보, 보수가 아닌 보수가 판을 치고 있긴 하지만...) 최근에 웹 생태계에서 가장 큰 이슈중 하나가 웹표준입니다. 웹접근성을 확보하기 위한 초석으로 2000년을 전 후로 많은 논의가 진행되어 왔습니다. 다소 늦긴 했지만 한국도 2005년을 기점으로 여러 세미나와 포럼 등을 통해 웹표준 운동이 일었고, 2008년은 파이어폭스 3과 구글의 크롬 등 새로운 표준 브라우저들의 출시로 익스플로어 6과 7이 주춤하고, 웹표준을 제대로 지키겠다며 8이 발표되면서 소란스럽기도 했습니다. 그러는 와중에 국내 웹 종사자들 가운데에서도 웹표준을 지키고자 하는 사람들과 이에 반대 또는 부정적인 사람들이 드러나기 시작했습니다. 정치에 빗대긴 어색하지만 웹표준을 지지하는 사람은은 진보라는 피켓을 들고 있는 듯 하고, 부정적 목소리를 내는 사람들은 보수라는 현수막을 내 건 것 같아 보입니다. 바꾸려는 자와 지키려는 자인 셈이죠.

개인적으로 이러한 모습이 나빠 보이지 않습니다. 오히려 2005년 이후 한동안 지나치게 웹표준만을 지지하며 목소리가 커져가는 것을 보면서 불안해 했던 적이 있었습니다. 물론 저 역시 웹표준을 지지하는 사람 중 하나이기는 하지만 막상 현실에서 웹표준을 준수하기 위한 작업이 쉽지 않았고, 큰 괴리가 존재함을 느껴 왔기 때문입니다. 분명 반대편의 사람들이 있을텐데 그들의 목소리는 거의 없었거든요. 그러던 것이 최근에 브라우저 업그래이드 캠페인등이 일면서 수면 위로 오르는 것 같습니다. 때로는 감정적이고 근거 없이 싸움판이 되기도 하지만 많은 경우 나름의 경험과 노하우를 바탕으로 서로의 주장에 반기를 꼿고 있습니다.

비정규직 경력을 포함해서 수년에 걸쳐 웹에이젼시에서 근무했던 저 역시 사내에서 웹표준을 준수해 달라는 요청을 여러번 해왔고, 때마다 다양한 현실적 문제들에 대해서 질문을 받았습니다. 계속해서 대화하고 설득하는 작업을 해야 했고, 답변을 위한 새로운 공부를 해야 했었습니다. 아직도 과정 중에 있고, 결론을 내기에 부족한 경험이지만 그러한 노력에 조금은 인식이 바뀌어 갔음을 느낄 수 있었습니다. 그 사이 저의 지식도 높아져 갔다고 생각하구요. 그럼에도 근래 '싸움'이 되는 이슈들에 대해서는 선듯 끼어들지 못합니다. 아직도 현실적이고나 시급한 문제들에 대해서는 답을 찾지 못했기 때문이죠.

ActiveX와 같은 문제는 작업자들만의 공방으로 해결될 수 있는 문제는 분명 아닙니다. 이미 법으로 해결하기 위해 고전분투하시는 분들도 계시고, 사회적으로 환기가 되어야 하고, 분명한 근거와 주장들이 나와서 모두가 인정하는 분위기가 와야 근본적인 해결점을 찾을 수 있을 것입니다. 브라우저 선택의 문제라든가 플래시 사용의 문제들 역시 간단한 문제들은 아닐 것 같습니다. 하지만 한국의 정치인들처럼 멱삽잡이와 욕설로 서로에게 상처를 주지만 않는다면 더 많은 대화와 토론은 분명 한국의 웹생태계를 긍정적으로 바꾸어 나갈 것이라고 생각합니다.

개인적으로 최근에 네이버의 오픈캐스트를 운영하기 시작했습니다. 웹표준과 관련된 다양한 목소리를 담는 것이 주제입니다. 지금까지 총 일곱번을 출판했는데 새로운 글과 소재를 찾는 것이 점점 힘듭니다. 그만큼 국내에 웹표준과 웹접근성에 대한 논의가 부족하다는 반증이 아닐까 생각해 봅니다. 오는 2009년에는 많은 분들이 자신이 갖는 관심만큼 더 많은 이야기들을 꺼내 주시기를 바라겠습니다. 저 역시 현업에서 더욱 분발해서 모두에게 도움이 될 만한 이야기들을 많이 풀어내야 할 것 같습니다.

2008년 12월 14일 일요일

네이버 오픈캐스트 - 봄눈의 웹표준 소식 발행 시작

네이버가 야심차게 준비하고 있는 오픈케스트의 베타테스터로 선정이 되어서 오늘 <봄눈의 웹표준 소식>이라는 제목의 케스트를 개설했습니다.

저는 직업이 직업이니 만큼 웹표준과 웹접근성에 관련된 정보나 UI/UX 관련 지식들을 알리고, 공유하는데 케스트를 이용해볼 생각입니다. 그래서 제목도 <봄눈의 웹표준 소식>이라는 다소 간단한 이름이 되었구요.

오늘 발행한 1호에는 최근 블로그스피어에서 논쟁이 되고 있는 '개발자 좀 살려주세요!'라는 제목의 웹브라우저 업그래이드 캠페인과 관련된 찬반 토론의 글들을 모아봤습니다. 이런 저런 까닭으로 국내에서 웹표준에 대한 문제가 조용할 날이 없기는 하지만 그 옳고 그름, 좋고 나쁨을 떠나서 다양한 의견과 생각들이 모여서 발전적인 과정으로 나아갔으면 하는 바람을 담아서 캐스트 1호에 담아 보았습니다.

막상 오픈케스트가 시원한 화면 구성에 비해 발행 조건이 '심플'하지는 않아서 어지간한 애정이 아니면 장기간 진행하는 것이 쉽지는 않을 것 같지만 점차 편리성을 갖출 것으로 기대를 하면서 앞으로도 너무 뜸~하지 않게 웹표준과 관련된 다양한 소식을 묶어서 전해드리도록 해 보겠습니다.