# y7.hk의 모던 엔지니어링 아티클 해부

> y7 읽기 엔진 스트레스 테스트: 콜아웃, diff 블록, KaTeX 수식, 원형 아바타 비디오, figure 갤러리, 스포일러, 폰트 스위처.
>
> 2026-10-15 — y7.hk

import AvatarVideo from "@/components/AvatarVideo.astro";

이 글은 아티클 렌더링 엔진의 **모든** 시각적, 타이포그래픽적, 미디어 기능을 모았습니다.

---

## 1. 콜아웃과 주석

콜아웃은 사이트 전체의 모노크롬 스타일을 따릅니다. 신호등처럼 화려한 색상 테두리가 아닌 깔끔한 인셋 블록입니다:

  참고
  부드러운 반투명 --muted 배경과 시스템 테두리를 사용합니다. 타이포그래피와 어우러지며 글 읽기를 방해하지 않습니다.

  개발자 팁
  오른쪽 상단의 Aa Serif 버튼을 누르면 긴 글 읽기용 Georgia 세리프 폰트로 전환됩니다. 설정은 브라우저에 자동 저장됩니다.

## 2. 이미지와 미디어

  <img 
    src="/og.png" 
    alt="y7 디자인 시스템 아키텍처" 
    width="1200"
    height="630"
    loading="lazy"
    decoding="async"
    class="w-full h-auto rounded-2xl border border-border shadow-md transition-all hover:scale-[1.01]" 
  />
  그림 1. OpenGraph 생성과 y7.hk 비주얼 시스템(Geist Sans + OKLCH)

### 두 가지 버전 비교(미디어 그리드)
"이전"과 "이후" 인터페이스를 비교하기 위한 2열 이미지 그리드:

    버전 A: 이전 플랫 스타일
    버전 B: 새로운 Linear 스타일

### 저자의 라이브 비디오 아바타
카드 인터페이스에 통합된 원형 비디오 컴포넌트:

      Yakushev Hermann
      Product Engineer · Southeast Asia
    /me.mp4
---

## 3. 코드, Diff 패치, 터미널

### 리팩토링 diff 패치
삽입된 줄은 부드러운 에메랄드색으로, 삭제된 줄은 차분한 빨간색으로 하이라이트됩니다:

```diff
  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }
```

### 터미널 명령(Bash)
`$ ` 프롬프트 기호는 `user-select: none` 셀렉터 덕분에 클립보드에 복사되지 않습니다:

```bash
git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build
```

---

## 4. 수학과 KaTeX 수식

### 디스플레이 수식
복잡한 수식은 모바일 기기에서 가로 스크롤을 지원하며 렌더링됩니다:

$$
\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2
$$

Transformer 어텐션 수식[^1]:

$$
\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
$$

### 인라인 수식
본문 안에 바로 들어가는 수학 기호와 방정식: $e^{i\pi} + 1 = 0$, 행렬 곱셈 $A \times B \in \mathbb{R}^{m \times p}$, 그라디언트 노름 $\|\nabla \theta\| \le \epsilon$.

---

## 5. 스크롤 지원 테이블

테이블은 자동으로 반응형 스크롤 컨테이너로 감싸져 스마트폰에서도 읽기 쉽습니다:

| 방법 / 기술 | 응답 속도 | 복잡도 | 2026년 상태 |
| :--- | :--- | :--- | :--- |
| **Astro 7 SSG** | `< 20ms`(엣지 CDN) | 낮음 | 프로덕션 운영 중 |
| **React 19 Islands** | 부분 하이드레이션 | 중간 | 활성 |
| **OKLCH Tokens** | 즉시(CSS) | 최소 | 표준 |
| **Web Audio API** | 제로 레이턴시 | 낮음 | 활성화됨 |

---

## 6. 접이식 스포일러(``)

로그나 선택적 조각을 숨기기 위한 인터랙티브 아코디언:

  LLM 응답의 전체 JSON 페이로드 보기
    모델 구조화 출력 예시:
    
```json
{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "패턴이 성공적으로 검증되었습니다."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}
```

  시스템 요구 사항 및 환경
    Node.js ≥ 22.0.0 또는 Bun ≥ 1.1
    OKLCH 색상을 지원하는 최신 브라우저
    빌드 메모리: 약 250MB RAM

---

## 7. 체크리스트와 단축키

Markdown 형식의 작업 목록:

- [x] 컬러 콜아웃 지원 설정 완료
- [x] diff 코드 하이라이팅 구현
- [x] KaTeX 수식 도입
- [x] Serif / Sans 전환 버튼 추가
- [x] 미디어 파일용 `` 캡션 스타일링
- [ ] 인터랙티브 3D canvas 씬 추가 예정

조작용 단축키:
- ⌘ + K: 글로벌 검색.
- ~: 콘솔 호출.
- Esc: 모든 팝업 닫기.

---

## 8. 출처가 있는 인용문

> 디자인은 겉모습과 느낌만이 아니다. 디자인은 어떻게 작동하느냐다.
> 스티브 잡스

---

## 9. 학술 각주

Transformer 원논문을 참조하는 본문[^2]. 각주 번호를 클릭하면 하단 각주 패널로 즉시 이동하고, ↩ 화살표 아이콘을 누르면 읽던 위치로 정확히 돌아갑니다.

[^1]: 어텐션은 현대 대규모 언어 모델(LLM) 아키텍처의 핵심 구성 요소입니다.
[^2]: Vaswani et al., "Attention Is All You Need", NIPS 2017.