네이버와 한게임을 운영하고 있는 NHN의 UI Library가 오픈됐다. 이미 해외에선 Yahoo! User Interface Library(YUI)가 작년에 오픈되어 전세계 UI 개발자들과 다양한 의사소통을 해오고 있었지만, 국내에선 UI 관련 정보를 공유하는 사이트를 NHN이 처음으로 오픈했다.

NHN의 UI Library는 얼마전 다음에서 공개한 API와 서버측 개발자들의 공간인 DNA를 겨냥한 것으로 볼 수 있는데, 서버 사이드와 클라이언트 사이드 개발이라는 엄연한 차이가 있기 때문에 서로 선의의 경쟁을 할 수 있을 것 같다.

“Naver와 Hangame 서비스 웹페이지 UI 개발시 참고할 내용을 담고 있는 이 사이트”에 UI 개발 관련 다양한 정보와 사내 UI 개발팀에서 운영하는 블로그로 이뤄져 있으며, 다음의 DNA와 함께 국내 웹 개발 관련 자료의 공유에 많은 도움이 될 것이다

다만, NHN UI개발팀에서 말하는 ‘HTML 개발시 주안점’에 시멘틱(sementic)이 빠져서 아쉽다. HTML은 문서의 구조를 위한 마크업이고, 의미를 부여하기 위한 마크업이기 때문이다.

예를 들어, 문서의 어느 한 문맥을 강조하기 위해서 CSS를 통한 스타일 가이드로써 녹색을 지정했다고 하자. 그렇다면 이 문맥을 표현하기 위해서 HTML에선 class=”green”을 사용해야 할까? 아니다. 만약 그렇게 사용했다면, font color=”green”과 다름없는 형식(presentation)을 위한 마크업을 한 것과 다름 없다.

정답은 em을 사용하고, CSS에서 em {color:green}을 사용해야 한다. 웹 문서의 어느 한 문맥을 강조하는 것이 HTML의 역할이지, green이라고 class/id 네이밍을 통한 시각적 마크업을 사용하는 것은 올바르지 않다.

구조와 형식, 그리고 동작의 명확한 분리가 이뤄졌을 때에 비로서 웹은 보다 정보가 충만한 시멘틱 웹이 될 수 있을 것이다.

(주)팀인터페이스 산하 UI아카데미에서 9월 25일부터 26일 양일간 “Global Web Expert 실무 워크샾 – 웹표준 활용을 통한 웹 접근성 향상 전략“이 진행됩니다.

UI아카데미의 워크샵 안내 :

최근 웹표준과 웹접근성에 대한 관심이 높아지고 이를 효과적으로 적용 하기 위한 노력을 사회 각처에서 볼 수 있다.
표준과 접근성에 대한 요구는 갑자기 생긴 것이 아니고 웹이 처음으로 만들어졌을 당시부터 계속 되어왔던 것인데 그 동안 웹에 대한 이해나 고민이 충분하지 못해서 이를 간과해 왔던 것이 사실이다.
이러한 현상은 비단 국내에서만 볼 수 있는 현상은 아니고 웹의 근본을 다시 찾아가려고 하는 전세계적인 현상이다.

이미 웹표준과 접근성의 향상은 웹사이트 제작에 있어서 기본적으로 지켜져야 하면서도 상당히 높은 수준의 지식을 요구하는 특화된 분야로 자리잡고 있다.
이 교육 과정을 통해서 그동안 웹사이트 제작 단계에서 미처 생각하지 못했던 웹에 대한 이해를 높이고 웹표준을 준수한 단계적인 구축 방안을 통해 웹접근성을 향상시키는 실무적인 역량을 기르게 된다.

이번 워크샵을 진행하는 국내 웹 접근성 관련 고수들 :

1. 김정호 – 엑스비젼
2. 현준호 – 한국정보문화진흥원
3. 신현석 – 시도우
4. 그리고 저.. ^^;

일반대학의 경우 컴퓨터 공학과 4학년 전공 강의 중에 인간공학이 포함된다. 그 강의 중에 많은 비중을 차지하는 것이 바로 HCI(Human Computer Interaction), 즉 인간과 컴퓨터의 상호작용에 대한 연구이다.

HCI의 경우, 인터넷이 탄생하기 이전인 컴퓨터의 탄생과 함께 시작된 이론으로, 현재 많은 (해외)대학에서 정규 강의로 채택될 정도로 어느정도 이론적이 정립된 상태이다.

많은 웹 종사자들은 이런 HCI를 UI(User Interface), UX(User Experience), IA( Information Architecture) 등의 용어와 혼동하거나 혼용해서 사용하고 있으며, 웹 디자인의 중요한 요소로써, 정보 디자인으로 인식하고 있다.

최근 HCI를 대신해서 HII가 주목받고 있다. HII는 Human Information Interaction의 약자로 인간과 정보의 상호작용에 대한 이론이다. 이는 웹이라는 무한한 정보가 공유된 공간을 접속하기 위한 도구(수단)으로써 더이상 컴퓨터라는 한가지에 얽매일 필요가 없어졌기 때문이다. 즉, 핸드폰, PDA, 자동차 네비게이션, TV 등 다양한 멀티미디어 도구를 이용해서 정보에 접근할 수 있게 됐기 때문이다.

인간과 정보의 상호작용. 올해 초부터 이와 비슷한 고민을 했었는데, 역시 세상 사람 대부분이 비슷한 생각을 하고 있었다. 좀 더 명쾌하게 다음 세대 웹 디자인(Next Generation Web Design)에 대한 이론을 펼칠 수 있을 것 같아 기쁘다. 기존의 웹 디자인의 중요 이론들, UI, IA, UX 등이 갖고 있던 한계들이 한꺼풀 벗겨진 느낌이다.

잠자기 전에 뉴스나 읽어보려고 다음(daum)에 접속했더니만, 왠지 UI가 쌩뚱맞다. 중력의 법칙이 웹사이트에도 영향을 주는 것처럼, 검색 입력창이 밑으로 내려왔다.

검색 입력창은 넘 무거워서 아래로 내려왔고, 인기검색어는 넘 가벼워서 위로 사라졌을까? 이상하게도 파이어폭스에서만 제대로 랜더링되지 않고 있다. 지금이 월요일 새벽 0시 조금 넘었는데, 설마 이 시간에 홈페이지를 개편할까..

예전에야 국내 포털 사이트들의 이보다 더 망가진 모습을 종종 볼 수 있었지만, 최근엔 보기 힘들다. 나름대로 웹표준은 아닐지언정, 인터넷익스플러 + 파이어폭스 2개 브라우저에 대한 크로스 브라우징이 가능하도록 신경썼기 때문이다. 일례로 다음은 첫화면(홈페이지)이 W3C 표준을 준수했다던 보도자료도 배포했던 것으로 알고 있다.

어쨓거나, 조금 전까지도 잘 나오던 다음의 홈페이지가 파이어폭스에서 생뚱맞게 나오니, 원인을 분석해서 답을 알려주고 싶지만, 피곤한 관계로일단 자야겠다. 혹시 모르니, 해당 사이트의 소스를 카피해두는 센스~ ㅎㅎ