서비스 절차

본문 바로가기

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_flow.php

PHP 파일 내용

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

// 페이지 데이터 (편집 기능을 위해 필요)
$page = [
    'tp_id' => 'service_flow',
    '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'] = $page['tp_title'];

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

// page_config에서 설정 불러오기
include_once(G5_THEME_PATH.'/page_config.php');
apply_sub_header('service_flow');
include_once(G5_THEME_PATH.'/page/page_common.php');
?>

<style>
.page_container {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
}

.intro_text {
    max-width: 800px;
    margin: 0 auto 100px;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    color: #404040;
}

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

.flow_steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    margin-bottom: 100px;
    position: relative;
}

.flow_steps::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right, #000 0%, #000 20%, #E0E0E0 20%, #E0E0E0 40%, #000 40%, #000 60%, #E0E0E0 60%, #E0E0E0 80%, #000 80%, #000 100%);
}

.step_item {
    text-align: center;
    position: relative;
}

.step_circle {
    width: 120px;
    height: 120px;
    background: #fff;
    border: 3px solid #000;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.step_item:hover .step_circle {
    background: #000;
    color: #fff;
    transform: scale(1.1);
}

.step_label {
    font-size: 12px;
    color: #737373;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.step_desc {
    font-size: 14px;
    color: #737373;
    line-height: 1.6;
}

.detail_section {
    background: #FAFAFA;
    padding: 100px 60px;
}

.detail_inner {
    max-width: 1200px;
    margin: 0 auto;
}

.detail_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

.detail_item {
    display: flex;
    gap: 32px;
}

.detail_number {
    font-size: 80px;
    font-weight: 700;
    color: #E0E0E0;
    line-height: 1;
}

.detail_content {
    flex: 1;
    padding-top: 8px;
}

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

.detail_desc {
    font-size: 16px;
    color: #404040;
    line-height: 1.8;
    margin-bottom: 20px;
}

.detail_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail_list li {
    padding: 8px 0;
    font-size: 15px;
    color: #737373;
    position: relative;
    padding-left: 20px;
}

.detail_list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #000;
    font-weight: 700;
}

@media (max-width: 768px) {
    .page_container {
        padding: 40px 20px;
    }

    .intro_text {
        font-size: 16px;
        margin-bottom: 60px;
    }

    .flow_steps {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .flow_steps::before {
        display: none;
    }

    .step_circle {
        width: 100px;
        height: 100px;
        font-size: 32px;
    }

    .detail_section {
        padding: 60px 28px;
    }

    .detail_grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .detail_number {
        font-size: 60px;
    }
}
</style>

<div class="page_container">
    <p class="intro_text">
        체계적인 프로세스와 전문성을 바탕으로<br>
        고객의 비즈니스 목표를 달성하는 최상의 솔루션을 제공합니다
    </p>

    <div class="flow_container">
        <div class="flow_steps">
            <div class="step_item">
                <div class="step_circle">01</div>
                <div class="step_label">Step 01</div>
                <h4 class="step_title">상담</h4>
                <p class="step_desc">
                    고객의 요구사항과<br>
                    목표를 파악합니다
                </p>
            </div>

            <div class="step_item">
                <div class="step_circle">02</div>
                <div class="step_label">Step 02</div>
                <h4 class="step_title">기획</h4>
                <p class="step_desc">
                    최적의 솔루션을<br>
                    설계합니다
                </p>
            </div>

            <div class="step_item">
                <div class="step_circle">03</div>
                <div class="step_label">Step 03</div>
                <h4 class="step_title">개발</h4>
                <p class="step_desc">
                    검증된 기술로<br>
                    구현합니다
                </p>
            </div>

            <div class="step_item">
                <div class="step_circle">04</div>
                <div class="step_label">Step 04</div>
                <h4 class="step_title">테스트</h4>
                <p class="step_desc">
                    철저한 검증과<br>
                    최적화를 진행합니다
                </p>
            </div>

            <div class="step_item">
                <div class="step_circle">05</div>
                <div class="step_label">Step 05</div>
                <h4 class="step_title">운영</h4>
                <p class="step_desc">
                    안정적인 서비스<br>
                    운영을 지원합니다
                </p>
            </div>
        </div>
    </div>

    <div class="detail_section">
        <div class="detail_inner">
            <div class="detail_grid">
                <div class="detail_item">
                    <div class="detail_number">01</div>
                    <div class="detail_content">
                        <h4 class="detail_title">상담 및 요구사항 분석</h4>
                        <p class="detail_desc">
                            프로젝트의 목표와 범위를 명확히 정의하고,
                            고객의 비즈니스를 깊이 이해합니다.
                        </p>
                        <ul class="detail_list">
                            <li>킥오프 미팅 진행</li>
                            <li>요구사항 문서화</li>
                            <li>기술 검토 및 제안</li>
                            <li>예산 및 일정 수립</li>
                        </ul>
                    </div>
                </div>

                <div class="detail_item">
                    <div class="detail_number">02</div>
                    <div class="detail_content">
                        <h4 class="detail_title">기획 및 설계</h4>
                        <p class="detail_desc">
                            사용자 중심의 UI/UX를 설계하고,
                            확장 가능한 시스템 아키텍처를 구성합니다.
                        </p>
                        <ul class="detail_list">
                            <li>와이어프레임 제작</li>
                            <li>디자인 시안 작업</li>
                            <li>DB 설계</li>
                            <li>기술 스택 선정</li>
                        </ul>
                    </div>
                </div>

                <div class="detail_item">
                    <div class="detail_number">03</div>
                    <div class="detail_content">
                        <h4 class="detail_title">개발 및 구현</h4>
                        <p class="detail_desc">
                            최신 기술과 방법론을 활용하여
                            안정적이고 효율적인 시스템을 개발합니다.
                        </p>
                        <ul class="detail_list">
                            <li>프론트엔드 개발</li>
                            <li>백엔드 API 개발</li>
                            <li>데이터베이스 구축</li>
                            <li>주기적 진행상황 공유</li>
                        </ul>
                    </div>
                </div>

                <div class="detail_item">
                    <div class="detail_number">04</div>
                    <div class="detail_content">
                        <h4 class="detail_title">테스트 및 검수</h4>
                        <p class="detail_desc">
                            다양한 테스트를 통해 품질을 검증하고
                            최상의 성능을 보장합니다.
                        </p>
                        <ul class="detail_list">
                            <li>기능 테스트</li>
                            <li>성능 최적화</li>
                            <li>보안 점검</li>
                            <li>크로스 브라우징 테스트</li>
                        </ul>
                    </div>
                </div>

                <div class="detail_item">
                    <div class="detail_number">05</div>
                    <div class="detail_content">
                        <h4 class="detail_title">배포 및 운영 지원</h4>
                        <p class="detail_desc">
                            안정적인 배포와 지속적인 모니터링으로
                            서비스의 안정성을 유지합니다.
                        </p>
                        <ul class="detail_list">
                            <li>프로덕션 배포</li>
                            <li>서비스 모니터링</li>
                            <li>정기 유지보수</li>
                            <li>기술 지원</li>
                        </ul>
                    </div>
                </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_flow

페이스북 공유 미리보기

이미지 없음

서비스 절차

체계적인 프로세스로 성공적인 결과를 만듭니다

sms.phantomdesign.kr

체계적인 프로세스와 전문성을 바탕으로
고객의 비즈니스 목표를 달성하는 최상의 솔루션을 제공합니다

Step 01

상담

고객의 요구사항과
목표를 파악합니다

Step 02

기획

최적의 솔루션을
설계합니다

Step 03

개발

검증된 기술로
구현합니다

Step 04

테스트

철저한 검증과
최적화를 진행합니다

Step 05

운영

안정적인 서비스
운영을 지원합니다

상담 및 요구사항 분석

프로젝트의 목표와 범위를 명확히 정의하고, 고객의 비즈니스를 깊이 이해합니다.

킥오프 미팅 진행
요구사항 문서화
기술 검토 및 제안
예산 및 일정 수립

기획 및 설계

사용자 중심의 UI/UX를 설계하고, 확장 가능한 시스템 아키텍처를 구성합니다.

와이어프레임 제작
디자인 시안 작업
DB 설계
기술 스택 선정

개발 및 구현

최신 기술과 방법론을 활용하여 안정적이고 효율적인 시스템을 개발합니다.

프론트엔드 개발
백엔드 API 개발
데이터베이스 구축
주기적 진행상황 공유

테스트 및 검수

다양한 테스트를 통해 품질을 검증하고 최상의 성능을 보장합니다.

기능 테스트
성능 최적화
보안 점검
크로스 브라우징 테스트

배포 및 운영 지원

안정적인 배포와 지속적인 모니터링으로 서비스의 안정성을 유지합니다.

프로덕션 배포
서비스 모니터링
정기 유지보수
기술 지원

자주 묻는 질문

로딩 중...