2009년 3월 31일 화요일

오픈 웹을 지지합니다!

한국의 웹을 아름답게 만들기 위해서 불철주야 애를 쓰고 있는 오픈 웹(Open Web) 을 다들 아시죠?

최근에 고등법원에서 다시 한 번 패소하면서 아쉬움을 남겼지만, 거대한 기업과 정부를 상대로 고전분투하고 있는 오픈 웹의 철학과 실천 의지를 지지한다는 의미에서 클리어보스(Web Standards Evangelist Forum)에서 '오픈 웹을 지지합니다!'라는 배너를 만들어서 배포하고 있습니다.

더 많은 분들이 오픈 웹을 기억해 주시고, 방문해 주셔서 김기창 교수님 외 여러 오픈 웹 지지자분들께 기운을 북돋아 드렸으면 합니다.

오픈 웹 지지 배너

오픈 웹 지지 배너



오픈 웹 홈페이지

오픈 웹 홈페이지

2009년 3월 29일 일요일

웹 퍼블리셔들의 놀이터, CSS Playground

CSS Zengarden은 구조적으로 잘 작성된 하나의 HTML 문서에 수 많은 CSS가 결합되어 다양한 디자인을 선 보이는 아주 특별한 사이트입니다. CSS의 기술적인 능력을 뽐냈을 뿐 아니라 예술성까지 느껴지도록 만들어 준 사이트입니다. 그래서 웹 표준을 다루는 거의 모든 책과 세미나에서 젠가든을 언급합니다. 이런 젠가든을 더욱 특별하게 해 주는 이유는 누구에게나 문이 열려 있다는 점일 겁니다. 지금이라도 당장 젠가든의 멋진 마크업 위에 아름다운 디자인을 CSS로 작성하여 올릴 수 있습니다. 하지만 언어적인 장벽 때문일까요? 한국의 훌륭한 웹 퍼블리셔들의 작품은 좀 처럼 찾아볼 수 없었던 것 같습니다.

CSS Playground

CSS Playground

그런 안타까움을 느끼셨는지 CSS Design Korea홍윤표님께서 아주 멋진 사이트를 하나 만들어 주셨습니다. CSS Playground는 한국의 웹 퍼블리셔나 디자이너, 개발자들이 자유롭게 자신들의 능력을 발휘하여 CSS를 다룰 수 있도록 만들어진 한국의 젠가든입니다.

CSS Playground의 규칙은 다음과 같습니다.
  • CSS는 표준 방식에 근거함
  • Cross Browsing
  • 저작권에 대한 이해와 합법적인 컨텐츠 사용
  • FAQ 숙지
디자인시 발생할 수 있는 저작권 문제만 잘 피하신다면 나머지는 표준을 준수하는 CSS작성이 전부입니다. 또한, 제작에 대한 어려움은 CSS Design Korea에서 운영하고 있는 포럼 게시판을 통해서 해결할 수 있습니다.

웹 표준을 시작하는 여러분이라면 한번쯤 멋지게 도전해 볼만하지 않겠습니까?

2009년 3월 28일 토요일

은행 및 금융기관 사이트 액티브X 없애주세요

최근에 맥북을 한 대 장만해서 잘 쓰고 있습니다. Firefox를 주 브라우저로 웹 서핑도 잘 하고 있습니다. 대부분의 사이트는 무리 없이 잘 사용되고 있는데, 쇼핑몰 사이트와 은행 사이트의 사용이 쉽지가 않습니다. 별 수 없이 그 때만 윈도우를 사용하고 있습니다. 결국은 Active X를 쓸 수 없다는 것이 문제죠.

Active X 와 관련해서는 Open Web의 Active X 외의 대안은 없는가? 와 같은 글과 의견들을 통해서 많은 정보를 얻으실 수 있습니다.

그리고 이번에 다음 아고라에서 은행 및 금융기관의 Active X 사용 중지를 요청하는 서명운동을 실시하고 있네요.

Active X 사용 중지를 요청하는 서명운동

Active X 사용 중지를 요청하는 서명운동


저처럼 웹 관련 직종에 종사하는 사람들 대부분은 이 문제에 대해서 찬성이든 반대이든 나름의 의견을 가지고 있고, 얼마간 정보와 지식 역시도 갖고 있다고 생각합니다. 하지만 문제는 절대 다수인 일반 사용자들입니다. 대부분의 일반 사용자들은 Active X의 설치는 너무나 당연하고 자연스러운 과정이라고 생각하는 듯 합니다. 그것이 불편하다고 느끼면서도 필요하기 때문이라는 생각을 갖는 것이죠. 그리고 그렇게 습관이 되고, 길들여져 버린 것 같습니다.

저처럼 Windows가 아닌 다른 운영체제를 사용하는 사람이 되어 보고나, PC가 아닌 다른 플랫폼(맥, 스마트 폰 등)을 사용해보면 단번에 Active X가 얼마나 사람을 불편하게 하는지 알 수 있는데 말이지요. 모르겠습니다. "왜 이 맥은 Active X를 못 깔게 해서 날 불편하게 해!" 라며 자신의 맥을 멍청하다고 생각할지도 모르겠네요.

mac magazine의 JMHendrix님 말씀처럼 우공이 마을 사람들을 위해서 산을 옮겼듯이 웹 접근성을 향상을 위해서 노력하는 Open Web과 웹을 사랑하는 사람들의 노력을 저 역시 지지합니다. 또한 더 많은 분들이 이런 노력에 함께 동참해 주시기를 바라겠습니다.


다음 아고라 '은행 및 금융기관 사이트 액티브 X 없애주세요' 서명운동 동참하기

은행 및 금융기관 사이트 액티브X 없애주세요

* Clearboth Blog에 올렸던 글(2009/03/29)을 이전했습니다.

다음 아고라에서 은행과 금융기관의 Active X의 사용 중지를 요청하는 서명을 받고 있어 소개해 드립니다.


Active X 사용 중지를 요청하는 서명운동

Active X 사용 중지를 요청하는 서명운동


Active X 문제가 어제 오늘의 문제는 아니고 Open Web 의 활동을 통해서 끊임 없이 문제 제기와 변화를 요구해 왔습니다만 Active X를 만든 MS나 Active X를 남용하는 각종 사이트들은 요지부동 마음을 바꿀 생각이 전혀 없어 보입니다. 서로 눈치만 보고 누가 먼저 움직이나 하고 뒷짐 지고 지켜만 보고 있는 꼴이지요.

Open Web의 끈질긴 노력에도 불구하고 두번의 고배를 마셨습니다. 하지만 그렇다고 여기서 포기할 Open Web도 아니고, 웹을 사랑하는 사람들 역시 작은 노력들을 모아서 뜻을 밝히고자 이와 같은 서명운동을 시작했습니다. 많은 분들이 이 서명운동에 함께 해 주시기를 바라겠습니다.

2009년 3월 18일 수요일

이미지 폰트? 이제는 Canvas와 VML로 처리하자

* Clearboth Blog에 올렸던 글(2009/03/19)을 이전했습니다.


WebAppers에 자바스크립트와 Canvas, VML을 이용한 텍스트 렌더링 기법(Rendering Text with Javascript, Canvas and VML)이 소개가 되었습니다. 그리고 이를 OUTSIDER'S DEV STORY에서 사용법을 자세하게 설명해 주고 있어 소개해 드립니다.

웹 페이지의 주된 정보는 텍스트로 이루어져 있습니다. 하지만 비주얼 요소가 점차로 강해지면서 다양한 폰트가 개발되고, 시스템 폰트가 아닌 디자인 폰트의 적용이 일반화 되어 가고 있습니다. 특히 한국은 정도가 심하다고 느껴질 정도로 많은 폰트가 이미지로 처리되고 있습니다. 플래쉬를 이용한 방법(sIFR) 등 그동안 몇가지 신선한(?) 방법들이 제안되어 왔는데 이번에는 CanvasVML을 자바스크립트로 다루는 기술이 소개되었습니다.
자바스크립트와 Canvas, VML을 이용한 텍스트 렌더링 기법

영문과 한글 모두 제대로 처리해 주고 있다.


자바스크립트가 지원되는 환경에서는 CanvasVML을 이용해서 텍스트를 지정된 폰트로 변경해 주며, 지원되지 않는 환경에서는 HTML에 마크업된 텍스트를 그대로 출력해 줍니다. 때문에 별다른 조치 없이도 접근성을 보장해 주고 있다고 볼 수 있을 것 같습니다.

가장 중요한 사실은 일부 공개 폰트에 제한 된 경우이긴 하지만 한글 폰트도 제대로 지원되고 있다는 사실입니다. 솔깃하시죠?

하지만 모든 기술은 항상 장단점을 가지고 있기 마련입니다. 한번씩 테스트 해 보시고 판단해 보세요. 더 자세한 설명과 사용법은 OUTSIDER'S DEV STORY에서 확인해 보세요.

2009년 3월 12일 목요일

유명무실한 CSS 마법사 도구들

최근 들어서 CSS Generator / Tools 들이 많이 생겼습니다. 편의상 CSS 마법사 도구로 하겠습니다. CSS 마법사 도구는 클릭 몇 번 만으로 간단히 원하는 CSS를 작성할 수 있도록 도와주기 때문에 쓰임에 따라서 굉장히 편리하기도 하고, 실무에 도움을 줄 것 같아 보입니다. 하지만 문득 넘처나는 이러한 마법사 도구들에 비해 사용자가 얼마나 되나? 정말 사용할까? 라는 의구심이 들었습니다. 왜냐구요? 저조차 거의 사용하지 않기 때문이었죠.


그래서 한 주(3월 9일 ~ 12일) 동안 커뮤니티와 제 블로그를 통해서 간단히 설문을 실시해 봤습니다.

커뮤니티와 블로그 설문에 참여해 주신 분들이 약 30명쯤 되었고, 실제로 의견을 달아주신 분은 20분 정도가 되셨습니다. 나머지 10명 중 일부는 개인적으로 메신져나 쪽지로 의견을 주시기도 했습니다.

설문 응답자 수가 크지 않았기 때문에 차트 등을 인용하지 않고 간단히 글로 정리를 하겠습니다.

  • 전체 30명 중 10명이 들어봤고,
  • 10명 중에 2명이 사용을 해봤고,
  • 레이아웃, 네비게이션, 폰트를 위한 목적으로 사용해 봤고,
  • 지속적으로 사용한 경우는 1명이었습니다.

의외다라고 생각하시는 분들고 계실테고, 뻔한 결과군 하고 본 페이지를 떠나는 분들도 계실 것 같습니다. 저는 그동안 여러가지 CSS 마법사 도구들을 사용해 보고, 소개를 해 드리기도 했습니다. 꽤나 편리하고 요긴한 것들이 많았습니다. 실무에 적용되서 사용되면 참 편하겠다라고 생각했던 것들도 몇 가지 있었구요. em 단위를 계산해 주는 것이라든가 하단 고정 레이아웃을 위한 기본 CSS를 작성할 때도 도움이 될 것이라고 생각했죠. 몇 번인가는 실제로 적용해 본 적도 있었습니다. 하지만 예상 외로 많은 분들이 한 귀로 듣고 다른 한 귀로 흘려버린 경우가 많았고, 사용 자체에 귀찮음을 많이 가지셨던 걸로 보입니다.

또한, 경험이 많은 개발자와 경험이 적은 개발자 간에도 사용 유무에 따른 이유가 다른 것 같습니다. 개발이 많은 경우 굳이 CSS 마법사 도구의 힘을 빌리지 않더라도 얼마든지 더 나은, 최적화된 코드를 작성할 수 있기 때문 일 것이고, 경험이 적은 개발자는 반대로 CSS 마법사 도구가 만들어낸 코드가 더 어렵거나 수정이 쉽지 않다고 느끼는 것 같습니다.

하지만 개인적으로 생각해 볼 때 CSS 마법사 도구는 경험이 적은 입문자들에게 '학습용'으로 도움이 됩니다. 특히 최근에 소개되고 있는 마법사 도구들은 의미 있는 마크업과 접근성을 높인 HTML과 CSS, JavaScript 를 제공하고 있습니다. 입문자들이 많은 사이트들의 소스 코드를 열어보고 분석하는 것만큼 큰 공부가 없습니다. 하지만 막상 네이버 홈페이지의 소스 코드를 열어봤다면 도대체 어디서부터 뭘 봐야 할지 난감 할 것입니다. 원하는 부분에 대한 가장 최적화된 코드만을 확인해 보고 공부하고 싶을 때 어려움이 생기는 부분입니다. 이런 경우에 CSS 마법사 도구는 입문자들에게 좋은 예제 코드를 제공하는 자습서가 될 것입니다. 막연히 유명 사이트의 소스를 열어 놓고 봐도 모르겠다고 하지 말고 가까운 곳에서 유익한 CSS 마법사 도구들을 가지고 놀면서 눈을 익혀 간다면 좋지 않을까 싶습니다.


http://www.typetester.org/

http://www.typetester.org/


폰트 스타일을 지정할 수 있습니다. 외국 사이트의 가장 큰 아쉬움은 역시나 한글 폰트(돋움, 굴림)를 지원하지 않아서 제대로 활용해 보기가 쉽지 않다는 점입니다.


http://www.jotform.com/

http://www.jotform.com/


회원 가입과 같은 사용자 서식 영역을 작성해 주는 도구입니다. 드래그 앤 드랍 방식으로 쉽게 원하는 서식을 작성할 수 있습니다. TABLE을 이용해서 마크업 해 줍니다.

http://csscreator.com/?q=tools/layout

http://csscreator.com/?q=tools/layout


기본적인 레이아웃에 대한 마법사 도구입니다. DTD를 선택할 수 있다는 특징이 있습니다.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php


역시 레이아웃을 위한 도구인데, DTD 설정 부터 시작해서 굉장히 디테일한 정보를 편집해서 결과를 얻어낼 수 있습니다.

http://www.highdots.com/css-tab-designer/

http://www.highdots.com/css-tab-designer/


다양한 디자인의 탭 메뉴를 만들고, 괜찮은 HTML, CSS를 받아볼 수 있습니다.

 http://css.maxdesign.com.au/listamatic/

http://css.maxdesign.com.au/listamatic/


다양한 형태의 목록을 보여줍니다. 2탄도 준비되어 있습니다.

더 많은 CSS 마법사 도구는 여기서 확인해 보실 수 있습니다.

2009년 3월 11일 수요일

[설문] CSS Generator / Tools 사용하시나요?

CSS Geerator는 레이아웃이나 타이포그라피 등을 사용자가 쉽게 디자인대로 속성과 값을 일치시킬 수 있도록 도와주는 '마법사 도구'와 같은 서비스 또는 프로그램을 말합니다. 검색을 하다 보면 생각보다 굉장히 많은 Generator나 Tools이 만들어저 있음을 확인할 수 있고, 본 블로그를 통해서도 몇번 소개를 드렸던 서비스도 있었습니다. 그런데 문득 이런 도구들을 정말 실무에서 활용해서 적용하는 분들이 얼마나 되는지 의구심이 들었습니다. 그래서 간단히 다음과 같은 질문을 담은 설문을 실시해 보고자 합니다. 기왕에 제 블로그에 찾아주신 분들이라면 아래 질문에 대한 의견을 댓글로 남겨주시면 감사하겠습니다.

CSS Generator

다양한 CSS Generator



1. CSS Generator / Tools 를 들어보셨나요?
  a. 네
  b. 아니오

2. 들어보셨다면 사용해 보신 적은 있나요?
  a. 네
  b. 아니오

3. 어떤 것들을 사용해 보셨나요?
   a. Layout (Frameset, 100% Height Layout, Roundbox ... )
   b. Navigation (Tab Menu, Rollover, List Menu ... )
   c. Font (Typograph, Em Calculator ... )
   d. Forms
   f. Scrollbar
   g. Etc. (                                )

4. 지속적으로 사용하시나요?
  a. 네
  b. 아니오

5. 지속적으로 사용하지 않다면, 그 이유는?
  (                                                 )

아직은 IE8을 사랑하긴 이르다

오늘 오후 한국MS가 마련한 IE8 Love Developer - 개발자가 주목할 Internet Explorer 8 세미나에 다녀왔습니다.  소문난 잔치에 먹을 것 없다고 해서 사실 MS가 차린 밥상에는 숟가락 들고 잘 찾아가지는 않았습니다만 이번 세미나 중에 2,3 세션에 관심이 갔던지라 회사에 허락을 받고 모처럼 밝은 낮에 외출을 해볼 수 있었습니다. 소감부터 밝히자면 생각보다 꽤나 유익했던 세미나였습니다. 옥의 티라면 극장도 아닌데 '팝콘'을 서비스로 제공한 MS의 센스 때문에 속이 조금 미식거렸던 것?

팝콘?

MSDN 블로그의 이름이 POPCORN입니다.


행사장 입구에서부터 왠 팝콘 냄새가 진동을 하길래 극장이 있나 하고 잠깐 두리번 거렸는데 정말로 팝콘을 간식으로 제공하고 있었습니다. 거기다 팝콘 명찰을 달고 왠 텔레토비 같은 녀석이 왔다 갔다 하는데 다른 행사장에 왔나 하고 잠깐 멈칫 거리기까지 했구요. 알고보니 MSDN 한국 블로그 이름이 'POPCON'이더군요. IE의 주요 기능을 간략히 소개하는 '쭝스의 1분 데모' 등 스크린 캐스트가 여러개 올라와 있는데 오늘 행사에서도 계속해서 영상을 보여줬습니다. 스피커가 지루하게 강의를 하는 것 보다는 훨씬 나았던 것 같았습니다.

Q&A를 위한 자리


중간 쉬는 시간과 행사 이후에 이 자리에서 스피커들에게 질문을 할 수 있도록 별도로 마련된 공간입니다. 좋은 아이디어이긴 하지만 막상 발표를 경청하는 중에는 질문이 있다가도 깔아 놓은 멍석 위에서는 입을 다무는 편이라 차마 질문을 하지는 못했습니다.



첫번째 세션은 MS의 개발자&플랫폼 에반젤리스트로 근무 중인 김대우님의 발표였습니다. 주로 IE8의 일반적인 기능 소개와 세미나 전체 차례를 소개해 주셨구요. 중간에 '익스프레션 웹'의 김영일씨와 '알툴즈'의 세일(성이 생각나지 않네요;)님을 모셔서 IE8의 친구들(?)을 소개해 주셨습니다. 디테일한 내용으로 채워진 것은 아니지만 IE8을 준비하기까지의 노력과 웹 표준에 대한 의지(?)를 세미나에 참석한 900여명(예상보다 꽤나 많은 사람들이 세미나에 참석한 듯 했다)의 참석자-대부분 개발자일 듯-들에게 호소하는 모습이 나빠 보이지만은 않았다. 다만 UI개발을 하는 사람으로서 IE의 Active X등 브라우저의 확장 기능이 있는 이유와 있을 수 밖에 없는 이유, 있어야 하는 이유를 사용자들의 요구와 사용성 때문(공감하는 것이긴 하지만)이라는 것만을 너무 강하게 어필하고 있지는 않았나 싶다. 사용성이 중요한 만큼 정말 중요한 가치-웹 표준이나 접근성 같은-역시 무시될 수 없다는 것도 아는 듯 하였는데 스스로 단점을 구체적으로 밝히는데까지는 어려움이 있어 보였다.


팔은 안으로 굽는다고 했던가. 역시 같은 분야에서 일을 하고 계신 분이 저 앞에 서 계시니 괜히 어깨가 으쓱거려지고 뿌듯하더라. 찬명님의 발표는 매번 느끼는 것이지만 어려운 주제를 쉽고 명쾌하게 풀어놓는데 재주가 좋으신 것 같다. 오늘 역시 만약에 내가 했더라면 무척이나 어렵고 따분하게 진행했을 것이 뻔한 내용을 너무나 시원 시원하게 풀어 주셨다. IE8 의 웹 표준 지원 정도와 하위 버전과의 호환성 문제, 낡은 웹 페이지와의 호환성 문제, 각 버전별로의 대응법 등을 직접 만드신 예제를 시연해 주시면서 설명해 주셨다. 마치 잘 나가는 EBS 방송을 보고 수학 문제가 술술 풀리는 느낌이었달까?


팝콘과 함께 제공되는 커피. 맛은 괜찮았다. 하지만 난 역시 Firefox가 더 좋다. 찬명님 기대 말씀대로 IE9가 더 나아지고, IE10이 찬사를 받는 순간이 온다면 모를까. 아직은- 그래 아직은 Firefox가 더 좋다.


세번째 세션 발표는 NC소프트 오픈마루 스튜디오의 강규영 과장님이 해 주셨다. 강규영님은 오픈소스 웹 에디터로 유명한 Xquared를 만드신 분으로 많이 알려져 있는데 오늘 처음으로 뵙고(먼 발치에서지만)나니 깊은 지식과 훌륭한 말솜씨 그리고 뛰어난 재치까지- 굉장히 신선하고 충격적이었다라고 적고 싶다. 저런 사람, 아니 괴물이 다 있을까! 하고 감탄이 절로 나왔으니까. 오픈마루에 인연이 있는 지인으로부터 종종 대단하시다는 말만 전해 듣다가 오늘 직접 보니 허언이 아닌듯 했고, 내심 존경하는 마음까지 들었다. 정말 훌륭하신 분이다!


마지막 세션은 정성태님께서 ActiveX 개발자들을 위해 준비한 자료를 발표해 주셨는데 내 지식으로 알아 듣고 이해하기에는 많이 역부족이었던 시간이었다. 그렇지만 IE8이 어떻게 작동되고 있는지 굉장히 친절히 설명을 해 주셔서 도움이 되었던 것 같다. 더불어 항간에 떠 돌던 Active X 사망설을 일축하셨는데 개인적으로는 이해는 되지만 아쉽게 느껴지는 부분이 아닐 수 없었다. 사용자 경험을 위해서 제공되는 확장 기능이 꼭 Active X 이어야 하는지. 반대로 Active X를 지원하지 않는 다른 브라우저들은 보다 나은 사용자 경험을 제공할 방법이 없는 것인지. 그건 아니지 않는가. Active X가 보안 문제를 완벽에 가깝도록 해결한다고 하더라도 MS 윈도우와 IE에서만 작동된다면 근본적인 문제는 결코 해결되는 것이 아니지 않는가. 정성태님께서는 Active X가 사라지고 Active Y가 나온다고 해서 크게 달라지는 것은 없을것이다라고 하셨지만 Active Y가 모든 브라우저와 호환성을 갖춘 것이라면 정말 달라지는게 없을까?


마지막은 오후 내내 불편한 자리를 벗어나지 않고 인내로 견딜 수 있게 해준 경품 추천 시간이었다! 하지만 저 텔레토비는 내 편은 아니더라. 빈 손으로 유유히 행사장을 빠져 나왔다.

IE8 정식 버전은 조만간 우리들 앞에 의기양양한 모습으로 나타날 것이 분명하다. 찬명님 말씀대로 UI개발을 하는 웹 퍼블리셔들이나 개발자들에게는 IE8의 출시로 인해 대응해야 할 브라우저가 하나 더 늘어서 단기적으로는 일이 더 는 셈이지만 4,5년쯤 되에는 우리들의 후배들은 보다 나은 환경에서 적은 스트레스로 일을 할 수 있을 거라는 기대감을 갖게 한다.

하지만 당장에 IE8만 놓고 예측하고, 평가한다고 했을 때 그들(MS)의 바람대로 IE8을 사랑할 수 있을까? 하는데에는 아직 찝찝함이 많이 남아 있는 것이 사실이다. 이런 세미나를 통해서 듣는 이야기는 대게 긍정적인 부분이다. 실무에서 UI개발자든 서버사이드 개발자든 막상 부딪혀 보면 예기치 못한 난관에 당황해하는 경우가 비일비재하기 마련이다. 정찬명님이나 강규영님의 노하우가 IE8에 대응하는 상황에서는 분명 큰 도움은 되겠지만 IE의 하위 버전들이 가지고 있던 산적한 문제들에 대해서는 근본적인 해결책은 되지 못할 것이다. 그래서 찬명님이 농담반 진담반으로 MS가 소수의 하위 브라우저 사용자들의 시스템을 업그래이드를 시켜 줬으면 좋겠다라는 것처럼 MS의 보다 확실한 대답이나 대응이 필요하다고 생각된다. '개발자를 살려주세요'같은 캠페인이나 구글의 IE 업그래이드 권장 캠페인 등이 다른 곳이 아닌 MS 스스로 나서서 해야 하는게 아닌가.

과도기의 웹. 그리고 쉼 없이 변화하는 웹 생태계 속에서 브라우저는 계속해서 진화를 하고, 더디게만 보이던 IE 역시 다시 한 번 허물을 벗어 던지려고 하고 있다. MS가 설득의 무기로 삼는 '사용자들에 대한 사용성의 증대'와 UI개발자들의 이상인 '웹 표준을 통한 웹 접근성의 확보'가 IE8의 등장과 함께 대립이 아닌 공존의 관계로 발전해 나가기를 기대해 본다.



추신 / 발표자료는 여기에서 내려 받으실 수 있습니다.

2009년 3월 10일 화요일

웹 페이지에 숨겨진 메세지를 찾아라!

앞으로 웹사이트를 통해서 중요한 단서가 되는 메세지를 숨겨 놓는 트릭을 걸 수 있게 될 것 같다.

다음은 IDG에 실린 IE8에 대한 기사 중 일부다. 만약 지금 인터넷 익스플로어를 제외한 파이어폭스, 오페라, 사파리, 크롬 등의 최신 버전을 사용중이라면 Ctrl + A 를 눌러보자.

지난 해 인터넷 익스플로러는 시장점유율을 잃었지만, 모질라의 파이어폭스, 애플의 사파리 그리고 새로 생긴 구글의 크롬 같은 브라우저는 날로 인기를 더해고 있다.

...

온라인에 등장하는 비즈니스 애플리케이션이 많아지면서 브라우저의 보안이 IT 관리자에겐 최고의 우선순위가 되었고, IE와 파이어폭스를 두고 어떤 브라우저가 안전한가에 대한 논쟁은 아직도 진행형이다.

윈도제품관리 VP인 마이크 내쉬는 최근 IE8에 포함된 새로운 보안과 사생활 보호 특성을 논의한 바 있다. 마이크로소프트는 이런 특성들이 기업 사용자의 생산성 및 해커로부터의 안전을 지켜주길 바라고 있다.

...

내쉬는 “과거에 웹페이지에 버그가 있어 장애가 발생하면 브라우저 전체 또는 운영체제마저 장애가 발생할 있었다”라면서, “IE8에서는 장애가 난 탭이 자동으로 복구된 후, 장애가 발생하기 전 사이트로 돌려놓는다”라고 설명했다.

스마트스크린 필터

커와 악성 사이트가 바이러스를 보내고 개인정보를 훔치는 방식이 날로 복잡해지면서 이를 퇴치하기 위해 스마트스크린 필터가 IE8에서 보강되었다.

...


수수께끼가 풀렸는가?


아주 재밌지 않은가? 이것이 가능한 이유는 IE를 제외한 주요 브라우저의 최신 버전들이 대부분 CSS 3의 스펙을 일부 지원하고 있기 때문인데, 그 중에 문자열을 선택하는 ::selection 속성 때문이다. 이 속성을 이용하면 사용자가 특정 문자열을 선택했을 때 하이라이트 되는 스타일(글자 색과 배경 색 등)을 지정할 수 있게 된다.

p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

추신 / 이 트릭은 Ph.Creative 의 글 CSS Trick: Hidden Messages에서 참조한 것입니다.

모바일 웹 Top 10 (미국)

* Clearboth Blog에 올렸던 글(2009/03/05)을 이전했습니다.


모바일 컨텐츠 이야기의 '모바일 웹의 성장은 계속된다'에 따르면 (오페라 소프트웨어가 발행하는 'State or the Mobile Web' 보고서 인용한 글) 2009년 1월 모바일 웹의 성장세가 지속적이고 뚜렷하게 나타나고 있다고 한다.

특별히 이 글에서 미국의 모바일 웹 Top 10 (미국)에 대한 자료를 소개하고 있는데, 포털과 SNS 사이트들이 주로 포진되어 있음을 볼 수 있다.
Top 10 sites in the U.S. (# of unique users)

1. google.com
2. facebook.com
3. myspace.com (up from 4)
4. wikipedia.org (up from 5)
5. yahoo.com (up from 7)
6. nytimes.com (up from 10)
7. youtube.com (up from 9)
8. gamejump.com (down from 6)
9. accuweather.com (back on the list)
10. cnn.com (back on the list)
웹 표준을 준수하여 사이트를 제작하였을 때 비지니스적으로 가장 큰 이점이 되는 분야가 바로 모바일 웹이라고 할 수 있는데, 앞으로 회사 내 임원이나 고객을 대상으로 하는 웹 표준 홍보에서 좋은 근거가 될 수 있다고 생각된다. 시장 초기에 자사의 웹 사이트가 모바일 웹에서도 제대로 보인다면 확실한 우선순위를 점할 수 있는 장점도 생기지 않겠는가.


추신 / 모바일 컨텐츠 이야기에서는 모바일 분야에 대한 다양한 정보와 글을 게재하고 있습니다.

2009년 3월 8일 일요일

오페라 모바일 브라우저의 새로운 UI 'Fingertouch'

오페라 소프트웨어에서 모바일 브라우저의 새로운 UI 'Fingertouch'를 공개했습니다.

최근 풀 브라우징 환경의 확대와 스타일러스(Styleus)에서 사람의 손가락으로 직접 터치(Touch)하는 방식의 전환으로 기존 모바일 브라우징이 가졌던 불편함을 해소하기 위한 UI를 선보였습니다.


정지 화면으로 자세히 살펴보면 다음과 같습니다.

화면이 작아서 원하는 객체를 정확하게 터치하기가 어려웠다.

터치 된 영역의 모든 객체가 확대되어 나타난다.

정확하게 원하는 객체를 터치할 수 있다.

 
단순하지만 확실히 사용성면에서 편리함을 가져다 주는 UI같습니다.


2009년 3월 7일 토요일

UI/웹표준/웹접근성 관련 오픈캐스트 운영하실 분 찾습니다.

오픈캐스트

제가 운영중인 '봄눈의 웹표준 소식'

저는 네이버 오프캐스트에서 '봄눈의 웹표준 소식'을 운영하고 있습니다. 개인적으로 제 블로그의 트래픽을 높이고 싶은 욕심도 있었지만 그 보다는 좀 더 많은 분들에게 '웹 표준'이라는 이슈를 알리고 싶었던 마음에서 시작한 것이었습니다. 운이 좋게 베타테스터로 선정되서 두 달 넘는 기간동안 19회에 걸쳐 발행을 해 왔구요. 오늘까지 1,185분께서 제 캐스트를 구독하고 계십니다. 제 블로그 구독자 수가 비공식적으로 150명 내외일 것으로 본다면 정말 많은 분들이 제 오픈캐스트를 기다려 주신다고 봐야겠죠. 그 분들께는 너무나 감사드리고 자주 발행하고 있지 못해 죄송하네요.

그런데 이번에 오픈캐스트 베타 테스트 기간이 연장되면서 베타 테스터가 새로 3명의 캐스터를 초대할 수 있도록 해 주었네요. 그래서 저는 '아무나'는 그렇고, 기왕이면 저처럼 UI개발을 하시는 분이거나 이쪽으로 관심을 가지고 계신 분들, 웹 표준과 접근성에 대해서 캐스트를 운영해 보고 싶으신 분들께 기회를 드려보고 싶습니다.

선착순으로 세분께 기회를 드릴 것이구요. 네이버 ID, 이메일 주소, 오픈캐스트를 운영하고 싶은 이유를 댓글로 남겨주세요.

2009년 3월 6일 금요일

미투에서 만난 UI개발자들

'낙장불입' 블로그로 유명한 미투데이에는 다양한 사람들이 어울리며 지내고 있습니다. 저 역시 그들 중 하나였고, 그 속에서 저와 비슷한 일을 하는 분들을 많이 만나며 지내온 것 같습니다. 오늘은 그런 의미에서 저와 미친(미투 친구)인 UI개발자, 웹 퍼블리셔 등 비슷한 일을 하고 계신 분들을 소개해 드리겠습니다. 아 몇 몇 분은 UI개발쪽 일이 아니시지만 훌륭하신 분이라 같이 소개해 드립니다.


초천재
http://me2day.net/happyday


hooney
http://me2day.net/hooney



기타도리
http://me2day.net/be_color


진달래
http://me2day.net/dalrae


ho-bread
http://me2day.net/ho-bread


정태영
http://me2day.net/aqua0125


차영신
http://me2day.net/tagnbrace


더마음씨
http://me2day.net/maum


jiyoon
http://me2day.net/jiyoon
jiyoon님 프로필 사진

태우
http://me2day.net/taewoo


zero
http://me2day.net/youngsu


호야지기
http://me2day.net/hoyajigi


isdead
http://me2day.net/isdead


hiphapis
http://me2day.net/hiphapis


wystan
http://me2day.net/wystan


StudioEgo
http://me2day.net/sungdh86


혜윰
http://me2day.net/junisun


애틱
http://me2day.net/attic


아거스
http://me2day.net/attic


skell83
http://me2day.net/skell83



bitty
http://me2day.net/bitty


듀틍
http://me2day.net/deute


일모리
http://me2day.net/ilmol


성민장군
http://me2day.net/jangkunblog




이군
http://me2day.net/e2goon


변태중년
http://me2day.net/sloppyzz



엽님
http://me2day.net/yubs


호이
http://me2day.net/hoiheart


차니
http://me2day.net/channy


dduck
http://me2day.net/dduck



중독
http://me2day.net/naxer


겨미겨미
http://me2day.net/tenshi




끝.

휴 많네요. 얼마 안 되겠지 싶었는데 한 분 한 분 헤아리다 보니 서른 두분이나 되네요. 직접 만나뵌 분들도 계시고, 아직 만나 뵙지 못한 분들도 계시지만 언젠가 곧 다 뵐 수 있을 거라고 생각합니다.

미투데이
를 하시는 분 중에 '나와 비슷한 일을 하는 분들과 인연을 맺고 싶다~'라고 생각이 드신다면 저분들과 미친을 맺으세요~ 미투데이를 아직 모르신다면 지금 한 번 써 보시구요~(아 미투데이 홍보같다; 이럴 생각은 아니었지만 ㅋ)

아! 제 미투는 알려드리지 않았군요!
미투데이여기입니다^^)/