Nuxt와 Codex로 만든 알뜰폰 요금제 비교 서비스 개발기

Nuxt 3와 OpenAI Codex를 활용하여 개발한 알뜰폰 요금제 비교 서비스 개발 과정을 소개합니다.

데이터 수집, 검색 최적화, 실시간 요금제 비교 기능 구현 경험을 정리했습니다.

Nuxt와 Codex로 만든 알뜰폰 요금제 비교 서비스 개발기 

알뜰폰 시장이 빠르게 성장하면서 수백 개의 요금제 중에서 사용자에게 가장 적합한 상품을 찾는 일이 점점 어려워지고 있습니다. 이러한 문제를 해결하기 위해 알뜰폰 요금제 비교 서비스를 개발하게 되었습니다. 이 프로젝트는 Nuxt 3 기반 프론트엔드와 OpenAI Codex를 활용한 개발 생산성 향상에 초점을 맞춰 구축되었습니다. 실제로 통신사, 데이터 용량, 통화 조건, 할인 기간 등을 한 번에 비교할 수 있도록 설계되었습니다.

---

프로젝트를 만들게 된 이유

기존 알뜰폰 요금제 비교 사이트를 사용하면서 몇 가지 불편한 점이 있었습니다.

• 원하는 데이터 용량 검색이 어려움
• 할인 종료 후 실제 요금 확인이 번거로움
• 평생 할인 여부 확인이 어려움
• 여러 통신사를 동시에 비교하기 힘듦
• 모바일에서 필터링 속도가 느림

특히 알뜰폰 요금제는 프로모션에 따라 가격이 자주 변경되기 때문에 단순 목록 제공만으로는 사용자에게 충분한 정보를 제공하기 어렵다고 판단했습니다.

---

기술 스택

Frontend

 

Nuxt 3
Vue 3
TypeScript
Pinia
Tailwind CSS

 

Backend

 

PHP
MySQL
REST API
Cron Scheduler

 

AI 개발 도구

 

OpenAI Codex
ChatGPT
GitHub

 

Codex를 적극 활용하면서 반복적인 코드 작성 시간을 크게 줄일 수 있었습니다.

예를 들어 다음과 같은 작업을 AI와 함께 진행했습니다.

• API 호출 코드 생성
• 검색 필터 로직 구현
• TypeScript 타입 정의
• SEO 메타 태그 생성
• 정렬 기능 구현
• 크롤링 보조 코드 작성

---

왜 Nuxt를 선택했는가

1. SEO에 유리한 SSR

알뜰폰 요금제 비교 서비스는 검색 유입이 매우 중요합니다.

SPA 방식보다 SSR(Server Side Rendering)을 지원하는 Nuxt가 훨씬 유리합니다.

 

<script setup>
useSeoMeta({
  title: '알뜰폰 요금제 비교',
  description: '데이터 무제한 알뜰폰 요금제 비교'
})
</script>

 

Google 검색 엔진은 SSR 페이지를 더 빠르게 인덱싱할 수 있기 때문에 SEO 측면에서 큰 장점이 있습니다.

---

2. 빠른 페이지 로딩

Nuxt의 서버 렌더링과 하이드레이션 덕분에 초기 페이지 로딩 속도를 개선할 수 있었습니다.

특히 검색 결과 페이지에서 효과가 컸습니다.

사용자는 필터를 변경할 때마다 즉시 결과를 확인할 수 있습니다.

---

3. 파일 기반 라우팅

요금제 상세 페이지 생성도 매우 편리했습니다.

pages/
 ├─ index.vue
 ├─ plans.vue
 └─ plans/
      └─ [id].vue

 

동적 라우팅만으로 수천 개의 요금제 페이지를 쉽게 구성할 수 있습니다.

---

Codex를 활용한 개발 생산성 향상

이번 프로젝트에서 가장 흥미로웠던 부분은 Codex 활용이었습니다.

예전에는 다음 작업을 직접 구현했습니다.

데이터 필터링
정렬 로직
API 연동
타입 정의

 

하지만 Codex를 활용하면서 자연어로 요구사항을 설명한 후 초안을 빠르게 생성할 수 있었습니다.

예시

Nuxt3에서 데이터 사용량 기준으로
요금제를 정렬하는 composable 만들어줘

 

몇 초 안에 기본 구조가 생성되었고, 개발자는 비즈니스 로직 검증에 집중할 수 있었습니다.

---

핵심 기능 구현

요금제 검색

사용자가 원하는 조건으로 검색 가능합니다.

• 통신망
• 데이터 제공량
• 통화 제공량
• 문자 제공량
• 월 요금
• 평생 할인 여부

---

할인 종료 후 실제 요금 표시

알뜰폰 사용자들이 가장 많이 놓치는 부분입니다.

예시

항목표시

프로모션 요금	7,700원
유지 기간	7개월
이후 요금	29,700원

이 정보를 한눈에 확인할 수 있도록 설계했습니다.

---

QoS 속도 비교

단순 무제한 표시만으로는 실제 사용성을 알기 어렵습니다.

예를 들어

상품속도

A	1Mbps
B	3Mbps
C	5Mbps

QoS 제한 속도를 함께 보여주어 사용자가 실사용 경험을 예측할 수 있도록 했습니다.

---

SEO 최적화 전략

검색 유입 확보를 위해 다음을 적용했습니다.

동적 메타 태그

useSeoMeta({
  title: plan.name,
  description: plan.description
})

 

구조화 데이터

{
  "@context": "https://schema.org",
  "@type": "Product"
}

 

Sitemap 자동 생성

@nuxtjs/sitemap

 

서버 렌더링 적용

ssr: true

 

---

개발하면서 얻은 교훈

알뜰폰 비교 서비스는 단순히 데이터를 보여주는 프로젝트가 아니었습니다.

실제로 중요한 것은

• 데이터 신뢰성
• 검색 속도
• 모바일 UX
• SEO
• 지속적인 데이터 갱신

이 다섯 가지 요소였습니다.

특히 Nuxt SSR과 Codex 조합은 1인 개발 환경에서 상당한 생산성 향상을 경험할 수 있었습니다.

---

마무리

plan.apthow.com은 Nuxt 3와 Codex를 활용하여 개발한 알뜰폰 요금제 비교 서비스입니다. 단순한 목록 제공이 아니라 할인 종료 후 실제 요금, QoS 속도, 평생 할인 여부 등 사용자가 실제로 궁금해하는 정보를 빠르게 확인할 수 있도록 설계했습니다. 또한 SSR 기반 SEO 최적화를 적용하여 검색 유입을 고려한 구조로 개발했습니다. 실제 서비스를 운영하면서 Nuxt의 생산성과 Codex의 개발 보조 능력을 함께 활용하면 개인 프로젝트도 충분히 경쟁력 있는 웹서비스로 성장시킬 수 있다는 점을 확인할 수 있었습니다.

---

 

알뜰폰 요금제 비교 | 통신사별 데이터·가격 한눈에 – 플랜앱트하우(플하)