2nd/10_Wiki/Topics/Domain_Programming/AI_and_ML/텍스트 렌더링(Text Rendering).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-텍스트-렌더링-text-rendering	텍스트 렌더링(Text Rendering)	10_Wiki/Topics	verified	self	Text Rendering Typography Font Rendering	none	A	0.9	applied	rendering typography graphics web		2026-05-10	pending	language framework TypeScript / GLSL HarfBuzz / FreeType

텍스트 렌더링(Text Rendering)

매 한 줄

"매 glyph 의 outline → raster — 매 hinting + anti-aliasing + subpixel 의 layered pipeline.". 매 1980s PostScript 부터 매 2026 의 variable font + COLRv1 emoji + LLM 의 image generation 의 text. 매 web (Skia, FreeType), OS (DirectWrite, Core Text), GPU (signed distance field) 의 cross-stack concern.

매 핵심

매 pipeline

• Shaping: 매 character → glyph index — 매 ligature, kerning, contextual substitution (HarfBuzz).
• Layout: 매 line break, justification, bidirectional (Unicode BiDi).
• Rasterization: 매 outline → bitmap — 매 hinting (TrueType / PostScript).
• Anti-aliasing: 매 grayscale / subpixel (ClearType, LCD striping).
• Composition: 매 alpha blend 의 background 위.

매 modern challenge

• Variable font: 매 single file 의 weight/width/slant axis — font-variation-settings.
• COLRv1: 매 vector emoji + gradient — 매 modern OS 의 support.
• High-DPI: 매 retina display 의 hinting 의 deemphasize.
• GPU rendering: 매 SDF (Signed Distance Field) — 매 game / 3D UI 의 sharp text at any scale.
• AI-generated image text: 매 FLUX / Imagen 4 / Ideogram 의 legible text — 매 2026 의 breakthrough.

매 응용

1. Web typography: 매 CSS font-display, font-feature-settings.
2. Game UI: 매 SDF font (Unity TextMeshPro, Three.js).
3. AI image text: 매 prompt-to-image 의 readable signage.

💻 패턴

CSS 의 modern typography

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900; /* variable axis */
  font-display: swap;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11', 'kern';
  font-variation-settings: 'wght' 450, 'opsz' 14;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

Canvas text 의 measurement

const ctx = canvas.getContext('2d')!;
ctx.font = '16px Inter';
const metrics = ctx.measureText('Hello');
console.log({
  width: metrics.width,
  ascent: metrics.actualBoundingBoxAscent,
  descent: metrics.actualBoundingBoxDescent,
});

Three.js 의 SDF text

import { Text } from 'troika-three-text';

const text = new Text();
text.text = 'Hello 3D';
text.fontSize = 0.5;
text.color = 0x9966FF;
text.font = '/fonts/Inter.woff';
text.anchorX = 'center';
text.sync();
scene.add(text);

HarfBuzz 의 shaping (Python)

import uharfbuzz as hb

with open('Inter.ttf', 'rb') as f:
    face = hb.Face(f.read())
font = hb.Font(face)

buf = hb.Buffer()
buf.add_str('Hello — fi')
buf.guess_segment_properties()
hb.shape(font, buf)

for info, pos in zip(buf.glyph_infos, buf.glyph_positions):
    print(f'glyph={info.codepoint} x_advance={pos.x_advance}')

GPU SDF generation

// Fragment shader — SDF text rendering
uniform sampler2D uSdfMap;
varying vec2 vUv;

void main() {
  float dist = texture2D(uSdfMap, vUv).a;
  float alpha = smoothstep(0.5 - fwidth(dist), 0.5 + fwidth(dist), dist);
  gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
}

React Native 의 custom font

import { useFonts } from 'expo-font';

function App() {
  const [loaded] = useFonts({
    'Inter-Regular': require('./assets/Inter-Regular.otf'),
  });
  if (!loaded) return null;
  return <Text style={{ fontFamily: 'Inter-Regular' }}>Hello</Text>;
}

AI image text (FLUX prompt)

# 매 FLUX.1 Pro — 매 readable text 의 prompt pattern
prompt = """
A coffee shop sign with the text "MORNING BREW" in bold serif font,
white letters on black wood, photorealistic, sharp focus on text.
"""
# 매 quote 의 사용 + 매 font style 의 명시 + 매 short phrase (< 10 words)

Skia 의 paragraph layout

// Skia ParagraphBuilder
ParagraphStyle style;
style.setMaxLines(3);
auto builder = ParagraphBuilder::make(style, fontCollection);
TextStyle ts;
ts.setFontSize(16);
builder->pushStyle(ts);
builder->addText("Hello world");
auto paragraph = builder->Build();
paragraph->layout(400);
paragraph->paint(canvas, 0, 0);

매 결정 기준

상황	Approach
매 web body text	CSS variable font + font-display: swap
매 web headline	preload + subset (unicode-range)
매 game / 3D	SDF (TextMeshPro, troika-three-text)
매 native iOS	Core Text
매 native Android	Compose Text
매 cross-platform	Skia (Flutter, React Native New Arch)
매 AI image text	FLUX 1.1 Pro / Ideogram 3.0 / Imagen 4

기본값: 매 web — variable font woff2 + system fallback. 매 game — SDF. 매 AI image — FLUX.

🔗 Graph

• 부모: Typography · Rendering Pipeline
• 응용: Web Performance · AI Image Generation
• Adjacent: Skia

🤖 LLM 활용

언제: 매 typography spec 의 review, 매 font feature setting 의 explanation, 매 AI image text prompt 의 craft. 언제 X: 매 production font rendering 의 implementation — 매 mature library (HarfBuzz, Skia) 의 우선.

❌ 안티패턴

• Font 의 too many: 매 5+ family 의 load — 매 FOUT + bandwidth 의 cost.
• No font-display: 매 default auto — 매 invisible text 의 long delay.
• Pixel font 의 high-DPI: 매 bitmap font 의 retina 의 blurry.
• AI image 의 long text: 매 50+ char 의 prompt — 매 garbled output.
• No subsetting: 매 모든 글리프 의 load — 매 KR/JP/CN 의 1MB+ font.

🧪 검증 / 중복

• Verified (W3C CSS Fonts Module, HarfBuzz docs, Skia docs, FLUX 1.1 Pro release notes).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — text rendering pipeline + variable font + SDF