▲

GN⁺: 98.css – 오래된 사용자 인터페이스를 충실하게 재현하는 디자인 시스템

 (jdan.github.io)
3P by neo 21일전 | favorite | 댓글 1개

  • Intro

    • 98.css는 Windows 98 스타일의 인터페이스를 구축하기 위한 CSS 라이브러리임.
    • 이 라이브러리는 접근성을 주요 목표로 하며, HTML의 시맨틱 사용을 권장함.
    • JavaScript 없이 HTML을 스타일링하며, 다양한 프론트엔드 프레임워크와 호환 가능함.

  • Components

    • Button
      • 명령 버튼은 사용자가 클릭할 때 애플리케이션이 특정 작업을 수행하게 하는 컨트롤임.
      • 기본적으로 75px 너비와 23px 높이를 가지며, 클릭 시 테두리가 눌린 상태로 변함.
    • Checkbox
      • 체크박스는 독립적이거나 비독점적인 선택을 나타냄.
      • 체크박스와 라벨을 함께 사용하여 접근성을 높임.
    • OptionButton
      • 옵션 버튼은 제한된 선택지 중 하나를 선택할 수 있는 라디오 버튼임.
      • 같은 그룹의 옵션 버튼은 동일한 name 속성을 공유하여 그룹화함.
    • GroupBox
      • 그룹 박스는 컨트롤 세트를 조직화하는 데 사용되는 사각형 프레임임.
      • fieldset 태그를 사용하여 구현하며, 레이블을 추가할 수 있음.
    • TextBox
      • 텍스트 박스는 사용자가 텍스트를 입력하거나 편집할 수 있는 직사각형 컨트롤임.
      • 여러 줄을 지원하려면 textarea 요소를 사용함.
    • Slider
      • 슬라이더는 조정 범위를 정의하는 막대와 현재 값을 나타내는 표시기로 구성됨.
      • 수직 슬라이더를 만들려면 is-vertical 클래스를 사용함.
    • Dropdown
      • 드롭다운 리스트 박스는 목록에서 단일 항목을 선택할 수 있게 함.
      • select와 option 요소를 사용하여 구현함.

  • Window

    • Title Bar
      • 제목 바는 창의 상단 가장자리에 위치하며, 창의 내용을 식별함.
      • title-bar, title-bar-text, title-bar-controls 클래스를 사용하여 구현함.
    • Window contents
      • 창의 경계를 정의하는 window 클래스를 사용하여 창을 구성함.
      • window-body 클래스를 사용하여 창의 내용을 그림.
    • Status Bar
      • 상태 바는 창의 하단에 위치하여 현재 상태나 기타 정보를 표시함.
      • status-bar 클래스를 사용하여 구현함.
    • TreeView
      • 트리 뷰 컨트롤은 객체를 계층적 관계에 따라 들여쓰기된 개요로 표시함.
      • ul 요소와 tree-view 클래스를 사용하여 구현함.
    • Tabs
      • 탭 컨트롤은 파일 캐비닛이나 노트북의 구분자와 유사함.
      • menu 요소와 [role=tablist] 속성을 사용하여 구현함.
    • TableView
      • 테이블 뷰는 table 요소를 사용하여 렌더링함.
      • sunken-panel 클래스로 테두리와 오버플로우 컨테이너를 제공함.

  • Issues, Contributing, etc.

    • 98.css는 MIT 라이선스를 따름.
    • GitHub 이슈 페이지에서 버그를 보고하거나 새로운 버그를 제보할 수 있음.
    • 오픈 소스에 대한 기여를 환영하며, 코드 리뷰를 제공함.
▲
neo 21일전  [-]
Hacker News 의견

  • 한 사용자는 다양한 운영체제의 기본 색상 테마를 포함한 프로젝트를 만들었으며, 현대 시스템에서도 잘 작동하고 미적으로 보이도록 SVG로 아이콘과 심볼을 재창조했음

    • 프로젝트를 Show HN에 게시했으나 큰 주목을 받지 못했음
    • 프로젝트 제목이 매력적이지 않을 수 있다고 생각함

  • 다른 사용자는 이 프로젝트가 번아웃 회복 프로젝트였으며, 최근 이에 대한 생각을 기록했음

  • 여러 운영체제와 관련된 CSS 스타일을 수집한 사용자가 있음

    • The Sims, Windows 98, Windows XP, Windows 7, Edward Tufte 스타일을 포함함

  • 98.css는 Hacker News에서 클래식으로 여겨지며, 여러 차례 논의된 바 있음

    • HyperCard Simulator와 Decker도 참고할 만함

  • 비원본 DPI 설정에서는 스타일이 잘 작동하지 않을 수 있으며, 브라우저 콘솔에서 특정 코드를 실행하여 물리적 픽셀에 맞출 수 있음

  • 한 사용자는 Windows 95와 Windows 98에서 MS Sans Serif가 아닌 것 같다고 언급함

  • 또 다른 사용자는 botoxparty.github.io/XP.css와 khang-nd.github.io/7.css를 확인할 가치가 있다고 말함

  • 90년대 후반 Microsoft는 Windows 데스크탑 테마와 색상에 맞춘 CSS 색상을 제공했으며, 이를 통해 웹 UI를 사용자의 데스크탑과 일치시킬 수 있었음

  • 한 사용자는 현재의 UX/UI 연구와 개선보다 과거의 스타일이 더 낫다고 주장함

    • 버튼, 탭, 텍스트 필드가 명확하게 보이는 것을 선호함

  • Obsidian 테마를 98.css 소스를 사용하여 만들었으나 현재는 중단된 상태임

답변달기