๐Ÿ“ ์›น ๊ทธ๋ž˜ํ”ฝ์Šค, ๋ Œ๋”๋ง ๊ณผ์ •, ๋ Œ๋”๋ง ์ตœ์ ํ™”

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ทธ๋ž˜ํ”ฝ์ด ๋ฌด์—‡์ธ์ง€์™€ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •, ๋ Œ๋”๋ง ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ , ๊ทธ๋ž˜ํ”ฝ์Šค์— ๊ด€๋ จ๋œ ์šฉ์–ด๋“ค์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.


1. ๊ทธ๋ž˜ํ”ฝ์ด๋ž€?

๊ทธ๋ž˜ํ”ฝ์€ ๋ฌด์—‡์ผ๊นŒ? ์œ„ํ‚ค๋ฐฑ๊ณผ์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•œ๋‹ค.

  • ๊ทธ๋ž˜ํ”ฝ : ๊ทธ๋ฆฌ์Šค์–ด ๋‚ฑ๋ง ฮณฯฮฑฯ†ฮนฮบฯŒฯ‚(๊ทธ๋ผํ”ผ์–ด)์—์„œ ์˜จ ๊ฒƒ์œผ๋กœ ์–ด๋– ํ•œ ํ‘œ๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ์‹œ๊ฐ์ ์ธ ํ‘œํ˜„
  • ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์Šค : ์ด๋Ÿฌํ•œ ์‹œ๊ฐ์ ํ‘œํ˜„์„ ์ปดํ“จํ„ฐ์—์„œ ์ฒ˜๋ฆฌํ•˜๊ณ  ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ฒƒ (์ตœ๊ทผ์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ 3D ์ž‘์—…์„ ๋ถ€๋ฅผ ๋•Œ ๋งŽ์ด ์“ฐ์ธ๋‹ค.)
  • ์›น ๊ทธ๋ž˜ํ”ฝ : ์›น์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ข‹์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์‹œ๊ฐ์  ํ‘œํ˜„

๋‹ค์‹œ๋งํ•ด, ๊ทธ๋ž˜ํ”ฝ์ด๋ž€ ์ง€๋„, ์‚ฌ์ง„, ๋””์ž์ธ ๋ฐ ํŒจํ„ด, ๊ฐ€๊ณ„๋„, ๋‹ค์ด์–ด๊ทธ๋žจ, ๊ฑด์ถ• ๋˜๋Š” ์—”์ง€๋‹ˆ์–ด๋ง ์ฒญ์‚ฌ์ง„, ๋ง‰๋Œ€ ์ฐจํŠธ ๋ฐ ์›ํ˜• ์ฐจํŠธ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ํšŒ๋กœ๋„, ๋ผ์ธ ์•„ํŠธ, ํ”Œ๋กœ์ฐจํŠธ ๋ฐ ๊ธฐํƒ€ ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€ ํ˜•์‹ ๋“ฑ ๋ชจ๋“  ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ์‹œ๊ฐ์  ํ‘œํ˜„๋“ค์„ ์˜๋ฏธํ•˜๋ฉฐ, ์šฐ๋ฆฌ๊ฐ€ ์›น์„ ํ†ตํ•ด์„œ ๋ณด๋Š” ๊ฒƒ, ์Šคํฌ๋ฆฐ์„ ํ†ตํ•ด์„œ ๋ณด๋Š” ๊ฒƒ ๋ชจ๋‘ ๋””์ง€ํ„ธ๋กœ ๋งŒ๋“ค์–ด์ง„ ๊ทธ๋ž˜ํ”ฝ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์›น์˜ ๊ฒฝ์šฐ์—๋Š” ์›น ํŽ˜์ด์ง€ ๋‚ด๋ถ€์— ์žˆ๋Š” ํ…์ŠคํŠธ, ๋ฒ„ํŠผ, ์บ”๋ฒ„์Šค ๋“ฑ ๋ชจ๋‘ DOM ์—˜๋ฆฌ๋จผํŠธ๋“ค์˜ ์ •๋ณด๋“ค์— ์˜ํ•ด ์‹œ๊ฐ์ ์œผ๋กœ ๋ Œ๋”๋ง ๋œ ๊ทธ๋ž˜ํ”ฝ๋“ค์ด๋ฉฐ, ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์™€ ์—”์ง„์˜ ๋ฐœ๋‹ฌ, ๊ทธ๋ฆฌ๊ณ  ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ , ์†”๋ฃจ์…˜์˜ ๋“ฑ์žฅ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์ด๋Ÿฌํ•œ ๊ทธ๋ž˜ํ”ฝ์„ ์ „๋ณด๋‹ค ์‰ฝ๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

๋ Œ๋”๋ง : ์ปดํ“จํ„ฐ ํ”„๋กœ๊ทธ๋žจ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋ธ ๋˜๋Š” ์ด๋“ค์„ ๋ชจ์•„๋†“์€ ์žฅ๋ฉด์ธ ์”ฌ ํŒŒ์ผ(scene file)๋กœ๋ถ€ํ„ฐ ์˜์ƒ ์„ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ณผ์ •

์˜์ƒ์€ ๋น›์˜ ๊ตด์ ˆ์ด๋‚˜ ๋ฐ˜์‚ฌ ๋“ฑ์— ์˜ํ•˜์—ฌ ์ด๋ฃจ์–ด์ง„ ๋ฌผ์ฒด์˜ ์ƒ(ๅƒ)์„ ์˜๋ฏธํ•˜๋ฉฐ, ๊ทผ๋ž˜์—๋Š” ๋™์˜์ƒ(video)๋ผ๋Š” ์˜๋ฏธ๋กœ ์“ฐ์ด๊ณ  ์žˆ์ง€๋งŒ picture, image๊ฐ€ ๋งž๋Š” ์˜๋ฏธ์ด๋‹ค.

2. ๋ Œ๋”๋ง

๋ Œ๋”๋ง์˜ ์ •์˜๋Š” ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด, ์˜์ƒ์„ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ณผ์ •์„ ๋งํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, ๋™์˜์ƒ,์‚ฌ์ง„ ํŽธ์ง‘ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ฒฝ์šฐ, ์žฌ๊ฐ€๊ณตํ•œ ๊ทธ๋ž˜ํ”ฝ์„ ์‹ค์ œ ํŒŒ์ผ๋กœ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ์˜๋ฏธํ•˜๊ณ  ์›น์˜ ๊ฒฝ์šฐ DOM ์ฝ˜ํ…์ธ ๋“ค์„ HTML๊ณผ CSS๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ํ™”๋ฉด์— ํ‘œ์‹œ๋Š” ๊ณผ์ •์„ ์˜๋ฏธํ•œ๋‹ค.

๊ทธ๋Ÿผ ์›น์—์„œ์˜ ๋ Œ๋”๋ง์€ ์–ด๋–ค ๊ณผ์ •/์›๋ฆฌ๋กœ ์ผ์–ด๋‚ ๊นŒ?

๋ธŒ๋ผ์šฐ์ €์—๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๋ Œ๋”๋ง์—”์ง„์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์–ด์„œ, ์ „๋‹ฌ ๋ฐ›์€ HTML, XML ํŒŒ์ผ์„ ํŒŒ์‹ฑํ•˜๊ณ , DOMํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  CSS์™€ ํ•จ๊ป˜ RenderํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค์Œ, ํ™”๋ฉด์„ ๊ทธ๋ ค์ค€๋‹ค.

rendering2

๐Ÿ‘† webkit ๋ Œ๋”๋ง ์—”์ง„์˜ ๊ตฌ์กฐ

rendering

๊ทธ๋ฆฌ๊ณ  ๋ธŒ๋ผ์šฐ์ € ํ”Œ๋žซํผ์ด ๋‹ค์–‘ํ•˜๋“ฏ, ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์‚ฌ์šฉํ•˜๋Š” ๋ Œ๋”๋ง ์—”์ง„ ๋˜ํ•œ ๋‹ค์–‘ํ•˜๋‹ค.

  • ํฌ๋กฌ : Blink (Google)
  • ์‚ฌํŒŒ๋ฆฌ : WebKit (Apple)
  • ํŒŒ์ด์–ดํญ์Šค : Gecko (Mozilla)

ํฌ๋กฌ์˜ ๊ฒฝ์šฐ, โ€œWebKit์ด ์—ฌ๋Ÿฌ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์ง€์›ํ•˜๋ฉด์„œ WebKit๊ณผ ํฌ๋กœ๋ฏธ์›€ ํ”„๋กœ์ ํŠธ์˜ ๋ณต์žก์„ฑ์ด ์ฆ๊ฐ€ํ–ˆ๊ณ , ์ด์— ๋”ฐ๋ผ ์ง‘๋‹จ ํ˜์‹  ์†๋„๊ฐ€ ์ €ํ•˜๋˜์—ˆ๋‹คโ€๋ผ๋Š” ์ด์œ ๋กœ 2015๋…„๋ถ€ํ„ฐ WebKit์„ ๋Œ€์ฒดํ•˜๋Š” Blink๋ผ๋Š” WebKit์—์„œ ํŒŒ์ƒ๋œ ์ƒˆ๋กœ์šด ์›ฌ ๋ Œ๋”๋ง ์—”์ง„์„ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

3. ๋ Œ๋”๋ง ๊ณผ์ •

โ€œ์˜ค๋Š˜๋‚  ์›น ์‚ฌ์šฉ์ž๋Š” ๋ฐฉ๋ฌธํ•˜๋Š” ํŽ˜์ด์ง€๊ฐ€ ๋Œ€ํ™”ํ˜•์ด๊ณ  ์›ํ™œํžˆ ์ž‘๋™ํ•  ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜๋ฏ€๋กœ ๊ฐœ๋ฐœ์ž๋Š” ์—ฌ๊ธฐ์— ์‹œ๊ฐ„๊ณผ ๋…ธ๋ ฅ์„ ์ง‘์ค‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋Š” ๋น ๋ฅด๊ฒŒ ๋กœ๋“œ๋  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์›ํ™œํžˆ ์‹คํ–‰๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๋ฒผ์šด ์†๊ฐ€๋ฝ ๋™์ž‘๋งŒ์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์Šคํฌ๋กคํ•  ์ˆ˜ ์žˆ๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ์ƒํ˜ธ์ž‘์šฉ์ด ๋งค๋„๋Ÿฌ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์„ฑ๋Šฅ์ด ์šฐ์ˆ˜ํ•œ ์‚ฌ์ดํŠธ์™€ ์•ฑ์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ CSS๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜๊ณ  ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ์™€ ํฌํ•จ๋œ ํƒ€์‚ฌ ์ฝ”๋“œ๊ฐ€ ์ตœ๋Œ€ํ•œ ํšจ์œจ์ ์œผ๋กœ ์‹คํ–‰๋˜๋„๋ก ๋ณด์žฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.โ€ - Paul Lewis

๋ธŒ๋ผ์šฐ์ € ์—”์ง„์˜ ์„ฑ๋Šฅ์ด ์ข‹์•„์กŒ๋‹ค๊ณ ํ•ด๋„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ข€๋” ๋งค๋„๋Ÿฌ์šด, ๋งŒ์กฑ์Šค๋Ÿฌ์šด ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ ค๋ฉด ๋ Œ๋”๋ง ์ตœ์ ํ™” ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ Œ๋”๋ง ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด์„œ๋Š” ๋ Œ๋”๋ง ๊ณผ์ •์„ ์ •ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ํ•„์š”ํ•˜๋‹ค.

๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.

1. DOM TREE ์ƒ์„ฑ

full process

๐Ÿ‘† ๋ฐ”์ดํŠธ โ†’ ๋ฌธ์ž โ†’ ํ† ํฐ โ†’ ๋…ธ๋“œ โ†’ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)

์ด๋ฏธ์ง€ ์ถœ์ฒ˜ : ๊ฐ์ฒด ๋ชจ๋ธ ์ƒ์„ฑ

  1. ๋ณ€ํ™˜: HTML์˜ ์›์‹œ ๋ฐ”์ดํŠธ๋ฅผ ์ฝ์–ด์™€์„œ, ํ•ด๋‹น ํŒŒ์ผ์— ๋Œ€ํ•ด ์ง€์ •๋œ ์ธ์ฝ”๋”ฉ(์˜ˆ: UTF-8)์— ๋”ฐ๋ผ ๊ฐœ๋ณ„ ๋ฌธ์ž๋กœ ๋ณ€ํ™˜
  2. ํ† ํฐํ™”: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฌธ์ž์—ด์„ W3C HTML5 ํ‘œ์ค€์— ์ง€์ •๋œ ๊ณ ์œ  ํ† ํฐ์œผ๋กœ ๋ณ€ํ™˜
  3. ๋ ‰์‹ฑ: ๋ณ€ํ™˜๋œ ํ† ํฐ์„ ํ•ด๋‹น ์†์„ฑ ๋ฐ ๊ทœ์น™์„ ์ •์˜ํ•˜๋Š” โ€˜๊ฐ์ฒดโ€™๋กœ ๋ณ€ํ™˜
  4. DOM ์ƒ์„ฑ: ๋งˆ์ง€๋ง‰์œผ๋กœ, ๊ฐ์ฒด๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ •์˜ํ•˜๋Š” ํŠธ๋ฆฌ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์˜ DOM Tree ์ƒ์„ฑ.

2. CSSOM TREE ์ƒ์„ฑ

cssom construction

cssom tree

DOM TREE ์ƒ์„ฑ๊ณผ ๋น„์Šทํ•œ ๋ฐฉ์‹์œผ๋กœ CSS ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์ฐธ์กฐํ•ด์„œ CSSOM TREE๋ฅผ ์ƒ์„ฑ

DOM TREE์™€ CSSOM TREE๋Š” ์„œ๋กœ ๋…๋ฆฝ์ ์ธ ๊ฐ์ฒด์ด๋ฉฐ, DOM TREE๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ์„ค๋ช…ํ•˜๊ณ , CSSOM TREE๋Š” ๋ฌธ์„œ์— ์ ์šฉ๋˜์–ด์•ผ ํ•˜๋Š” ์Šคํƒ€์ผ ๊ทœ์น™์„ ์„ค๋ช…ํ•œ๋‹ค.

3. Rendering TREE ์ƒ์„ฑ

render tree construction

  1. DOM ๋ฐ CSSOM ํŠธ๋ฆฌ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋ฅผ ํ˜•์„ฑ
  2. ๋ Œ๋”๋ง ํŠธ๋ฆฌ์—๋Š” ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋…ธ๋“œ๋งŒ ํฌํ•จ
  3. ๋ ˆ์ด์•„์›ƒ (Reflow) ํ”„๋กœ์„ธ์Šค๋ฅผ ํ†ตํ•ด ๊ฐ ๊ฐ์ฒด์˜ ์ •ํ™•ํ•œ ์œ„์น˜ ๋ฐ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐ
  4. ํŽ˜์ธํŠธ (Repaint) ํ”„๋กœ์„ธ์Šค๋ฅผ ํ†ตํ•ด ํ”ฝ์…€์„ ํ™”๋ฉด์— ๋ Œ๋”๋ง

4. ๋ Œ๋”๋ง ์ตœ์ ํ™”

๋ Œ๋”๋ง ์ตœ์ ํ™”๋Š” ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๋ Œ๋”๋ง ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด์„œ๋Š” ๋ ˆ์ด์•„์›ƒ (Reflow) ํ”„๋กœ์„ธ์Šค์™€ ํŽ˜์ธํŠธ (Repaint) ํ”„๋กœ์„ธ์Šค ๊ณผ์ •์„ ์ตœ์†Œํ™”ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

1. ๋ ˆ์ด์•„์›ƒ (Reflow)์ด ๋ฐœ์ƒํ•˜๋Š” CSS ์†์„ฑ ์‚ฌ์šฉ ํ”ผํ•˜๊ธฐ

Reflow๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” CSS ์†์„ฑ(left, top, margin, padding, border, width, height, ๋“ฑ..)๋ณด๋‹ค transform๊ณผ ๊ฐ™์€ Repaint๋งŒ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์†์„ฑ ์‚ฌ์šฉํ•˜๊ธฐ

๋˜ํ•œ visibilty: invisible๋Š” ๋ ˆ์ด์•„์›ƒ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜์ง€๋งŒ display: none์€ ๋ ˆ์ด์•„์›ƒ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š์•„ rendering tree ํ˜•์„ฑ์— ์ œ์™ธ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ์„ ์œ„ํ•ด ํ›„์ž๋ฅผ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

2. ๊ฐ€๋Šฅํ•œ ์ตœํ•˜์œ„ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝ

์ƒ๋‹จ์˜ ์—˜๋ฆฌ๋จผํŠธ ์†์„ฑ ๋ณ€๊ฒฝ์€ ํ•˜์œ„ ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ์—๋„ ์˜ํ–ฅ์„ ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•œ ์ตœํ•˜์œ„ ์—˜๋ฆฌ๋จผํŠธ์˜ ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ

3. DOM TREE ๊นŠ์ด ์ตœ์†Œํ™” / ์˜ํ–ฅ ๋ฐ›๋Š” ์—˜๋ฆฌ๋จผํŠธ ์ œํ•œํ•˜๊ธฐ

DOMT TREE์˜ ๊นŠ์ด๋ฅผ ์ตœ์†Œํ™”ํ•˜์—ฌ ํƒ์ƒ‰์‹œ๊ฐ„์„ ์ค„์ด๊ฑฐ๋‚˜ position: absolute ๋˜๋Š” position: fixed ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜ํ–ฅ ๋ฐ›๋Š” ์—˜๋ฆฌ๋จผํŠธ ์ œํ•œํ•˜๊ธฐ

4. ํ”„๋ ˆ์ž„ ์ค„์ด๊ธฐ / ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๊ฐ€๋Šฅํ•œ CSS ์ด์šฉ

ํ•œ ํ”„๋ ˆ์ž„ ์ฒ˜๋ฆฌ๊ฐ€ 16ms(60fps) ๋‚ด๋กœ ์™„๋ฃŒ๋˜์–ด์•ผ ๋ Œ๋”๋ง ์‹œ ๋Š๊ธฐ๋Š” ํ˜„์ƒ ์—†์ด ์ž์—ฐ์Šค๋Ÿฌ์šด ๋ Œ๋”๋ง์„ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ๊ณ , ์• ๋‹ˆ๋ฉ”์ด์…˜์€ JavaScript๋ณด๋‹ค CSS์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

5. ๊ทธ๋ž˜ํ”ฝ๊ณผ ๊ด€๋ จ๋œ ๋ถ„์•ผ๋“ค

๋งˆ์ง€๋ง‰์œผ๋กœ ๊ทธ๋ž˜ํ”ฝ๊ณผ ๊ด€๋ จ๋œ ์—ฌ๋Ÿฌ ์šฉ์–ด๋“ค์ด ์žˆ๋Š”๋ฐ ์ด๋ฅผ ์ •๋ฆฌํ•˜๊ณ  ๋งˆ๋ฌด๋ฆฌํ•˜๋ คํ•œ๋‹ค.

graphics2

  1. ์˜์ƒ์ฒ˜๋ฆฌ : ์ปดํ“จํ„ฐ๋ฅผ ํ†ตํ•ด ์˜์ƒ์„ ์ฒ˜๋ฆฌํ•˜์—ฌ ๋‹ค๋ฅธ ์˜์ƒ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ.
  2. ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” : ์ˆ˜์น˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅ ๋ฐ›์•„ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„๋  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •.
  3. ์ปดํ“จํ„ฐ ๋น„์ „ : ์˜์ƒ์„ ๋ถ„์„ํ•˜์—ฌ ์ดํ•ดํ•˜๋Š” ๊ฒƒ.
  4. VR(๊ฐ€์ƒํ˜„์‹ค) : ์ปดํ“จํ„ฐ ๋“ฑ์„ ์‚ฌ์šฉํ•œ ์ธ๊ณต์ ์ธ ๊ธฐ์ˆ ๋กœ ๋งŒ๋“ค์–ด๋‚ธ ์‹ค์ œ์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ ์‹ค์ œ๊ฐ€ ์•„๋‹Œ ์–ด๋–ค ํŠน์ •ํ•œ ํ™˜๊ฒฝ์ด๋‚˜ ์ƒํ™ฉ ํ˜น์€ ๊ทธ ๊ธฐ์ˆ 
  5. AR(์ฆ๊ฐ•ํ˜„์‹ค) : VR(๊ฐ€์ƒํ˜„์‹ค)์˜ ํ•œ ๋ถ„์•ผ๋กœ ์‹ค์ œ๋กœ ์กด์žฌํ•˜๋Š” ํ™˜๊ฒฝ์— ๊ฐ€์ƒ์˜ ์‚ฌ๋ฌผ์ด๋‚˜ ์ •๋ณด๋ฅผ ํ•ฉ์„ฑํ•˜์—ฌ ๋งˆ์น˜ ์›๋ž˜์˜ ํ™˜๊ฒฝ์— ์กด์žฌํ•˜๋Š” ์‚ฌ๋ฌผ์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก ํ•˜๋Š” ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ ๊ธฐ๋ฒ•.

6. ์ฐธ๊ณ ์ž๋ฃŒ

์ฐธ๊ณ ์ž๋ฃŒ๋Š” โค๏ธWeb Graphics Archiveโค๏ธ ์— ์—…๋กœ๋“œ ๋˜์—ˆ์œผ๋‹ˆ ์ฐธ๊ณ ๋ฐ”๋ž๋‹ˆ๋‹ค.

Computer Graphics

Browser Rendering


Written by@taenyKim
์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ / Learn in Public

GitHubFacebook