소개
단일 페이지에서 프로그램 정보를 통합적으로 제공하는 ‘HUB 페이지’를 직접 구현해 보고자 했습니다.
기존에는 프로그램 안내, 신청, 일정, FAQ, 문의가 각각 흩어져 있어 사용자 입장에서 정보 탐색 동선이 길고, 운영 측면에서도 반복적인 안내가 발생하는 비효율이 있었습니다.
이를 해결하기 위해
정보 구조를 한 페이지로 통합하고
사용자 흐름(탐색 → 이해 → 행동)을 자연스럽게 설계하며
향후 확장 가능한 웹 구조를 직접 구축해 보는 것을 목표로 삼았습니다.
또한, 개발 경험이 많지 않은 상황에서 AI 코딩 에디터를 활용하면 어디까지 구현이 가능한지 실험해 보고자 했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
이번 작업은 아래 3가지 도구를 중심으로 진행했습니다.
Cursor: AI 기반 코드 생성 및 수정
GitHub: 코드 저장 및 버전 관리
Vercel: 웹사이트 배포
Cursor에서 페이지 초안 생성 → GitHub에 업로드 → Vercel로 배포
1) 프로젝트 초기 세팅
로컬에 새 폴더 생성 (예: csr-hub-page)
Cursor에서 폴더 열기
AI 채팅을 통해 페이지 구조 생성
2) 사용한 프롬프트
아래 프롬프트를 그대로 입력하여 페이지 초안을 생성했습니다.
단일 허브 페이지를 만들어줘.
목적은 프로그램 안내, 신청하기, 연간 일정 보기, FAQ, 문의하기를 한 페이지에서 안내하는 것.
톤은 깔끔하고 신뢰감 있게.
섹션은 다음 순서로 구성해줘:
상단 히어로 섹션
프로그램 소개
신청하기 버튼 영역
연간 일정 보기 영역
FAQ
문의하기
모바일에서도 보기 좋게 만들어줘.
Next.js 기반 또는 가장 간단한 프론트엔드 구조로 생성해줘.
3) 생성된 코드 예시
아래는 생성된 페이지 구조의 일부입니다.
export default function Home() {
return (
<main className="flex flex-col items-center">
{/* Hero Section */}
<section className="w-full text-center py-20 bg-gray-100">
<h1 className="text-4xl font-bold">Program Hub</h1>
<p className="mt-4 text-lg">All information in one place</p>
</section>
{/* Program Info */}
<section className="py-16">
<h2 className="text-2xl font-semibold">Program Overview</h2>
</section>
{/* Apply Section */}
<section className="py-16">
<button className="px-6 py-3 bg-black text-white rounded-lg">
Apply Now
</button>
</section>
{/* FAQ */}
<section className="py-16">
<h2 className="text-2xl font-semibold">FAQ</h2>
</section>
</main>
);
}4) 로컬 실행
터미널에서 아래 명령어를 실행해 미리보기를 확인했습니다.
npm install
npm run dev이후 localhost 주소로 접속해 실제 화면을 확인하고, UI 및 구조를 반복적으로 수정했습니다.
5) 배포 흐름
GitHub repository 생성 후 코드 push
Vercel에서 repository import
자동 배포 설정
결과와 배운 점
과정 중에 어떤 시행착오를 겪었나요?
UI 디테일(간격, 버튼 위치 등)은 한 번에 원하는 수준으로 나오지 않음
실행 과정에서 dependency 오류 발생
→ 해결 방식:
에러 메시지를 그대로 복사해 Cursor에 입력 → 자동 수정
도움이 필요한 부분이 있나요?
디자인 자유도를 높이기 위한 방법 (Figma → 코드 변환 등)
백엔드 연결 (폼 데이터 저장, 신청 기능 구현)
실제 사용자 테스트 기반 UX 개선
앞으로의 계획이 있다면 들려주세요.
디자인 퀄리티 고도화 (디자인 시스템 적용)
실제 신청 기능 및 데이터 연동
콘텐츠 구조 개선 및 확장 (다른 프로그램 적용)
