개발자가 다시 크리에이 (새 탭에서 열림)
웹은 템플릿과 자동화 덕분에 누구나 쉽게 만들 수 있게 되었지만, 그 과정에서 사이트의 개성과 창의성이 약해졌다. 저자는 브라우저가 컨테이너 쿼리, OKLCH 색상, 고급 애니메이션과 레이아웃 등 훨씬 강력한 창작 기능을 갖추었으므로, 개발자들이 다시 창의적 코딩을 통해 웹의 표현 가능성을 확장해야 한다고 주장한다. 결론적으로 템플릿은 완성품이 아니라 출발점이며, 개발자는 실험과 표현을 통해 웹을 하나의 창작 매체로 되살려야 한다. ## 템플릿 이전의 창의적인 웹 - 2010년경 맞춤형 웹사이트는 개발자의 기술과 감각을 보여주는 디지털 명함이었다. - HTML5의 발전으로 다음과 같은 실험적인 작업이 가능했다. - 표현력 높은 인라인 SVG - GSAP 기반 타임라인 애니메이션 - WebGL 실험 - 복잡한 CSS 일러스트레이션 - 당시 개발자는 단순히 기능을 구현하는 것을 넘어, 독창적이고 유머러스한 경험을 직접 만들었다. ## 템플릿과 자동화가 가져온 변화 - Wix, Squarespace 같은 서비스는 애니메이션, 배경 영상, 패럴랙스, CMS를 누구나 사용할 수 있게 만들었다. - 웹 제작의 접근성이 크게 높아진 점은 긍정적이다. - 그러나 비슷한 템플릿이 반복되면서 사이트가 예측 가능해지고, 놀라움과 개성이 줄어들었다. - 저자는 “손으로 만든 것이 항상 더 낫다”는 감정적 주장만으로는 부족하며, 이제는 실제 웹의 창작 가능성을 다시 탐색해야 한다고 본다. ## 현대 브라우저의 숨은 가능성 - 브라우저는 과거보다 훨씬 정교한 기능을 지원하지만, 많은 디자이너와 개발자는 여전히 예전 방식에 머물러 있다. - 활용할 수 있는 현대 CSS 및 웹 기능은 다음과 같다. - 컨테이너 쿼리 - 고급 스코핑과 상속 제어 - 사용자의 선호도에 반응하는 스타일 - 동적 단위와 반응형 레이아웃 - 발전된 색상, 타이포그래피, 애니메이션 기능 - 디자인 도구의 기본 기능만 사용하는 대신, 브라우저 자체가 제공하는 표현력을 직접 활용해야 한다. ## 색상 공간과 디자인·개발의 융합 - 일반적인 RGB 그라디언트 외에도 CSS는 HSL과 OKLCH 같은 색상 공간을 지원한다. - 이러한 색상 공간은 더 생생하고 정밀한 색상 전환을 가능하게 한다. - 저자는 디자인 도구와 실제 CSS 사이의 차이를 줄이기 위해 `color-mix()`를 활용한 Figma 플러그인을 만들었다. - 디자인과 개발의 경계가 가까워질수록 개발자는 디자인 도구 안에서도 더 많은 창작 권한과 실험 공간을 가질 수 있다. ## 창의적 웹의 사례 - Henry Desroches는 인쇄물 같은 여백, 입체감, 의도적인 배치를 반응형 웹에 구현한다. - Sarah Drasner는 SVG 애니메이션과 웹 일러스트레이션의 가능성을 보여준다. - Tim Holman은 `Optical Toys`, `The Useless Web`처럼 실용성을 넘어선 실험적 프로젝트를 만든다. - Lynn Fisher는 브라우저 너비에 따라 일러스트레이션이 변하는 작업을 통해 화면 자체를 창작 매체로 활용한다. - 이 사례들은 템플릿이 최종 결과가 아니라, 창의적인 작업을 시작하기 위한 기반임을 보여준다. 웹사이트는 정보 전달이나 서비스 제공을 위한 그릇에만 머물 필요가 없다. 개발자는 최신 브라우저 기능을 적극적으로 실험하고, CSS·SVG·WebGL·애니메이션을 조합해 자신만의 표현 방식을 만들어볼 필요가 있다. નાના한 시각 효과나 인터랙션부터 시작해 템플릿 너머의 웹을 구축하는 것이 실용적인 출발점이다.