서비스 소개

본문 바로가기

Phantom
Design

신규 서비스 오픈 안내 2025년 설날 연휴 운영 안내 웹사이트 정기 점검 일정 공지 고객 만족도 조사 진행중

로그인 회원가입

CONTACT

02-1234-5678 contact@phantomdesign.kr

평일 09:00 - 18:00

점심 12:00 - 13:00

주말/공휴일 휴무

자주묻는질문 질문과답변

페이지 헤더 설정

제목

카테고리

설명

카테고리 기본값 설정

현재 페이지의 배경 이미지와 레이아웃 설정(간격, 정렬, 투명도 등)을
이 카테고리의 기본값으로 지정합니다.
※ 같은 카테고리의 다른 페이지에서 개별 설정하지 않은 항목들이 이 기본값을 상속받습니다.

텍스트 정렬

왼쪽

중앙

오른쪽

헤더 높이

헤더 영역의 최소 높이 (180px ~ 500px)

요소 간격 조정

브레드크럼 ↓

카테고리 ↓

제목 ↓

배경 이미지

📐 권장 크기: 1920x280px (Full HD) 또는 1600x280px

배경 이미지 크기 조정

Cover

꽉 채움 (잘림 가능)

Contain

전체 표시 (여백 가능)

색상 설정

배경색

텍스트색

배경 오버레이 투명도

배경 이미지 위에 어두운 오버레이 투명도 (0: 투명, 100: 불투명)

실시간 미리보기

Home 회사소개 CEO 인사말

회사소개

CEO 인사말

고객을 가장 먼저 생각하는 기업이 되겠습니다

Home 사업소개 서비스 소개

사업소개

서비스 소개

기획부터 디자인, 개발, 운영까지 토탈 솔루션을 제공합니다

페이지 설정

서비스 소개

페이지 제목

서브 타이틀 페이지 상단에 표시되는 설명

상위 메뉴 메뉴 그룹 선택

정렬 순서 작은 숫자가 먼저 표시

페이지 활성화

페이지 내용 (DB) DB에 저장되는 추가 내용 (HTML 가능)

PHP 파일 편집 불가

파일 쓰기 권한이 없습니다. (일반 호스팅에서는 PHP 파일 수정이 제한될 수 있습니다)

파일 경로: /var/www/html/sms/theme/modern/page/service_intro.php

PHP 파일 내용

<?php
include_once('../../../common.php');

// 페이지 데이터 (편집 기능을 위해 필요)
$page = [
    'tp_id' => 'service_intro',
    'tp_title' => '서비스 소개',
    'tp_subtitle' => '',
    'tp_content' => '',
    'tp_category' => '',
    'tp_order' => 0,
    'tp_use' => 1,
    'tp_data' => '',
    'tp_image1' => '',
    'tp_meta_description' => '',
    'tp_keywords' => ''
];

$g5['title'] = '서비스 소개';

include_once(G5_THEME_PATH.'/head.php');

// page_config에서 설정 불러오기
include_once(G5_THEME_PATH.'/page_config.php');
apply_sub_header('service_intro');

include_once(G5_THEME_PATH.'/page/page_common.php');
?>

<style>
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-30px, 30px) rotate(240deg);
    }
}

@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(26, 115, 232, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(26, 115, 232, 0.8), 0 0 40px rgba(26, 115, 232, 0.4);
    }
}

@keyframes particle-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    50% {
        transform: translate(100px, -100px) scale(1.5);
        opacity: 0.8;
    }
}

@keyframes gridFade {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

.page_container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #FAFAFA;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* Hero Section with Split Layout */
.hero_section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    margin-bottom: 0;
    overflow-x: hidden;
}

.hero_left {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    background-size: 200% 200%;
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: slideInLeft 0.8s ease-out, gradientShift 8s ease infinite;
}

.hero_left::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(26, 115, 232, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: -250px;
    right: -250px;
    animation: float 6s ease-in-out infinite;
}

.hero_left::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -150px;
    left: -150px;
    animation: float 8s ease-in-out infinite reverse;
}

/* 파티클 효과 */
.hero_particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(26, 115, 232, 0.6);
    border-radius: 50%;
    animation: particle-float 8s ease-in-out infinite;
}

.particle:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.particle:nth-child(2) {
    left: 30%;
    top: 80%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.particle:nth-child(3) {
    left: 50%;
    top: 40%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.particle:nth-child(4) {
    left: 70%;
    top: 60%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.particle:nth-child(5) {
    left: 85%;
    top: 30%;
    animation-delay: 4s;
    animation-duration: 6.5s;
}

.particle:nth-child(6) {
    left: 20%;
    top: 70%;
    animation-delay: 1.5s;
    animation-duration: 7.5s;
}

.particle:nth-child(7) {
    left: 60%;
    top: 10%;
    animation-delay: 2.5s;
    animation-duration: 8.5s;
}

.particle:nth-child(8) {
    left: 40%;
    top: 90%;
    animation-delay: 0.5s;
    animation-duration: 7s;
}

/* 그리드 라인 효과 */
.hero_grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 115, 232, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 115, 232, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0;
    animation: gridFade 3s ease-in-out infinite alternate;
    z-index: 0;
}

.hero_title {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

.hero_title .highlight {
    color: var(--primary-color, #1a73e8);
    text-shadow: 0 0 20px rgba(26, 115, 232, 0.5);
    animation: glow 2s ease-in-out infinite;
}

.hero_desc {
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.hero_stats {
    display: flex;
    gap: 48px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.7s forwards;
}

.hero_stat_item {
    border-left: 3px solid var(--primary-color, #1a73e8);
    padding-left: 16px;
    transition: all 0.3s ease;
}

.hero_stat_item:hover {
    border-left-color: #fff;
    transform: translateX(5px);
}

.hero_stat_number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero_stat_label {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero_right {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: slideInRight 0.8s ease-out;
}

.hero_right::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: var(--primary-color, #1a73e8);
    opacity: 0.08;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

.hero_features {
    position: relative;
    z-index: 1;
}

.hero_feature_item {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
}

.hero_feature_item:hover {
    transform: translateX(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.hero_feature_icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
}

.hero_feature_text h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hero_feature_text p {
    font-size: 14px;
    color: #737373;
    margin: 0;
}

/* Service Grid with Featured Cards */
.services_section {
    max-width: 1400px;
    margin: 100px auto;
    padding: 0 40px;
}

.section_header {
    text-align: center;
    margin-bottom: 60px;
    animation: fadeInUp 0.8s ease-out;
}

.section_subtitle {
    font-size: 14px;
    color: var(--primary-color, #1a73e8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.section_title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.section_desc {
    font-size: 18px;
    color: #737373;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.services_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.service_card {
    background: #fff;
    border: 1px solid #E0E0E0;
    padding: 48px 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
}

.service_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color, #1a73e8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.service_card:hover::before {
    transform: scaleX(1);
}

.service_card:hover {
    border-color: #000;
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.service_card:nth-child(1) { animation-delay: 0.1s; }
.service_card:nth-child(2) { animation-delay: 0.2s; }
.service_card:nth-child(3) { animation-delay: 0.3s; }
.service_card:nth-child(4) { animation-delay: 0.4s; }
.service_card:nth-child(5) { animation-delay: 0.5s; }
.service_card:nth-child(6) { animation-delay: 0.6s; }

.service_icon_wrapper {
    width: 70px;
    height: 70px;
    background: #FAFAFA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: all 0.3s ease;
    position: relative;
}

.service_card:hover .service_icon_wrapper {
    background: #F0F0F0;
    transform: scale(1.1);
}

.service_icon {
    font-size: 32px;
    color: #000;
    transition: all 0.3s ease;
}

.service_card:hover .service_icon {
    color: #000;
    transform: scale(1.05);
}

.service_number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: var(--primary-color, #1a73e8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.service_desc {
    font-size: 15px;
    color: #737373;
    line-height: 1.8;
    margin-bottom: 24px;
    min-height: 75px;
}

.service_features {
    margin-bottom: 24px;
}

.service_feature {
    font-size: 14px;
    color: #404040;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.service_feature::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color, #1a73e8);
    font-weight: 700;
}

.service_price_wrapper {
    padding-top: 24px;
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service_price {
    font-size: 14px;
    color: #737373;
}

.service_price_amount {
    font-size: 28px;
    color: #000;
    font-weight: 700;
    display: block;
    margin-top: 4px;
}

.service_link {
    font-size: 14px;
    color: var(--primary-color, #1a73e8);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.service_link:hover {
    transform: translateX(5px);
    display: inline-block;
}

/* Process Section */
.process_section {
    background: #000;
    color: #fff;
    padding: 120px 40px;
    margin-top: 100px;
}

.process_container {
    max-width: 1400px;
    margin: 0 auto;
}

.process_header {
    text-align: center;
    margin-bottom: 80px;
}

.process_header h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.process_header p {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}

.process_steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    position: relative;
}

.process_steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(255,255,255,0.2);
}

.process_step {
    text-align: center;
    position: relative;
    animation: fadeInUp 1s ease-out;
}

.process_step:nth-child(1) { animation-delay: 0.2s; }
.process_step:nth-child(2) { animation-delay: 0.4s; }
.process_step:nth-child(3) { animation-delay: 0.6s; }
.process_step:nth-child(4) { animation-delay: 0.8s; }

.process_step_number {
    width: 80px;
    height: 80px;
    background: var(--primary-color, #1a73e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 24px;
    position: relative;
    z-index: 1;
    transition: all 0.4s;
}

.process_step:hover .process_step_number {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(26, 115, 232, 0.4);
}

.process_step_title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.process_step_desc {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* CTA Section */
.cta_section {
    max-width: 1400px;
    margin: 100px auto;
    padding: 0 40px;
}

.cta_box {
    background: linear-gradient(135deg, var(--primary-color, #1a73e8) 0%, #1557b0 100%);
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta_box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.cta_content {
    position: relative;
    z-index: 1;
}

.cta_title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.cta_desc {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 36px;
}

.cta_buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.cta_button {
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #fff;
    background: #fff;
    color: var(--primary-color, #1a73e8);
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
}

.cta_button:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-2px);
}

.cta_button.secondary {
    background: transparent;
    color: #fff;
}

.cta_button.secondary:hover {
    background: #fff;
    color: var(--primary-color, #1a73e8);
}

@media (max-width: 1024px) {
    .hero_section {
        grid-template-columns: 1fr;
    }

    .services_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process_steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .process_steps::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero_left,
    .hero_right {
        padding: 60px 30px;
    }

    .hero_title {
        font-size: 42px;
    }

    .hero_stats {
        flex-direction: column;
        gap: 24px;
    }

    .services_grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .process_steps {
        grid-template-columns: 1fr;
    }

    .section_title {
        font-size: 36px;
    }

    .cta_title {
        font-size: 32px;
    }

    .cta_buttons {
        flex-direction: column;
    }
}
</style>

<div class="page_container">
    <!-- Hero Section -->
    <div class="hero_section">
        <div class="hero_left">
            <!-- 그리드 배경 -->
            <div class="hero_grid"></div>

            <!-- 파티클 효과 -->
            <div class="hero_particles">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>

            <h2 class="hero_title">
                Total<br>
                <span class="highlight">Solution</span><br>
                Provider
            </h2>
            <p class="hero_desc">
                기획부터 디자인, 개발, 운영까지<br>
                고객의 비즈니스 성공을 위한 모든 것을 제공합니다
            </p>
            <div class="hero_stats">
                <div class="hero_stat_item">
                    <div class="hero_stat_number">500+</div>
                    <div class="hero_stat_label">Projects</div>
                </div>
                <div class="hero_stat_item">
                    <div class="hero_stat_number">98%</div>
                    <div class="hero_stat_label">Satisfaction</div>
                </div>
                <div class="hero_stat_item">
                    <div class="hero_stat_number">10+</div>
                    <div class="hero_stat_label">Years</div>
                </div>
            </div>
        </div>
        <div class="hero_right">
            <div class="hero_features">
                <div class="hero_feature_item">
                    <div class="hero_feature_icon">
                        <i class="fa fa-rocket"></i>
                    </div>
                    <div class="hero_feature_text">
                        <h4>빠른 개발</h4>
                        <p>최신 기술 스택으로 신속한 프로젝트 진행</p>
                    </div>
                </div>
                <div class="hero_feature_item">
                    <div class="hero_feature_icon">
                        <i class="fa fa-shield"></i>
                    </div>
                    <div class="hero_feature_text">
                        <h4>안정적 운영</h4>
                        <p>24/7 모니터링과 즉각적인 장애 대응</p>
                    </div>
                </div>
                <div class="hero_feature_item">
                    <div class="hero_feature_icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <div class="hero_feature_text">
                        <h4>전문 팀</h4>
                        <p>10년 이상 경력의 전문가 그룹</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Services Section -->
    <div class="services_section">
        <div class="section_header">
            <div class="section_subtitle">Our Services</div>
            <h2 class="section_title">제공 서비스</h2>
            <p class="section_desc">
                다양한 IT 솔루션으로 고객의 비즈니스 가치를 극대화합니다
            </p>
        </div>

        <div class="services_grid">
            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-laptop service_icon"></i>
                    <span class="service_number">01</span>
                </div>
                <h3 class="service_name">웹사이트 제작</h3>
                <p class="service_desc">
                    반응형 웹사이트부터 대규모 포털까지 모든 웹 프로젝트를 완벽하게 구현합니다
                </p>
                <div class="service_features">
                    <div class="service_feature">반응형 디자인</div>
                    <div class="service_feature">CMS 구축</div>
                    <div class="service_feature">SEO 최적화</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">300만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>

            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-mobile service_icon"></i>
                    <span class="service_number">02</span>
                </div>
                <h3 class="service_name">모바일 앱 개발</h3>
                <p class="service_desc">
                    iOS와 Android 플랫폼에 최적화된 네이티브 및 하이브리드 앱 개발
                </p>
                <div class="service_features">
                    <div class="service_feature">Native/Hybrid 지원</div>
                    <div class="service_feature">Push 알림</div>
                    <div class="service_feature">앱스토어 등록</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">800만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>

            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-shopping-cart service_icon"></i>
                    <span class="service_number">03</span>
                </div>
                <h3 class="service_name">쇼핑몰 구축</h3>
                <p class="service_desc">
                    결제 시스템부터 재고 관리까지 완벽한 전자상거래 솔루션
                </p>
                <div class="service_features">
                    <div class="service_feature">결제 시스템 연동</div>
                    <div class="service_feature">재고/주문 관리</div>
                    <div class="service_feature">마케팅 자동화</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">500만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>

            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-database service_icon"></i>
                    <span class="service_number">04</span>
                </div>
                <h3 class="service_name">데이터베이스 구축</h3>
                <p class="service_desc">
                    안정적이고 확장 가능한 데이터베이스 설계 및 최적화
                </p>
                <div class="service_features">
                    <div class="service_feature">스키마 설계</div>
                    <div class="service_feature">성능 최적화</div>
                    <div class="service_feature">백업/복구 시스템</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">200만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>

            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-cloud service_icon"></i>
                    <span class="service_number">05</span>
                </div>
                <h3 class="service_name">클라우드 서비스</h3>
                <p class="service_desc">
                    AWS, Azure, GCP 기반의 안정적인 클라우드 인프라 구축
                </p>
                <div class="service_features">
                    <div class="service_feature">클라우드 마이그레이션</div>
                    <div class="service_feature">Auto Scaling</div>
                    <div class="service_feature">DevOps 구축</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">월 50만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>

            <div class="service_card">
                <div class="service_icon_wrapper">
                    <i class="fa fa-paint-brush service_icon"></i>
                    <span class="service_number">06</span>
                </div>
                <h3 class="service_name">UI/UX 디자인</h3>
                <p class="service_desc">
                    사용자 중심의 직관적인 인터페이스와 매력적인 비주얼 디자인
                </p>
                <div class="service_features">
                    <div class="service_feature">사용자 리서치</div>
                    <div class="service_feature">프로토타이핑</div>
                    <div class="service_feature">디자인 시스템</div>
                </div>
                <div class="service_price_wrapper">
                    <div class="service_price">
                        starting at
                        <span class="service_price_amount">150만원</span>
                    </div>
                    <a href="#" class="service_link">자세히 →</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Process Section -->
    <div class="process_section">
        <div class="process_container">
            <div class="process_header">
                <h2>프로젝트 진행 프로세스</h2>
                <p>체계적인 프로세스로 고품질의 결과물을 보장합니다</p>
            </div>
            <div class="process_steps">
                <div class="process_step">
                    <div class="process_step_number">1</div>
                    <h3 class="process_step_title">요구사항 분석</h3>
                    <p class="process_step_desc">
                        고객의 니즈를 정확히 파악하고<br>최적의 솔루션을 제안합니다
                    </p>
                </div>
                <div class="process_step">
                    <div class="process_step_number">2</div>
                    <h3 class="process_step_title">기획 & 디자인</h3>
                    <p class="process_step_desc">
                        사용자 경험을 고려한<br>체계적인 설계를 진행합니다
                    </p>
                </div>
                <div class="process_step">
                    <div class="process_step_number">3</div>
                    <h3 class="process_step_title">개발 & 테스트</h3>
                    <p class="process_step_desc">
                        최신 기술로 개발하고<br>철저한 테스트를 수행합니다
                    </p>
                </div>
                <div class="process_step">
                    <div class="process_step_number">4</div>
                    <h3 class="process_step_title">배포 & 운영</h3>
                    <p class="process_step_desc">
                        안정적인 배포와<br>지속적인 운영 지원을 제공합니다
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="cta_section">
        <div class="cta_box">
            <div class="cta_content">
                <h2 class="cta_title">프로젝트를 시작할 준비가 되셨나요?</h2>
                <p class="cta_desc">
                    전문가와 상담하고 최적의 솔루션을 찾아보세요
                </p>
                <div class="cta_buttons">
                    <a href="#" class="cta_button">무료 상담 신청</a>
                    <a href="#" class="cta_button secondary">포트폴리오 보기</a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
include_once(G5_THEME_PATH.'/tail.php');
?>

읽기 전용 - 쓰기 권한이 없어 수정할 수 없습니다.

페이지 데이터 (JSON) 조직도, 연혁 등의 구조화된 데이터를 JSON 형식으로 입력

대표 이미지

대표 이미지 / OG 이미지

권장: 1200x630px / 검색 및 SNS 공유 시 사용

검색 엔진 최적화 (SEO)

메타 설명 (Meta Description)

0 / 160자

검색 결과에 표시되는 설명 (권장: 150-160자)

키워드 쉼표(,)로 구분하여 입력

구글 검색 결과 미리보기

서비스 소개

sms.phantomdesign.kr › service_intro

페이스북 공유 미리보기

이미지 없음

서비스 소개

sms.phantomdesign.kr

Total
Solution
Provider

기획부터 디자인, 개발, 운영까지
고객의 비즈니스 성공을 위한 모든 것을 제공합니다

500+

Projects

98%

Satisfaction

10+

Years

빠른 개발

최신 기술 스택으로 신속한 프로젝트 진행

안정적 운영

24/7 모니터링과 즉각적인 장애 대응

전문 팀

10년 이상 경력의 전문가 그룹

Our Services

제공 서비스

다양한 IT 솔루션으로 고객의 비즈니스 가치를 극대화합니다

웹사이트 제작

반응형 웹사이트부터 대규모 포털까지 모든 웹 프로젝트를 완벽하게 구현합니다

반응형 디자인

CMS 구축

SEO 최적화

starting at 300만원

자세히 →

모바일 앱 개발

iOS와 Android 플랫폼에 최적화된 네이티브 및 하이브리드 앱 개발

Native/Hybrid 지원

Push 알림

앱스토어 등록

starting at 800만원

자세히 →

쇼핑몰 구축

결제 시스템부터 재고 관리까지 완벽한 전자상거래 솔루션

결제 시스템 연동

재고/주문 관리

마케팅 자동화

starting at 500만원

자세히 →

데이터베이스 구축

안정적이고 확장 가능한 데이터베이스 설계 및 최적화

스키마 설계

성능 최적화

백업/복구 시스템

starting at 200만원

자세히 →

클라우드 서비스

AWS, Azure, GCP 기반의 안정적인 클라우드 인프라 구축

클라우드 마이그레이션

Auto Scaling

DevOps 구축

starting at 월 50만원

자세히 →

UI/UX 디자인

사용자 중심의 직관적인 인터페이스와 매력적인 비주얼 디자인

사용자 리서치

프로토타이핑

디자인 시스템

starting at 150만원

자세히 →

프로젝트 진행 프로세스

체계적인 프로세스로 고품질의 결과물을 보장합니다

요구사항 분석

고객의 니즈를 정확히 파악하고
최적의 솔루션을 제안합니다

기획 & 디자인

사용자 경험을 고려한
체계적인 설계를 진행합니다

개발 & 테스트

최신 기술로 개발하고
철저한 테스트를 수행합니다

배포 & 운영

안정적인 배포와
지속적인 운영 지원을 제공합니다

프로젝트를 시작할 준비가 되셨나요?

전문가와 상담하고 최적의 솔루션을 찾아보세요

무료 상담 신청 포트폴리오 보기

자주 묻는 질문

로딩 중...

서비스 소개

페이지 헤더 설정

CEO 인사말

서비스 소개

서비스 소개

Total Solution Provider

빠른 개발

안정적 운영

전문 팀

제공 서비스

웹사이트 제작

모바일 앱 개발

쇼핑몰 구축

데이터베이스 구축

클라우드 서비스

UI/UX 디자인

프로젝트 진행 프로세스

요구사항 분석

기획 & 디자인

개발 & 테스트

배포 & 운영

프로젝트를 시작할 준비가 되셨나요?

자주 묻는 질문

Total
Solution
Provider