Deutism

쫄깃한 웹 표준!

Archive for the Category Web Standards

HTML, CSS는 어느정도 다 했구요

가끔 보면 XHTML, CSS는 어느정도 다 했는데 이제 뭐할까요. 하는 사람들을 볼 수 있는데…정말 부러워… 그 자신감이… 근데 좀만 얘기하다 보면  아는것보다 모르는게 더 많아… (a 요소의 href가 뭘 말하는지는 아니?)

HTML, CSS좀 해서 약간!!!의 시멘틱한 페이지 좀 만들 수 있고, 브라우저 몇개 맞추면서 웹 접근성 품질마크 한 두번 따보면 HTML, CSS는 대충 다했다고 할 수 있는거 였어?

예전에 내가 좋아했던 카트라이더라는 게임이 있었는데(지금도 좋아해) 그때 통했던 캐쥬얼게임의 정석같은 개념은 “처음에 시작은 쉽게, 하면 할수록 어렵게, 마스터는 정말 어렵게” 였는데 난 HTML, CSS 가 그렇다고 생각해…

한국에 웹 표준 좀 한다고 알려져 있는 사람들 중에 자기는 HTML, CSS 어느정도 했다고 하는 사람 있는지 찾아봐. 그들은 겸손한게 아니라 정말 그 어려움을 알기 때문이라고 생각해(뭐 아닌 사람도 있겠지만)

남들보다 좀더 안다고 생각해서 각종 커뮤니티 활동이나 각종 발표 하는사람들도 너무 겁만주는것도 문제지만 무조건 태그 몇개, CSS 속성만 알면 바로가능 이딴 스레기 같은 얘기 좀 하지 말고(진짜 이런사람은 없지?), 장기적인 관점으로 로드맵을 그려주는것을 목표로 해봐

그리고 HTML,CSS 다하고 javascript하는게 아니라 그냥 다같이 하는거다. 졸라 씨발 단계 생각하지 말고  HTML, CSS 공부하고 있으면 닥치고 좀 봐라. 좀 프로그래밍의 로직도 좀 생각해보고.

p.s1 눈팅하던 하코사는 진짜 탈퇴해야겠다(모르는 사람들이 짜증나는게 아니라, 잘난사람들이 짜증나) CDK도 사람늘어나면 저리 되려나

p.s2 이빨까는 웹표준을 성민님 현석님과 podcast 방식으로 기획했었는데.. 요즘 나꼼수는 재미있더라 근데 우린 찬양할사람이 별로없어서 말이지;;;; 그리고 닥치고 웹표준을 좀 외쳤더니 존경하는 김어준 총수는 닥치고 정치 라는 책을 내었구나. 역시 싱행력이 있어야한다.(까는거 아님 멋진 실행력이 절대 부러운거임 =_=)

p.s3 요즘 맘의 짐을 한 두개 정도 버려 버리고 대충 살기로해서 블로그에서 정제된 언어보다는 내가하고 싶은 말이나 표현을 그냥 여과없이 해보려고

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. 말그대로 내 자신에 대한 로그이다.
    저 같은 경우에 해당이 되는데 제 신변잡기를 써놨기 때문에 제가 언제 무엇에 관심이 있었고 뭘 하려했는지 알수가 있습니다. 저는 제 자신의 기록을 따로 많이 해두는 편이 아니라서 그런가…. 블로그가 이럴깨 도움이 많이 되더라구요 (특히 이력서 쓸때;;; )

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

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

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

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