프로젝트 제안서

프로젝트 제안서

부동산 분양 현장 홍보 웹사이트 구축

신규 분양 프로젝트 2종의 프리미엄 홍보 웹사이트와 고객 DB 관리 시스템을 구축하여, xi.co.kr 수준의 세련된 UI/UX로 분양 현장의 온라인 마케팅 효과를 극대화합니다.

13,500,000원 30일 웹 · 랜딩 · 관리자 원본 공고

13+

완료 프로젝트

50+

관리자 페이지 구축

6년+

웹 개발 경력

100%

프로젝트 참여율

함께 만들어 가겠습니다

각 메뉴를 클릭하시면 상세 내용을 확인하실 수 있습니다.

프로젝트 소개

신규 분양 프로젝트 2종의 프리미엄 홍보 웹사이트와 고객 DB 관리 시스템을 구축하여, xi.co.kr 수준의 세련된 UI/UX로 분양 현장의 온라인 마케팅 효과를 극대화합니다.

프로젝트 개요

항목내용
프로젝트명부동산 분양 현장 홍보 웹사이트 구축
카테고리웹 기타(IT 서비스 구축), 랜딩·소개 페이지
제안 금액13,500,000원 (VAT 별도)
제안 기간30일
핵심 기술Next.js 14 · TailwindCSS · Framer Motion · NestJS · MySQL · Vercel

핵심 요구사항 분석

  • 분양 프로젝트 소개 페이지 2종 — 프로젝트 개요, 입지/환경, 단지 설계/평면도, 프리미엄 가치, 갤러리 등 xi.co.kr 벤치마킹 기반 프리미엄 디자인
  • 고객 문의 접수 기능 — 이름, 연락처, 희망 타입, 개인정보 동의 폼을 포함한 잠재 고객 DB 확보 시스템
  • 관리자 페이지 — 로그인 인증, 문의 내역 목록 조회, 상세 확인 기능의 관리자 대시보드
  • PC Web 반응형 — PC, 태블릿, 모바일 환경 대응 반응형 웹 디자인
  • xi.co.kr 벤치마킹 — GS건설 자이 브랜드 사이트 수준의 프리미엄 UI/UX (풀스크린 히어로, 패럴랙스 애니메이션, 클린 레이아웃)

제안 포인트

참고 사이트(xi.co.kr) 분석 결과, 프리미엄 부동산 웹사이트의 핵심은 시각적 임팩트부드러운 인터랙션입니다. 이를 위해 다음과 같이 제안합니다:

  1. Framer Motion 기반 프리미엄 애니메이션 — 스크롤 기반 패럴랙스, 페이드인 트랜지션, 부드러운 페이지 전환으로 xi.co.kr 수준의 고급스러운 사용자 경험 구현
  2. 2개 사이트 공통 아키텍처 — 공유 컴포넌트 라이브러리로 2개 분양 프로젝트 사이트를 효율적으로 개발하고, 향후 추가 사이트 확장에도 용이한 구조
  3. 관리자 대시보드 50+ 페이지 구축 경험 — EZ-Approve, Series-B 등 대규모 관리자 시스템 구축 경험을 바탕으로 안정적인 관리자 페이지 구현
  4. Next.js Image 최적화 — 고해상도 이미지가 많은 부동산 사이트 특성에 맞게 자동 이미지 최적화, WebP 변환, 레이지 로딩으로 빠른 페이지 로딩

사용 기술 및 툴

개발 기술

Next.js 14 TypeScript TailwindCSS Framer Motion NestJS MySQL TypeORM Vercel Docker

협업 및 커뮤니케이션

Slack / 카카오톡 Zoom / Google Meet Notion GitHub Issues Figma

견적서

본 견적서는 프로젝트 요구사항 분석을 기반으로 산출되었습니다.

견적 요약

항목내용
프로젝트명부동산 분양 현장 홍보 웹사이트 구축
제안 금액13,500,000원 (VAT 별도)
제안 기간30일
견적 유효기간제안일로부터 30일

상세 견적 내역

구분항목수량단가금액
기획요구사항 분석, IA 설계, 와이어프레임1식-2,000,000원
디자인Figma UI/UX 디자인 (홍보 사이트 2종 + 관리자)1식-3,000,000원
프론트엔드홍보 사이트 2종 + 관리자 페이지 개발1식-4,500,000원
백엔드API 서버 + DB + 관리자 인증 + 문의 접수1식-2,500,000원
QA/배포테스트, Vercel 배포, 인수인계1식-1,500,000원
합계 (VAT 별도)13,500,000원

산정 근거

유사한 규모의 프로모셔널 웹사이트 + 관리자 시스템 구축 경험을 기반으로 산정하였습니다. 2개 사이트의 공통 아키텍처를 활용하여 비용 효율성을 확보하였으며, xi.co.kr 수준의 프리미엄 디자인 구현을 위한 Framer Motion 애니메이션 작업을 반영하였습니다.

포함 사항

  • 소스 코드 전체 이관
  • 개발 문서 (API 명세서, DB 스키마, 배포 가이드)
  • 1개월 무상 하자 보수
  • 배포 환경 세팅 (Vercel + DB 서버 1회)
  • Figma 디자인 파일 이관

불포함 사항

  • 서버 호스팅 비용 (Vercel Pro, DB 서버 등)
  • 도메인 구매 비용
  • 이미지/영상 에셋 촬영 및 제작 비용
  • 하자 보수 기간 이후 유지보수

공수계산서

기능별 개발 공수(Man-Day)를 산출하여 일정과 비용의 근거를 제시합니다.

공수 요약

구분공수 (M/D)비율
기획/설계3.5 M/D17%
Figma 디자인7.0 M/D35%
프론트엔드 개발4.5 M/D23%
백엔드 개발3.5 M/D17%
QA/배포1.5 M/D8%
합계20.0 M/D100%

기능별 상세 공수

기능세부 작업담당공수 (M/D)
기획/설계요구사항 분석 및 IA 설계기획1.5
와이어프레임 및 프로토타입기획2.0
Figma 디자인홍보 사이트 A 디자인 (5페이지)디자인3.0
홍보 사이트 B 디자인 (5페이지)디자인2.5
관리자 페이지 디자인디자인1.5
프론트엔드 개발홍보 사이트 A (개요, 입지, 단지, 프리미엄, 갤러리)FE1.5
홍보 사이트 B (동일 구조, 콘텐츠 변경)FE1.0
관리자 페이지 (로그인, 문의 목록, 상세)FE1.0
공통 컴포넌트 및 반응형 대응FE1.0
백엔드 개발DB 설계 및 마이그레이션BE0.5
문의 접수 API (생성, 목록, 상세)BE1.0
관리자 인증 (로그인, JWT)BE1.5
이메일 알림 연동BE0.5
QA/배포크로스 브라우저 및 반응형 테스트QA0.5
Vercel 배포 및 인수인계 문서 작성QA1.0

산정 기준

  • 1 M/D = 8시간 기준 (1인 1일 작업량)
  • 주 5일 근무 기준
  • 버퍼 10~15% 포함
  • 유사 프로젝트 수행 경험 기반 효율적 개발

PRD (Product Requirements Document)

프로젝트 요구사항을 정의하고 기능 범위를 명확히 합니다.

1. 프로젝트 배경 및 목적

신규 분양 프로젝트의 온라인 홍보 및 잠재 고객 DB 확보를 목적으로, 프리미엄 홍보 웹사이트 2종과 고객 문의 관리 시스템을 구축합니다. xi.co.kr(GS건설 자이) 수준의 세련된 디자인과 인터랙션을 통해 분양 현장의 브랜드 가치를 온라인으로 전달하고, 관심 고객의 문의 데이터를 체계적으로 수집·관리합니다.

2. 사용자 정의

사용자 유형설명주요 기능
잠재 고객 (분양 관심자)분양 정보 열람 및 문의 접수프로젝트 소개 열람, 갤러리 조회, 문의 접수
관리자 (분양 현장 담당자)고객 문의 관리 및 데이터 조회로그인, 문의 내역 조회, 상세 확인, 데이터 엑스포트

3. 기능 요구사항

3.1 홍보 사이트 (2종 공통 구성)

  • [필수] 프로젝트 개요 — 분양 프로젝트명, 위치, 규모, 분양 일정 등 핵심 정보
  • [필수] 입지/환경 — 교통, 학군, 편의시설, 자연환경 등 입지 분석 정보
  • [필수] 단지 설계/평면도 — 단지 배치도, 세대별 평면도 이미지 뷰어
  • [필수] 프리미엄 가치 — 커뮤니티 시설, 인테리어 특화, 스마트홈 등 프리미엄 요소
  • [필수] 갤러리 — 조감도, 투시도, 모델하우스 이미지/영상 갤러리
  • [필수] 고객 문의 접수 폼 — 하단 고정 또는 별도 섹션

3.2 고객 문의 접수

  • [필수] 이름 입력 (텍스트)
  • [필수] 연락처 입력 (전화번호 포맷 검증)
  • [필수] 희망 타입 선택 (드롭다운/라디오)
  • [필수] 개인정보 수집·이용 동의 체크박스
  • [필수] 접수 완료 확인 화면 (감사 메시지)
  • [선택] 문의 접수 시 관리자 이메일 알림

3.3 관리자 페이지

  • [필수] 관리자 로그인 (ID/PW 기반, JWT 인증)
  • [필수] 문의 내역 목록 조회 (날짜, 이름, 연락처, 희망 타입)
  • [필수] 문의 상세 확인 (개별 문의 데이터 상세 보기)
  • [선택] 문의 데이터 엑셀 다운로드
  • [선택] 문의 상태 관리 (신규/확인/완료)

4. 비기능 요구사항

항목요구사항
성능페이지 초기 로딩 3초 이내 (이미지 최적화 포함)
보안HTTPS 적용, 개인정보(연락처) 암호화 저장, JWT 인증
반응형PC(1200px+) / 태블릿(768px~) / 모바일(~767px) 대응
접근성기본 웹 접근성 준수 (alt 텍스트, 키보드 내비게이션)
브라우저 지원Chrome, Safari, Edge, Firefox 최신 2개 버전

5. 기술 제약사항

  • xi.co.kr 벤치마킹 기반 프리미엄 디자인 구현 필수
  • PC Web 반응형 필수 지원
  • 이미지/영상 에셋은 클라이언트 측에서 제공
  • 2개 분양 사이트는 동일 아키텍처 기반, 콘텐츠만 차별화

6. 범위 외 사항 (Out of Scope)

  • 네이티브 모바일 앱 개발
  • CMS (콘텐츠 관리 시스템) 구축
  • SEO 마케팅 캠페인 집행
  • 실시간 채팅/상담 기능
  • 결제/계약 시스템

일정 제안

총 30일 기준 단계별 마일스톤 및 산출물을 제안합니다.

전체 일정 요약

단계기간주요 산출물
Phase 1: 기획/설계Day 1–4 (4일)요구사항 정의서, 와이어프레임, ERD, API 명세서
Phase 2: Figma 디자인Day 5–12 (8일)홍보 사이트 2종 + 관리자 페이지 Figma 시안
Phase 3: FE + BE 개발Day 13–25 (13일)홍보 사이트 2종 + 관리자 페이지 + API 서버
Phase 4: QA + 배포Day 26–30 (5일)테스트 완료, 프로덕션 배포, 인수인계 문서

상세 타임라인

PHASE 1

기획 및 설계

Day 1–4

클라이언트 킥오프 미팅, 요구사항 확정, 사이트맵 및 IA 설계, 와이어프레임 작성, DB 스키마 설계

  • 산출물: 요구사항 정의서, 와이어프레임, ERD, API 명세서

PHASE 2

Figma 디자인

Day 5–12

xi.co.kr 벤치마킹 기반 프리미엄 디자인 시안 제작. 홍보 사이트 A/B 각 5페이지 + 관리자 페이지. 중간 시안 리뷰 1회 포함

  • 산출물: Figma 디자인 시안, 디자인 가이드, 컴포넌트 라이브러리

PHASE 3

프론트엔드 + 백엔드 개발

Day 13–25

Next.js 기반 홍보 사이트 2종 개발 (Framer Motion 애니메이션 포함), NestJS 백엔드 API 개발, 관리자 페이지 구현, 문의 접수 시스템 연동

  • 산출물: 홍보 사이트 2종 (스테이징), 관리자 페이지, API 서버

PHASE 4

QA 및 배포

Day 26–30

크로스 브라우저 테스트 (Chrome, Safari, Edge, Firefox), 반응형 테스트 (PC, 태블릿, 모바일), Vercel 프로덕션 배포, 인수인계 문서 작성

  • 산출물: 프로덕션 사이트, 테스트 보고서, 인수인계 문서, 배포 가이드

마일스톤 체크포인트

마일스톤시점검수 기준
M1: 설계 완료Day 4요구사항 정의서 및 와이어프레임 승인
M2: 디자인 시안 확정Day 12Figma 디자인 시안 최종 승인
M3: 개발 완료 (스테이징)Day 25스테이징 환경에서 전체 기능 동작 확인
M4: 최종 배포Day 30프로덕션 배포 완료, 인수인계 문서 전달

커뮤니케이션 계획

항목방식주기
일일 진행 공유Slack / 카카오톡매일
주간 미팅Zoom / Google Meet주 1회
마일스톤 리뷰화면 공유 + 문서단계 완료 시
이슈 트래킹GitHub Issues상시

유사 프로젝트 경험

본 프로젝트와 유사한 기능/기술 스택을 활용한 수행 경험을 소개합니다.

13+

완료 프로젝트

9개

유사 프로젝트

6년+

웹 개발 경력

100%

프로젝트 참여율

B2B SaaS / 전자결재

EZ-Approve — 전자결재 SaaS 플랫폼

B2B SaaS · 2026.01 ~ 2026.03 (9주)

프로젝트 개요

한국 기업의 전자결재·문서관리 프로세스를 통합하는 B2B SaaS 플랫폼. 50+ 페이지 관리자 대시보드, 120~150 API 엔드포인트, 2,764 파일, 504 PR/9주 딜리버리.

핵심 기능

  • 다단계 전자결재 엔진 (8종 결재 액션)
  • Lexical 리치 에디터 (170파일, 26 커스텀 노드)
  • 7종 역할별 권한 관리 (RBAC)

본 프로젝트와의 유사점

  • 관리자 대시보드 50+ 페이지 — 본 프로젝트의 관리자 페이지(로그인, 문의 내역 조회, 상세 확인)와 동일한 CRUD 패턴
  • NestJS + MySQL + Next.js 동일 스택 — 데이터 조회/관리, JWT 인증 시스템 구현 경험

기술 스택

NestJS 10 Next.js 13 TypeScript MySQL 8 MUI v5 Docker
핀테크 / VC

Series-B — VC 펀드 관리 플랫폼

핀테크 / B2B SaaS · 2023.11 ~ 2024.12 (14개월)

프로젝트 개요

벤처캐피탈 업계의 투자조합 관리, 전자결재, 규제 보고를 통합하는 올인원 SaaS. PR 1,652건, 50+ 페이지, 22 도메인 모듈, 80+ 엔티티.

핵심 기능

  • GP/LP 펀드 라이프사이클 관리 대시보드
  • AI 투자심사보고서 자동 생성 (ChatGPT)
  • 5계층 보안 아키텍처

본 프로젝트와의 유사점

  • 50+ 페이지 대규모 웹 애플리케이션 — 세련된 UI/UX와 데이터 조회·관리 대시보드 구축 경험
  • NestJS + MySQL + Next.js 동일 스택 — 본 프로젝트의 관리자 시스템 구축에 직접 활용

기술 스택

NestJS 10 Next.js 13 TypeScript MySQL AWS Lexical
B2B SaaS / 헬스케어

Harmony Link — 시니어 주간보호 관리 플랫폼

헬스케어 / 시니어 케어 · 2025 (약 6개월)

프로젝트 개요

노인 주간보호센터의 돌봄 기록, 투약 관리, 보호자 소통, AI 건강분석을 통합한 멀티플랫폼 관리 시스템. 133K+ LOC, 140+ API 엔드포인트, 6개 플랫폼 지원.

핵심 기능

  • 관리자 웹 패널 (RBAC 기반 다중 시설 관리)
  • AI 건강 분석 (OpenAI 연동)
  • 6개 플랫폼 동시 지원 (Android, iOS, Web 등)

본 프로젝트와의 유사점

  • 반응형 웹 + 관리자 패널 조합 — 본 프로젝트의 "홍보 사이트 + 관리자 페이지" 구조와 동일
  • Next.js + NestJS 풀스택 — 멀티플랫폼(PC/태블릿/모바일) 반응형 대응 경험

기술 스택

NestJS 10 Next.js 13 Flutter MySQL 8 AWS CDK Firebase
Web3 / GameFi

Life3 — Web 3.0 dApp 마켓플레이스

NFT 마켓플레이스 · 2023.12 ~ 2024.07 (8개월)

프로젝트 개요

NFT 마켓플레이스, 포인트-토큰 스왑, 게이미피케이션 리워드를 통합한 Web 3.0 dApp. 프론트엔드 3개 앱(React SPA + Next.js Admin + Pug SSR), 4개 마이크로서비스.

핵심 기능

  • NFT 컬렉션 갤러리 브라우징 — 이미지 중심 카드 레이아웃
  • 25+ 페이지 어드민 패널
  • 프론트엔드 3개 앱 동시 운영

본 프로젝트와의 유사점

  • 이미지 중심 갤러리 UI — 분양 홍보 사이트의 조감도/투시도 갤러리 페이지와 동일한 미디어 브라우징 패턴
  • 프리미엄 웹 UI/UX — React/Next.js 기반 세련된 인터랙션 구현 경험

기술 스택

React 18 Next.js 13 Express 4 PostgreSQL MUI v5
B2B / 네트워킹

Connectin — 디지털 명함 & 네트워킹 플랫폼

B2B 네트워킹 · 2025.05 ~ 2025.08 (3개월)

프로젝트 개요

OCR 명함 스캐닝, E2E 암호화 메시징, BLE/GPS 근거리 탐색을 결합한 디지털 명함 & 네트워킹 플랫폼. 12개 마이크로서비스, 3개 플랫폼(iOS, Android, Web) 동시 지원.

핵심 기능

  • 프로필 카드 리스트 — 사용자 탐색 + 반응형 웹
  • Next.js 15 + Tailwind CSS 4 기반 랜딩 페이지
  • 관리자 패널 (역할 기반 권한, 대량 사용자 관리)

본 프로젝트와의 유사점

  • 반응형 랜딩 페이지 + 관리자 패널 — Next.js + Tailwind CSS 기반 반응형 웹과 관리자 페이지 조합 경험
  • 크로스플랫폼 대응 — PC/태블릿/모바일 반응형 설계 경험

기술 스택

Flutter 3.22 Next.js 15 Tailwind CSS 4 Express.js PostgreSQL
B2C 앱 / 피트니스

Pilates App — 필라테스 프랜차이즈 관리 앱

CRM / O2O · 2019.09 ~ 2019.12 (4개월)

프로젝트 개요

필라테스 센터의 예약, 결제, 회원관리, 매출분석을 통합하는 올인원 관리 플랫폼. 3개 플랫폼(Android, iOS, 반응형 웹) 동시 출시, 기획~개발 풀스코프 수행.

핵심 기능

  • 프랜차이즈 다지점 통합 관리 대시보드
  • 수업 예약 시스템 + 수강권 결제
  • 매출 대시보드 + 커뮤니티 & 채팅

본 프로젝트와의 유사점

  • 관리자 대시보드 + 반응형 웹 — 데이터 목록 조회, 상세 확인, 관리 기능이 본 프로젝트의 관리자 페이지와 동일 패턴
  • React 기반 웹 + Node.js 백엔드 — 동일 기술 스택 기반 풀스택 개발 경험

기술 스택

React Native React Node.js FCM / APNs
핀테크 / P2P

P2P Funding — P2P 크라우드 펀딩 플랫폼

핀테크 / 크라우드펀딩 · 2019.12 ~ 2020.01 (2개월)

프로젝트 개요

소액 투자자 대상 P2P 렌딩 마켓플레이스. 고객 포탈(130 API) + 관리자 패널(200+ API), 80+ DB 엔티티, 한국 금융 KYC 통합.

핵심 기능

  • 투자 상품 마켓플레이스 (랜딩 + 상세 페이지)
  • 종합 관리자 대시보드 (200+ API)
  • 반응형 웹 (PC + 모바일)

본 프로젝트와의 유사점

  • 프로모셔널 랜딩 페이지 + 관리자 대시보드 — 상품 소개 페이지와 관리자 시스템 조합이 본 프로젝트의 홍보 사이트 + 관리자 페이지 구조와 동일
  • 고객 데이터 수집 및 관리 — 고객 정보 입력 폼, 데이터 조회/관리 경험

기술 스택

Django Python MySQL AWS S3 Nginx
AI / 자동화

AI Agent — AI-Native 개발 프레임워크

AI / 자동화 · 2025~ (47일간 236 커밋)

프로젝트 개요

멀티 AI 에이전트 오케스트레이션 프레임워크. Claude, Gemini, GPT 등 복수 LLM을 통합 관리하며, 134+ 스킬 모듈과 실시간 대시보드를 갖춘 개발 자동화 시스템.

핵심 기능

  • 실시간 대시보드 (React 19 + WebSocket)
  • 문서 인텔리전스 (PDF/DOCX 변환)
  • 134+ 재사용 가능 스킬 모듈

본 프로젝트와의 유사점

  • React 기반 대시보드 UI — 실시간 데이터 조회 대시보드 구축 경험을 관리자 페이지에 활용
  • TypeScript + Tailwind CSS — 본 프로젝트와 동일한 프론트엔드 기술 스택

기술 스택

TypeScript React 19 Tailwind CSS 4 Node.js 20 Hono
B2C 앱 / 소셜

Calendar Share — 소셜 캘린더 공유 플랫폼

소셜 네트워킹 · 2025.01 (MVP)

프로젝트 개요

캘린더와 소셜 미디어를 통합한 크로스플랫폼 소셜 캘린더 앱. Flutter 단일 코드베이스 45+ 화면, Firebase 8개 서비스 통합, 7종 푸시 알림.

핵심 기능

  • 소셜 피드 (포스트, 좋아요, 댓글)
  • QR 기반 소셜 디스커버리
  • Firebase + Supabase 듀얼 백엔드

본 프로젝트와의 유사점

  • 사용자 데이터 수집 + Firebase 통합 — 고객 문의 접수 폼과 유사한 사용자 입력 데이터 처리 경험
  • 크로스플랫폼 반응형 UI — 다양한 디바이스 대응 UI 구현 경험

기술 스택

Flutter 3.27 Firebase Supabase Dart

함께 만들어 가겠습니다

프로젝트에 대해 더 자세한 논의를 원하시면 미팅을 신청해 주세요.