복고풍 UI를 재현하는 프로젝트는 취미의 영역처럼 보이지만, 그 구현 방식은 종종 현업 개발자에게도 생각할 거리를 던진다. 98.css는 윈도우 98의 인터페이스를 웹에서 충실하게 재현하기 위한 CSS 라이브러리다. 버튼의 이중 테두리, 눌렀을 때 안으로 파고드는 입체감, 점선으로 표시되는 포커스, 회색조의 창(window)과 상태 표시줄까지 당시의 시각 언어를 CSS만으로 되살린다. 제작자는 이 프로젝트를 '재미있고 사소한' 실험이라고 표현하지만, 그 안에 담긴 설계 원칙은 결코 사소하지 않다.
시맨틱 HTML을 강제하는 설계
98.css의 가장 두드러진 특징은 시맨틱 HTML 사용을 전제로 한다는 점이다. 버튼을 만들려면 반드시 button 요소를 써야 하고, 입력 요소에는 label이 필요하며, 아이콘 버튼은 aria-label에 의존한다. 체크박스나 라디오 버튼도 input 요소에 for 속성으로 연결된 label을 함께 두도록 안내한다. 이렇게 하면 탭 키로 이동하거나 라벨 전체를 클릭해 선택하는 등 보조 기술 사용자와 일반 사용자 모두에게 나은 경험이 보장된다. 다시 말해 이 라이브러리는 겉모습을 흉내 내는 스킨이 아니라, 접근성을 일급 목표로 삼은 위에 시각적 스타일을 얹는 구조다. 복고 감성을 좇으면서도 접근성을 타협하지 않았다는 점이 이 프로젝트를 단순한 장난감과 구분 짓는다.
제공되는 컴포넌트의 범위는 넓다. 표준 버튼(기본 75px×23px, 좌우 12px 패딩)과 default 클래스로 강조된 기본 동작 버튼, 눌림·비활성·포커스 상태, 체크박스와 옵션 버튼, fieldset과 legend로 만드는 그룹 박스, 텍스트 입력과 여러 줄을 위한 textarea, range 타입 슬라이더가 있다. 슬라이더는 has-box-indicator로 표시자 모양을 바꾸거나 is-vertical로 세로 배치할 수도 있다. 나아가 제목 표시줄과 창, 상태 표시줄, 트리 뷰, 탭, 테이블 뷰, 진행 표시줄까지 완결된 창 하나를 구성하는 데 필요한 요소가 대부분 갖춰져 있다.
프레임워크에 종속되지 않는 순수 CSS
실무 관점에서 눈여겨볼 지점은 이 라이브러리에 자바스크립트가 전혀 없다는 사실이다. HTML에 CSS로 스타일만 입히기 때문에 리액트든 바닐라 자바스크립트든 어떤 프런트엔드 프레임워크와도 함께 쓸 수 있다. 실제로 제작자는 리액트 예제와 바닐라 자바스크립트 예제를 함께 제공하며, 가장 빠르게 쓰는 방법으로 unpkg에서 곧바로 가져오는 방식을 안내한다. npm이나 깃허브 릴리스 페이지를 통한 설치도 가능하다. 이런 무의존성 구조는 유지보수 부담을 줄이고, 특정 버전의 프레임워크에 묶이지 않는다는 실질적 장점을 준다.
동시에 이 무의존성은 한계이기도 하다. 탭 목록은 role=tablist와 role=tab 속성으로 마크업을 구성하지만, 실제로 활성 탭을 바꾸려면 aria-selected=true 속성을 토글하는 별도의 자바스크립트를 직접 작성해야 한다. 테이블 뷰를 클릭 가능한 형태로 만들거나 행을 선택된 것처럼 강조(highlighted)하는 상호작용도 마찬가지로 추가 스크립트가 필요하다. 즉 98.css는 '보이는 상태'를 표현하는 클래스와 속성만 제공하고, 그 상태를 바꾸는 로직은 사용하는 쪽의 몫으로 남긴다. 정적인 외형과 동적인 동작을 분리한 이 방침은 프레임워크 중립성을 얻는 대가이므로, 도입 전에 상호작용 구현 비용을 예상해 두는 편이 좋다.
또한 스타일 오버라이드가 열려 있다는 점도 실무에서 유용하다. 버튼에 패딩을 더하거나 입력 라벨에 색을 넣는 식으로 여러 스타일을 덮어써도 라이브러리가 주는 전체적인 외관은 유지된다. 입력 요소를 묶을 때는 각 요소를 field-row 클래스 컨테이너로 감싸 일관된 간격을 확보하고, 라벨을 입력 위에 배치하려면 field-row-stacked를 쓰는 식으로 세부 조정도 가능하다. 이처럼 정해진 틀을 지키면서도 필요한 만큼 커스터마이즈할 여지를 남긴 균형 감각이 돋보인다.
오픈소스 입문자를 위한 연습장
제작자는 이 프로젝트를 오픈소스 기여의 근육을 키우는 즐거운 공간으로 만들고 싶다고 밝힌다. 깃허브 이슈 페이지에서 CSS의 버그를 확인하거나 새로 제보할 수 있고, 특히 오픈소스가 처음인 이들의 풀 리퀘스트를 환영하며 기꺼이 코드 리뷰를 해주겠다고 한다. 결국 98.css의 가치는 향수 그 자체보다, 시맨틱 마크업과 접근성을 지키면서 익숙한 UI를 구현하는 방법을 손으로 익히게 한다는 데 있다. 복고풍 사이드 프로젝트나 데모, 혹은 접근성 학습용 예제를 찾는 한국의 실무자라면, 가볍게 도입해 보면서 좋은 마크업 습관을 되짚어 볼 만한 도구다.