일반적으로 웹 페이지 혹은 웹 애플리케이션을 제작할 때는 페이지에 담긴 내용을 효과적으로 전달할 수 있도록 그 중요도에 따라 전체적인 내용의 윤곽(outline)을 그리는 일부터 시작된다.

그런데 HTML5에선 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들이 소개되었을 뿐만 아니라 웹 브라우저가 문서를 읽고 DOM tree를 해석하는 outline algorithm에도 변화가 있어서, 이 바뀐 점을 올바로 이해하고 적용하는 것이 문서 전체의 윤곽을 잡는데 아주 중요한 일이 되었다. HTML5의 새로운 문서 Outline 알고리듬(이)란 제목의 글 마저 읽기 →

얼마 전 누가 갑자기 웹 디자인에 대한 내 생각을 물어본 적이 있다. 그 순간 머릿속 이 생각 저 생각이 한꺼번에 뒤섞이고 순서 없이 내뱉어지면서, 전달이 제대로 안 되었던 아쉬운 경험이 있다. 그래서, 다시 한 번 그동안 여러 사람의 얘기와 글을 통해서 동감했던 내 생각을 정리해 본다.

웹 디자인을 얘기할 땐, 가장 먼저 웹의 태생과 디지털 웹 미디어의 소비 패턴을 살펴볼 필요가 있다. 웹이 탄생하게 된 이유는 장소에 얽매이지 않고 손쉽게 정보를 소통하고 공유하고자 하는 목적에서 태어났다. 이것은 결국, 정보 소통이 원활하지 않은 사이트라면 그때나 지금이나 원래 목적이 이미 실패한 거나 다름없다는 얘기다.

현 상황을 살펴보면, 수많은 종류의 웹 클라이언트(웹 브라우저)들과 언제 어디서든 웹에 접속할 수 있는 다양한 종류의 장비들이 존재하고 있다. 그래서, 이런 특이한 상황마다 적절한 대처를 고려한 UI 디자인이라면 처음 시작 단계부터 웹 페이지에 담긴 정보를 충실하게 골고루 전달해 줄 수 있도록 하는 데 중점을 두어야 한다.

또한, 웹 디자인은 과거 웹의 탄생 이전부터 존재해 왔던 출판 인쇄물 디자인과 약간 다른 성격을 띠는데, 이 점을 간과하면 큰 실수를 범하기 쉽다. 물론 공통으로 닮은 점도 있다. 예를 들어, 독자가 책을 선택하고 읽는 행위는 기본적으로 그 책에 담긴 내용을 흡수하려는 목적이 제일 클 것이다. 물론 읽기 편하게 배치된 문단과 고운 활자 디자인은 독자들로 하여금 정보를 훨씬 더 쉽게 이해할 수 있도록 도움을 주지만 말이다. 이처럼, 디자인의 핵심은 바로 원활한 내용 전달에 있다.

여기서 웹만이 지닌 차이점이라면, 정보에 접근할 수 있는 다양한 장비들에 내장된 클라이언트들은 각자의 다른 정보 해석 방식과 표시 유형이 서로 달라서, 그만큼 개발자가 손보고 신경 쓸 일이 훨씬 더 많다는 것이다. 더군다나 웹은 사용자들과의 상호작용도 더 동적이지 않은가? 이런 복잡한 상황에서, UI 개발자들의 세심함과 배려 그리고 창의성을 잃지 않기 위한 끊임없는 노력이 필요하고, 또 이것이 무엇보다도 가장 중요한 덕목이라 생각되는 이유이다. 덩달아, 가까운 미래의 웹은 과거와 달리 HTML5를 비롯한 흥미진진한 웹 표준 기술들의 등장과 확산으로, 그 어느 때보다 개발자의 창의력을 발휘할 수 있는 훌륭한 밑바탕이 마련되고 있다.

난 잘 만들어진 웹 디자인을 우리나라 한옥에 비유하고 싶다. 한옥은 사람들에게 편안한 안식처를 제공하면서 동시에 주위의 환경과 조화를 이뤄, 바깥 드넓은 자연과 사람을 이어주는 단단한 구조물이다. 이처럼, 좋은 웹 디자인도 단지 겉으로만 보이는 두꺼운 포장이 아닌, 정보 소통을 원활하게 연결해주는 하나의 잘 짜인 틀이라 생각한다.

맺는 말로, 전에도 인용했던 Jeffrey Zeldman씨의 좋은 웹 디자인에 관한 얘기를 하지 않을 수 없다.

Good design is invisible.

Good web design is about the character of the content, not the character of the designer.

그래서, 티 나지 않게 다가가 자연스레 스며드는 디자인이 멋진 디자인이다.

끈적이 노트(sticky notes)라 함은, 주로 웹에서 알림 글이나 주의를 요하는 글의 내용을 담아두는 배경으로 많이 사용되는데 (개인적론 웹사이트 대문에 twitter feed 표시용으로 사용하고 있다), 요넘을 사용할 경우엔 몇 가지 주의사항이 있다.

우선, 이 배경 그림을 쓸 때는 글 내용에 맞는 크기의 이미지를 미리 마련해 두어야 한다는 것이다. 나중에 글 내용이 길어지거나 줄어들기라도 하는 날엔 그 크기에 맞게 이미지 편집기에서 불러와 조물락 다듬어 주어야 할 경우도 생긴다. 그리고, 여기에 끈적이의 구석이 약간 말려 올라간 그림자 효과까지 줄라 치면, 투명 영역이 들어간 png 파일을 사용해야 하는데, 요넘을 그대로 사용하면 IE6에서 보기 흉한 흔적을 남겨서 이를 위한 불필요한 꼼수를 부려야 하는 골칫거리도 있다.

이런 상황에서 훌륭한 대안으로 사용될 수 있는 것이 바로 우리의 수퍼스타 CSS3이다.
CSS3를 쓰면서 얻을 수 있는 이점은 위에서 말한 부작용도 없거니와, CSS 선언 단 몇 줄로 이미지 사용을 배제하면서 더 빠르고 접근성 높은 사이트를 만들 수 있고, 물론 오래된 브라우저들에서도 “degrades well” 한 결과를 보여준다. 그림을 쓰지 않고 멋진 sticky notes 만들기(이)란 제목의 글 마저 읽기 →

아래 snippet은 Touch Events를 지원하는 iPhone/iPad에서 기존 mousedown/mouseup events를 대신하는 touchstart/touchend event 탐지 목적에 쓰일 수 있다.

if ('createTouch' in document) {
  // Touch events are supported. 
  // So we can use touch events like 'touchstart' or 'touchend' instead of mousedown/mouseup. 
}

iPad에서의 click event handling은 약간 지체되는 느낌이 있으므로, 되도록이면 대응하는 touch events를 써주는 것이 좋을 것이다.

그리고 참고로, Android에선 Touch Events를 지원하지만 위의 방법을 사용할 수 없다고 하니, 어쩔 수 없이 navigator.userAgent도 살펴봐야 한다.

function supportsTouch() {
  var android = navigator.userAgent.indexOf('Android') != -1;
  return android || !!('createTouch' in document);
}

iPhone 4의 Retina display는 잘 알려진 바와같이 326dpi의 높은 해상도를 지니고 있다.
물론, 이것은 장점 중에 하나로 일려져 있지만, 이 고해상도 화면을 가지고 일반 웹 사이트에 표시되는 그림들을 보면 결국 2배로 확대된 픽셀 형태로 보여지는 결과를 낳게 된다.

그래서, 앞으로 점점 늘어날 이런 고해상도 display를 염두해 둔 이미지를 준비해놓지 않는다면 정교한 화면의 장점을 충분히 활용하지 못할 것이라는 얘기다.

이런 고해상도 display에 대한 준비 요령은 이미 제시되어 있는데, 해결책은 결국 CSS3(background-size, ::marker pseudo-element, boarder-image)와 SVG에서 찾을 수 있다는 소리.

자, 이렇게 해서 준비된 고해상도 이미지를 진정 고해상도 display를 가진 iPhone 4에만 보여주고 싶다면 아래의 CSS3 media query 안에서 적용해 주면 된다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone 4-specific styles go here */
}

지금 당장이야 그 필요성이 적겠지만, 앞으로 이런 고성능/고해상도 휴대 장비의 사용이 늘어나면 또 하나 progressive enhancement의 좋은 본보기가 되지 않을까? 이미 시작되었는지도.