11월의 어느 늦은 밤, 나는 나의 고향인 애리조나 주 투산(Tucson) 위를 날아가서 이 도시의 격자형 배치에 놀랐다. 투산은 미국에서 계획을 통해 건설된 도시 중 하나이다. 디자이너가 세심하게 배치한 것입니다(그림 1). 런던에서 방금 돌아왔습니다. 런던의 도시 레이아웃(그림 2)은 굴곡이 있어 좀 더 온 것처럼 보입니다. 자연에서.
그림 1: 애리조나주 투산
그림 2: 런던
이 글에 대해 오랫동안 고민해왔는데, 이 두 도시의 조감도는 웹디자인을 연상시킨다.오늘날의 기술은 그리드 기반의 디자인을 자유롭게 구현하거나, 그리드에서 완전히 벗어나는 것을 가능하게 해준다. 웹 디자이너에게 미치는 영향에는 의심의 여지가 없습니다. 하지만 실제 과제는 어떻게 닫힌 생각을 버리고 그리드 밖에서 생각하느냐입니다.
도시적인 느낌
도시계획과 웹디자인을 비교해 보면 둘 사이의 유사점이 흥미롭습니다. 그리드 레이아웃은 예측 가능하고 탐색하기 쉬운 웹 사이트를 만드는 데 적합합니다. 그리드는 디자이너가 웹 사이트를 계획하고 사용자가 쉽게 액세스할 수 있도록 돕는 데 적합합니다(그림 3).
그림 3: 라이언 브릴
장점으로는 투산은 확실히 방문하기 쉬운 도시이고, 약간의 방향 감각이나 거리 지도만으로도 충분하고, 주민들이 다른 사람에게 길을 알려주고, 내가 Campbell Avenue 교차로의 남서쪽 모퉁이에 있다고 말하면 충분합니다. 프린스로드 어디서나. 대중교통은 남쪽과 북쪽 또는 동쪽과 서쪽으로 이루어져 있어 길 찾기가 매우 쉽습니다.
반면, 투산의 디자이너들은 원래 제한적인 확장을 계획했는데, 도시가 계획된 한계를 넘어서 성장하면서 문제가 발생했습니다. 투산 그리드의 한계로 인해 다양한 스타일의 커뮤니티나 지역이 출현하지 못합니다. 많은 투산 주민들은 도시에 활기 넘치는 도심이나 수많은 독특한 지역이 부족하다고 느낍니다. 결과적으로 그러한 지역이 나타나더라도 쉽게 접근할 수 없습니다. 굳이 찾지 마세요.
런던은 달라요. 미스터리죠. 나는 런던 사람들이 돌아다니기 위해 도시 가이드에 의존한다는 것을 알고 있습니다. 도시의 교통 시스템은 어려움으로 가득 차 있으며, 택시 운전사는 일을 하기 전에 특별 시험을 통과해야 합니다. 도시의 자연적인 성장으로 인해 도시는 여행하기 쉬운 곳이 아닙니다.
그러나 런던에는 흥미로운 지역과 독특한 동네뿐만 아니라 문화 중심지와 독특한 동네도 가득합니다. 여행하기가 더 어렵긴 하지만, 취향이 다양하기 때문에 사람들은 그 중 하나가 되고 싶어 합니다.
이 비유는 자연스러운 경향이 있는 웹 디자인에도 적합합니다. 사람들이 어떻게 구불구불한 골목을 쉽게 탐색할 수 있을까요? 반면에, 아름다운 디자인은 우리가 살아온 상자를 깨뜨림으로써 달성될 수 있습니다. 그림 4에서는 그리드 디자인의 규칙을 벗어나 디자인이 여전히 다르게 보이면서도 사용 가능한 상태를 유지하는 방법을 볼 수 있습니다.
그림 4: AIGA 로스앤젤레스
그리드 코드의 신화
디자인보다 코드에 더 관심을 두는 사람으로서, 우리의 디자인이 어떻게 코드에 집착하는지 혼란스럽습니다. 나는 그것이 우리를 탄탄한 기초를 다지게 만드는 장기적인 테이블 레이아웃이라고 믿습니다(그림 5). 최신 CSS 레이아웃을 사용하면 그 이유를 쉽게 알 수 있습니다.
그림 5: k10k
테이블 레이아웃은 그리드 디자인과 잘 어울립니다. 테이블 자체의 코드는 그리드를 재현합니다. 셀에 그림, 텍스트, 인터페이스 요소를 채워서 디자인을 완성합니다(그림 6). 복잡하고 구조화되지 않은 디자인을 구현하려면 문서에 많은 수의 그림을 사용해야 하므로 문서 전체가 부풀어오르게 됩니다.
그림 6: 체중 이동
테이블 형식 레이아웃에는 몇 가지 장점이 있지만 도시 계획과 마찬가지로 장점이 단점으로 바뀔 수도 있습니다. 테이블 기반 그리드를 사용하면 모든 셀이 규칙적으로 유지됩니다. 모든 열의 너비를 동일하게 하시겠습니까? 너무 단순해서 테이블의 특성이 그렇습니다. 셀 사이에 일정한 간격을 유지하시겠습니까? 그것은 또한 케이크 조각입니다. 그런데 이런 깔끔한 구조를 원하지 않는다면? 불행히도 그렇게 할 수 없습니다.
CSS는 이 모든 것을 변화시킵니다. 이것이 바로 우리가 아직 웹 디자인을 배우지 못한 이유입니다. 우리, 특히 오랜 테이블 레이아웃에서 CSS를 사용하는 사람들은 CSS의 시각적 모델이 그리드 디자인의 틀에서 벗어나는 데 얼마나 도움이 될 수 있는지 이제 막 이해하기 시작했습니다. CSS 레이아웃이 완벽합니까? 아니요, CSS가 제공하는 이점 외에도 손실되는 것도 있습니다. 열 확장은 셀 간격과 마찬가지로 CSS 디자인에서 큰 문제입니다.
CSS는 그리드에서도 볼 수 있는 가장자리와 상자에 지나지 않습니다. 그러나 둘 사이의 본질적인 차이점은 CSS를 사용하면 상자를 주변 환경과 분리하고 마음대로 처리할 수 있다는 것입니다(그림 7).
그림 7
위치 지정을 위해 위치 또는 부동 속성을 사용할 수 있으며, 가벼운 그림을 배경으로 사용할 수 있으므로 Box를 사용하면 그리드 레이아웃과 비그리드 레이아웃을 모두 더 효과적으로 구현할 수 있습니다. Dave Shea의 Blood 예제를 참조하세요. Lust는 그가 CSS Zen Garden에서 사용한 많은 디자인 중 하나입니다(그림 8).
그림 8: CSS Zen Garden: 피의 욕망
그림 9는 Blood Lust에서 사용된 BOX 기반의 비정형 디자인을 보여주며, CSS와 BOX를 사용하여 독립적인 비정형 그리드를 구현하는 방법도 보여줍니다.
그림 9
BOX의 기능을 이해하면 그리드의 제약을 쉽게 극복할 수 있습니다. 그림 10은 고도로 구조화되지 않은 자유로운 디자인을 보여줍니다.
그림 10: Kutztown University: 커뮤니케이션 디자인학과
다음 BOX는 CSS를 사용하여 배치됩니다.
그림 11
코드가 더 깔끔할 뿐만 아니라 CSS 레이아웃에 익숙한 디자이너에게는 더 직관적이고 간단합니다. 디자인도 직관적이고, 사용하기 쉽고, 틀에 얽매이지 않습니다.
시야
현대 레이아웃 기술의 장점은 선택할 수 있는 옵션이 더 많다는 것입니다. CSS를 사용하면 원할 경우 그리드 기반이 될 수 있는 관리 가능하고 가볍고 시각적으로 풍부한 디자인을 만들 수 있으며 그리드를 쉽게 끊거나 끊을 수 있습니다.
이는 현대 웹 디자인에 더 많은 기회를 열어주며, 단지 그리드 디자인에 더 익숙하다는 이유만으로 같은 실수를 해서는 안 됩니다.
오랫동안 테이블 레이아웃에 집착해 온 우리들에게는 그 어려움이 특히 크다. 수년 동안 웹 디자이너로 일해 온 사람들에게 이것은 그들이 항상 사용했던 것에서 벗어나는 것을 의미합니다. 어떤 사람들은 그것이 어렵다고 느끼지 않을 수도 있지만, 대부분의 사람들은 그것이 위협적이라고 생각할 것입니다. 우리는 CSS 모델이 어떻게 작동하는지 배우고 기존 규칙에 작별을 고할 용기를 가져야 합니다.
우리는 과거의 방식이 낯설고 경직되어 있던 디자인 고정관념에서 더 많은 돌파구를 보기를 희망하는 것은 바로 이들 신참자들입니다.
웹은 성숙해지고 있으며, 우리가 디자인하는 방식은 변화하고 있으며, 우리 앞에는 더 많은 혁신과 창의성이 놓여 있습니다. 우리는 계획된 도시에 집착하지 않고 독특한 디자인을 달성할 수 있습니다. 우리는 오래된 디자이너들과 오늘날의 신인들이 결합하여 날마다 웹을 변화시킬 것입니다.
이 기사의 작성자:
Molly E. Holzschlag는 잘 알려진 웹 표준 지지자이자 전도사입니다. 30권이 넘는 그녀의 책 중 베스트셀러는 Dave Shea와 공동 집필한 The Zen of CSS Design(Zen Web Design)입니다. Molly는 W3C 워킹 그룹의 초대 전문가이자 웹 표준 프로젝트 그룹(WaSP)의 전 이사였습니다. Molly는 유용하고 아름답고 의미 있는 웹을 만들기 위해 디자이너, 개발자, 실무자, 의사결정자와 협력합니다.
추신
2005년 A LIST APART에 게재된 글입니다. 2005년에는 CSS 레이아웃이 지금처럼 흔하지 않았고, 테이블 레이아웃은 많은 사람들을 압도했습니다. 저자 Molly E. Holzschlag She는 웹 분야의 수석 전문가입니다. 또한 테이블 레이아웃의 장기 사용자입니다. CSS가 성숙기에 가까워지고 CSS 기반 레이아웃이 새로워지면 기사에서 볼 수 있듯이 테이블 기반 그리드 디자인에 대해 엇갈린 감정을 갖게 됩니다.
하지만 CSS가 널리 보급되고 CSS 레이아웃이 익숙해진 2009년에는 그리드 디자인이 죽은 것인지, 아니면 테이블이 나쁜 것인지 다시 생각해 볼 필요가 있습니다. 대답은 그리 간단하지 않습니다. 오늘날의 웹은 웹 애플리케이션 외에도 정보를 표현하고 전달하는 영원한 목적을 가지고 있습니다. 그러나 당신이 우체부라면 투싼을 선택할 것이다. 따라서 그리드 디자인이든 내츄럴 디자인이든 절대적인 장점이나 단점은 없습니다. 그리드 디자인이 더 선명하고 깔끔하며, 자연스러운 디자인이 더 우아하고 세련됩니다.
그리고 많은 사람들이 말하는 것처럼 테이블은 더 이상 과거의 테이블이 아니라는 점에 유의해야 합니다. BOX는 CSS와 결합될 수 있으며 테이블도 CSS로 완전히 수정된 테이블과 같습니다. 유기적 조합 및 상호 작용의 집합입니다. BOX, 셀의 정확한 위치 지정이 필요하지 않은 경우 테이블은 모든 브라우저와 가장 잘 호환되고 접히지 않기 때문에 BOX보다 더 완벽한 컨테이너입니다. 길이는 다르지 않을 것이며, 그 행동은 기대에 부응하기가 더 쉽고, 가장 중요한 것은 사람들이 일을 정리하는 가장 직접적인 방법이라는 것입니다.
원저자 Molly E. Holzschlag
중국어 번역 소스: COMSHARP CMS 공식 웹사이트, 번역기 35km.