CSS View Transitions์ ์ฑ๋ฅ ์ํฅ์ ํ๊ตฌํ๊ณ , ์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋์ ์ด๊ฒ์ด ์ ์ธ๊ณ ์ฌ์ฉ์์ ๊ฒฝํ์ ๋ฏธ์น๋ ์ํฅ์ ์ด์ ์ ๋ง์ถฅ๋๋ค.
CSS View Transition ํด๋์ค ์ฑ๋ฅ ์ํฅ: ์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฑ๋ฅ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ฐ๋ฆฌ๊ฐ ๋ ๋์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค๊ณ ์ ๋ ธ๋ ฅํจ์ ๋ฐ๋ผ, ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ์๋ก์ด CSS ๊ธฐ๋ฅ๋ค์ด ๋ฑ์ฅํฉ๋๋ค. ๊ทธ์ค ํ๋๊ฐ CSS View Transitions API๋ก, ์ด๋ ์๋ก ๋ค๋ฅธ DOM ์ํ ๊ฐ์ ๋ถ๋๋ฝ๊ณ ์ ๊ตํ ์ ๋๋ฉ์ด์ ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ํ์ ์ ์ธ ๊ธฐ๋ฅ์ ๋๋ค. ์๊ฐ์ ์ด์ ์ ๋ถ์ธํ ์ ์์ง๋ง, ํนํ ์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ์ ๊ด๋ จ๋ ์ค๋ฒํค๋์ ๋ํ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ์ํฅ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ด ๊ธ์์๋ CSS View Transitions์ ์ฑ๋ฅ ์ํฅ์ ๋ํด ๊น์ด ํ๊ณ ๋ค๋ฉฐ, ํนํ ์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋์ ์ด์ ์ ๋ง์ถฅ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฌํ ์ ํ์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ๋์ง, ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๊ธฐ์ฌํ๋ ์์ธ์ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ๊ธฐ๊ธฐ๋ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ด๊ณ์์ด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด View Transitions๋ฅผ ์ต์ ํํ๋ ์ ๋ต์ ๋ํด ํ๊ตฌํ ๊ฒ์ ๋๋ค.
CSS View Transitions ์ดํดํ๊ธฐ
์ฑ๋ฅ ์ธก๋ฉด์ ๋ถ์ํ๊ธฐ ์ ์, CSS View Transitions๊ฐ ๋ฌด์์ธ์ง ๊ฐ๋ตํ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์น ํ์ด์ง ๋ด์์ ์ ๋์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๋ณํ๋ฅผ ๋ง๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ก ์๊ฐ๋ View Transitions๋ ๊ฐ๋ฐ์๊ฐ DOM์ด ๋ณ๊ฒฝ๋ ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ํ์ด์ง ์ํ ๊ฐ์ ๋จ์ํ ํฌ๋ก์คํ์ด๋๋ถํฐ ์์๊ฐ ํ ์์น๋ ์คํ์ผ์์ ๋ค๋ฅธ ์์น๋ ์คํ์ผ๋ก ๋ถ๋๋ฝ๊ฒ ๋ณํ๋๋ ๋ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํฉ๋๋ค. ํต์ฌ ์์ด๋์ด๋ ๋ DOM ์ํ ๊ฐ์ ์ฐจ์ด์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ์ฌ ์ฐ์์ฑ๊ณผ ์ธ๋ จ๋ฏธ๋ฅผ ๋ง๋ค์ด๋ด๋ ๊ฒ์ ๋๋ค.
์ด API๋ ์ฃผ๋ก ๋ณ๊ฒฝ ์ DOM์ ์ค๋ ์ท๊ณผ ๋ณ๊ฒฝ ํ์ ์ค๋ ์ท์ ์บก์ฒํ๋ ๋ฐฉ์์ผ๋ก ์๋ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ธ๋ผ์ฐ์ ๋ ์ด ๋ ์ํ ์ฌ์ด๋ฅผ ๋ณด๊ฐํ์ฌ CSS ์ ๋๋ฉ์ด์ ๊ณผ ํธ๋์ง์ ์ ์ ์ฉํด ์๊ฐ์ ํจ๊ณผ๋ฅผ ๋ง๋ญ๋๋ค. ์ด๋ฌํ ์ ์ธ์ ์ ๊ทผ ๋ฐฉ์์ ์ด์ ์๋ ๋ณต์กํ ์๋ฐ์คํฌ๋ฆฝํธ ์กฐ์์ด ํ์ํ๋ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ๋จ์ํํฉ๋๋ค.
์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ์ ๋ฉ์ปค๋์ฆ
CSS ์ ๋๋ฉ์ด์ ๊ณผ ํธ๋์ง์ ์ ์ค์ฌ์๋ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง์ด ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ด๋ ํธ๋์ง์ ์ ์ ๋ฐํ๋ ์คํ์ผ ๋ณ๊ฒฝ์ด ๋ฐ์ํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๋ค์์ ์ํํด์ผ ํฉ๋๋ค:
- ๋ณ๊ฒฝ ์ฌํญ ์๋ณ: ์ด๋ค ์์์ ์์ฑ์ด ์์ ๋์๋์ง ๊ฐ์งํฉ๋๋ค.
- ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ ๊ณ์ฐ: ์์ ๋ฐ ๋ ๊ฐ, ์ง์ ์๊ฐ, ์ด์ง(easing) ๋ฐ ๊ธฐํ ์ ๋๋ฉ์ด์ ๋งค๊ฐ๋ณ์๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.
- ์ค๊ฐ ์คํ์ผ ์ ์ฉ: ์ ๋๋ฉ์ด์ ์ ๊ฐ ๋จ๊ณ์์ ์ค๊ฐ ์คํ์ผ์ ๊ณ์ฐํ๊ณ ์์์ ์ ์ฉํฉ๋๋ค.
- ํ์ด์ง ๋ค์ ๋ ๋๋ง: ์ํฅ์ ๋ฐ๋ ํ์ด์ง ๋ถ๋ถ์ ์๊ฐ์ ์ถ๋ ฅ์ ์ ๋ฐ์ดํธํฉ๋๋ค.
CSS View Transitions์ ๋งฅ๋ฝ์์ ์ด ๊ณผ์ ์ ์ฆํญ๋ฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ๋ณธ์ง์ ์ผ๋ก ๋ ๊ฐ์ ์ค๋ ์ท์ ๊ด๋ฆฌํ๊ณ ๊ทธ ์ฐจ์ด์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํด์ผ ํฉ๋๋ค. ์ฌ๊ธฐ์๋ '์ด์ ' ์ํ์ '์๋ก์ด' ์ํ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ ์์๋ฅผ ๋ง๋ค๊ณ , ์ ๋๋ฉ์ด์ ํด๋์ค๋ฅผ ์ ์ฉํ ๋ค์, ์ด ๊ฐ์ ์ํ๋ค ์ฌ์ด๋ฅผ ๋ณด๊ฐํ๋ ์์ ์ด ํฌํจ๋ฉ๋๋ค. '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ'๋ View Transition์ ์ ๋๋ฉ์ด์ ์ ์ ์ํ๋ CSS ํด๋์ค๋ฅผ ํด์, ์ ์ฉ ๋ฐ ๊ด๋ฆฌํ๋ ๋ธ๋ผ์ฐ์ ์ ์์ ์ ์๋ฏธํฉ๋๋ค.
์ ๋๋ฉ์ด์ ํธ๋ฆฌ๊ฑฐ๋ก์์ CSS ํด๋์ค
์ผ๋ฐ์ ์ผ๋ก CSS View Transitions๋ ์์์ ํด๋์ค๋ฅผ ์ถ๊ฐํ๊ณ ์ ๊ฑฐํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํด ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํ์ด์ง ๊ฐ ์ด๋์ด๋ ์ฝํ
์ธ ์
๋ฐ์ดํธ ์, ์คํฌ๋ฆฝํธ๋ ๊ด๋ จ ์์์ view-transition-new ๋๋ view-transition-old์ ๊ฐ์ ํด๋์ค๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ์ด๋ฌํ ํด๋์ค์๋ ์ ๋๋ฉ์ด์
์์ฑ(์: transition, animation, @keyframes)์ ์ ์ํ๋ ์ฐ๊ด๋ CSS ๊ท์น์ด ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ์ ์ญํ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ด๋ฌํ CSS ๊ท์น์ ํ์ฑํฉ๋๋ค.
- ๊ฐ๊ฐ์ ์์์ ๊ท์น์ ์ ์ฉํฉ๋๋ค.
- ์ด ๊ท์น์ ๊ธฐ๋ฐํ์ฌ ์ ๋๋ฉ์ด์ ์ ํ์ ๋ฃ๊ณ ์คํํฉ๋๋ค.
์ด ๊ณผ์ ์ ํนํ ์ฌ๋ฌ ์์๊ฐ ๋์์ ์ ๋๋ฉ์ด์ ๋๊ฑฐ๋ ์ ๋๋ฉ์ด์ ์ด ๋ณต์กํ ๋ ์๋นํ ๊ณ์ฐ์ ์๋ฐํฉ๋๋ค.
์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์
View Transitions๋ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ์ง๋ง, ์ ์คํ๊ฒ ๊ด๋ฆฌํ์ง ์์ผ๋ฉด ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ฌธ์ ์ ์ฃผ์ ์์ธ์ ํธ๋์ง์ ์ ํ์ํ ์๋ง์ ์คํ์ผ ๋ณ๊ฒฝ ๋ฐ ์ ๋๋ฉ์ด์ ๊ณ์ฐ ์ฒ๋ฆฌ์ ๊ด๋ จ๋ ์ค๋ฒํค๋์ ๋๋ค.
1. ๋ฌด๊ฑฐ์ด CSS ๊ท์น ์ธํธ
๋ณต์กํ View Transitions๋ ์ข ์ข ์ ๊ตํ CSS๋ฅผ ํฌํจํฉ๋๋ค. ์๋ง์ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํด์ผ ํ๊ณ ๊ฐ ์ ๋๋ฉ์ด์ ์ ์์ธํ `@keyframes`๋ ๊ธด `transition` ์์ฑ์ด ํ์ํ ๊ฒฝ์ฐ, CSS ํ์ผ ํฌ๊ธฐ๊ฐ ์ฆ๊ฐํ ์ ์์ต๋๋ค. ๋ ์ค์ํ ๊ฒ์, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ํฐ ๊ท์น ์ธํธ๋ฅผ ํ์ฑํ๊ณ ์ ์งํด์ผ ํ๋ค๋ ์ ์ ๋๋ค. ํธ๋์ง์ ์ด ํธ๋ฆฌ๊ฑฐ๋๋ฉด, ๋ ๋๋ง ์์ง์ ์ด๋ฌํ ๊ท์น๋ค์ ์ ์ ์ด ๋ค์ ธ ๊ด๋ จ ์์์ ์ฌ๋ฐ๋ฅธ ๊ท์น์ ์ ์ฉํด์ผ ํฉ๋๋ค.
์์: ์นด๋ ๋ชฉ๋ก์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๋ ๊ฒ์ ์์ํด ๋ณด์ธ์. ๊ฐ ์นด๋์ ๊ณ ์ ํ ์์ฑ์ ๊ฐ์ง ์ง์ ๋ฐ ํด์ฅ ์ ๋๋ฉ์ด์ ์ด ์๋ค๋ฉด, CSS๋ ๋งค์ฐ ๋ฐฉ๋ํด์ง ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ํธ๋์ง์ ๋์ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ฑฐ๋ ๋๊ฐ๋ ๊ฐ ์นด๋์ ์ด๋ฌํ ๊ท์น์ ์ ์ฉํด์ผ ํฉ๋๋ค.
2. ๋ง์ ์์ ์ ๋๋ฉ์ด์ ์์
๋ง์ ์์๋ฅผ ๋์์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ๋ ๋๋ง ์์ง์ ์๋นํ ๋ถ๋ด์ ์ค๋๋ค. ๊ฐ ์ ๋๋ฉ์ด์ ์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ค๊ฐ ์ํ๋ฅผ ๊ณ์ฐํ๊ณ , ๋ ์ด์์์ ์ ๋ฐ์ดํธํ๊ณ (ํ์ํ ๊ฒฝ์ฐ), ํ๋ฉด์ ๋ค์ ๊ทธ๋ฆฌ๋๋ก ์๊ตฌํฉ๋๋ค. ์ด๋ ํนํ ์ ์ฌ์ ๊ธฐ๊ธฐ์์ ํ๋ ์ ๋๋กญ๊ณผ ๋๋ฆฐ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ๊ด์ : ๋ง์ ์ง์ญ์์ ์ฌ์ฉ์๋ค์ ๋ค์ํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ๊ฐ์ง ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์ ๋๋ฆฐ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ ํตํด ์น์ ์ ์ํฉ๋๋ค. ๊ณ ์ฌ์ ๋ฐ์คํฌํฑ์์๋ ๋ถ๋๋ฝ๊ฒ ๋ณด์ด๋ ํธ๋์ง์ ์ด, ๋ชจ๋ฐ์ผ ์ธํ๋ผ๊ฐ ๋ ๋ฐ๋ฌ๋ ๊ตญ๊ฐ์ ์ค์ ๊ฐ ์ค๋งํธํฐ์์๋ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๊ฑฐ๋ ์์ ํ ์คํจํ ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ํ ์์์ ์์ด ๊ธฐ๊ธฐ์ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ์ด๊ณผํ ๋ '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ'๋ ๋ณ๋ชฉ ํ์์ด ๋ฉ๋๋ค.
3. ๋ณต์กํ ์ ๋๋ฉ์ด์ ๊ณผ ์ด์ง ํจ์
์ฌ์ฉ์ ์ง์ ์ด์ง ํจ์๋ ๋ณต์กํ ์ ๋๋ฉ์ด์ ๊ฒฝ๋ก(์: ์ ๊ตํ `cubic-bezier` ๊ณก์ ๋๋ `spring` ๋ฌผ๋ฆฌ)๋ ์๋ฆ๋ค์ด ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ง๋ง, ๋ ๋ง์ ๊ณ์ฐ ๋ฆฌ์์ค๋ฅผ ์๊ตฌํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฌํ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ์ ํํ๊ฒ ๋ ๋๋งํ๊ธฐ ์ํด ํ๋ ์๋น ๋ ๋ง์ ๊ณ์ฐ์ ์ํํด์ผ ํฉ๋๋ค. View Transitions์ ๊ฒฝ์ฐ, ์ด๋ฌํ ๋ณต์ก์ฑ์ ์ ์ฌ์ ์ผ๋ก ๋ง์ ์์์ ๋์์ ์ ์ฉ๋๊ธฐ ๋๋ฌธ์ ๊ฐ์ค๋ฉ๋๋ค.
4. ๋ ์ด์์ ์ด๋ ๋ฐ ๋ฆฌํ๋ก์ฐ
๋ ์ด์์ ๋ณ๊ฒฝ(์: ์์์ ํฌ๊ธฐ, ์์น)์ ํฌํจํ๋ ์ ๋๋ฉ์ด์ ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. View Transition์ผ๋ก ์ธํด ์์์ ์์น๊ฐ ๊ทน์ ์ผ๋ก ๋ฐ๋๋ฉด, ๋ธ๋ผ์ฐ์ ๋ ํ์ด์ง์ ์๋น ๋ถ๋ถ์ ๋ํ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํด์ผ ํ๋ฉฐ, ์ด๋ ์ฃผ์ ์ฑ๋ฅ ์ ํ ์์ธ์ด ๋ ์ ์์ต๋๋ค.
5. ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ฒํค๋
View Transitions๋ ์ฃผ๋ก CSS ๊ธฐ๋ฅ์ด์ง๋ง, ์ข ์ข ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํด ์์๋๊ณ ์ ์ด๋ฉ๋๋ค. DOM์ ์กฐ์ํ๊ณ , ํด๋์ค๋ฅผ ์ถ๊ฐ/์ ๊ฑฐํ๋ฉฐ, ์ ๋ฐ์ ์ธ ํธ๋์ง์ ํ๋ฆ์ ๊ด๋ฆฌํ๋ ๊ณผ์ ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. ์ด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ต์ ํ๋์ง ์์ผ๋ฉด, CSS ์ ๋๋ฉ์ด์ ์ด ์์๋๊ธฐ๋ ์ ์ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ต๋๋ค.
์ฑ๋ฅ์ ์ํ CSS View Transitions ์ต์ ํ
๋คํํ๋ CSS View Transitions์ ์ฑ๋ฅ ์ํฅ์ ์ํํ๊ณ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๋ถ๋๋ฝ๊ณ ๋น ๋ฅธ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ ๋ต์ด ์์ต๋๋ค.
1. CSS ์ ํ์ ๋ฐ ๊ท์น ๋จ์ํ
๊ฐ๊ฒฐํ๊ฒ ์ ์งํ๊ธฐ: ๊ฐ๋ฅํ ํ ๊ฐ์ฅ ๊ฐ๋จํ CSS ์ ํ์์ ์ ๋๋ฉ์ด์ ์์ฑ์ ๋ชฉํ๋ก ํ์ธ์. ๋ ๋ง์ ์ฒ๋ฆฌ๋ฅผ ์๊ตฌํ ์ ์๋ ์ง๋์น๊ฒ ๊ตฌ์ฒด์ ์ธ ์ ํ์๋ ํผํ์ธ์. ๋ณต์กํ ์ค์ฒฉ ์ ํ์ ๋์ ํด๋์ค ๊ธฐ๋ฐ ํ๊ฒํ ์ ์ฌ์ฉํ์ธ์.
ํจ์จ์ ์ธ ์ ๋๋ฉ์ด์ : ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์ ๊ตํ `@keyframes`๋ณด๋ค ๊ฐ๋จํ `transition` ์์ฑ์ ์ ํธํ์ธ์. `@keyframes`๊ฐ ํ์ํ ๊ฒฝ์ฐ, ๊ฐ๋ฅํ ํ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ์ธ์. ์ผ๋ฐ์ ์ธ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ๋ง๋๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
์์: `marginLeft`, `marginTop`, `paddingLeft`์ ๊ฐ์ ๊ฐ๋ณ ์์ฑ์ ๋ฐ๋ก ์ ๋๋ฉ์ด์ ํ๋ ๋์ , ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ด ๋ ์ข๊ณ ๋ ์ด์์ ์ฌ๊ณ์ฐ์ ์ ๋ฐํ ๊ฐ๋ฅ์ฑ์ด ์ ์ `transform` ์์ฑ(์: `translate`)์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
2. ์ ๋๋ฉ์ด์ ์์ ์ ์ ํ
์ ๋ต์ ์ธ ์ ๋๋ฉ์ด์ : ๋ชจ๋ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํ ํ์๋ ์์ต๋๋ค. ์๊ฐ์ ์ ํ์ผ๋ก ๊ฐ์ฅ ํฐ ์ด์ ์ ์ป์ ์ ์๋ ํต์ฌ ์์๋ฅผ ์๋ณํ๊ณ ๊ทธ๊ณณ์ ๋ ธ๋ ฅ์ ์ง์คํ์ธ์. ๋ชฉ๋ก์ด๋ ๊ทธ๋ฆฌ๋์ ๊ฒฝ์ฐ, ๋ทฐํฌํธ์ ๋ค์ด์ค๊ฑฐ๋ ๋๊ฐ๋ ์์๋ง ์ ๋๋ฉ์ด์ ํ๊ฑฐ๋, ๊ฐ๋ณ ์์ ๋์ ๊ณต์ ๋ ์ ํ ํจ๊ณผ๋ก ์์ ๊ทธ๋ฃน์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
์ ๋๋ฉ์ด์ ์์ฐจ ์ ์ฉ(Staggering): ์์ ์ปฌ๋ ์ ์ ๊ฒฝ์ฐ, ์ ๋๋ฉ์ด์ ์ ์์ฐจ๋ฅผ ๋์ธ์. ๋ชจ๋ ์ ๋๋ฉ์ด์ ์ ํ ๋ฒ์ ์์ํ๋ ๋์ , ๊ฐ ์์์ ์ ๋๋ฉ์ด์ ์ฌ์ด์ ์ฝ๊ฐ์ ์ง์ฐ์ ๋์ ํ์ธ์. ์ด๋ ๋ ๋๋ง ๋ถํ๋ฅผ ์๊ฐ์์ผ๋ก ๋ถ์ฐ์์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋๋ก ํฉ๋๋ค.
๊ธ๋ก๋ฒ ๊ด๋ จ์ฑ: ์์ฐจ ์ ์ฉ์ ์ ์ฌ์ ๊ธฐ๊ธฐ๋ ๋๋ฆฐ ๋คํธ์ํฌ๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ํจ๊ณผ์ ์ ๋๋ค. ๊ฐ์์ค๋ฌ์ด ๊ณ์ฐ ์๊ตฌ๋ ํญ์ฃผ๋ก ์ธํด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
3. ์ ๋๋ฉ์ด์ ์์ฑ ์ต์ ํ
`transform`๊ณผ `opacity` ์ ํธ: ์์ ์ธ๊ธํ๋ฏ์ด, `transform`(์: `translate`, `scale`, `rotate`)๊ณผ `opacity`๋ฅผ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก `width`, `height`, `margin`, `padding`, `top`, `left`์ ๊ฐ์ด ๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น๋ ์์ฑ์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ๋ณด๋ค ์ฑ๋ฅ์ด ๋ ์ข์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ข ์ข ์ด๋ฌํ ์์ฑ์ ์์ฒด ์ปดํฌ์งํฐ ๋ ์ด์ด์์ ์ ๋๋ฉ์ด์ ํ ์ ์์ด ๋ ๋ถ๋๋ฌ์ด ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
`will-change` ์ ์คํ๊ฒ ์ฌ์ฉํ๊ธฐ: `will-change` CSS ์์ฑ์ ๋ธ๋ผ์ฐ์ ์ ์์๊ฐ ์ ๋๋ฉ์ด์ ๋ ๊ฐ๋ฅ์ฑ์ด ์์์ ์๋ ค์ฃผ์ด ์ต์ ํ๋ฅผ ์ํํ ์ ์๊ฒ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ณผ๋ํ ์ฌ์ฉ์ ๊ณผ๋ํ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์๋นํ์ฌ ํด๋ก์ธ ์ ์์ต๋๋ค. ํ์คํ ์ ๋๋ฉ์ด์ ๋ ์์์๋ง ์ฌ์ฉํ์ธ์.
4. ๋ ์ด์์ ๋ณ๊ฒฝ ๊ด๋ฆฌ
๋ ์ด์์์ ์ ๋ฐํ๋ ์ ๋๋ฉ์ด์ ํผํ๊ธฐ: View Transitions๋ฅผ ๋์์ธํ ๋, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๊ฒ ํ๋ ์์ฑ์ ์ ๋๋ฉ์ด์ ํ๋ ๊ฒ์ ํผํ๋ ค๊ณ ๋ ธ๋ ฅํ์ธ์. ๋ ์ด์์ ๋ณ๊ฒฝ์ด ๋ถ๊ฐํผํ ๊ฒฝ์ฐ, ๊ฐ๋ฅํ ํ ์ต์ํํ๊ณ ์ ์ด๋ ๋ฐฉ์์ผ๋ก ๋ฐ์ํ๋๋ก ํ์ธ์.
ํ๋ ์ด์คํ๋ ์์: ์๋นํ ๋ ์ด์์ ์ด๋์ ํฌํจํ๋ ํธ๋์ง์ ์ ๊ฒฝ์ฐ, ์ ์ฝํ ์ธ ๊ฐ ์์ ํ ์๋ฆฌ ์ก์ ๋๊น์ง ์๋ ๋ ์ด์์ ๊ณต๊ฐ์ ์ ์งํ๋ ํ๋ ์ด์คํ๋ ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ์ด๋ ๋์ ๊ฑฐ์ฌ๋ฆฌ๋ ์ ํ ํ์์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
5. ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ์ต์ ํ
ํจ์จ์ ์ธ DOM ์กฐ์: ์ง์ ์ ์ธ DOM ์กฐ์์ ์ต์ํํ์ธ์. ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์ ๋ฐ์ดํธ๋ฅผ ์ผ๊ด ์ฒ๋ฆฌํ์ธ์. ์๋ฅผ ๋ค์ด, ๋ฃจํ์์ ํด๋์ค๋ฅผ ํ๋์ฉ ์ถ๊ฐํ๋ ๋์ , ๋ถ๋ชจ ์์์ ํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ ํ์๋ก ๊ณ๋จ์์ผ๋ก ์ ์ฉํ๊ฑฐ๋, DocumentFragments์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ธ์.
๋๋ฐ์ด์ฑ ๋ฐ ์ค๋กํ๋ง: View Transitions๊ฐ ์ฌ์ฉ์ ์ํธ ์์ฉ(์: ์คํฌ๋กค ๋๋ ํฌ๊ธฐ ์กฐ์ )์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ ๊ฒฝ์ฐ, ๊ณผ๋ํ ํจ์ ํธ์ถ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ด๋ฌํ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋๋ฐ์ด์ค๋๊ฑฐ๋ ์ค๋กํ๋ง๋์๋์ง ํ์ธํ์ธ์.
ํ๋ ์์ํฌ ๊ณ ๋ ค ์ฌํญ: ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ(React, Vue, Angular ๋ฑ)๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ๊ฐ์ DOM ๋น๊ต ๋ฐ ํจ์จ์ ์ธ ์ํ ๊ด๋ฆฌ์ ๊ฐ์ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ View Transitions๋ฅผ ๋ณด์ํ์ธ์.
6. ์ ์ง์ ํฅ์ ๋ฐ ํด๋ฐฑ
๊ธฐ๋ฅ ๊ฐ์ง: ํญ์ ์ ์ง์ ํฅ์์ ๊ตฌํํ์ธ์. View Transitions๊ฐ ์ง์๋์ง ์๊ฑฐ๋ ์ฌ์ฉ์ ๊ธฐ๊ธฐ์์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํค๋ ๊ฒฝ์ฐ์๋ ํต์ฌ ์ฝํ ์ธ ์ ๊ธฐ๋ฅ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์. ๊ธฐ๋ฅ ๊ฐ์ง(์: `@supports`)๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ๊ฑด๋ถ๋ก View Transition ์คํ์ผ์ ์ ์ฉํ์ธ์.
์ ์ง์ ๊ธฐ๋ฅ ์ ํ(Graceful degradation): View Transitions ์ฒ๋ฆฌ์ ์ด๋ ค์์ ๊ฒช๋ ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๊ธฐ์ ๊ฒฝ์ฐ, ๋ ๊ฐ๋จํ๊ณ ๋ฆฌ์์ค ์ง์ฝ์ ์ด์ง ์์ ํด๋ฐฑ์ ์ ๊ณตํ์ธ์. ์ด๋ ๋จ์ํ ํ์ด๋ ํจ๊ณผ์ด๊ฑฐ๋ ์์ ์ ๋๋ฉ์ด์ ์ด ์๋ ๊ฒ์ผ ์ ์์ต๋๋ค. ์ด๋ ๊ธฐ๊ธฐ ์ฑ๋ฅ์ด ํฌ๊ฒ ๋ค๋ฅธ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค.
์์: ๋งค์ฐ ์ค๋๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์๋ ์ ํ ํจ๊ณผ ์์ด ํ์ด์ง๊ฐ ๋ค์ ๋ก๋๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. ์ต์ ๋ฐ์คํฌํฑ ์ฌ์ฉ์๋ ์๋ฆ๋ค์ด ์ ๋๋ฉ์ด์ ์ ํ์ ๋ณด๊ฒ ๋ ๊ฒ์ ๋๋ค.
7. ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋ฐ ํ ์คํธ
์ค์ ํ๊ฒฝ ํ ์คํธ: ํฉ์ฑ ๋ฒค์น๋งํฌ์๋ง ์์กดํ์ง ๋ง์ธ์. ๋ค์ํ ๊ธฐ๊ธฐ, ๋คํธ์ํฌ ์กฐ๊ฑด ๋ฐ ๋ธ๋ผ์ฐ์ ์์ View Transitions๋ฅผ ํ ์คํธํ์ธ์. Chrome DevTools ์ฑ๋ฅ ํญ, Lighthouse, WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
๋คํธ์ํฌ ์ค๋กํ๋ง: ๋๋ฆฐ ๋คํธ์ํฌ ์กฐ๊ฑด์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ ํ๋ ๋์ญํญ์ ๊ฐ์ง ์ฌ์ฉ์๋ฅผ ์ํด ํธ๋์ง์ ์ด ์ด๋ป๊ฒ ์ํ๋๋์ง ์ดํดํ์ธ์. ์ด๋ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ค์ํ ๋จ๊ณ์ ๋๋ค.
๊ธฐ๊ธฐ ์๋ฎฌ๋ ์ด์ : ๋ค์ํ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ ์ฌ์ ํ๋์จ์ด์์์ ์ฑ๋ฅ์ ํ๊ฐํ์ธ์. ๋ง์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ๊ฐ๋ ฅํ ๊ธฐ๊ธฐ ์๋ฎฌ๋ ์ด์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์ฌ์ฉ์ ํผ๋๋ฐฑ: ํนํ ๋ค์ํ ๊ธฐ์ ํ๊ฒฝ์ ๊ฐ์ง ์ง์ญ์ ์ฌ์ฉ์๋ก๋ถํฐ ํผ๋๋ฐฑ์ ์์งํ์ฌ ์ฑ๋ฅ ์ด์์ ์๋ณํ์ธ์.
์ฌ๋ก ์ฐ๊ตฌ ๋ฐ ๊ตญ์ ์์
CSS View Transitions์ *์ฑ๋ฅ ์ํฅ*์๋ง ์ด์ ์ ๋ง์ถ ๊ตฌ์ฒด์ ์ธ ๊ณต๊ฐ ์ฌ๋ก ์ฐ๊ตฌ๋ ์์ง ๋ฑ์ฅํ๊ณ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ์น ์ ๋๋ฉ์ด์ ์ฑ๋ฅ ๋ชจ๋ฒ ์ฌ๋ก์์ ์ ์ฌ์ ์ ์ฐพ์ ์ ์์ต๋๋ค.
- ์ ์์๊ฑฐ๋ ์ฌ์ดํธ: ๋ง์ ๊ธ๋ก๋ฒ ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ์ ํ์ ์ ๋ณด์ด๊ฑฐ๋, ์ฅ๋ฐ๊ตฌ๋ ์ถ๊ฐ๋ฅผ ์ ๋๋ฉ์ด์ ํ๊ฑฐ๋, ์ ํ ๋ชฉ๋ก๊ณผ ์์ธ ํ์ด์ง ๊ฐ ์ ํ์ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ธ๋ผ์ง์์ ๋๋ฆฐ ๋ชจ๋ฐ์ผ ์ฐ๊ฒฐ๋ก ์๋ฅ๋ฅผ ๋๋ฌ๋ณด๋ ์ฌ์ฉ์๋ ์ ํ ์ด๋ฏธ์ง ๋ฐ ๊ด๋ จ ์ ๋๋ฉ์ด์ ์ด ์ต์ ํ๋์ง ์์ผ๋ฉด ์๋นํ ์ง์ฐ์ ๊ฒฝํํ ์ ์์ต๋๋ค. ์ ์ต์ ํ๋ ์ ํ์ ๋ถ๋๋ฌ์ด ๋ธ๋ผ์ฐ์ง์ ๋ณด์ฅํ๋ฉฐ, ์ด๋ ์ ์ธ๊ณ์ ์ผ๋ก ์ ํ์จ์ ํต์ฌ์ ์ธ ์์์ ๋๋ค. ์ฌ๊ธฐ์ '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋'๋ ํ๋งค์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- ๋ด์ค ๋ฐ ๋ฏธ๋์ด ๋งค์ฒด: ์ฃผ์ ๊ตญ์ ๋ด์ค ์น์ฌ์ดํธ๋ ์ข ์ข ์๋ณด๋ฅผ ๊ฐ์กฐํ๊ฑฐ๋, ๊ธฐ์ฌ ๊ฐ ์ ํ, ๋น๋์ค ํ๋ ์ด์ด ์ ๋๋ฉ์ด์ ์ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํฉ๋๋ค. ์ธ๋์์ ๊ธ๋ก๋ฒ ์ด๋ฒคํธ๋ฅผ ๋น ๋ฅด๊ฒ ํ์ธํ๋ ค๋ ๋ด์ค ๋ ์๋ ํนํ ๊ณต์ Wi-Fi ๋คํธ์ํฌ์์ ๋น ๋ฅธ ๋ก๋ฉ๊ณผ ๋ถ๋๋ฌ์ด ์ ํ์ด ํ์ํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ์ฌ์ฉ์๊ฐ ๊ฒฝ์์ฌ ์ฌ์ดํธ๋ก ์ดํํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
- SaaS ํ๋ซํผ: ํ๋์ ์ธ ์๋น์คํ ์ํํธ์จ์ด(SaaS) ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ ๋ด ํ์ ๋ฐ ๊ธฐ๋ฅ ๋ฐ๊ฒฌ์ ์ํด View Transitions๋ฅผ ์์ฃผ ์ฌ์ฉํฉ๋๋ค. ๋จ์ํ๋ฆฌ์นด์ ์ฌ์ฉ์๊ฐ 3G ์ฐ๊ฒฐ๋ก ๋ณต์กํ ํ๋ก์ ํธ ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ์์ํด ๋ณด์ธ์. ํ๋ก์ ํธ ๋ทฐ ๊ฐ ์ด๋์ ๋ฌด๊ฒ๊ณ ์ต์ ํ๋์ง ์์ ์ ๋๋ฉ์ด์ ์ด ํฌํจ๋๋ค๋ฉด ์์ฐ์ฑ์ด ์ ํ๋ ๊ฒ์ ๋๋ค. ํ์ ์์์ ์ด์ ์ ๋ง์ถ๊ณ ํจ์จ์ ์ธ ๋ ๋๋ง์ ํ๋ ์ต์ ํ๋ ์ ํ์ ์ฌ์ฉ์ ์ ์ง์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ด๋ฌํ ์์๋ค์ ๊ณตํต์ ์ ์ฑ๋ฅ์ด ์ฌ์น๊ฐ ์๋๋ผ ํ์๋ผ๋ ์ ์ด๋ฉฐ, ํนํ ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๋ง์กฑ์ํค๊ณ ์ ํ ๋ ๋์ฑ ๊ทธ๋ ์ต๋๋ค. '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ'๋ ์ด๋ฌํ ์ฑ๋ฅ์ ์ง์ ์ ์ผ๋ก ๊ธฐ์ฌํฉ๋๋ค.
View Transitions์ ์ฑ๋ฅ์ ๋ฏธ๋
CSS View Transitions API๊ฐ ์ฑ์ํ๊ณ ๋ธ๋ผ์ฐ์ ๊ตฌํ์ด ๋์ฑ ์ ๊ตํด์ง์ ๋ฐ๋ผ ์ฑ๋ฅ์ด ์ง์์ ์ผ๋ก ๊ฐ์ ๋ ๊ฒ์ผ๋ก ๊ธฐ๋ํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ์๋ค์ ๊ฐ๋ฅํ ๊ฒ์ ๊ฒฝ๊ณ๋ฅผ ๊ณ์ ๋ํ๊ณ ์์ผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ณต๊ธ์ ์ฒด๋ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ์ต์ ํํ๊ธฐ ์ํด ๋ ธ๋ ฅํ๊ณ ์์ต๋๋ค.
์ถ์ธ๋ ๋ ์ ์ธ์ ์ด๊ณ ํ๋์จ์ด ๊ฐ์ํ๋ ์ ๋๋ฉ์ด์ ์ผ๋ก ํฅํ๊ณ ์์ผ๋ฉฐ, ์ด๋ ๋ณธ์ง์ ์ผ๋ก ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๊ณผ ๊ด๋ จ๋ CPU ์ง์ฝ์ ์ธ ์์ ์ ์ค์ฌ์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ณต์ก์ฑ์ ๊ด๋ฆฌํ๊ณ ์ฑ๋ฅ์ ๋ณด์ฅํ๋ ์ฑ ์์ ํญ์ ๊ฐ๋ฐ์์๊ฒ ์์ต๋๋ค. '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋'๋ฅผ ์ดํดํ๋ ๊ฒ์ ์ด๋ฌํ ๊ฐ๋ ฅํ ์ ๊ธฐ๋ฅ์ ์ฑ ์๊ฐ ์๊ฒ ํ์ฉํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
๊ฒฐ๋ก
CSS View Transitions๋ ์น ๋์์ธ์ ํฅ๋ฏธ๋ก์ด ์๋ก์ด ์ฐจ์์ ์ ๊ณตํ์ฌ ๋ ํ๋ถํ๊ณ ์ง๊ด์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ชจ๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋น์ฉ์ด ๋ฐ๋ฆ ๋๋ค. '์ ๋๋ฉ์ด์ ํด๋์ค ์ฒ๋ฆฌ ์ค๋ฒํค๋'๋ ๊ณ ๋ คํด์ผ ํ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ํ๋ CSS ๊ท์น์ ํด์ํ๊ณ ์คํํ๊ธฐ ์ํด ์ํํ๋ ๊ณ์ฐ ์์ ์ ์๋ฏธํฉ๋๋ค.
CSS ๋จ์ํ, ์ ๋๋ฉ์ด์ ์์ ์ ํ, ์ ๋๋ฉ์ด์ ์์ฑ ์ต์ ํ, ๋ ์ด์์ ๋ณ๊ฒฝ ํจ๊ณผ์ ๊ด๋ฆฌ, ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์์์ ์ฒ ์ ํ ํ ์คํธ์ ๊ฐ์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ฑํํจ์ผ๋ก์จ ์ฑ๋ฅ์ ํฌ์ํ์ง ์๊ณ View Transitions์ ํ์ ํ์ฉํ ์ ์์ต๋๋ค. ์์น๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ด ๋น ๋ฅธ ๊ฒฝํ์ ์ฐ์ ์ํ๋ ๊ฒ์ ์ข์ ์ต๊ด์ผ ๋ฟ๋ง ์๋๋ผ ๊ธ๋ก๋ฒ ์น ์ฑ๊ณต์ ํ์์ ์ ๋๋ค.
์น ๊ฐ๋ฐ์๋ก์ ์ฐ๋ฆฌ์ ๋ชฉํ๋ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ๋ชจ๋ ์ฌ๋์ด ์ฑ๋ฅ ์ข๊ณ ์ ๊ทผํ๊ธฐ ์ฌ์ด ๊ฒฝํ์ ๋ง๋๋ ๊ฒ์ด์ด์ผ ํฉ๋๋ค. CSS View Transitions์ ์ฑ๋ฅ ์ํฅ์ ์ดํดํ๊ณ ํด๊ฒฐํจ์ผ๋ก์จ ์ฐ๋ฆฌ๋ ๋ชจ๋๋ฅผ ์ํ ๋ ๋งค๋ ฅ์ ์ด๊ณ ํจ์จ์ ์ธ ์น์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.