ë°ìí ì¹ì¬ìŽíž ê²ì¬êž° â ë¬Žë£ ëªšë°ìŒ ì¹íì í ì€íž
ì¹ì¬ìŽížê° 몚ë êž°êž°(몚ë°ìŒ, íëžëŠ¿, ë°ì€í¬í±)ìì ìŽë»ê² 볎ìŽëì§ ëžëŒì°ì ìì ë°ë¡ í ì€ížíìžì. íì¥ íë¡ê·žëš ë¶íì, ì€ì¹ ë¶íì, ë¡ê·žìž ë¶íì. ê°ë°ì, ëììŽë, ììŽì ì륌 ìí ê°ì¥ ë¹ ë¥ž ë°ìí ëììž í ì€í°ì ëë€.
ë°ìí ì¹ì¬ìŽíž ê²ì¬êž°ë?
ë°ìí ì¹ì¬ìŽíž ê²ì¬êž°ë ì€ì êž°êž° ììŽë ì¹ì¬ìŽížê° ë€ìí í멎 í¬êž°ì êž°êž° ì íìì ìŽë»ê² ë ëë§ëëì§ ë¯žëŠ¬ë³Žêž°í ì ìë ìšëŒìž ë구ì ëë€. ì íí 몚ë°ìŒ ì¹íì í ì€íž 결곌륌 ëª ìŽ ë§ì íìží ì ìëë¡ ì€ì êž°êž° ë·°í¬íž ì¹ì륌 ì뮬ë ìŽì í©ëë€.
ìŽ ë구ë ìëë°ì€ ì²ëЬë iFrameì ì¬ì©íì¬ íê² URLì ì íí ë·°í¬íž(몚ë°ìŒ 375px, íëžëŠ¿ 768px, ë°ì€í¬í± 1280px) ëŽìì ëžëŒì°ì ì ì§ì ë¡ëí©ëë€. ë°ëŒì ì€í¬ëŠ°ì· ì뮬ë ìŽì ìŽ ìë ì€ì ë ëë§ ê²°ê³Œë¥Œ íìží ì ììµëë€.
CSS 믞ëìŽ ì¿ŒëŠ¬ë¥Œ ëë²ê¹ íë ì¹ ê°ë°ì, íœì ëšì ë ìŽììì íìžíë ëììŽë, í¹ì 몚ë êž°êž°ìì ëë© íìŽì§ê° ì 볎ìŽëì§ íìžíë €ë ë¹ìŠëì€ ì€ëëŒë©Ž, ìŽ ë구ë ê°ì¥ ë¹ ë¥ž ë¬Žë£ ì룚ì ì ëë€.
몚ë°ìŒ ì¹íì±ìŽ íììž ìŽì
구êžì 몚ë°ìŒ ì°ì ìžë±ì±ì ììê° ëªšë°ìŒ êž°êž° ì±ë¥ì ë¬ë € ììì ì믞í©ëë€.
ì¹ ížëíœì 63%ë 몚ë°ìŒ
ì¹ì¬ìŽíž 방묞ì ì ë° ìŽììŽ ì€ë§íží°ìì ë°ìí©ëë€. ê¹šì§ ëªšë°ìŒ ë ìŽììì ì ì¬ ê³ ê° ëë€ì륌 ìœí ìž ë¥Œ 볎Ʞë ì ì ìë ê²ì ëë€. (ì¶ì²: Statista, 2024)
êµ¬êž ëªšë°ìŒ ì°ì ìžë±ì±
2023ë ë¶í° 구êžì ì£Œë¡ ì¹ì¬ìŽížì 몚ë°ìŒ ë²ì ì ìžë±ì± ë° ììì ì¬ì©í©ëë€. 몚ë°ìŒ ì¹íì í ì€ížì ì€íší ì¬ìŽížë ìµì íë 겜ìì¬ë³Žë€ ë®ì ìì륌 ë°ìµëë€.
3ìŽ ìì 53% ìŽí
ì°êµ¬ì ë°ë¥Žë©Ž 몚ë°ìŒìì 3ìŽ ìŽëŽì ì ëë¡ ë¡ëëê±°ë íìëì§ ììŒë©Ž ì¬ì©ìê° íìŽì§ë¥Œ ìŽíí©ëë€. ë°ìí ëììž ê²ì¬êž°ë¡ ì íìšì ì ìí¥ì 믞ì¹êž° ì ì ë ìŽìì 묞ì 륌 ë°ê²¬íìžì. (ì¶ì²: Google/SOASTA Research)
ë ëì ì íìš
몚ë°ìŒì ìµì íë ì¬ìŽížë ê·žë ì§ ìì ì¬ìŽížë³Žë€ ì íìšìŽ ìµë 160% ë ëìµëë€. ë€ìí í멎 í¬êž°ìì ì¹ì¬ìŽížë¥Œ í ì€íží멎 몚ë 방묞ìê° ìíí 겜íì ë늎 ì ììµëë€. (ì¶ì²: Adobe, 2023)
ë°ìí í ì€ížì íìí 몚ë ê²
ì 묞ê°êž êž°ë¥. ë¹ì© ì ë¡. ê³ì ë¶íì.
ì€ìê° ëŒìŽëž 믞늬볎Ʞ
URLì ë¶ì¬ë£ìŒë©Ž ì íí êž°êž° ë·°í¬ížìì ì¹ì¬ìŽížê° ìŠì ë ëë§ë©ëë€. íìŽì§ ìë¡ê³ 칚ìŽë ëêž° ììŽ ì¹ì¬ìŽíž ë°ìíì ì€ìê°ìŒë¡ í ì€ížíìžì.
íœì ëšì êž°êž° ì뮬ë ìŽì
ì íí í멎 íŽìë ì뮬ë ìŽì : 375px 몚ë°ìŒ(ììŽí°), 768px íëžëŠ¿(ììŽíšë), 1280px ë°ì€í¬í±. 몚ë 믞늬볎Ʞë ì€ì êž°êž°ìì 볎ìŽë ê·žëë¡ì ëë€.
ìíŽëŠ ì€í¬ëŠ°ì· ìº¡ì²
ìŽë€ êž°êž° í멎ìŽë íŽëŠ í ë²ìŒë¡ ì€í¬ëаì·ì 캡ì²íìžì. ë²ê·ž 늬í¬íž, íŽëŒìŽìžíž íë ì í ìŽì , ëììž ë¬žìíì ì벜í©ëë€. êž°êž°ë¡ ë°ë¡ ì ì¥íìžì.
100% ë¹ê³µê° & ìì
몚ë ë ëë§ì ëžëŒì°ì ëŽìì íŽëŒìŽìžíž ì¬ìŽëë¡ ìŽë£šìŽì§ëë€. í ì€íží URLì ë¡ê¹ , ì ì¥, ì¶ì íì§ ììµëë€. ì¹ì¬ìŽížì ë°ìŽí°ë ì벜íê² ë¹ê³µê°ë¡ ì ì§ë©ëë€.
ê³µì ê°ë¥í í ì€íž ë§í¬
í ì€ížê° 믞늬 ë¡ëë ê³µì ê°ë¥í URLì ìì±íìžì. íŽëŒìŽìžížë íììê² ì ì¡í멎 ìŠì 늬뷰í ì ììµëë€. ììž¡ 몚ë ê³ì ìŽ íì ììµëë€.
ê°ë°ìêž ì íë
í¬êž° ì¡°ì ë ì€í¬ëаì·ìŽ ìë ì€ì ìëë°ì€ ì²ëЬë iFrameì ì¬ì©í©ëë€. ìŠ, CSS 믞ëìŽ ì¿ŒëŠ¬, ìë°ì€í¬ëŠœíž ìížìì©, ì ëë©ìŽì ìŽ ì€ì êž°êž°ììì ëìŒíê² ëìí©ëë€.
ì§ìëë í멎 í¬êž° ë° ë·°í¬íž
ì€ì ëžëŒì°ì ìì ì¬ì©ëë ì íí ë·°í¬íž ì¹ìë¡ ëªšë 죌ì êž°êž° 칎í ê³ ëŠ¬ë¥Œ í ì€ížíìžì.
max-width: 480px
max-width: 1024px
min-width: 1025px
ìŽë êµ¬êž web.dev ê°ìŽëëŒìžìì ë°ìí ì¹ ëììž í ì€ížì ê°ì¥ ì€ìíê² ê¶ì¥íë ëžë ìŽí¬í¬ìžížì ëë€.
ë°ìí í ì€íž ë°©ë²
30ìŽ ìŽëŽì ìì í 몚ë°ìŒ ì¹íì ì¹ì¬ìŽíž í ì€ížë¥Œ ì€ííìžì â ì€ì ë¶íì.
ì¹ì¬ìŽíž URL ì ë ¥
ëŒìŽëž ì¹ì¬ìŽíž URLìŽë ë¡ì»¬ ê°ë° 죌ì(HTTPS/Ngrokì íµí localhost)륌 ë구 ìëšì URL ì ë ¥ íëì ë¶ì¬ë£ìŒìžì.
êž°êž° ë·°í¬íž ì í
ìëš íŽë°ìì 몚ë°ìŒ, íëžëŠ¿, ë°ì€í¬í± ì€ íë륌 íŽëŠí멎 ë°ìí ëžë ìŽí¬í¬ìžíž ê°ì ìŠì ì íë©ëë€.
ê²ì¬, ìì ë° ì€í¬ëаì·
ë ìŽìì 묞ì , ê¹šì§ ìì, ì€ë²íë¡ ë¬žì 륌 ìê°ì ìŒë¡ ë°ê²¬íìžì. íìŽë ë²ê·ž 늬í¬ížì©ìŒë¡ ì€í¬ëаì·ì 캡ì²íë €ë©Ž ì€ë ë²íŒì ì¬ì©íìžì.
ìŽ ë°ìí ê²ì¬êž°ë¥Œ ì¬ì©íë ì¬ëë€
몚ë ì¹ ë¶ìŒ ì 묞ê°ë€ìŽ ì 뢰í©ëë€ â ì ë¶ ë¬Žë£ì ëë€.
ì¹ ê°ë°ì
ìí¬íë¡ì°ë¥Œ ë²ìŽëì§ ìê³ CSS ëžë ìŽí¬í¬ìžíž ëë²ê¹ , 믞ëìŽ ì¿ŒëŠ¬ í ì€íž, ìë°ì€í¬ëŠœíž ìížìì©ìŽ ëªšë°ìŒìì ì¬ë°ë¥Žê² ìëíëì§ íìžíìžì.
UI/UX ëììŽë
ê°ë°ì ëêž°êž° ì ì 몚ë êž°êž°ìì íœì ëšì ë ìŽììì ê²ìŠíìžì. ì€ì ëžëŒì°ì ë·°í¬ížìì íŒê·žë§-ìœë 구íì í ì€ížíìžì.
SEO ì 묞ê°
구êžì 몚ë°ìŒ ì°ì ìžë±ì±ì ëí 몚ë°ìŒ ì¹íì±ì íìžíìžì. Core Web Vitals ì ì륌 íŽì¹ ì ìë ë ìŽìì ë³ê²œ ë° CLS 묞ì 륌 ìë³íìžì.
ììŽì ì & í늬ëì
íŽëŒìŽìžížìê² ì¹ì¬ìŽížê° 몚ë í멎 í¬êž°ìì ìŽë»ê² 볎ìŽëì§ ì íí 볎ì¬ì£Œìžì. ì ìì, ë³Žê³ ì, QA 묞ìì© ì€í¬ëаì·ì ìì±íìžì.
ì€ì ìë ìì 볎Ʞ
30ìŽ ìì 몚ë êž°êž°ìì ì¹ì¬ìŽížë¥Œ í ì€ížíë ë°©ë²ì ìì²íìžì.
ìŠì ë°ìí ëììž í
죌ì 륌 ì ííê³ AI êž°ë° ì ë¬žê° íì ìŠì ë°ì볎ìžì.
í ìì±íꞰ륌 íŽëŠíê±°ë ììì 죌ì 륌 ì íí멎 ìŠì ì ë¬žê° íì ë°ì ì ììµëë€.
ì죌 묻ë ì§ë¬ž
ìšëŒìž ë°ìí í ì€ížì ëíŽ ìììŒ í 몚ë ê².
ë€ â ììí 100% 묎ë£ì ëë€. 구ë , ì ì©ì¹Žë ì구, ì¬ì©ë ì í, íìê°ì ìŽ ì í ììµëë€. ì 묞 ì¹ ë구ë ë구ë ì ê·Œ ê°ë¥íŽìŒ íë€ë 믿ììŒë¡ ì ìëììµëë€.
ëžëŒì°ì í¬êž° ì¡°ì ì ì€ì êž°êž° ëìì íì ì ííê² ë°ìíì§ë ììµëë€. ìŽ ë구ë ì€ì êž°êž°ì ì íí ë·°í¬íž ì¹ì륌 ë°ìíë ê³ ì í¬êž° ìëë°ì€ iFrame ëŽìì ì¬ìŽížë¥Œ ë ëë§í©ëë€. ì¬êž°ìë 믞ëìŽ ì¿ŒëŠ¬ê° ížëŠ¬ê±°ëë ë°©ìì ìí¥ì 믞ì¹ë íœì ë°ë ì°šìŽë í¬íšë©ëë€.
ë€, íì§ë§ ì¡°ê±ŽìŽ ììµëë€: ëžëŒì°ì íŒí© ìœí ìž ë³Žì ì ì± ìŒë¡ ìžíŽ ë¡ì»¬ ê°ë° ìë²ë HTTPSë¡ ì ê³µëìŽìŒ í©ëë€. Ngrok, LocalTunnel ëë ëžëŒì°ì êž°ë° HTTPS íë¡ìì ê°ì ë구륌 ì¬ì©íì¬ ë¡ì»¬ížì€ížë¥Œ ìì íê² ë žì¶íê³ ì¬êž°ì í ì€íží ì ììµëë€.
ìŒë¶ ì¹ì¬ìŽížë iFrame ëŽ ë¡ë륌 ì°šëšíë X-Frame-Options: DENY ëë Content-Security-Policy: frame-ancestors 'none' HTTP í€ë륌 ì€ì í©ëë€. ìŽë ì¬ìŽíž ìž¡ì 볎ì ì¡°ì¹ìŽë©° ë구ì ë²ê·žê° ìëëë€. ëíëë ë²íŒì ì¬ì©íì¬ ì ì°œìì ì¬ìŽížë¥Œ ìŽ ì ììµëë€.
ìŽ ë구ë ìž ê°ì§ íµì¬ ëžë ìŽí¬í¬ìžížë¥Œ í ì€íží©ëë€: 몚ë°ìŒ 375px(ììŽí° 14/15 ë° ëë¶ë¶ì ìµì ìëë¡ìŽë í°), íëžëŠ¿ 768px(ììŽíšë ììŽ / ììŽíšë 믞ë), ë°ì€í¬í± 1280px(íì€ ë žížë¶ ë° ëªšëí° ë·°í¬íž).
ì ë ìëëë€. 몚ë ë ëë§ì ì ì ìŒë¡ ëžëŒì°ì ëŽìì íŽëŒìŽìžíž ì¬ìŽëë¡ ìŽë£šìŽì§ëë€. ì ë ¥í URLì ë¡ê¹ , ì ì¥, ì ì¡ ëë ë¶ìíì§ ììµëë€. ì¹ì¬ìŽíž, ê°ë° íë¡ì íž, íŽëŒìŽìžíž ìì ì ì벜íê² ë¹ê³µê°ë¡ ì ì§ë©ëë€.
ìëš íŽë°ìì ì€ë ë²íŒ(칎ë©ëŒ ììŽìœ)ì íŽëŠíìžì. ëêµ¬ê° íì¬ êž°êž° ë·°í¬ížì ê³ íŽìë ì€í¬ëаì·ì 캡ì²íì¬ ìëìŒë¡ PNG íìŒë¡ êž°êž°ì ë€ìŽë¡ëí©ëë€.
ë€. 믞늬볎Ʞ ë²íŒ ìì ë§í¬ ììŽìœ ë²íŒì íŽëŠí멎 ê³µì ê°ë¥í URLì ë³µì¬í ì ììµëë€. íŽë¹ ë§í¬ë¥Œ ìŽë©Ž ëìŒí ì¹ì¬ìŽíž URLë¡ ë¯žëŠ¬ ë¡ëë ë구륌 볌 ì ììŒë©°, ìëë°© ìž¡ìì ê³ì ìŽë ì€ì¹ê° íì ììµëë€.
구êžì 몚ë°ìŒ ì¹íì± í ì€ížë íìŽì§ë¥Œ í¬ë¡€ë§íë 구êžëŽì êž°ë°ìŒë¡ í íµê³Œ/ì€íš ê²ì¬êž°ì ëë€. ì í¬ ë°ìí ì¹ì¬ìŽíž ê²ì¬êž°ë ë ìŽìì 묞ì 륌 ì§ì ëìŒë¡ íìží ì ìë ìê°ì ëŒìŽëž 믞늬볎Ʞ륌 ì ê³µí©ëë€. ë ë구ë ìíž ë³Žìì ì ëë€. ì í¬ ëêµ¬ë¡ ë¬žì 륌 ì°Ÿì ìì í ë€ì êµ¬êž ëêµ¬ë¡ ê²ìŠíìžì.