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

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

1. 콜아웃과 주석

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

2. 이미지와 미디어

두 가지 버전 비교(미디어 그리드)

“이전”과 “이후” 인터페이스를 비교하기 위한 2열 이미지 그리드:

저자의 라이브 비디오 아바타

카드 인터페이스에 통합된 원형 비디오 컴포넌트:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. 코드, 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 셀렉터 덕분에 클립보드에 복사되지 않습니다:

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 어텐션 수식¹:

\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. 스크롤 지원 테이블

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

6. 접이식 스포일러(<details>)

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

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "패턴이 성공적으로 검증되었습니다."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. 체크리스트와 단축키

Markdown 형식의 작업 목록:

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

조작용 단축키:

• ⌘ + K: 글로벌 검색.
• ~: 콘솔 호출.
• Esc: 모든 팝업 닫기.

8. 출처가 있는 인용문

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

9. 학술 각주

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