WWW(세계초고속통신망)의 발명으로 인해 팀 버너스 리(Tim Berners-Lee)는 HTTP 서버와 웹 브라우저로 완전한 작동 웹사이트를 시연했습니다. 또한 그는 웹사이트를 작성하기 위해 첫 번째 버전의 HTML을 발명했습니다. 초기의 웹사이트는 주로 의미 있는 HTML 태그만 사용하여 하이퍼링크가 있는 텍스트 문서를 구현했습니다. 각 HTML 태그는 화면에 최종 결과를 의미했기 때문에 HTML은 생성 초기에 의미 있는 마크업 언어로 알려졌습니다. 그러나 기존의 의미 있는 태그와 속성만으로는 제대로 스타일이 적용된 웹 페이지를 만들 수 없었기 때문에 의미 있는 HTML의 스타일을 설명하기 위한 다른 언어가 필요했습니다.

1994년, Håkon Wium Lie은 의미 있는 HTML 기반 문서에 확장 스타일을 추가하기 위해 CSS(계층별 스타일 시트)를 발명했습니다. 개발자들은 사전 개발된 CSS 클래스로 CSS 라이브러리를 작성해 HTML 페이지에 긴 CSS 소스 파일을 스스로 작성하지 않고도 스타일링을 돕기 시작했습니다. 결과적으로, 현재 대부분의 프런트엔드 개발자들은 부트스트랩, 테일윈드, 마테리얼라이즈 등의 특징 있는 클래스 기반 CSS 프레임워크로 웹 페이지에 스타일을 입히고 있습니다.

이러한 프레임워크들은 개발자가 일반적인 스타일에 대한 CSS를 작성하는 것을 생략할 수 있도록 도왔으나, 그러나 그들은 그만큼 많은 CSS 클래스 이름을 기억해야 했습니다. 클래스 없는 CSS 프레임워크 개념은 클래스의 특정 이름을 HTML 문서에서 사용하지 않고도 HTML 태그 의미론을 사용하여 스타일을 적용하고 웹 페이지를 자동으로 스타일링합니다. 반면, 클래스가 적은 CSS 프레임워크는 같은 클래스 없는 개념을 사용하지만 적은 레이아웃, 유틸리티 및 구성 요소 클래스가 있습니다. 이 이야기에서 나는 클래스 없는 및 클래스가 적은 CSS 프레임워크가 미래 지향적인 웹 페이지에 대해 더 나은 스타일링 기술을 제공하는 방법에 대해 설명하겠습니다!

클래스 없는 및 클래스-라이트 프레임워크란 무엇인가요?

클래스 기반 CSS 프레임워크는 레이아웃 및 컴포넌트를 정의하기 위한 다양한 클래스를 제공합니다. 보통 우리는 표준 div 태그와 미리 정의된 클래스 이름을 사용합니다. 그런 다음 라이브러리는 프레임워크 스타일링 사양에 따라 해당 div 태그에 스타일을 적용합니다. 표준 클래스 기반 프레임워크는 일반적으로 HTML에서 특정 클래스 이름을 사용하지 않고는 원시 HTML 페이지에 스타일을 적용하지 않습니다. 클래스 없이 스타일을 적용하는 프레임워크에서는 특정 클래스 이름을 사용하지 않고도 원시 HTML 페이지에 스타일을 적용합니다.

클래스 없는 CSS 프레임워크는 HTML 시맨틱스를 사용하여 스타일을 적용합니다. 예를 들어, table을 사용하는 모든 위치와 같은 테이블 특정 스타일(<th>, <td> 등)을 추가합니다. 클래스 없는 CSS 프레임워크는 CSS 변수를 사용하여 여러 색 구성표를 구현하고 개발자가 자체 색 구성표를 작성할 수 있게 합니다. New.css 프레임워크가 HTML 테이블에 대한 스타일을 정의하는 방법을 보려면 테이블 선택자와 CSS 변수를 사용하십시오:

일부 클래스 없는 프레임워크는 표준 HTML 태그/요소를 미래지향적인 웹 응용 프로그램 구성 요소로 변환합니다. 예를 들어, Water.css 클래스 없는 프레임워크가 details-summary 세그먼트를 현대적인 아코디언 구성 요소로 변환하는 방법을 살펴보세요:

또한, 이러한 프레임워크는 자동 라이트/다크 테마 및 반응형 뷰를 구현합니다. 이러한 기능은 개발자들이 개인 웹사이트, 블로그, 마크다운 렌더링된 HTML, 프로토타입에 스타일링하기 위해 클래스 없는 CSS 프레임워크를 사용하도록 독려합니다.

웹 응용 프로그램은 일반적으로 레이아웃을 사용해야 하므로, 개발자들은 클래스 없는 프레임워크와 함께 추가 CSS를 작성해야 했습니다. 이 문제를 해결하기 위해 현대적이고 가벼운 클래스 없는 CSS 프레임워크는 의미 있는 클래스 없는 개념과 함께 레이아웃 지원을 포함하며 웹 응용 프로그램에 스타일링하기 위한 가벼우면서 생산적인 CSS 라이브러리를 제공했습니다.

인기 있는 클래스 기반 CSS 프레임워크의 단점

클래스 기반 CSS 프레임워크는 대규모 웹 애플리케이션에 스타일을 지정하기 위한 완전 기능을 갖춘 구성 요소 및 레이아웃 지원을 제공하지만, 몇 가지 단점이 있습니다. 일반적으로 코드베이스 크기는 어떤 소프트웨어 개발 시나리오에서도 기능과 함께 증가하므로 클래스 기반 CSS 프레임워크는 클래스 없는 프레임워크나 가벼운 클래스 프레임워크보다 무겁습니다. 다음 표는 몇 가지 클래스 기반 CSS 프레임워크의 파일 크기 정보를 보여줍니다:

미압축 파일 크기가 높기 때문에 CPU 및 RAM 사용량도 증가할 수 있습니다. Tailwind 및 Bulma와 같은 프레임워크는 번들 크기를 줄이기 위한 모듈식 기능을 제공하지만, 이러한 프레임워크들은 개발자 컴퓨터에 추가 프로세서 프로그램(즉, Tailwind는 Tailwind 빌더 프로그램이 필요)이 설치되어 있어야 합니다.

클래스 기반 프레임워크는 일반적인 사용 사례에 대한 많은 사전 개발된 구성 요소를 제공하지만, 수백 개의 클래스 이름이 포함되어 있기 때문에 개발자들은 온라인 템플릿에서 그것들을 기억하거나 복사 붙여넣기해야 합니다. 다른 클래스 기반 프레임워크로 마이그레이션하면, 마이그레이션 프로세스에는 기존 HTML 클래스 속성을 재작성하고 새로운 CSS 클래스 이름을 학습하는 것이 포함됩니다. 다음 스크린샷을 확인하여 미리보기와 함께 부트스트랩 버튼 클래스 이름을 표시합니다:

클래스 기반 CSS 프레임워크는 일반적으로 오랜 학습 시간이 필요하며 원시 의미론적 HTML(즉, 마크다운으로 생성된 HTML)만 사용할 수있는 시나리오에서 사용하기 어려울 수 있습니다.

클래스가 없는 및 클래스 경량 CSS 프레임워크의 성능이 더 나은 이유

클래스 없는 CSS 프레임워크는 가능한 많은 미리 개발된 구성 요소를 제공하지 않고 사용 가능한 의미 있는 HTML 태그를 간단히 스타일링하기 때문에 가벼워요. 예를 들어, Sakura CSS 프레임워크의 크기는 gzip으로 압축했을 때 약 1.5 kb이며(minify할 때 약 2.5 kb) 경량 클래스 프레임워크도 가벼워요. 몇 가지 클래스 이름만 제공하기 때문에 가벼워요. 예를 들어, Milligram 경량 클래스 프레임워크는 gzip으로 압축했을 때 2kb이며(minify할 때 약 8 kb).

클래스 없는 프레임워크를 사용할 때는 CSS 클래스 이름을 외울 필요가 없어요. 클래스 이름을 몇 개만 기억하면 되는 클래스 경량 프레임워크도 마찬가지에요. 다른 클래스 없는 프레임워크나 클래스 경량 프레임워크로 마이그레이션하는 것은 아주 쉬워요. Simple Grid와 같은 서드파티 레이아웃 라이브러리를 사용하거나 Flexbox(또는 CSS 그리드)와 함께 클래스 없는 CSS 프레임워크를 사용함으로써 클래스 경량 프레임워크의 클래스 이름을 사용하지 않을 수도 있어요. 그러나 클래스 경량 프레임워크는 생산성 높은 구문으로 내장된 12열 그리드 시스템을 제공해요. 예를 들어, Chota 클래스 경량 프레임워크는 자동으로 열 크기를 설정해줘요. 부트스트랩처럼 말이에요. 다음 스크린샷에 보이는 것처럼요:

보통 파일 다운로드 크기가 작을수록 브라우저는 상대적으로 작은 CSS 파일을 파싱하고 캐싱하기 때문에 파일 다운로드 크기가 작은 파일에서 적은 바이트를 추출합니다. 이로 인해 클래스 없는 프레임워크와 클래스 경량 프레임워크 기반 웹 페이지의 CPU, RAM 및 디스크 사용량이 줄어들어요.

클래스 없는 프레임워크는 레이아웃 및 유틸리티 클래스 지원이 부족하기 때문에 웹 앱을 구축하는 데 적합하지 않을 수 있지만, 클래스가 적은 프레임워크는 충분한 기능을 제공하여 모바일 반응형 지원을 포함한 모든 현대적인 웹 앱을 구축하는 데 충분합니다. Chota와 비슷한 현대적인 클래스가 적은 프레임워크는 탭, 카드, 태그 등과 같은 사전 개발된 최소한의 클래스 기반 구성 요소를 제공합니다.

웹 스타일링의 미래는 클래스 기반이 아닙니다!

과거에는 모든 웹 앱이 전통적인 양식 작성 개념으로 많은 입력을 요청했습니다. 이후 웹 개발자들은 사용자가 조작하기 쉽도록 개선된 UI/UX 개념을 사용하여 대형 양식을 여러 단계로 분리했습니다. 요즘 대부분의 웹 앱은 SSO(단일 로그인), 타사 인증기(i.e., Google 로그인)를 통한 로그인, AI 기반 제안, 그리고 데이터 수집 전략을 최소화하는 것으로 시간 소모적인 양식 작성 시나리오를 줄이려고 노력하고 있습니다. 미래 웹은 기존 데이터를 재사용하고 과도한 데이터 수집을 제거하려고 합니다.

반면에 소프트웨어 개발 산업에서도 비슷한 이야기가 벌어지고 있습니다. — 현대 소프트웨어 개발도 키 스트로크 수를 최소화하여 개발자의 작업량을 줄이려고 합니다. 오늘날에는 개발자 생산성을 향상시키기 위해 데브옵스 원칙, AI 기반 코드 생성, 생산성 중심의 코드 편집기 등이 있습니다.

클래스가 없거나 클래스가 적은 프레임워크는 HTML 선호 스타일링 개념을 사용하여 미래의 웹 스타일링을 위한 기반을 마련합니다. 미래 지향적인 웹 앱을 대상으로 더 많은 의미론적 HTML 태그를 표준화함으로써 웹 브라우저들도 이 개념을 지원합니다. 예를 들어 HTML dialog 태그는 최신 브라우저들에서 제공되며, Pico 및 Water.css 프레임워크에서는 이를 모달 팝업으로 스타일링합니다.

웹 스타일링의 미래는 클래스 기반이 아닙니다. 현대 개발자들은 수백 개의 CSS 클래스와 싸우지 않고 웹 페이지를 빠르게 스타일링할 필요가 있습니다. 클래스가 없는 프레임워크는 사용자 에이전트 스타일시트를 재정의하여 시각적으로 뛰어난 외형을 제공합니다. 클래스가 적은 프레임워크는 클래스가 없는 기능을 갖춘 웹 앱을 위한 최소한의, 생산성에 중점을 둔 CSS 클래스를 제공합니다. 미래에는 더 많은 최신화된 표준 의미론적 HTML 태그와 지능적인 클래스가 없는 CSS 버전을 볼 수 있을 것입니다. 웹 앱을 타깃으로 한 최신 의미론적 태그 및 네이티브 의미론적 폼 요소 (즠적칼러 버튼, 라디오 버튼 등)을 사용자화하기 위한 CSS 속성에 대한 브라우저의 표준화가 이루어진다면, 명성 있는 클래스 기반 CSS 프레임워크가 어떻게 변할지 상상해보십시오. 그럼 웹 앱 스타일링 프로세스는 클래스가 없는 스타일시트를 링크하는 것이 될 것입니다 — 혹은 클래스가 조금만 있는 클래스가 적은 프레임워크를 사용하는 것이겠죠.

결론

현대 프로그래밍에서 모두가 기존 것을 재사용함으로써 시간을 절약하려고 노력합니다. 시간을 절약하기 위해 사전에 개발된 소프트웨어 프레임워크, 라이브러리, 편집기 플러그인 및 클라우드 관리 도구를 사용합니다. 이와 같이 클래스가 없는 프레임워크와 클래스가 적은 CSS 프레임워크는 클래스 기반 프레임워크보다 더 적은 노력으로 웹 페이지를 스타일링하는 데 도움을 줍니다. 성능 측면에서도 클래스 기반 CSS 프레임워크보다 우수한 성능을 발휘합니다. 클래스가 없는 프레임워크와 클래스가 적은 CSS 프레임워크는 현대화된 HTML 의미론을 통해 인기 있는 클래스 기반 프레임워크를 대체할 수 있습니다.

한편, 표준 브라우저들은 개발자 중심의 내장 브라우저 기능을 제공하여 개발자 생산성을 향상시키려고 노력합니다. 이러한 변경 사항은 기존 라이브러리를 더 이상 사용하지 않게 할 수 있습니다. 예를 들어 표준 산타이저 API는 인기 있는 써드 파티 산타이저 라이브러리를 곧 대체할 것입니다. 브라우저가 통일된 개선된 사용자 에이전트 스타일 시트와 자동 다크-라이트 테마 지원이 포함된 것이 좋지 않을까요? 현재 사용자 정의 CSS 기반 구현이 필요한 최신 웹 앱 구성 요소에 대한 네이티브 HTML 컨트롤을 도입한다면 어떨까요? 더 나아가 내장된 레이아웃 지원까지 제공된다면, 우리는 어떠한 써드 파티 CSS 프레임워크도 필요하지 않게 될 것입니다. 우리만의 클래스 미지정 CSS 파일로 웹 페이지를 최적의 성능 중심 방식으로 즉시 스타일링할 수 있을 것입니다. 그러나 아직 우리는 클래스 미지정 및 클래스 경량(또는 micro CSS) 프레임워크 시대에 살고 있으며, 클래스 기반 CSS 프레임워크가 인기를 잃고 있습니다.

브라우저들이 개발자 생산성을 향상시키고 애플리케이션 번들 크기를 줄이기 위해 새로운 표준 내장 웹 API를 도입하고 있습니다. 아래 이야기에서는 모든 웹 개발자가 알아야 할 여러 가지 새로운 웹 API에 대해 설명하고 있습니다.

읽어 주셔서 감사합니다.