윈도우 98 감성을 CSS로 완벽 재현한 라이브러리, 98.css

요즘 웹 디자인은 은은한 그림자에 둥근 모서리, 파스텔 그라데이션이 기본이잖아요. 그런데 그 정반대 끝에서 묘하게 매력적인 프로젝트가 하나 있어요. 바로 98.css인데요, 이름 그대로 윈도우 98의 UI를 순수 CSS만으로 재현한 라이브러리예요. 회색 배경에 각진 버튼, 파란 타이틀 바, 그 특유의 '눌리는 느낌' 나는 입체 테두리까지, 화면을 보는 순간 어릴 적 컴퓨터실 냄새가 나는 것 같은 그 감성을 그대로 살렸거든요.

어떻게 쓰는 건데요?

사용법이 정말 간단해요. CSS 파일 하나만 불러온 다음, 평소처럼 HTML을 쓰면 돼요. <button> 태그를 쓰면 그게 바로 윈도우 98 버튼이 되고, window, title-bar, status-bar 같은 클래스를 div에 붙이면 옛날 프로그램 창이 뚝딱 만들어져요. 타이틀 바에 최소화·최대화·닫기 버튼을 넣는 클래스도 있고, 체크박스, 라디오 버튼, 슬라이더, 트리뷰, 탭, 진행 표시줄, 창 하단의 상태 표시줄까지 웬만한 컴포넌트가 다 갖춰져 있어요.

여기서 '디자인 시스템'이라는 말이 나오는데요, 이게 뭐냐면 버튼이나 입력창 같은 UI 부품들을 일관된 규칙으로 모아둔 세트라고 생각하면 돼요. 부트스트랩 같은 걸 떠올리면 쉬운데, 98.css는 그 규칙이 '윈도우 98처럼 보이기'인 거죠. 재미로 만든 것 같지만 구조는 진지한 디자인 시스템이에요.

기술적으로 재밌는 부분

제일 감탄스러운 건 그 특유의 입체감을 이미지 한 장 없이 만들어냈다는 점이에요. 윈도우 98 버튼을 자세히 보면 왼쪽·위 테두리는 밝고, 오른쪽·아래 테두리는 어둡거든요. 빛이 왼쪽 위에서 비추는 것처럼 보이게 해서 버튼이 튀어나와 보이는 효과인데, 이걸 CSS의 box-shadow를 여러 겹 겹쳐서 재현했어요. 이게 뭐냐면 요소에 그림자를 넣는 CSS 속성인데, 안쪽 그림자(inset)를 방향별로 색을 다르게 여러 개 쌓으면 픽셀 단위의 베벨 테두리처럼 보이게 만들 수 있거든요. 버튼을 누르면 밝은 면과 어두운 면이 뒤집히면서 '쑥 들어가는' 느낌까지 그대로예요.

폰트도 신경 썼어요. 당시 시스템 폰트였던 MS Sans Serif를 픽셀 느낌 그대로 살린 웹폰트를 포함하고 있어서, 안티앨리어싱 없이 도트가 살아있는 그 글자가 나와요. 그리고 자바스크립트는 단 한 줄도 없어요. 창을 드래그하는 동작 같은 건 없고 순수하게 '보이는 것'만 담당하는데, 덕분에 용량이 아주 가볍고 어떤 프레임워크와도 충돌 없이 섞어 쓸 수 있어요.

비슷한 프로젝트들

이 장르(?)에는 계보가 있어요. 패미컴 감성의 NES.css가 먼저 유명해졌고, 98.css가 나온 뒤에는 윈도우 XP를 재현한 XP.css, 윈도우 7의 반투명 에어로 글래스를 재현한 7.css가 뒤를 이었거든요. 일렉트론으로 윈도우 95 전체를 앱으로 띄워버린 프로젝트도 있었고요. 뉴모피즘, 글래스모피즘 같은 유행이 지나가는 동안 레트로 UI는 꾸준히 사랑받는 하나의 스타일로 자리잡은 느낌이에요. Y2K 감성이 패션에서 유행하는 것처럼 웹에서도 그 시절 미학을 소환하는 거죠.

한국 개발자에게는요

실무 서비스에 쓸 일은 많지 않겠지만, 사이드 프로젝트나 포트폴리오, 해커톤 데모, 이벤트 페이지에는 정말 잘 어울려요. 클래스 몇 개로 확실한 개성이 생기니까요. 그리고 공부 자료로도 훌륭해요. 소스가 짧고 읽기 쉬워서, box-shadow로 입체감을 만드는 트릭이나 시맨틱 HTML을 해치지 않으면서 스타일을 입히는 방식, 작은 디자인 시스템을 문서화하는 법을 배우기에 딱 좋거든요.

정리하면, 98.css는 추억을 소환하는 장난감이자 잘 만든 CSS 교재예요. 여러분은 되살려보고 싶은 옛날 UI가 있나요? 새마을호 예매 화면 같은 옛날 한국 프로그램 감성을 CSS로 재현해보는 것도 재밌을 것 같은데요.