[ κ²μμμ§ μ΅μ ν ] μΉνμ΄μ§ λ‘λ©μ λ¨κ³λ³ κ³Όμ κ³Ό μ€νμΌ μ μ© λ¨κ³ μ€λͺ
λ°νμΌ: 2024. 10. 18.
ν¨κ³Όμ μΈ SEO κ°μ μ μν μΉνμ΄μ§ λ‘λ© μλ μ΅μ ν λ°©λ²
μΉ νμ΄μ§ λ‘λ© κ³Όμ μ κ²μ μ΅μ νμ μ€μν μμμ€ νλ μ λλ€. μΉ νμ΄μ§ λ‘λ©μ DNS μ‘°νλ‘ IP μ£Όμλ₯Ό μ»κ³ , TCPλ₯Ό ν΅ν΄ μλ²μ μ°κ²°μ νκ²λ©λλ€. HTTP μμ²μ ν΅ν΄ μλ²μμ HTMLκ³Ό CSSλ₯Ό λ°μ DOM λ° λ λλ§ νΈλ¦¬λ₯Ό μμ±ν©λλ€. μμ±λ νΈλ¦¬μ CSSλ‘ μ€νμΌμ μ μ©νκ³ JavaScriptλ₯Ό μ€ννμ¬ λμ μ½ν μΈ λ₯Ό μΆκ°ν©λλ€.μ΄ν λ μ΄μμμ κ³μ°νκ³ , νμΈν λ° μ»΄ν¬μ§ν μ ν΅ν΄ μ΅μ’ μ μΌλ‘ νλ©΄μ νμ΄μ§λ₯Ό νμνκ² λ©λλ€.
κ²μ μ΅μ ν ν₯μμ μν μΉ νμ΄μ§ λ‘λ© λ¨κ³ λΆμ
κ²μμμ§ μ΅μ ν μμ μ μν΄μλ μΉνΌμ΄μ§κ° μ΄λ€ λ°©μμΌλ‘ λ‘λ©μ΄ λλμ§ μΉνμ΄μ§ λ‘λ©λ¨κ³μ κΈ°λ³Έμ μΈ μ΄ν΄κ° μμΌλ©΄ μμ νκΈ°κ° μμν΄μ§λλ€. κ° λ¨κ³λ³λ‘ μ΄μμκ° μ΅μ ν μμ μμ μ§νν μ μλ λΆλΆκ³Ό ν μ μλ λΆλΆμ μκ³ ν μ μλ λΆλΆμ λν μμ μ μ§νν΄μΌ νλ©° μΉνμ΄μ§ λ‘λ©μ κ·Έ μμ μ κ°λ¨κ³μ μΌλΆλΆμ νμ λ μ μμ΅λλ€.
κ²μμμ§ μ΅μ νν λ€λ₯Έ μμλ‘ μΈν΄ λ°μνλ λ¬Έμ λ μ°¨ν μ κ²ν νμ ν΄μΌ νλ©° κ·ΈλΆλΆμ΄ μΉνμ΄μ§μ μ΄λ€ κ³Όμ μμ λ°μνλμ§λ λλ΅μ μΌλ‘ νμ ν νμμ±μ΄ μμ΄ μλλ μΉνμ΄μ§ λ‘λ©μ λ¨κ³λ³ μ€λͺ μ κ°λ¨νκ² μμ½ μ 리νμ΅λλ€.
μΉνμ΄μ§ λ‘λ©μμ
1. DNS μ‘°ν (DNS Lookup)
DNS μ‘°νλ μ¬μ©μκ° μΉμ¬μ΄νΈ μ£Όμλ₯Ό μ λ ₯νλ©΄ λΈλΌμ°μ λ λλ©μΈ μ΄λ¦μ IP μ£Όμλ‘ λ³ννλ κ³Όμ μ λλ€. μΌλ°μ μΌλ‘ μ¬λλ€μ΄ μ¬μ©νκΈ° νΈλ¦¬ν μ¬μ΄νΈ μ΄λ¦μ μ»΄ν¨ν°κ° μ΄ν΄ν μ μλ μ«μλ‘ λ³κ²½ν΄μ£Όλ μμ μ λλ€.
DNS(Domain Name System)λ‘ μλ²μ μμ²μ 보λ΄λ©΄ DNS μλ²λ λλ©μΈ μ΄λ¦μ ν΄λΉνλ IP μ£Όμλ₯Ό λ°νν©λλ€. μ΄λ μΊμλ₯Ό μ΄μ©ν΄μ μΊμ μ λ³΄κ° λΈλΌμ°μ μ μ‘΄μ¬νλ©΄ DNS μ‘°ν κ³Όμ μ μλ΅ν μ μμ΅λλ€.
νμ΄μ§μμ μΈλΆμ μ¬λ¬ κ°μ λ€λ₯Έ μ¬μ΄νΈ μ 보λ₯Ό κ°μ Έμ¬ λ μ΄ κ³Όμ μμ λ‘λ© μ λΆνκ° κ±Έλ¦΄ μ μκΈ° λλ¬Έμ νμ΄μ§μ λ§μ΄ μ¬μ©νλ μ 보λ₯Ό κ°μ Έμ€λ μ¬μ΄νΈμ λν΄μ 미리 μ°κ²°ν μ€λΉλ₯Ό ν΄μ£Όλ©΄ μ’ λ λΉ λ₯΄κ² μΈλΆ 리μμ€λ₯Ό λ‘λ©μν¬ μ μμ΅λλ€.
dns-prefetchλ λΈλΌμ°μ κ° λλ©μΈ μ΄λ¦μ 미리 DNS μ‘°ννμ¬ IP μ£Όμλ₯Ό μΊμνλλ‘ μ€μ ν©λλ€.
preconnectλ λΈλΌμ°μ κ° μΈλΆ λλ©μΈμ λν μ°κ²°μ 미리 μ€μ νλλ‘ μ§μν©λλ€
β μ
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
2. μλ²μ μ°κ²° (TCP)
λΈλΌμ°μ λ DNS μ‘°νλ₯Ό ν΅ν΄ μ»μ IP μ£Όμλ₯Ό μ¬μ©νμ¬ μΉ μλ²μ μ°κ²°μ νλ κ³Όμ μμ μ΄κΈ° λ°μ΄ν°λ₯Ό μ μ‘νλ κ³Όμ μ μ€μ νκ³ μ΄κΈ°νν΄μ£Όλ μμ μ μ§ννκ² λ©λλ€.
TCP(Transmission Control Protocol) μ°κ²°μ μ€μ νκΈ° μν΄ μλ λ°©λ²μ μνν©λλ€. μ΄λ λ°μ΄ν°μ μ μ‘ μλ, ν¨ν·μ μμ€μ΄λ μ€λ₯ λ°μ‘ λ±μ μ μ΄λ₯Ό νκ² λ©λλ€.
SYN: λΈλΌμ°μ κ° μλ²μ μ°κ²° μμ²μ 보λ λλ€.
SYN-ACK: μλ²κ° μμ²μ μλ½νκ³ μλ΅ν©λλ€.
ACK: λΈλΌμ°μ κ° μλ²μ μλ΅μ νμΈνμ¬ μ°κ²°μ μλ£ν©λλ€.
3. HTTP μμ²
λΈλΌμ°μ λ μλ²μ μ μ₯λ λ°μ΄ν°λ₯Ό μμ²νκ² λλ©° μ΄λ ν΄λΌμ΄μΈνΈμ μλ²κ°μ ν΅μ μ μν΄ HTTP μμ²μ 보λ λλ€. μ΄ μμ²μλ λΈλΌμ°μ μ 보, μμ²ν 리μμ€μ URL λ±μ΄ ν¬ν¨λ©λλ€.
4. μλ² μλ΅
μλ²λ λΈλΌμ°μ μ μμ²μ μ²λ¦¬νκ³ HTTP μλ΅μ 보λ λλ€. μλ΅μλ μμ²ν μΉ νμ΄μ§μ HTML μ½λ, μν μ½λ, ν€λ μ 보 λ±μ΄ ν¬ν¨λ©λλ€.
5. HTML νμ± λ° λ λλ§ (HTML Parsing , Rendering)
μΉνμ΄μ§λ₯Ό λΈλΌμ°μ μ νμνλ κ³Όμ μΌλ‘ HTMLμ μ½λλ₯Ό μ½κ³ λΆμν΄μ μ¬λμ΄ μ΄ν΄ν μ μλ ννλ‘ λ³ννλ κ³Όμ μ λλ€.
λΈλΌμ°μ λ HTML λ¬Έμλ₯Ό νμ±νμ¬ DOM(Document Object Model) νΈλ¦¬ HTML λ¬Έμμ ꡬ쑰λ₯Ό μμ±ν©λλ€. DOM νΈλ¦¬λ HTML λ¬Έμμ ꡬ쑰λ₯Ό νννλ μ½λλ₯Ό κ°κ°μ μμ νν(ν ν°)μΌλ‘ λ³ννκ³ κ΅¬λ¬Έμ λΆμν΄μ νμ±ν©λλ€.
6. CSS μ²λ¦¬
κ΅¬μ‘°κ° νμ±λλ©΄ CSSνμΌμ μ½μ΄ λ€μ¬μ HTMLλ¬Έμμ μ€νμΌμ μ μνκ² λ©λλ€. μ¦ λΈλΌμ°μ λ HTML λ¬Έμμμ CSS νμΌμ μμ²νκ³ , CSSλ₯Ό νμ±νμ¬ μ€νμΌ κ·μΉμ μ μ©ν©λλ€.
μ΄λ μ£Όλ‘ νμ΄μ§μ λμμΈκ³Ό μ€μ μ κ΄λ ¨λ μμ μ μ§ννκ² λ©λλ€. CSS μ½λλ DOM μμμ μ€νμΌμ μ μνλ©°, μ΄ κ³Όμ μμ μ€νμΌ νΈλ¦¬(λλ λ λ νΈλ¦¬)κ° μμ±λ©λλ€.
7. JavaScript μ€ν
μΉνμ΄μ§λ₯Ό λμ μΌλ‘ κΈ°λ₯μ μΆκ°νλ κ³Όμ μΌλ‘ HTMLλ¬Έμμ κΈ°λ₯μ±κ³Ό λμ μ½ν μΈ λ₯Ό μμ±ν©λλ€.λΈλΌμ°μ λ HTML λ¬Έμμ ν¬ν¨λ JavaScriptλ₯Ό νμ±νκ³ μ€νν©λλ€.
JavaScriptλ DOMκ³Ό CSSμ μμ ν μ μμΌλ©°, μ΄λ‘ μΈν΄ νμ΄μ§μ λ΄μ©μ΄λ μ€νμΌμ΄ λμ μΌλ‘ λ³κ²½λ μ μμ΅λλ€.
8. λ λλ§ νΈλ¦¬ κ΅¬μ± (Render Tree )
λΈλΌμ°μ λ DOMκ³Ό CSSOMμ κ²°ν©νμ¬ λ λλ§ νΈλ¦¬λ₯Ό μμ±ν©λλ€. λ λλ§ νΈλ¦¬λ νλ©΄μ μ€μ λ‘ κ·Έλ €μ§ μμμ μ 보λ₯Ό ν¬ν¨ν©λλ€.
9. λ μ΄μμ κ³μ°
λΈλΌμ°μ λ λ λλ§ νΈλ¦¬λ₯Ό κΈ°λ°μΌλ‘ κ° μμμ μ νν μμΉμ ν¬κΈ°λ₯Ό κ³μ°ν©λλ€. μ΄ κ³Όμ μ λ μ΄μμ λλ 리νλ‘μ°λΌκ³ ν©λλ€.
μ΄ κ³Όμ μμ HTMLμ 보μ¬μ£Όκ² λ κ° μμκ° κ³μ°λλ κ³Όμ μΌλ‘, μ΄ κ³Όμ μ΄ λ³΅μ‘νκ² λλ©΄ λ μ΄μμμ΄ νλ€λ¦¬λ λ¬Έμ κ° λ°μνκ² λ©λλ€.
κ²μ μ΅μ νμμ κ°μ₯ μ€μν CLS μΈ‘μ κ°μ΄ μ΄ λΆλΆμμ κ°μ₯ λ§μ λ¬Έμ λ₯Ό μΌμΌν€κ² λ©λλ€. HTML λ¬Έμμ κΈ°λ³Έ λ μ΄μμ λ°©μ μ€ νλ‘μ° λ μ΄μμμμ HTML μμλ€μ΄ λ°°μΉλλ κ³Όμ μμ μ€μ νκ·Έμ μμλ‘ μΈν΄ μ€λ°κΏμ΄ λ°μνλ κ²½μ°μ λ°μμν€μ§ μλ κ²½μ°κ° μμ΅λλ€.
λΈλ‘ μμ: κΈ°λ³Έμ μΌλ‘ μ 체 λλΉλ₯Ό μ°¨μ§νλ©°, μ€λ°κΏμ λ°μμν΅λλ€.
μΈλΌμΈ μμ: κΈ°λ³Έμ μΌλ‘ μ½ν μΈ μ λλΉμ λ§μΆμ΄ λ°°μΉλλ©°, μ€λ°κΏμ λ°μμν€μ§ μμ΅λλ€
10. νμΈν (Painting)
λΈλΌμ°μ λ κ° μμλ₯Ό νλ©΄μ 그립λλ€. μ΄ κ³Όμ μμλ μμ, ν μ€νΈ, μ΄λ―Έμ§ λ±μ΄ μ€μ λ‘ λ λλ§λ©λλ€.
11. μ»΄ν¬μ§ν (Compositing)
μ»΄ν¬μ§ν μ κ°κ°μ λ λλ§λ μμλ₯Ό κ²°ν©νμ¬ μ΅μ’ μ μΌλ‘ νλ©΄μ νμνλ κ³Όμ μ λλ€.볡μ‘ν λ μ΄μμμ κ²½μ°, λΈλΌμ°μ λ μ¬λ¬ λ μ΄μ΄λ‘ ꡬμ±λ νμ΄μ§λ₯Ό μ΄λ μ²λ¦¬νλ©°. κ° λ μ΄μ΄λ λ 립μ μΌλ‘ λ λλ§λλ©°, μ΅μ’ μ μΌλ‘ νλ©΄μ νμλκΈ° μ μ ν©μ³μ§λλ€.
12. νμ΄μ§ λ‘λ©
λͺ¨λ 리μμ€κ° λ‘λλκ³ , JavaScriptκ° μ€νλκ³ , νμ΄μ§κ° λ λλ§λλ©΄μ λΈλΌμ°μ μ νμ΄μ§μ λ‘λ©μ΄ μλ£λλ μμ μ λλ€.