웹 사이트 개발 과정 중에서 사이트의 기본 틀(wireframes)을 잡는 과정은 전체 웹 사이트의 구조와 전달 형식을 규정짓는 단계로서, 아마도 사이트의 규모가 커질수록 그 중요성은 더욱 커질 것이다.
기본 틀을 잡는다는 것은, 페이지의 헤딩이나 이동 메뉴, 문서의 꾸림 정보, 사이드바 그리고 어플리케이션 인터페이스와 같은 사이트에 포함될 주요 요소들을 추가/정의하고 위치를 잡는 작업이다.
이렇게 계획 단계에서 기본 틀을 제대로 잡는 것이 중요한 이유로는, 웹 개발 팀원들 간의 의견 교환을 통한 기본 개발 지침과 방향을 마련하게 되면서 나중에 발생할 수 있는 여러가지 변경 사항들에 관한 의견 소통을 원활하게 하고, 또 사이트가 포함하게 될 각 요소 간의 관계들을 일목요연하게 나타내면서 훨씬 수월하고 효과적으로 사이트의 동작과 스타일들을 표현할 수가 있기 때문이다.
그런데, 이러한 중요성에도 불구하고 작업의 특성상 하얀 종이 위에 사이트의 기본 틀을 여러 번 그리고 고치기란 번거로운 작업이 아닐 수 없다. 그래서 이런 수작업을 보다 효과적으로 수행하는데 도움을 받을 수 있는 도구로 다양한 도표 제작 어플리케이션인 OmniGraffle를 사용하게 되면 그 기능을 충분히 대신할 수가 있게 된다.
OmniGraffle이 사이트의 기본 틀을 잡는 과정에서 특히 빛을 발하는 기능들 중에는, stencil이라고 불리는 여러 도표들에서 사용될 수 있는 다양한 모양의 기호 형판들의 모음집이라 할 수 있는데, 기본적으로 제공되는 것들 이외에 사용자들이 stencil을 직접 제작해서 올려놓은 사이트도 있다. 물론, 이 곳의 User Interface 항목에는 사이트의 wireframe들에 사용될 수 있는 다양한 기호들의 stencil들을 내려받을 수가 있어서, 이것들을 불러와서 좀 더 사실적이고 유연한 사이트의 틀을 표현할 수가 있다.
앞의 stencil들을 모아놓은 Graffletopia라는 사이트는 Summer of Rails의 여러 프로젝트들 중의 하나로서, 어쩐지 군더더기 하나 없이 산뜻하게 만들어져 있는 모습이다. 8)
새로 덧붙임: 틀을 잡을 때 특히 강조되는 것으로, 중요한 것에 치중하라는 얘기가 있다.
이 말은, 웹 디자인 과정에서 UI(User Interface) 요소들의 중요도에 따라 접근하면서 디자인을 확장하라는 얘기이다. 먼저, 웹 페이지에서 꼭 필요한 요소들은 무엇인지부터 시작해서, 그 중요도에 따라 적용이 가능한 여러 표현 방법들을 고민하는 것이다.
이러한 과정은 웹 사이트의 틀(wireframe)을 잡는 과정과 함께 동반적으로 이루어지는 작업이며, 틀을 잡는 작업의 보조적 장치로서 Page Description Diagrams이 필요해지는 이유이다.
이것은 곁가지들만 치다 몸통을 베어내는 실수를 막으려는 또 하나의 안전장치로 볼 수도 있다.