1<!DOCTYPE html> 2<html lang="ko"> 3 4<head> 5 <!-- 기본 ë©í --> 6 <meta charset="UTF-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta name="theme-color" content="#030712"> 9 <meta name="csrf-token" content="t8VX8w4dgASl0cJC4art4CSeIaSqwEmEEYdpTaT4"> 10 <meta name="naver-site-verification" content="5d421042461be431e4760ec4c1a3317d4dfc916f" /> 11 <link rel="apple-touch-icon" href="https://www.appboxapp.com/favicon144.png"> 12 13 <link rel="canonical" href="https://www.appboxapp.com/blog"> 14 <link rel="alternate" hreflang="ko-KR" href="https://www.appboxapp.com/blog"> 15 <link rel="alternate" hreflang="x-default" href="https://www.appboxapp.com/blog"> 16 <!-- DEV íê²½: ê²ì ì°¨ë¨ / PROD íê²½: ëª ìì ìì¸ íì© --> 17 <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"> 18 <!-- PROD íê²½: íì´ì§ë³ SEO ë©í --> 19 <title>ì±ë¹ëÂ·ì± ë§ì¼í ë¸ë¡ê·¸ | Appbox</title> 20 <meta name="description" content="ì±ë¹ë íì©ë², ì루ì ëì ì¬ë¡, í¸ì·ì¸ì± ë§ì¼í ì ëµê¹ì§. Appbox íì ì± ê°ë°Â·ì´ì ì¸ì¬ì´í¸ë¥¼ 매주 ì ë°ì´í¸í©ëë¤."> 21 <meta name="keywords" content="ì±ë¹ë ë¸ë¡ê·¸, ì±ê°ë° ì루ì , ë ¸ì½ë ì±ë¹ë, ì± ë§ì¼í , í¸ì ë©ìì§ ë§ì¼í , ì¸ì± ë©ìì§ ì ëµ, ì± ì´ì ê°ì´ë"> 22 <meta property="og:type" content="website"> 23 <meta property="og:locale" content="ko_KR"> 24 <meta property="og:site_name" content="ì±ë°ì¤"> 25 <meta property="og:title" content="ì±ë¹ëÂ·ì± ë§ì¼í ë¸ë¡ê·¸ | Appbox"> 26 <meta property="og:description" content="ì±ë¹ë íì©ë², ì루ì ëì ì¬ë¡, í¸ì·ì¸ì± ë§ì¼í ì ëµê¹ì§. Appbox íì ì± ê°ë°Â·ì´ì ì¸ì¬ì´í¸ë¥¼ 매주 ì ë°ì´í¸í©ëë¤."> 27 <meta property="og:image" content="https://www.appboxapp.com/landing-images/common/ogappbox.png?v=1774351592"> 28 <meta property="og:image:width" content="1200"> 29 <meta property="og:image:height" content="630"> 30 <meta property="og:url" content="https://www.appboxapp.com/blog"> 31 <meta name="twitter:card" content="summary_large_image"> 32 <meta name="twitter:title" content="ì±ë¹ëÂ·ì± ë§ì¼í ë¸ë¡ê·¸ | Appbox"> 33 <meta name="twitter:description" content="ì±ë¹ë íì©ë², ì루ì ëì ì¬ë¡, í¸ì·ì¸ì± ë§ì¼í ì ëµê¹ì§. Appbox íì ì± ê°ë°Â·ì´ì ì¸ì¬ì´í¸ë¥¼ 매주 ì ë°ì´í¸í©ëë¤."> 34 <meta name="twitter:image" content="https://www.appboxapp.com/landing-images/common/ogappbox.png?v=1774351592"> 35 36
36<script type="application/ld+json"> 37 { 38 "@context": "https://schema.org", 39 "@type": "Organization", 40 "name": "ì±ë°ì¤", 41 "url": "https://www.appboxapp.com", 42 "logo": { 43 "@type": "ImageObject", 44 "url": "https://www.appboxapp.com/console-images/images/logo/logo-white.webp" 45 }, 46 "contactPoint": { 47 "@type": "ContactPoint", 48 "contactType": "customer support", 49 "availableLanguage": "Korean", 50 "url": "https://www.appboxapp.com/contact" 51 } 52 } 53 </script>
53 54 <!-- íë¹ì½ --> 55 <link rel="icon" type="image/png" sizes="48x48" href="https://www.appboxapp.com/favicon48.png"> 56 <link rel="icon" type="image/png" sizes="96x96" href="https://www.appboxapp.com/favicon96.png"> 57 <link rel="icon" type="image/png" sizes="144x144" href="https://www.appboxapp.com/favicon144.png"> 58 <!-- Pretendard: font-display: swap ê°ì (CDN CSSë³´ë¤ ë¨¼ì ì ì¸íì¬ FOIT ë°©ì§) + fallback metricsë¡ CLS ìµìí --> 59 <style> 60 @font-face { font-family: 'Pretendard'; font-display: optional; src: local('Pretendard'); } 61 @font-face { font-family: 'Pretendard Fallback'; src: local('Apple SD Gothic Neo'), local('Malgun Gothic'); size-adjust: 100%; ascent-override: 95.17%; descent-override: 24.12%; line-gap-override: 0%; } 62 </style> 63 <!-- Pretendard Dynamic Subset â LCP ì´ë¯¸ì§ì ëìí ê²½ì ë°©ì§ë¥¼ ìí´ window load ì´í ë¡ë --> 64
64<script> 65 window.addEventListener('load', function() { 66 var l = document.createElement('link'); 67 l.rel = 'stylesheet'; 68 l.href = 'https://www.appboxapp.com/pretendard-dynamic-subset.min.css'; 69 document.head.appendChild(l); 70 }); 71 </script>
71 72 <noscript><link rel="stylesheet" href="https://www.appboxapp.com/pretendard-dynamic-subset.min.css"></noscript> 73 <!-- LCP ì´ë¯¸ì§ preload (ë©ì¸ íì´ì§) â picture ììì media/srcsetê³¼ ì íí ì¼ì¹ --> 74 <link rel="preload" as="image" href="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/04/f72916a5-620c-481c-bcd2-30bd83055f38.webp" fetchpriority="high"> 75 <!-- ì¸ë¶ 리ìì¤ ì°ê²° ìµì í --> 76 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> 77 78 <style>/* 79 * Critical CSS for Landing Pages (above-fold) 80 * Inlined in production to eliminate render-blocking CSS. 81 * Only hero section + header styles. Keep minimal. 82 */ 83 84/* === Reset === */ 85html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, button, input, textarea { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color: #101828; font-family: 'Pretendard', 'Pretendard Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; letter-spacing: 0; } 86html { scroll-behavior: auto !important; } 87* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } 88body { margin: 0; min-height: 100vh; overflow-x: hidden; } 89ul { list-style-type: none; } 90img { display: inline-block; width: 100%; height: auto; object-fit: cover; } 91a { text-decoration: none; cursor: pointer; } 92button { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid; border-radius: 8px; white-space: nowrap; box-sizing: border-box; opacity: 1; } 93 94/* === Layout utilities (heroìì ì¬ì©) === */ 95.flex { display: flex !important; } 96.flex-col { display: flex; flex-direction: column; } 97.flex-row { display: flex; flex-direction: row; } 98.flex-1 { flex: 1; } 99.justify-center { justify-content: center !important; } 100.justify-between { justify-content: space-between !important; } 101.align-center { align-items: center !important; } 102.text-center { text-align: center !important; } 103.hidden { display: none !important; } 104.relative { position: relative !important; } 105.absolute { position: absolute !important; } 106.fixed { position: fixed !important; } 107.w-full { width: 100% !important; } 108.overflow-hidden { overflow: hidden !important; } 109.gap-4 { gap: 4px !important; } 110.gap-16 { gap: 16px !important; } 111.gap-24 { gap: 24px !important; } 112.gap-40 { gap: 40px !important; } 113.gap-80 { gap: 80px !important; } 114 115/* === Typography (critical) === */ 116h1 { font-size: 48px; line-height: 62px; font-family: 'Pretendard'; font-weight: 600; } 117h2 { font-size: 40px; line-height: 52px; font-family: 'Pretendard'; font-weight: 500; } 118h3 { font-size: 32px; line-height: 42px; font-family: 'Pretendard'; font-weight: 400; } 119 120p.title3 { font-size: 24px; line-height: 34px; font-family: 'Pretendard'; font-weight: 500; } 121p.title5 { font-size: 18px; line-height: 26px; font-family: 'Pretendard'; font-weight: 500; } 122.white { color: #ffffff !important; } 123.gray-300 { color: #D1D5DC !important; } 124.gray-400 { color: #AEB5BF !important; } 125.gray-500 { color: #7B8494 !important; } 126.primary-500 { color: #2B7FFF !important; } 127.bg-white { background-color: #ffffff !important; } 128.font-m { font-family: 'Pretendard' !important; font-weight: 500; } 129.font-sb { font-family: 'Pretendard' !important; font-weight: 600; } 130.text-16 { font-size: 16px; line-height: 24px; } 131.text-14 { font-size: 14px; line-height: 20px; } 132 133/* === Sprite icons (headerìì ì¬ì©) === */ 134svg.ic { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; } 135svg.ic.xlg { width: 40px; height: 40px; } 136svg.ic.lg { width: 28px; height: 28px; } 137 138/* === Header === */ 139header { position: fixed; top: 0; width: 100%; background-color: #030712 !important; z-index: 10; height: 60px !important; border-bottom: 1px solid #1E2939 !important; } 140header.white { background-color: #fff !important; border-bottom: 1px solid #F3F4F6 !important; } 141header nav { display: flex !important; padding-left: 40px; padding-right: 40px; height: inherit; } 142header nav li > a { color: #99A1AF; } 143header .logo { width: 114px; height: 24px; } 144header .logo img { width: 100%; height: auto; } 145header svg.ic-hamburger { display: none; } 146header .login { font-size: 13px; line-height: 18px; font-family: 'Pretendard'; font-weight: 500; border-color: #030712; width: 58px; height: 36px; } 147header .experience { font-size: 13px; line-height: 18px; font-family: 'Pretendard'; font-weight: 500; border-color: #030712; width: 90px; height: 36px; } 148header .menu { position: relative; height: 36px; display: flex; align-items: center; } 149header .dropdown-button { cursor: pointer; color: #99A1AF; display: flex; overflow: hidden; } 150header .dropdown-menu { max-height: 0; opacity: 0; overflow: hidden; position: absolute; top: 100%; pointer-events: none; } 151header .profile { padding: 3px; align-self: center; width: 36px; height: 36px; } 152header .profile img { width: 100%; height: 100%; border-radius: 8px; } 153header.white nav li > a { color: #101828; } 154header.white .dropdown-button { color: #101828; } 155 156/* === Spinner & Dim (hidden by default) === */ 157.spinner { display: none; } 158.dim { display: none; } 159 160/* === Container & Content === */ 161.container { min-height: calc(100vh - 60px); height: 100%; background-color: #030712; position: relative; top: 60px; } 162.container .content { height: inherit; min-height: calc(100vh - 60px); position: relative; background-color: transparent; max-width: 1200px; margin: 0px auto; overflow: visible; } 163.container .content section.banner { padding: 5rem 0; } 164.container .content section:first-of-type { padding-top: 120px; } 165 166/* === Display rules === */ 167aside { display: none; } 168.mobile { display: none !important; } 169.tablet { display: none !important; } 170/* .pc ë ëí´í¸ (block ë±) ì ì§. 모ë°ì¼/íë¸ë¦¿ 미ëì´ ì¿¼ë¦¬ìì ëª ì hide. */ 171/* CLS ë P22 ì UA ê¸°ë° SSR ë¶ê¸°ë¡ í´ê²° (모ë°ì¼ UA ë .pc/.tablet ì체를 SSR ì í¨). */ 172 173/* === Fade-in animation â CLS ë°©ì§: translateY ì ê±°, opacityë§ ì¬ì© === */ 174.fade-in { opacity: 0; transition: opacity 0.6s ease; } 175.fade-in.visible { opacity: 1 !important; } 176/* LCP ì¦ì ê°ìí: 첫 ì¹ì ì banner-title fade-in ë¹íì± (LCP íë³´ê° fade-in ìì ìì¼ë©´ LCP 측ì ì§ì°) */
177.container .content > section:first-of-type .banner-title.fade-in { opacity: 1 !important; transition: none !important; } 178 179/* === Hero banner (#main-main-banner-1) === */ 180.main-banner { overflow: hidden; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); padding-bottom: 120px; } 181.banner-title { display: flex; flex-direction: column; gap: 16px; text-align: center; } 182.banner-title h1 *, .banner-title h2 * { font-family: 'Pretendard'; font-weight: 600; } 183.banner .banner-title h1 div, .banner .banner-title h2 div { font-size: inherit; line-height: inherit; display: flex; flex-direction: column; } 184.banner .banner-title .banner-subtitle div { font-size: 20px; line-height: 28px; } 185.banner-contents { display: flex; justify-content: space-between; width: 100%; } 186.banner { gap: 80px; display: flex; flex-direction: column; } 187.banner-subtitle { font-size: 20px; line-height: 28px; font-family: 'Pretendard'; font-weight: 500; } 188 189#main-main-banner-1 .gradient-bg { z-index: 1; position: absolute; width: 100%; height: 840px; top: 0px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 80% 40% at 50% 50%, #2b80ff55 0%, transparent 100%), #030712; } 190#main-main-banner-1 .gradient-bg .concentric-container { position: relative; width: 100%; height: 840px; display: flex; align-items: center; justify-content: center; left: 18%; animation: pulse-outer 4s infinite; will-change: transform, opacity; contain: layout; } 191#main-main-banner-1 .gradient-bg .concentric-container::before, 192#main-main-banner-1 .gradient-bg .concentric-container::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-repeat: no-repeat; background-position: center; } 193#main-main-banner-1 .gradient-bg .concentric-container::before { width: 2300px; height: 2300px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='2300' height='2300'%3e%3ccircle cx='1150' cy='1150' r='1149' fill='none' stroke='%234A5565' stroke-opacity='0.5' stroke-width='1' stroke-dasharray='20, 12'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1700' height='1700'%3e%3ccircle cx='850' cy='850' r='849' fill='none' stroke='%234A5565' stroke-opacity='0.5' stroke-width='1' stroke-dasharray='20, 12'/%3e%3c/svg%3e"); background-size: 2300px 2300px, 1700px 1700px; } 194#main-main-banner-1 .gradient-bg .concentric-container::after { width: 1104px; height: 1104px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1104' height='1104'%3e%3ccircle cx='552' cy='552' r='551' fill='none' stroke='%234A5565' stroke-opacity='0.5' stroke-width='1' stroke-dasharray='20, 12'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='690' height='690'%3e%3ccircle cx='345' cy='345' r='344' fill='none' stroke='%234A5565' stroke-opacity='0.5' stroke-width='1' stroke-dasharray='16, 10'/%3e%3c/svg%3e"); background-size: 1104px 1104px, 690px 690px; } 195#main-main-banner-1 .gradient-bg .concentric-container .banner-icons { position: relative; height: 100%; width: 700px; } 196#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg { color: #6A7282; border: 0.8px solid #1E2939; background-color: #10182880; border-radius: 80px; padding: 12.8px; width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: bounce 2s ease-in-out infinite; } 197#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg.icon-1 { top: 148px; left: -30px; animation-delay: 0s; } 198#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg.icon-2 { top: 199px; left: 610px; animation-delay: -1.2s; } 199#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg.icon-3 { top: 384px; left: 896px; animation-delay: -2.5s; } 200#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg.icon-4 { top: 564px; left: 40px; animation-delay: -0.8s; } 201#main-main-banner-1 .gradient-bg .concentric-container .banner-icons svg.icon-5 { top: 595px; left: 650px; animation-delay: -3.3s; } 202 203#main-main-banner-1 .banner-contents { z-index: 2; display: flex; width: 1400px; height: 600px; position: relative; justify-self: center; } 204#main-main-banner-1 .banner-contents .banner-left-content { display: flex; flex-direction: column; gap: 40px; justify-content: center; flex: 1; } 205#main-main-banner-1 .banner-contents .banner-left-content h1 { font-size: 64px; line-height: 80px; font-family: 'Pretendard'; font-weight: 600; } 206#main-main-banner-1 .banner-contents .banner-left-content h1 div { color: inherit; font-weight: inherit; } 207#main-main-banner-1 .banner-contents .banner-left-content .banner-subtitle { font-size: 24px; line-height: 34px; } 208#main-main-banner-1 .banner-left-content button { padding: 1rem 18px; display: flex; gap: 4px; border-radius: 100px; font-size: 16px; color: #fff; align-items: center; font-family: 'Pretendard'; font-weight: 500; } 209#main-main-banner-1 .banner-right-content { flex: 1; position: relative; } 210#main-main-banner-1 .banner-right-content .banner-image { position: relative; width: 100%; height: 100%; } 211#main-main-banner-1 .banner-right-content .banner-image img { position: absolute; width: 344px; height: 620px; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); } 212#main-main-banner-1 .banner-right-content .banner-image-items { width: 515.95px; height: 447.51px; position: absolute; z-index: 4;
212 left: 50%; top: 50%; transform: translate(-50%, -54.5%); display: flex; flex-direction: column; justify-content: space-between; } 213#main-main-banner-1 .banner-right-content .banner-image-items .item-card { border: 1px solid #E5E7EB; background-color: #fff; width: 212px; height: 200px; transform: skew(-6deg); border-radius: 28px; position: relative; box-shadow: 2.82px 2.82px 5.63px 0px rgba(0, 0, 0, 0.1); padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; animation: visible-in 0.4s ease-in forwards, bounce-loop 3s infinite ease-in-out 0.4s; opacity: 0; transform: skew(-6deg); will-change: transform, opacity; } 214#main-main-banner-1 .banner-right-content .banner-image-items .item-card:first-child { left: 8px; animation-delay: 0.3s, 0s; } 215#main-main-banner-1 .banner-right-content .banner-image-items .item-card:last-child { display: flex; align-self: flex-end; right: 8px; animation-delay: 0.5s, .5s; } 216#main-main-banner-1 .banner-right-content .banner-image-items .item-card .item-card-content p { font-size: 11.27px; line-height: 1.4; text-align: center; } 217/* a11y: 11.27px ìì í°í¸ë ì ëë¹ 4.5+ íì â gray-500 (#7B8494, ratio 3.76) â gray-700 (#1E2939, ratio 12+) */ 218#main-main-banner-1 .banner-right-content .banner-image-items .item-card .item-card-content p.gray-500 { color: #4B5563 !important; } 219#main-main-banner-1 .banner-right-content .banner-image-items .item-card .item-card-icon { width: 64px; height: 64px; background-color: #3B82F61A; display: flex; align-items: center; justify-content: center; color: #3B82F6; border-radius: 12px; } 220 221/* === Push Service Page (#service-push) â CLS ë°©ì§ì© ë ì´ìì === */ 222/* section:first-of-typeì criticalìì 120pxì´ë css.cssìì 80px â ID í¹ì´ëë¡ ë¯¸ë¦¬ 80px ê³ ì íì¬ CLS ë°©ì§ */ 223.container .content #service-push-main-banner-1 { padding-top: 80px; } 224#service-push-main-banner-1 img, #service-banner-2 img { object-fit: contain; height: auto; } 225#service-push-main-banner-1 { background: linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%), linear-gradient(to right, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } 226#service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 calc(100% - 80%); margin: 0 auto; position: relative; } 227 228#service-push-main-banner-1 .service-main-banner-1-image-2 { position: absolute; left: 12%; top: 25%; width: 21%; } 229#service-push-main-banner-1 .service-main-banner-1-image-3 { position: absolute; left: 70%; top: 15%; width: 20%; } 230.service-main-banner-1-image-2 img, .service-main-banner-1-image-3 img { width: 100%; height: auto; } 231#service-banner-2 .banner-contents { flex-direction: column; gap: 120px; } 232#service-banner-2 .banner-item { display: flex; } 233#service-banner-2 .banner-item .banner-text { align-self: center; flex-direction: column; gap: 24px; display: flex; } 234#service-banner-2 .banner-item .banner-text .banner-text-main div { padding: 8px 12px; background-color: #1E2939; border-radius: 8px; white-space: nowrap; color: white; max-width: fit-content; } 235#service-banner-2 .banner-item .banner-text .banner-text-sub { display: flex; flex-direction: column; gap: 12px; } 236#service-banner-2 .banner-item .banner-text p.title5.mobile { display: none !important; } 237#service-banner-2 .banner-item .service-banner-image-bg { width: 600px; border-radius: 24px; padding: 48px; background-color: #10182880; } 238 239/* === Inapp Service Page (#service-inapp) â CLS ë°©ì§ì© ë ì´ìì === */ 240#service-inapp-main-banner-1 { background: linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%), linear-gradient(to right, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } 241#service-inapp-main-banner-1 .banner-title .banner-subtitle div { display: flex; flex-direction: column; } 242#service-inapp-main-banner-1 .banner-contents { height: 675px; padding-top: 48.5px; padding-bottom: 48.5px; } 243#service-inapp-main-banner-1 .banner-contents .banner-item-bundle { width: 1195.6px; margin: 0px auto; display: flex; align-items: center; gap: 60px; } 244#service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image01 { width: 291.2px; height: 576px; } 245#service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image02, 246#service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image03 { width: 280px; background-color: #fff; border-radius: 12.96px; } 247 248/* === App Service Page (#service-app) â CLS ë°©ì§ì© ë ì´ìì === */ 249/* section:first-of-typeì criticalìì 120pxì´ë css.cssìì 80px â ID í¹ì´ëë¡ ë¯¸ë¦¬ 80px ê³ ì íì¬ CLS ë°©ì§ */ 250.container .content #service-app-main-banner-1 { padding-top: 80px; } 251#service-app-main-banner-1 { background: linear-gradient(to bottom, #030712ff 0%, #03071200 50%, #030712ff 100%), linear-gradient(to right, #2B7FFF4d 0%, #03071280 50%, #2B7FFF4d 100%), #030712; } 252#service-app-main-banner-1 .service-app-main-banner-1-image-1 { width: 405px; z-index: 1; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } 253#service-app-main-banner-1 .banner-contents { position: relative; min-height: 675px; align-items: end; } 254/* App service swiper â CLS ë°©ì§: swiper CSS ë¹ë기 ë¡ë© ì ì´ê¸° flex ìí ì¤ì */ 255/* fetchpriority="high" ì´ë¯¸ì§ ì°ì ë¡ë ì swiper CSS ì§ì° â wrapper blockâflex ì í = ì¹ì ëì´ íë½ CLS 0.927 */ 256#service-app-main-banner-1 .banner-contents .banner-item { padding-bottom: 2rem; } 257#service-app-main-banner-1 .swiper { overflow: hidden; position: relative; } 258#service-app-main-banner-1 .swiper-wrapper { display: flex; position: relative; width: 100%; } 259#service-app-main-banner-1 .swiper-slide { flex-shrink: 0; width: 282px; padding: 32px 24px; } 260 261/* === Price Page (#price-banner-1) â CLS ë°©ì§ì© ë ì´ìì === */ 262#price-banner-1 .banner-title .banner-subtitle div { display: flex; flex-direction: column; } 263#price-banner-1 .banner-contents { display: flex; flex-direction: column; gap: 40px; } 264#price-banner-1 .banner-contents > .price-list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } 265#price-banner-1 .banner-item { padding: 24px; border-radius: 12px; border: 1px solid #1E2939; background-color: #101828; width: 100%; } 266 267/* === Contact Page (#contact-banner-1) â CLS ë°©ì§ì© ë ì´ìì === */ 268#contact-banner-1 .banner-contents .form { width: 880px; max-width: 880px; padding: 40px; border: 1px solid #1E2939; border-radius: 12px; margin: 0px auto; } 269 270/* === Footer â CLS ë°©ì§ === */ 271footer { width: 100%; background-color: #030712 !important; } 272footer .logo { width: 114px; height: 24px; } 273footer .logo a { display: block; width: 100%; height: 100%; } 274footer .logo img { width: 114px; height: 24px; object-fit: contain; } 275 276/* === Keyframes (hero ì ëë©ì´ì ) === */ 277@keyframes visible-in { 0% { opacity: 0; } 100% { opacity: 1; } } 278@keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } 279@keyframes bounce-loop { 0%, 100% { transform: skew(-6deg) translateY(0); } 50% { transform: skew(-6deg) translateY(-16px); } } 280@keyframes pulse-outer { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } } 281 282/* === Tablet === */ 283@media (max-width: 1023px) { 284 .pc { display: none !important; } 285 .mobile { display: none !important; } 286 .tablet { display: flex !important; } 287 header nav { padding: 16px 24px !important; } 288 header nav .pc { display: none !important; } 289 header nav svg.ic-hamburger { display: flex !important; align-self: center; width: 24px; height: 24px; } 290 .container .content { padding: 0 40px; } 291 .container .content section.banner { padding: 80px 0; } 292 .main-banner { width: 100vw; } 293 #main-main-banner-1 { contain: layout style; }
294 /* CLS ë°©ì§: 100svh ëì ë¨ì íí¼ â 820px ê³ ì (tablet/mobile ê³µíµ) */ 295 #main-main-banner-1 .gradient-bg { height: 820px; } 296 #main-main-banner-1 .gradient-bg .concentric-container { left: 0px; height: 820px; } 297 #main-main-banner-1 .banner-contents { flex-direction: column; width: 100%; height: 100svh; padding: 0px 40px; } 298 #main-main-banner-1 .banner-contents .banner-left-content { justify-content: start; flex: 0; } 299 #main-main-banner-1 .banner-contents .banner-left-content button { display: none; } 300 #main-main-banner-1 .banner-contents .banner-left-content h1 { font-size: 56px; line-height: 72px; } 301 /* Push service â tablet */ 302 #service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 108px; } 303 #service-banner-2.banner { gap: 120px !important; } 304 #service-banner-2 .banner-item .banner-text .banner-text-main { display: flex; justify-content: center; } 305 #service-banner-2 .banner-item .banner-text { text-align: center; } 306 #service-banner-2 .banner-item .banner-text p.title5 { display: flex; flex-direction: column; } 307 #service-banner-2 .banner-contents { gap: unset; } 308 #service-banner-2 .banner-contents .gap-80 { gap: 60px !important; } 309 #service-banner-2 .banner-contents .banner-item { flex-direction: column; align-items: center; justify-content: center; margin-top: 120px; } 310 #service-banner-2 .banner-contents .banner-item:first-child { margin-top: unset; } 311 #service-banner-2 .banner-contents .banner-item:nth-of-type(even) { flex-direction: column-reverse; align-items: center; justify-content: center; } 312 /* Inapp service â tablet */ 313 #service-inapp-main-banner-1 .pc { display: none !important; } 314 #service-inapp-main-banner-1 .tablet { display: flex !important; } 315 #service-inapp-main-banner-1 .banner-contents { height: 393.75px; } 316 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle { gap: 35px; justify-content: center; } 317 #service-inapp-main-banner-1 .banner-contents .banner-item .flex-col.gap-40 { gap: 23.33px !important; } 318 #service-inapp-main-banner-1 .banner-contents .banner-item .flex-col.gap-40 .flex.gap-40 { gap: 23.33px !important; } 319 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .circle { width: 46.67px; height: 46.67px; } 320 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .circle i { width: 18.67px; height: 18.67px; } 321 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .horizontal-line { width: 93.33px; } 322 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image01 { width: 169.87px; height: 336px; } 323 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .line-flow { width: 107.57px; height: 141.17px; } 324 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .line-flow::before { width: 60.9px; } 325 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .line-flow .top-line { left: 60.9px; width: 46.67px; } 326 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .line-flow .bottom-line { left: 60.9px; width: 46.67px; } 327 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .line-flow::after { content: ""; position: absolute; left: 60.9px; height: 141.17px; border-left: 2px dashed #E5E7EB; } 328 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item:last-child.gap-40 { gap: 23.33px !important; } 329 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image02, 330 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image03 { width: 163.33px; background-color: #fff; border-radius: 12.96px; } 331 /* App service â tablet */ 332 #service-app-main-banner-1 .banner-contents { min-height: 530px; } 333 /* App service â tablet image width (prevents CLS: critical 405px â css.css 275px shift) */ 334 #service-app-main-banner-1 .service-app-main-banner-1-image-1 { width: 275px; } 335 /* App service swiper â tablet slide width matches css.css tablet override */ 336 #service-app-main-banner-1 .swiper-slide { width: 211px; padding: 20px 15px; } 337 /* Price â tablet */ 338 #price-banner-1 .price-list { display: flex !important; flex-direction: column !important; } 339} 340 341/* === Mobile === */ 342@media (max-width: 767px) { 343 .pc { display: none !important; } 344 .mobile { display: flex !important; } 345 .tablet { display: none !important; } 346 .container .content { padding: 0 24px; } 347 .container .content section.banner { padding: 80px 0; } 348 .banner .banner-title h1 div, .banner .banner-title h2 div { font-size: 32px; line-height: 42px; } 349 .banner .banner-title .banner-subtitle { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } 350 .banner .banner-title .banner-subtitle div { font-size: 16px; line-height: 24px; display: flex; flex-direction: column; } 351 #main-main-banner-1 .banner-contents { padding: 0px 24px; } 352 /* CLS ë°©ì§: ë©ì¸ ë°°ë 모ë°ì¼ ìµì ëì´ (PSI 측ì ì 823px) */ 353 #main-main-banner-1 { min-height: 820px; }
354 /* CLS ë°©ì§: 100svh ëì ë¨ì â í½ì ê³ ì (모ë°ì¼ viewport ê°ë³ì ë°ë¥¸ shift íí¼) */ 355 #main-main-banner-1 .gradient-bg { height: 820px !important; } 356 /* Push service â mobile */ 357 #service-push-main-banner-1 .service-main-banner-1-image-1 { padding: 0 20px; } 358 #service-push-main-banner-1 .service-main-banner-1-image-2 { left: 0%; top: 30%; width: 45%; } 359 #service-push-main-banner-1 .service-main-banner-1-image-3 { left: 53%; width: 45%; } 360 /* CLS ë°©ì§: push ë°°ë 모ë°ì¼ ìµì ëì´ (title + image-1 233px + í¨ë© ì¶ì ) */ 361 #service-push-main-banner-1 { min-height: 600px; } 362 #service-banner-2 .banner-item p.title3 { font-size: 20px; line-height: 28px; } 363 #service-banner-2 .banner-item p.title5 { font-size: 16px; line-height: 24px; } 364 #service-banner-2 .banner-item .service-banner-image-bg { width: unset; padding: 25px; } 365 #service-banner-2 .banner-item .banner-text p.title5.pc { display: none !important; } 366 /* Inapp service â mobile */ 367 #service-inapp-main-banner-1 .banner-title { min-height: 220px; } 368 /* CLS ë°©ì§: inapp ë°°ë 모ë°ì¼ ìµì ëì´ (PSI 측ì ì 1167px) */ 369 #service-inapp-main-banner-1 { min-height: 1100px; } 370 #service-inapp-main-banner-1 .banner-contents { height: auto; padding: 0px 24px; } 371 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle { gap: 16px; justify-content: center; flex-direction: column; } 372 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .circle { width: 36px; height: 36px; } 373 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .circle i { width: 14.4px; height: 14.4px; } 374 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .line-container { width: 124px; position: relative; } 375 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .line-container .horizontal-line { border-bottom: 1px dashed #E5E7EB; width: 124px; position: absolute; top: 50%; transform: translateY(-50%); } 376 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .line-container .horizontal-line .dot { display: block; width: 3px; height: 3px; position: relative; top: 20px; left: calc(50% - 1px); transform: translateX(calc(-50% + 1px)); } 377 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .vertical-line { height: 40px; border-left: 1px dashed #E5E7EB; position: relative; } 378 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .vertical-line.half { height: 20px; } 379 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .vertical-line .dot { width: 3px; height: 3px; top: 0px; position: absolute; left: calc(50% - 1px); transform: translateX(calc(-50% + 1px)); } 380 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image01 { width: 128px; height: 253.19px; } 381 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image02, 382 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item .banner-item-image03 { width: 100%; } 383 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item:last-child { flex-direction: column; gap: 16px !important; } 384 #service-inapp-main-banner-1 .banner-contents .banner-item-bundle .banner-item:last-child .flex-col.gap-24 { flex-direction: row; } 385 /* App service â mobile */ 386 #service-app-main-banner-1 .banner-contents { min-height: 500px; } 387 /* Contact â mobile */ 388 #contact-banner-1 .banner-contents .form { padding: 40px 20px; } 389 #contact-banner-1 .banner-contents .form > .flex { flex-direction: column; } 390 #service-banner-2 .banner-item .banner-text p.title5.mobile { display: flex !important; } 391 #service-banner-2 .banner-contents .gap-80 { gap: 40px !important; } 392 /* main-banner hero title font â must match css.css .main-banner rules to prevent CLS */ 393 .main-banner .banner-title h1 div, .main-banner .banner-title h2 div { display: flex; flex-direction: column; font-size: 40px; line-height: 52px; } 394 .main-banner .banner-title .banner-subtitle div { display: flex; flex-direction: column; font-size: 20px; line-height: 28px; } 395} 396 397/* Blog page â prevent CLS when main.css loads async */ 398.blog-section { padding: 80px 0; max-width: 1200px; margin: 0 auto; } 399.blog-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 21px; } 400.blog-section-title { font-size: 40px; line-height: 52px; font-weight: 700; color: #F9FAFB; } 401.blog-tabs { display: flex; gap: 24px; border-bottom: 1px solid #1F2937; margin-bottom: 40px; } 402.blog-tab { padding: 12px 0; height: 50px; font-size: 18px; font-weight: 500; background: none; border: none; cursor: pointer; } 403.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 48px; } 404.blog-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; } 405.blog-card-thumbnail { position: relative; width: 100%; height: 188px; background-color: #1F2937; border-radius: 12px; overflow: hidden; } 406.blog-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; } 407@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } 408@media (max-width: 767px) { .blog-section { padding: 40px 0; } .blog-grid { grid-template-columns: 1fr; column-gap: 16px; row-gap: 40px; } .blog-card-thumbnail { height: auto !important; aspect-ratio: 4 / 3; } } 409 410/* Blog detail page â prevent CLS when main.css loads async */ 411.blog-detail-section { padding: 80px 0; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; } 412.blog-detail-title { font-size: 40px; font-weight: 700; color: #111827; line-height: 52px; } 413.blog-detail-summary { font-size: 18px; font-weight: 400; color: #1E2939;
413 line-height: 26px; } 414.blog-detail-meta { font-size: 14px; color: #9CA3AF; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid #E5E7EB; } 415.blog-detail-content { font-size: 16px; color: #374151; line-height: 1.8; overflow: hidden; } 416.blog-detail-content img { max-width: 100%; height: auto !important; } 417@media (max-width: 767px) { .blog-detail-section { padding: 40px 0; } .blog-detail-title { font-size: 22px; } .blog-detail-content { font-size: 15px; } } 418</style> 419 <link rel="preload" href="https://www.appboxapp.com/build/assets/main.YLs9_RcH.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> 420 <noscript><link rel="stylesheet" href="https://www.appboxapp.com/build/assets/main.YLs9_RcH.css"></noscript> 421 422 <!-- sprite.svg preload (íì´ë¡ ì¹ì ìì ë¤ì 참조) â LCP ì´ë¯¸ì§ ëìí ë³´í¸ë¥¼ ìí´ ë®ì ì°ì ìì --> 423 <link rel="preload" href="https://www.appboxapp.com/common/icons/sprite.svg" as="image" type="image/svg+xml" fetchpriority="low"> 424 425 426 427 <!-- Google tag (gtag.js) - ë¸ë¼ì°ì ì í´ ì ëë ì¬ì©ì ì¸í°ëì ì ë¡ë© --> 428
428<script> 429 function loadGTM() { 430 if (window._gtmLoaded) return; 431 window._gtmLoaded = true; 432 var s = document.createElement('script'); 433 s.src = 'https://www.googletagmanager.com/gtag/js?id=AW-765943114'; 434 s.async = true; 435 document.head.appendChild(s); 436 window.dataLayer = window.dataLayer || []; 437 function gtag(){dataLayer.push(arguments);} 438 window.gtag = gtag; 439 gtag('js', new Date()); 440 gtag('config', 'AW-765943114'); 441 } 442 if ('requestIdleCallback' in window) { 443 requestIdleCallback(loadGTM, {timeout: 8000}); 444 } else { 445 window.addEventListener('load', function(){setTimeout(loadGTM, 4000);}); 446 } 447 ['scroll','click','touchstart','keydown'].forEach(function(e){ 448 document.addEventListener(e, loadGTM, {once:true,passive:true}); 449 }); 450 </script>
450 451 452 453 <link rel="modulepreload" href="https://www.appboxapp.com/build/assets/event.Do-hOxLi.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/common.CBktQDYm.js" />
453<script type="module" src="https://www.appboxapp.com/build/assets/event.Do-hOxLi.js" data-navigate-track="reload"></script>
453<script type="module" src="https://www.appboxapp.com/build/assets/common.CBktQDYm.js" data-navigate-track="reload"></script>
453 454 455
455<script> 456 const ANONYMOUS_ID = !"" ? 457 "" : 458 ""; 459 </script>
459 460 461
461<script src="https://consoledev.appboxapp.com/import/appbox.v3.js"></script>
461 462</head> 463 464<body> 465 <header class=""> 466 <nav class="justify-between"> 467 <div class="flex align-center"> 468 <div class="logo"> 469 <a href="https://www.appboxapp.com"> 470 <img src="https://www.appboxapp.com/console-images/images/logo/logo-white.webp" alt="Appbox ë¡ê³ " width="480" height="96"> 471 </a> 472 </div> 473 <ul class="flex-row gap-20 pl-40px pc align-center"> 474 <li class="menu"> 475 <a href="https://www.appboxapp.com/service/push" class="">í¸ì ë©ìì§</a> 476 </li> 477 <li class="menu"> 478 <a href="https://www.appboxapp.com/service/inapp" class="">ì¸ì± ë©ìì§</a> 479 </li> 480 <li class="menu"> 481 <a href="https://www.appboxapp.com/service/app" class="">ì¹ ì± ê¸°ë¥</a> 482 </li> 483 <li class="menu"> 484 <a href="https://www.appboxapp.com/price" class="">ìê¸ì </a> 485 </li> 486 <li class="menu"> 487 <a href="https://www.appboxapp.com/blog" class="active">ë¸ë¡ê·¸</a> 488 </li> 489 <li class="menu"> 490 <a href="https://www.appboxapp.com/contact" class="">문ì</a> 491 </li> 492 <li class="menu"> 493 <div class="dropdown-button "> 494 ê°ë°ìì¼í° 495 </div> 496 497 <div class="dropdown-menu"> 498 <div class="dropdown-item"> 499 <div class="item-row"> 500 <a href="https://www.appboxapp.com/guide/appbox"> 501 SDK ê°ì´ë 502 </a> 503 </div> 504 </div> 505 <div class="dropdown-item"> 506 <div class="item-row"> 507 <a href="https://www.appboxapp.com/guide/push"> 508 ì± ì°ë ê°ì´ë 509 </a> 510 </div> 511 </div> 512 <div class="dropdown-item"> 513 <div class="item-row"> 514 <a href="https://www.appboxapp.com/guide/console"> 515 ì½ì ì¬ì©ì ê°ì´ë 516 </a> 517 </div> 518 </div> 519 </div> 520 </li> 521 </ul> 522 </div> 523 524 <div class="flex gap-16 justify-center align-center pc"> 525 <button class="login white " 526 onclick="location.href='https://console.appboxapp.com'">ë¡ê·¸ì¸</button> 527 528 <button class="experience primary white" 529 onclick="javascript:window.location.href='https://www.appboxapp.com/app-build'">30ì´ ì± ë¹ë</button> 530 </div> 531 <svg class="ic ic-hamburger pointer" style="color:#6B7280" onclick="side();"><use href="https://www.appboxapp.com/common/icons/sprite.svg#hamburger"></use></svg> 532 </nav> 533 534</header> 535 <div class="toast-container"> 536 <div class="toast-message"> 537 <div class="toast-message-icon"> 538 <svg class="ic" width="16" height="16" style="color:#fff"><use href="https://www.appboxapp.com/common/icons/sprite.svg#exclamation"></use></svg> 539 </div> 540 <div class="toast-message-text"></div> 541 </div> 542 <div class="toast-message-close pointer" onclick="closeToast()"> 543 <i class="ri-close-line text-white"></i> 544 </div> 545</div> 546 <div class="container "> 547 <main class="content "> 548 <aside > 549 550 <div class="flex-col gap-24"> 551 <ul class="flex-col gap-8"> 552 <li class="service-group ">
553 <span class="service-group-label">ìë¹ì¤</span> 554 <ul class="part open"> 555 <li > 556 <a href="https://www.appboxapp.com/service/push"> 557 í¸ì ë©ìì§ 558 </a> 559 </li> 560 <li > 561 <a href="https://www.appboxapp.com/service/inapp"> 562 ì¸ì± ë©ìì§ 563 </a> 564 </li> 565 <li > 566 <a href="https://www.appboxapp.com/service/app"> 567 ì¹ ì± ê¸°ë¥ 568 </a> 569 </li> 570 </ul> 571 </li> 572 <li > 573 <a href="https://www.appboxapp.com/price">ìê¸ì </a> 574 </li> 575 <li > 576 <a href="https://www.appboxapp.com/blog">ë¸ë¡ê·¸</a> 577 </li> 578 <li > 579 <a href="https://www.appboxapp.com/contact">문ì</a> 580 </li> 581 <li > 582 <a href="#" onclick="openLayer(this)" > 583 ê°ë°ìì¼í°<svg class="ic sm" style="color:#9CA3AF"><use href="https://www.appboxapp.com/common/icons/sprite.svg#right-arrow"></use></svg> 584 </a> 585 <ul class="part"> 586 <li > 587 <a href="https://www.appboxapp.com/guide/appbox"> 588 SDK ê°ì´ë 589 </a> 590 </li> 591 <li > 592 <a href="https://www.appboxapp.com/guide/push"> 593 ì± ì°ë ê°ì´ë 594 </a> 595 </li> 596 <li > 597 <a href="https://www.appboxapp.com/guide/console"> 598 ì½ì ì¬ì© ê°ì´ë 599 </a> 600 </li> 601 </ul> 602 </li> 603 <li > 604 <a href="https://www.appboxapp.com/storage/mobpa/image/loading/AppBox_IntroductionMobile.pdf" target="_blank">ì±ë°ì¤ ì루ì ìê°ì</a> 605 </li> 606 </ul> 607 <button class="primary white demo" onclick="openPopup()">ì± ë¹ëí기</button> 608 </div> 609</aside> 610 <section class="blog-section" id="blog-section"> 611 <h1 class="blog-section-title">ì±ë°ì¤ ë¸ë¡ê·¸</h1> 612 613 <div class="blog-tabs"> 614 <button class="blog-tab active" data-category="all">ì ì²´</button> 615 <button class="blog-tab" data-category="1">ì± ë¹ë</button> 616 <button class="blog-tab" data-category="2">íì© ì</button> 617 <button class="blog-tab" data-category="3">ì± ìíê³</button> 618 </div> 619 620 621 <div class="blog-grid" id="blogGrid"> 622 <a href="https://www.appboxapp.com/blog/in-app-message-use" class="blog-card" data-category="1"> 623 <div class="blog-card-thumbnail"> 624 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/04/f72916a5-620c-481c-bcd2-30bd83055f38.webp" 625 alt="ì¸ì± ë©ìì§ë?" 626 width="300" height="188" 627 fetchpriority="high" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 628 <span class="blog-card-badge">ì± ë¹ë</span> 629 </div> 630 <div class="blog-card-body"> 631 <h2 class="blog-card-title">ì¸ì± ë©ìì§ë?</h2> 632 633 </div> 634 </a> 635 <a href="https://www.appboxapp.com/blog/web-to-app-convert" class="blog-card" data-category="1"> 636 <div class="blog-card-thumbnail"> 637 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbn
637ail/2026/04/2660f4d8-e1f6-4aa8-9cb3-3cb5edb70775.webp" 638 alt="ì¹ì ì±ì¼ë¡ ë³ííë ê°ì¥ ë¹ ë¥¸ ë°©ë²" 639 width="300" height="188" 640 onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 641 <span class="blog-card-badge">ì± ë¹ë</span> 642 </div> 643 <div class="blog-card-body"> 644 <h2 class="blog-card-title">ì¹ì ì±ì¼ë¡ ë³ííë ê°ì¥ ë¹ ë¥¸ ë°©ë²</h2> 645 646 </div> 647 </a> 648 <a href="https://www.appboxapp.com/blog/googleplay-review-process" class="blog-card" data-category="2"> 649 <div class="blog-card-thumbnail"> 650 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/04/5869b658-18d2-4ac7-835a-a21200ad0770.webp" 651 alt="êµ¬ê¸ íë ì´ì¤í ì´ ì± ë±ë¡ ì ì°¨ ìì ì 리 (2026ë ìµì )" 652 width="300" height="188" 653 onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 654 <span class="blog-card-badge">íì© ì</span> 655 </div> 656 <div class="blog-card-body"> 657 <h2 class="blog-card-title">êµ¬ê¸ íë ì´ì¤í ì´ ì± ë±ë¡ ì ì°¨ ìì ì 리 (2026ë ìµì )</h2> 658 659 </div> 660 </a> 661 <a href="https://www.appboxapp.com/blog/app-develop-reality-appbox" class="blog-card" data-category="1"> 662 <div class="blog-card-thumbnail"> 663 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/435b7edb-7540-460b-856b-63f248df7056.webp" 664 alt="ì§ì§ ë ¸ì½ë ì±ì ì´ë»ê² ë§ë¤ì´ì¼ íëê°?" 665 width="300" height="188" 666 onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 667 <span class="blog-card-badge">ì± ë¹ë</span> 668 </div> 669 <div class="blog-card-body"> 670 <h2 class="blog-card-title">ì§ì§ ë ¸ì½ë ì±ì ì´ë»ê² ë§ë¤ì´ì¼ íëê°?</h2> 671 672 </div> 673 </a> 674 <a href="https://www.appboxapp.com/blog/cloud-nocode-app-build" class="blog-card" data-category="1"> 675 <div class="blog-card-thumbnail"> 676 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/28793798-6669-4196-b97d-97084c0d75ca.webp" 677 alt="ë ¸ì½ë ì±ë¹ë, ì´ì ë 'ì± ìì±'ìì ëëë©´ ì ë©ëë¤" 678 width="300" height="188" 679 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 680 <span class="blog-card-badge">ì± ë¹ë</span> 681 </div> 682 <div class="blog-card-body"> 683 <h2 class="blog-card-title">ë ¸ì½ë ì±ë¹ë, ì´ì ë 'ì± ìì±'ìì ëëë©´ ì ë©ëë¤</h2> 684 685 </div> 686 </a> 687 <a href="https://www.appboxapp.com/blog/web-to-app-2026-startup" class="blog-card" data-category="1"> 688 <div class="blog-card-thumbnail"> 689 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbn
689ail/2026/04/0c1ff68e-eb6b-4a6f-b904-b0c180b42aa9.webp" 690 alt="1ìµì§ë¦¬ ì±ì´ ì ë§ íìí´ì?" 691 width="300" height="188" 692 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 693 <span class="blog-card-badge">ì± ë¹ë</span> 694 </div> 695 <div class="blog-card-body"> 696 <h2 class="blog-card-title">1ìµì§ë¦¬ ì±ì´ ì ë§ íìí´ì?</h2> 697 698 </div> 699 </a> 700 <a href="https://www.appboxapp.com/blog/app-develop-trand-2026" class="blog-card" data-category="3"> 701 <div class="blog-card-thumbnail"> 702 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/e7c6fcee-9a23-4d2d-b8ab-7b1e295de6c6.webp" 703 alt="ì± ê°ë°, ì´ì 무ë£ì ëë¤. 2026ë ë ¸ì½ëì íì¤" 704 width="300" height="188" 705 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 706 <span class="blog-card-badge">ì± ìíê³</span> 707 </div> 708 <div class="blog-card-body"> 709 <h2 class="blog-card-title">ì± ê°ë°, ì´ì 무ë£ì ëë¤. 2026ë ë ¸ì½ëì íì¤</h2> 710 711 </div> 712 </a> 713 <a href="https://www.appboxapp.com/blog/appbox-builds-step-on-to-six" class="blog-card" data-category="1"> 714 <div class="blog-card-thumbnail"> 715 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/d1cd6df7-ab90-4b9b-aadb-bb08690a3ff4.webp" 716 alt="ì±ë°ì¤ í´ë¼ì°ë ë¹ë ìì ì ë³µ, OS ì íë¶í° QR ë°°í¬ê¹ì§" 717 width="300" height="188" 718 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 719 <span class="blog-card-badge">ì± ë¹ë</span> 720 </div> 721 <div class="blog-card-body"> 722 <h2 class="blog-card-title">ì±ë°ì¤ í´ë¼ì°ë ë¹ë ìì ì ë³µ, OS ì íë¶í° QR ë°°í¬ê¹ì§</h2> 723 724 </div> 725 </a> 726 <a href="https://www.appboxapp.com/blog/naviveapp-vs-appboxapp" class="blog-card" data-category="3"> 727 <div class="blog-card-thumbnail"> 728 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/0ddb67dc-a048-4e28-a3a2-ec462cb0c8bc.webp" 729 alt="ì¹ì¬ì´í¸ ì ìë¶í° ì± ì¶ìê¹ì§ 2주면 ì¶©ë¶í©ëë¤" 730 width="300" height="188" 731 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 732 <span class="blog-card-badge">ì± ìíê³</span> 733 </div> 734 <div class="blog-card-body"> 735 <h2 class="blog-card-title">ì¹ì¬ì´í¸ ì ìë¶í° ì± ì¶ìê¹ì§ 2주면 ì¶©ë¶í©ëë¤</h2> 736 737 </div> 738 </a> 739 <a href="https://www.appboxapp.com/blog/webview-sns-login" class="blog-card" data-category="2"> 740 <div class="blog-card-thumbnail"> 741 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbn
741ail/2026/03/68d09162-8480-4bf9-983f-ef963daf569c.webp" 742 alt="WebViewìì SNS ë¡ê·¸ì¸ì´ ì ëë ì´ì , ê·¸ë¦¬ê³ í´ê²°ì± " 743 width="300" height="188" 744 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 745 <span class="blog-card-badge">íì© ì</span> 746 </div> 747 <div class="blog-card-body"> 748 <h2 class="blog-card-title">WebViewìì SNS ë¡ê·¸ì¸ì´ ì ëë ì´ì , ê·¸ë¦¬ê³ í´ê²°ì± </h2> 749 750 </div> 751 </a> 752 <a href="https://www.appboxapp.com/blog/pwa-webview-differences" class="blog-card" data-category="3"> 753 <div class="blog-card-thumbnail"> 754 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/0706a4c1-2a6a-4bd9-a1eb-0ebd7a97f52c.webp" 755 alt="PWA vs WebView ì±, ëê° ë¤ë¥¼ê¹?" 756 width="300" height="188" 757 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 758 <span class="blog-card-badge">ì± ìíê³</span> 759 </div> 760 <div class="blog-card-body"> 761 <h2 class="blog-card-title">PWA vs WebView ì±, ëê° ë¤ë¥¼ê¹?</h2> 762 763 </div> 764 </a> 765 <a href="https://www.appboxapp.com/blog/appbox-advantage" class="blog-card" data-category="3"> 766 <div class="blog-card-thumbnail"> 767 <img src="https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/b2689756-bb7a-4760-a00f-32cb2ea8aac2.webp" 768 alt="ì± ê°ë°ì ì²ìë¶í° ë§¡ê²¼ë¤ê° ë§íë ì´ì , ê·¸ë¦¬ê³ ì°ë¦¬ê° ì íí ë°©ë²" 769 width="300" height="188" 770 loading="lazy" onerror="this.onerror=null; this.src='https://www.appboxapp.com/console-images/images/image/empty-image.png'"> 771 <span class="blog-card-badge">ì± ìíê³</span> 772 </div> 773 <div class="blog-card-body"> 774 <h2 class="blog-card-title">ì± ê°ë°ì ì²ìë¶í° ë§¡ê²¼ë¤ê° ë§íë ì´ì , ê·¸ë¦¬ê³ ì°ë¦¬ê° ì íí ë°©ë²</h2> 775 776 </div> 777 </a> 778 </div> 779 780 781 <div class="blog-empty hidden" id="blogEmpty"> 782 <p>ë±ë¡ë ê²ìê¸ì´ ììµëë¤.</p> 783 </div> 784 785 </section> 786 787 </main> 788 </div> 789 790 <footer class=" py-5"> 791 <div class="footer-content"> 792 <div class="flex-row justify-between mb-40px max-w-1200px"> 793 <div> 794 <div class="logo mb-24px"> 795 <a href="https://www.appboxapp.com"> 796 <img src="https://www.appboxapp.com/landing-images/common/footerLogo.webp" alt="Appbox ë¡ê³ " width="114" 797 height="24" /> 798 </a> 799 </div> 800 <address class="flex-col gap-8" style="font-style:normal;"> 801 <div class=" gray-400 text-14">주ìíì¬ ëª¨ë°ì¼íí¸ëì¦ 802 <a href="tel:023660738" class="gray-400 text-14">02-366-0738</a> 803 </div> 804 <div class=" gray-400 text-14"> 805 ì¬ì ì ë±ë¡ 617-88-00470 806 </div> 807 <div class=" gray-400 text-14">
808 ìì¸ ë§í¬êµ¬ ìëì»µë¡ 196, ëëª ë¹ì²¸ìí° 14층</div> 809 <div class=" gray-400 text-14"> 810 íµì í매ì ì ê³ 2025-ìì¸ë§í¬-0816 811 </div> 812 <div class=" gray-400 text-14"> 813 [email protected]</div> 814 </address> 815 </div> 816 <div class="flex-row gap-60 pc"> 817 <ul> 818 <li class=" gray-300 font-16px line-24px">ìë¹ì¤ 819 820 821 </li> 822 823 <li> 824 <a href="https://www.appboxapp.com/service/push"> í¸ì ë©ìì§ 825 </a> 826 </li> 827 <li> 828 <a href="https://www.appboxapp.com/service/inapp"> 829 ì¸ì± ë©ìì§ 830 </a> 831 </li> 832 <li> 833 <a href="https://www.appboxapp.com/service/app"> 834 ì¹ ì± ê¸°ë¥ ì루ì 835 </a> 836 </li> 837 </ul> 838 <ul> 839 <li> 840 <a class=" gray-300 font-16px line-24px" 841 href="https://www.appboxapp.com/price">ìê¸ì </a> 842 </li> 843 </ul> 844 <ul> 845 <li> 846 <a class=" gray-300 font-16px line-24px" 847 href="https://www.appboxapp.com/contact">문ì</a> 848 </li> 849 850 </ul> 851 <ul> 852 <li class=" gray-300 font-16px line-24px"> 853 ê°ë°ìì¼í°</li> 854 <li> 855 <a href="https://www.appboxapp.com/guide/appbox"> 856 SDK ê°ì´ë 857 </a> 858 </li> 859 <li> 860 <a href="https://www.appboxapp.com/guide/push"> 861 ì± ì°ë ê°ì´ë 862 </a> 863 </li> 864 <li> 865 <a href="https://www.appboxapp.com/guide/console"> 866 ì½ì ì¬ì©ì ê°ì´ë 867 </a> 868 </li> 869 </ul> 870 </div> 871 </div> 872 <div class="flex justify-between w-full terms"> 873 <div class="copyright"> 874 <span class="gray-500 text-14">© Appbox. All Rights Reserved.</span> 875 </div> 876 <ul class="flex-row gap-24"> 877 <li class=" gray-500 pc"> 878 <a href="https://www.appboxapp.com/storage/mobpa/image/loading/AppBox_Introduction.pdf" target="_blank">ì±ë°ì¤ 879 ì루ì ìê°ì</a> 880 </li> 881 <li class=" gray-500 "> 882 <a href="https://www.appboxapp.com/policy/terms/use" target="_blank">ì´ì©ì½ê´</a> 883 </li> 884 <li class=" gray-500 "> 885 <a href="https://www.appboxapp.com/policy/privacy" target="_blank">ê°ì¸ì ë³´ì²ë¦¬ë°©ì¹¨</a> 886 </li> 887 <li class=" gray-500 "> 888 <a href="https://www.appboxapp.com/policy/terms/push" target="_blank">ë°ì¡ ìë¹ì¤ ì´ì©ì½ê´</a> 889 </li> 890 </ul> 891 </div> 892 </div> 893</footer> 894 <div class="dim" id="dim"></div> 895 <div class="spinner"></div> 896 <div class="demopopup flex-col gap-24 " id="popup"> 897 <div class="flex-col gap-24"> 898 <h6 class=" white popup-title">ì± ë°ëª¨ì²´í</h6> 899 <svg class="ic lg absolute right-20px top-20px pointer" style="color:#6B7280" onclick="closePopup('popup')"><use href="https://www.appboxapp.com/common/icons/sprite.svg#close"></use></svg> 900 <h5 class=" white popup-subtitle"> 901 ì§ê¸ ì¹ì¬ì´í¸ 주ì를 ì ë ¥íê³ <br /> 902 ë°ëª¨ ì±ì ì²´íí´ ë³´ì¸ì! 903 </h5> 904 905 <div class="text-16 gray-300 "> 906 ì±ì¼ë¡ ë°ê¾¸ê³ ì¶ì ë¹ì ì ì¹ì¬ì´í¸ 주ì를 ì ë ¥í´ ë³´ì¸ì. 907 ì¦ê° ì²´íí ì ìë ë°ëª¨ ì±ì ë°ì ì ììµëë¤. 908 </div> 909 <div class="input-group"> 910 <div class="flex-col gap-12"> 911 <div class="input-box"> 912 <input class="text-14 bg-gray-800 white text-center" 913 placeholder="ì¹ ì¬ì´í¸ 주ì를 ì ë ¥í´ì£¼ì¸ì" id="inputDomain" /> 914 </div> 915 </div> 916 <p class="support-msg"></p> 917 </div> 918 </div> 919 <div> 920 <button class="w-full primary demo" data-origin="popup" 921 onclick="gtag_report_conversion_demo('checkDomain', 'inputDomain')">ì± ë°ëª¨ì²´í</button> 922 </div> 923</div> 924 <div class="demopopup qr " id="qrpopup"> 925 <div class="flex-col gap-24 align-center w-full"> 926 <h6 class=" white popup-title">QR ì½ë</h6> 927 <svg class="ic lg absolute right-20px top-20px pointer" style="color:#6B7280" onclick="closePopup('qrpopup')"><use href="https://www.appboxapp.com/common/icons/sprite.svg#close"></use></svg> 928 <h5 class=" white popup-subtitle"> 929 QR ì½ë를 ì°ê³ ì±ì¼ë¡ ë°ë<br /> 930 ì¹ì¬ì´í¸ë¥¼ ì§ê¸ ë°ë¡ íì¸í´ ë³´ì¸ì! 931 </h5> 932 <div class="qr-img">
933 <canvas id="qrcode"></canvas> 934 </div> 935 936 <span id="domain" class="domain-block w-full">www.naver.com</span> 937 <div class="flex-col gap-12"> 938 <div class="text-16 gray-300 ">QR ì½ë를 ì´¬ìíë©´ ì ë ¥íì 주ìì<br /> 939 ì± ìì íë©´ì í ì¤í¸í ì ììµëë¤. 940 </div> 941 <div class=" gray-500 text-14"> 942 * ì¤ìº í ë°ë¡ ì± ë¤ì´ë¡ë ì´ëí©ëë¤. 943 </div> 944 </div> 945 </div> 946 947</div> 948
948<script type="application/ld+json"> 949 { 950 "@context": "https://schema.org", 951 "@type": "BreadcrumbList", 952 "itemListElement": [ 953 { "@type": "ListItem", "position": 1, "name": "í", "item": "https://www.appboxapp.com/" }, 954 { "@type": "ListItem", "position": 2, "name": "ë¸ë¡ê·¸", "item": "https://www.appboxapp.com/blog" } 955 ] 956 } 957 </script>
957 958
958<script type="application/ld+json"> 959 { 960 "@context": "https://schema.org", 961 "@type": "Blog", 962 "name": "ì±ë°ì¤ ë¸ë¡ê·¸", 963 "description": "ë ¸ì½ë ì± ê°ë°, í´ë¼ì°ë ì± ë¹ë, ì±ë°ì¤ íì´ ì§ì ìëë¤.", 964 "url": "https://www.appboxapp.com/blog", 965 "publisher": { 966 "@type": "Organization", 967 "name": "ì±ë°ì¤", 968 "url": "https://www.appboxapp.com", 969 "logo": { 970 "@type": "ImageObject", 971 "url": "https://www.appboxapp.com/storage/mobpa/image/logo/logo272.png" 972 } 973 }, 974 "blogPost": [ 975 { 976 "@type": "BlogPosting", 977 "headline": "ì¸ì± ë©ìì§ë? ì¢ ë¥Â·íì©ë²Â·ì íì¨ê¹ì§ ìë²½ ì 리", 978 "url": "https://www.appboxapp.com/blog/in-app-message-guide", 979 "articleSection": "íì© ì", 980 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/04/f72916a5-620c-481c-bcd2-30bd83055f38.jpg", 981 "datePublished": "2026-04-25T14:18:07+09:00", 982 "dateModified": "2026-04-25T19:34:59+09:00", 983 "author": { 984 "@type": "Organization", 985 "name": "ì±ë°ì¤" 986 }, 987 "publisher": { 988 "@type": "Organization", 989 "name": "ì±ë°ì¤" 990 } 991 }, 992 { 993 "@type": "BlogPosting", 994 "headline": "ì¹ì ì±ì¼ë¡ ë³ííë ê°ì¥ ë¹ ë¥¸ ë°©ë² â ì±ë°ì¤(Appbox) ìë²½ ê°ì´ë", 995 "url": "https://www.appboxapp.com/blog/web-to-app-guide", 996 "articleSection": "ì± ë¹ë", 997 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/04/2660f4d8-e1f6-4aa8-9cb3-3cb5edb70775.jpg", 998 "datePublished": "2026-04-25T13:42:16+09:00", 999 "dateModified": "2026-05-13T13:40:37+09:00", 1000 "author": { 1001 "@type": "Organization", 1002 "name": "ì±ë°ì¤" 1003 }, 1004 "publisher": { 1005 "@type": "Organization", 1006 "name": "ì±ë°ì¤" 1007 } 1008 }, 1009 { 1010 "@type": "BlogPosting", 1011 "headline": "êµ¬ê¸ íë ì´ì¤í ì´ ì± ë±ë¡ ì ì°¨ ìì ì 리 (2026ë ìµì )", 1012 "url": "https://www.appboxapp.com/blog/playstore-registration-guide", 1013 "articleSection": "íì© ì", 1014 "image": "https://www.appboxapp.com/blog/images/playstore-registration-guide-thumbnail.png", 1015 "datePublished": "2026-04-11T13:56:00+09:00", 1016 "dateModified": "2026-05-13T13:40:37+09:00", 1017 "author": { 1018 "@type": "Organization", 1019 "name": "ì±ë°ì¤" 1020 }, 1021 "publisher": { 1022 "@type": "Organization", 1023 "name": "ì±ë°ì¤" 1024 } 1025 }, 1026 { 1027 "@type": "BlogPosting", 1028 "headline": "ì§ì§ ë ¸ì½ë ì±ì´ë? ì¹ì¬ì´í¸ë¥¼ 30ì´ ë§ì ì±ì¼ë¡ ë§ëë ë²", 1029 "url": "https://www.appboxapp.com/blog/app-develop-reality-appbox", 1030 "articleSection": "기ì ë¸ë¡ê·¸", 1031 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/1c5efd26-a9bb-4486-9592-137e03b18f5c.png", 1032 "datePublished": "2026-03-14T16:45:14+09:00", 1033 "dateModified": "2026-05-13T13:40:37+09:00", 1034 "author": { 1035 "@type": "Organization", 1036 "name": "ì±ë°ì¤" 1037 }, 1038 "publisher": { 1039 "@type": "Organization", 1040 "name": "ì±ë°ì¤" 1041 } 1042 }, 1043 { 1044 "@type": "BlogPosting", 1045 "headline": "ë ¸ì½ë í´ë¼ì°ë ì±ë¹ëë? ë¹ëë¶í° ì´ìê¹ì§ í íë«í¼ì¼ë¡", 1046 "url": "https://www.appboxapp.com/blog/cloud-nocode-app-build", 1047 "articleSection": "기ì ë¸ë¡ê·¸", 1048 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/cbbba1db-ec48-45fc-93ab-49cf62da39de.png", 1049 "datePublished": "2026-03-14T21:20:44+09:00", 1050 "dateModified": "2026-05-13T13:40:37+09:00", 1051 "author": { 1052 "@type": "Organization", 1053 "name": "ì±ë°ì¤" 1054 }, 1055 "publisher": { 1056 "@type": "Organization", 1057 "name": "ì±ë°ì¤" 1058 } 1059 }, 1060 { 1061 "@type": "BlogPosting", 1062 "headline": "2026ë ì¹ì ì±ì¼ë¡ ë°ê¾¸ë ê°ì¥ íì¤ì ì¸ ë°©ë² â ë¹ì©Â·ì í 기ì¤Â·íê³ê¹ì§ ìì§ ì 리", 1063 "url": "https://www.appboxapp.com/blog/web-to-app-realistic-guide", 1064 "articleSection": "ì± ìíê³", 1065 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbn
1065ail/2026/04/0c1ff68e-eb6b-4a6f-b904-b0c180b42aa9.jpg", 1066 "datePublished": "2026-04-27T17:27:58+09:00", 1067 "dateModified": "2026-05-13T13:40:37+09:00", 1068 "author": { 1069 "@type": "Organization", 1070 "name": "ì±ë°ì¤" 1071 }, 1072 "publisher": { 1073 "@type": "Organization", 1074 "name": "ì±ë°ì¤" 1075 } 1076 }, 1077 { 1078 "@type": "BlogPosting", 1079 "headline": "2026ë ë¬´ë£ ì± ê°ë° íì¤ â ë ¸ì½ë ë°©ë² 4ê°ì§ ë¹êµ", 1080 "url": "https://www.appboxapp.com/blog/app-develop-trand-2026", 1081 "articleSection": "기ì ë¸ë¡ê·¸", 1082 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/3a8b07a5-2c67-4dd0-8b4e-ed43921bce18.jpg", 1083 "datePublished": "2026-03-14T22:37:32+09:00", 1084 "dateModified": "2026-05-13T13:40:37+09:00", 1085 "author": { 1086 "@type": "Organization", 1087 "name": "ì±ë°ì¤" 1088 }, 1089 "publisher": { 1090 "@type": "Organization", 1091 "name": "ì±ë°ì¤" 1092 } 1093 }, 1094 { 1095 "@type": "BlogPosting", 1096 "headline": "ì±ë°ì¤ í´ë¼ì°ë ë¹ë ìì ì ë³µ â OS ì íë¶í° QR ë°°í¬ê¹ì§ 6ë¨ê³", 1097 "url": "https://www.appboxapp.com/blog/appbox-builds-step-on-to-six", 1098 "articleSection": "", 1099 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/75b2e46f-8e72-4d3d-8846-6f3597614d85.png", 1100 "datePublished": "2026-03-14T23:45:56+09:00", 1101 "dateModified": "2026-05-13T13:40:37+09:00", 1102 "author": { 1103 "@type": "Organization", 1104 "name": "ì±ë°ì¤" 1105 }, 1106 "publisher": { 1107 "@type": "Organization", 1108 "name": "ì±ë°ì¤" 1109 } 1110 }, 1111 { 1112 "@type": "BlogPosting", 1113 "headline": "ì± ê°ë°, ì²ìë¶í° ë¤ì´í°ë¸ë¡ ë§ë¤ì´ì¼ í ê¹ì?", 1114 "url": "https://www.appboxapp.com/blog/naviveapp-vs-appboxapp", 1115 "articleSection": "기ì ë¸ë¡ê·¸", 1116 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/0ddb67dc-a048-4e28-a3a2-ec462cb0c8bc.png", 1117 "datePublished": "2026-03-29T13:16:02+09:00", 1118 "dateModified": "2026-05-13T13:40:37+09:00", 1119 "author": { 1120 "@type": "Organization", 1121 "name": "ì±ë°ì¤" 1122 }, 1123 "publisher": { 1124 "@type": "Organization", 1125 "name": "ì±ë°ì¤" 1126 } 1127 }, 1128 { 1129 "@type": "BlogPosting", 1130 "headline": "WebViewìì SNS ë¡ê·¸ì¸ì´ ì ëë ì´ì ì í´ê²°ì± ", 1131 "url": "https://www.appboxapp.com/blog/webview-sns-login", 1132 "articleSection": "기ì ë¸ë¡ê·¸", 1133 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/1c5efd26-a9bb-4486-9592-137e03b18f5c.png", 1134 "datePublished": "2026-03-15T00:15:04+09:00", 1135 "dateModified": "2026-05-13T13:40:37+09:00", 1136 "author": { 1137 "@type": "Organization", 1138 "name": "ì±ë°ì¤" 1139 }, 1140 "publisher": { 1141 "@type": "Organization", 1142 "name": "ì±ë°ì¤" 1143 } 1144 }, 1145 { 1146 "@type": "BlogPosting", 1147 "headline": "PWA vs WebView ì±, ëê° ë¤ë¥¼ê¹? ì°¨ì´ì ê³¼ ì í ê¸°ì¤ ì´ì 리", 1148 "url": "https://www.appboxapp.com/blog/pwa-webview-differences", 1149 "articleSection": "íì© ì", 1150 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/a17f2155-5973-4d7d-b314-76482e4de322.png", 1151 "datePublished": "2026-03-17T11:29:10+09:00", 1152 "dateModified": "2026-05-13T13:40:37+09:00", 1153 "author": { 1154 "@type": "Organization", 1155 "name": "ì±ë°ì¤" 1156 }, 1157 "publisher": { 1158 "@type": "Organization", 1159 "name": "ì±ë°ì¤" 1160 } 1161 }, 1162 { 1163 "@type": "BlogPosting", 1164 "headline": "ì± ì¸ì£¼ ê°ë° ì¤í¨íë 5ê°ì§ í¨í´ê
1164³¼ íì¤ì ì¸ ëì", 1165 "url": "https://www.appboxapp.com/blog/app-outsourcing-failure", 1166 "articleSection": "ì± ìíê³", 1167 "image": "https://www.appboxapp.com/storage/prod/front/blog/thumbnail/2026/03/b2689756-bb7a-4760-a00f-32cb2ea8aac2.jpg", 1168 "datePublished": "2026-03-26T09:53:49+09:00", 1169 "dateModified": "2026-05-13T13:40:37+09:00", 1170 "author": { 1171 "@type": "Organization", 1172 "name": "ì±ë°ì¤" 1173 }, 1174 "publisher": { 1175 "@type": "Organization", 1176 "name": "ì±ë°ì¤" 1177 } 1178 } 1179 ] 1180} 1181 </script>
1181 1182 <link rel="modulepreload" href="https://www.appboxapp.com/build/assets/blog.ppqJI0FF.js" />
1182<script type="module" src="https://www.appboxapp.com/build/assets/blog.ppqJI0FF.js" data-navigate-track="reload"></script>
1182
1182<script> 1183 document.addEventListener('DOMContentLoaded', function () { 1184 new BlogManager({ 1185 currentPage: 1, 1186 lastPage: 1, 1187 fallbackImg: 'https://www.appboxapp.com/console-images/images/image/empty-image.png' 1188 }); 1189 }); 1190 </script>
1190 1191 1192 <link rel="preload" as="style" href="https://www.appboxapp.com/build/assets/vendor.CrcjvWUF.css" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/app.Cls1r-wW.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/preload-helper.CpSuCtvD.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/bootstrap.DhNNa_DN.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/api.global.DXJ5R2OJ.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/toast.Bt3ze8Or.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/modal.B5Q7I2YJ.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/regex-conf.DPgJpIk1.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/format.CyxXoC2a.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/appbox-gtag.BqmJH7-v.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/clipboardUtil.B3LuWT7l.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/loading.BFcHfb32.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/pagination.C-JPxRnh.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/qr-modal-util.BDoc568x.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/cookie-util.BdreB0UP.js" /><link rel="modulepreload" href="https://www.appboxapp.com/build/assets/vendor.D952uQ3H.js" /><link rel="stylesheet" href="https://www.appboxapp.com/build/assets/vendor.CrcjvWUF.css" data-navigate-track="reload" />
1192<script type="module" src="https://www.appboxapp.com/build/assets/app.Cls1r-wW.js" data-navigate-track="reload"></script>
1192
1192<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40d7a20b8c099f0',t:'MTc5MDM3NTQ2NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1192</body> 1193 1194</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.