Nuxt와 PHP를 활용해 정적 서비스 형태의 웹사이트를 개발하는 방법을 plan.apthow.com 사례 중심으로 정리합니다. 정적 배포, PHP API, 데이터 갱신, SEO 구조까지 실무 기준으로 설명합니다.

Nuxt와 PHP로 만든 정적 서비스 개발 사례: plan.apthow.com 구조 분석

Nuxt와 PHP로 정적 서비스를 개발하면 빠른 페이지 로딩, 쉬운 배포, 낮은 서버 비용, 검색엔진 최적화까지 동시에 챙길 수 있습니다. 이번 글에서는 알뜰폰 요금제 비교 서비스인 플랜앱트하우(plan.apthow.com) 같은 형태의 웹서비스를 기준으로, Nuxt 프론트엔드와 PHP 백엔드를 조합해 정적 서비스 중심으로 개발하는 방법을 정리합니다.

앞으로 플랜앱트하우(plan.apthow.com) 는 플하로 줄여서 얘기하겠습니다.

플하 알뜰폰 요금제를 데이터, 통화, 가격 조건으로 비교할 수 있는 서비스로 소개되고 있으며, 평생 할인, 0원 요금제, 할인 종료 후 요금, QoS 속도 같은 조건을 비교하는 용도로 언급됩니다.

Nuxt와 PHP 조합이 정적 서비스에 잘 맞는 이유

정적 서비스라고 해서 모든 데이터를 HTML에 직접 박아 넣는 방식만 의미하지는 않습니다. 실무에서는 보통 다음과 같은 구조를 많이 사용합니다.

영역사용 기술역할

프론트엔드	Nuxt	화면 구성, SEO 페이지 생성, 정적 빌드
백엔드	PHP	데이터 수집, 가공, JSON API 생성
데이터 저장	JSON / MySQL	요금제 데이터 저장
배포	Apache / Nginx	정적 파일 서빙
자동화	Cron	데이터 갱신, 빌드 자동화

Nuxt는 정적 페이지 생성에 강하고, PHP는 서버에서 간단한 데이터 처리와 크롤링, API 작성에 유리합니다. 특히 기존 Apache 기반 서버를 운영하고 있다면 Node 서버를 상시 실행하지 않아도 Nuxt 빌드 결과물을 정적 파일로 배포할 수 있습니다.

플하 같은 서비스의 핵심 구조

알뜰폰 요금제 비교 서비스는 사용자가 다음 조건으로 검색하는 경우가 많습니다.

알뜰폰 요금제 비교
0원 요금제
데이터 무제한 요금제
평생 할인 요금제
QoS 속도 비교
할인 종료 후 실제 요금

이런 서비스는 실시간 게시판처럼 매초 데이터가 바뀌는 구조보다는, 일정 주기로 데이터를 갱신하고 사용자는 빠르게 조회하는 구조가 더 적합합니다.

즉, 다음 구조가 효율적입니다.

통신사/요금제 데이터 수집
        ↓
PHP에서 데이터 정리
        ↓
JSON 파일 또는 DB 저장
        ↓
Nuxt에서 정적 페이지 생성
        ↓
Apache/Nginx로 정적 배포

Nuxt 정적 생성 방식

Nuxt에서는 페이지를 정적으로 생성해 서버 부하를 줄일 수 있습니다.

예를 들어 요금제 목록 페이지는 다음처럼 구성할 수 있습니다.

<script setup>
const { data: plans } = await useFetch('/data/plans.json')

const keyword = ref('')
const selectedCarrier = ref('')

const filteredPlans = computed(() => {
  if (!plans.value) return []

  return plans.value.filter(plan => {
    const matchKeyword =
      !keyword.value ||
      plan.name.includes(keyword.value) ||
      plan.carrier.includes(keyword.value)

    const matchCarrier =
      !selectedCarrier.value ||
      plan.carrier === selectedCarrier.value

    return matchKeyword && matchCarrier
  })
})
</script>

<template>
  <main>
    <h1>알뜰폰 요금제 비교</h1>

    <section>
      <input
        v-model="keyword"
        type="text"
        placeholder="요금제명 또는 통신사 검색"
      />

      <select v-model="selectedCarrier">
        <option value="">전체 통신사</option>
        <option value="KT망">KT망</option>
        <option value="SKT망">SKT망</option>
        <option value="LG U+망">LG U+망</option>
      </select>
    </section>

    <section>
      <article v-for="plan in filteredPlans" :key="plan.id">
        <h2>{{ plan.name }}</h2>
        <p>통신망: {{ plan.carrier }}</p>
        <p>월 요금: {{ plan.price.toLocaleString() }}원</p>
        <p>데이터: {{ plan.data }}</p>
        <p>통화: {{ plan.call }}</p>
        <p>할인 종료 후 요금: {{ plan.afterDiscountPrice.toLocaleString() }}원</p>
      </article>
    </section>
  </main>
</template>

이 방식은 사용자가 페이지에 접속했을 때 서버에서 매번 DB를 조회하지 않고, 미리 만들어진 JSON 데이터를 불러와 화면에서 필터링합니다.

PHP는 어디에 사용하면 좋은가

PHP는 정적 서비스에서 다음 역할을 맡기 좋습니다.

데이터 수집

<?php

$plans = [
    [
        'id' => 1,
        'name' => '데이터 무제한 11GB 요금제',
        'carrier' => 'LG U+망',
        'price' => 9900,
        'afterDiscountPrice' => 33000,
        'data' => '11GB + 일 2GB + 3Mbps',
        'call' => '무제한',
        'isLifetimeDiscount' => false
    ],
    [
        'id' => 2,
        'name' => '평생 할인 7GB 요금제',
        'carrier' => 'KT망',
        'price' => 7700,
        'afterDiscountPrice' => 7700,
        'data' => '7GB + 1Mbps',
        'call' => '무제한',
        'isLifetimeDiscount' => true
    ]
];

file_put_contents(
    __DIR__ . '/public/data/plans.json',
    json_encode($plans, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)
);

echo "plans.json 생성 완료";

JSON API 제공

<?php
header('Content-Type: application/json; charset=utf-8');

$file = __DIR__ . '/data/plans.json';

if (!file_exists($file)) {
    http_response_code(404);
    echo json_encode([
        'message' => '요금제 데이터가 없습니다.'
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

echo file_get_contents($file);

PHP를 API 서버처럼 사용할 수도 있지만, 정적 서비스라면 가능하면 JSON 파일을 만들어 Nuxt에서 직접 읽는 방식이 더 단순합니다.

정적 서비스에서 SEO가 중요한 이유

알뜰폰 요금제 비교 같은 서비스는 검색 유입이 중요합니다. 사용자는 보통 서비스명을 직접 검색하기보다 문제 해결형 키워드로 들어옵니다.

예를 들면 다음과 같습니다.

검색 키워드검색 의도

알뜰폰 요금제 비교	여러 요금제를 한눈에 비교하고 싶음
0원 요금제	현재 무료 또는 특가 요금제를 찾고 싶음
평생 할인 요금제	할인 종료 후 요금이 오르지 않는 상품을 찾고 싶음
데이터 무제한 알뜰폰	데이터 사용량이 많은 사용자
QoS 속도 비교	속도 제한 조건을 확인하고 싶음

따라서 Nuxt 페이지를 만들 때 단순히 목록만 보여주는 것이 아니라, 각 검색 의도에 맞는 랜딩 페이지를 따로 만드는 것이 좋습니다.

/
├── plans
│   ├── index.vue              // 전체 요금제 비교
│   ├── free.vue               // 0원 요금제
│   ├── unlimited.vue          // 무제한 요금제
│   ├── lifetime-discount.vue  // 평생 할인 요금제
│   └── qos.vue                // QoS 속도 비교

Nuxt에서 SEO 메타 태그 설정하기

<script setup>
useSeoMeta({
  title: '알뜰폰 요금제 비교 | 데이터 무제한, 0원 요금제, 평생 할인',
  description: '알뜰폰 요금제를 데이터, 통화, 가격, 평생 할인, 할인 종료 후 요금 기준으로 비교해보세요.',
  ogTitle: '알뜰폰 요금제 비교',
  ogDescription: '데이터 무제한, 0원 요금제, 평생 할인 요금제를 한눈에 비교할 수 있습니다.',
  ogType: 'website'
})
</script>

정적 서비스라도 SEO 메타 태그는 반드시 페이지별로 다르게 설정하는 것이 좋습니다. 모든 페이지가 같은 title과 description을 사용하면 검색엔진에서 중복 페이지처럼 보일 수 있습니다.

데이터 갱신 자동화 구조

요금제 비교 서비스는 데이터가 계속 바뀌기 때문에 수동 관리만으로는 한계가 있습니다. PHP 스크립트와 Cron을 사용하면 일정 주기로 데이터를 갱신할 수 있습니다.

crontab -e

0 */6 * * * /usr/bin/php /var/www/plan/scripts/update-plans.php >> /var/log/plan-update.log 2>&1

위 설정은 6시간마다 PHP 스크립트를 실행합니다.

갱신 흐름은 다음과 같이 구성할 수 있습니다.

PHP 데이터 수집
        ↓
plans.json 생성
        ↓
Nuxt generate 실행
        ↓
정적 파일 배포
        ↓
Discord 또는 이메일 알림

플랜앱트하우(플하) 이벤트 영상

Apache에서 Nuxt 정적 파일 배포하기

Nuxt 정적 빌드 결과물을 Apache에서 서비스하려면 다음처럼 설정할 수 있습니다.

<VirtualHost *:80>
    ServerName plan.apthow.com
    DocumentRoot /var/www/plan/.output/public

    <Directory /var/www/plan/.output/public>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/plan_error.log
    CustomLog ${APACHE_LOG_DIR}/plan_access.log combined
</VirtualHost>

Nuxt 정적 서비스에서는 PHP를 직접 같은 디렉터리에 섞기보다, 정적 파일 영역과 PHP API 영역을 분리하는 것이 관리하기 좋습니다.

/var/www/plan-front     → Nuxt 정적 파일
/var/www/plan-api       → PHP API 및 데이터 처리

실무에서 주의할 점

1. 모든 필터를 서버 API로 처리하지 않아도 됩니다

요금제 수가 수백 개 수준이라면 JSON을 한 번 내려받고 브라우저에서 필터링해도 충분합니다. 오히려 매번 API를 호출하는 방식보다 빠르고 단순합니다.

2. 할인 종료 후 요금을 반드시 보여줘야 합니다

알뜰폰 요금제는 첫 달 또는 몇 개월만 저렴한 경우가 많습니다. 사용자는 실제로 나중에 얼마를 내야 하는지 알고 싶어합니다. 따라서 현재 요금, 할인 기간, 할인 종료 후 요금을 분리해서 저장하는 것이 좋습니다.

{
  "name": "데이터 무제한 11GB 요금제",
  "price": 9900,
  "discountMonths": 7,
  "afterDiscountPrice": 33000
}

3. 검색 페이지를 인덱싱 가능한 구조로 만들어야 합니다

단순히 자바스크립트 필터만 있는 페이지보다, 주요 키워드별 정적 페이지를 만드는 것이 검색 유입에 유리합니다.

예를 들어 다음 페이지는 각각 별도 SEO 타깃을 가질 수 있습니다.

알뜰폰 0원 요금제 비교
알뜰폰 데이터 무제한 요금제 비교
알뜰폰 평생 할인 요금제 비교
알뜰폰 QoS 속도 비교

FAQ

Q. Nuxt와 PHP를 같이 쓰는 것이 이상한 구조인가요?

아닙니다. Nuxt는 프론트엔드와 정적 페이지 생성에 집중하고, PHP는 데이터 처리와 자동화에 사용하면 역할이 명확합니다.

Q. 정적 서비스인데 데이터가 바뀌면 어떻게 하나요?

PHP 스크립트로 데이터를 갱신하고, JSON 파일을 다시 만든 뒤 Nuxt를 재빌드하면 됩니다. 데이터가 자주 바뀌지 않는 서비스라면 이 방식이 단순하고 안정적입니다.

Q. PHP 대신 Node API를 써도 되나요?

가능합니다. 다만 기존 서버가 Apache와 PHP 중심이라면 PHP를 사용하는 편이 배포와 유지보수 측면에서 더 간단할 수 있습니다.

Q. plan.apthow.com 같은 비교 사이트는 SEO에 유리한가요?

비교형 서비스는 사용자의 검색 의도가 명확하기 때문에 SEO에 적합합니다. 다만 단순 목록 페이지보다 키워드별 랜딩 페이지, 상세 페이지, FAQ, 구조화된 메타 정보가 함께 있어야 검색 유입을 늘리기 좋습니다.

정리

Nuxt와 PHP를 조합한 정적 서비스 개발은 빠른 속도, 낮은 서버 비용, 쉬운 유지보수, SEO 최적화 측면에서 장점이 많습니다. 특히 plan.apthow.com처럼 알뜰폰 요금제 비교, 가격 비교, 조건 필터링이 중요한 서비스라면 Nuxt로 화면과 정적 페이지를 구성하고 PHP로 데이터 갱신과 JSON 생성을 처리하는 구조가 실무적으로 잘 맞습니다.

정적 서비스라고 해서 단순한 HTML 사이트에 머무를 필요는 없습니다. Nuxt의 정적 생성 기능, PHP의 데이터 처리 능력, Cron 자동화, Apache 배포를 함께 사용하면 검색 유입을 고려한 실용적인 웹서비스를 만들 수 있습니다.

PWA 앱 설치 방법 총정리: 안드로이드, 아이폰, PC에서 설치하는 방법 (0)	2026.06.07
Nuxt와 Codex로 만든 알뜰폰 요금제 비교 서비스 개발기 (0)	2026.06.02
Nuxt4 설치부터 실제 배포까지 완벽 정리 (0)	2026.05.21

Nuxt와 PHP로 만든 정적 서비스 개발 사례 플랜앱트하우(플하) -plan.apthow.com 구조 분석