나는 새로운 부모가 된 친구와 가족에게 한 가지 조언을 제공합니다. 모든 것을 다 이해했다고 생각하기 시작하면 모든 것이 바뀔 것입니다. 수유, 기저귀, 규칙적인 낮잠에 익숙해지기 시작하면 고형 음식, 배변 훈련, 하룻밤 수면을 취할 시간입니다. 당신이 그것을 알아낸다면, 유치원과 드물게 낮잠을 잘 시간입니다. 주기는 계속됩니다. 기사는 아래에서 계속됩니다 요즘 디자인과 개발 분야에 종사하는 사람들에게도 마찬가지입니다. 이 시점에서 거의 30년 동안 웹에서 일하면서 나는 아이디어, 기술 및 기술의 밀리고 쇠퇴를 자주 보아왔습니다. 개발자와 디자이너로서 우리가 규칙적인 리듬에 들어갈 때마다 새로운 아이디어나 기술이 등장하여 상황을 뒤흔들고 세상을 다시 만듭니다. 우리가 여기까지 어떻게 왔는지 저는 90년대 중반에 첫 웹사이트를 만들었습니다. 당시 웹에서의 디자인과 개발은 확립된 규범이 거의 없는 자유분방한 환경이었습니다. 단일 열을 제외한 모든 레이아웃의 경우 table빈 공간을 추가하기 위해 단일 픽셀 스페이서 GIF가 포함된 빈 셀이 있는 요소를 사용했습니다. 우리는 font글꼴 스타일을 변경하고 싶을 때마다 태그를 중첩하여 수많은 태그로 텍스트 스타일을 지정했습니다 . 그리고 선택할 수 있는 서체는 Arial, Courier, Times New Roman 등 3~4개뿐이었습니다. 1996년에 Verdana와 Georgia가 출시되었을 때 우리는 옵션이 거의 두 배로 늘어났기 때문에 기뻤습니다. 선택할 수 있는 유일한 안전한 색상은 여러 플랫폼에서 작동하는 것으로 알려진 216개의 "웹에 적합한" 색상이었습니다. 몇 가지 대화형 요소(연락처 양식, 방명록, 카운터 등)는 대부분 CGI 스크립트(당시 주로 Perl로 작성됨)에 의해 구동되었습니다. 어떤 종류의 독특한 모양이라도 얻으려면 수많은 해킹이 필요했습니다. 상호 작용은 종종 사이트의 특정 페이지로 제한되었습니다. 웹 표준의 탄생 세기가 바뀌면서 새로운 순환이 시작되었습니다. table레이아웃과 태그 로 가득 찬 형편없는 코드는 font쇠퇴하고 웹 표준에 대한 추진이 박차를 가했습니다. CSS와 같은 최신 기술은 브라우저 제조업체, 개발자 및 디자이너에 의해 더욱 널리 채택되었습니다. 표준을 향한 이러한 변화는 우연히 또는 하룻밤 사이에 일어난 것이 아닙니다. 표준을 구축하려면 W3C 와 브라우저 공급업체 간의 적극적인 참여와 웹 표준 프로젝트 와 같은 사람들의 적극적인 전도가 필요했습니다 . A List Apart 와 Jeffrey Zeldman의 Designing with Web Standards 와 같은 책은 개발자와 디자이너에게 표준이 왜 중요한지, 표준을 구현하는 방법, 조직에 판매하는 방법을 가르치는 데 중요한 역할을 했습니다. 그리고 점진적인 향상 과 같은 접근 방식을 통해 모든 브라우저에서 콘텐츠를 사용할 수 있어야 한다는 아이디어가 도입되었으며, 고급 브라우저에서는 추가 기능도 사용할 수 있게 되었습니다. 한편 CSS Zen Garden 과 같은 사이트는 견고한 의미론적 HTML 구조와 결합될 때 CSS가 얼마나 강력하고 다재다능할 수 있는지를 보여주었습니다. PHP, Java, .NET과 같은 서버측 언어는 주요 백엔드 프로세서로서 Perl을 추월했고 cgi-bin은 쓰레기통에 버려졌습니다. 이러한 향상된 서버 측 도구를 통해 콘텐츠 관리 시스템(특히 Blogger , Gray Matter , Movable Type 및 WordPress 와 같은 도구를 사용하는 블로깅 공간 )을 시작으로 웹 애플리케이션의 첫 번째 시대가 열렸습니다. 2000년대 중반 AJAX는 프런트 엔드와 백 엔드 간의 비동기식 상호 작용을 위한 문을 열었습니다. 갑자기 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트할 수 있게 되었습니다. Prototype , YUI 및 jQuery 와 같은 JavaScript 프레임워크는 개발자가 매우 다양한 표준 지원 수준을 갖춘 브라우저에서 보다 안정적인 클라이언트 측 상호 작용을 구축할 수 있도록 돕기 위해 등장했습니다. 이미지 교체 와 같은 기술을 사용 하면 교묘한 디자이너와 개발자가 선택한 글꼴을 표시할 수 있습니다. 그리고 Flash와 같은 기술을 통해 애니메이션, 게임 및 더 많은 상호 작용 기능을 추가할 수 있었습니다. 이러한 새로운 기술, 표준 및 기법은 다양한 방식으로 업계에 활력을 불어넣었습니다. 디자이너와 개발자가 더욱 다양한 스타일과 레이아웃을 탐색하면서 웹 디자인은 번성했습니다. 하지만 우리는 여전히 수많은 해킹에 의존했습니다. 초기 CSS는 기본 레이아웃 및 텍스트 스타일 측면에서 테이블 기반 레이아웃에 비해 크게 개선되었지만 당시의 한계로 인해 디자이너와 개발자는 여전히 복잡한 모양(예: 둥근 모서리 또는 각진 모서리) 및 타일링에 이미지에 크게 의존했습니다. (다른 해킹 중에서) 전체 길이 열의 출현 에 대한 배경 . 복잡한 레이아웃에는 모든 방식의 중첩된 부동 소수점 또는 절대 위치 지정(또는 둘 다)이 필요했습니다. 사용자 정의 글꼴에 대한 플래시 및 이미지 교체는 5대 서체를 다양화하기 위한 훌륭한 시작이었지만 두 해킹 모두 접근성 및 성능 문제를 야기했습니다. 그리고 JavaScript 라이브러리를 사용하면 간단한 웹사이트의 다운로드 크기를 두 배 또는 심지어 네 배까지 늘리는 대가를 치르더라도 페이지에 간단한 상호 작용을 누구나 쉽게 추가할 수 있습니다. 소프트웨어 플랫폼으로서의 웹 프런트엔드와 백엔드 간의 공생은 지속적으로 개선되었으며, 이는 현대 웹 애플리케이션의 시대를 가져왔습니다. 확장된 서버 측 프로그래밍 언어(Ruby, Python, Go 등을 포함하도록 계속 성장)와 React, Vue 및 Angular와 같은 최신 프런트 엔드 도구 사이에서 우리는 웹에서 완전한 기능을 갖춘 소프트웨어를 구축할 수 있었습니다. 이러한 도구와 함께 협업 버전 제어, 빌드 자동화, 공유 패키지 라이브러리 등의 다른 도구도 제공되었습니다. 한때 주로 링크된 문서를 위한 환경이었던 것이 무한한 가능성의 영역이 되었습니다. 동시에 모바일 장치의 성능이 더욱 향상되었고 주머니에서 인터넷에 접속할 수 있게 되었습니다. 모바일 앱 과 반응형 디자인은 언제 어디서나 새로운 상호 작용의 기회를 열었습니다. 이러한 유능한 모바일 장치와 강력한 개발 도구의 조합은 사람들이 연결하고 소비할 수 있는 소셜 미디어와 기타 중앙 집중식 도구의 발전에 기여했습니다. Twitter, Facebook, 심지어 Slack을 통해 다른 사람과 직접 연결하는 것이 더 쉽고 일반화되면서 호스팅된 개인 사이트에 대한 욕구가 줄어들었습니다. 소셜 미디어는 그에 수반되는 좋은 점과 나쁜 점을 모두 포함하여 전 세계적으로 연결을 제공했습니다. 우리가 어떻게 여기까지 왔는지에 대한 훨씬 더 광범위한 기록과 우리가 개선할 수 있는 방법에 대한 다른 설명을 원하십니까? Jeremy Keith는 " 시간과 웹 "을 썼습니다. 또는 웹디자인 박물관 에서 “ 웹디자인 역사 연대표 ”를 확인해 보세요 . Neal Agarwal도 “ Internet Artifacts ” 를 통해 재미있는 투어를 진행하고 있습니다 . 우리는 지금 어디에 있는가 지난 몇 년 동안 우리는 또 다른 중요한 변곡점에 도달하기 시작한 것 같습니다. 소셜 미디어 플랫폼이 붕괴 되고 쇠퇴함에 따라 자체 콘텐츠를 다시 소유하려는 관심이 높아지고 있습니다 . 일반 HTML 파일을 호스팅하는 검증된 클래식부터 정적 사이트 생성기, 모든 종류의 콘텐츠 관리 시스템에 이르기까지 웹 사이트를 만드는 방법에는 여러 가지가 있습니다. 소셜 미디어의 분열에는 비용도 따릅니다. 발견과 연결을 위한 중요한 인프라를 잃게 됩니다. Webmentions , RSS , ActivityPub 및 IndieWeb 의 기타 도구가 이에 도움이 될 수 있지만 여전히 상대적으로 구현이 부족하고 덜 멍청한 사람들에게는 사용하기 어렵습니다 . 우리는 놀라운 개인 웹사이트를 구축하고 정기적으로 추가할 수 있지만 발견과 연결이 없으면 때로는 공허한 곳에 소리를 지르는 것처럼 느껴질 수도 있습니다. 특히 Interop 과 같은 노력을 통해 CSS, JavaScript 및 웹 구성 요소와 같은 기타 표준에 대한 브라우저 지원이 가속화되었습니다 . 새로운 기술은 예전보다 훨씬 짧은 시간에 전반적으로 지원을 받습니다. 나는 종종 새로운 기능에 대해 배우고 해당 기능의 브라우저 지원을 확인했는데 그 기능이 이미 80%를 넘었다는 것을 알게 되었습니다. 오늘날 새로운 기술을 사용하는 데 있어 장벽은 브라우저 지원이 아니라 단순히 디자이너와 개발자가 사용 가능한 기능과 이를 채택하는 방법을 얼마나 빨리 배울 수 있는지에 대한 제한입니다. 오늘날에는 몇 가지 명령과 몇 줄의 코드만 있으면 거의 모든 아이디어의 프로토타입을 만들 수 있습니다. 현재 우리가 사용할 수 있는 모든 도구를 사용하면 새로운 것을 시작하는 것이 그 어느 때보다 쉬워집니다. 그러나 이러한 프레임워크를 초기 제공 시 절약할 수 있는 초기 비용은 결국 업그레이드 및 유지 관리가 기술 부채의 일부가 되기 때문에 발생합니다. 타사 프레임워크에 의존하는 경우 해당 프레임워크가 해당 표준을 채택할 때까지 기다려야 할 수 있으므로 새로운 표준을 채택하는 데 시간이 더 오래 걸릴 수 있습니다. 새로운 기술을 더 빨리 채택할 수 있었던 이러한 프레임워크는 이제 오히려 장애물이 되었습니다. 이러한 동일한 프레임워크에는 종종 성능 비용 도 수반되므로 사용자는 페이지를 읽거나 페이지와 상호 작용하기 전에 스크립트가 로드될 때까지 기다려야 합니다. 그리고 스크립트가 실패 하면 (잘못된 코드, 네트워크 문제 또는 기타 환경적 요인으로 인해) 대안이 없는 경우가 많아 사용자에게 빈 페이지나 깨진 페이지가 남게 됩니다. 우리는 여기서 어디로 가는가? 오늘의 해킹은 내일의 표준을 형성하는 데 도움이 됩니다. 현재로서는 해킹을 수용하여 현재를 발전시키는 데 본질적으로 잘못된 것은 없습니다. 문제는 우리가 그것이 해킹임을 인정하지 않거나 교체를 주저할 때만 발생합니다. 그렇다면 우리가 원하는 웹의 미래를 만들기 위해 우리는 무엇을 할 수 있을까요? 장거리용으로 구축하세요. 성능, 접근성 및 사용자를 위해 최적화하세요. 개발자 친화적인 도구의 비용을 평가해 보세요. 오늘은 여러분의 일을 조금 더 쉽게 만들어줄 수 있지만 다른 모든 것에 어떤 영향을 미칠까요? 사용자에게 부과되는 비용은 얼마입니까? 미래의 개발자에게? 표준 채택? 때로는 편리함이 그만한 가치가 있을 수도 있습니다. 때로는 익숙해진 해킹일 수도 있습니다. 때로는 더 나은 옵션을 선택하는 데 방해가 되기도 합니다. 표준부터 시작하세요. 표준은 시간이 지남에 따라 계속해서 발전하고 있지만 브라우저는 이전 표준을 계속 지원하는 데 있어 놀라울 정도로 훌륭한 성과를 거두었습니다. 타사 프레임워크의 경우에도 항상 동일한 것은 아닙니다. 90년대의 가장 해킹된 HTML로 구축된 사이트는 오늘날에도 여전히 잘 작동합니다 . 단 몇 년이 지난 후에도 프레임워크로 구축된 사이트에 대해 항상 같은 말을 할 수는 없습니다. 신중하게 디자인하세요. 귀하의 기술이 코드, 픽셀 또는 프로세스인지 여부에 관계없이 각 결정의 영향을 고려하십시오. 많은 최신 도구의 편리함은 설계의 기본 결정을 항상 이해하지 못하고 그러한 결정이 미칠 수 있는 영향을 항상 고려하지 않는 데서 비롯됩니다. "빠르게 움직여서 문제를 해결"하기 위해 성급하게 서두르는 대신 최신 도구로 절약된 시간을 활용하여 더 신중하게 고려하고 신중하게 디자인하세요. 항상 배우십시오. 항상 배우고 있다면 당신도 성장하고 있는 것입니다. 때로는 배울 가치가 있는 것이 무엇인지, 오늘의 해킹이 무엇인지 정확히 찾아내는 것이 어려울 수 있습니다. 학습 표준에만 집중하더라도 내년에는 중요하지 않은 것에 집중하게 될 수도 있습니다. ( XHTML을 기억하시나요? ) 그러나 지속적인 학습은 두뇌에 새로운 연결을 열어주며, 언젠가 배운 꿀팁은 다음 날 다른 실험에 정보를 제공하는 데 도움이 될 수 있습니다. 놀고, 실험하고, 이상하게 행동하세요! 우리가 구축한 이 웹은 최고의 실험입니다. 그것은 역사상 가장 큰 인간의 노력이지만, 우리 각자는 그 안에 자신만의 주머니를 만들 수 있습니다. 용기를 갖고 새로운 것을 시도해보세요 . 아이디어를 위한 놀이터를 만들어 보세요 . 당신만의 미친 과학 실험실 에서 엉뚱한 실험을 해보세요 . 자신의 소규모 사업을 시작하십시오 . 창의성을 발휘하고, 위험을 감수하고, 우리가 할 수 있는 것을 탐색할 수 있는 이보다 더 힘을 실어주는 곳은 없었습니다. 공유하고 확대하세요. 실험하고, 놀고, 배우면서 효과가 있었던 것을 공유하세요. 자신의 웹사이트에 글을 쓰거나, 원하는 소셜 미디어 사이트에 게시하거나, TikTok에서 소리쳐 보세요. A List Apart 에 대한 내용을 작성해 보세요 ! 그러나 다른 사람들도 증폭시키는 데 시간을 투자하십시오 . 새로운 목소리를 찾고, 그들로부터 배우고, 그들이 가르친 것을 공유하십시오. 나가서 만들어라 웹(및 그 이상)의 디자이너 및 개발자로서 우리는 개인 웹사이트, 수십억 명이 사용하는 소셜 미디어 도구 또는 그 사이의 어떤 형태를 취하든 관계없이 매일 미래를 건설할 책임이 있습니다. 우리가 만드는 것에 우리의 가치를 담아 웹을 모든 사람에게 더 나은 곳으로 만들자. 당신만이 만들 수 있는 고유한 자격을 갖춘 것을 만들어 보세요. 그런 다음 공유하고, 개선하고, 다시 만들고, 새로운 것을 만들어 보세요. 배우다. 만들다. 공유하다. 자라다. 헹구고 반복하십시오. 웹을 마스터했다고 생각할 때마다 모든 것이 바뀔 것입니다.