기존 매크로미이더 사이트의 고유한 그리드(grid) 디자인과 그레이 톤의 색조합이 인상적입니다. 테이블(table)의 xy-격자 형식 레이아웃을 div와 CSS로 말끔하게 표현했습니다. 또한 YUI(Yahoo User Interface) 라이브러리를 이용하여 다양한 자바스크립트 이펙트(특히 아코디언 효과)를 연출함으로써, 인상적인 인터페이스와 함께 접근성 높은 디자인을 구현했습니다.

최근 해외에선 어플리케이션 구조의 웹 사이트가 많이 제작되면서, 그리드 기반 레이아웃이 각광을 받고 있습니다. 이러한 격자 형식의 레이아웃은 기존의 표현을 염두한 테이블 마크업으로 구현하지 않고, 컨텐츠의 내용과 구조를 중심으로 올바르게 마크업한 후에 CSS만으로 표현을 분리하여 구현하고 있습니다. 여기에 DOM으로 접근한 JavaScript로 다양한 UI 이펙트를 표현함으로써, 데스크탑 어플리케이션 못지 않은 인터페이스를 구현하고 있습니다.

무엇보다 이 사이트에서 눈 여겨볼 디자인적 가치는 “둥근 모서리(rounded corner)으로 표현하지 않는 블록(block)도 멋진 디자인을 구현할 수 있다“는 점입니다.

해외에선 이와 같은 이벤트 사이트가 별도로 만들어져 운영되는 경우가 많습니다. 일회성 행사를 지양하고 행사의 위상을 높히며, 참여자들과 의사소통을 할 수 있는 좋은 케이스죠. 국내에서도 최근 오픈마루가 주최한 WOC가 별도 사이트를 운영했습니다.

일반 회사나 커뮤니티, 또는 블로그 형식의 사이트와 달리 이런 이벤트 성격의 사이트는 CSS 디자인에 적절한 내용과 구조를 이루고 있습니다. 특히 이번 FoWA 사이트는 무척 깔끔하고 심플한 디자인이 시선을 사로잡네요. 최근 웹 어플리케이션의 UI들의 공통점도 바로 깔끔하고 심플한 디자인이기에 더욱 Good 디자인이라고 말할 수 있겠네요.

사이트 성격에 맞는 디자인. 그것을 가능하게 하는 효율적인 방법 중에 하나가 바로 CSS 디자인입니다.

전체적인 색감은 물론이고, 비쥬얼적 완성도가 높은 훌륭한 사이트입니다. 물론 HTML + CSS 코드도 흠잡을 게 없네요. 다만, 사이트에서 제공하는 음악을 window media player에서만 들을 수 있는 asx 파일로 제공하는 점이 아쉽네요.

사이트는 대부분의 웹 브라우저에서 잘 보이도록 디자인됐는데, 어린이 합창단의 음악은 특정 프로그램에서만 들을 수 있도록 한 점이 아이러니합니다. ㅎㅎ

제가 테스트한 firefox 2.0과 opera 9.1 그리고 internet exploer 7.0 모든 브라우저에서 잘 보입니다. 훌륭한 CSS 디자인을 보여주고 있으며, 굳이 흠을 찾는다면 javascript를 dom으로 접근하지 않은 정도 뿐이네요.

주일 예배 프로그램을 VOD와 MP3로 다시 확인할 수 있도록 한 점이 눈길을 사로잡습니다. RSS와 같은 feed를 제공하면, 더욱 멋진 사이트가 될 수 있겠네요.

해외에서도 마찬가지지만, 국내의 웹 환경 역시 이렇게 작은 사이트들부터 웹 표준을 준수하여 개편되는 것이 순서일 듯 싶습니다. 웹의 진정한 가치는 소수의 정보 독점이 아니라, 다수의 정보 공유이니깐요~

게시판(bbs)에서 컨텐츠의 문단을 시각적으로 줄바꿈하기 위해 br을 연속해서 사용한 점과 img 태그와 같은 빈태그를 제대로 닫지 않는 출력 형식에서 굳이 xhtml 1.0 strict를 사용할 필요가 있었나 의문입니다. 실제 문서의 구조화와 정형화(well-formed)된 컨텐츠를 보여주는 야후의 경우에도 html 4.01 strict 문서형식을 선택하고 있기 때문입니다. 문서에 알맞는 문서형식을 선언했으면 좀 더 좋았을 것 같네요.

컨텐츠를 보여주기 위해서 곳곳에 중복된 이미지와 텍스트들을 사용하고 있습니다. 보다 세심한 설계를 통해서 컨텐츠의 중복을 피하지 않은 점이 아쉽네요. alt 태그로 이미지의 대체 텍스트를 충실히 넣는 것은 기본이지, 전부가 아닙니다. 보다 접근성 높은 컨텐츠를 위한 배려가 필요합니다.

충분히 멋진 사이트이기에, 굳이 눈에 걸리는 점을 찾아봤습니다. 마지막으로, 현재 국내에 유행처럼 퍼진 3열 레이아웃이 메인 페이지의 사용됐는데, 제 눈에는 영문 페이지의 레이아웃이 더욱 시선의 흐름을 자연스럽다고 느껴지네요.

미국(US)인을 대상으로 제품을 판매하는 사이트 같던데, 사이트 테스팅을 위해 회원가입을 하는 중에서 경고문구가 한글로 나온점이 눈에 띄더군요. (사이트 개발자께서 서버 미지원으로 UTF-8 인코딩을 못썼다고 하네요~ ^^;)

소개 부분과 상품 구매 상태 등의 페이지가 완성되지 않은 점과 몇몇 페이지들이 파이어폭스로 볼 때 깨지는 점들만 수정하면 더욱 멋진 사이트가 될 것입니다.

해당 출판사의 사이트가 비표준 코드로 제작되어 있어서, 그 동안 웹 표준에 관심 갖던 많은 이들로부터 구설수(?)에 올랐었는데, 이로써 국내 출판업 관련 최초의 웹 표준을 준수한 사이트가 탄생하게 됐습니다.

파이어폭스로 접근하면 브라우저가 강제로 종료되는 관련 업종 사이트가 비교될 정도로 깔끔하고 탄탄하게 잘 만들었습니다.

홍익대학교 주변과 신촌 지역은 예술/디자인 문화의 중심지로 많은 디자인 관련업체들이 자생 또는 이주하면서 자연스럽게 디자인밴드가 형성되어왔다. 또한 문화 경제시대인 21세기 디자인은 개인의 삶의 질 향상부터 기업, 나아가 국가 경쟁력을 키우는데 있어 시대적 요청을 가장 충실히 반영하는 문화 컨텐츠 기반 고부가가치 창조 행위로 진화하고 있다.

구성주체들의 신속한 정보교류를 도와주고 협력기업 및 기관들의 공동 사업 개발의 기회를 제공한다. 이를 통하여 홍대.앞.디자인.클러스터를 한국 디자인 산업의 중심으로 성장하는데 그 목적이 있다. [출처 : 홍대.앞.디자인.클러스터]

전체적으로 어두운 배경에 작은 크기의 회색 텍스트들이 가독성을 떨어뜨립니다. 또한 서로간의 협력과 정보교류를 위한 사이트인데, 검은색 어두운 배경과 파란색 차가운 메인 컬러는 어울리지 않습니다. 심플한 상단 네비게이션을 플래시로 제작한 의도도 모르겠습니다.

잘 정리된 레이아웃과 정보 배치, 그리고 여백의 미가 웹사이트 디자인의 완성도를 높여주지만, 웹사이트 디자인이 고려해야할 더 많은 것들을 신경쓰지 못했습니다.

자바스크립트를 이용한 URL 고정과 링크 이동은 정보 접근을 원천적으로 차단하는 최악의 스크립트이며, form 태그에 둘러 쌓인 게시판은 table 태그를 div로 바꾸고 웹표준으로 제작했다고 우기는 것처럼 보입니다.

국내에서 디자인하면 연상하는 곳이 홍대이며, 이 홍대 주변의 디자인 업체들의 연합 성격의 사이트가 이런 디자인이라는 것은, 웹 디자인과 일반 디자인의 차이를 극명하게 보여줍니다.

충분히 멋진 사이트이기에, 아주 조금만 손 본다면 더욱 멋진 사이트가 될 것입니다.

제가 기억하기론 이번이 4번째 개편인데, 깔끔하고 멋지게 개편됐군요. 하늘색과 녹색이 멋드러지게 조화됐습니다. 이처럼 하늘색+녹색+주황색의 킬러 배색을 블릭스라고 일반화하던데, 주황색은 빠졌으니 뭐라 불러야 할지 모르겠네요.

이번 개편의 핵심은 사용자가 별점을 줄 수 있는 점입니다. 특히 별점을 세로로 주는 방식이 세롭군요. 이를 응용한다면, 온도계와 같은 세로형 막대 그래프를 만들 수도 있겠군요.

CSS를 활용해서 최소한의 마크업을 사용했지만, 적절한 배경이미지를 사용했기 때문에 시각적으로는 테이블 레이아웃 이상의 섬세함이 보여주고 있습니다. 이렇게 CSS로 배경이미지 교체기법을 사용할 땐, IE(Internet Expler)의 Flickr(깜빡이는) 버그에 Hack을 날려줘야 하는데, 아직 신경쓰지 못한듯 싶습니다.

오페라의 로고에 사용된 빨간색과 브라우저 특징인 심플함이 웹사이트 디자인에서 잘 표현됐습니다. 해외에선 비즈니스 사이트에 대한 웹디자인의 가이드라인을 제시할 정도로 훌륭한 디자인의 사이트입니다. 물론 XHTML과 CSS 문법도 완벽하죠.

최근 한국에서 직원을 채용한다는 광고가 올라와서, 국내에서 본격적인 활동이 시작될 거라는 소문이 사실로 확인된 듯 싶습니다.

사이트 전체적인 색감이나 레이아웃도 훌륭하지만, 눈에 보이지 않는 markup도 무척 훌륭합니다. 다른(국내 포함) 교회 사이트에 모범이 될만한 사이트입니다.

최근 미국과 유럽의 교회들은 웹사이트에 POD CAST를 제공해서, 주말에도 일하거나 교회에 참석하지 못하는 신자들을 배려하고 있다고 하던데, 사실인듯 싶군요. 바야흐로 비과학의 대표주자인 종교의 영역마저도 웹의 영향을 받는군요. ㅎㅎ

A List Apart 의 Dan Benjamin 과 우리에겐 “실용예제로 배우는 웹표준” 이란 책으로 친숙한 Dan Cederholm 이 만나 와인정보 공유사이트 Cork’d 를 만들었습니다.

이 사이트는 레일즈(RubyOnRails)로 만들어졌고 A List Apart 스타일의 간결한 디자인이 특징입니다. [by LikeJazz]