▲

GN⁺: 모노스페이스 웹

 (owickstrom.github.io)
1P by neo 22일전 | favorite | 댓글 1개

소개

모노스페이스 폰트는 많은 사람들에게 사랑받음. 가독성, 일관성, 미적 감각이 뛰어남. 이 페이지는 모노스페이스 그리드를 사용하여 텍스트와 다이어그램을 정렬함. 간단한 Markdown 문서에서 생성되며, CSS와 약간의 Javascript로 렌더링됨. 반응형 디자인을 채택하여 문자 크기 단위로 축소됨. 표준 요소들이 제대로 작동하도록 목표함. 70년대 스타일의 시맨틱 HTML로 렌더링됨.

기본 사항

  • 문서에는 몇 가지 추가 클래스가 사용되지만 대부분 마크업임.
  • 예시로 일반 단락과 수평선이 있음.
  • <details> 요소를 사용하여 내용을 숨길 수 있음.

목록

  • 일반적인 불릿 목록:

    • 바나나
    • 종이 배
    • 오이
    • 로켓

  • 순서 목록:

    • 목표
    • 동기
      • 내재적
      • 외재적
    • 2차 효과

  • 트리 시각화:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

테이블

  • 모노스페이스 그리드에 자동으로 맞춰지는 일반 테이블 사용 가능.
  • 예시:
    • 이름: Boboli Obelisk, 크기: 1.41m × 1.41m × 4.87m, 위치: 43°45’50.78”N 11°15’3.34”E
    • 이름: Pyramid of Khafre, 크기: 215.25m × 215.25m × 136.4m, 위치: 29°58’34”N 31°07’51”E

폼

  • 버튼과 입력 필드 예시:
    • 버튼: RESET, SAVE
    • 입력 필드: 이름, 성, 나이

그리드

  • 컨테이너에 그리드 클래스를 추가하여 수평 공간을 균등하게 나눌 수 있음.
  • 특정 셀에 flex-grow: 1;을 설정하여 나머지 공간을 채울 수 있음.

ASCII 그림

  • <pre> 태그를 사용하여 박스 그리기 문자로 그림을 그릴 수 있음.

  • 예시:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • <figure> 태그와 <figcaption>을 추가하여 강조 가능.

  • 메시지 전달 예시:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • 차트 예시:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

미디어

  • 이미지와 비디오 같은 미디어 객체 지원.
  • 예시:
    • 프랑스 성의 방 (2024)
    • 웹의 중심 (1914), Wikimedia

토론

  • CSS 기술을 발전시키고 디자인을 즐기며 제작함.
  • 사용하거나 피드백을 주면 좋겠음.
  • 전체 소스 코드는 GitHub에서 확인 가능: github.com/owickstrom/the-monospace-web
  • U.S. Graphics Company에 감사의 인사를 전함.

GN⁺의 정리

  • 이 프로젝트는 모노스페이스 폰트를 사용한 웹 디자인 실험임.
  • 반응형 디자인과 시맨틱 HTML을 결합하여 70년대 스타일의 웹 페이지를 구현함.
  • 개발자들이 CSS와 디자인 기술을 향상시키는 데 도움이 될 수 있음.
  • 비슷한 기능을 가진 프로젝트로는 "CSS Zen Garden"이 있음.
▲
neo 22일전  [-]
Hacker News 의견

  • 한 사용자는 monospace 페이지 목록을 유지하고 있으며, 현재 약 50개가 있음

    • 비례 글꼴을 포기하면 가독성이 떨어짐
    • 비례 글꼴의 자간 조정이 글자 그룹의 모양을 인식하는 데 큰 차이를 만듦
    • 코드 편집기에서 구조화되고 강조된 경우 monospace 텍스트는 괜찮음
    • Unicode 차트와 ASCII 아트와 함께 사용할 때 특히 예쁨

  • 한 사용자는 몇 년 전 monospace 글꼴로 작성된 비디오 게임 공략을 찾고 있음

    • 단어 선택만으로 완벽하게 정렬된 텍스트였음
    • 이에 대한 링크를 알고 있는지 질문함

  • 한 사용자는 "인디 웹" 철학에 대해 언급함

    • 알고리즘을 배제하고 과거의 웹을 좋게 만들었던 요소들을 포용함
    • RSS, 커스텀 블로그, 포럼, 웹 링 등을 포함함
    • 본인도 시작했으며 매우 좋다고 느낌

  • 한 사용자는 monospace 글꼴 자체는 괜찮지만, 강제 줄 바꿈이 문제라고 언급함

    • 작은 폰트로 텍스트 벽이 생기고, 독자 모드가 작동하지 않음
    • 가로로 기울이면 스크롤바가 생길 가능성이 있음
    • 기술 메일링 리스트에서도 동일한 불만이 있음

  • 한 사용자는 개인 웹사이트의 글꼴을 monospace로 변경하려고 생각 중임

    • 장문 텍스트 가독성이 좋은 monospace 글꼴을 추천받고 싶어함
    • Google Fonts에 있는 글꼴이면 추가 점수를 줌

  • 한 사용자는 monospace가 예쁘고 반응형이지만 본문 텍스트에는 적합하지 않다고 언급함

    • 여러 사이트에서 monospace 본문 텍스트를 읽어봤지만, 비례 글꼴이 더 좋다고 생각함

  • 한 사용자는 유명한 C64 리소스인 "VIC article"이 여전히 monospace로 제공된다고 언급함

    • 주요 문제는 인쇄임
    • 다이어그램이 고정된 참조가 필요한 2차원 공간을 사용함
    • 이 기사는 C64의 가장 중요한 기술 참조 자료임
    • 기술 데모 효과의 99%가 여기서 발견된 기본적인 트릭으로 분해될 수 있음

  • 한 사용자는 웹이 다시 원래의 모습으로 돌아오고 있다고 언급함

    • 초기 웹의 위성 커뮤니티가 점점 더 많아지고 있음
    • 웹의 다양한 부분을 방문하는 것이 점점 더 흥미로워짐

  • 한 사용자는 tree ul-list CSS 클래스가 HTML 표준의 일부가 되어야 한다고 생각함

    • 매우 유용한 것임

  • 한 사용자는 OpenBSD가 몇 년 전부터 콘솔 글꼴을 "Spleen"으로 설정했다고 언급함

답변달기