이 블로그는 SRCL(Sacred Computer)을 Hugo로 포팅한 SACRED 테마를 쓴다. SRCL은 터미널이 실제로 렌더링할 수 있는 ANSI 팔레트만 쓰는 디자인 시스템이다 — 모든 색은 SGR 코드로 표현 가능하고, 모든 간격은 ch와 라인 리듬의 배수다.

문제는 지금까지 이 테마를 마크다운 기본 문법으로만 얕게 쓰고 있었다는 것. 이 글은 테마에 들어 있는 컴포넌트 전부를 시연하는 레퍼런스다. 글 쓸 때 여기서 복사해 가면 된다. 우상단 THEME 버튼을 눌러 다크 모드로도 봐라 — 모든 컴포넌트가 양쪽 테마에 대응한다.

타이포그래피#

h1은 █ 글리프와 이중선, 이 글에서 보고 있는 그대로다. 굵게, 기울임, 취소선, 인라인 코드, 그리고 ==하이라이트==는 mark 태그로 쓴다. 단축키는 ⌘ + Shift + R 처럼 kbd로.

전문 용어에는 SRCL 처럼 툴팁을 달 수 있다 (마우스를 올려봐라). 각주도 된다¹.

리스트#

• 불릿 마커는 SRCL 스타일 ▪
• 중첩하면
  • 이렇게
  • 들여쓰기된다
• 순서 리스트는

1. 카운터가
2. 1. 2. 형식으로
   1. 중첩 시 2.1. 형식

태스크 리스트#

GFM 태스크 리스트는 SRCL 체크박스(▢/▣)로 렌더링된다:

• SRCL 디자인 시스템 포팅
• giscus 댓글 복구
• 쇼케이스 글 작성
• 세계 정복

트리 뷰#

파일 구조는 코드 블록 대신 tree shortcode를 쓰면 박스 드로잉 문자로 그려진다:

메시지 — 대화 재현#

카톡이나 슬랙 대화를 인용할 때 blockquote 대신 SRCL 메시지 버블을 쓴다:

일반 인용문은 여전히 이렇게:

새 도구가 만드는 효율은 그 도구를 가장 잘 쓰는 자에게 먼저 흐르고, 결국 그 도구를 소유한 자에게 모인다.

카드와 알림#

본문 안에서 내용을 묶을 때 카드를 쓴다:

경고 배너는 그림자가 깔린 블록이다:

인라인 라벨이 필요하면 NEW DEPRECATED 한글도 됨 배지를 쓴다.

힌트 박스 3종 (terminal 테마 승계):

info — 파란 줄

warning — 올리브 줄

danger — 빨간 줄

데이터 표현#

테이블#

프로그레스 바#

블록 로더#

SRCL의 11가지 로더 시퀀스가 전부 돌아간다 (100ms 프레임):

문장 안에도 넣을 수 있다 — 빌드 돌아가는 중 같은 느낌.

코드#

언어를 지정한 펜스 코드는 타이틀 바 + COPY 버튼이 붙고, 라이트/다크 별도 신택스 팔레트를 쓴다:

def porting_strategy(component: str) -> str:
    """SRCL React 컴포넌트를 Hugo로 옮기는 기준"""
    if needs_react_state(component):
        return "skip"          # Chessboard, Snake...
    if useful_for_blog(component):
        return "shortcode"     # Card, Message, Tree...
    return "theme-builtin"     # ActionBar, Badge...

긴 코드는 접어둘 수 있다:

theme = "sacred"

[params]
  sacredTheme = "light"   # 또는 "dark"
  # sacredTint = "green"  # OKLCH 틴트: green blue red yellow purple orange pink
  giscusRepo = "dosi-dev/dosi.dev"

[params.xProfile]
  user = "zhugehyuk"

버튼과 임베드#

액션 버튼 행:

구분선:

X 포스트 임베드:

Threads 포스트 임베드 (X와 같은 인터페이스):

View on Threads

프로필 카드 — 푸터에 항상 떠 있는 그것을 본문에도 박을 수 있다:

𝕏 Zhuge 2ᴴᴬᴸ⁹ ♟ @zhugehyuk · x.com I can think. I can wait. I can fast. Follow

TLDR#

전체 포팅 현황과 SRCL 원본 대비 구현 범위는 themes/sacred/SRCL-PORT.md에 정리돼 있다.