98.css: Windows 98 UI 재현을 위한 CSS 라이브러리

98.css는 Windows 98 미학을 재현하기 위한 순수 CSS 프레임워크를 제공합니다

98.css는 개발자가 Windows 98처럼 보이고 느껴지는 인터페이스를 구축할 수 있도록 해주는 디자인 시스템입니다. JavaScript 의존성이 없는 순수 CSS 라이브러리로 구현되어 React 및 vanilla JavaScript를 포함한 모든 프론트엔드 프레임워크와 호환됩니다. 이 프로젝트는 현대적인 웹 접근성 표준을 유지하면서 클래식 OS의 충실한 시각적 재현을 제공하는 데 중점을 둡니다.

핵심 구현 및 기술적 접근 방식

시맨틱 HTML 및 접근성

이 라이브러리는 기능을 위해 시맨틱 HTML에 엄격하게 의존합니다. 접근성과 정확한 시각적 표현을 보장하려면 특정 요소를 사용해야 합니다:

• Buttons: <button> 요소를 사용하여 생성됩니다.
• Inputs: 입력 id를 가리키는 for 속성이 있는 해당 <label> 요소가 필요합니다.
• Icon Buttons: 보조 기술 지원을 위해 aria-label에 의존합니다.

설치 및 통합

개발자는 다음과 같은 여러 방법을 통해 프로젝트에 98.css를 통합할 수 있습니다:

• CDN: <link rel="stylesheet" href="https://unpkg.com/98.css">를 통해 unpkg에서 직접 가져오기.
• Package Managers: npm install 98.css를 통해 설치.
• GitHub: GitHub 저장소에서 릴리스를 직접 다운로드.

컴포넌트 라이브러리

98.css는 Microsoft Windows 사용자 경험 가이드라인을 모델로 한 포괄적인 컴포넌트 세트를 제공합니다:

폼 컨트롤 (Form Controls)

• Buttons: 표준 버튼(75px x 23px)은 클릭 시 움푹 들어간 것처럼 보이는 돌출된 외부 및 내부 테두리가 특징입니다. .default 클래스를 적용하여 기본 동작을 나타낼 수 있습니다.
• Checkboxes and Radio Buttons: 표준 <input type="checkbox"> 및 <input type="radio">를 사용하여 렌더링됩니다. 이러한 요소를 그룹화하려면 일관된 간격을 위해 .field-row 컨테이너로 감싸야 합니다.
• Group Boxes: <fieldset> 및 <legend> 태그를 사용하여 컨트롤 세트 주변에 음각 프레임을 생성하도록 구현되었습니다.
• Text Boxes: <input type="text"> 또는 <textarea>를 통해 렌더링됩니다. .field-row-stacked 클래스를 사용하여 레이블을 입력란 옆 또는 위에 배치할 수 있습니다.
• Sliders: <input type="range">로 생성됩니다. 라이브러리는 .is-vertical 클래스를 통한 세로 슬라이더와 .has-box-indicator를 통한 박스 인디케이터를 지원합니다.
• Dropdowns: 표준 <select> 및 <option> 요소를 사용하여 구현되었습니다.

윈도잉 및 레이아웃 (Windowing and Layout)

• Windows: .window 클래스는 외부 경계를 제공하고, .window-body 클래스는 내부 콘텐츠 영역을 정의합니다.
• Title Bars: .title-bar, .title-bar-text, .title-bar-controls를 사용하여 구성됩니다. 라이브러리는 최소화, 최대화, 복원 및 도움말 버튼에 대한 특정 스타일링 클래스를 제공합니다.
• Status Bars: 개별 텍스트 세그먼트를 위한 .status-bar-field와 함께 .status-bar 클래스를 사용하여 생성됩니다.
• Tree Views: .tree-view 클래스가 있는 <ul> 요소를 사용하여 렌더링됩니다. <ul> 요소를 중첩하여 계층 구조를 생성하며, 확장 가능한 섹션에는 <details> 요소를 사용할 수 있습니다.
• Tabs: role="tablist" 속성이 있는 <menu> 요소를 사용하여 구현됩니다. 활성 탭은 [aria-selected=true] 속성으로 표시됩니다.
• Table Views: .sunken-panel div로 감싸진 표준 <table> 요소를 사용하여 렌더링됩니다. .interactive 클래스는 포인터 커서를 추가하고, .highlighted는 선택된 행을 표시합니다.

진행 상태 및 테두리

• Progress Indicators: 솔리드(기본값) 및 세그먼트( .segmented 클래스 사용) 진행 바를 모두 지원합니다.
• Generic Borders: 비폼 요소의 경우, 라이브러리는 작업 영역 또는 동적 콘텐츠 영역을 정의하기 위해 .field-border, .field-border-disabled, .status-field-border를 제공합니다.

커뮤니티 통찰 및 관점

커뮤니티 논의에서는 현대적인 "플랫 디자인"과 비교했을 때 Windows 98 UI의 명확성과 기능적 특성에 대한 강한 향수를 강조합니다.

"'버튼이 그냥 나타나지 않는다'는 이유로 회색으로 비활성화된 버튼을 제거한 사실이 우리 시대의 가장 혼란스러운 UI 트렌드 중 하나라고 생각하며, 회색으로 비활성화된 버튼을 보는 것은 제 마음을 따뜻하게 합니다."

사용자들의 기술적 피드백에 따르면, 라이브러리가 매우 정통적이지만 일부 사용자는 기본 버튼 윤곽선의 픽셀 단위 재현과 특정 버전의 MS Sans Serif 글꼴에서 미세한 차이가 있다고 언급했습니다. 한 사용자는 원래 Windows 32 UI 위젯이 사용자가 선 바의 어디를 클릭하든 TrackBar가 특정 값으로 튀는 것과 같은 놀라운 동작을 보일 때가 있었지만, 98.css는 더 직관적인 웹 표준을 위해 이러한 동작을 피한다고 언급했습니다.

프로젝트 상태 및 라이선스

98.css는 MIT 라이선스 하에 배포됩니다. 저자인 Jordan Scales는 이 프로젝트를 "번아웃 회복 프로젝트(burnout recovery project)"라고 설명하며, 오픈 소스 입문자들이 CSS에 기여하고 개선할 수 있는 환영받는 공간이 되기를 의도했습니다.