library — 이 사이트의 조각들

컴포넌트 · 패턴 · 확장 아이디어

현재 사이트에 쓰인 원시 요소와 섹션 패턴을 모아둔 곳. 아래로 스크롤하면 확장 샘플 (뉴스레터·검색·대시보드·FAQ 등)까지 나온다. 디자인은 고정이 아니다 — 필요해지면 여기서 꺼내 심는다.

workbench→ 브랜딩 컨셉 시각화 작업대· 무형을 형상으로. #무한의공간 #의미의영역 #언어 #llm #벡터 #지향성
> 01 색상
--bg#fafafa
--card#ffffff
--border#eaeaea
--ink#1a1a1a
--muted#555555
--soft#888888
--accent#5b3ff0
--accent-2#8b5cf6
--accent-3#d946ef
--accent-soft#f0edff
--tint#faf8ff
> 02 타이포그래피
hero h1
페이지 타이틀 / 히어로
h2
섹션 헤드
card title
카드 타이틀
body
본문
muted body
보조 본문
small
KICKER / SMALL CAPS
> 03 버튼
> 04 상태 칩
livewiparchived
> 05 타입 배지 (log kinds)
retronoteexperiment
> 06 태그 pill
primerspecexperimentday-0
> 07 카드 — project 형태
livesample.com
Sample Project

프로젝트의 한 줄 소개. 무엇을 하는지 짧게.

wipanother.io
Another Project

작업 중인 프로젝트. WIP 상태 표시.

> 08 카드 — log 형태
experiment
실험 로그 샘플 — 무엇을 측정했는가

요약 한두 줄. 실험 설계·결과·판단을 압축해서 쓴다.

> 09 섹션 헤드 패턴
kicker — 섹션 식별자

섹션 제목이 온다

보조 설명 한두 줄. 섹션 안에서 무엇을 보게 되는지 가볍게 안내.

> 10 알림 / 공지 (Notice)
⚠ 일반 공지 / 주의 — 배경 노랑 톤.
✓ 성공 알림 — 배경 초록 톤.
ℹ 정보 알림 — 배경 파랑 톤.
> 11 확장 샘플 — 아직 붙이지 않은 것들

필요해지면 여기서 꺼내 심는 설계안. 지금은 시각만.

> 뉴스레터 구독
매주 월요일 스프린트 요약

그 주에 지은 것·쪼개진 가설·다음 주 계획 한 메일. 추천 피드 없음.

> 검색바 (⌘K)
🔍⌘ K
> 통계 블록 (metrics)
살아있는 프로젝트
3/ 20
발행 로그
3지난 달
작업 일수
6스프린트 Day
> 아바타 스택
R
A
B
C
+7
구독자 · 방문자 · 팔로워 표시용
> 타임라인 (스프린트 진척)
Day 0
Week 1
Week 4
Week 8
Ship
> FAQ 아코디언
얼마나 자주 업데이트되나요?

프로젝트 추가 시 즉시, 로그는 매일 작업하면 매일.

RSS는 제공되나요?

아직 없음. 기억날 때 방문 = 설계상 의도.

> Empty state
아직 여기 아무것도 없음.
첫 항목이 올라오면 이 자리에 보입니다.
> 리뷰 / 인용

"보지 말라고 말하는 사이트가 이렇게 끌어당기다니, 구조적으로 못됐다."

R
Reader
방문자 · 2026
> 그라디언트 CTA 박스

제목은 여기.

보조 설명 한 줄. CTA 박스의 표준 패턴.

액션