레트로 UI는 웹에서 꾸준히 소비되는 하나의 장르다. 그중에서도 98.css는 마이크로소프트 윈도우 98의 인터페이스를 CSS만으로 충실하게 재현하는 것을 목표로 하는 디자인 시스템이다. 회색 배경에 볼록하게 튀어나온 버튼 테두리, 눌렀을 때 안으로 꺼지는 입체감, 점선으로 표시되는 포커스, 창의 타이틀 바와 상태 바까지 그 시절 데스크톱의 시각적 문법을 그대로 옮겨 놓았다. 개발자는 unpkg를 통해 바로 불러오거나 npm 또는 깃허브 릴리스 페이지에서 설치할 수 있으며, 라이브러리 자체에는 자바스크립트가 전혀 포함되어 있지 않다.
시맨틱 HTML 위에 얹은 스타일
98.css의 가장 눈여겨볼 만한 지점은 겉모습보다 설계 철학이다. 이 라이브러리는 시맨틱 HTML 사용을 전제로 동작한다. 버튼을 만들려면 반드시 button 요소를 써야 하고, 입력 요소에는 label이 필요하며, 아이콘만 있는 버튼은 aria-label에 의존한다. 체크박스나 라디오 버튼도 for 속성으로 입력과 라벨을 연결하도록 요구한다. 이렇게 하면 탭 키로 이동하거나 라벨 전체를 클릭해 선택하는 등 보조기술 사용자와 일반 사용자 모두에게 일관된 경험이 보장된다. 접근성이 프로젝트의 핵심 목표라는 점을 라이브러리 구조 자체가 강제하는 셈이다.
제작자가 접근성과 지역화를 함께 고려한 흔적은 타이틀 바 설계에서도 드러난다. 닫기, 최소화, 최대화, 복원, 도움말 버튼은 각각 aria-label로 의도를 전달하는데, 여기에 대응하는 스타일링 클래스를 별도로 두었다. 덕분에 aria-label의 텍스트를 다른 언어로 바꾸더라도 버튼 렌더링이나 접근성, 지역화에 문제가 생기지 않는다. 한국어 환경에서 UI를 만들 때 흔히 부딪히는 다국어 라벨 문제를 미리 염두에 둔 구조라는 점은 참고할 만하다.
프레임워크에 종속되지 않는 구성 방식
자바스크립트가 없다는 사실은 제약이 아니라 유연성의 근거가 된다. 98.css는 HTML에 CSS만 입히기 때문에 어떤 프론트엔드 프레임워크와도 함께 쓸 수 있다. 실제로 리액트와 결합한 예제, 순수 자바스크립트로 구성한 예제가 각각 제공된다. 제공되는 컴포넌트는 상당히 폭넓다. 표준 버튼은 75px 너비에 23px 높이를 갖고 12px의 좌우 여백을 기본으로 하며, default 클래스를 추가하면 엔터 키를 눌렀을 때 실행될 기본 동작을 시각적으로 강조할 수 있다. 이 밖에 체크박스, 라디오, 텍스트 상자, 텍스트 영역, 슬라이더, 드롭다운, 그룹 박스는 물론 트리 뷰, 탭, 테이블 뷰, 상태 바, 진행 표시줄까지 그 시절 데스크톱 애플리케이션을 구성하던 요소가 대부분 갖춰져 있다.
입력 요소를 다룰 때는 몇 가지 관례가 반복된다. 여러 입력을 나열할 때는 각 입력을 field-row 클래스를 가진 컨테이너로 감싸 간격을 일정하게 유지하고, 라벨을 입력 위에 배치하고 싶으면 field-row-stacked를 쓴다. 슬라이더는 has-box-indicator로 표시자를 바꾸거나 is-vertical로 세로 배치할 수 있고, 진행 표시줄은 기본 solid 외에 segmented 클래스로 분절된 형태를 만들 수 있다. 창을 구성할 때는 window와 window-body 클래스로 뼈대를 세우고 컨테이너의 width를 지정해 크기를 조절한다. 스타일을 덧입혀 버튼 여백을 늘리거나 라벨에 색을 넣는 식의 커스터마이징도 라이브러리 외형을 유지한 채 허용된다.
실무에서 어디까지 기대할 수 있나
다만 상호작용이 필요한 부분은 개발자의 몫으로 남는다. 탭은 활성 탭에 aria-selected=true 속성을 부여하는 커스텀 자바스크립트로 관리해야 하고, 테이블 뷰를 클릭 가능한 형태로 만들려면 interactive 클래스와 highlighted 클래스를 상황에 맞게 붙이는 스크립팅이 별도로 필요하다. 라이브러리는 어디까지나 외형과 구조를 담당할 뿐, 상태 전환의 논리는 제공하지 않는다는 점을 분명히 이해하고 접근해야 한다.
실무적으로 98.css는 프로덕션 UI 프레임워크라기보다 특정한 분위기를 노리는 프로젝트에 어울린다. 포트폴리오 사이트, 이벤트 페이지, 개발자 도구의 데모, 굿즈성 웹앱처럼 복고 감성이 콘셉트가 되는 자리에서 짧은 시간에 완성도 있는 인상을 줄 수 있다. 제작자 스스로도 이 프로젝트를 재미있고 가벼운 시도로 소개하며, 깃허브 이슈와 풀 리퀘스트를 환영한다고 밝히고 있다. 특히 오픈소스에 처음 발을 들이는 이들에게 코드 리뷰를 제공하겠다는 대목은, 이 라이브러리가 실전 도구인 동시에 오픈소스 기여를 연습하기 좋은 낮은 진입 장벽의 놀이터임을 보여준다. 시맨틱 마크업과 접근성이라는 견고한 기본기를 복고라는 외피 안에 담아냈다는 점에서, 단순한 향수 이상의 배울 거리가 있는 프로젝트다.