SERVITH Agency Website
Project Case Study
SERVITH Agency Website
토론토 기반 1인 웹 에이전시 SERVITH의 공식 마케팅 웹사이트. 서비스(제공 범위 명확화), 가격(플랜/옵션 투명화), 포트폴리오, 그리고 RFP(파일 업로드 포함) 중심의 견적 요청 플로우를 통해 “문의 전환”을 최우선으로 설계했다. 1개월 내 1인 개발.
라이브 프로젝트 보기 →Overview
SERVITH 공식 웹사이트는 “로컬 비즈니스 웹사이트를 빠르고 신뢰감 있게 구축”하는 에이전시의 가치 제안을 명확히 전달하고, 방문자가 문의(Consultation) 또는 견적 요청(RFP) 으로 바로 이어지도록 설계한 마케팅 사이트입니다.
첫 화면에서 “Custom Websites. Tailored for Your Business.” 메시지와 함께 LET’S TALK! CTA를 전면에 배치해, 탐색보다 전환을 우선하는 구조를 잡았습니다.
본 프로젝트는 개발 기간 1개월, 1인 개발로 구축했습니다.
Objectives
서비스 제공 범위를 명확히 설명해 “기대치 불일치”를 사전에 차단
가격을 플랜 형태로 표준화해 초기 상담 비용/시간을 절감
포트폴리오를 단순/일관된 카드 형태로 노출해 신뢰 신호 강화
RFP 폼에서 텍스트/이미지/레퍼런스 파일 업로드까지 지원해 견적 산정을 빠르게
Contact 폼은 reCAPTCHA로 보호해 스팸/봇 리스크를 최소화
EN/KR 토글 기반의 다국어 확장 가능 구조 제공
Information Architecture
상단 내비게이션은 전환 퍼널에 맞춰 구성했습니다.
Service: 무엇을 제공하는지(그리고 제공하지 않는지) + 프로세스
Pricing: 플랜/호스팅/옵션 서비스의 기준점 제시
Our Work: 신뢰(레퍼런스) 보강
Contact: 일반 문의 채널
Request for Proposal: 실제 프로젝트 견적 요청(핵심 전환)
또한 FAQ/정책(라이선스/프라이버시/약관)을 하단에 배치해 서비스 운영 관점의 신뢰도를 보강했습니다.
Key Product Decisions
1) “무엇을 하는지”보다 “어떻게 진행되는지”를 먼저 구조화
Service 페이지는 제공 항목(디자인/호스팅/가격/지원/성능&SEO) 이후에 STEP 01~05 프로세스를 명확히 제시합니다. 특히 콘텐츠 제출 항목(텍스트/이미지/레이아웃 선호/레퍼런스)을 구체적으로 안내해, 커뮤니케이션 비용을 줄이도록 설계했습니다.
또한 “현재 이커머스/결제 시스템 개발은 제공하지 않는다”는 제한을 명시해 리드 품질을 높였습니다.
2) Pricing은 “비교 가능성”에 집중
Pricing은 Design-to-Web Conversion 플랜(Mini Section Site, Business One-Pager, Custom Website)과 호스팅/유지보수 옵션을 분리해 보여주고, 호스팅 별도 청구/일회성 Conversion Fee 등 운영 정책을 함께 노출합니다.
트래픽 기반 운영을 고려해 월 5GB 포함, 추가 5GB 단위 과금 등 현실적인 제약도 페이지에서 바로 확인 가능하게 했습니다.
3) RFP는 “견적에 필요한 정보”를 폼 자체에서 수집
Request for Proposal은 “메시지에 포함할 항목”을 가이드로 제공하고, 파일 업로드(최대 5개, 총 20MB) 를 지원합니다. (로고/이미지, 텍스트 파일, 와이어프레임/레퍼런스)
이는 이메일 왕복을 줄이고, 1차 견적 정확도를 높이기 위한 설계입니다.
4) FAQ로 운영 정책에 대한 마찰을 사전에 제거
FAQ에서는 일정/비용/유지보수뿐 아니라, 디자인 소유권(디자인 렌탈), 코드/디자인 파일 제공 여부, 호스팅 필수 정책, 수정 정책 같은 핵심 질문을 명확히 답변합니다.
Technical Implementation
Stack
| Area | Implementation | Notes |
|---|---|---|
| Framework | Next.js 16.1.1 + React 19 | 마케팅 사이트에 적합한 라우팅/렌더링 기반 |
| Language | TypeScript | UI/폼/콘텐츠 계약 안정화 |
| Styling | Tailwind CSS 3 | 빠른 반복과 일관된 디자인 토큰 |
| i18n | next-intl | EN/KR 토글, 메시지 확장성 |
| AWS SES SDK | RFP/문의 폼 메일 전송 기반 | |
| Abuse Prevention | reCAPTCHA Enterprise | 폼 스팸/봇 방어 |
| Optimization | @next/bundle-analyzer | 번들 점검/성능 위생 |
| SVG | SVGR | SVG를 컴포넌트로 관리 |
Engineering Highlights
퍼널 중심 IA(서비스/가격/포트폴리오/RFP)로 전환 최적화
폼 운영을 고려한 보안/스팸 방어( reCAPTCHA ) 적용
가격/정책/FAQ를 분리해 “상담 전 단계”에서 의사결정 지원
What This Project Demonstrates
“서비스 제공자(에이전시)” 관점에서 필요한 정책/가격/프로세스/전환 플로우를 한 번에 정리하는 역량
RFP 중심의 리드 수집(텍스트 가이드 + 파일 업로드) 설계 경험
1인 개발로 1개월 내 런칭 가능한 품질과 운영 가능한 구조(FAQ/정책/메일/봇 방어)
Live: https://www.servith.com
Timeline: 1 month
Role: Solo delivery (IA → UI → i18n → RFP/contact ops → performance hygiene)