design system
시나브로그 컴포넌트
프로젝트 전반에서 재사용되는 UI 요소 모음
[h1] text-2xl font-semibold tracking-tight
조금씩, 모르는 사이에 쌓이는 것들
[h2] text-xl font-semibold
Transformer의 Attention 메커니즘
[body] text-sm leading-relaxed
Scaled dot-product attention은 Query, Key, Value 세 행렬 사이의 유사도를 계산해 가중합을 구하는 메커니즘이다. 행렬 곱과 softmax 하나로 모든 위치 간 의존성을 포착한다.
[mono] font-mono — JetBrains Mono
const attention = softmax(QKᵀ / √d) · V
[muted] text-muted-foreground
조회수 · 날짜 · 부가 정보에 사용
variant="default" — 숫자 인덱스, 범용 레이블
category variants — 카테고리 색상
variant="primary" — 강조 레이블
bracket=true — 명시적 브래킷
기본
dot 포함
action 링크 포함
기본 — 번호 인덱스
excerpt + 조회수 포함 (인기글 캐러셀용)
Transformer의 Attention은 어떻게 동작하는가
Scaled dot-product attention은 Query, Key, Value 세 행렬 사이의 유사도를 계산해 가중합을 구하는 메커니즘이다. 행렬 곱과 softmax 하나로 모든 위치 간 의존성을 포착한다.
컴포넌트 설계에서 책임 분리란 무엇인가
단일 책임 원칙을 UI 컴포넌트에 적용하면 어떤 모습이 될까. 상태, 레이아웃, 스타일 각각을 다른 레이어로 분리하는 패턴을 살펴본다.
WebSocket 프레임 포맷 분석 — RFC 6455
WebSocket 프레임 헤더는 최소 2바이트다. FIN 비트, opcode, 마스킹 여부, payload 길이가 빽빽하게 담겨 있다.
cols=3 (기본) — 인기글용
cols=2 — 넓은 카드용
aspectRatio="video" (16:9) — 그리드
aspectRatio="wide" (2:1) — 번호 인덱스 포함
aspectRatio="square" (1:1) — ImageCard 캐러셀
현재 테마 전환:
sticky top-0 · backdrop-blur · mono uppercase 링크 · 활성 경로 강조 · ThemeToggle 내장
props: 없음 (내부적으로 usePathname 사용)
위치: layout.tsx 최상단, 전체 페이지 공유
이미지 없음 · variant="default"
hero3.webp · variant="default" · overlay="fade" · imagePosition="object-top"[현재 메인 페이지]
시나브로그
조금씩, 모르는 사이에 쌓이는 것들
hero1.webp · variant="centered" · overlay="dark"
hero2.webp · variant="split" · overlay="light"
시나브로그
개발과 학습의 기록을 천천히 쌓아가는 공간입니다.
stats
hero3.webp · variant="centered" · overlay="fade"
시나브로그
조금씩, 모르는 사이에 쌓이는 것들
variant="default" — 브랜드 + 카테고리 + 카피라이트
variant="minimal" — 한 줄