믿을 수 없지만, 실은 A와 B 둘 다 똑같은 색(#787878)이다.

위 그림은 사람이 색을 인지할 때 일으키는 이런 착시 현상의 원리를 자세히 소개한 다음 글에서 가져왔다: Color Wheels are wrong? How color vision actually works
망막이 색을 해독하는 오묘한 원리를 생리학적으로 잘 설명해 놓았다.

보통 세 가지 기본 색으로 빨강, 노랑, 파랑(subtractive colors) 혹은 빨강, 초록, 파랑(additive colors)을 떠올리는데, 이 Color Wheel을 생리학적 측면에서 다시 아주 간단하게 그려보면 다음과 같이 그릴 수 있다.

세 가지 기본 색이 아닌 네 가지의 기본 색으로 이루어진 것이다.

→ 눈 어지럽게 만드는 여러 착시 현상의 예 😯
복잡 미묘한 색 이론은 제쳐놓고라도, 눈에 보이는 것이 다가 아님을 다시 한번 일깨워주는 글이다.

Design is the method of putting form and content together.

– Paul Rand

Stephen Hay씨가 Real-world Responsive Design이란 주제로 Fronteers 2010 Conference에서 발표했던 강연 중 슬라이드에 담겨 있던 내용. 이와 함께 웹 개발 경험에서 터득한 지혜를 고스란히 담은 Fronteers 2010 sessions 비디오가 공개되었다. 틈틈이 챙겨볼 알짜배기 정보가 모여 있다.

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

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

현 상황을 살펴보면, 수많은 종류의 웹 클라이언트(웹 브라우저)들과 언제 어디서든 웹에 접속할 수 있는 다양한 종류의 장비들이 존재하고 있다. 그래서, 이런 특이한 상황마다 적절한 대처를 고려한 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.

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

Blueprint CSS 프레임워크를 이용한 Grid System 구현을 도와주는 Boks라는 이름의 Air 애플리케이션이 나왔다. grid와 baseline rhythm 설정이 가능하고, 자신의 CSS 파일도 따로 추가해서 디자인 결과물을 압축된 단일 CSS 파일로 합쳐서 뽑아낼 수 있다.
요새 참 많은 유용한 Air 애플리케이션들이 계속 등장하는군.

요새 보편적이고 다양한 웹 기술들을 웹 브라우저의 영역 밖으로 끄집어내서 데스크탑 애플리케이션으로 탈바꿈시키려는 많은 시도가 이루어지고 있는데, 그 중에도 Adobe AIR runtime 환경을 이용한 많은 인터넷 애플리케이션들을 선보이고 있다. 여기에 웹 개발자들에게 유용할만한 몇몇 대표적 애플리케이션들을 소개한다.

– Shrink O’Matic : 어플리케이션 창에 그림 파일을 떨구면 원하는 크기로 줄여준다. 그림의 크기와 비율 조정이 가능하고 JPG, GIF, PNG 그림 형식을 지원.

– Balsamiq Mockups : Web UI 디자인 도구로 다양한 종류의 UI 요소들을 불러와서 실제 완성된 디자인과 비슷한 모형을 간단하게 묘사해 낼 수 있다. 웹 UI 디자인을 위한 wire-framing 도구로도 최적. 유료($79)지만, 5분마다 뜨는 구매 안내 창을 닫는 수고가 아깝지 않을 정도로 완성도 높은 프로그램.

– Adobe Kuler Desktop : Adobe Kuler가 제공하는 다양한 색상들의 테마 모음을 간편하게 검색해서 사용할 수 있다.
– Contrast-A : 3차원 RGB 색상 그래프에서 선택된 색깔 조합들이 WCAG 2.0과 1.0 기준에 준한 색상의 밝기 대비 비율과 색맹 시뮬레이션 적합성 통과 여부를 검사해주는 도구로, 웹 접근성 향상을 도모하는데 아주 유용.

– jQuery API Browser : 인기 많은 JavaScript 프레임워크인 jQeury의 API를 궁금할 때마다 간편하게 검색해서 열람.