웹 디자인 해킹 명예의 전당

우리 웹 디자이너는 항상 교활한 무리였습니다. 달성해야 하는 특정 모양이나 기능이 있는 경우 일반적으로 솔루션을 결합할 수 있습니다. 우리를 안내할 특정 표준이나 도구가 없는 경우에도 마찬가지입니다. 이것이 웹 디자인 해킹의 개념이 작동하는 곳입니다.

해킹은 웹사이트를 특정 방식으로 보이거나 작동하도록 만들기 위한 창의적이고 종종 원형 교차로 방법입니다. 때로는 부정적인 의미를 내포하기도 합니다. 예를 들어 HTML 테이블 기반 레이아웃은 화면 판독기가 액세스할 수 없는 것으로 정당하게 조롱되었습니다. 그러나 모든 해킹이 나쁜 것은 아닙니다.

실제로, 그들은 가능한 것의 한계를 뛰어 넘을 필요에서 배치됩니다. 웹에는 항상 한계가 있었고 디자이너는 이를 해결하기 위해 해킹을 사용했습니다.

이를 통해 동료 디자이너와의 Twitter 토론에서 영감을 받아 지난 몇 년 동안 가장 유용하고 널리 퍼진 웹 디자인 해킹을 살펴보겠습니다. 그들이 오늘날 우리가 가지고 있는 기준에 반드시 양초를 들고 있는 것은 아니지만, 그들은 그들 시대에 명예의 전당이었습니다.

레이아웃: HTML 테이블 및 CSS 플로트

우리의 첫 번째 선택은 이 가상 명예의 전당에 함께 들어갈 것입니다. 각각의 최대 사용량은 몇 년 차이가 났지만 본질적으로 동일한 작업인 다중 열 레이아웃을 수행하는 데 사용되었습니다.

HTML 테이블

CSS가 등장하기 전에는 초기 웹 페이지가 단일 열 문제였습니다. 패딩이나 여백이 없었고 콘텐츠를 수평 열에 배치하는 표준 방법도 없었습니다. 즉, 진취적인 영혼이이 목적으로 테이블을 사용하기로 결정할 때까지.

물론 HTML 테이블은 페이지 레이아웃이 아닌 테이블 형식의 데이터를 보유하기 위한 것이었습니다. 그러나 CSS가 등장하기 전까지는 실제로 작업을 완료하는 효과적인 방법이었습니다.

CSS 플로트

테이블에는 앞서 언급한 접근성 문제가 포함되어 많은 단점이 있었습니다. 또한 브라우저에서 렌더링하는 속도가 느렸습니다. 따라서 CSS float가 도입되었을 때 웹 디자이너에게는 게임 체인저로 여겨졌습니다.

부동 소수점은 HTML 마크업이 아니므로 더 쉽게 액세스할 수 있고 성능을 향상시킬 수 있습니다. 갑자기 CSS를 통해 여러 열 레이아웃이 가능했고 화면 크기와 같은 것에 더 잘 적응할 수 있었습니다.

그러나 수레는 우리를 약속의 땅까지 데려다주지 못했습니다. 기둥의 높이가 같게 하려면 추가 clearfix 핵을 구현해야 했습니다.

이러한 각 항목은 원래 의도된 목적으로 사용될 때 오늘날에도 여전히 매우 유용합니다. 그러나 레이아웃의 경우 감사하게도 하루가 끝났습니다.

요소 간격: 비분리 공백(   ) 및 Spacer.gif

세부 지향적인 웹 디자이너는 종종 요소의 간격을 정확한 픽셀까지 낮추는 방법을 찾았습니다. 다시 말하지만 당시에는 이것이 쉽지 않았습니다. 따라서 줄 바꿈하지 않는 공백( )과 spacer.gif를 사용하여 공백을 더 잘 제어할 수 있습니다.

비분리 공간(   )

요소를 수평으로 범프하고 싶지만 중앙에 맞추거나 오른쪽 정렬하지 않고 싶습니까? 몇 개의 줄 바꿈하지 않는 공백을 추가하면 트릭을 수행할 수 있습니다.

그러나 그것은 그렇게 정확한 과학이 아니었습니다. 각 공간의 실제 크기는 글꼴 패밀리 및 글꼴 크기에 따라 다릅니다. 그리고 이러한 차이점을 고려하더라도 이 해킹은 방문자가 사용하는 브라우저와 OS에 따라 여전히 다르게 보일 수 있습니다.

스페이서.gif

이 보다 정확한 간격 해킹은 투명한 .GIF 이미지(종종 spacer.gif 라고 함)를 만들고 페이지에 배치함으로써 이루어졌습니다. 깔끔한 측면은 투명한 이미지이기 때문에 디자이너가 모양이나 성능에 부정적인 영향을 미치지 않고 높이와 너비를 픽셀 양으로 설정할 수 있다는 것입니다.

CSS는 이 두 가지 해킹을 모두 쓸모없게 만들었습니다. 그러나 WordPress Gutenberg 편집기에 거의 동일한 작업을 수행하는 Spacer 블록이 있다는 것을 모르시겠습니까? 그 필요성이 여전히 존재한다는 것을 보여주기 위한 것입니다.

타이포그래피: 이미지 기반 텍스트

이것의 필요성은 꽤 간단했습니다. 초기 웹은 기본적으로 사용자 시스템에 설치된 글꼴로 제한되었습니다. 물론 디자이너는 Times New Roman, Georgia, Arial 및 Helvetica와 같은 기본 글꼴 외에 사용자가 액세스할 수 있는 모든 글꼴을 알 수 있는 방법이 없었습니다.

그와 함께 Photoshop에서 텍스트로 가득 찬 이미지를 만드는 끔찍한 결정이 내려졌습니다. 이를 통해 거의 모든 글꼴을 사용할 수 있었지만 접근성이 저하되었습니다. 또한 HTML 표제 태그 대신 이미지를 사용하면 페이지의 의미가 손상되어 잠재적으로 SEO에 손상을 줄 수 있습니다.

고정 헤더 및 탐색: 프레임

HTML 프레임은 우리가 한때 사용했던 많은 작업이 이제 CSS와 JavaScript를 통해 수행되기 때문에 아마도 시대를 앞서갔을 것입니다.

개념은 상당히 간단했습니다. 레이아웃 내의 각 개별 "프레임"은 실제로 자체 페이지였습니다. 이것은 머리글, 바닥글 또는 탐색을 나머지 사이트 콘텐츠와 분리하는 쉬운 방법이었습니다. 예를 들어 탐색을 변경한다는 것은 단일 파일에서 단일 변경을 의미했습니다. 서버 측 포함과 유사하지만 몇 가지 다른 디자인 이점이 포함되어 있습니다.

그 중 가장 중요한 것은 "고정" 헤더 및 탐색을 만드는 기능이었습니다. 사용자가 콘텐츠를 스크롤하면서 사이트를 쉽게 탐색할 수 있었습니다.

이 기술은 목적을 달성했지만 이상과는 거리가 멀었습니다. 다양한 화면 크기에 적응하지 못했고 SEO에도 적합하지 않았습니다. 또한 잠재적으로 악의적인 URL에서 프레임을 로드하는 것과 관련된 몇 가지 보안 문제가 있었습니다.

이미지 최적화: 슬라이스 이미지

광대역이 널리 보급되기 이전에는 이미지 최적화가 매우 중요했습니다. 50kb 이미지라도 느린 연결에서는 페이지의 무게를 줄일 수 있습니다.

소프트웨어 대기업 Adobe는 흥미로운 솔루션을 제공했습니다. ImageReady 소프트웨어를 사용하여 디자이너는 단일 이미지를 원하는 수의 작은 조각으로 분할할 수 있습니다. 그런 다음 각 개별 슬라이스를 최적화하여 이론적으로 빠르게 다운로드할 수 있습니다.

하지만 그게 다가 아닙니다. 그런 다음 소프트웨어는 슬라이스를 HTML 테이블로 내보낼 수 있습니다. 거기에서 해당 HTML을 복사하여 페이지에 붙여넣을 수 있습니다.

이 기술의 문제는 두 가지였습니다. 첫째, 테이블 레이아웃을 렌더링하는 데 추가 시간이 걸릴 수 있으므로 달성한 최적화가 중단될 수 있습니다. 둘째, 유지 관리가 매우 어려울 수 있습니다. 예를 들어 큰 헤더 그래픽에 탐색 항목을 추가하려면 완전히 새로운 슬라이스 세트로 다시 시작해야 하므로 템플릿 변경이 필요합니다.

이미지 최적화는 여전히 중요하지만 광대역은 고맙게도 큰 파일에 대해 조금 더 여유를 가질 수 있습니다. 그럼에도 불구하고 최신 버전의 Photoshop은 여전히 ​​이미지 분할 및 HTML 내보내기를 제공합니다.

Internet Explorer 설치: <!--[if IE]>

오늘날까지도 웹 디자이너(나를 포함하여)가 Internet Explorer의 끈질긴 존재를 욕하는 것을 듣는 것은 드문 일이 아닙니다. 일부 사용자가 단순히 포기하지 않기 때문에 부분적으로 유산이 계속됩니다.

그 때문에 우리는 IE의 많은 독점적인 단점과 한계를 해킹하고 있는 것처럼 보입니다. 수년 동안 IE 사용자를 감지하고 대체 스타일을 제공하기 위해 조건부 주석을 사용하는 것이 포함되었습니다.

IE <!--[if IE]> 의 모든 버전에 스타일을 적용하거나 이전 버전 <!--[if lt IE 11]> 을 사용하는 대상을 대상으로 할 수 있다는 점에서 다소 다재다능했습니다. 특정 릴리스 <!--[if gte IE 10]> 보다 크거나 같은 버전을 찾아 반대로 사용할 수도 있습니다.

Microsoft는 이러한 조건부 주석이 IE에서 작동할 수 있도록 했기 때문에 웹 디자이너에게 약간의 동정심을 가졌을 것입니다. 고맙게도, 그들의 새로운 Edge 브라우저는 그런 넌센스를 필요로 하지 않습니다.

기억해야 할 웹 디자인 요령

우리 명예의 전당에 있는 해킹은 확실히 웹 디자이너가 사용하는 유일한 것은 아닙니다. 불가능해 보이는 일을 하는 데 도움이 된 수많은 해결 방법이 있습니다. 그러나 이 목록을 차별화하는 것은 대규모 사용과 경우에 따라 주요 기업의 지원입니다.

그리고 아마도 우리가 그들에 대해 말할 수 있는 가장 좋은 점은 그들이 일했다는 것입니다. 우리는 그것들을 목적을 위한 수단으로 사용했습니다. 물론, 그것들은 덕트 테이프를 닳게 해서 함께 고정되었을 수도 있지만, 그런 고상한 디자인을 실제로 브라우저에서 렌더링하는 것은 진정한 성취처럼 느껴졌습니다.

더 나은 것은 그들이 오늘날의 웹을 위한 길을 닦는 데 도움을 주었다는 것입니다. 이 목록에 있는 대부분의 항목은 HTML 및 CSS 표준으로 대체되어 모두에게 도움이 됩니다.