아스피린 세상

자바스크립트로 구현해본 상단메뉴 스크립트

아스피린 — Wed, 27 Feb 2008 12:56:35 +0900

간만에 스크립트를 올리는것 같네요.. 바쁘다는 핑계로 블로그가 폐허가 된 기분인듯..

제 블로그를 방문해주시는 분들을 실망시키면 안되겠죠.. ( 사실 얼마 안계시겠지만.. )

이번에는 주로 플래쉬에서 다루던 상단 메뉴부분을 스크립트로 바꾸어 보았습니다.

올림푸스 DSLR 라는 사이트의 상단 플래쉬를 스크립트로 구현해 본소스입니다.

아직 많이 부족하지만 혹시나 필요한분이 계시지 않을까하는 조심스런 마음으로 올리는것입니다..

TopMenu_Script_v1.zip

그리고 여러분은 저의 베타테스터 인거 잊지 마시고 댓글로 평가 부탁드려요

나에게 찾아온 로또 4등 당첨이라는 행운

아스피린 — Tue, 24 Jul 2007 10:50:53 +0900

로또 4등 당첨이다.. 푸하하~~ 비록 1등이 아닌 4등 이지만 요놈이 사람의 기분을 좋게 만드네요..

로또사이트에 들어가서 확인해 보니 당첨금이 54,286원!!! 세금때고나면 4만원 조금 넘겠죠....

적지않은 당첨금으로 뭐할까 고민고민하고 있다. 몽땅 삼겹살을 사다 실컷 먹을까.. 아니면 좋아하는 광어 한마리 잡을까.. 아니면 사랑스런 가족들과의 화려한 외출...

올블로그 vs 블로그 코리아

아스피린 — Mon, 16 Jul 2007 18:03:16 +0900

블로그를 시작한지 얼마 안되 올블로그 밖에 몰랐는데 블로그코리아도 유명한 메타 블로그 검색 사이트인것 같더군요..

첫느낌

올블로그 : 제가 올블로그를 알게된건 6월 말부터인데.. 인터페이스가 한눈에 들어오는것이 아주 괜찮더군요. "블로고스피어는 지금" "오늘 가장 많이 추천받은 글" "어제 가장 많이 추천받은 글" 등등 어제와 오늘 어떤일이 이슈였는지 알수 있는것이 좋았습니다.

블로그코리아 : 오늘 오픈해서 방문자가 폭주해서 그런지 모르지만 굉장히 느리다는것입니다. 인터페이스또한 너무 작은감이 없지 않더군요. 가운데부분에 있는 "Hot~!" 부분의 내용이 스크롤 되는부분도 너무 빨라 읽기에는 불편했구요. 올블로그와 달리 현재의 이슈만 나타날수 있는것 같았구요, 단점만 있는 것은 아니구요. "카테고리"라는 부분은 마음에 들더군요.. 제가 관심있는 분야의 글만 읽을수 있다는면에서는요

내블로그 글관리하기

올블로그 : 내블로그의 글 관리하는 부분에 있어서 수집시작과 동시에 진행메세지와 무슨글까지 수집이 완료 되었다는 것을 나타나 금방 확인할수 있었습니다.

블로그코리아 : 블로그코리아 역시 "블로그 관리" 에서 내글관리를 할수 있었지만 일부 글에서는 작성시간이나 카테고리등이 빈칸으로 나오더라구요, 그래서 "Feed 다시수집"를 클릭해서 다시 수집해보려고 했는데 "글 수집을 시작하였습니다. 글의 수집량에 따라 3분정도 소요됩니다" 라는 alert 값만 나와 확인을 클릭했는데. 이게 다 수집되었는지 대한 정보도 없어서 약 5분정도 기다려 봤죠... 그래도 역시 작성시간이나 카테고리등이 빈칸이 나오더군요...

브라우저 확장성

올블로그 : ie브라우저, 파이어폭스, 오페라, 사파리 윈도우버전 등에서 확인해보았는데 거의 동일한 인터페이스를 제공합니다.

블로그코리아 : ie브라우저를 제외한 파이어폭스, 오페라등등 다른 부라우저에서는 깨지더군요..

올블로그는 지금까지 굉장한 발전을 해온것 같습니다. (네이버하고도 맞장뜨고요) 그런면에서 항상 노력하는 점을 엿볼수 있었구요.. 그에 반해 오늘 오픈한 블로그코리아는 아직 인터페이스 등에서 아직은 노력을 해야 할것 같습니다. 그리고 브라우저 확장성에도 신경을 많이 써주셨으면 합니다.

아직은 블로그코리아가 시작이므로 앞으로 많은 발전이 있으리라 생각됩니다.

하여간 블로거들을 위한 또하나의 장소가 나와 기쁘네요..

사파리 베타 3.0.2 윈도우버전을 사용해보고..

아스피린 — Sun, 15 Jul 2007 21:14:55 +0900

웹표준 마크업을 하면서도 언제나 허전하다는 느낌이 있었다.. 그건 언제나 맥의 주 브라우저인 사파리에서 테스트를 못해본다는 것이였다. 그렇다고 가난한 웹퍼블리셔로써 맥을 살수도 없고..

그러던중 사파리 윈도우 베타 버전이 나왔다는 소리를 듣고 바로 다운받아 사용해 보았습니다. 그런데 결과는 실망!!! 베타버전이라 엄청난 것을 기대했던 것은 아니지만 한글이 단 한줄도 안나오는것이 아닙니까.. 흑흑흑~~~

얼마전 사파리 베타 3.0.2 윈도우버전이 나왔다는 소리를 듣고 망설이다가 다시 다운받아 설치하고 올블로그에 들어가는 순간 감격 한글이 나오는것이 아닙니까. 아직은 폼에서의 한글입력등 버그들이 없는것은 아니지만 저로써는 웹퍼블리셔로써 이상없이 마크업이 되었는지 확인하는데에는 이상이 없더라구요..

아직은 베타버전이니 정식버전이 나오면 괜찮아 질것으로 생각됩니다. 한글 안나오던것도 금방 고친 편이니까요...

참고로 홈페이지에 업데이트 내용도 있던데 영어 잘하시는 분은 들어가서서 참고 하셔도 될듯 하네요

사파리 베타 3.0.2 윈도우버전을 받으실 분은 여기를 클릭하신후 이메일주소만 기입후 다운받으시면 되요

내 개인정보가 인터넷바다에 떠다닌다.

아스피린 — Sun, 15 Jul 2007 13:31:46 +0900

처음 인터넷을 접했을때는 생각없이 적었던 개인정보가 어느세인가 걱정거리가 된지 오래라고는 생각하면서도 해결책은 아직 없는것 같습니다.

오늘 인테넷을 돌아다니다. 한겨레 신문에 "중국 웹사이트에서 실명 검색해보니 개인정보 '와르르'" 라는 기사를 보게 되었다. 여전히 중국사이트 어딘가에는 자신도 모르게 이름과 주민등록번호가 떠다닌다는것이다. 새로울것 없는 뉴스이긴 하지만 한편에선 내 개인 정보도 거기 어딘가에 있지 않을까 하는 생각에 어느새 중국의 차이나닷컴에 들어가 검색하고 있는 제 모습을 보게 되네요.

제 이름을 검색해보니 안나오는것 같다라구요.. 그래서 흔한 다른 이름으로 검색을 해 보았는데. 신문 기사처럼 엄청나게 나오더군요. 한국 사이트도 아닌 중국 사이트에 올라가 있는 저 정보들을 삭제하기는 정말 힘들겠죠.

네이버 뉴스검색에서 '개인정보'라고 검색해보니 총 29,347건이 검색되더군요.

이명박 가족 '주민초본' 발급 前공무원 영장…배후는 누구
국제결혼정보·대출업체 등 개인정보 ‘묻지마 수집’
구청 홈페이지 통해 개인정보 유출

그 기사들을 읽다보면 산으로 들어가 조용히 살아야 될것 같다는 생각이 들더군요.

네이버와 다음, MSN등 주요 포털들이 '아이핀'이라는 서비스를 도입해 회원가입시 주민등록번호를 기입하지 않고 가입이 가능하게 할것이라고 하니 그나마 다행이라고는 생각이 드네요

네이버-다음 가입할때 주민번호 안써도 된다

늦게나마 인터넷가입시 찜찜하게 주민등록번호등을 써야만 했던것이 이제 그렇게 하지 않아도되 다행이긴 하지만, 개인정보가 흘러나가는 많은부분이 공공기간이나 기업등을 믿고 기입했던 문서상의 개인정보등이 절차없이 그냥 고물상으로 흘려들어가거나 쓰레기장에 방치되어 생기는 부분도 적지 않다는 생각입니다.

그리고 벌써 인터넷상에 떠다니는 개인정보 또한 해결책을 고심해보아야 하는것이 아닐까요.. 최소한 정부및 공공기관들이 국민들의 개인정보를 소중한게 생각 마음이 있다면요..

나우콤의 아프리카 TV를 보면서..

아스피린 — Sat, 14 Jul 2007 17:29:55 +0900

처음에 나우콤의 아프리카 TV를 접했을때.. 신선하기는 하지만 과연 이 서비스가 성공할수 있을까 하고 스쳐 지나간적이 있었습니다.

하지만 현재 이사온곳의 케이블 TV가 요금이 계속올라가고 서비스도 안좋다는 소문이 있어 신청하지 않고, 그냥 공중파 방송만 시청하는 저에게 아프리카 TV는 정말 케이블 TV 그 이상이였습니다.

아프리카 TV에 접속해보니 정말 다양한 장르의 채널이 많았고, 좋아하는 게임을 보고 싶을때 아프리카 TV에 접속해서 아마추어클랜끼리 벌이는 리그를 보며 같은 채널을 보고 있는 사람들끼리 채팅을 하면서 의견도 나누고 탄성을 지를수 있다는 점에서 케이블 TV의 프로리그를 보는 그 이상의 재미가 있었기 때문입니다.

어쩌면 이 서비스야 말로 한창 인터넷에서 떠들고 있는 웹2.0 서비스가 아닐까요! 방송에서 보여주는것을 일방적으로 보는 것이 아닌 사용자끼리 정보를 나누고 시청도중에 게임에 직접 참여도 할수 있으니까요.

문제점이 없는것은 아닙니다. 채널중에는 공중파와 케이블 TV의 프로그램들을 라이브로 보여주거나, 아니면 영화 파일을 다운로드 받아 보여주는 형태로 이는 엄연히 저작권 위반이니까요. 하지만 요즘 접속해보면 사용자가 직접 만들어 가는 형태로 방송되는 채널들이 조금씩 증가하고 있으며 제가 즐겨보는 게임채널도 아마추어 클랜들을 모아 직접 리그를 만들고 그것을 방송소재로 사용하여 아마추어리그만의 재미를 느낄수 있으니까요.

앞으로 저작권문제만 해결된다면 아프리카 TV는 세계적인 웹2.0 서비스라고 하는 유튜브나 플리커보다 더 진보한 서비스가 되지 않을까 하는 생각을 감히 하네요.

여러분도 한번 접속해 보세요, 게임뿐만 아니라, BJ들의 음악방송 그리고 현실감 있는 스포츠 중계를 듣게 될것이니까요

기다리던 [DOM 스크립트] 한국어판 출간

아스피린 — Fri, 13 Jul 2007 13:15:17 +0900

요즘 한참 DOM에 관심을 가지고 있었는데 작년에 윤석찬님이 번역하고 있다는 소리를 들어 기다리던 책이였는데 그디어 출간 했네요..

기다리던 책이였는데 윤석님의 블로그에서 '트랙백 이벤트’를 한다고 해서 우선 참여 하려구요...

여러분도 DOM의 세계에 빠져 보세요..

책 소개 (에이콘 출판사)
예스 24 예약

iframe 문서 높이 자동조절하기

아스피린 — Thu, 12 Jul 2007 21:01:01 +0900

사이트를 만들다 보면 iframe을 사용하여 다른 문서를 삽입해야 할때가 있습니다.

이때 iframe의 크기를 자동으로 조절해야 할때가 있는데 이럴때 Javascript 의 element객체의 속성인 offsetWidth와 offsetHeight 을 이용하여 iframe의 크기를 자동으로 조절할수 있습니다.

아래의 파일을 다운받으시면 main.html, iframe_src.html 이렇게 2개의 파일이 있는데

iframe_auto_1.zip

핵심은 다음과 같습니다.

main.html

iframe_src.html

잠깐 문서에 대해 이야기를 하자면 offsetHeight는 높이를 구하는 부분으로 넓이를 구하려면 offsetWidth 속성을 사용하면 됩니다. 물론 그에 대응하는 iframe의 넓이를 수정하려면 style.height을 style.width로 바꾸면 됩니다.

한가지 주의 하셔야 할것은 두문서가 같은 도메인상에 있어야 하다는 것입니다.

자바스크립트로 구현해본 동적인 상품 스크롤

아스피린 — Thu, 05 Jul 2007 01:27:16 +0900

주로 쇼핑몰에서 플래쉬로 구현되어 오던 상품 스크롤 부분을 스크립트로 구현해보았습니다.

디앤샵에 근무할때 구현했던 디앤샵의 유러피언패션몰을 작업할때 구현했던 상품 스크롤 스크립트입니다.

물론 아직 미흡한점이 많으니 다운받으셔서 더 좋은 상품 스크롤 스크립트를 만들어 보세요...
그리고 댓글로 평가도 부탁드려요...

commodity_scroll_1.zip

자바스크립트를 사용해 접근성을 유지한 스크롤 배너

아스피린 — Tue, 03 Jul 2007 13:18:08 +0900

예전에 웹디자이너 할때는 많이 찾던 5day라는 사이트에 들어가 이곳저곳을 구경하다가 헨켈 코리아 오피셜이라는 사이트를 보게 되었고, 플래쉬로 되어 있던 제품소개 부분의 스크롤 배너를 자바스크립트로 만들수 없을까 하다가 만들어본 스크립트 입니다.

헨켈 코리아 오피셜

제가 Javascript DOM을 공부하면서 관심있는 부분이 플래쉬로 되어 있는 부분을 Javascript DOM으로 구현이 가능하지 않을까 하는 것입니다. 그래서 아래와 같이 만들어 만들어 보았습니다.

첨부파일도 있으나 다운받으셔서 저보다 더 좋은 스크롤배너를 만들어 보세요
그리고 댓글로 평가도 부탁드려요...

scroll_banner_1.zip

css 적용에 따라 스크롤 배너가 화면출력

마크업 소스 보기

css 마크업 부분

<style type="text/css">
#Banner_Box { position:relative; width:426px; height:113px; background:url(banner_bg_1.gif) no-repeat left top; overflow:hidden; }
#Banner_Box img { border:none; }
#Banner_Box ul { position:relative; width:424px; height:90px; overflow:hidden; margin:14px 1px 0px 1px; padding:0px; list-style:none; }
#Banner_Box ul li { position:absolute; height:90px; left:0px; top:0px; }
#Banner_Box ul li a { float:left; display:block; height:90px; text-indent:-5000px; }
#Banner_Box ul li a.line_0_off { background:url(banner_pic_0_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_0_on { background:url(banner_pic_0_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_1_off { background:url(banner_pic_1_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_1_on { background:url(banner_pic_1_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_2_off { background:url(banner_pic_2_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_2_on { background:url(banner_pic_2_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_3_off { background:url(banner_pic_3_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_3_on { background:url(banner_pic_3_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_4_off { background:url(banner_pic_4_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_4_on { background:url(banner_pic_4_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_5_off { background:url(banner_pic_5_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_5_on { background:url(banner_pic_5_on.gif) no-repeat left top; }

#Banner_Box ul li.widths { width:54px; }
#Banner_Box ul li.widths a { width:54px; }
#Banner_Box ul li.widthb { width:154px; }
#Banner_Box ul li.widthb a { width:154px; }
</style>

html 마크업 부분

<div id="Banner_Box">
<ul>
<li><a href="#">살충제</a></li>
<li><a href="#">방향제</a></li>
<li><a href="#">목욕제품</a></li>
<li><a href="#">소비자접착제</a></li>
<li><a href="#">건축용제품군</a></li>
<li><a href="#">산업용제품권</a></li>
</ul>
</div>

script 마크업 부분

for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLocation[i] = BannerWidth_S*i;
this.BannerList.item(i).style.left = this.BannerLocation[i] + "px";

this.BannerLink = this.BannerList.item(i).getElementsByTagName("a")[0];
this.BannerLink.Num = i;
this.BannerLink.onmouseover = function() {
eval(BannerName+".BannerMove("+this.Num+")");
}
}

this.BannerRandom = Math.floor(Math.random()*this.BannerTotal);
this.BannerMove(this.BannerRandom);
}

BannerOver.prototype.BannerMove = function(val) {
this.BannerTargetSetting(val);
this.BannerLiMove(val);
}

BannerOver.prototype.BannerTargetSetting = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLiw = this.BannerList.item(i);
this.BannerImg = this.BannerLiw.getElementsByTagName("a")[0];
if ( (val+1) == i ) { this.BannerTempWidth = BannerWidth_B } else { this.BannerTempWidth = BannerWidth_S }
if ( i == 0 ) {
this.BannerTarget[i] = 0;
} else {
this.BannerTarget[i] = this.BannerTarget[i-1] + this.BannerTempWidth;
}
if ( val == i ) {
this.BannerLiw.className = "widthb";
this.BannerImg.className = "line_" + i + "_on";
} else {
this.BannerLiw.className = "widths";
this.BannerImg.className = "line_" + i + "_off";
}
}
}

BannerOver.prototype.BannerLiMove = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLocation[i] += (this.BannerTarget[i] - this.BannerLocation[i]) * 0.2;
if ( Math.abs((this.BannerTarget[i] - this.BannerLocation[i])) < 2 ) {
this.BannerTarget[i] = this.BannerTarget[i];
this.BannerList.item(i).style.left = this.BannerTarget[i] + "px";
} else {
this.BannerList.item(i).style.left = parseInt(this.BannerLocation[i],10) + "px";
setTimeout(BannerName+".BannerLiMove("+val+")",100);
}
}
}

var BannerName = "BannerScroll";
var BannerBox = "Banner_Box";
var BannerWidth_S = 54;
var BannerWidth_B = 154;
var BannerScroll = new BannerOver();
</script>

팝업창의 접근성을 높이기

아스피린 — Mon, 02 Jul 2007 16:27:22 +0900

자바스크립트를 사용하는 방법중 비교적 사용빈도가 높은것이 window의 메소드인 popup을 이용해 팝업창을 만드는 것입니다.

그럼 먼저 window의 메소드인 popup의 사용법부터 보겠습니다.

window.open(strUrl,strWindowName,strWindowFeatures);

strUrl : 읽어들일 url을 지정하는 곳입니다.

strWindowName : 팝업의 이름을 지정하는 곳입니다.
- 윈도우 또는 프레임 이름
- _blank : 이름이 없는 새로운 윈도우를 연다.
- _parent : 현재 문서의 parent 윈도우에 문서를 연다.
- _self : 현재 문서에 새로운 문서를 연다.
- _top : 원래 문서가 프레임에 있을 경우 최상위에 있는 프레임에 새로운 문서를 연다.

strWindowFeatures
- width : 팝업 윈도우의 넓이를 지정하는곳 입니다.
- height : 팝업 윈도우의 높이를 지정하는곳 입니다,
- top : 화면의 상단으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
- left : 화면의 좌측으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
- titlebar : 팝업윈도우의 제목 막대를 보일 것인가를 지정하는곳 입니다.
- menubar : 메뉴막대를 보일것인가를 지정하는 곳입니다.
- toolbar : 브라우저의 도구막대를 보일것인가를 지정하는 곳입니다.
- location : locationbar를 보일 것인가를 지정하는 곳입니다.
- status : 팝업윈도우에 상태바를 보일 것인가를 지정하는 곳입니다.
- scrollbars : 팝업윈도우에 수직, 수평 스크롤 막대를 보일 것인가를 지정하는 곳입니다.
- resizable : 팝업윈도우의 크기를 변경할 수 있는가를 지정하는 곳입니다.

window.open 메소드의 속성중 Features내용

접근성을 고려한 방법

ex)
<a href="http://cleanup.tistory.com/" onclick="PopupOpen(this.href,'cleanup',400,300);return false;">아스피린 세상</a>

올바른 xhtml, html 문서형 정의

아스피린 — Sun, 01 Jul 2007 16:52:00 +0900

드림위버로 마크업을 할때 html파일을 만들게 되면 맨 위부분에 <!DOCTYPE HTML.. 로 시작하는 문구를 본적이 있을 것입니다.

예전에 작업할때는 이부분을 빼버리고 작업을 하거나 적어 놓더라도 무슨 의미인지 몰랐던 사람들이 대부분 이였을 것입니다.

하지만 이부분은 브라우저에게 자신이 마크업한 문서가 html 4.01의 Strict 인지 아니면 xhtml 1.0 Transitional 인지를 정확하게 가르쳐 주는 부분으로 중요한 부분이라고 할 수 있고 반드시 문서의 맨위에 삽입되어야 하는 부분입니다. 가끔 프로그래머들이 정의해준 문서형 정의 위부분에 자신들의 코드를 삽입하는 경우가 흔하게 있는데.. 이때는 여러분이 그러면 안된다고 꼭 가르쳐 주세요.. 프로그래머들도 일부러 그러는게 아니고 문서형의 중요성을 몰라서 그러는거니까요.

html이나 xhtml에 따라 버전별로 문서형(DTD::Document Type Definition)이 존재하고, 문서형의 종류에 따라 태그와 속성, 속성값등을 지정할수 있는지 정의하는 부분이기 때문이다.

문서형의 종류에는

HTML 4.01 Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Mobile 1.0
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

웹표준 교과서 책을 받고서...

아스피린 — Fri, 29 Jun 2007 17:01:20 +0900

평소 친하게 지내던 후니넷의 운영자이신 훈님께서 "웹표준 교과서" 보내 주셨네요... ㅋㅋ 안그래도 책값이 만만찮았는데 만빵 고마워서...

전에 훈님께서 감수하시던거 갈취해서 조금 읽어 보았는데.. 내용이 정말 좋더군요.. 감히 우리나라에서 나온 웹표준 관련 책중에서 정말 교과서라고 할 정도 감동이였습니다.

저도 웹표준을 공부하고 작업한지 꽤 되었다고 생각했는데 이책을 보면서 미쳐 몰랐던 부분이 있을줄이야... 이제 책도 받았으니 보내주신분 생각해서 열심히 공부해야겠네요..

이제 좋은 책들도 많이 나오는걸 보니 우리나라의 모든 웹사이트들이 웹표준은 물론이고 웹접근성이 항상 되는것은 시간문제겠는데요..

여러분도 책값 비싸다 생각하지 마시고 꼭 한번 서점에 가서 조금만 탐닉해보세요.. 정말이지 지갑이 열리는건...

인터파크, 알라딘, YES24, 리브로

공공기관 홈페이지 2009년 까지 모두 표준화

아스피린 — Fri, 29 Jun 2007 15:16:00 +0900

전자신문에 공공기관 홈페이지 2009년 까지 모두 표준화 라는 기사가 나왔네요..

하여간.. 2009년까지 전국의 모든 공공기관 홈페이지를 표준화 한다는 계획을 발표 했네요... 이거 정말 웹표준을 추구하는 웹퍼블리셔로써 정말 환영할 만한 뉴스였습니다.

기사내용에 "행자부는 오는 10월 각종 호환성 문제 해결을 담은 공공기관 홈페이지 표준화안 ‘행정기관 웹표준’(가칭)을 공개하고 우선 올 연말 국민참여포털부터 시범 적용할 계획이다."
라는 내용이 있던데.. 이 내용이 책상에서 앉아서 정책만 만들어내는 탁상공론에서 나온 정책이 아니였으면 합니다.

기사를 읽으면서 갑자기 저 정책이 과연 가능할까 하는 생각이 드는 것은 왜 일까요..

첫번째 보완점 :

지금 현실에서도 웹표준과 관련된 웹퍼블리셔나 UI개발자를 찾기 힘들어 몇개월째 구인 공고를 내놓은 웹에이전시가 많은 마당에 그 많은 공공기관의 홈페이지를 웹표준화 할수 있을까 하는 의문입니다.

가이드 물론 중요 합니다. 하지만 가이드만 있으면 가능하다는 생각뿐 아니라. 웹표준과 관련된 웹퍼블리셔의 인재양성에 관한 계획도 있으면 합니다.

두번째 보완점 :

기사 내용에 "△장애인 접근성 개선"이라는 내용과 같이 웹접근성에 대한 이야기도 있기는 한데 대부분이 플랫폼이나 브라우저에 관계없이 이용하고 액티브X를 해결하는등.. 대부분이 웹표준인 크로스 브라우징에 대한 내용으로 채워져 있는 것 같더라구요...

가이드를 만드실때.. 크로스 브라우징뿐만 아니라 웹접근성 향상을 위한 부분도 추가해서 작업해 주시면 좋겠네요.. 웹접근성은 장애인등 사회적 약자만을 위한 것이 아니기 때문입니다.

예를 들어 육교를 만들때 육교를 이용할수 있는 계단만 놓는 것이 아닌 약간의 경사가 있는 길이나 엘레베이터를 놓으면 장애인, 노인, 어린이 뿐만 아니라 무거운 짐을 옮기는 사람이나 자전거를 타고 다니는 사람들까지도 편하게 이용할 수 있습니다. 같은 이유에서 웹페이지를 만들때 웹접근성을 향상시키는 것은 모든 사람이 이용할수 있다는 점에서 중요하다고 생각하기 때문입니다.

"공공기관 홈페이지 2009년 까지 모두 표준화" 라는 좋은 정책이 중간에 암초에 부딪치지 않았으면 하는 마음에 몇글자 적어보았습니다.

서울속의 섬 선유도를 다녀와서..

아스피린 — Fri, 29 Jun 2007 13:59:38 +0900

서울에 올라온지 이제 2년이 다되어 가도록 못갔던 가족 나들이를 선유도로 가보았다...

서울이 삭막해 보였는데... 선유도에 가보니 꼭 그런것만은 아닌것 같았다.. 무지 덥기는 했지만 일상속에서 탈출해 자연을 느끼기에는 좋은 장소였다.

선유도

[검색추가] 티스토리에 둥지를 틀며...

아스피린 — Fri, 29 Jun 2007 13:21:00 +0900

처음으로 티스토리에 블로그라는걸 만들어 보았습니다.

아직은 어떤 보따리로 글을 써야 할지 막막하지만요... ^.^;;;

저는 웹퍼블리셔 입니다. 그리고 이 직업이 자랑스럽습니다.

특히 요즘과 같이 web2.0이라는 큰 화두속에서 웹퍼블리셔의 역할은 그 어느 직군보다도 중요한 포인트라고 생각합니다.

웹퍼블리셔라는 직군에서는 현재 크로스 브라우징과 웹접근성이라는 큰 과제와 함께 과도기라 할 정도로 정확한 정답이 없는 상태입니다.. 이러한 점에서 매력이 있는거 같습니다.
정답이라는게 없기 때문에 어떤 결과물을 표현하기 위해서 수많은 방법이 있어.. 그 어느 누구라도 자신만의 스타일로 표현할 수 있기 때문이죠
단, 의미론적으로 접근해야 한다는것만 잊지 않는다면요

하지만 웹퍼블리셔라는 직군에 있으면서 회의를 느낀적도 많아요.. 그건 우리나라 클라이언트들은 자신들의 웹사이트에 화려하고 비쥬얼한 부분이 있어야 있어보이는 웹사이트를 만들수 있고. 그부분을 해결해 주는것이 플래쉬라고 생각하고 있는지.. 요즘 대부분의 사이트들은 플래쉬를 남발 하고 있다는 거죠... 사실 플래쉬는 그래픽툴로써 요즘 화두가 되고 있는 웹접근성에는 맞지 않다는거죠 그래서 저는 Javascript의 Dom을 이용해 비쥬얼한 움직임을 주면서도 웹접근성에도 뛰어날수 있다고 생각해 Javascript의 Dom에 빠져 있죠...
아직은 많이 부족하지만요.

이제 웹퍼블리셔가 단순히 디자이너들의 작업물인 PSD파일을 받아서 이미지를 쪼개 표현하고 프로그래머에게 넘기는 보조적인 역할이 아닌 프로젝트 자체를 이끌어가는 역할을 할때가 왔다고 생각합니다.

앞으로 제 블로그를 찾아 오는 많은 분들과 어느 브라우저로 접속하더라도 웹사이트의 정보를 이용하는데 어려움이 없게 만드는 크로스 브라우징과 한걸은 더 나아가 어떤 장애나 나이에 상관없이 정보를 이용할수 있는 웹접근성에 대해 이야기 하고 배웠으면 좋겠습니다...

처음 글을 쓰는거라 정말 두서없이 글을 적은거 같네요...