KWAG 12번째 모임 발표자료 WAI-ARIA in Real World(on slideshare.net)입니다. 첫 발표라 긴장되고 어색했다는 느낌이 드네요. 죄송해요. ㅠ_ㅠ 발표에서 빼먹었던 내용들 이렇게 큰 모임에서의 발표는 처음이었던 관계로 긴장이 되어 준비했던 것들을 다 전달해드리지 못했습니다. 아쉬운 마음 글로나마 보충해봅니다. 참가하셨던 분들 중에 몇 분이나 보실지는 모르겠지만 도움이 되셨으면 좋겠네요. 브라우저별 ARIA 지원표에서… 프리젠테이션 10번 슬라이드의 내용입니다. 브라우저별 [...]

dynaTrace는 웹 페이지의 서버 실행 시간, 페이지 렌더링 시간은 물론 자바스크립트 한 줄의 걸린시간까지 볼 수 있는 툴이다. 얼마전 자바스크립트의 실행속도 때문에 시름시름 앓다가 지인의 소개로 이 툴을 알게 된 후로 그런 고민들이 싹 사라졌다. 자바스크립트 속도 때문에 골치를 앓고 있는 이라면 당장 설치하길… 암튼 좀 짱임.

http://example.com/page.html, http://example.com/page.html?param1=1, http://www.example.com/page.html 등 한 문서를 가리키는 여러 URL은 검색엔진에 심각한 중복 문제를 안겨줍니다. 최근 구글, 야후, 마이크로소프트가 이를 해결할 수 있는 방법을 제시하였습니다. <link rel="canonical" href="http://example.com/page.html" /> 위의 코드를 넣어주면 끝입니다. 간단하죠? 단어 그대로 표준 혹은 대표 링크를 선언해주는 것입니다. 이미 많은 발표자료, 동영상 등이 공개되어 있네요. 보시죠~ 참고로 첫 링크만 보시면 정리가 다 [...]

찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. 아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다. <div id="a"> <div class="content">…</div> </div> <div id="b"> <div class="content">…</div> </div> 그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 [...]

CSS Zen Garden 웹 폰트 버전, 잘 나와요! ㅋ 오페라10 알파 버전이 공개되었습니다. 다양한 기능과 속도 향상과 더불어 웹 폰트도 지원하는군요. 파이어폭스 3.1도 웹 폰트를 지원하니 이제 모든 주요 브라우저(IE와 사파리 포함)가 웹 폰트를 지원하게 되었네요. EOT냐 TTF냐 하는 이슈가 있긴 합니다만, Ajax 등장시절 구글 지도가 그랬던 것처럼 Best Case가 나오면 붐이 일 수도 있지 [...]

단어를 드래그, 더블클릭 등으로 선택하면 선택된 단어를 번역하여 보여주는 북마클릿, 이름하여 inline translator를 만들었습니다. 개인적으로 영문서 읽기 성공률을 올려보고자 만들었는데 생각보다 쓸만한 것 같아 공유해봅니다. :) Google AJAX Language API를 사용하였고 API 지원하는 모든 언어가 번역되어 보여집니다. 아래의 링크를 북마크에 추가하신 후 원하시는 페이지에서 실행하여 사용하시면 됩니다. ( IE7 이상과 파이어폭스, 오페라, 사파리 등의 최신 [...]

우리는 자신의 전자 시종에게 억압당하고 있다. 이 책을 우리의 해방을 위해 바친다. 사내의 동료들(웹 클라이언트 개발자들)과 Humane Interface (인간 중심 인터페이스)를 읽기 시작했습니다. 인간-기계 사이의 인터페이스는 무엇보다 인간이 사용하기 편해야한다.라고 이야기하는 이 책은 우리가 일상적으로 사용하고 있는 기계들에 대하여 알고 있는 불편한 점이나 혹은 익숙해져 불편한지 조차 모르는 것들을 끄집어내고 인간중심으로 바꾸어가는 방법과 그러기 위해 [...]

한국 웹 사이트들이 거대 인트라넷이 된 것이나 웹 표준 관련 기술들의 발전이 실무자들에게는 그냥 남 얘기인 것은 솔직히 말해서 IE 잘못이 아니다. 그냥 구버전 브라우저일 뿐인 IE6 잘못도 아니다. MS 잘못이다. IE6을 사용하는 사람들에게 캠페인을 할 게 아니라 MS를 들들 볶아야 한다. 아, 제발… 서비스팩도 좋고 뭐도 좋으니… IE7로 자동 업그레이드 좀 시켜주소. 지금 안되고 [...]

도메인 기간이 만료되어 방금 복구하였습니다. 스팸 죄송;

접근성을 해치지 않는 자바스크립트의 사용 신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 [...]

요즘 웹에서 벡터 그래픽을 표현하는 방법에 대한 관심이 생겨 canvas, SVG, VML 등을 살펴보고 있습니다. SVG라는 표준이 있고 HTML5에는 canvas 요소가 기본적으로 들어가는데 일단 IE 때문에 표준으로 짜자잔이라던지 CSS background로 벡터 그래픽을 사용한다던지 하는 신나는 일은 나~중에나 될 것 같습니다만 자바스크립트를 통해 IR처럼 구현하는 건 가능할 것 같습니다. 컨텐츠를 HTML로 기본적으로 마크업한 뒤 자바스크립트로 갈아치우는거죠. [...]

uvLayer youtube의 동영상을 검색하고 보고 묶고 공유하고 간직할 수 있다. 단지 접속 후 언어를 선택한 후 원하는 동영상을 찾으면 된다. 마우스를 다루는 재미를 느끼다보면 원하던 기능을 익힐 수 있다. 사용자에게 실제로 유용한 부분을 재미있는 UI를 통해 극대화시켰고 그 외에는 아무것도 없다. :) Juice – Discover. Organize. Share. 동영상, 이미지의 수집, 둘러보기와 웹 사이트를 구경하다가 궁금한 [...]

2008년은 개인적으로 많은 변화를 겪고 있는 해입니다. 겨미의 일로 그 어떤 때보다 슬프게 시작한 2008년. 군대 때문에 2년을 비우긴 했지만 2003년부터 몸 담았던 회사도 점점 상황이 좋지 않아 즐겁게 함께 하던 동료들과 헤어지기도 했어요. 전화위복이라고 했던가요? 여름이 다가올 즈음 영광스럽게도 오픈마루의 일원이 되었고 지난 10월 10일에는 혼인신고를 올리게 되었어요. 7달 전 6개월 시한부 선고를 받았던 [...]

CDK에서 주최하고 2008년 5월 1일부터 2008년 6월 1일까지 진행된 웹 표준 경진대회에 참석했습니다. 감사하게도 금상을 수상했음에도 불구하고 후기가 좀 늦었네요. 좀 게을러서 정리를 못하고 있다가 이제서야 정리해봅니다. 죄송합니다. ㅠ_ㅠ 대회에는 제가 참여하고 있는 하코사 강남스터디에서 3개의 조로 나누어 그 안에서 늘 긍정적이고 깜찍하신(ㅋㅋ) 비티님과 한 조로 참석하였습니다. 웹 표준에 많은 관심을 가진 디자이너이신 아트강님도 함께 [...]

2008년 7월 5일 하드코딩을 하는 사람들 웹 표준 스터디 소모임간의 연합 스터디 시 발표한 자료입니다. | View | Upload your own IE6의 역사 Windows와 함께 버전 업. Windows 98과 함께 IE5가 거의 쓰이지 않게 됨. Windows XP가 쓰이지 않게 되는 시점에 IE6에 대한 지원을 없애게 될 것 Windows 7의 기본 탑재 브라우저에 귀추가 주목됨 웹 [...]

TextMate의 강력한 기능 중 하나인 HTML의 Wrap Selection, Wrap Selection Each Line 기능을 Aptana에 추가하는 방법을 소개한다. 기능 소개 Wrap Selection, Wrap Selection Each Line은 리스트 마크업 – <ul>, <ol> – 을 작성할 수 있게 해주는 TextMate의 기능이다. 텍스트를 복사해넣은 후 각 줄의 시작과 끝에 <li> 태그를 넣는 수고를 크게 덜어주는 편리한 기능이다. Aptana에 기능 [...]

파이어폭스 3의 공개가 6월 17일로 확정되고 다운로드 수 기네스에 도전하고 있다. 주소 표시줄 자동완성 기능, 페이지 줌 기능 등 막강한 사용자 편의 기능으로 무장하고 있는 파이어폭스 3이지만, CSS 지원 향상은 사파리, 오페라와 비교해보았을 때 조금 부족한 느낌이 강하게 들었다. 그런데 파이어폭스 3.1은 그런 실망감을 꽤 삭혀줄 것 같다. 파이어폭스 3.1의 CSS 지원 2008년 안에 출시될 [...]

현 시대의 CSS로는 마크업의 무결성을 보장하면서 원하는 표현을 충분히 할 수 없다. 그 대표적인 예가 폰트와 배경이미지이다. 그 중에서도 폰트와 같은 경우는 기본 텍스트만으로는 원하는 결과물을 얻기가 힘들다. 이럴 때 우리가 가장 많이 사용하는 방식이 <img> 태그 혹은 이미지 대치법(Image Replacement)이다. 정보를 꾸며주기 위한 <img> 태그 <img> 태그는 사전적으로는 정보를 지닌 – 의미 있는 – [...]

지난 번에 Multiple Backgrounds에 대해 알아보았는데 이에 이어 오늘은 Web Fonts에 대해 써보겠습니다. Web Fonts 간략한 배경 웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 현재 CSS3의 한 부분이 되었습니다. 진행상황 오페라의 CTO인 [...]

CSS의 세로 중앙 정렬은 display: table-cell;이라는 간단한 방법으로 해결할 수 있습니다만, 글을 쓰는 현재 가장 많이 사용되는 브라우저인 IE가 이것을 지원하지 않기 때문에 항상 까다로운 문제였습니다. (IE8 – 베타 (8.0.6001) 버전 – 은 지원하는 것 같지만 아직 버그가 있는 듯 합니다.) 많은 꼼수가 있지만 사용에 많은 제약이 있었죠. 그런데 yomotsu라는 일본인이 간단하면서도 명쾌한 아이디어를 내놓았습니다. [...]