\ud648\ud398\uc774\uc9c0 \uc81c\uc791 \uc11c\ube44\uc2a4 \u2014 WizardOfCode<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --dark: #101820;\n --dark-accent: #1a2332;\n --light-bg: #F5F5F7;\n --white: #ffffff;\n --text-primary: #1d1d1f;\n --text-secondary: #6e6e73;\n --text-muted: #86868b;\n --accent-blue: #0071E3;\n --accent-blue-hover: #0077ED;\n --kakao-yellow: #FEE500;\n --kakao-text: #000000;\n --card-shadow: 0 2px 12px rgba(0,0,0,0.06);\n --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);\n --border-radius: 18px;\n --section-padding: 100px 24px;\n --max-width: 980px;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;\n color: var(--text-primary);\n background: var(--white);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n .section {\n padding: var(--section-padding);\n }\n\n .container {\n max-width: var(--max-width);\n margin: 0 auto;\n }\n\n \/* ========== HERO ========== *\/\n .hero {\n background: var(--dark);\n color: var(--white);\n padding: 120px 24px 100px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(ellipse at 30% 50%, rgba(0, 113, 227, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 50%, rgba(0, 113, 227, 0.05) 0%, transparent 50%);\n animation: heroGlow 8s ease-in-out infinite alternate;\n }\n\n @keyframes heroGlow {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(-2%, 1%) scale(1.02); }\n }\n\n .hero .container {\n position: relative;\n z-index: 1;\n }\n\n .hero-eyebrow {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--accent-blue);\n margin-bottom: 28px;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.2s;\n }\n\n .hero h1 {\n font-size: clamp(32px, 6vw, 56px);\n font-weight: 700;\n line-height: 1.25;\n margin-bottom: 28px;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.4s;\n }\n\n .hero h1 span {\n display: block;\n }\n\n .hero-sub {\n font-size: clamp(16px, 2.5vw, 20px);\n font-weight: 300;\n color: rgba(255,255,255,0.7);\n line-height: 1.7;\n max-width: 520px;\n margin: 0 auto;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.6s;\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(24px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ========== PAIN POINTS ========== *\/\n .pain {\n background: var(--white);\n padding: 100px 24px;\n }\n\n .pain h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 56px;\n color: var(--text-primary);\n }\n\n .pain-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n max-width: 860px;\n margin: 0 auto 56px;\n }\n\n .pain-card {\n background: var(--light-bg);\n border-radius: 14px;\n padding: 28px 24px;\n position: relative;\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n }\n\n .pain-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .pain-card::before {\n content: '\"';\n position: absolute;\n top: 12px;\n left: 20px;\n font-size: 48px;\n font-weight: 900;\n color: rgba(0,0,0,0.06);\n line-height: 1;\n }\n\n .pain-card p {\n font-size: 15px;\n line-height: 1.6;\n color: var(--text-secondary);\n font-weight: 400;\n }\n\n .pain-bottom {\n text-align: center;\n max-width: 560px;\n margin: 0 auto;\n }\n\n .pain-bottom p {\n font-size: 18px;\n line-height: 1.8;\n color: var(--text-secondary);\n }\n\n .pain-bottom strong {\n color: var(--text-primary);\n font-weight: 600;\n }\n\n .highlight-text {\n display: inline;\n background: linear-gradient(transparent 60%, rgba(0,113,227,0.12) 60%);\n }\n\n \/* ========== SERVICES ========== *\/\n .services {\n background: var(--light-bg);\n padding: 100px 24px;\n }\n\n .services h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 16px;\n color: var(--text-primary);\n }\n\n .services-subtitle {\n text-align: center;\n color: var(--text-secondary);\n font-size: 17px;\n margin-bottom: 64px;\n }\n\n .service-list {\n display: grid;\n grid-template-columns: 1fr;\n gap: 32px;\n max-width: 860px;\n margin: 0 auto;\n }\n\n .service-item {\n display: grid;\n grid-template-columns: 72px 1fr;\n gap: 24px;\n align-items: start;\n background: var(--white);\n border-radius: var(--border-radius);\n padding: 40px 36px;\n box-shadow: var(--card-shadow);\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n }\n\n .service-item:hover {\n transform: translateY(-3px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .service-icon {\n width: 72px;\n height: 72px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n flex-shrink: 0;\n }\n\n .service-icon.order { background: #E8F5E9; }\n .service-icon.notify { background: #FFF8E1; }\n .service-icon.auto { background: #E3F2FD; }\n .service-icon.seo { background: #F3E5F5; }\n\n .service-content h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 10px;\n color: var(--text-primary);\n }\n\n .service-content p {\n font-size: 15px;\n line-height: 1.75;\n color: var(--text-secondary);\n }\n\n \/* ========== CARE SUBSCRIPTION ========== *\/\n .care {\n background: var(--white);\n padding: 100px 24px;\n }\n\n .care h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 16px;\n }\n\n .care-subtitle {\n text-align: center;\n color: var(--text-secondary);\n font-size: 17px;\n margin-bottom: 64px;\n max-width: 480px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .care-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 20px;\n max-width: 860px;\n margin: 0 auto 56px;\n }\n\n .care-card {\n background: var(--light-bg);\n border-radius: 14px;\n padding: 32px 24px;\n text-align: center;\n transition: transform 0.25s ease;\n }\n\n .care-card:hover {\n transform: translateY(-2px);\n }\n\n .care-card-icon {\n font-size: 36px;\n margin-bottom: 16px;\n }\n\n .care-card h4 {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-primary);\n }\n\n .care-card p {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n\n .care-trust {\n text-align: center;\n max-width: 520px;\n margin: 0 auto;\n padding: 32px;\n background: var(--dark);\n color: var(--white);\n border-radius: var(--border-radius);\n }\n\n .care-trust p {\n font-size: 17px;\n line-height: 1.8;\n font-weight: 300;\n }\n\n .care-trust strong {\n font-weight: 600;\n color: var(--accent-blue);\n }\n\n \/* ========== PORTFOLIO ========== *\/\n .portfolio {\n background: var(--light-bg);\n padding: 100px 24px;\n }\n\n .portfolio h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 64px;\n }\n\n .portfolio-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n max-width: 860px;\n margin: 0 auto;\n }\n\n .portfolio-card {\n background: var(--white);\n border-radius: var(--border-radius);\n padding: 36px 28px;\n box-shadow: var(--card-shadow);\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n position: relative;\n overflow: hidden;\n }\n\n .portfolio-card:hover {\n transform: translateY(-3px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .portfolio-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n }\n\n .portfolio-card:nth-child(1)::after { background: #4CAF50; }\n .portfolio-card:nth-child(2)::after { background: #FF9800; }\n .portfolio-card:nth-child(3)::after { background: #2196F3; }\n .portfolio-card:nth-child(4)::after { background: #9C27B0; }\n .portfolio-card:nth-child(5)::after { background: #FF5722; }\n\n .portfolio-tag {\n display: inline-block;\n font-size: 12px;\n font-weight: 500;\n padding: 4px 10px;\n border-radius: 6px;\n margin-bottom: 14px;\n }\n\n .portfolio-card:nth-child(1) .portfolio-tag { background: #E8F5E9; color: #2E7D32; }\n .portfolio-card:nth-child(2) .portfolio-tag { background: #FFF3E0; color: #E65100; }\n .portfolio-card:nth-child(3) .portfolio-tag { background: #E3F2FD; color: #1565C0; }\n .portfolio-card:nth-child(4) .portfolio-tag { background: #F3E5F5; color: #7B1FA2; }\n .portfolio-card:nth-child(5) .portfolio-tag { background: #FBE9E7; color: #BF360C; }\n\n .portfolio-card h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n .portfolio-card .portfolio-desc {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 16px;\n }\n\n .portfolio-card p:last-child {\n font-size: 14px;\n line-height: 1.7;\n color: var(--text-secondary);\n }\n\n \/* ========== CTA ========== *\/\n .cta {\n background: var(--dark);\n color: var(--white);\n padding: 100px 24px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.1) 0%, transparent 70%);\n }\n\n .cta .container {\n position: relative;\n z-index: 1;\n }\n\n .cta h2 {\n font-size: clamp(28px, 5vw, 44px);\n font-weight: 700;\n margin-bottom: 20px;\n }\n\n .cta-desc {\n font-size: 17px;\n color: rgba(255,255,255,0.6);\n line-height: 1.8;\n margin-bottom: 12px;\n font-weight: 300;\n }\n\n .cta-note {\n font-size: 14px;\n color: rgba(255,255,255,0.4);\n margin-bottom: 40px;\n }\n\n .btn-kakao {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--kakao-yellow);\n color: var(--kakao-text);\n border: none;\n padding: 16px 36px;\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .btn-kakao:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(254, 229, 0, 0.3);\n }\n\n .btn-kakao svg {\n width: 22px;\n height: 22px;\n }\n\n .cta-contact {\n margin-top: 36px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n }\n\n .cta-contact a,\n .cta-contact span {\n font-size: 15px;\n color: rgba(255,255,255,0.45);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .cta-contact a:hover {\n color: rgba(255,255,255,0.8);\n }\n\n \/* ========== SCROLL ANIMATIONS ========== *\/\n .reveal {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n }\n\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Stagger children *\/\n .stagger-children .reveal:nth-child(1) { transition-delay: 0.05s; }\n .stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }\n .stagger-children .reveal:nth-child(3) { transition-delay: 0.15s; }\n .stagger-children .reveal:nth-child(4) { transition-delay: 0.2s; }\n .stagger-children .reveal:nth-child(5) { transition-delay: 0.25s; }\n\n \/* ========== BACK TO TOP \/ NAV ========== *\/\n .back-link {\n position: fixed;\n bottom: 28px;\n right: 28px;\n width: 48px;\n height: 48px;\n background: var(--dark);\n color: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n font-size: 20px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.2);\n opacity: 0;\n transform: translateY(12px);\n transition: opacity 0.3s, transform 0.3s;\n z-index: 100;\n }\n\n .back-link.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .back-link:hover {\n background: var(--accent-blue);\n }\n\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 640px) {\n :root {\n --section-padding: 72px 20px;\n }\n\n .hero {\n padding: 88px 20px 72px;\n }\n\n .service-item {\n grid-template-columns: 1fr;\n padding: 28px 24px;\n }\n\n .service-icon {\n width: 56px;\n height: 56px;\n font-size: 26px;\n border-radius: 12px;\n }\n\n .pain-grid,\n .care-grid,\n .portfolio-grid {\n grid-template-columns: 1fr;\n }\n\n .btn-kakao {\n width: 100%;\n justify-content: center;\n padding: 16px 24px;\n }\n\n .cta-contact {\n gap: 12px;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-eyebrow\">WizardOfCode<\/div>\n <h1>\n <span>\ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774<\/span>\n <span>\ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4.<\/span>\n <span style=\"margin-top:8px; font-weight:300; font-size:0.65em; color:rgba(255,255,255,0.65);\">\ud648\ud398\uc774\uc9c0\uc694.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0.<br>\n WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <\/div>\n<\/section>\n\n\n<section class=\"pain section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\uc774\ub7f0 \uacbd\ud5d8, \uc788\uc9c0 \uc54a\uc73c\uc168\ub098\uc694?<\/h2>\n <div class=\"pain-grid stagger-children\">\n <div class=\"pain-card reveal\">\n <p>\ud648\ud398\uc774\uc9c0 \ub9cc\ub4e4\uc5c8\ub294\ub370<br><strong>\uc5c5\uccb4\uac00 \uc0ac\ub77c\uc84c\uc5b4\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\uc218\uc815\ud558\uace0 \uc2f6\uc740\ub370<br><strong>\uc5f0\ub77d\uc774 \uc548 \ub3fc\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\ub9cc\ub4e4\uace0 \ub098\uc11c<br><strong>\ud55c \ubc88\ub3c4 \uc5c5\ub370\uc774\ud2b8 \uc548 \ud588\uc5b4\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\ub9e4\ub2ec \uc11c\ubc84\ube44\ub9cc \ub098\uac00\uace0<br><strong>\ubc29\uce58 \uc911\uc774\uc5d0\uc694.<\/strong><\/p>\n <\/div>\n <\/div>\n <div class=\"pain-bottom reveal\">\n <p>\n \ud648\ud398\uc774\uc9c0\ub294 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4<br>\n <span class=\"highlight-text\"><strong>\uc720\uc9c0\ud558\ub294 \uac83<\/strong><\/span>\uc774 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<br><br>\n \uadf8\ub798\uc11c \uc800\ud76c\ub294 <strong>\ucf00\uc5b4\uad6c\ub3c5<\/strong>\uc744 \ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"services section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\uc8fc\ubb38. \uc54c\ub9bc. \uad00\ub9ac. \uc790\ub3d9\uc73c\ub85c.<\/h2>\n <p class=\"services-subtitle reveal\">\ub2f9\uc2e0\uc774 \uc274 \ub54c, \ud648\ud398\uc774\uc9c0\uac00 \uc77c\ud569\ub2c8\ub2e4.<\/p>\n <div class=\"service-list\">\n <div class=\"service-item reveal\">\n <div class=\"service-icon order\">\ud83d\udce6<\/div>\n <div class=\"service-content\">\n <h3>\uc628\ub77c\uc778 \uc8fc\ubb38 \u00b7 \uc608\uc57d \uc2dc\uc2a4\ud15c<\/h3>\n <p>\uace0\uac1d\uc774 \uc9c1\uc811 \uc8fc\ubb38\ud558\uace0 \uc608\uc57d\ud569\ub2c8\ub2e4. \uc0c8\ubcbd 3\uc2dc\uc5d0\ub3c4 \uc811\uc218 \uc644\ub8cc.<br>\uc804\ud654 \uc8fc\ubb38\ub9cc \ubc1b\ub358 \uac00\uac8c\uc5d0 \uc628\ub77c\uc778 \uc8fc\ubb38\uc774 \ucd94\uac00\ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon notify\">\ud83d\udcac<\/div>\n <div class=\"service-content\">\n <h3>\uce74\uce74\uc624 \uc54c\ub9bc\ud1a1 \u00b7 \ubb38\uc790 \uc790\ub3d9 \ubc1c\uc1a1<\/h3>\n <p>\uc8fc\ubb38 \ud655\uc778, \ubc30\uc1a1 \uc54c\ub9bc, \uc608\uc57d \ub9ac\ub9c8\uc778\ub4dc.<br>\uace0\uac1d\uc5d0\uac8c \uba3c\uc800 \uc5f0\ub77d\ud569\ub2c8\ub2e4. \uc0ac\uc7a5\ub2d8\uc774 \uc9c1\uc811 \ubcf4\ub0b4\uc9c0 \uc54a\uc544\ub3c4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon auto\">\u2699\ufe0f<\/div>\n <div class=\"service-content\">\n <h3>\ubc18\ubcf5 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/h3>\n <p>\ub9e4\ubc88 \uc218\uc791\uc5c5\uc73c\ub85c \ud558\ub358 \uc77c\uc744 \uc2dc\uc2a4\ud15c\uc774 \ub300\uc2e0\ud569\ub2c8\ub2e4.<br>\uace0\uac1d\ubcc4 \ub9de\ucda4 \uae30\ub2a5\uc744 \uac1c\ubc1c\ud574\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon seo\">\ud83d\udd0d<\/div>\n <div class=\"service-content\">\n <h3>\ub124\uc774\ubc84 \u00b7 \uad6c\uae00 \uac80\uc0c9 \ub178\ucd9c<\/h3>\n <p>\ud648\ud398\uc774\uc9c0\uac00 \uc788\uc5b4\ub3c4 \uac80\uc0c9\uc5d0 \uc548 \ub098\uc624\uba74 \uc5c6\ub294 \uac83\uacfc \uac19\uc2b5\ub2c8\ub2e4.<br>\uac80\uc0c9 \ucd5c\uc801\ud654\ub41c \uad6c\uc870\ub85c \uc81c\uc791\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"care section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\ub9cc\ub4e4\uace0 \ub05d? \uacc4\uc18d \ub3cc\ubd05\ub2c8\ub2e4.<\/h2>\n <p class=\"care-subtitle reveal\">\ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \ud6c4\uac00 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n <div class=\"care-grid stagger-children\">\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udee1\ufe0f<\/div>\n <h4>\ubcf4\uc548 \uc5c5\ub370\uc774\ud2b8<\/h4>\n <p>\ud574\ud0b9, \ucde8\uc57d\uc810\uc73c\ub85c\ubd80\ud130<br>\uc0ac\uc774\ud2b8\ub97c \ubcf4\ud638\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udcbe<\/div>\n <h4>\uc815\uae30 \ubc31\uc5c5<\/h4>\n <p>\ub370\uc774\ud130 \uc720\uc2e4 \uac71\uc815 \uc5c6\uc774<br>\uc548\uc804\ud558\uac8c \ubcf4\uad00\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udda5\ufe0f<\/div>\n <h4>\uc11c\ubc84 \uad00\ub9ac<\/h4>\n <p>cafe24 \uae30\ubc18<br>\uc548\uc815\uc801 \uc6b4\uc601\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udcca<\/div>\n <h4>\uc6d4\uac04 \ub9ac\ud3ec\ud2b8<\/h4>\n <p>\ubc29\ubb38\uc790 \ud604\ud669\uc744<br>\ud55c\ub208\uc5d0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udd27<\/div>\n <h4>\ucf58\ud150\uce20 \uc218\uc815 \uc9c0\uc6d0<\/h4>\n <p>\uba54\ub274, \uac00\uaca9, \uc0ac\uc9c4 \uad50\uccb4.<br>\uc5b8\uc81c\ub4e0 \uc694\uccad\ud558\uc138\uc694.<\/p>\n <\/div>\n <\/div>\n <div class=\"care-trust reveal\">\n <p>\n \ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \uc5c5\uccb4\uac00 \uc0ac\ub77c\uc9c8 \uac71\uc815.<br>\n \uc800\ud76c\ub294 <strong>20\ub144\uc9f8<\/strong> \uac19\uc740 \uace0\uac1d\uacfc \ud568\uaed8\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"portfolio section\">\n <div class=\"container\">\n <h2 class=\"reveal\">20\ub144\uac04 \ub9cc\ub4e4\uc5b4\uc628 \uac83\ub4e4.<\/h2>\n <div class=\"portfolio-grid stagger-children\">\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">20\ub144 \ud30c\ud2b8\ub108\uc2ed<\/span>\n <h3>\uc544\ud1a0\ubca0\uc774\ube44<\/h3>\n <p class=\"portfolio-desc\">\uc544\ud1a0\ud53c \uc804\ubb38 \uc1fc\ud551\ubab0<\/p>\n <p>20\ub144 \uc7a5\uae30 \ud30c\ud2b8\ub108\uc2ed. \uadf8\ub204\ubcf4\ub4dc \uae30\ubc18 \uc8fc\ubb38\/\uacb0\uc81c \uc2dc\uc2a4\ud15c. \ucf00\uc5b4\uad6c\ub3c5 \uc9c4\ud589 \uc911.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\uc1fc\ud551\ubab0<\/span>\n <h3>\ud558\uc774\uadf8\ub9b0\ud31c<\/h3>\n <p class=\"portfolio-desc\">\uac74\uac15\uae30\ub2a5\uc2dd\ud488 \uc1fc\ud551\ubab0<\/p>\n <p>Cafe24 \uc1fc\ud551\ubab0 \uad6c\ucd95. \uc778\uc2a4\ud0c0 \ud53c\ub4dc \uc5f0\ub3d9<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\uc1fc\ud551\ubab0<\/span>\n <h3>\ub0b4\uace0\ud5a5\uac74\uac15\uc999<\/h3>\n <p class=\"portfolio-desc\">\ub18d\uc0b0\ubb3c \uc9c1\uac70\ub798 \uc1fc\ud551\ubab0<\/p>\n <p>\uc628\ub77c\uc778 \uc8fc\ubb38 \uc2dc\uc2a4\ud15c \uad6c\ucd95. \uc0c1\ud488 \uad00\ub9ac \ubc0f \ubc30\uc1a1 \uc790\ub3d9\ud654.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">AI \uae30\uc220<\/span>\n <h3>WizardOfCode AI<\/h3>\n <p class=\"portfolio-desc\">\ube14\ub85c\uadf8 \uc790\ub3d9\ud654 \uc2dc\uc2a4\ud15c<\/p>\n <p>\uc790\uccb4 AI \uae30\uc220\ub85c \ub124\uc774\ubc84 \ube14\ub85c\uadf8 \ub313\uae00\/\uc2a4\ud06c\ub7a9 \uc790\ub3d9\ud654. \ud06c\ub86c \ud655\uc7a5 + \ub370\uc2a4\ud06c\ud1b1 \uc571.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\ub9de\ucda4 \uac1c\ubc1c<\/span>\n <h3>\ucd9c\ud1f4\uadfc \uad00\ub9ac \uc2dc\uc2a4\ud15c<\/h3>\n <p class=\"portfolio-desc\">\ub9de\ucda4 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/p>\n <p>\uae30\uc5c5 \ub9de\ucda4 \uac1c\ubc1c. \ubc18\ubcf5\ub418\ub294 \uc5c5\ubb34\ub97c \uc2dc\uc2a4\ud15c\uc73c\ub85c.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta\">\n <div class=\"container\">\n <h2 class=\"reveal\">\ubb34\ub8cc \uc0c1\ub2f4, \ubd80\ub2f4 \uc5c6\uc774.<\/h2>\n <p class=\"cta-desc reveal\">\n \ud648\ud398\uc774\uc9c0\uac00 \ud544\uc694\ud55c\uc9c0 \uc544\ub2cc\uc9c0\ubd80\ud130<br>\ud3b8\ud558\uac8c \ubb3c\uc5b4\ubcf4\uc138\uc694.\n <\/p>\n <p class=\"cta-note reveal\">\uc815\ud655\ud55c \uacac\uc801\uc740 \uc0c1\ub2f4 \ud6c4 \uc548\ub0b4\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <a href=\"http:\/\/pf.kakao.com\/_mkUxdn\" class=\"btn-kakao reveal\" target=\"_blank\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3C6.48 3 2 6.58 2 10.9c0 2.78 1.86 5.22 4.65 6.6l-.95 3.53c-.08.3.26.54.52.37l4.2-2.8c.51.07 1.04.1 1.58.1 5.52 0 10-3.58 10-7.9S17.52 3 12 3z\"\/><\/svg>\n \uce74\uce74\uc624\ud1a1 \ubb34\ub8cc \uc0c1\ub2f4\n <\/a>\n <div class=\"cta-contact reveal\">\n <a href=\"tel:050-5058-5058\">\u260e 050-5058-5058(\ubb38\uc790\uac00\ub2a5)<\/a>\n <a href=\"mailto:k3soft@naver.com\">\u2709 k3soft@naver.com<\/a>\n <span>\ud83c\udf10 wizardofcode.kr<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<a href=\"#\" class=\"back-link\" id=\"backTop\" title=\"\ub9e8 \uc704\ub85c\">\u2191<\/a>\n\n<script>\n\/\/ Scroll reveal\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n\/\/ Back to top button\nconst backTop = document.getElementById('backTop');\nwindow.addEventListener('scroll', () => {\n backTop.classList.toggle('show', window.scrollY > 600);\n});\n\nbackTop.addEventListener('click', (e) => {\n e.preventDefault();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ud648\ud398\uc774\uc9c0 \uc81c\uc791 \uc11c\ube44\uc2a4 \u2014 WizardOfCode WizardOfCode \ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774 \ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4. \ud648\ud398\uc774\uc9c0\uc694. \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0. WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4. \uc774\ub7f0 \uacbd\ud5d8, \uc788\uc9c0 \uc54a\uc73c\uc168\ub098\uc694? \ud648\ud398\uc774\uc9c0 \ub9cc\ub4e4\uc5c8\ub294\ub370\uc5c5\uccb4\uac00 \uc0ac\ub77c\uc84c\uc5b4\uc694. \uc218\uc815\ud558\uace0 \uc2f6\uc740\ub370\uc5f0\ub77d\uc774 \uc548 \ub3fc\uc694. \ub9cc\ub4e4\uace0 \ub098\uc11c\ud55c \ubc88\ub3c4 \uc5c5\ub370\uc774\ud2b8 \uc548 \ud588\uc5b4\uc694. \ub9e4\ub2ec \uc11c\ubc84\ube44\ub9cc \ub098\uac00\uace0\ubc29\uce58 \uc911\uc774\uc5d0\uc694. \ud648\ud398\uc774\uc9c0\ub294 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4 \uc720\uc9c0\ud558\ub294 \uac83\uc774 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4. \uadf8\ub798\uc11c \uc800\ud76c\ub294 \ucf00\uc5b4\uad6c\ub3c5\uc744 \ud569\ub2c8\ub2e4. \uc8fc\ubb38. \uc54c\ub9bc. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-320","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320"}],"version-history":[{"count":9,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions\/329"}],"wp:attachment":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":320,"date":"2026-02-21T23:26:58","date_gmt":"2026-02-21T14:26:58","guid":{"rendered":"https:\/\/wizardofcode.kr\/?page_id=320"},"modified":"2026-02-21T23:26:58","modified_gmt":"2026-02-21T14:26:58","slug":"%ed%99%88%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%a0%9c%ec%9e%91","status":"publish","type":"page","link":"https:\/\/wizardofcode.kr\/?page_id=320","title":{"rendered":"\ud648\ud398\uc774\uc9c0 \uc81c\uc791"},"content":{"rendered":"\n\n\n\n\n\n\ud648\ud398\uc774\uc9c0 \uc81c\uc791 \uc11c\ube44\uc2a4 \u2014 WizardOfCode<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --dark: #101820;\n --dark-accent: #1a2332;\n --light-bg: #F5F5F7;\n --white: #ffffff;\n --text-primary: #1d1d1f;\n --text-secondary: #6e6e73;\n --text-muted: #86868b;\n --accent-blue: #0071E3;\n --accent-blue-hover: #0077ED;\n --kakao-yellow: #FEE500;\n --kakao-text: #000000;\n --card-shadow: 0 2px 12px rgba(0,0,0,0.06);\n --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);\n --border-radius: 18px;\n --section-padding: 100px 24px;\n --max-width: 980px;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;\n color: var(--text-primary);\n background: var(--white);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n .section {\n padding: var(--section-padding);\n }\n\n .container {\n max-width: var(--max-width);\n margin: 0 auto;\n }\n\n \/* ========== HERO ========== *\/\n .hero {\n background: var(--dark);\n color: var(--white);\n padding: 120px 24px 100px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(ellipse at 30% 50%, rgba(0, 113, 227, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 70% 50%, rgba(0, 113, 227, 0.05) 0%, transparent 50%);\n animation: heroGlow 8s ease-in-out infinite alternate;\n }\n\n @keyframes heroGlow {\n 0% { transform: translate(0, 0) scale(1); }\n 100% { transform: translate(-2%, 1%) scale(1.02); }\n }\n\n .hero .container {\n position: relative;\n z-index: 1;\n }\n\n .hero-eyebrow {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--accent-blue);\n margin-bottom: 28px;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.2s;\n }\n\n .hero h1 {\n font-size: clamp(32px, 6vw, 56px);\n font-weight: 700;\n line-height: 1.25;\n margin-bottom: 28px;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.4s;\n }\n\n .hero h1 span {\n display: block;\n }\n\n .hero-sub {\n font-size: clamp(16px, 2.5vw, 20px);\n font-weight: 300;\n color: rgba(255,255,255,0.7);\n line-height: 1.7;\n max-width: 520px;\n margin: 0 auto;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.6s;\n }\n\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(24px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ========== PAIN POINTS ========== *\/\n .pain {\n background: var(--white);\n padding: 100px 24px;\n }\n\n .pain h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 56px;\n color: var(--text-primary);\n }\n\n .pain-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n max-width: 860px;\n margin: 0 auto 56px;\n }\n\n .pain-card {\n background: var(--light-bg);\n border-radius: 14px;\n padding: 28px 24px;\n position: relative;\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n }\n\n .pain-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .pain-card::before {\n content: '\"';\n position: absolute;\n top: 12px;\n left: 20px;\n font-size: 48px;\n font-weight: 900;\n color: rgba(0,0,0,0.06);\n line-height: 1;\n }\n\n .pain-card p {\n font-size: 15px;\n line-height: 1.6;\n color: var(--text-secondary);\n font-weight: 400;\n }\n\n .pain-bottom {\n text-align: center;\n max-width: 560px;\n margin: 0 auto;\n }\n\n .pain-bottom p {\n font-size: 18px;\n line-height: 1.8;\n color: var(--text-secondary);\n }\n\n .pain-bottom strong {\n color: var(--text-primary);\n font-weight: 600;\n }\n\n .highlight-text {\n display: inline;\n background: linear-gradient(transparent 60%, rgba(0,113,227,0.12) 60%);\n }\n\n \/* ========== SERVICES ========== *\/\n .services {\n background: var(--light-bg);\n padding: 100px 24px;\n }\n\n .services h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 16px;\n color: var(--text-primary);\n }\n\n .services-subtitle {\n text-align: center;\n color: var(--text-secondary);\n font-size: 17px;\n margin-bottom: 64px;\n }\n\n .service-list {\n display: grid;\n grid-template-columns: 1fr;\n gap: 32px;\n max-width: 860px;\n margin: 0 auto;\n }\n\n .service-item {\n display: grid;\n grid-template-columns: 72px 1fr;\n gap: 24px;\n align-items: start;\n background: var(--white);\n border-radius: var(--border-radius);\n padding: 40px 36px;\n box-shadow: var(--card-shadow);\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n }\n\n .service-item:hover {\n transform: translateY(-3px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .service-icon {\n width: 72px;\n height: 72px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n flex-shrink: 0;\n }\n\n .service-icon.order { background: #E8F5E9; }\n .service-icon.notify { background: #FFF8E1; }\n .service-icon.auto { background: #E3F2FD; }\n .service-icon.seo { background: #F3E5F5; }\n\n .service-content h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 10px;\n color: var(--text-primary);\n }\n\n .service-content p {\n font-size: 15px;\n line-height: 1.75;\n color: var(--text-secondary);\n }\n\n \/* ========== CARE SUBSCRIPTION ========== *\/\n .care {\n background: var(--white);\n padding: 100px 24px;\n }\n\n .care h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 16px;\n }\n\n .care-subtitle {\n text-align: center;\n color: var(--text-secondary);\n font-size: 17px;\n margin-bottom: 64px;\n max-width: 480px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .care-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 20px;\n max-width: 860px;\n margin: 0 auto 56px;\n }\n\n .care-card {\n background: var(--light-bg);\n border-radius: 14px;\n padding: 32px 24px;\n text-align: center;\n transition: transform 0.25s ease;\n }\n\n .care-card:hover {\n transform: translateY(-2px);\n }\n\n .care-card-icon {\n font-size: 36px;\n margin-bottom: 16px;\n }\n\n .care-card h4 {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-primary);\n }\n\n .care-card p {\n font-size: 14px;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n\n .care-trust {\n text-align: center;\n max-width: 520px;\n margin: 0 auto;\n padding: 32px;\n background: var(--dark);\n color: var(--white);\n border-radius: var(--border-radius);\n }\n\n .care-trust p {\n font-size: 17px;\n line-height: 1.8;\n font-weight: 300;\n }\n\n .care-trust strong {\n font-weight: 600;\n color: var(--accent-blue);\n }\n\n \/* ========== PORTFOLIO ========== *\/\n .portfolio {\n background: var(--light-bg);\n padding: 100px 24px;\n }\n\n .portfolio h2 {\n font-size: clamp(26px, 4vw, 40px);\n font-weight: 700;\n text-align: center;\n margin-bottom: 64px;\n }\n\n .portfolio-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n max-width: 860px;\n margin: 0 auto;\n }\n\n .portfolio-card {\n background: var(--white);\n border-radius: var(--border-radius);\n padding: 36px 28px;\n box-shadow: var(--card-shadow);\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n position: relative;\n overflow: hidden;\n }\n\n .portfolio-card:hover {\n transform: translateY(-3px);\n box-shadow: var(--card-shadow-hover);\n }\n\n .portfolio-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n }\n\n .portfolio-card:nth-child(1)::after { background: #4CAF50; }\n .portfolio-card:nth-child(2)::after { background: #FF9800; }\n .portfolio-card:nth-child(3)::after { background: #2196F3; }\n .portfolio-card:nth-child(4)::after { background: #9C27B0; }\n .portfolio-card:nth-child(5)::after { background: #FF5722; }\n\n .portfolio-tag {\n display: inline-block;\n font-size: 12px;\n font-weight: 500;\n padding: 4px 10px;\n border-radius: 6px;\n margin-bottom: 14px;\n }\n\n .portfolio-card:nth-child(1) .portfolio-tag { background: #E8F5E9; color: #2E7D32; }\n .portfolio-card:nth-child(2) .portfolio-tag { background: #FFF3E0; color: #E65100; }\n .portfolio-card:nth-child(3) .portfolio-tag { background: #E3F2FD; color: #1565C0; }\n .portfolio-card:nth-child(4) .portfolio-tag { background: #F3E5F5; color: #7B1FA2; }\n .portfolio-card:nth-child(5) .portfolio-tag { background: #FBE9E7; color: #BF360C; }\n\n .portfolio-card h3 {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n .portfolio-card .portfolio-desc {\n font-size: 14px;\n color: var(--text-muted);\n margin-bottom: 16px;\n }\n\n .portfolio-card p:last-child {\n font-size: 14px;\n line-height: 1.7;\n color: var(--text-secondary);\n }\n\n \/* ========== CTA ========== *\/\n .cta {\n background: var(--dark);\n color: var(--white);\n padding: 100px 24px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.1) 0%, transparent 70%);\n }\n\n .cta .container {\n position: relative;\n z-index: 1;\n }\n\n .cta h2 {\n font-size: clamp(28px, 5vw, 44px);\n font-weight: 700;\n margin-bottom: 20px;\n }\n\n .cta-desc {\n font-size: 17px;\n color: rgba(255,255,255,0.6);\n line-height: 1.8;\n margin-bottom: 12px;\n font-weight: 300;\n }\n\n .cta-note {\n font-size: 14px;\n color: rgba(255,255,255,0.4);\n margin-bottom: 40px;\n }\n\n .btn-kakao {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--kakao-yellow);\n color: var(--kakao-text);\n border: none;\n padding: 16px 36px;\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .btn-kakao:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(254, 229, 0, 0.3);\n }\n\n .btn-kakao svg {\n width: 22px;\n height: 22px;\n }\n\n .cta-contact {\n margin-top: 36px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n }\n\n .cta-contact a,\n .cta-contact span {\n font-size: 15px;\n color: rgba(255,255,255,0.45);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .cta-contact a:hover {\n color: rgba(255,255,255,0.8);\n }\n\n \/* ========== SCROLL ANIMATIONS ========== *\/\n .reveal {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n }\n\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Stagger children *\/\n .stagger-children .reveal:nth-child(1) { transition-delay: 0.05s; }\n .stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }\n .stagger-children .reveal:nth-child(3) { transition-delay: 0.15s; }\n .stagger-children .reveal:nth-child(4) { transition-delay: 0.2s; }\n .stagger-children .reveal:nth-child(5) { transition-delay: 0.25s; }\n\n \/* ========== BACK TO TOP \/ NAV ========== *\/\n .back-link {\n position: fixed;\n bottom: 28px;\n right: 28px;\n width: 48px;\n height: 48px;\n background: var(--dark);\n color: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n font-size: 20px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.2);\n opacity: 0;\n transform: translateY(12px);\n transition: opacity 0.3s, transform 0.3s;\n z-index: 100;\n }\n\n .back-link.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .back-link:hover {\n background: var(--accent-blue);\n }\n\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 640px) {\n :root {\n --section-padding: 72px 20px;\n }\n\n .hero {\n padding: 88px 20px 72px;\n }\n\n .service-item {\n grid-template-columns: 1fr;\n padding: 28px 24px;\n }\n\n .service-icon {\n width: 56px;\n height: 56px;\n font-size: 26px;\n border-radius: 12px;\n }\n\n .pain-grid,\n .care-grid,\n .portfolio-grid {\n grid-template-columns: 1fr;\n }\n\n .btn-kakao {\n width: 100%;\n justify-content: center;\n padding: 16px 24px;\n }\n\n .cta-contact {\n gap: 12px;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-eyebrow\">WizardOfCode<\/div>\n <h1>\n <span>\ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774<\/span>\n <span>\ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4.<\/span>\n <span style=\"margin-top:8px; font-weight:300; font-size:0.65em; color:rgba(255,255,255,0.65);\">\ud648\ud398\uc774\uc9c0\uc694.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0.<br>\n WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <\/div>\n<\/section>\n\n\n<section class=\"pain section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\uc774\ub7f0 \uacbd\ud5d8, \uc788\uc9c0 \uc54a\uc73c\uc168\ub098\uc694?<\/h2>\n <div class=\"pain-grid stagger-children\">\n <div class=\"pain-card reveal\">\n <p>\ud648\ud398\uc774\uc9c0 \ub9cc\ub4e4\uc5c8\ub294\ub370<br><strong>\uc5c5\uccb4\uac00 \uc0ac\ub77c\uc84c\uc5b4\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\uc218\uc815\ud558\uace0 \uc2f6\uc740\ub370<br><strong>\uc5f0\ub77d\uc774 \uc548 \ub3fc\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\ub9cc\ub4e4\uace0 \ub098\uc11c<br><strong>\ud55c \ubc88\ub3c4 \uc5c5\ub370\uc774\ud2b8 \uc548 \ud588\uc5b4\uc694.<\/strong><\/p>\n <\/div>\n <div class=\"pain-card reveal\">\n <p>\ub9e4\ub2ec \uc11c\ubc84\ube44\ub9cc \ub098\uac00\uace0<br><strong>\ubc29\uce58 \uc911\uc774\uc5d0\uc694.<\/strong><\/p>\n <\/div>\n <\/div>\n <div class=\"pain-bottom reveal\">\n <p>\n \ud648\ud398\uc774\uc9c0\ub294 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4<br>\n <span class=\"highlight-text\"><strong>\uc720\uc9c0\ud558\ub294 \uac83<\/strong><\/span>\uc774 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<br><br>\n \uadf8\ub798\uc11c \uc800\ud76c\ub294 <strong>\ucf00\uc5b4\uad6c\ub3c5<\/strong>\uc744 \ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"services section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\uc8fc\ubb38. \uc54c\ub9bc. \uad00\ub9ac. \uc790\ub3d9\uc73c\ub85c.<\/h2>\n <p class=\"services-subtitle reveal\">\ub2f9\uc2e0\uc774 \uc274 \ub54c, \ud648\ud398\uc774\uc9c0\uac00 \uc77c\ud569\ub2c8\ub2e4.<\/p>\n <div class=\"service-list\">\n <div class=\"service-item reveal\">\n <div class=\"service-icon order\">\ud83d\udce6<\/div>\n <div class=\"service-content\">\n <h3>\uc628\ub77c\uc778 \uc8fc\ubb38 \u00b7 \uc608\uc57d \uc2dc\uc2a4\ud15c<\/h3>\n <p>\uace0\uac1d\uc774 \uc9c1\uc811 \uc8fc\ubb38\ud558\uace0 \uc608\uc57d\ud569\ub2c8\ub2e4. \uc0c8\ubcbd 3\uc2dc\uc5d0\ub3c4 \uc811\uc218 \uc644\ub8cc.<br>\uc804\ud654 \uc8fc\ubb38\ub9cc \ubc1b\ub358 \uac00\uac8c\uc5d0 \uc628\ub77c\uc778 \uc8fc\ubb38\uc774 \ucd94\uac00\ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon notify\">\ud83d\udcac<\/div>\n <div class=\"service-content\">\n <h3>\uce74\uce74\uc624 \uc54c\ub9bc\ud1a1 \u00b7 \ubb38\uc790 \uc790\ub3d9 \ubc1c\uc1a1<\/h3>\n <p>\uc8fc\ubb38 \ud655\uc778, \ubc30\uc1a1 \uc54c\ub9bc, \uc608\uc57d \ub9ac\ub9c8\uc778\ub4dc.<br>\uace0\uac1d\uc5d0\uac8c \uba3c\uc800 \uc5f0\ub77d\ud569\ub2c8\ub2e4. \uc0ac\uc7a5\ub2d8\uc774 \uc9c1\uc811 \ubcf4\ub0b4\uc9c0 \uc54a\uc544\ub3c4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon auto\">\u2699\ufe0f<\/div>\n <div class=\"service-content\">\n <h3>\ubc18\ubcf5 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/h3>\n <p>\ub9e4\ubc88 \uc218\uc791\uc5c5\uc73c\ub85c \ud558\ub358 \uc77c\uc744 \uc2dc\uc2a4\ud15c\uc774 \ub300\uc2e0\ud569\ub2c8\ub2e4.<br>\uace0\uac1d\ubcc4 \ub9de\ucda4 \uae30\ub2a5\uc744 \uac1c\ubc1c\ud574\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <div class=\"service-item reveal\">\n <div class=\"service-icon seo\">\ud83d\udd0d<\/div>\n <div class=\"service-content\">\n <h3>\ub124\uc774\ubc84 \u00b7 \uad6c\uae00 \uac80\uc0c9 \ub178\ucd9c<\/h3>\n <p>\ud648\ud398\uc774\uc9c0\uac00 \uc788\uc5b4\ub3c4 \uac80\uc0c9\uc5d0 \uc548 \ub098\uc624\uba74 \uc5c6\ub294 \uac83\uacfc \uac19\uc2b5\ub2c8\ub2e4.<br>\uac80\uc0c9 \ucd5c\uc801\ud654\ub41c \uad6c\uc870\ub85c \uc81c\uc791\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"care section\">\n <div class=\"container\">\n <h2 class=\"reveal\">\ub9cc\ub4e4\uace0 \ub05d? \uacc4\uc18d \ub3cc\ubd05\ub2c8\ub2e4.<\/h2>\n <p class=\"care-subtitle reveal\">\ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \ud6c4\uac00 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n <div class=\"care-grid stagger-children\">\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udee1\ufe0f<\/div>\n <h4>\ubcf4\uc548 \uc5c5\ub370\uc774\ud2b8<\/h4>\n <p>\ud574\ud0b9, \ucde8\uc57d\uc810\uc73c\ub85c\ubd80\ud130<br>\uc0ac\uc774\ud2b8\ub97c \ubcf4\ud638\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udcbe<\/div>\n <h4>\uc815\uae30 \ubc31\uc5c5<\/h4>\n <p>\ub370\uc774\ud130 \uc720\uc2e4 \uac71\uc815 \uc5c6\uc774<br>\uc548\uc804\ud558\uac8c \ubcf4\uad00\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udda5\ufe0f<\/div>\n <h4>\uc11c\ubc84 \uad00\ub9ac<\/h4>\n <p>cafe24 \uae30\ubc18<br>\uc548\uc815\uc801 \uc6b4\uc601\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udcca<\/div>\n <h4>\uc6d4\uac04 \ub9ac\ud3ec\ud2b8<\/h4>\n <p>\ubc29\ubb38\uc790 \ud604\ud669\uc744<br>\ud55c\ub208\uc5d0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"care-card reveal\">\n <div class=\"care-card-icon\">\ud83d\udd27<\/div>\n <h4>\ucf58\ud150\uce20 \uc218\uc815 \uc9c0\uc6d0<\/h4>\n <p>\uba54\ub274, \uac00\uaca9, \uc0ac\uc9c4 \uad50\uccb4.<br>\uc5b8\uc81c\ub4e0 \uc694\uccad\ud558\uc138\uc694.<\/p>\n <\/div>\n <\/div>\n <div class=\"care-trust reveal\">\n <p>\n \ud648\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e0 \uc5c5\uccb4\uac00 \uc0ac\ub77c\uc9c8 \uac71\uc815.<br>\n \uc800\ud76c\ub294 <strong>20\ub144\uc9f8<\/strong> \uac19\uc740 \uace0\uac1d\uacfc \ud568\uaed8\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"portfolio section\">\n <div class=\"container\">\n <h2 class=\"reveal\">20\ub144\uac04 \ub9cc\ub4e4\uc5b4\uc628 \uac83\ub4e4.<\/h2>\n <div class=\"portfolio-grid stagger-children\">\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">20\ub144 \ud30c\ud2b8\ub108\uc2ed<\/span>\n <h3>\uc544\ud1a0\ubca0\uc774\ube44<\/h3>\n <p class=\"portfolio-desc\">\uc544\ud1a0\ud53c \uc804\ubb38 \uc1fc\ud551\ubab0<\/p>\n <p>20\ub144 \uc7a5\uae30 \ud30c\ud2b8\ub108\uc2ed. \uadf8\ub204\ubcf4\ub4dc \uae30\ubc18 \uc8fc\ubb38\/\uacb0\uc81c \uc2dc\uc2a4\ud15c. \ucf00\uc5b4\uad6c\ub3c5 \uc9c4\ud589 \uc911.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\uc1fc\ud551\ubab0<\/span>\n <h3>\ud558\uc774\uadf8\ub9b0\ud31c<\/h3>\n <p class=\"portfolio-desc\">\uac74\uac15\uae30\ub2a5\uc2dd\ud488 \uc1fc\ud551\ubab0<\/p>\n <p>Cafe24 \uc1fc\ud551\ubab0 \uad6c\ucd95. \uc778\uc2a4\ud0c0 \ud53c\ub4dc \uc5f0\ub3d9<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\uc1fc\ud551\ubab0<\/span>\n <h3>\ub0b4\uace0\ud5a5\uac74\uac15\uc999<\/h3>\n <p class=\"portfolio-desc\">\ub18d\uc0b0\ubb3c \uc9c1\uac70\ub798 \uc1fc\ud551\ubab0<\/p>\n <p>\uc628\ub77c\uc778 \uc8fc\ubb38 \uc2dc\uc2a4\ud15c \uad6c\ucd95. \uc0c1\ud488 \uad00\ub9ac \ubc0f \ubc30\uc1a1 \uc790\ub3d9\ud654.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">AI \uae30\uc220<\/span>\n <h3>WizardOfCode AI<\/h3>\n <p class=\"portfolio-desc\">\ube14\ub85c\uadf8 \uc790\ub3d9\ud654 \uc2dc\uc2a4\ud15c<\/p>\n <p>\uc790\uccb4 AI \uae30\uc220\ub85c \ub124\uc774\ubc84 \ube14\ub85c\uadf8 \ub313\uae00\/\uc2a4\ud06c\ub7a9 \uc790\ub3d9\ud654. \ud06c\ub86c \ud655\uc7a5 + \ub370\uc2a4\ud06c\ud1b1 \uc571.<\/p>\n <\/div>\n <div class=\"portfolio-card reveal\">\n <span class=\"portfolio-tag\">\ub9de\ucda4 \uac1c\ubc1c<\/span>\n <h3>\ucd9c\ud1f4\uadfc \uad00\ub9ac \uc2dc\uc2a4\ud15c<\/h3>\n <p class=\"portfolio-desc\">\ub9de\ucda4 \uc5c5\ubb34 \uc790\ub3d9\ud654<\/p>\n <p>\uae30\uc5c5 \ub9de\ucda4 \uac1c\ubc1c. \ubc18\ubcf5\ub418\ub294 \uc5c5\ubb34\ub97c \uc2dc\uc2a4\ud15c\uc73c\ub85c.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta\">\n <div class=\"container\">\n <h2 class=\"reveal\">\ubb34\ub8cc \uc0c1\ub2f4, \ubd80\ub2f4 \uc5c6\uc774.<\/h2>\n <p class=\"cta-desc reveal\">\n \ud648\ud398\uc774\uc9c0\uac00 \ud544\uc694\ud55c\uc9c0 \uc544\ub2cc\uc9c0\ubd80\ud130<br>\ud3b8\ud558\uac8c \ubb3c\uc5b4\ubcf4\uc138\uc694.\n <\/p>\n <p class=\"cta-note reveal\">\uc815\ud655\ud55c \uacac\uc801\uc740 \uc0c1\ub2f4 \ud6c4 \uc548\ub0b4\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <a href=\"http:\/\/pf.kakao.com\/_mkUxdn\" class=\"btn-kakao reveal\" target=\"_blank\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3C6.48 3 2 6.58 2 10.9c0 2.78 1.86 5.22 4.65 6.6l-.95 3.53c-.08.3.26.54.52.37l4.2-2.8c.51.07 1.04.1 1.58.1 5.52 0 10-3.58 10-7.9S17.52 3 12 3z\"\/><\/svg>\n \uce74\uce74\uc624\ud1a1 \ubb34\ub8cc \uc0c1\ub2f4\n <\/a>\n <div class=\"cta-contact reveal\">\n <a href=\"tel:050-5058-5058\">\u260e 050-5058-5058(\ubb38\uc790\uac00\ub2a5)<\/a>\n <a href=\"mailto:k3soft@naver.com\">\u2709 k3soft@naver.com<\/a>\n <span>\ud83c\udf10 wizardofcode.kr<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<a href=\"#\" class=\"back-link\" id=\"backTop\" title=\"\ub9e8 \uc704\ub85c\">\u2191<\/a>\n\n<script>\n\/\/ Scroll reveal\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n\/\/ Back to top button\nconst backTop = document.getElementById('backTop');\nwindow.addEventListener('scroll', () => {\n backTop.classList.toggle('show', window.scrollY > 600);\n});\n\nbackTop.addEventListener('click', (e) => {\n e.preventDefault();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ud648\ud398\uc774\uc9c0 \uc81c\uc791 \uc11c\ube44\uc2a4 \u2014 WizardOfCode WizardOfCode \ub180\uace0 \uc788\ub294 \uc9c1\uc6d0\uc774 \ud55c \uba85 \uc788\uc2b5\ub2c8\ub2e4. \ud648\ud398\uc774\uc9c0\uc694. \uc0ac\uc7a5\ub2d8\uc774 \uc26c\uc5b4\ub3c4, \uc5f4\uc2ec\ud788 \uc77c\ud558\ub294 \ud648\ud398\uc774\uc9c0. WizardOfCode\uac00 \ub9cc\ub4e4\uc5b4 \ub4dc\ub9bd\ub2c8\ub2e4. \uc774\ub7f0 \uacbd\ud5d8, \uc788\uc9c0 \uc54a\uc73c\uc168\ub098\uc694? \ud648\ud398\uc774\uc9c0 \ub9cc\ub4e4\uc5c8\ub294\ub370\uc5c5\uccb4\uac00 \uc0ac\ub77c\uc84c\uc5b4\uc694. \uc218\uc815\ud558\uace0 \uc2f6\uc740\ub370\uc5f0\ub77d\uc774 \uc548 \ub3fc\uc694. \ub9cc\ub4e4\uace0 \ub098\uc11c\ud55c \ubc88\ub3c4 \uc5c5\ub370\uc774\ud2b8 \uc548 \ud588\uc5b4\uc694. \ub9e4\ub2ec \uc11c\ubc84\ube44\ub9cc \ub098\uac00\uace0\ubc29\uce58 \uc911\uc774\uc5d0\uc694. \ud648\ud398\uc774\uc9c0\ub294 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4 \uc720\uc9c0\ud558\ub294 \uac83\uc774 \ub354 \uc911\uc694\ud569\ub2c8\ub2e4. \uadf8\ub798\uc11c \uc800\ud76c\ub294 \ucf00\uc5b4\uad6c\ub3c5\uc744 \ud569\ub2c8\ub2e4. \uc8fc\ubb38. \uc54c\ub9bc. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-320","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320"}],"version-history":[{"count":9,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=\/wp\/v2\/pages\/320\/revisions\/329"}],"wp:attachment":[{"href":"https:\/\/wizardofcode.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}