# [[Static Site Generation (SSG)]] ## πŸ“Œ Brief Summary 정적 μ‚¬μ΄νŠΈ 생성(SSG, Static Site Generation)은 μ‚¬μš©μž μš”μ²­ μ‹œμ μ΄ μ•„λ‹Œ μ‚¬μ΄νŠΈ λΉŒλ“œ(Build) μ‹œμ μ— HTML νŽ˜μ΄μ§€λ₯Ό 미리 μƒμ„±ν•˜λŠ” μ›Ήμ‚¬μ΄νŠΈ λ Œλ”λ§ μ•„ν‚€ν…μ²˜μž…λ‹ˆλ‹€ [1]. μ™„μ„±λœ 정적 νŒŒμΌμ€ CDN을 톡해 μ‚¬μš©μžμ—κ²Œ μ¦‰κ°μ μœΌλ‘œ μ „μ†‘λ˜λ―€λ‘œ, μ„œλ²„ 처리 μ‹œκ°„μ„ λ‹¨μΆ•ν•˜μ—¬ 번개처럼 λΉ λ₯Έ λ‘œλ”© 속도λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€ [1-3]. 압도적인 μ›Ή μ„±λŠ₯κ³Ό 검색 μ—”μ§„ μ΅œμ ν™”(SEO) νš¨μœ¨μ„ μ œκ³΅ν•˜μ§€λ§Œ, μ‹€μ‹œκ°„μœΌλ‘œ 자주 λ³€κ²½λ˜λŠ” μ½˜ν…μΈ μ—λŠ” μ ν•©ν•˜μ§€ μ•Šμ€ νŠΉμ„±μ΄ μžˆμŠ΅λ‹ˆλ‹€ [2, 3]. ## πŸ“– Core Content - **λ Œλ”λ§ μž‘λ™ 원리:** SSGλŠ” λΈŒλΌμš°μ €κ°€ μš”μ²­ν•  λ•Œλ§ˆλ‹€ μ„œλ²„κ°€ HTML을 μƒμ„±ν•˜λŠ” λŒ€μ‹ , 배포 μ „ λΉŒλ“œ λ‹¨κ³„μ—μ„œ 미리 λͺ¨λ“  HTML νŒŒμΌμ„ κ΅¬μ„±ν•©λ‹ˆλ‹€ [1, 4]. 이후 μ‚¬μš©μžκ°€ μ ‘κ·Όν•˜λ©΄ CDN(μ½˜ν…μΈ  전솑 λ„€νŠΈμ›Œν¬)을 톡해 사전 λ Œλ”λ§λœ 정적 νŒŒμΌμ„ μ§€μ—° 없이 μ¦‰μ‹œ μ œκ³΅ν•©λ‹ˆλ‹€ [1, 2]. - **μ„±λŠ₯ 및 Core Web Vitals μ΅œμ ν™”:** μ„œλ²„ 츑의 μ—°μ‚° λŒ€κΈ° μ‹œκ°„μ΄ μ—†κΈ° λ•Œλ¬Έμ—, 졜초 μ½˜ν…μΈ  페인트(FCP)와 μƒν˜Έμž‘μš© μ‹œμž‘ μ‹œκ°„(TTI) μ§€ν‘œμ—μ„œ 맀우 λ›°μ–΄λ‚˜κ³  μΌκ΄€λœ μ„±λŠ₯을 λ³΄μž…λ‹ˆλ‹€ [5-7]. μ΄λŠ” κ΅¬κΈ€μ˜ μ΅œμ‹  μ›Ή μ„±λŠ₯ μ§€ν‘œμΈ Core Web Vitals의 LCP(Largest Contentful Paint)λ₯Ό κ°œμ„ ν•˜λŠ” 핡심 μ „λž΅μœΌλ‘œ κΌ½νž™λ‹ˆλ‹€ [8, 9]. - **SEO(검색 μ—”μ§„ μ΅œμ ν™”) κ·ΉλŒ€ν™”:** ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§(CSR) ν™˜κ²½μ—μ„œλŠ” 검색 μ—”μ§„ 봇(Googlebot)이 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‹€ν–‰ν•΄μ•Όλ§Œ μ½˜ν…μΈ λ₯Ό λ³Ό 수 μžˆμ–΄ 색인 μ§€μ—° λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€ [10, 11]. 반면 SSGλŠ” 이미 μ™„μ „νžˆ λ Œλ”λ§λœ HTML ν…μŠ€νŠΈ 및 메타데이터λ₯Ό μ¦‰κ°μ μœΌλ‘œ ν¬λ‘€λŸ¬μ—κ²Œ μ œκ³΅ν•˜λ―€λ‘œ 졜고의 크둀링 μ ‘κ·Όμ„±κ³Ό SEO 점수λ₯Ό 보μž₯ν•©λ‹ˆλ‹€ [4, 12-14]. - **κ°€μž₯ μ ν•©ν•œ μ‚¬μš© 사둀:** μ‹€μ‹œκ°„ 데이터 변동이 적고 λΉ λ₯Έ 정보 전달이 μ€‘μš”ν•œ 곡식 λ¬Έμ„œ(Documentation), λΈ”λ‘œκ·Έ, λžœλ”© νŽ˜μ΄μ§€, λ§ˆμΌ€νŒ… μ›Ήμ‚¬μ΄νŠΈλ₯Ό ꡬ좕할 λ•Œ κ°€μž₯ 이상적인 λ°©μ‹μž…λ‹ˆλ‹€ [1, 2, 4, 12]. - **μ•„ν‚€ν…μ²˜μ˜ ν•œκ³„:** μ½˜ν…μΈ κ°€ μ—…λ°μ΄νŠΈλ  λ•Œλ§ˆλ‹€ μ‚¬μ΄νŠΈ 전체λ₯Ό λ‹€μ‹œ λΉŒλ“œν•˜κ³  배포해야 ν•œλ‹€λŠ” 단점이 μžˆμŠ΅λ‹ˆλ‹€ [3]. μ‹€μ‹œκ°„ κ°œμΈν™” κΈ°λŠ₯μ΄λ‚˜, 수만~μˆ˜μ‹­λ§Œ 개의 νŽ˜μ΄μ§€λ₯Ό λ³΄μœ ν•œ λŒ€κ·œλͺ¨ μ‚¬μ΄νŠΈμ˜ 경우 λΉŒλ“œ μ‹œκ°„μ΄ κΈ°ν•˜κΈ‰μˆ˜μ μœΌλ‘œ λŠ˜μ–΄λ‚˜λŠ” 치λͺ…적인 μ œμ•½μ΄ μžˆμŠ΅λ‹ˆλ‹€ [2, 4]. - **λͺ¨λ˜ μ›Ή ν”„λ ˆμž„μ›Œν¬ 지원:** Next.js, Gatsby, Hugo, Jekyll λ“±μ˜ μ΅œμ‹  ν”„λ ˆμž„μ›Œν¬μ—μ„œ SSGλ₯Ό 기본적으둜 μ§€μ›ν•©λ‹ˆλ‹€ [1, 15, 16]. μ΅œκ·Όμ—λŠ” μ΄λŸ¬ν•œ SSG의 ν•œκ³„λ₯Ό κ·Ήλ³΅ν•˜κΈ° μœ„ν•΄, 정적 νŽ˜μ΄μ§€μ—λŠ” SSGλ₯Ό μ‚¬μš©ν•˜κ³  μ΅œμ‹  정보가 ν•„μš”ν•œ νŽ˜μ΄μ§€μ—λŠ” SSR(μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§)μ΄λ‚˜ ISR(증뢄 정적 μž¬μƒμ„±)을 κ²°ν•©ν•˜λŠ” 'ν•˜μ΄λΈŒλ¦¬λ“œ λ Œλ”λ§' μ•„ν‚€ν…μ²˜κ°€ μ΅œμš°μ„  λͺ¨λ²” μ‚¬λ‘€λ‘œ ν™œμš©λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€ [17]. ## πŸ”— Knowledge Connections - **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Incremental Static Regeneration (ISR)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]] - **Projects/Contexts:** [[Next.js]], [[Gatsby]], [[Content Delivery Network (CDN)]] - **Contradictions/Notes:** μ†ŒμŠ€μ— λ”°λ₯΄λ©΄ SSGλŠ” μ„±λŠ₯κ³Ό SEO μΈ‘λ©΄μ—μ„œ μ΅œμƒμ˜ κ²°κ³Όλ₯Ό 보μž₯ν•˜μ§€λ§Œ, μ‹€μ‹œκ°„ κ°œμΈν™”(Personalization) κ²½ν—˜μ„ μ œκ³΅ν•˜κ±°λ‚˜ μˆ˜μ‹œλ‘œ 데이터가 λ°”λ€ŒλŠ” κ±°λŒ€ν•œ μ›Ή μ•±μ—μ„œλŠ” λ‹¨λ…μœΌλ‘œ μ‚¬μš©ν•  수 μ—†λŠ” λͺ…ν™•ν•œ ν•œκ³„λ₯Ό κ°€μ§‘λ‹ˆλ‹€. λ”°λΌμ„œ, μ΅œμ‹  μ•„ν‚€ν…μ²˜μ—μ„œλŠ” SSG의 속도와 SSR의 신선도λ₯Ό κ²°ν•©ν•œ ISR 방식을 λŒ€μ•ˆμœΌλ‘œ μΆ”μ²œν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€ [2, 18, 19]. --- *Last updated: 2026-04-26*