디자인에 민감한 사람들의 이야기를 듣다보면 많은 이들이 일반 링크나 대체 이미지로 치장된 링크를 눌렀을 경우 보여지는 링크 둘레의 점선을 없애달라는 요구를 많이 한다. 하지만, 이는 키보드 접근성을 해치는 경우라서, 그대로 놔두거나 적어도 링크 옆으로 삐져 보이는 점선을 없애는 조치 – a {overflow: hidden;} – 만을 권하고 있다.

요 점선의 목을 쥐고 있는 놈이 바로 outline이란 놈인데, 민감한 디자이너와 접근성 우선 옹호자 모두가 만족할 수 있는 문제의 해결 방법이 공개되었다. Opera에 속해 있는 Patrick씨가 future of web design tour 2009에서 행한 키보드 접근성에 관한 프리젠테이션에 있는 내용인데, 핵심은 적절한 상황(키보드 focus를 방해하지 않는 마우스 클릭)에서만 이 outline을 없애서 키보드 접근성을 해치지 않으면서도 링크 선택시 보여지는 점선의 둘레를 없애라는 것이다.

코드로 보면 너무나 간단하다.

a:active { outline: none; }

물론, 여기서 일반 a 태크의 outline property는 건드리지 않는 것이 중요하다.

너무나 단순하지만, 잠시라도 깊이 생각해보질 않아서 이렇게 쉬운 해결책을 그 동안 그냥 지나쳐 버렸던 것일까?
이미지 대체 링크를 마우스나 키보드를 사용해서 선택했을 때 여러 경우의 수를 조합해서 비교해 놓은 실험 페이지에서 최적의 결과를 직접 확인할 수 있다.

마지막으로, Patrick씨 행한 프리젠테이션 슬라이드(pdf)에 나와있는 맺음말을 옮겨놓는다.

if you style :hover, also :focus and :active
don’t suppress outline completely (reintroduce :focus and suppress :active)
leave tabindex alone – source order
JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)
lightboxes and their problems
only attach behaviour to focusable elements

웹 최적화 덕목 중에 Front-End User Interface 단에서 손볼 수 있는 항목에는 대표적으로 HTTP Requests의 수를 줄여주는 것이 있다. 물론, 여기에 CSS Sprite 기술을 써서 여러 배경 이미지들을 하나로 묶어 상당한 양의 서버 부담을 덜어줄 수 있지만, 문제는 그 적용에 만만치 않은 수작업이 필요하다는 것이다.
그래서, 이런 작업에 손을 덜어주는 여러 CSS Sprite Generator들이 존재하지만, 일일이 한데 묶을 수 있는 알맞은 배경 이미지를 찾아내고, 또 실제 적용될 background position을 계산하는 일은 여전히 개발자의 몫.

하지만, SpriteMe 덕분에 이것도 옛말이고 귀찮음 때문에 실제 적용을 미루는 것도 이젠 핑곗거리밖에 안 될 듯.

SpriteMe의 소개와 사용법은 개발자인 Steve Souders씨의 블로그 글에도 잘 설명되어 있는데, SpriteMe bookmarklet을 웹 브라우저 책갈피에 저장해놓고 필요할 때마다 선택해서 쓰면 된다.

SpriteMe가 기존 CSS Sprite Generator들보다 한 단계 더 진화된 놈이라고 부를 수 있는 이유는, 웹 페이지에 사용된 배경 이미지를 자동으로 찾아서 하나의 sprite 이미지로 사용될 수 있는 놈들을 따로 묶어주고, 이렇게 생성된 sprite 이미지를 시험 삼아 현재 웹 페이지에 바로 적용해서 보여준다는 점이다. 덤으로 각 배경 이미지에 적용될 background position도 함께 계산해서 보여주니, 아주 똑똑한 놈이다.

그런데, 사용하면서 한 가지 주의해야 할 것이, 하나의 CSS Sprite 이미지로 추천된 여러 배경 이미지 중에 서로 그 크기가 많이 차이 나는 배경 이미지들이 한데 묶여있을 경우, 나중에 이 배경 이미지들을 sprite 이미지로 묶어 생성하게 되면 그 크기 만큼의 불필요한 공백도 함께 포함되기 때문에 차이가 크게 나는 배경 이미지는 추천된 배경 그림 묶음들에서 drag out해서 끄집어낼 필요가 있다.

덕분에, 또 간단하게 4개의 requests를 더 줄일 수 있어서 고맙고, 앞으로 실제 바로 적용될 수 있는 CSS까지 함께 보여준다면 더 바랄 게 없겠군.

iPhone용 웹 애플리케이션 개발을 위한 JavaScript, CSS, 이미지들이 포함된 iUI – iPhone User Interface Library가 오랜만에 갱신되었다.

iUI 0.20 갱신 내용

WordPress의 iPhone용 인터페이스 제작 기법을 참고해서 만든 이 곳 블로그의 iPhone용 인터페이스에도 iUI가 사용되고 있는데, 새로운 파일을 덮어씌우고 기본 그림 배경을 흰색으로 바꾸는 작업으로 간단하게 갱신 완료.

그나저나, iPhone을 내 손아귀에 쥐어볼 수 있을 날은 언제일지…

올해 초 새로운 Mac mini 루머가 떠돌아다닐 때만 해도, 그동안 업그레이드 된 지 가장 오래된 기종이었기에, 구매의 기회를 엿보며 상당한 기대를 하고 있었다. 그런데, 정작 3월 초 발표와 함께 공개된 사양이 개인적인 기대를 충족하기에 충분하였음에도, 예상을 훨씬 뛰어넘는 가격으로 실제 구매는 정작 나중 일로 미뤄야만 했다.

그렇게 한 달이 지나고 있다가, 서버로서 임무를 성실히 수행하고 있는 10년도 더 지난 책상 밑 G4 466의 점점 더 커져만가는 아우성을 모른 채 하기에는 나의 인내심이 결국 바닥나 버렸다. 어쩌면, 더 빨라지고 친환경적인데다가 몸집까지 아담한 ‘새끈한’ 맥 미니에게 눈길을 빼앗긴 후부터, 밤마다 들리는 웅장한 팬 소리가 더는 참을 수 없을 정도로 거슬렸는지도.

결국, Mac mini 최하위 기종을 주문하고서 메모리 2GB를 더 추가해서 개운하게 이사 완료.

힘겨운 웹 서버의 임무를 무사히 마친 G4는, 차마 우편함으로 개조할 수는 없는 노릇이고, 당분간 백업 서버로서 그 임무를 계속 이어나갈 예정이다. 새벽녘 유난히 더 명료하게 들리던 그 웅장한 바람개비 소리와는 이제 안녕을 고하면서, 덤으로 한결 잽싸진 웹 사이트의 진정한 후원자인 나의 새 귀염둥이 맥 미니에게는 한 번 더 흐뭇한 미소를 지어준다. 🙂

Starting on or about the third week of April, users still running IE6 or IE7 on Windows XP, Windows Vista, Windows Server 2003, or Windows Server 2008 will get will get a notification through Automatic Update about IE8.

IEBlog : Prepare for Automatic Update distribution of IE8

거의 8년 동안이나 웹의 뒷골목을 들쑤시고 다니던 IE6 패거리들의 씨를 말릴 시간이 다가왔다.
제발 이번 기회에 많이들 박멸되었으면 좋겠군.