웹 디자인 역사 수업: 웹 디자인 20년
게시 됨: 2015-12-23거의 미친 것 같습니다. 저는 1996년 에 지역 신문에서 일하면서 웹 디자이너로서의 여정을 시작했습니다. 내 수학이 맞다면 나는 이제 막 스무살에 접어들 것이다. 내 인생의 절반 이상을 웹에서 일하면서 보냈습니다.
따라서 그 당시 웹이 어떻게 작동했는지(또는 작동하지 않았는지) 되돌아보고 오늘날 우리가 직면한 몇 가지 문제와 비교하는 것이 흥미로울 수 있다고 생각했습니다. 내가 가진 질문은 웹에서 역사가 반복됩니까?
무역의 도구
1996년에 웹 디자인은 최소한 상업적인 의미에서 초기 단계에 있었습니다. 그 당시 나는 Windows 95의 메모장에서 손 으로 HTML을 코딩했습니다.
Coffee Cup과 같은 일부 기본적인 웹 편집기가 존재했습니다. 그러나 WYSIWYG는 현실에 가깝지도 않았습니다. 대부분의 경우 HTML 편집기가 조잡한 코드를 작성한다는 사실을 발견했습니다(나처럼). Macromedia가 Dreamweaver의 첫 번째 버전(나중에 Adobe에서 인수)을 출시한 1997년까지는 개선되지 않았습니다.
Macromedia는 1997년에 Dreamweaver를 출시했습니다.
Adobe에 대해 말하자면, 그 유서 깊은 Photoshop은 오늘날처럼 웹 디자인 친화적이지 않은 앱이었습니다. 버전 기록을 살펴보면 항상 존재하는 "웹용으로 저장..." 옵션이 1999년에 릴리스된 버전 5.5까지 Photoshop에 제공되지 않았다는 사실이 놀랍습니다.
Photoshop 5.5의 웹용으로 저장 대화 상자. (이미지 출처)
우리가 지금 즐기는 모든 CSS3의 장점이 있기 전에는 Photoshop이 그림자, 둥근 모서리 및 그라디언트에 대한 거의 유일한 옵션이었습니다. 웹용으로 이미지를 압축하는 것은 당시 Adobe의 생각조차 하지 못했습니다.
그래픽 및 코드 편집 외에도 디자이너가 선택한 주요 도구는 오래된 FTP 클라이언트였습니다. 56k 모뎀을 통한 웹 기반 파일 업로드는 옵션이 아니었습니다.
역사는 반복되는가?
확실히. Dreamweaver와 Photoshop은 여전히 인기가 많으며 잘 작동합니다. 디자인과 개발을 훨씬 쉽게 만들어주는 다른 도구는 수백, 수천은 말할 것도 없습니다. 귀하의 취향과 요구 사항이 무엇이든, 귀하에게 완벽하게 맞는 도구가 있을 가능성이 큽니다.
브라우저
NCSA 모자이크를 기억하는 사람이 있습니까? 나중에 Netscape를 개발한 Marc Andreessen이 공동 개발한 Mosaic은 많은 인터넷 서비스 공급자(ISP) 스타터 키트와 함께 번들로 제공되었습니다. Netscape 2.0과 Internet Explorer 3.0은 모두 1996년에 출시되었습니다.
모자이크 1.0 웹 브라우저
브라우저는 버그가 있고 불안정했습니다. 특정 웹사이트(특히 Shockwave/Flash를 실행하는 웹사이트)에서 브라우저 세션이 반복적으로 충돌하는 것은 드문 일이 아닙니다. 즉, 실제로 사이트를 확인할 수 없다는 의미입니다.
이 기간의 최악의 경향 중 하나는 Internet Explorer에서만 작동하는 독점 코드를 특징으로 하는 사이트였습니다(감사합니다, Microsoft). 이것은 또한 비 IE 브라우저를 사용하는 동안 대부분 사용할 수 없는 사이트로 이어졌습니다.
역사는 반복되는가?
고맙게도, 아닙니다. 우리는 여전히 오래된 재해를 처리해야 하지만 IE 버전을 의미하지만 지금은 90년대보다 확실히 나아졌습니다. Mosaic 및 Netscape 브랜드가 먼지로 변한 지 오래되었지만 IE도 사라지고 Edge로 대체되었습니다. Chrome, Firefox, Safari 및 Opera는 모두 견고한 옵션입니다. 브라우저 기반의 단점은 여전히 존재하지만 예전만큼 널리 퍼져 있지는 않습니다.
설계 방법 및 제한 사항
90년대 중반은 의심할 여지 없이 디자인의 "와일드 웨스트"였습니다. 당시 모토는 "일만 하면 된다"였다. 위에서 언급했듯이 웹 브라우저는 상당히 끔찍했습니다. 때로는 만들고자 하는 모양이나 기능이 무엇이든 협력하도록 그들을 속여야 하는 것처럼 보였습니다.
물론 테이블을 사용하여 수행합니다 .
CSS1이 출시 준비 중이었으므로 거의 모든 주요 사이트에서 테이블 기반 레이아웃을 사용했습니다. 테이블 기반 레이아웃을 구축한 적이 없다면 재미를 놓친 것입니다.
테이블로 구성된 웹 페이지. (이미지 출처)
여러 열이 있는 레이아웃을 만드는 것은 쉬웠지만 다른 레이아웃에는 높은 수준의 창의성이 필요했습니다. 종종 솔루션은 한 테이블을 다른 테이블 안에 반복해서 중첩하는 것이었습니다. 코드는 매우 부풀려졌고 느린 연결에 부담이 되었습니다.
달팽이 경주 :
연결 속도는 사이트를 만드는 데 가장 큰 걸림돌 중 하나였습니다. 56k 모뎀은 느렸지만 14.4 및 28.8 모델과 비교할 때 광대역처럼 보였습니다. 일반적으로 홈페이지(코드 및 이미지)의 총 공간이 50kb 미만이길 원했습니다.
물론 이제 자체적으로 1MB를 초과하는 전체 너비 슬라이더가 있는 사이트를 볼 수 있습니다. 느린 인터넷 연결은 지속적으로 인식해야 하는 어려운 과제를 제공했습니다.
해상도/장치 :
당신의 손에 있는 그 스마트폰을 아십니까? 글쎄, 그것은 1996년의 대부분의 데스크탑 컴퓨터보다 더 높은 해상도를 가지고 있을 가능성이 큽니다. 충돌하기 쉬운 내 Packard Bell은 감칠맛 나는 640×480 화면을 실행했습니다. 봐, 우리 는 모바일 퍼스트였다!
그러나 진지하게, 그것은 작은 화면이었습니다. 일부 사용자는 800×600 또는 가끔 1024×768(정말 고급 시스템을 실행하는 경우)에서 실행했지만 이미 실행 중이 아니면 더 큰 해상도에 액세스하기가 어려웠습니다. 이로 인해 많은 사이트가 작은 화면용으로 설계되었지만 더 큰 화면에서는 중단되었습니다.
웹을 검색할 수 있는 모바일 장치는 그 당시에는 거의 꿈이었습니다. 그리고 그 당시에는 그런 느낌을 받은 적이 없었지만 실제로는 어떤 유형의 화면을 위해 디자인했는지 면에서 더 간단했습니다. 이제 거의 모든 화면에서 작동하는 반응형 레이아웃이 있습니다.
사이트 관리 :
예, 당시에는 WordPress와 같은 것이 없었습니다. 사이트의 콘텐츠를 편집하거나 더 나쁘게는 새 탐색 섹션을 추가하려는 경우 정적 HTML 사이트에서 잠재적으로 수백 개의 파일을 해킹하는 것이었습니다.
일부 정통한 사람들(저 아님)은 서버 측 포함을 사용했지만 다른 사람들(저)은 사이트의 모든 단일 파일을 변경하도록 강등되었습니다. 전역 검색 및 바꾸기가 큰 도움이 되었습니다.
90년대 중후반의 모든 컨텐츠 관리 시스템은 일반적으로 기업을 위해 맞춤 제작되었으며 상당한 비용이 들었습니다. 그럼에도 불구하고 그들은 잘 작동하지 않았습니다. 브라우저 및 스크립팅 제한으로 인해 이러한 시스템은 많은 경우에 큰 비용 낭비가 됩니다. 또한 IE 6이 수명을 훨씬 넘어선 이유 중 하나이기도 합니다.
역사는 반복되는가?
그 자체로 반복되는(그리고 곱해진) 유일한 것은 화면 해상도와 우리가 설계해야 하는 장치의 수뿐이라고 말하고 싶습니다. 반응형 디자인의 출현으로 확실히 그 문제를 훨씬 더 쉽게 해결할 수 있었습니다.
앞서 언급했듯이 이러한 "클래식" 브라우저는 종종 동일한 코드를 사용하여 매우 다른 방식으로 렌더링했습니다. 그 문제는 여전히 때때로 나타나겠지만, 그것은 한 때와 같은 설계 재앙이 아닙니다. 이것은 우리가 모든 화면에서 작동하는 디자인을 만들 수 있도록 하는 또 다른 큰 단계입니다.
바로 지금
전자 제품 및 자동차와 마찬가지로 웹 디자인도 비교적 짧은 시간에 많은 발전을 이루었습니다. 재능있는 디자이너와 개발자가 만들어내는 것을 보는 것은 놀랍습니다. 제가 시작할 때 그런 것은 꿈도 꾸지 못했습니다.
다행스럽게도 하드웨어와 소프트웨어의 발전으로 우리의 작업이 더 쉬워지고 온라인 출판이 민주화되었습니다. 우리는 더 이상 CMS를 구축하기 위해 대기업을 고용할 필요가 없습니다. 무료로 사용할 수 있는 훌륭한 것들이 많이 있습니다. 호스팅 제공업체의 원클릭 설치를 통해 전문가가 아닌 사용자도 웹에서 본격적으로 시작할 수 있습니다. 이는 우리 모두에게 더 많은 기회를 제공했습니다.
웹 디자이너로서의 여정은 언제부터 시작되었습니까? 그때와 지금의 가장 눈에 띄는 차이점은 무엇입니까?