Development tips

모던 CSS/HTML로 구현하는 JavaScript 없는 웹개발의 새로운 가능성

0

웹 개발의 세계에서 지금까지 당연하게 여겨왔던 전제를 한번 뒤집어 생각해볼 시간입니다. 수 기가바이트를 차지하는 node_modules 폴더, 몇 초씩 걸리는 React 앱 로딩, 예측 불가능한 하이드레이션 오류들… 정말 이 모든 것이 필요한 걸까요?

현실은 놀랍도록 간단합니다. 대부분의 웹사이트에서 JavaScript는 필수가 아닙니다. 복잡한 전자상거래 플랫폼의 장바구니나 데이터 시각화 대시보드가 아닌 이상, HTML과 CSS만으로도 충분히 강력하고 매력적인 웹 경험을 만들 수 있습니다.

모던 CSS의 혁신적 변화: 과거의 고정관념을 버려야 할 때

CSS 네스팅: 코드 구조의 혁명

과거 CSS 작성의 가장 큰 고통 중 하나는 긴 선택자 체인을 관리하는 것이었습니다. .post > .buttons .like:hover처럼 복잡한 구조를 추적하며 개발하는 것은 정말 번거로운 일이었죠.

하지만 2023년 12월부터 모든 주요 브라우저에서 지원되기 시작한 CSS 네스팅은 이 모든 것을 바꿔놓았습니다:

.post {
  display: block;
  background: #EEE;

  .avatar {
    width: 48px;
    height: 48px;
  }

  & > .buttons {
    display: flex;
    .like {
      cursor: pointer;
      color: var(--like-color);
      &:hover { color: var(--like-color-hover); }
      &:active { color: var(--like-color-active); }
    }
  }
}

관련된 스타일들이 한 곳에 모여있어 가독성이 크게 향상되었고, 부모-자식 관계가 명확해져 더 간단한 클래스명을 사용할 수 있게 되었습니다.

상대 색상과 색상 조합: 디자인 시스템의 새로운 접근

과거에는 색상 변형을 위해 복잡한 JavaScript 계산이나 Sass 함수가 필요했습니다. 이제는 CSS 하나만으로 동적인 색상 시스템을 구축할 수 있습니다:

:root {
  --primary-color: #24A4F3;
  --primary-hover: hsl(from var(--primary-color) h s calc(l + 10));
  --primary-active: hsl(from var(--primary-color) h s calc(l - 20));
  --mixed-color: color-mix(in oklab, #8CFFDB, #04593B 25%);
}

이런 접근법은 JavaScript 색상 라이브러리 없이도 일관성 있는 디자인 시스템을 만들 수 있게 해줍니다.

성능과 사용자 경험: CSS가 JavaScript보다 우수한 이유

렌더링 성능의 근본적 차이

많은 개발자들이 놓치는 중요한 사실이 있습니다. CSS 애니메이션은 별도의 컴포지터 스레드에서 실행되어 GPU 가속을 활용합니다. 반면 JavaScript 애니메이션은 이벤트 루프를 거쳐야 하므로 약간의 지연과 끊김 현상이 발생할 수 있습니다.

특히 저사양 디바이스에서 이런 차이는 더욱 명확하게 드러납니다. 배터리 소모량 측면에서도 CSS가 훨씬 효율적입니다.

접근성과 호환성

보안을 중시하는 사용자들 중 상당수는 JavaScript를 기본적으로 비활성화합니다. 개인정보 보호나 보안상의 이유로 말이죠. 순수 HTML/CSS로 구현된 웹사이트는 이런 사용자들도 완전한 경험을 제공받을 수 있습니다.

JavaScript 없이 복잡한 인터랙션 만들기

@starting-style로 자연스러운 애니메이션

과거에는 요소의 등장 애니메이션을 구현하기 위해 복잡한 @keyframes나 JavaScript 트리거가 필요했습니다. 이제는 놀랍도록 간단해졌습니다:

.toast {
  transition: opacity 1s, translate 1s;
  opacity: 1;
  translate: 0 0;
  @starting-style {
    opacity: 0;
    translate: 0 10px;
  }
}

별도의 스크립트 없이도 부드러운 페이드인 효과가 자동으로 적용됩니다.

다크/라이트 모드의 완전한 CSS 구현

테마 전환 또한 JavaScript 없이 완벽하게 구현 가능합니다:

:root {
  color-scheme: light dark;
  --text: light-dark(#000, #FFF);
  --bg: light-dark(#EEE, #242936);

  &:has(#theme-light:checked) { color-scheme: light; }
  &:has(#theme-dark:checked) { color-scheme: dark; }
}

사용자 시스템 설정에 따른 자동 테마 적용은 물론, 라디오 버튼을 통한 수동 선택까지 모두 CSS만으로 처리됩니다.

라디오 버튼과 :has 선택자를 활용한 커스텀 UI

탭, 아코디언, 토글 같은 복잡한 인터랙션도 JavaScript 없이 구현할 수 있습니다:

/* 탭 컨텐츠 표시/숨김 */
body:has(#tab1:checked) .content-1 { display: block; }
body:has(#tab2:checked) .content-2 { display: block; }

/* 커스텀 라디오 버튼 스타일링 */
label:has(input:checked) {
  box-shadow: inset 0px 0px 8px 0px #888;
}

HTML5 입력 검증과 실시간 피드백

정규식 패턴과 CSS 가상 클래스를 조합하면 실시간 입력 검증 시스템을 만들 수 있습니다:

input[pattern="\\w{3,16}"]:user-valid {
  outline-color: green;
}
input[pattern="\\w{3,16}"]:user-invalid {
  outline-color: red;
}

사용자가 입력을 시작한 후에만 유효성 검사 결과가 표시되어 더 나은 사용자 경험을 제공합니다.

모바일 최적화: 새로운 뷰포트 단위의 활용

vw/vh의 한계와 대안

기존의 vw/vh 단위는 모바일에서 주소 표시줄의 등장/숨김에 따른 정확성 문제가 있었습니다. 새로운 뷰포트 단위들이 이 문제를 해결합니다:

  • lvh (largest viewport height): 전체 화면용, 배경 요소에 적합
  • svh (smallest viewport height): 항상 화면에 보여야 하는 버튼, 링크에 활용
  • dvh (dynamic viewport height): 스크롤에 따라 유동적으로 크기 변경

웹 개발 철학의 전환점

기술 선택의 근본적 질문

우리는 지금까지 “어떻게 구현할 것인가?”에만 집중해왔습니다. 하지만 정말 중요한 질문은 “왜 이 기술이 필요한가?”입니다.

JavaScript 프레임워크의 복잡성에 매몰되어 웹 개발의 본질을 잃어버린 것은 아닐까요? HTML과 CSS만으로도 충분히 아름답고 기능적인 웹사이트를 만들 수 있다면, 굳이 복잡한 빌드 체인과 무거운 런타임을 감당할 이유가 있을까요?

창의성과 표현의 관점

웹 개발은 단순한 기능 구현을 넘어서는 창작 활동입니다. CSS는 스타일링 도구가 아닌 표현과 예술의 수단이기도 합니다. 과도한 도구와 프레임워크에 의존하면 오히려 창의적 표현이 제한될 수 있습니다.

실무 적용을 위한 가이드라인

점진적 향상 전략

JavaScript를 완전히 배제하자는 것이 아닙니다. 핵심 기능은 HTML/CSS로 구현하고, 추가적인 편의 기능만 JavaScript로 점진적으로 향상시키는 접근법이 현실적입니다.

예를 들어, 테마 전환은 CSS로 구현하고, 사용자 선택 저장 기능만 JavaScript로 추가하는 식입니다.

브라우저 호환성 고려사항

Baseline 표준을 활용하면 안전하게 모던 CSS 기능을 사용할 수 있습니다:

  • newly available: 최신 브라우저에서 동작
  • widely available: 2.5년 전 브라우저까지 지원

CSS 네스팅의 경우 2023년 12월부터 모든 브라우저에서 지원되므로 안심하고 사용할 수 있습니다.

결론

웹 개발 생태계가 더욱 건강하게 발전하려면 다음과 같은 변화가 필요합니다:

  • 기초 기술의 재평가: CSS와 HTML의 잠재력을 다시 인식하고 활용
  • 성능 우선 사고: 기능보다 사용자 경험을 우선시하는 개발 문화
  • 점진적 향상: 핵심 기능을 먼저 안정적으로 구현한 후 부가 기능 추가
  • 접근성 중심 설계: 모든 사용자가 동등한 경험을 받을 수 있는 웹사이트 구축

웹 개발의 복잡성에 지쳐있다면, 한번 뒤로 돌아가 보세요. HTML과 CSS라는 기본기로 돌아가면, 놀랍도록 많은 것들을 간단하고 우아하게 해결할 수 있습니다.

물론 모든 프로젝트에서 JavaScript를 배제할 수는 없습니다. 하지만 정말 필요한 곳에만 사용한다면, 더 빠르고 안정적이며 접근 가능한 웹을 만들 수 있을 것입니다.

여러분의 다음 프로젝트에서는 어떤 접근법을 시도해보시겠나요? 혹시 JavaScript 없이도 구현 가능한 기능을 무겁게 처리하고 있지는 않나요?

답글 남기기