SERVITH Portal
Project Case Study
SERVITH Portal
고객 전용 웹 서비스 운영 포털. 고객이 제작/수정/기능 요청을 제출하고, 포털에서 견적을 확인한 뒤 이메일 인보이스(이체 결제)로 진행하는 흐름을 표준화했다. 1개월 내 1인 개발로 구축.
라이브 프로젝트 보기 →Overview
SERVITH Portal은 고객 전용 운영 포털로, 웹사이트 운영 과정에서 반복되는 커뮤니케이션(요청 접수, 범위 확인, 견적, 결제 안내)을 구조화해 “빠르고 신뢰 가능한 운영”을 제공하는 것을 목표로 합니다. 포털 랜딩에서는 기능 범위를 inquiries, quotes, project management로 명확히 안내합니다.
본 프로젝트는 개발 기간 1개월, 1인 개발로 구축했습니다.
Problem
소규모 웹 에이전시 운영에서 가장 비용이 큰 구간은 “개발”보다도 다음과 같은 운영 업무입니다.
요청(수정/기능 추가)이 이메일/메신저로 분산되어 누락 위험 증가
범위/우선순위/결제 조건이 매번 재설명되어 커뮤니케이션 비용 증가
견적이 구두/채팅 기반으로 남아 추적이 어려움
결제/인보이스 흐름이 일관되지 않아 진행 속도가 느려짐
Portal은 이를 표준 플로우로 묶어 운영 비용을 낮추는 방향으로 설계했습니다.
Objectives
고객이 “요청을 제출할 수 있는 단일 창구” 제공
포털에서 러프 견적을 확인하고, 이메일 인보이스로 결제를 진행하는 흐름 정착
결제/환불/저작권/개인정보 정책을 문서로 명확히 고지
인증/계정 관리(로그인/가입/비밀번호 재설정) 기본 동선을 안정적으로 제공
Information Architecture
Portal의 구조는 “진입 → 인증 → 운영 규칙 확인 → 요청/견적/결제” 흐름을 기준으로 구성했습니다.
Landing: 포털 목적과 기능 요약 + 로그인/가입
Auth
Login: 보안 안내 포함
Sign Up: 약관 동의 포함
Password Reset: 이메일 기반 재설정 링크 발송
Terms & Privacy: 운영 정책 및 개인정보 처리방침
Core Operations (제품 소개 기준)
Inquiries / Quotes / Project management
Core Business Flow (운영 규칙 기반)
Portal의 운영 플로우는 약관에 명시된 규칙을 기준으로 설계했습니다.
1) 요청 접수와 견적/인보이스 분리
사용자는 Portal을 통해 웹사이트 제작/수정/기능 개선 요청을 제출할 수 있고, 요청별로 Portal에서 러프 견적을 확인합니다. 최종 결제에 필요한 정식 인보이스는 이메일로 발행되며, 서비스 상세/비용/결제 안내가 포함됩니다.
2) 결제 구조 명확화 (e-Transfer)
전체 웹사이트 프로젝트: 30% 디파짓(환불 불가)로 프로젝트 확정, 완료 시 잔금 결제 후 퍼블리시
소규모 수정/기능 추가: 작업 전 전액 선결제, 착수 전 취소는 환불 가능(착수 후 환불 불가)
결제 방식: 이메일 인보이스에 e-Transfer 안내 포함
3) 운영 리스크를 줄이는 정책 문서화
Portal 내 약관에는 다음이 명확히 포함됩니다.
콘텐츠 적법성 책임은 사용자에게 있음
디자인/소스코드 소유 및 호스팅 조건(서비스 운영 조건)
서비스 변경/종료, 책임 제한, 약관 업데이트 정책
또한 개인정보는 이메일 주소만 수집하며, 목적/보관/보호 조치와 사용자 권리가 명시되어 있습니다.
Technical Implementation
Stack
| Area | Implementation | Notes |
|---|---|---|
| Framework | Next.js 15.2.4 + React 19 | 앱 라우팅 기반 UI 구성 |
| Auth / Session | Supabase (SSR) | 서버/클라이언트 경계에서 세션 처리 |
| State | Redux Toolkit | 요청/상태 흐름을 예측 가능하게 관리 |
| Forms | React Hook Form | 입력 검증 및 폼 UX 안정화 |
| Nodemailer | 알림/인보이스/리셋 메일 등 서버 발송 기반 | |
| Security | jsonwebtoken | 토큰 기반 처리(운영용 기능에 활용 가능) |
| Upload UX | browser-image-compression | 첨부 파일의 클라이언트 압축/최적화 |
| Utilities | linkify-react, react-qr-code | 링크 처리/QR 기반 정보 제공 확장 가능 |
Implementation Highlights
인증(로그인/가입/리셋) 기본 동선을 먼저 안정화해 운영 리스크를 줄임
약관/개인정보 페이지를 제품의 “기능”으로 취급해 운영 규칙을 문서로 고정
Portal에서 러프 견적, 이메일로 정식 인보이스 발행이라는 역할 분리로 운영 일관성 확보
What This Case Study Shows
소규모 웹 운영에서 반복되는 “요청/견적/결제” 커뮤니케이션을 제품화하는 접근
정책(결제/환불/저작권/개인정보)을 UX의 일부로 통합해 분쟁/혼선을 줄이는 설계
Next.js + Supabase SSR 기반으로 인증/세션을 갖춘 실사용 포털을 빠르게 런칭하는 실행력
Live: https://portal.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → Auth → Ops flow → Policy)