웹 디자인 및 제작의 디자이너 프레임워크에 대해

요즘 웹 개발에서는 "프레임워크"가 꽤 화두입니다. 예를 들어, JavaScript 프레임워크인 YUI, JQuery 및 Prototype은 광범위한 관심을 끌었으며, 웹 애플리케이션 프레임워크인 Rails 및 Dojo는 더욱 많은 관심을 끌었습니다. 모든 사람이 자신의 웹사이트를 개발하기 위해 일종의 프레임워크를 사용하는 것 같습니다. 그렇다면 프레임워크란 정확히 무엇입니까? 프레임워크는 프로그래머에게만 유용합니까?

프레임워크란 무엇입니까?

의사소통을 용이하게 하기 위해 우리는 "프레임워크"(적어도 이 기사에서는)에 대한 통합된 정의를 제공합니다. 즉, 공통 작업을 추상화하고 재사용할 수 있는 도구, 함수 라이브러리, 규칙 및 일반 모듈 세트입니다. 개발자는 작업 프로젝트 고유의 측면에 집중하고 개발 중복을 피할 수 있습니다. 일반적으로 프레임워크는 위에서 언급한 JavaScript 프레임워크 및 웹 애플리케이션 프레임워크입니다.

구성, 패키징 및 배포에 대해 이야기할 필요가 없다는 점을 강조하는 것이 중요합니다. 대신 프레임워크는 귀하 또는 귀하의 팀에서만 사용할 수 있습니다.

CSS 프레임워크

때로는 추상적이고 유사한 CSS 코드의 이점을 맛볼 수도 있는데, 이는 동시에 여러 유사한 웹사이트를 디자인하는 디자이너들 사이에서 가장 분명합니다. 게다가 팀의 디자이너들은 프레임워크의 접근 방식으로부터 많은 이점을 얻었습니다. 예를 들어, 저는 신문사에 근무하고 있는데 20개 이상의 웹사이트는 모두 뉴스 웹사이트의 특성에 따라 공통점이 많습니다. 그러나 표면적으로는 매우 다르게 보이는 프로젝트를 작업하는 단일 디자이너라도 CSS 프레임워크에 대한 몇 가지 공통적인 작은 부분을 추상화할 수 있습니다.

제가 일하고 있는 Lawrence Journal-World에서는 최근 CSS 프레임워크를 구축했고 이것이 효율성을 크게 높여준다는 사실을 발견했습니다. 물론 CSS 프레임워크를 직접 만드는 데는 며칠이 걸렸지만 프레임워크가 완성된 후에는 고품질 웹페이지를 개발하는 속도가 매우 빨랐습니다. 게다가 이제 팀의 모든 디자이너가 이 프레임워크를 사용하기 때문에 디자이너가 다른 팀 구성원의 웹 페이지를 수정할 때 더 이상 다른 사람의 구성 아이디어를 이해하는 데 20분을 소비할 필요가 없으며 즉시 시작할 수 있습니다.

무시해도 되는 부분이 있나요?

매우 전체적인 CSS 프레임워크에 투자할 때 찾고 싶은 것은 모든 프로젝트에서 반복해서 반복되는 공통 코드입니다. 목표는 이러한 코드의 핵심 위치를 통합하고 "반복하지 마십시오"를 따르는 것입니다. t Repeat Yourself)' 인코딩 방법을 참조하세요. 이를 통해 유지 관리가 훨씬 쉬워지고 방문자의 대역폭 비용이 절약됩니다.

제가 작업하는 거의 모든 프로젝트에는 선언해야 할 몇 가지 CSS 문제가 있습니다.

브라우저 기본 스타일의 "광범위한 재설정"(예: 모든 요소의 여백 및 패딩을 0으로 설정, 프레임세트 및 이미지의 테두리 제거 등)

기준선에 맞춰 정렬합니다. 여기에는 단락, 헤더, 목록과 같은 블록 수준 요소의 여백을 동일한(또는 여러) 기준선 높이로 설정하는 등의 작업이 포함됩니다.

양식의 기본 스타일을 만듭니다.

일반적으로 사용되는 여러 CSS 클래스를 만듭니다(예: .hide(표시를 없음으로 설정, 즉 요소 숨기기), .mute(더 작은 글꼴과 더 밝은 색상으로 설정)).

그리고 더 재미있는 점은 많은 웹사이트 디자이너들이 동일한 기본 구조를 계속해서 재사용하고 있다는 것입니다. 그렇다면 매우 유연하고 여러 웹사이트에서 사용할 수 있는 방식으로 자신만의 구조를 만들어 보는 것은 어떨까요? 유이. Lawrence Journal-World 웹사이트를 위한 CSS 프레임워크를 구축할 때 저는 Yahoo가 어떻게 이를 수행했는지 살펴보는 것부터 시작했습니다. 우리는 이것이 우리가 원하는 것이 아니라고 확신합니다. 그러나 이는 좋은 예가 되고 우리에게 생각할 거리와 우리 자신의 프레임워크를 구성하는 방법에 대한 많은 아이디어를 제공합니다. 우리는 각 사이트가 다음 사이트와 약간 다르게 보이더라도 모든 사이트에서 작동할 수 있을 만큼 유연한 16셀 문제를 해결했습니다. 또한 대부분의 웹사이트는 드롭다운 메뉴, 탐색 메뉴, 버튼 등과 같은 위젯을 공유합니다. 이는 추상화가 필요한 주요 개체이기도 합니다. 또한 이미지 목록의 썸네일과 같은 공통 콘텐츠 이름을 가질 수 있습니다. 썸네일을 표시하는 모든 썸네일에서 이 CSS 클래스를 사용하도록 "thumbnail-list"와 같은 CSS 이름 지정을 표준화할 수 있습니다.

또 다른 방법은 해킹(예: 기존 브라우저와의 호환성)을 추출하고 자신만의 확장 스타일 모듈을 추가하는 것입니다. 직접 시도해 보았지만 해당 해킹이 너무 독점적이어서 일반 프레임워크로 추출할 수 없다는 사실을 발견했습니다.

실제 이점은 무엇입니까?

프레임워크의 진정한 이점은 작업을 빠르게 시작할 수 있다는 것입니다. 새 (X)HMTL 파일을 만들고 프레임워크를 도입할 수 있으므로 더 이상 패딩과 여백을 재설정할 필요가 없습니다. 유효한 위젯 등 하지만 분명히 각 사이트의 모양과 느낌을 사용자 정의해야 합니다. 이를 달성하려면 필요한 경우 기본 스타일을 재정의하고 추가하기만 하면 됩니다.

물론 각 웹 사이트의 모양을 사용자 정의해야 하지만 이를 수행하려면 기본 스타일에 몇 줄의 코드를 추가하기만 하면 됩니다. 예를 들어, 프레임에 "tabs" 클래스 속성이 있는 모든 UL 태그에 대해 기본 수평 탐색 스타일을 설정하고 회색 테두리가 있는 경우 CSS 코드 몇 줄만 있으면 모양과 느낌을 사용자 정의할 수 있습니다. 웹 사이트는 다음을 준수합니다.

목록은 왼쪽에 떠 있고 링크는 목록의 블록 형태로 배치되며 프레임워크는 웹 사이트에서 성가신 광고와 같은 작업을 완료하는 데 도움이 됩니다. 디자인 작업에서는 이전에 수백만 번 작성된 CSS 코드를 작성하는 대신 웹 사이트의 구체적이고 흥미로운 세부 사항에 집중하세요.

CSS 프레임워크를 구축하는 방법은 무엇입니까?

프레임워크를 구축하는 방법에는 여러 가지가 있지만 가장 일반적이고 가장 유용한 방법은 공통 CSS를 전체의 특정 부분만 포함하는 독립형 스타일시트 파일로 추상화하는 것입니다. 예를 들어 하나의 스타일 핸들 타이포그래피와 다른 핸들 대량 재설정을 가질 수 있습니다. 이 좋은 방법을 사용하면 프레임워크에 6~7개의 서로 다른 스타일 파일이 있을 수 있지만 가져오지 않는 한 그 중 한두 개는 필요하지 않습니다. 우리 팀이 만든 프레임워크는 5개의 스타일 파일로 구성됩니다.

Reset.css - 재설정을 처리합니다.

type.css — 타이포그래피를 처리합니다.

Grid.css — 레이아웃을 처리합니다.

widgets.css — 탭 메뉴, 드롭다운 메뉴, "추가" 버튼과 같은 위젯을 처리합니다.

base.css — 다른 모든 스타일시트 파일을 포함하므로 전체 CSS 프레임워크를 사용하려면 (X)HTML에서 base.css만 참조하면 됩니다. 그런 다음 모든 사이트에서 이 프레임을 가져올 수 있도록 프레임워크를 별도의 장소에 저장합니다. 물론 각 웹사이트에는 고유한 스타일 시트가 필요하며 고유한 스타일은 프레임워크에 필요한 보완 요소가 됩니다.

조언

이 방법은 좋지만 새로운 문제도 발생합니다. 즉, 각 페이지의 http 링크 수가 증가합니다. 트래픽이 크고 중간인 웹사이트의 경우, 각 페이지에 5개 이상의 HTTP 연결이 추가되면 시스템 관리자는 큰 어려움을 겪을 수 있습니다. 두 가지 가능한 솔루션:

모든 스타일을 여러 모듈로 분할하는 대신 하나의 파일에 넣습니다. 여기서 문제는 특정 파일만 포함하는 프레임워크의 유연성이 상실되고 유지 관리가 번거로워진다는 것입니다.
여러 단일 파일을 응답으로 동적으로 처리하는 서버 측 프로그램이 있습니다. 아직 이 작업을 본 적이 없지만 잘 수행하면 매우 효율적일 것입니다. 위의 프레임워크를 예로 들면 이 동적 처리 프로세스는 type.css, Grids.css 등이 요청될 때가 아니라 base.css가 요청될 때 트리거됩니다. 이런 방식으로 개별 파일을 계속 사용할 수 있으며 전체 프레임워크가 플랫폼 버전에서 유효합니다.
요약하자면, 우리의 목표는 가능한 한 추상적이지 않다는 점에 유의하는 것이 중요합니다. 대신 목표는 확실히 가능한 빠른 시작과 보다 효율적인 설계 프로세스를 제공하는 것입니다. 너무 추상적으로 접근하면 혼란스러울 수 있으며 HTTP 링크가 너무 많으면 사이트 성능에 영향을 미칠 수 있습니다. 기억하세요: 좋은 프레임워크는 일을 더 어렵고 복잡하게 만드는 것이 아니라 처음부터 시작하는 것입니다.

요약

우리 웹 디자이너는 항상 반복하는 경향이 있으며 프로그래밍 세계의 친구들처럼 거의 모든 프로젝트에서 브라우저 기본 스타일, 디자인 레이아웃 및 탐색 메뉴를 계속해서 재설정합니다. CSS 프레임워크를 정리하는 데 약간의 시간을 투자하면 각 웹 사이트 프로젝트를 빠르게 시작하고 웹 사이트를 더 쉽게 유지 관리하며 팀의 다른 디자이너가 작업을 이해하는 데 도움이 될 것입니다. 이러한 이점은 웹사이트의 성능에 영향을 주지 않고 얻어야 한다는 점에 유의해야 합니다.