PageSourceSearch

https://www.appboxapp.com/blog

html appboxapp.com collected 2026-09-25 22:31:05 UTC 79,026 bytes, 1,194 lines download raw bytes

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="노코드 앱빌더, 이제는 &#039;앱 생성&#039;에서 끝나면 안 됩니다"
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">노코드 앱빌더, 이제는 &#039;앱 생성&#039;에서 끝나면 안 됩니다</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                       &nbsp;<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.