보통 웹 디자인을 할 때나 혹은 애플리케이션을 개발할 때 디자인에 잘 어울리는 색깔을 고르는 과정은 중요하고 흔한 일이다.
이럴 때를 고려해 개발돼서 배포되고 있는 애플리케이션도 다양한데, Mac OS X에도 기본적으로 이럴 때 써먹을 수 있는 color picker를 제공하고 있다. 그런데 생각보다 잘 쓰이지 않는 이유는, 그 기능이 제약적이거나 혹은 원할 때 바로 열어서 사용할 수 없다는 것도 분명히 한몫을 하고 있다.

이런 고민을 해결해 줄 수 있는 아주 간단한 애플리케이션이 있었으니, 바로 Spot Color. 요놈만 설치하고 실행시키면 바로 맥의 기본 color picker 창을 띄워 준다.

자, 안성맞춤의 색깔을 고를 수 있는 간단한 방법이 마련되었으니 이제 여기에다 편의와 기능을 더해줄 제3의 color picker를 찾아볼 차례.

제일 먼저 추천하고 싶은 것은 잘 알려진 Panic에서 제공하고 있는 Developer Color Picker이다.

Developer Color Picker는 화면 위에 보이는 특정 색깔을 집어내거나, RGBa 값을 조절해서 원하는 색을 추출해 낼 수 있다. 특별히 좋은 점이라면 다양한 형태로 원하는 색을 추출해 낼 수 있는 것인데, Mac 애플리케이션이나 iPhone/iPad 앱 개발에 바로 사용될 수 있는 NSColor, UIColor, CGColor 선언 값을 바로 되돌려 준다는 것. 물론, 웹에서 사용하는 Hexadecimal, RGB, HSL 값 형태로 돌려받을 수도 있다.

또 하나 그 쓰임새가 색다른 놈으로 ColorNamePicker도 있다. 장점은 바로 색 이름만 입력하면 해당 색과 가장 가까운 색의 값을 돌려준다는 것이다. 색깔 이름을 입력하는 칸은 자동 완성 기능도 제공해서 일일이 색 이름을 다 알고 있을 필요가 없다. 특히 색맹이 있는 사람들에게 유용할 듯.

마지막으로, 다양한 색상의 조화가 고민될 때 떠오르는 것으로 Adobe® kuler가 있는데, 여기에 맞는 기능을 color picker에서도 Mondrianum 2를 설치하면 사용할 수 있다.

이렇듯 제대로 된 조합으로 잘만 쓰면 그 어떤 독립 애플리케이션이든 큰 부러움 없이 효율적으로 쓸 수가 있다.

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

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

전부터 글을 쓸 때마다 맞춤법이 이게 맞는지 저게 맞는지 헷갈릴 때가 잦아서 웹상의 한국어 맞춤법/문법 검사기를 돌려서 확인하곤 했다.

문제는, 확인하고자 하는 글을 복사해서 맞춤법 검사기 페이지를 열어놓고 붙이는 일마저 가끔 거추장스러워서 그냥 넘어갈 때도 종종 있었다. 그런데 이런 웹페이지에서 진행되는 단순 반복되는 작업을 대신 해주는 것으로 Safari extension이 제격일 것이란 생각이 들었고, 그래서 개발을 시작한 지 일주일도 안 되어서 드디어 나의 첫 Safari extension이 완성되었다. 이름은 바른 말씨. 우연하게도 전에 만들었던 나의 widget 이름과도 비슷하다. 😀

이젠 웹페이지에 있는 글자를 마우스로 선택하고 tool bar 버튼이나 contextual 메뉴를 선택하면 바로 검사 결과를 볼 수 있으니, 개인적으로도 자주 애용할 듯하다. 역시 필요에 의한 개발의 결과물은 만족도가 더 높은 법인가 보다.

한 가지, iframe을 사용한 페이지는 문제가 발생할 소지가 많아서 작동을 막아 놓았다.
과연, 오늘부터 올리는 글의 맞춤법 고민을 한 방에 없앨 수 있을까?

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

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

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