Adobe의 Developer Connection는 웹 개발자와 디자이너에게 유용한 정보를 제공하고 상호 교류를 위한 서비스입니다. 매크로미디어를 인수하면서 인쇄/출판 뿐만 아니라 웹 전반의 디자인/개발 프로그램을 개발하고 있는 Adobe의 SNS(Social Network Service)입니다.

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

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

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

의견을 남겨boa요~