2008년 10월 27일 월요일

초라한 한국의 웹디자인?

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

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


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

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

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

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

2008년 10월 21일 화요일

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

짧은 픽션 하나.

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

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

GW-BASIC

GOTO문이 가장 어려웠다!


닥터 할로 III

포토샵의 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">
  <!--
      window.onload = function()
      {
          clickToHide(); // HTML 문서 로딩이 완료되면 실행
      }

      function clickToHide()
      {
          inputs = document.getElementsByTagName("input"); // 문서내 모든 input 요소(Tag)를 inputs 배열 변수에 담고
          for(var i = 0; i<inputs.length; i++) // 배열에 저장된 갯수만큼 반복시킨다
          {
              if(inputs[i].type == "text") // input 요소의 타입이 'text' 인것만 골라서
              {
                  inputs[i].value = inputs[i].getAttribute("title"); // 입력상자의 title 속성값을 value 속성값으로 지정하면 HTML 문서가 로딩된 후에 입력상자에는 제목이 들어가게 된다
                  inputs[i].onfocus = function() // 입력상자가 선택(Focus 이벤트)될 때
                  {
                      if(this.value == this.getAttribute("title")) // 입력상자 값이랑 title 속성값이 같으면
                      {
                          this.value = ""; // 비우고
                      }
                  }
                  inputs[i].onblur = function() // 입렵상자를 떠날때(Blur 이벤트)
                  {
                      if(this.value == "") // 값이 비어 있으면
                      {
                          this.value = this.getAttribute("title"); // title 속성값(제목)을 다시 넣는다
                      }
                  }
              }
          }
      }
  //-->
  </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같은) 등 소규모로 제작 운영되는 레퍼런스와 가이드도 알찬 것들이 많을 것이라고 생각해 봅니다. 또한 대부분의 회사가 자체 가이드라인을 가지고 있거나 제작하고 있는 것으로 알고 있습니다. 아직 준비되어 있지 않다면 직접 한번 만들어 보시는 것도 좋은 공부가 되지 않을까 싶습니다. 그런 의미에서 저 역시 틈틈히 '마크업 가이드라인'을 만들어 보고 있습니다. 게을른 탓에 지지부진하긴 하지만 자신의 작업 스타일이라든가 알고 있는 지식을 정리해볼 수 있는 좋은 기회라고 생각됩니다.