Deutism

쫄깃한 웹 표준!

Archive for the Category Web Standards

CDK study

2010년 5월말에 웹표준의 날을 했었는데요.  그 당시 웹 표준 경진 대회를 진행하면서 세미나 보다는 좀 더 심도있게 모여서 공부하는것에 관심을 가지게 되었고 하코사의 한 스터디에 들어가게 되었습니다.

그렇게 열심히 스터디에서 공부를 하는데 저는 책 중심의 스터디가 맞지 않는것이었습니다.

보통 스터디는 책을 선정해서 정해진 부분을 정해진 사람이 발표를 준비해서 사람들에게 발표하는 방식이었습니다. 제가 느끼기에는 한사람이 준비를 해와서 그것에 대해서 설명하는것보다는 모두가 공부를 해오고 내용에 대한 설명은 대충 생략하고 토론을 원했거든요. 사실 책을 보는것은 혼자서도 할 수 있으니까요. 책을 보고 의견을 나누는 것이 제가 원했던 것이었는데 그렇질 못했습니다.

또한 자율적으로 스터디를 하다보니 준비도 미흡하고 결석자도 많고 그렇더라구요. 당연히 흐름은 끊기게 되고, 약간은 산만한 느낌이 들었습니다.

주말에 내가 큰시간을 할애해서 공부를 모여서 하는것인데 산만해 지는것은 싫었습니다. 그래서 강력한 규칙을 정하는 스터디를 만들어서 다같이 공부해보자는 마음을 먹게 되었습니다.

그래서 CDK에서 스터디를 모집 하게 되었습니다. 책만 보는것이 아닌, 웹 표준의 깊숙한 부분, 사상(이라고 하기엔 거창하지만), 무엇보다 공부를 하는 자세를 연구하는 스터디를 모집하고 싶었습니다. 그렇게 저를 제외한 8명의 사람들이 모였습니다. 그래도 책을 한권 정해서 같이 공부하는것이 수월했기 때문에 책을 한권 정해서 공부하기로 했습니다. 그 책이 바로 제프리 젤드만의 웹 표준 가이드였습니다. 이 책은 웹 표준이 생길 당시의 이슈들을 주로 얘기하는책이었던 만큼 웹 표준을 심도있게 공부하기에는 딱이었습니다.

물론 발표도 했었습니다.  그러나 누가 준비해 오는것이 아닌 다같이 발표 준비를 해오고 그중에 즉석에서 발표를 정하는 방식이었습니다. 당연히 준비를 안해오는사람은 거의 없었고(없진않았습니다.-_-+) 책은 그렇게 진행을 했습니다.

그리고 또한 자유 주제를 선정하거나 제가 할당해주어 그것에 대해 심도있게 공부하고 내용을 공유하는 방식으로 진행되었습니다. 그 결과물들은 CDK위키에 조금씩 정리 되었습니다:)

제가 목표로 했었던건 스터디를 통해서 그냥 단순히 페이지를 쳐내는 사람이 아니라 어떤 이슈가 생겼을때 ‘왜’ 라는 의문을 가지고, 근본적인 원인과 문제를 파악하여 처리하는것을 목표로 하는 사람을 만드는것이었습니다. 그렇게 1년을 진행했습니다.

스터디를 하는 사람들이 얼마나 발전했는지는 모르겠지만, 오히려 저는 나름 많은걸 배우고 느낄수 있었습니다. 이제 남은분들이 열심히 하셔서 좀 더 좋은 방향으로 스터디를 이끌었으면 좋겠습니다.  또 다른 스터디를 할것이냐는 아직 모르겠네요.

 

자바스크립트로 특정 앨리먼트에 적용된 스타일값 받아오기

웹 페이지에 정의된 모든 앨리먼트의 배경 이미지를 뽑아올 필요성을 느껴서, 언제나 그렇듯 막무가내로 자바스크립트에 손을 대기 시작했는데요..

처음에는 다음과 같이 했습니다.

element.style.backgroundImage

이랬더니 값이 없다고 나오더군요. 그래서 좀 찾아보니… css같이 외부로 스타일을 지정해 준 경우에는 값을 읽어올 수 없다고 합니다.
그래서 이것도 몰랐냐 바보야 이러면서 computedstyle 이라는게 문득 생각나면서  좀 찾아봤더니 역시 우리의 IE는

element.currentStyle.backgroundImage

이렇게 써야한다고 하더라구요…

그래서 어쩔 수 없이 분기해서 함수처럼 만들어 쓰기로 했습니다. jQuery같은 훌륭한 라이브러리쓰는 사람들은 알 필요 없겠지만; 혹시나 해서 ^_^ 남겨봅니다.

그리고 언제나 그렇듯 제 코드는 무식 그자체 입니다. 보고 욕하지마세요. 조언은 환영합니다 ㅠ_ㅠ

function getStyle(obj ,sStyle) {
	var val;
	if (obj.currentStyle) {
		val = eval("obj.currentStyle."+sStyle);
	} else {
		val = eval("window.getComputedStyle(obj,null)."+sStyle);
	}
	return val;
}

miname 님의 조언으로 코드가 좋아졌습니다!!! 감사합니다!!! ㅎㅎ
무식하면 삼대가 고생해요 ㅠ_ㅠ 아래 코멘트는 miname님의 언급이십니다*_*

아시겠지만, 보안상으로보나 성능면에서 eval is evil이잖아요.^^
property 값을 얻을 때 bracket notation([])을 쓰면 eval 사용을 피할 수 있습니다.
아래처럼요.

function getStyle(el, sStyle) {
  var computedStyle;
  if (el.currentStyle) {
  computedStyle = el.currentStyle;
  } else {
  computedStyle = window.getComputedStyle(el, null);
  }
  return computedStyle[sStyle];
 }

만약에 위 function이 여러번 반복적으로 실행되는 상황이라면 아래처럼 바꿔서 두 번째부턴 더 빠르게 실행될 수 있도록 할 수 있을 겁니다.

function getStyle(el, sStyle) {
  if (el.currentStyle) {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = el.currentStyle;
     return computedStyle[sStyle];
   };
  } else {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = window.getComputedStyle(el, null);
     return computedStyle[sStyle];
   };
  }
  getStyle(el, sStyle);
 }

p.s 파젯을 KWCAG2.0 버전으로 조금 바꾸고 있습니다 ㅎㅎ 그중에 하나만들다가 이게 나온것이에요.
아시는분들만 안다는 파젯 사용방법을 아시는 분은 새로운 파젯 개발버전인 http://mydeute.com/was/pajet.js 으로 변경해서 확인 가능합니다 ㅋㅋㅋㅋ

웹 퍼블리셔의 업무 범위

좀 오래전 얘기이나 한번쯤은 제 생각을 써놓는게 좋을듯 싶어 풀어 보려합니다.

항상 많이 나오는 질문중에 하나는 웹 퍼블리셔가 자바스크립트를 해야하나요 라는 질문입니다. 우리나라에 웹 퍼블리셔 라는 용어를 만든 현석님은

지금은 웹에 어플리케이션의 개념이 많이 들어오고 있지만 웹은 기본적으로 문서다. 그래서 문서나 책을 출판하는 퍼블리시(publish)라는 단어를 생각하게 되었고, 실제로 이 단어는 이미 여러곳에서 사용되고 있었다. 플래시에서 HTML 코드를 만드는 기능도 퍼블리시고 MS 프론트페이지(FrontPage)에서도 퍼블리싱이라는 용어를 썼다. 그리고 어도비(Adobe)에서도 웹페이지를 만드는 작업을 웹 퍼블리싱(Web publishing)이라고 지칭하고 있었다. 이 외에도 많은 툴에서 웹페이지를 실제로 제작하거나 배포하는 단계를 지칭해서 퍼블리시라는 단어를 많이 쓰고 있었다. 웹을 출판하는 사람이라는 의미가 기존의 시각에만 집중한 웹 저작과는 반대되는 의미를 가지고 있다는 느낌도 이 용어를 선택하게 된 이유중의 하나였다. – 웹 퍼블리셔라는 말을 만든 이유 – (hyeonseok.com)

무슨 말인지 쉽게 이해하기는 힘들지만 내가 이해 하기로는 실제로 사용자가 보고 사용하는 웹 페이지를 만드는 사람을 뜻한다고 생각했습니다. 암튼 제가 생각하는 웹 퍼블리셔(요즘은 이 용어에 대한 의문도 많이 생기긴 하지만)는 실제로 사용자가 실제로 사용하는 기술이라면(예를들어 자바스크립트, 플래시, 실버라이트 같은) 다 할 수 있어야 한다고 생각 했습니다.

그러나 무슨 웹 퍼블리셔가 만능 슈퍼맨도 아니고, 그 많은 기술들을 어찌다 마스터해요… 그리고 HTML, CSS만 잘하기도 얼마나 힘든데 말이죠. ㅠ_ㅠ 그래서 저는 웹 퍼블리셔라고 해서 꼭 자바스크립트나 플래시 등을 모두 잘할 필요는 없다고 생각합니다. 자바스크립트를 업무로 한다고 더 실력이 좋은 웹 퍼블리셔라고 생각지도 않고요.

그러나 이전의 포스팅에서도 언급했듯이 웹 페이지를 만드는데 이용되는 기술을 이해하는것은 정말 중요합니다. 사실 내가하지않더라도 다른사람의 작업에 대한 이해도가 있어야 커뮤니케이션에도 문제가 없고 작업의 효율도 올라갈것이기 떄문입니다.

더구나 사용자가 직접적으로 사용하는 기술인 Front-end단의 기술등은 좀더 높은 이해도를 가져야 한다고 생각합니다. 내가 직접적으로 해야하는 작업들만 신경쓰고 타인의 작업을 신경쓰지 않는다면 만들어진 결과물은 결코 좋다고 볼수 없을것같습니다.

다 잘할 수 있으면 더욱 좋구요.

어디까지만 공부해야하는지 고민하지 말고 할 수 있는 만큼은 다 노력해서 최대한 많이 내 자신의 지식으로 만들었으면 좋겠습니다.

웹 퍼블리셔들의 블로그 홍수를 꿈꾼다

제가 처음 웹 표준을 하는 사람들을 만날때는 블로그를 안가지고 있는 사람들이 없었습니다. 이름보다는 각자의 필명을 부르는것이 더 익숙할 정도 였죠. 그당시 사람이 별로 없기도 했지만, 블로그에 자신이 배우고 익힌것들을 포스팅하면서 실력을 높이는 하나의 수단이 되었다고 확신합니다. 요즘에도 사람들을 만나면 제가 하는 많은얘기중 하나는 “자기만의 블로그를 운영해라, RSS를 구독해라” 입니다. 그러나 많은 사람들이 개인 블로그를 운영하는것을 망설이고 있더군요.

이유를 물어보면 보통 나오는 얘기가.

“쓸 얘기가 별로 없어서” 라던가, “제가무슨…”, “좀더 준비해서요” 등의 얘기가 나오드라구요…

제 생각에는 블로그에 꼭 기술 이슈에 대한 얘기 남에게 도움이 될거 같은글만 올려야 한다고 생각하지는 않습니다. 예를 들어 저 같은 경우는 개인적인 관심사나 사는 이야기 등의 이야기도 올리고, 어쩌다 알게된 기술 상식도 올리고 그러고 있습니다. 블로그는 기본적으로 개인적인 일기나 느낌들을 올리거나.. 기술이라도 개인이 자유롭게 작성하면 되는건데  많은 분들이 뭔가 블로그는 아무나 하는게 아닌것처럼 인식되어서 참으로 안타깝더라구요…

저만해도 블로그 업데이트가 정말 뜸하기 떄문에 할말은 없지만, 그래도 블로그를 운영하면 얻는것이 정말 많다고 생각합니다.

블로그를 운영하면서 얻을 수 있는 잇점은 여러가지가 있지만 제가 생각하는 몇가지 잇점을 나열해보면…

  1. 자신이 공부한것을 정리할 수 있다 입니다.우리는 많은것을 배웁니다. 커뮤니티에 질문을 하던, 검색을 하던, 아님 직접 손으로 짜면서 테스트를 하던, 각각의 공부 방법을 통해 우리는 얻는게 있습니다. 그것을 블로그에 정리해두면 나중에 찾아보기도 쉽고, 다른 사람도 쉽게 접근하여 더욱 발전할 수 있는 계기를 만들 수 있습니다. 물론 자신만의 노하우를 가지고 싶은 사람은 싫은 일이겠지만 다먹고 살자고 하는건데 공유하면서 살면 좋자나요 :)
  2. 내꺼니까 이것저것 해볼 수 있다.
    사실 업무로 웹 페이지를 만들때는  지산이 하고 싶은것을 충분히 할 수 없는 경우가 많습니다. 하지만 내 블로그는 내 소유이기 때문에 내 맘대로 지지고 볶고 난리를 쳐도 모라 그럴사람 없습니다. 그야말로 자신의 블로그는 내 코드를 맘껏가지고 놀 수 있는 놀이터인 셈입니다.
  3. 설치형 블로그에 대한 경우 많은 다른기술을 익힐 기회가 있다.
    위의 이것저것과 일맥 상통하는 부분인데 맘만 먹으면 프로그래밍도 해볼 수 있고, 디자인도 해볼 수 있고 역시 내꺼니까 내맘대로 할 수 있고 또 애정을 가지고 해볼수있다는 생각이 듭니다. 사실 일할때는 다른 업무롤 접하기는 힘드니까요.. 이것도 큰 도움이 되지 않을까요?
  4. 말그대로 내 자신에 대한 로그이다.
    저 같은 경우에 해당이 되는데 제 신변잡기를 써놨기 때문에 제가 언제 무엇에 관심이 있었고 뭘 하려했는지 알수가 있습니다. 저는 제 자신의 기록을 따로 많이 해두는 편이 아니라서 그런가…. 블로그가 이럴깨 도움이 많이 되더라구요 (특히 이력서 쓸때;;; )

써 놓고 보니 몇가지 안되기는하는데;;;;;;;; 그래도 위의 두 세가지 정도만 으로도 충분히 가치가 있다고 생각하지 않으시나요? 또한 써 놓고 보니 블로그 라기보다는 개인 홈페이지가 더 필요 할 것 같긴한데… 뭐 암튼 그놈이 그놈이고 ㅋㅋㅋ

블로그를 만들어서 조금의 시간 투자만으로도 좋은 블로그를 만들 수 있을것이고 그런 블로그들이 많이 모여야 한국의 웹 퍼블리싱 시장도 발전 할 수 있을거라는 생각이 듭니다. 요즘 좋은서비스도 많이 나왔고 툴도 많으니 잘골라서 바로 시작해 보세요.

웹 상의 좋은 문서는 모두 영어야 라고 불평만 하지 마시고, 일단 글을 써보세요 쉬운것부터 말이죠…  글이 많아져야 정보도 많이 생기고 경쟁력도 많이 생긴다고 봅니다 저는 ㅎㅎㅎ

하지만 무엇보다 저부터 좀 글좀 많이 써야할텐데 말이죠 ㅠ_ㅠ

저도 웹 표준 좀 잘하고 싶어요

웹 표준을 잘하고 싶다 어떻게 공부해야하느냐 막막하다. 이런 내용의 글들을 많이 보게 되는데요.

“그런거 없습니다. 그냥 열심히 하세요.” 라고 하면 돌 맞을것 같고… 일단은 제가 웹 표준 기반 기술에 대한 것들을 아직 잘 하지 못하는 데다가 제가 공부했던 방식은 닥치고 하다보면 뭔가 생기겠지 라는 방식이었기 때문에 할 얘기도 별로 없습니다. 그러나 주변의 사람들이나 술자리에서 들었던 얘기들을 토대로 이야기를 풀어가 보려고 합니다.

웹 표준을 잘한다는 말은 어떤 의미에서 보면(적어도 한국에서는) HTML, CSS등의 front-end기반의 기술이 높은것을 말하기도 합니다. 또한 웹 접근성에 대한 지식도 높은것을 의미하기도 합니다. 그외 여러가지 알아야 할 것들이 많기 합니다만 천리길도 한걸음부터라고 하나하나 알아가다 보면, 잘하게 되겠죠…

웹 표준 관련 도서

시중에 웹 표준 관련 도서들이 많이 나와 있습니다. 2005년 실용예제로 배우는 웹 표준 (에이콘, 2005)이라는 책이 처음 번역이 되면서 웹 표준 책은 그동안 수도 없이 나왔습니다. 사실 저는 어떤 책을 특히 추천 한다기 보다는, 어떤 책이던지 한 권을 전부 읽는것을 먼저 목표로 잡아야한다고 생각합니다. 사실 책 한 권 보기가 그렇게 쉬운일이 아니죠… 어떤 책이 좋은지 추천을 권하신다면 현석님 블로그의 글을 읽어 보기를 권합니다.

제가 몇가지 권하는 책은

  • 제프리 젤드만의 웹 표준 가이드 (웹 표준의 역사를 알 수 있는 책입니다. 출간된지 오래되어 이해하기 힘든면들이 있을 수 있지만 제게는 제일 좋았던 책입니다.)
  • 웹 표준 교과서 (말그대로 교과서 같은책입니다. 가장 많이 알려지기도 했습니다.)
  • Head first HTML & XHTML with CSS (HTML, CSS 처음배우는 사람에게 권장하는 책입니다. 이시리스 책의 특징은 재미있는구성으로 이해하기가 쉽다는것입니다.)

입니다. 사람마다 기호가 다르고 취향이 다르기 때문에 좋아하는 책도 다릅니다. 뭐 그냥 제 개인적인 생각이니 그냥 지면 낭비용이라고 보시면 될것같아요 :)

RSS Feeding

사실 웹 표준 관련도서가 한국에 전무했을때는 웹 표준을 공부하는데 가장 큰 도움을 주었던 방식이라고 생각합니다. 웹 표준은 단순히 기술만 이해한다고 해서 되는것이 아니라고 생각하기 때문에 사람들의 다양한 생각을 보고 느끼고 자신의 생각을 정리하는데 RSS Feeding 만한 것도 없다고 봅니다. 저는 구글 리더에 각종 RSS주소들을 등록하고 읽고 있습니다. 50여개정도의 RSS를 등록해서 보고 있는데.. 정말 많은 도움이 되고 있습니다. 조만간 CDK 에서 유용한 RSS들을 모아서 공유할까 하는 생각도 있습니다.

Forum, community

우리나라에도 웹 표준 관련 커뮤니티나 포럼들이 많이 존재합니다. 그들과 의견을 공유하고 개개인의 사정을 공감하면 때로는 오프라인에서 만나서 대화도 나누면서 자기자신의 실력을 높이는 방법중 하나입니다. 우리나라에는 대표적인 사이트로 CDK, clearboth, 하드코딩을사랑하는사람들 등이 있습니다:) 그냥 맘에 드는 사이트에서 질문도 하고 의견도 나누고 답변도 하고 그러다보면 배우는것이 정말 많을거라 생각합니다.

Spec 문서 공부 및 영어 =_=;

제가 보기엔 스팩을 보는것이 가장 확실한 방법입니다. 보는데 어려움이 있고 영어로 구성되어있어 이해하기 쉽지는않지만 차근차근 보다 보면 생각보다 문서가 어렵지 않게 구성되어 있습니다. “모든것의 핵심에는 스팩이 있었다” 라고 말할정도로 스팩은 중요합니다. 포럼이나 게시판에서 나오는 질문들의 대부분은 (호환성 이슈를 제외하고) 스팩에 답이 있습니다. 다만 항상 문제가 되는것은 영어라지요. 저도 영어가 이세상에서 이명박 다음으로 싫은데… 사전 좀 찾고 구글 번역기 돌리면 대충 이해할 수 있더라구요. 그리고 영어문서는 보면 볼수록 이해의 폭이 넓어지더라구요. 저같은 까막눈도 이제는 어려워도 조금은 볼 수 있으니 가능할것같아요.

Search

검색만 잘하면 언제나 반은 먹고 들어갑니다. 이것도 하면 할수록 늘어요… 잘키운 검색 습관 열 책 안부럽습니다. ㅎㅎ

다들 열심히 공부해서 웹 표준의 고수가 되어봅시다 :) (저부터도 좀;;;;)