CSS ë·° ì íì ë¹ë°ì ë°íìžì! ìŽ ê°ìŽëë ì ìì ìŒë¡ ì ëë©ìŽì ì±ë¥ì 몚ëí°ë§íê³ ìµì ííì¬ ìíí ì¬ì©ì 겜íì 볎ì¥íë ë°©ë²ì ììží ì€ëª í©ëë€. ìœë ìì ë° ì€í ê°ë¥í íµì°°ë ¥ìŽ í¬íšëìŽ ììµëë€.
CSS ë·° ì í ì±ë¥ 몚ëí°: ì ëë©ìŽì ì±ë¥ ì¶ì
ìëì ìž ì¹ ê°ë° ìžê³ìì ë¶ëëœê³ ë§€ë ¥ì ìž ì¬ì©ì 겜íì ë§ëë ê²ìŽ ê°ì¥ ì€ìí©ëë€. CSS ë·° ì íì íìŽì§ì ë€ìí ìí ê°ì ìíí ì íì ê°ë¥íê² íì¬ ì¹ ì í늬ìŒìŽì ì ìê°ì ë§€ë ¥ì í¥ììí€ë ê°ë ¥í ë°©ë²ì ì ê³µí©ëë€. ê·žë¬ë ìŽë¬í ì íì 구íí ë ì ì€íê² êŽëЬíì§ ììŒë©Ž ì±ë¥ ë³ëª© íììŽ ë°ìí ì ììµëë€. ìŽ í¬êŽì ìž ê°ìŽëë CSS ë·° ì íì ë³µì¡ì±ì ììží ë€ë£šë©Žì ë€ìí ì¥ì¹ì ì ìžê³ ìží°ë· ìëìì ìŒêŽëê² ì ì°í ì¬ì©ì 겜íì ì ê³µíêž° ìíŽ ì±ë¥ì 몚ëí°ë§íê³ ìµì ííë ë°©ë²ì ì€ì ì ë¡ëë€.
CSS ë·° ì í ìŽíŽ
CSS ë·° ì íì ë¹êµì ìë¡ìŽ êž°ì ìŽì§ë§ ì¹ íìŽì§ì ë€ë¥ž ë·° ëë ìí ê°ì ì ëë©ìŽì ì íì ë§ëë ê°ìíë ë°©ë²ì ì ê³µí©ëë€. ê°ë°ìë íìŽì§ ëŽì©ìŽ ë³ê²œë ë ë°ìíë ì ëë©ìŽì ì ì ìíì¬ ì¬ì©ì 겜íìŽ ëì± ë°ìì ìŽê³ ìê°ì ìŒë¡ ë§€ë ¥ì ìŽëŒê³ ëëŒëë¡ í ì ììµëë€. ìŽë ë¹ë²í ìœí ìž ì ë°ìŽížê° ìŒë°ì ìž ëšìŒ íìŽì§ ì í늬ìŒìŽì (SPA)ìì í¹í ì€ìí©ëë€. ìŽë¬í íšê³Œë¥Œ ì»êž° ìíŽ `view-transition-name` ìì± ë° êž°í êŽë š CSS ìì±ì íì©í©ëë€.
íµì¬ ê°ë ì ëžëŒì°ì ê° íì¬ ë·°ì ì€ë ì·ì 캡ì²íê³ ì 뷰륌 ë ëë§í ë€ì ë ì¬ìŽë¥Œ ìííê² ì ííë ê²ì ëë€. ìŽ íë¡ìžì€ë ê°ë¥í í íšìšì ìŒë¡ ìµì íë ëžëŒì°ì ì ë ëë§ ìì§ìì ì²ëЬí©ëë€. 목íë ì¬ì©ì 겜íì ì íìí¬ ì ìë ê±°ì¬ëЬë ìê°ì ì€ëš ììŽ ë¶ëë¬ìŽ ì íì 볎ì¥íë ê²ì ëë€. ìŽë ì ìžê³ ì ì ë ¥ ì¥ì¹ ëë ë늰 ìží°ë· ì°ê²°ì ì¬ì©íë ì¬ì©ììê² í¹í ì€ìí©ëë€.
CSS ë·° ì íì 죌ì ìŽì
- í¥ìë ì¬ì©ì 겜í: ìíí ì íì ëì± ì§êŽì ìŽê³ ìŠê±°ìŽ ëžëŒì°ì§ 겜íì ì ê³µí©ëë€.
- í¥ìë ìê°ì ë§€ë ¥: ì íì ì¹ íìŽì§ì ìê°ì í¥ë¯žì ìëì±ì ëí©ëë€.
- ì²Žê° ë¡ë© ìê° ëšì¶: ì íì ë¡ë© ìê°ì ë ì§§ê² ëëŒê² í ì ììµëë€.
- ê°ìíë ì ëë©ìŽì 구í: CSS ë·° ì íì ìëìŒë¡ ì ëë©ìŽì ì ë§ëë ê²ë³Žë€ ë ë³µì¡í ìœëê° íìí 겜ì°ê° ë§ìµëë€.
ì±ë¥ 몚ëí°ë§ì ì€ìì±
CSS ë·° ì íì ìë¹í ìŽì ì ì ê³µíì§ë§ 구íì ì±ë¥ì ìí¥ì ë¯žì¹ ì ììµëë€. ì ëë¡ ìµì íëì§ ìì ì íì ë€ìì ìŽëí ì ììµëë€.
- Jank: ì ëë©ìŽì ì€ ëê¹ ëë ë¶ìì .
- CPU/GPU ì¬ì©ë ìŠê°: 곌ëí 늬ìì€ ìë¹.
- íìŽì§ ë¡ë ìê° ëšì¶: ìœí ìž ë ëë§ ì§ì°.
- ì¬ì©ì ì°žì¬ ê°ì: ìŽì í ì¬ì©ì 겜íìŒë¡ ìží ë¶ë§.
ë°ëŒì íšê³Œì ìž ì±ë¥ 몚ëí°ë§ì ì±ë¥ ë³ëª© íìì ìë³íê³ íŽê²°íë ë° ë§€ì° ì€ìí©ëë€. ì êž°ì ìž ëªšëí°ë§ì ì íìŽ ìííê² ì ì§ëê³ ì¬ì©ì 겜íìŽ ë€ìí ì¥ì¹ ë° ë€ížìí¬ ì¡°ê±Žìì ìµì ìžì§ íìží©ëë€. ìží°ë· ìëì ì¥ì¹ êž°ë¥ìŽ ì§ìë§ë€ í¬ê² ë€ë¥Žêž° ë묞ì ì ìžê³ ì¬ì©ì륌 ëììŒë¡ íë ì í늬ìŒìŽì ì ê°ë°í ë ëì± ì€ìí©ëë€. ìžë ëìŽ ì§ìì ì¬ì©ì ëë ì¬íëŒ ì¬ë§ ìŽëš ìí늬칎ì 몚ë°ìŒ ë€ížìí¬ ì¬ì©ì륌 ê³ ë €íììì€. ì¬êž°ì ì±ë¥ìŽ ê°ì¥ ì€ìí©ëë€.
ì±ë¥ 몚ëí°ë§ì ìí ë구 ë° êž°ì
CSS ë·° ì íì ì±ë¥ì 몚ëí°ë§íê³ ìµì íí ììì ìë³íêž° ìíŽ ì¬ë¬ ë구ì êž°ì ì ì¬ì©í ì ììµëë€. ì¬êž°ìë ë€ììŽ í¬íšë©ëë€.
1. Chrome DevTools
Chrome DevToolsë ì¹ ì±ë¥ ë¶ìì ìí ê°ë ¥í ë구륌 ì ê³µí©ëë€. "Performance" íšëì í¹í ì ëë©ìŽì ì±ë¥ì íë¡íìŒë§íê³ ë¶ìíë ë° ì ì©í©ëë€. ì¬ì©íë ë°©ë²ì ë€ì곌 ê°ìµëë€.
- ì±ë¥ êž°ë¡: íìŽì§ì ìíž ìì©íê³ ë·° ì íì ížëŠ¬ê±°í ë ì±ë¥ íë¡íì êž°ë¡íì¬ ììí©ëë€.
- íë ì ë¶ì: íìëŒìžìì íë ìì ê²ì¬í©ëë€. ì ì¬ì ìž ì±ë¥ 묞ì 륌 ëíëŽë ꞎ íë ìì ì°Ÿìµëë€.
- ë³ëª© íì ìë³: "ììœ" íšëì ì¬ì©íì¬ ì€íìŒ ì¬ê³ì°, ë ìŽìì ì ë°ìŽíž ë° íìžíž ìì 곌 ê°ìŽ ê°ì¥ ë§ì 늬ìì€ë¥Œ ìë¹íë ììì ìë³í©ëë€.
- "Animations" í ì¬ì©: ìŽ íì ì¬ì©í멎 í¹í ì ëë©ìŽì ì ê²ì¬íê³ ì ìŽí ì ììµëë€. ì ëë©ìŽì ìë륌 ëŠì¶° ìê°ì ìŒë¡ ê±°ì¬ëЬë íšê³Œê° ìëì§ íìží©ëë€.
ì: ìŽë¯žì§ë¥Œ ì€ìŒìŒë§íë ì íì ììíŽ ë³Žììì€. ìŽë¯žì§ í¬êž°ê° ë묎 í¬ë©Ž ìë¹í íìžíž ìì ìŽ ë°ìíì¬ íë ì ë ëë§ ìê°ìŽ ëìŽë ì ììµëë€. ì±ë¥ íë¡íì ë¶ìíì¬ ìŽ ë³ëª© íìì ìë³íê³ ë ìì ìŽë¯žì§ë¥Œ ì¬ì©íê±°ë íëìšìŽ ê°ìì íì©íì¬ ìµì íí ì ììµëë€.
2. Lighthouse
Lighthouseë ì¹ íìŽì§ì íì§ì ê°ì íêž° ìí ì€í ìì€ ìëí ë구ì ëë€. Chrome DevToolsì íµí©ëìŽ ììŒë©° ëª ë ¹ì€ ëë Node 몚ëë¡ ì€íí ì ììµëë€. Lighthouseë ì ëë©ìŽì ì ëí í¹ì ê°ì¬ë¥Œ í¬íšíì¬ í¬êŽì ìž ì±ë¥ ê°ì¬ë¥Œ ì ê³µí©ëë€. ë€ì곌 ê°ì ì ëë©ìŽì ìµì í륌 ìí ê·ì€í ê¶ì¥ ì¬íì ì ê³µí©ëë€.
- íìžíž ìì ì€ìŽêž°: ë¶íìí ìì íìží ì íŒíììì€.
- ìŽë¯žì§ í¬êž° ìµì í: ìŽë¯žì§ê° ëì€íë ìŽ í¬êž°ì ë§ê² ì ì íê² í¬êž°ê° ì¡°ì ëìëì§ íìží©ëë€.
- íëìšìŽ ê°ì ì¬ì©: GPU륌 íì©íì¬ ì ëë©ìŽì ì ë ë¶ëëœê² ë§ëëë€.
ì: Lighthouseë CSS ë·° ì íìŽ ë³µì¡í 배겜 ìŽë¯žì§ë¡ ìžíŽ ìë¹í íìžíž ìì ì ì ë°íê³ ììì ìë³í ì ììµëë€. ê¶ì¥ ì¬íì ìŽë¯žì§ë¥Œ ìµì ííê±°ë ì±ë¥ì 믞ì¹ë ìí¥ì ì€ìŽêž° ìíŽ íìžíž ì ë°ìŽížë¥Œ ì ë°íë ìì±ì ë³ê²œíë ëì `transform: translate`륌 ì¬ì©íë ê²ê³Œ ê°ì ë€ë¥ž ì ëë©ìŽì ì ê·Œ ë°©ìì ì¬ì©íë ê²ì ëë€.
3. ëžëŒì°ì íì¥ íë¡ê·žëš
ì¬ë¬ ëžëŒì°ì íì¥ íë¡ê·žëšì ì±ë¥ 몚ëí°ë§ ë° ëë²ê¹ ì ìí ì¶ê° ë구륌 ì ê³µí©ëë€. ëª ê°ì§ ìžêž° ìë ìµì ì ë€ì곌 ê°ìµëë€.
- Web Vitals: Largest Contentful Paint(LCP), First Input Delay(FID) ë° Cumulative Layout Shift(CLS)륌 í¬íšíë Core Web Vitals ë©ížëŠì 몚ëí°ë§íë ëžëŒì°ì íì¥ íë¡ê·žëšì ëë€. ìŽë¬í ë©ížëŠì ì ëë©ìŽì ì ìí¥ì í¬íšíì¬ ì¹ ì í늬ìŒìŽì ì ì ë°ì ìž ì±ë¥ì ëí íµì°°ë ¥ì ì ê³µí ì ììµëë€.
- ì±ë¥ ë구: ë§ì íì¥ íë¡ê·žëšìŽ êž°ë³ž ì ê³µ ëžëŒì°ì ë구ì êž°ë¥ì íì¥íì¬ ë ìžë¶íë ì ìŽ ë° ë¶ì êž°ë¥ì ì ê³µí©ëë€.
ì: Web Vitals륌 ì¬ì©íì¬ CSS ë·° ì íìŽ LCP ì ìì 믞ì¹ë ìí¥ì ìŽíŽí©ëë€. ì±ë¥ìŽ ì¢ì§ ìì ì íì ê°ì¥ í° ìœí ìž ììì ë ëë§ì ì§ì°ììŒ ì¬ì©ì 겜í곌 SEOì ë¶ì ì ìž ìí¥ì ë¯žì¹ ì ììµëë€.
4. ì¬ì©ì ì ì ì±ë¥ ì¶ì
ëì± ìžë°í ì ìŽë¥Œ ìíŽ JavaScript ë° `PerformanceObserver` API륌 ì¬ì©íì¬ ì¬ì©ì ì ì ì±ë¥ ì¶ì ì 구íí ì ììµëë€. ìŽë¥Œ íµíŽ ì ëë©ìŽì ë° ì íì ëí ììží íìŽë° ì 볎륌 캡ì²í ì ììµëë€.
ìœë ì:
```javascript const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (entry.entryType === 'layout-shift') { console.log('Layout Shift:', entry); } if (entry.entryType === 'mark' && entry.name.startsWith('view-transition')) { console.log('View Transition Marker:', entry); } } }); observer.observe({ type: 'layout-shift', buffered: true }); observer.observe({ type: 'mark', buffered: true }); // Example of using performance.mark to track timing performance.mark('view-transition-start'); // Trigger view transition animation // ... your code to trigger the animation performance.mark('view-transition-end'); ```ìŽ ìœë ìì ììë `PerformanceObserver`륌 ì¬ì©íì¬ ë ìŽìì ìŽëì ìì íê³ `performance.mark` API륌 ì¬ì©íì¬ ë·° ì íì ìì곌 ëì ì¶ì í©ëë€. ìŽë¥Œ íµíŽ ì íìŽ ìŒë§ë ì€ë 걞늬ëì§, ì ëë©ìŽì ì€ì ë ìŽìì ìŽëìŽ ë°ìíëì§ ì¬ë¶ì ëí ê·ì€í ì 볎륌 ì ê³µí©ëë€. ê·žë° ë€ì ìŽ ì 볎륌 êž°ë¡íê³ , ë¶ì íë«íŒìŒë¡ 볎ëŽê±°ë, ëžëŒì°ì ì ìœìì íìíì¬ ì í ì±ë¥ì ë¶ìí ì ììµëë€.
CSS ë·° ì í ì±ë¥ ìµì í
ì±ë¥ ë³ëª© íìì ìë³í íìë ì¬ë¬ ì ëµì ì¬ì©íì¬ CSS ë·° ì íì ìµì íí ì ììµëë€.
1. íìžíž ìì ìµìí
íìžíž ìì ì ëžëŒì°ì ìì ìííë ê°ì¥ ë¹ì©ìŽ ë§ìŽ ëë ìì ì€ íëì ëë€. ì í ì€ì íìí íìží ìì ì€ìŽë©Ž ì±ë¥ì í¬ê² í¥ììí¬ ì ììµëë€.
- ë³µì¡íê±°ë í° ë°°ê²œ íŒíêž°: ê°ëší 배겜ì ì¬ì©íê±°ë ìŽë¯žì§ í¬êž°ë¥Œ ìµì íí©ëë€.
- `will-change` ì¬ì©: ìŽ CSS ìì±ì ë³ê²œë ìì±ì 믞늬 ëžëŒì°ì ì ìë € ìµì íí ì ìëë¡ í©ëë€. ì륌 ë€ìŽ `will-change: transform;`ì ëžëŒì°ì ê° ë³í ì ëë©ìŽì ì ë§ê² ìµì ííë ë° ëììŽ ë ì ììµëë€.
- íëìšìŽ ê°ì ì¬ì©: `transform` ë° `opacity`ì ê°ì ìì±ì ì ëë©ìŽì íì¬ GPU륌 íì©íì¬ ì ëë©ìŽì ì ë ë¶ëëœê² ë§ëëë€.
ì: ììì `background-color`륌 ì ëë©ìŽì íë ëì `transform` ì€ìŒìŒ ì ëë©ìŽì ì ì¬ì©íë ê²ìŽ ì¢ìµëë€. ë³í ì ëë©ìŽì ì íëìšìŽ ê°ìë ê°ë¥ì±ìŽ ëìŒë¯ë¡ ì±ë¥ìŽ í¥ìë©ëë€.
2. ë ìŽìì ë³ê²œ ìµì í
ë ìŽìì ë³ê²œì íìŽì§ì ë¹ì©ìŽ ë§ìŽ ëë ì¬ê³ì° ë° ì¬ ë ëë§ì ížëŠ¬ê±°í ì ììµëë€. ì í ì€ì ìŽë¬í ë³ê²œ ì¬íì ìµìííë ê²ìŽ ì€ìí©ëë€.
- ë ìŽììì ížëŠ¬ê±°íë ìì± ë³ê²œ íŒíêž°: ì¬êž°ìë `width`, `height`, `margin`, `padding`곌 ê°ìŽ ììì í¬êž°ë ìì¹ì ìí¥ì 믞ì¹ë ìì±ìŽ í¬íšë©ëë€. ì€ìŒìŒë§ ëë ë³íìë `transform`ì ì¬ì©íë ê²ìŽ ì¢ìµëë€.
- ë ìŽìì ì 볎 믞늬 ê³ì° ë° ìºì±: ìŽë ê² í멎 ë ìŽìì ë³ê²œì ìí¥ì ì€ìŒ ì ììµëë€.
- `contain: layout;` ì¬ì©: ìŽ ìì±ì ë ìŽìì 묎íší륌 í¹ì ììë¡ ì ííì¬ ì±ë¥ì í¥ììíµëë€.
ì: 칎ëì ìì¹ë¥Œ ì ëë©ìŽì í ë ë ìŽìì ì¬ê³ì°ì ížëŠ¬ê±°í ì ìë `top` ëë `left` ìì±ì ë³ê²œíë ëì `transform: translate`륌 ì¬ì©í©ëë€.
3. íšìšì ìž ìŽë¯žì§ ì²ëЬ
ìŽë¯žì§ë ì¢ ì¢ CSS ë·° ì íìì ì€ìí ìí ì í©ëë€. ì ì í ìŽë¯žì§ ì²ëЬë ì±ë¥ì í¬ê² í¥ììí¬ ì ììµëë€.
- ìŽë¯žì§ í¬êž° ìµì í: ë¶íìí ì€ìŒìŒë§ ë° íìží ì ë°©ì§íë €ë©Ž ëì€íë ìŽ í¬êž°ì ì í©í í¬êž°ì ìŽë¯žì§ë¥Œ ì¬ì©í©ëë€. íìŒ í¬êž°ë¥Œ ì€ìŽêž° ìíŽ ìŽë¯žì§ë¥Œ ìì¶í©ëë€. `srcset` ë° `sizes`ì ê°ì ë°ìí ìŽë¯žì§ êž°ì ì ì¬ì©íë ê²ìŽ ì¢ìµëë€.
- ì§ì° ë¡ë©: ìŽë¯žì§ê° íìí ëê¹ì§ ìŽë¯žì§ ë¡ë©ì ì§ì°í©ëë€. ìŽë ì í ì€ì ìŠì íìëì§ ìë ìŽë¯žì§ì í¹í ì ì©í ì ììµëë€.
- WebPì ê°ì ìŽë¯žì§ íì ì¬ì©: WebPë JPEG ë° PNGì ë¹íŽ ì°ìí ìì¶ë¥ ì ì ê³µíì¬ íìŒ í¬êž°ë¥Œ ì€ìŽê³ ë¡ë© ìê°ì ëšì¶í©ëë€.
ì: ìœí ìž ê° ëªšë°ìŒ ì¥ì¹ìì 볌 ê²œì° ë ìì ìŽë¯žì§ë¥Œ ì¬ì©í ë€ì ë í° í멎 í¬êž°ìì ìŽë¯žì§ í¬êž°ë¥Œ ë늜ëë€.
4. DOM ì¡°ì ì€ìŽêž°
곌ëí DOM ì¡°ìì ì ëë©ìŽì ìë륌 ëŠì¶ ì ììµëë€. ì í íë¡ìžì€ ì€ì DOM ìì ì륌 ì íí©ëë€.
- ë¶íìí DOM ì ë°ìŽíž íŒíêž°: ì íì íìì ìž ììë§ ì ë°ìŽíží©ëë€.
- ìŒêŽ DOM ìì : ì¬ë¬ DOM ë³ê²œ ì¬íì ëšìŒ ìì ìŒë¡ 귞룹ííì¬ ëŠ¬íë¡ì° ì륌 ì€ì ëë€.
- CSS ë³ì ì¬ì©: ìŽë¥Œ íµíŽ ì§ì DOM ì¡°ì ììŽ ì ëë©ìŽì ìì±ì ëì ìŒë¡ ì ìŽí ì ììµëë€.
ì: ì¬ë¬ ì€íìŒì ì ë°ìŽížíë ê²œì° ê° ê°ë³ ìì±ì ë³ëë¡ ì€ì íë ëì `style` ìì±ì ì¬ì©íì¬ íšê» 귞룹íí©ëë€.
5. ì¬ì©ì ì¥ì¹ ê³ ë €
ì¥ì¹ë§ë€ ì±ë¥ êž°ë¥ìŽ ë€ëŠ ëë€. ìŽë¬í ì°šìŽì ì ìì©íëë¡ CSS ë·° ì íì ì¡°ì í©ëë€. ëšìë©ëŠ¬ì¹Ž ëë ìí늬칎ì ì¬ë¬ ì§ììì 볌 ì ìë¯ìŽ ìží°ë· ì¡ìžì€ ìëê° ë늰 êµê°ì ì¬ì©ìë ìŽë¬í ê³ ë € ì¬íìŒë¡ë¶í° íšì¬ ë ë§ì ìŽì ì ì»ì ì ììµëë€.
- `prefers-reduced-motion` ì¬ì©: ì¬ì©ìê° ëì ê°ì륌 ìì²íëì§ ê°ì§íê³ ê·žì ë°ëŒ ì íì ë¹íì±ííê±°ë ëšìíí©ëë€.
- ë첎 ì í ì ê³µ: ì ì ë ¥ ì¥ì¹ ëë ë늰 ë€ížìí¬ ì°ê²°ì ëíŽ ë ê°ëší ì íì ì ê³µí©ëë€.
- ë첎 구í: ì°ê²° ìëê° ë§€ì° ë늬거ë 구í ì¥ì¹ë¥Œ ì¬ì©íë ì¬ì©ì륌 ìíŽ ì íì ì졎íì§ ìë ë첎 í겜ì ì ê³µí©ëë€. ë³µì¡í ì¬ëŒìŽë© ì ëë©ìŽì ëì Ʞ볞 íìŽë ìž ëë ê°ëší í¬ë¡ì€ íìŽë륌 ê³ ë €íììì€.
ì: ìíí ì¬ì©ì 겜íì ì ì§íêž° ìíŽ ë³µì¡í ì ëë©ìŽì ì ë¹íì±ííì¬ ëªšë°ìŒ ì¥ì¹ìì ë³Žë€ ê°ëší ì íì 구íí©ëë€. í ì€íž ëšê³ìì ì ì ë ¥ ì¥ì¹ìì í ì€íží©ëë€. íëìšìŽë¥Œ 구맀íì§ ìê³ ë ìŽë¬í 겜íì ì뮬ë ìŽì íêž° ìíŽ í겜 ì뮬ë ìŽí°ë¥Œ ì¬ì©í ì ììµëë€.
ì€ì©ì ìž êµ¬í: êžë¡ë² êŽì
ìŽë¬í ìì¹ì ì€ëª íêž° ìíŽ ì¬íì§ë¥Œ 볎ì¬ì£Œë ì¹ì¬ìŽížì êŽë šë ì€ì©ì ìž ì륌 ê³ ë €íŽ ë³Žê² ìµëë€. ìŽ ì ê·Œ ë°©ìì ë·° ì íìŽ ìë ë€ë¥ž êµì ì ì ìê±°ë ì¬ìŽíž, ëžë¡ê·ž ëë ì í늬ìŒìŽì ì ìœê² ì ì©í ì ììµëë€.
ìë늬ì€: 목ì ì§ ì¹Žë ì í
ì ìžê³ êµê°ì 목ì ì§ ëª©ë¡ì íìíë ì¬ì©ì륌 ììíŽ ë³Žììì€. ì¬ì©ìê° ëª©ì ì§ ì¹Žë륌 íŽëŠí멎 íìŽì§ê° íŽë¹ 목ì ì§ì ììží ë³Žêž°ë¡ ì íë©ëë€.
구í ëšê³:
- HTML 구조:
ê° ëª©ì ì§ ì¹Žëì ììž ë³Žêž°ìë ê³ ì í `view-transition-name` ê°ìŽ ììµëë€. ìŽë¬í ìŽëŠì ë€ë¥ž íìŽì§ ëë 볎Ʞì ìì ê° ì íì ëí ìë³ì ìí ì í©ëë€. ìë ìë ëšìíë ë²ì ì 볎ì¬ì€ëë€.
```html
Destination Name
Short description...
```
Destination Name
Detailed description...
- CSS ë·° ì í ì€íìŒ ì§ì : ```css /* General View Transition Styling */ ::view-transition-old(destination-card-1) { animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-new(destination-card-1) { animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-old(destination-image-1) { animation-name: scaleOut; animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-new(destination-image-1) { animation-name: scaleIn; animation-duration: 0.5s; animation-timing-function: ease-in-out; } @keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } } ```
- ì±ë¥ 몚ëí°ë§ ë° ìµì í:
Chrome DevTools륌 ì¬ì©íì¬ ì íì íë¡íìŒë§í©ëë€.
- ìŽë¯žì§ ëë êž°í ììì êŽë šë íìžíž ìì ì íìží©ëë€.
- ìŽë¯žì§ íìžíž ìì ìŽ ê³Œëí멎 ìŽë¯žì§ í¬êž° ë° íìì ìµì íí©ëë€.
- íìžíž ìì ìŽ ìµìíë멎 ì ëë©ìŽì ìŽ íëìšìŽ ê°ìëê³ ì±ë¥ìŽ ì°ìí ê°ë¥ì±ìŽ ëìµëë€.
êžë¡ë² ì¬ì©ì ì구 ì¬í íŽê²°
- íì§í: ì¬ì©ì ìì¹ì ë°ëŒ ìœí ìž ë¥Œ íì§ííë ê²ì ê³ ë €íììì€. ìœí ìž ë¡ë© ìëê° ë늰 ìì¹ìì ì¬ì©ìê° íìíë ê²œì° ë첎 ë²ì ì 목ì ì§ ì¹Žë륌 ì ê³µíììì€.
- ì¥ì¹ ì ìì±: `prefers-reduced-motion`ì 구ííê³ ëªšë°ìŒ ì¬ì©ìì ì ê·Œì± ì€ì ì íì±íí ì¬ì©ì륌 ìíŽ ë첎 ì€íìŒ ëë ì ëë©ìŽì ì ì ê³µí©ëë€.
- ë€ížìí¬ ê³ ë € ì¬í: ìŽë¯žì§ í¬êž°ê° ìµì íëê³ ìží°ë· ëìíìŽ ë®ì ì§ìì ì¬ì©ìê° ì¬ì í ìíí í겜ì ìŠêžž ì ìëë¡ ì¬ì ë¡ë ì ëµìŽ êµ¬íëìëì§ íìží©ëë€. ëšììì ëë ìí늬칎ì ìŒë¶ ì§ì곌 ê°ìŽ ìží°ë· ì¡ìžì€ ìëê° ë늰 ì§ììì ìœí ìž ë¥Œ ì§ì° ë¡ë©íê³ ì°ì ìì륌 ì§ì íë ê²ì ê³ ë €íììì€.
ì€ì ì¬ë¡ ë° ì¬ë¡ ì°êµ¬
ë€ìì ë€ìí ì§ìì ìì 륌 í¬íšíì¬ CSS ë·° ì í ë° ì±ë¥ ìµì íì íšê³Œì ìž ì ì©ì 볎ì¬ì£Œë ëª ê°ì§ ì¬ë¡ ì°êµ¬ì ëë€.
ì 1: ì ì ìê±°ë ì¹ì¬ìŽíž
ìŒë³žì ì ì ìê±°ë ì¹ì¬ìŽížììë ì í ìžë¶ ì 볎 íìŽì§ì CSS ë·° ì íì ì¬ì©íìµëë€. íëìšìŽ ê°ì ë³í(`transform`)ì ì¬ì©íê³ ìŽë¯žì§ í¬êž°ë¥Œ ìµì ííì¬ ì¬ì©ì ì°žì¬ë¥Œ ê°ì íê³ ìŽíë¥ ì ì€ìŽë ë¶ëë¬ìŽ ì íì ë¬ì±í ì ìììµëë€.
ì 2: ëŽì€ ê°í묌
믞êµì ëŽì€ ê°í묌ììë êž°ì¬ íìŽì§ì ë·° ì íì 구ííìµëë€. íìžíž ìì ì ì€ìŽë ë° ìžì¬í 죌ì륌 êž°ìžìê³ `prefers-reduced-motion`ì ì¬ì©íì¬ ì ëë©ìŽì ì ë ì ížíë ì¬ì©ì륌 ìíŽ í겜ì ê°ì íìµëë€. ìŽë¡ ìžíŽ í¹í 몚ë°ìŒ ì¥ì¹ ì¬ì©ìì íìŽì§ ë¡ë ìëì ì°žì¬ëê° í¬ê² í¥ìëììµëë€.
ì 3: ëžëŒì§ì ìì 믞ëìŽ íë«íŒ
ìŽ íë«íŒì CSS ë·° ì íì ì±ë¥ 묞ì ê° ë°ìíìµëë€. Lighthouse륌 ì¬ì©íì¬ íìžíž ìì ìŽ ëë€ë ê²ì ê°ì§íìµëë€. ìŽë¯žì§ í¬êž°ë¥Œ ì€ìŽê³ `will-change: transform;` ë° íëìšìŽ ê°ìì ì¬ì©íì¬ ëžëŒì§ ëìŽ ì§ì곌 ê°ìŽ ìží°ë· ì°ê²°ìŽ ë¶ìì í ì§ìì ì¬ì©ììê² ì¬ìŽíž ìëµì±ì ê°ì íìµëë€.
ëªšë² ì¬ë¡ ë° ììœ
ììœíì멎 CSS ë·° ì í ì±ë¥ì 몚ëí°ë§íê³ ìµì ííêž° ìí ëª ê°ì§ ëªšë² ì¬ë¡ë ë€ì곌 ê°ìµëë€.
- ì êž°ì ìž ëªšëí°ë§: Chrome DevTools, Lighthouse ë° ëžëŒì°ì íì¥ íë¡ê·žëšê³Œ ê°ì ë구륌 ì¬ì©íì¬ ë·° ì í ì±ë¥ì 몚ëí°ë§íë ê²ì íì€ êŽíìŒë¡ ë§ëììì€. ë³ëª© íìì ì ìíê² ìë³íê³ íŽê²°íêž° ìíŽ ì§ìì ìŒë¡ 몚ëí°ë§íììì€.
- ìŽë¯žì§ ìµì í: ìŽë¯žì§ í¬êž°ë¥Œ ìµì ííê³ , ì ì í ìŽë¯žì§ íìì ì¬ì©íê³ , ì§ì° ë¡ë© ë° êž°í ìŽë¯žì§ ìµì í êž°ì ì 구íí©ëë€. ìží°ë· ìëê° ë ìì ì ìž í겜ìì ìœí ìž ì ì°ì ìì륌 ì§ì í©ëë€.
- íìžíž ìì ìµìí: íìžíž ìì ì ížëŠ¬ê±°íë ìì±ì íŒíììì€. íëìšìŽ ê°ìì ì¬ì©íê³ `will-change`륌 íì©íììì€.
- ë ìŽìì ë³ê²œ ì€ìŽêž°: ë ìŽìì ì ë°ìŽížë¥Œ ížëŠ¬ê±°íë ë³ê²œ ì¬íì ìµìíí©ëë€. ì ëë©ìŽì ì `transform`ì ì¬ì©í©ëë€.
- ì¥ì¹ êž°ë¥ ë° ë€ížìí¬ ì¡°ê±Ž ê³ ë €: `prefers-reduced-motion`ì 구ííê³ , ë첎 ì íì ì ê³µíê³ , ë첎륌 ì ê³µí©ëë€. ë€ìí ì¥ì¹ ë° ì°ê²° ìëìì í ì€ížíì¬ ì€ì 조걎ì ì뮬ë ìŽì í©ëë€.
- ì² ì í í ì€íž: ë€ìí ëžëŒì°ì , ì¥ì¹ ë° ë€ížìí¬ ì¡°ê±Žìì ì íì í ì€íží©ëë€. ì¬ì©ì í ì€ížë¥Œ ìííì¬ íŒëë°±ì ë°ìŒììì€.
- 묞ìí ë° í 컀뮀ëìŒìŽì : ìµì í ì ëµì 묞ìííê³ íŽë¹ ì 볎륌 íìì ì¬ì©í ì ìëë¡ í©ëë€. ëª íí 컀뮀ëìŒìŽì 곌 ëªšë² ì¬ë¡ ì€ì륌 ì¥ë €í©ëë€.
ìŽë¬í 잡멎ì ì§ì€í멎 CSS ë·° ì íìŒë¡ ë§€ë ¥ì ìŽê³ ê³ ì±ë¥ ì¹ ê²œíì ë§ë€ ì ììµëë€. ì ìžê³ ì¬ì©ììê² ë¶ëëœê³ ì ì°í 겜íì ì ê³µíë €ë©Ž ì§ìì ìž ëªšëí°ë§, ì² ì í í ì€íž ë° ì§ìì ìž ìµì íê° ì€ìíë€ë ì ì ëª ì¬íììì€. ì¹ ì í늬ìŒìŽì ì ì±ê³µì êž°ë¥ë¿ë§ ìëëŒ êžì ì ìž ì¬ì©ì 겜íì ì°œì¶íë ì±ë¥ìë ë¬ë € ììµëë€.