페이지오프: 2008

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 제작 방법에 대해서 궁금해 하는 웹퍼블리셔들에게 좋은 소스가 될 것 같군요. 모름지기 다른 사람이 잘 만들어 놓은 소스를 까 보는 것이 가장 큰 공부가 되곤 하죠.

2008년 12월 25일 목요일

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

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

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

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

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

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

2008년 12월 14일 일요일

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

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

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

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

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

2008년 11월 29일 토요일

크로스 브라우징 세미나와 웹퍼블리셔들의 수다 모임

한동안 포스팅이 뜸했습니다. 개인적으로 회사를 옮기면서 적응하는 시간도 필요하기도 하고 글빨이 잘 오르지 않아서 머뭇 거린 까닭도 있었네요. 하지만 너무 오래 방치하면 그것도 아니다 싶어서 새 회사 이야기와 오늘 Skell83님의 '크로스 브라우징' 세미나를 다녀온 이야기를 짧게 포스팅해볼까 합니다.

서현역 앞 대로입니다. 육교 위에서 찍은 사진인데 분당구 신시가지 쪽으로는 길이 시원시원해서 좋더군요. 수원 집에서 720-1, 720-2번을 타고 1시간에서 1시간 반 정도 걸립니다.

새 회사는 분당구 서현동에 위치해 있습니다. 출근 첫 날 찍은 사진인데 서현역 위에 위치한 삼섬 플라자가 거대해 보이네요.

제가 근무하고 있는 사무실입니다. 연구소라 전임과 선임 연구원들은 주로 2인 1실이 제공되고 있고, 책임급 이상은 1인 1실을 사용하고 있더군요. 저는 아직 파트너가 없어서 2인 1실을 혼자 쓰고 있습니다. 개인 책상과 서랍, 책장이 제공됩니다. 필요한 책과 문서들을 가져다 놓았는데도 책장은 휑합니다. 그리고 모질라 10주년 기념 포스터(미첼 베이커씨의 친필 싸인본!!)와 웹표준 포스터를 나란히 붙였습니다. 이래야 제 자리같아 보이죠^^ 나흘째쯤 되는 날 찍은 사진이라 모니터가 한 대 뿐인데 지금은 회사에서 한 대를 추가로 지원해 줘서 듀얼을 사용하고 있습니다.

그리고 오늘은 종로 토즈점에서 곧 입대를 하게 되는 Skell83님의 송별 세미나(?)가 있었습니다. '크로스 브라우징'이라는 주제로 장장 4시간에 걸친 세미나였구요. 저와 진달래님이 도우미로 참석을 했죠. 일반 참석은 스무분 정도가 해 주셨고, 대부분 하코사 회원 분들이셨습니다. 몇 번 뵌 적이 있던 분들도 계셨고 오늘 처음 인사를 드린 분들이 많아서 반가웠습니다.

Skell83님은 이 바닥에서 이미 '신의손'이라는 또 다른 닉네임을 가졌을 정도로 실력이 출중하신데 말씀도 너무 잘 하시더군요. 오늘 한 수 배워갑니다.

미리 준비해 오신 강의 자료와 화이트 보드를 통해 직접 그림도 그려가며 4시간 동안 정말 열심히 강의해 주셨는데 뒤풀이 1,2차에서도 연신 말씀을 줄이지 않으시더군요. 실제로는 한 10시간 강의 하신 셈이죠? 하하

노트북까지 챙겨오셔서 필기를 하시던 차 대표님~ 그런데 맥북인데 윈도우가 왠 말이란 말입니까~

보통 이렇게 긴 세미나에서는 조는 분이 있기 마련인데 Skell83님의 개그 때문이었는지 다들 안 졸고 잘 들어주셨습니다. 아니 졸지 않은 척 잘 하시는 분들만 오셨나요? 하하

오후 2시에서부터 6시까지 짧지 않은 세미나를 마치고, 몇 몇 분들을 빼고는 다들 삼겹살을 메뉴로 저녁을 함께 하고, 근처 인사동 한글로 표기된 '스타벅스커피'에서 커피로 기름기를 달래며 수다를 이어갔었습니다. 보통 2차는 술자리이기 마련인데 오늘은 유난히 여성 분들이 많았고, 주인공인 Skell83님이 오늘은 특별히 음주를 삼가셨기 때문에 다들 커피로 결정을 보았죠.

이런 자리가 항상 즐거운 까닭은 아무래도 같은 일을 하는 사람들을 만나서 서로의 경험을 공유할 수 있다는 것 때문이지 않나 싶습니다. 웹퍼블리셔라는 직업을 가진 사람이 아직은 절대적으로 많지도 않고, 나아지고 있기는 하지만 업계 전반적으로 받는 대우가 썩 좋지 않아서인지 아쉬운 점, 불만과 서운한 이야기. 앞으로의 비전과 가능성, 도전 과제- 같은 이야기들이 결코 아깝지 않은 시간이 되었죠. Skell83님은 이때까지도 왜 웹표준을 해야 하느냐? 왜 핵을 쓰지 않아도 되느냐에 대해서 열띤 강론을 펼치시더군요. 4차 자리가 없었던게 꽤나 아쉬우셨을것 같았습니다.^^

2008년 11월 15일 토요일

간단한 이미지 슬라이더 만들기

과거에는 게시판을 활용한 이미지 갤러리를 활용하는 일이 많았다. 하지만 근래 들어서는 라이트박스 효과와 더불어 슬라이더 형태의 이미지 갤러리를 많이 적용하는 것을 볼 수 있다. 특별히 메인 화면과 같이 콘텐츠의 양이 많은 경우 공간을 효과적으로 활용하기 위한 방법으로 많이 사용된다. 플래시 무비를 활용하는 경우도 있지만 크게 어렵지 않게 자바스크립트를 이용해서도 만들어볼 수 있어서 소개한다.

가장 먼저 다음과 같이 보이도록 마크업과 스타일시트 작업을 한다.

이미지 목록과 콘트롤 버튼을 정의하고, 목록을 <UL>요소로 정의했다.

<div id="result"></div>
<h1>Image Slider</h1>
<div id="imageSlider">
<div class="imageList">
<ul>
<li><img src="http://www.clearboth.org/study/081112/thumb_01.png" width="84" height="84" alt="썸네일 이미지 1" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_02.png" width="84" height="84" alt="썸네일 이미지 2" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_03.png" width="84" height="84" alt="썸네일 이미지 3" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_04.png" width="84" height="84" alt="썸네일 이미지 4" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_05.png" width="84" height="84" alt="썸네일 이미지 5" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_06.png" width="84" height="84" alt="썸네일 이미지 6" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_07.png" width="84" height="84" alt="썸네일 이미지 7" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_08.png" width="84" height="84" alt="썸네일 이미지 8" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_09.png" width="84" height="84" alt="썸네일 이미지 9" /></li>
<li><img src="http://www.clearboth.org/study/081112/thumb_10.png" width="84" height="84" alt="썸네일 이미지 10" /></li>
</ul>
</div>
<div class="controller">
<input type="button" value="◀" title="앞으로" class="btn_prev" />
<input type="button" value="▶" title="뒤로" class="btn_next" />
</div>
</div>

이미지 목록을 담은 <UL>요소를 reliative로 정의한 것에 주목하자.

div#imageSlider { position: relative; width: 600px; height: 100px; border: 1px solid #ccc; }
div#imageSlider div.imageList { position: relative; width: 500px; height: 86px; margin: 8px 50px 0; overflow: hidden; }
div#imageSlider div.imageList ul { position: relative; left: 0; list-style: none; width: 1000px; margin: 0; padding: 0; overflow: hidden; }
div#imageSlider div.imageList ul li { float: left; margin: 0 17px 0 0; }
div#imageSlider div.imageList ul li img { border: 1px solid #ccc; }
div#imageSlider div.controller input { position: absolute; top: 12px; width: 30px; height: 80px; cursor: pointer; }
div#imageSlider div.controller input.btn_prev { left: 10px; }
div#imageSlider div.controller input.btn_next { right: 10px; }
#result { position: relative; top: 0; left: 0; height: 20px; padding: 5px; }
.alert { background: #FF0000; color: #fff; }

자바스크립트를 작성하기 전에 어떻게 작동시켜야 할지를 고민해보자.

각각의 이미지들은 <LI>요소로 감싸고, 목록은 <UL>로 감싸 주었다. 그리고, <UL>요소는 <DIV>요소로 감싸고 있다. 좌우로 버튼이 위치해 있다.
위 설계도를 보면 <DIV>요소가 <UL>요소보다 가로 길이가 짧다. 즉, <UL>요소의 일부분만을 보여주도록 구멍 역활을 하고 있다고 보면 된다. 좌우에 위치한 버튼을 선택했을 때 자바스크립트가 <UL>요소의 left 속성 값을 변경하면서 <DIV>요소를 통해 보여지는 위치를 바꾸게 된다. 이것이 이미지 슬라이더의 기본적인 원리이다.

자바스크립트를 살펴보자.

window.onload = function()
{
res = document.getElementById("result");
imageSlider(103, 1); // Move Width, Move Item Count
}

HTML 문서가 웹브라우저에 의해 모두(이미지 포함) 렌더링 되면 imageSlider 함수를 실행한다. res 변수는 인덱스 값 등 작동 결과를 임시로 보여주기 위한 것이다.

imageSlider 함수가 하는 역활은 간단하다. 한번에 이동할 가로 길이의 값과 한번에 이동한 이미지의 수를 정하고, 좌우 버튼의 이벤트를 활성화 시키는 것이다.

sliderNext 함수는 <UL>요소의 left 속성값을 현재값에서 한번에 움직여야 할 값을 뺀 값으로 설정하여, 결과적으로 사용자에게 우측에서 좌측으로 이미지들이 한칸씩 움직이는 것처럼 보이게 한다. 한번 움직여 질 때마다 curr_idx 변수는 현재 보이는 <LI>요소의 인덱스 값을 기억하고 있다가 더이상 보여질 <LI>요소(이미지)가 없을 때 경고 메세지를 보여준다.

sliderPrev 함수 역시 sliderNext 함수와 똑같다. 단지 left 속성 값을 현재 값에서 빼지 않고 더해서 이번에는 좌측에서 우측으로 움직이는 것처럼 보이게 할 뿐이다. 역시 더이상 보여질 이미지가 없는 경우 에러 메세지를 보여준다.

[데모]

텍스트큐브닷컴 검색 화면

제가 사용중인 텍스트큐브닷컴에 별도의 검색 페이지가 있었네요.

위와 같이 검색창과 검색결과 텍스트큐브닷컴 내의 추천블로그를 보여주고 있습니다. 텍스트큐브닷컴 내의 블로그만을 대상으로 삼고 있기 때문에 많은 결과를 보여주고 있지는 않습니다.

텍스트큐브닷컴에는 네트워크라는 기능을 제공하면서 비슷한 주제를 다루는 블로거들끼리 서로 연결될 수 있도록 하고 있습니다. 위의 검색 기능을 이용하면 자신의 주제와 같은 내용을 담고 있는 텍스트큐브닷컴내의 블로거들을 좀 더 쉽게 찾아볼 수 있을 것 같습니다.

2008년 11월 4일 화요일

민간부문의 장애인 웹 접근성 제고 세미나 발표자료 링크

민간부문의 장애인 웹 접근성 제고 세미나가 지난 11월 3일 열렸었습니다. 너무나 좋은 발표가 많았던 날이었는데 회사내 사정 때문에 참석하지 못했는데 발표자료가 정보통신 접근성 향상 포럼(IABF)에 바로 올라왔네요. 저처럼 자리에 참석하지 못하셨던 분들께 공유라도 해 드리고자 링크를 모아봤습니다. 해당 자료는 IABF 게시판에서도 그대로 내려받아보실 수 있습니다.

2008년 11월 1일 토요일

파이어폭스 점유율 20% 넘을듯

10월 중 20% 내외의 점유율을 유지하고 있는 파이어폭스

Market Share에 11월 1일자 헤드라인 기사로 파이어폭스가 10월중 2주간 세계 점유율 20%를 기록(Firefox Hits 20% Share for 2 Weeks in October)했다는 기사가 올라왔습니다.

9월을 기점으로 파이어폭스 3.0이 2.0을 미뤄 내면서 점유율을 점차로 늘리더니 기어이 10월에 이르러 19% 중후반과 20%초반을 아슬아슬하게 오가며 세계 시장 점유율 20% 돌파의 구부능선을 넘었다고 볼 수 있을것 같습니다.

연말 출시를 목표로 하고 있는 파이어폭스 3.1이 힘을 보탠다면 연 내 20% 시장 확보는 어렵지 않겠나 하는게 제 생각입니다. 상대적으로 익스플로어는 지속적으로 하락세를 보이고 있습니다. 8월 72.15%, 9월 71.52%의 점유유을 보이더니 10월에는 71.27%까지 떨어져 있습니다. 파이어폭스의 꾸준한 상승세도 있지만 9월에 출시된 구글의 크롬(0.74%)과 파이어폭스와 함께 꾸준히 점유율을 끌어 올리고 있는 사파리(6.58%),오페라(0.75%)의 선전하고 있어 보입니다.

국내 사정은 여전히 익스플로어의 절대 강세로 나타나고 있지만(10월 점유율 98.71%, 인터넷 트랜드) 파이어폭스의 점유율이 소폭이긴 하지만 꾸준히 오르고 있다는 점과 크롬 브라우저의 출시 이후 익스플로어 이외의 브라우저에 대한 관심도가 높아지고 있다는 점이 눈에 띄고 있어 앞으로의 브라우저 점유율 변화가 흥미로울 것 같습니다. 10월 국내 파이어폭스 점유율이 0.83%으로 국내 인터넷 사용자수를 2천만으로 추산했을때 대략 16만명 이상이라는 숫자가 나옵니다. 전체에 비해 적은 수일지 모릅니다. 하지만 파이어폭스를 사용하는 16만이라는 수의 상당수가 인터넷을 적극적으로 활용하는 사용자층이라고 볼 때 쉽게 간과할수만은 없지 않을까 싶습니다.

2008년을 두달여 남겨둔 시점에서 파이어폭스의 전세계 점유율 20% 돌파와 국내 점유율 1% 돌파를 이뤄 낸다면 2009년 한국의 웹 생태계에 신선한 변화를 기대해 볼 수 있지 않을까 하고 희망해봅니다. 조금더 욕심을 부리자면 익스플로어의 점유율이 전세계 70% 이하로, 국내 점유율 90% 이하로 떨어졌으면 좋겠습니다. 제발 말이죠.

2008년 10월 27일 월요일

초라한 한국의 웹디자인?

서울 디자인 올림필 2008 전시실에 걸린 웹에이젼시 홍보 판넬

며칠전 잠실에 위치한 종합운동장에서 진행중인 '서울 디자인 올림필 2008' 행사를 찾았다. 도시와 건축, 대학과 기업, 펜시와 연예인의 작품까지 다양한 분야의 디자인이 한자리에 모인 거대한 디자인 축제였다.

커다란 경기장을 세바퀴나 돌면서 3시간 가까이 전시물들을 둘러보다가 줄줄이 세워진 홍보 판넬들을 만났는데 뜻밖에도 눈에 익은 웹에이젼시들의 이름들을 마주치게 되었다. d'strict, D.Tribe, 디자인피버, 디자인블루, 인터메이져 등 국내 유명 웹에이젼시들의 회사 소개와 주요 포트폴리오를 자랑하고 있었다. 하지만 이 곳까지 발길을 잇는 관객은 거의 없었다. 이렇게 커다란 전시 공간 한쪽 구석에 초라하게 쳐 박혀 있는 꼴이라니...

한국의 디자인을 한 자리에 모아놓은 이 곳에. 심지어 수 백 명의 사람들이 단지 연예인이 만든 작품을 구경하기 위해 찾기까지 하는 이 전시에 2등이라면 서러워할 웹에이젼시들이 이렇게 무성의하거나 초라하게 자리를 차지하고 있어야만 했을까.

웹표준과 웹접근성을 시장성에 맞지 않다는 이유로 외면하면서까지 디자인 퀄리티를 노래하던 그대들 아니던가. 그럼 이런 기회에 멋지게 폼이라도 잡아야 하지 않았나. 대학생들의 졸업 전시보다도 초라하게 자리 잡은 이 풍경이 어쩐지 한국 웹에이젼시들의 자화상은 아니었는지 아쉬움이 남았다.

2008년 10월 21일 화요일

GW-BASIC과 Dr. Halo로 홈페이지 만들기?

짧은 픽션 하나.

하루종일 에디터플러스와 포토샵을 켜놓고 씨름을 한다. 듀얼 모니터 한쪽에는 수십, 수백 라인을 따라 알록달록 문자열만 가득하고, 반대편 모니터에는 수십, 수백개의 잘려진 이미지들이 저장도 되지 않은 채 널부러져 있다.

문득 어린시절 맨처음 컴퓨터를 가졌던 시간을 떠올렸다. 그 때 나는 GW-BASIC을 띄워놓고 10, 20, 30... 행번호를 쳐가며 프로그래밍이라는 것을 처음 만들었고, 가끔씩 Dr. Halo 라는 그래픽 프로그램으로 산타클로스를 그리기도 했었다. 어쩌면 그 시절이 내게는 좀 더 창의적이고 지금보다 더욱 더 열정적이지는 않았을까? 그런 생각이 들었다.

GOTO문이 가장 어려웠다!

포토샵의 UI를 닥터 할로에서도 그대로 볼 수 있다!

듀얼 모니터의 한쪽에는 GW-BASIC을 띄워놓고, HTML을 작성하면서, 다른 한쪽에서는 Dr. Halo3 를 띄워놓고 버튼을 만드는 나. 상상이 되는가? 웹이 10년만 더 일찍 나타났다면 우린 아마도 그런 모습을 하고 있었을지도 모르겠다.

2008년 10월 20일 월요일

인풋박스 안에 사라지는 제목

간단한 스크립트다. 사용자 입력상자 안에 제목이 들어 있고, 사용자가 입력상자를 선택(Focus) 했을 때는 제목이 사라지고, 입력상자를 벗어난 경우 본래대로 나타나 보이게 하는 스크립트다. 단 새로운 내용이 입력된 경우에는 제목이 나타나지 않고, 입력된 내용이 유지되어야 한다. 훌륭하게 작성된 스크립트가 많지만 가끔은 그런 스크립트가 초보자들 입장에서 가져와서 해석하는 것이 여간 어려운 일이 아닐 수 없다.

적어도 이 예제는 쉽지 않을까 싶다.

중학교 이름

내용

고등학교 이름

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new document</title>
<meta name="Author" content="Bomnun" />
<meta name="Reply-to" content="chubzo@gmail.com" />
<script type="text/javascript">

</script>
<style type="text/css">
fieldset { padding: 30px; }
</style>
</head>
<body>
<fieldset>
<legend>모교 이름 쓰기</legend>
<p><input name="user_txt_1" type="text" title="초등학교 이름" /></p>
<p><input name="user_txt_2" type="text" title="중학교 이름" /></p>
<p><input name="user_txt_3" type="text" title="고등학교 이름" /></p>
</fieldset>
</body>
</html>

최근에 로그인 영역 등에 '로그인', '비밀번호'와 같은 제목을 입력상자 안에 넣는 디자인이 자주 등장하는데 위와 같은 방법으로 처리할 수 있을것 같다. 물론 디자인으로 처리된 경우는 위 방법은 어렵고 배경 이미지를 스타일시트로 호출하는 방식이 좋은것 같다.

이 글은 스프링노트에서 작성되었습니다.

2008년 10월 14일 화요일

민간부문의 장애인 웹 접근성 제고 세미나 개최

정보통신 접근성 향상 표준화 포럼(이하 IABF)에서 '민간부문의 장애인 웹 접근성 제고 세미나'를 개최한다고 합니다.

이번 세미나에서는 전문가 토론과 웹 접근성 관련 신기술 및 실무제작기법 등이 소개된다고 하니 그간의 갈증을 해소시켜줄 수 있는 기회가 되지 않을까 기대가 됩니다. 특히나 일선에서 웹사이트를 제작하는 실무자(기획, 개발, 디자이너)들에게 더 없이 좋은 자리가 되지 않을까 싶네요. 물론 웹퍼블리셔들에게도 정말 좋은 기회가 될 것이구요.

다음은 간단한 세미나 개요와 시간표입니다.

< 세미나 개요 >

일시/장소 : 2008. 11. 3(월) 09:30 ~ 18:10, 대한상공회의소 국제회의실(지하 2층)
- 서울 특별시 중구 남대문로 4가 45번지 (전화 : 02-6050-3114)
- 찾아오시는 길
지하철 2호선 시청역 9번 출구 삼성본관방향 5분 거리
지하철 1호선 서울역 3번 출구 YTN 방향 5분거리
- 약도 : http://www.korcham.net/Kcci/Location/CIN11101.asp
주최/주관 : 행정안전부/한국정보문화진흥원

< 시간표 >

펼쳐두기..

NHN의 박태준 팀장님과 정찬명님, 넥슨의 홍윤표님, 시도우의 신현석 센터장님, 케익소프트의 조훈 실장님 등 업계의 전문가이자 실무자분들이 두루 참석과 발표를 맡아 주셔서 아주 알찬 세미나 자리가 되지 않을까 싶습니다. 회사일도 많고 바쁜신 와중에도 발표 준비 하느라 정신 없는 스피커 분들을 위해서라도 꼭 참석해야 겠네요.

일전에 NHN의 웹표준화팀장님이신 박태준 팀장님의 특강을 들은 적이 있는데 당시에 언급되었던 NHN 서비스의 표준화 전략 내지는 접근성 정책에 대한 이야기를 좀 더 깊게 들어볼 수 있는 기회가 되지 않을까 기대도 되고, KADO가 준비한 '웹 접근성 준수를 위한 가이드라인'이 어떻게 매듭 지어져서 발표가 되는지도 궁금하네요. (그대로 나오는 것인가요^^) 더불어 넥슨의 홍윤표님이 맡아주신 세션이 흥미로운데요. 아무래도 실무자들이 가장 힘들어 하는 부분이자 큰 이슈가 아닌가 싶네요. 웹표준화와 웹접근성 이슈를 중심으로 어떻게 조직 문화를 조성하고 여러 애로사항을 해결해 나갈 수 있는지를 제시해 주셨으면 좋겠네요. 그리고 스크린리더와 웹접근성을 주제로 자리에 나오시는 백남중 부장님의 발표도 기대가 됩니다. 백남중 부장님의 블로그를 통해서 스크린리더가 없는 업무 환경에서 많은 도움을 받고 있기 때문에 더욱 발표자리가 기대되네요.

세미나 신청은 여기서 받습니다.

2008년 10월 13일 월요일

위자드팩토리에 걸린 '웹 뒤에 숨은 Web'

얼마전에 위자드웍스에서 진행한 '위자드 댄스'에 '웹 뒤에 숨은 Web'이 운이 좋게도 당첨이 되어서 며칠전 문을 연 위자드팩토리에 추천블로그로 등록이 되었습니다.

위자드팩토리 전체카테고리중 '추천블로그'에 올려져 있기는 하지만 함께 올라간 다른 분들의 블로그들이 워낙에 대단들 한지라 제 블로그 위젯(RSS구독)이 한번이라도 펌질을 당할 수 있을지 모르겠네요.

위자드팩토리가 유무선 연동 위젯 플랫폼을 지향하는 것이니만큼 앞으로 출시될 다양한 스마트폰이나 PDA, 휴대용 게임기 등에서 멋지게 동작할 것이라는 기대를 갖게 합니다.

어깨가 무거워진 만큼 좀 더 신경써서 블로그를 운영해야 할 것 같네요.

2008년 10월 11일 토요일

나만의 작업공간

오늘은 모처럼 개인적인 포스팅을 하나 해봅니다. 제가 생활하고 작업하는 공간을 사진으로 쭉 찍어봤습니다.

회사 자리입니다. 그다지 깔끔하지 않네요. 최근까지 CRT를 한대 더 두고 듀얼로 작업을 했지만 LCD와 CRT의 밝기차이가 심해서 눈이 많이 피로하더군요. 그래서 CTR를 과감히 포기하고 LCD 하나로 Alt+Tab 신공으로 버티고 있습니다. 그러던 중에 몇달째 졸랐던 HTML 서버용 PC를 한대 받아서 좌측에 설치해 두었습니다. 벽에는 폭스케가 웹표준을 지켜달라고 징징거리며 울고 있는 포스터가 큼지막하게 붙어 있습니다.

잘 보지 않는 JSP와 루비책은 모니터 높이를 조절하기 위해 받침으로 활용되고 있고, 손목보호를 위해 마련된 새앙쥐는 모니터 위에 올라 앉아서 주인이 일 잘하나 감시나 하고 있습니다.

구글 달력도 보이고, 그 뒤에 웹표준 포스터와 사내 전화 번호, 구글 캘린더를 출력해 놓은 개인 일정표도 있습니다.

웹표준 경진대회 참가 기념으로 받은 웹표준 머그컵으로 하루데 2~3잔의 커피를 마시고 있습니다. 그 옆에는 다이소에서 구입한 1,000원짜리 연필깎이도 보이네요. 볼펜보다 연필 쓰는 것을 좀 더 좋아합니다.

모니터 좌측으로는 여자친구와 찍은 사진이 있고, 얼마전에 여자친구가 선물해준 작은 화분이 잘 자라주고 있구요. 온갖 작은 크기의 것들을 잃어버리지 않게 보관해 두는 녹색 컵도 보입니다. 뒤에 책은 데코레이션입니다. ㅋㅋ

파이어폭스 스티커가 붙어 있는 키보드 옆으로는 기획팀에 가서 '나 이거 가져갈래!' 한마디 하고 그냥 들고 와버린 시계가 있고, 얼마전에 여자친구가 화분과 함께 선물해준 멘토스 한통이 제 피로를 달래주기 위해서 놓여져 있습니다. 그 옆에 박스는 그동안 제가 출력해 놓은 온갖 자료들입니다. jQuery 관련 원서를 통째로 출력해 놓은 것도 몇개 있죠. 주로 웹표준, 웹접근성 관련 세미나 자료들입니다.

화분과 사진, 데코레이션용 책들입니다. 제가 웹퍼블리셔라는 것을 회사 사람들에게 인식시키기 딱 좋은 종류의 것들로만 갖다 놨습니다.

이번에는 집입니다. 모질라 10주년 기념 포스터가 벽에 붙어 있고, 그 아래로 회사 책상보다 더 지저분한 책상이 보입니다. 노트북과 LCD를 듀얼로 쓰고 있습니다.

벽에 여자친구가 그려준 제 초상화(스케치)가 붙어 있고, 그 옆에는 지난 가을 비발디파크에서 찍었던 사진 두어장이 같이 붙어 있습니다. 아래 왠 전단지냐구요? 제 여자친구 미술학원 전단지입니다. 누군가에겐 버려야할 쓰레기겠지만 제게는 평생 버릴 수 없는 소중한 기억이자 증거물인 셈이죠^^ 그래서 저렇게 붙여놓고 항상 보고 있습니다.
LCD 모니터 위에는 담배도 피지 않는데 왠 성냥들이 피겨 대신 놓여져 있습니다. 정말 PC 주변기기 중에 잘 샀다고 생각되는 브리츠 스피커가 양쪽에 놓여져 있습니다. 우측 스피커 아래에 푸르게 빛이 들어오는 것은 야후 코리아에서 기념품으로 준 마우스 패드입니다. 패드 아래쪽에 USB 허브가 있어서 패드 대신 USB 허브로만 사용중입니다. 마우스는 여자친구가 선물해 준 것이구요(아 그러고보니 회사와 집 책상 위에는 여자친구의 흔적이 너무나 많습니다. 너무나 고맙네요 ㅠㅠ 정말 사랑합니다 ㅠㅠ)

둘 다 외장 하드입니다. 케이스는 싸구려(아마 이만원쯤?)입니다만 속에 든 녀석들은 제법 튼실합니다.

여름 내내 제 더위를 사간 녀석입니다. 그 옆에는 지금은 거의 사용하지 않는 시디들이 시체처럼 지내고 있습니다.

야후 코리아에서 준 USB 허브용 마우스 패드입니다. 저 먼지 쌓인것 좀 보세요. 청소좀 해야할 것 같네요.

노트북에도 파이어폭스 스티커가 붙어 있습니다. 그 위에 폭스케가 뛰어 다니네요!

지난해 겨울 모질라 커뮤니티에 참석했다가 기념품으로 받았던 USB입니다. 요긴하게 잘 쓰고 있습니다.

회사 명함과 여자친구가 만들어준 개인명함입니다. 돈은 회사가 주지만 솔직히 여자친구가 만들어준 명함이 더 좋습니다.

역시 데코레이션용 책장! 대학시절에 C, JAVA, VB, ASP, JSP, 서블릿, J2EE, PHP, Ruby, XML, XSL, UNIX, Python, Oracle, MySql, MSSql 등 거의 안해본 것 없이 다 만져본것 같습니다. 기억나는거요? JSP, PHP 약간이랑 XML, MySQL 정도?

그 사이 사이 인문학 관련 서적도 있습니다. 본래 문학의 위기, 새로운 장르의 문학, 인터넷과 문학 등과 같은 주제에 관심이 많았습니다. 근래에도 디지털스토리텔링쪽에 관심이 있어서 몇권 읽고 있네요.

제 밥벌이 책들이 보이네요. 방탄웹은 제가 군대 있을 때 읽게 된 것이고 제가 이 직업을 택할 수 있게 용기를 준 책이었지요. 웹표준 교과서는 지난 웹표준 경진대회에서 부상으로 받은 겁니다. 새겁니다.

밤에는 조금 시끄럽긴 하지만 정말 타이핑 하나는 마음에 드는 필코 키보드입니다. 시커먼 놈이 무겁긴 무지 무겁습니다. 어울리지 않게 푸른색 LED는 너무나 밝습니다. 한참 처다보면 실명될 것 같아서 무섭기까지 합니다.

온갖 주변기기를 이어주는 USB허브. 어디 USB 20개쯤 꽂아서 쓸 수 있는 놈은 없나요.

집에 동생이 사용하는 노트북까지 컴퓨터가 두대가 있어서 유무선 공유기를 구입했습니다. 형제가 싸우지 않게 해주는 좋은 놈입니다. (어렸을 땐 서로 컴퓨터를 하겠다고 컴퓨터 사용 쿼터제까지 정했던 적이 있었네요)

오랜만에 HTML이나 JavaScript니 하는 어려운거 말고 그냥 쉬어가는 포스팅 하나 해봤습니다. 종종 찾는 웹라이프 카페에서 작업공간을 올려서 소개하는 게시판이 생겼길래 저도 한번 사진을 찍어서 남겨보고자 포스팅했습니다. 결론은 청소를 좀 해야겠다는 것이네요.

2008년 10월 6일 월요일

웹표준 가이드라인 모음

근래 들어 NHN 웹표준화팀의 NULI 사이트가 여기저기서 소개가 되고 있네요. 좋든 싫든 NHN이라는 기업이 갖고 있는 폐쇄적인 이미지와 달리 자신들의 지식과 정보를 '널리' 알리고 공유하고 싶다는 박태준 팀장님과 팀원들의 의지가 담겨 있는 멋진 UI 가이드라인 사이트라고 생각합니다. NULI 외에도 다음 다음의 UI개발팀이 운영하고 있는 가이드라인과 모질라, 오페라 등이 운영하고 있는 사이트들이 있어서 간단히 소개해 드립니다.

NULI - 널리 공유하는 웹 표준화 가이드

최근에 가장 많이 알려진 곳이며, 네이버를 중심으로 NHN의 웹서비스 UI관련 가이드를 꼼꼼히 정리하고 있는 곳입니다. HTML, CSS를 비롯한 기본적인 가이드에서부터 웹접근성에 대한 연구 결과 등을 공개하고 있어 별도의 연구나 분석이 쉽지 않은 회사 또는 개인에게 좋은 정보를 제공하고 있습니다. 최근에 스크린리더(센스리더)에 대한 리뷰는 정말 도움이 되더군요.

Daum UIDev Guideline

NULI만큼 알려지지는 않았지만 다음에도 UI개발팀에서 운영되고 있는 가이드라인이 있습니다. NULI처럼 NHN 웹서비스를 위해 조사하고 연구된 내용을 공유하기 위한 목적은 아니어서 그런지 자체 웹서비스를 위한 참고 가이드의 성격이 강합니다. 하지만 사내 웹표준 가이드 등을 만들 생각이 있다면 다음의 UI가이드가 도움이 될 것 같습니다. 다음의 UI개발자 블로그는 NULI와 달리 따로 운영되고 있네요. 이곳에서도 종종 좋은 정보들이 올라오고 있습니다.

MDC - Mozilla Developer Center

모질라 재단이 운영하고 있는 개발자 센터입니다. 기술(Technologies) 카테고리에서 HTML, CSS, XML, AJAX, DOM, RSS 등 많은 기술 문서를 열람해 보실 수 있습니다. 회원가입을 하시면 직접 글을 올릴 수도 있습니다.

Dev.Opera

오페라 소프트웨어의 개발자 센터입니다. 외견상 MDC와 유사하며, Articles 카테고리를 통해서 HTML, CSS, Javascript 등에 대한 글을 열람해 보실 수 있습니다. 최근에 개설된 Web Standards Curriculum 은 정말 좋습니다! (제가 활동중인 스터디그룹에서도 WSC를 이용해서 공부를 하고 있습니다.) Dev.Opera 역시 MDC와 마찬가지로 회원 가입을 하면 저자가 되어서 직접 글을 올릴 수 있습니다. 최근의 내용을 봐서는 오페라쪽이 좀 더 활발한 것 같습니다.

Aptana Reference Guides

Aptana가 제작 운여하고 있는 레퍼런스입니다. 역시 HTML, CSS, Javascript 를 다루며, Jaxer라는 자사 서비스 가이드를 포함하고 있습니다. 개인적으로 자주 찾는 곳인데 각각의 브라우저별 지원 현황이 잘 정리되어 있어서 보기 좋습니다. 별도의 레퍼런스 북이 없다면 정말 괜찮은 사이트입니다.

웹표준을 탐험하는 히치하이커를 위한 지침서

더글러스 애덤스가 쓴 '은하수를 여행하는 히치하이커를 위한 안내서'를 패러디한 제목의 웹표준 가이드 사이트입니다. ELEX님이 작성하신 것으로 초기에는 PDF 문서로 배포되다가 최근에 스프링노트를 통해서 가이드라인 사이트를 구축하신 것 같습니다. 기부금을 내시면 ELEX님께 도움을 드릴 수도 있을것 같군요! 포털사가 만든 가이드가 복잡해 보이고, 영어로 된 가이드가 영 읽기 힘들다면 ELEX님의 가이드를 한번 추천해 드립니다. 꼼꼼하게 잘 정리하시고 운영하는 열정이 대단하신것 같습니다.

이 밖에도 W3C Schools이나 Max Design, Yahoo! UI Library와 같이 이미 많이 알려진 레퍼런스, 가이드 사이트도 있습니다. 찾아보면 더 많은 곳이 있을 것이고, 카페(하코사와 같은)나 사이트(CDK같은) 등 소규모로 제작 운영되는 레퍼런스와 가이드도 알찬 것들이 많을 것이라고 생각해 봅니다. 또한 대부분의 회사가 자체 가이드라인을 가지고 있거나 제작하고 있는 것으로 알고 있습니다. 아직 준비되어 있지 않다면 직접 한번 만들어 보시는 것도 좋은 공부가 되지 않을까 싶습니다. 그런 의미에서 저 역시 틈틈히 '마크업 가이드라인'을 만들어 보고 있습니다. 게을른 탓에 지지부진하긴 하지만 자신의 작업 스타일이라든가 알고 있는 지식을 정리해볼 수 있는 좋은 기회라고 생각됩니다.

페이지오프