SERVITH Therapy 웹사이트
Project Case Study
SERVITH Therapy 웹사이트
상담/심리치료 프랙티스를 위한 신뢰 중심 마케팅 웹사이트. 서비스 포지셔닝, 프로그램, FAQ, 자격/경력, 상담 문의 플로우를 명확하게 구성하고 EN/KR 다국어(i18n)를 지원합니다.
라이브 프로젝트 보기 →개요
SERVITH Therapy는 상담/심리치료 프랙티스를 위한 신뢰 중심 마케팅 웹사이트입니다. 방문자가 높은 정서적 부담을 안고 유입되는 상황을 고려하여, 차분한 시각적 위계와 명확한 정보 구조를 통해 서비스 이해 → 불안 감소 → 상담 문의로 자연스럽게 이어지도록 설계했습니다.
목표
첫 화면에서 전문성과 신뢰를 빠르게 전달
방문자가 자신의 상황을 쉽게 대입할 수 있도록 서비스 카테고리를 명료화
문의 전에 생기는 불확실성을 FAQ로 선제 해소
부담이 낮은 상담 문의(Consultation) 플로우 제공
EN/KR 다국어 확장을 전제로 한 i18n 구조 구축
사용자 맥락과 UX 제약
상담 웹사이트 방문자는 보통 다음을 필요로 합니다.
“여기가 나에게 맞는가?”를 즉시 판단할 수 있는 정보
과한 세일즈가 아닌, 안전하고 안정적인 톤
모바일에서도 빠르게 읽히는 레이아웃과 예측 가능한 동선
운영/정책 관련 핵심 정보(시간, 예약, 비밀보장, 결제/보험)를 쉽게 찾을 수 있는 구조
본 프로젝트는 위 요구를 전제로 UI/콘텐츠 구조를 설계했습니다.
정보 구조(IA)
방문자가 실제로 묻는 질문 순서에 맞춰 내비게이션을 구성했습니다.
Home: 포지셔닝 + Services/Contact로 빠른 이동
About: 상담 접근 방식, 톤, 소개
Services: 이슈(문제/상황) 기반 서비스 카테고리
Programs: 구조화된 제공 방식(선택 가능한 시작점)
FAQ: 운영/정책 질문(세션, 예약, 비밀보장, 결제 등)
Credentials: 교육/훈련/경력 등 신뢰 신호
Contact: 상담 문의 CTA + 인테이크 폼
핵심 설계 결정
1) 빠른 스캔을 위한 서비스 카드
Services는 카드 기반 카테고리로 구성하여, 방문자가 긴 문장을 읽지 않아도 “내 상황에 해당하는지”를 빠르게 판단할 수 있도록 했습니다.
2) 프로그램(Programs)을 ‘구조화된 선택지’로 제공
일반 서비스 소개만으로는 선택이 어려운 방문자를 위해, Programs를 명확한 시작점이 있는 구조화 옵션으로 제시했습니다. “어디서부터 시작해야 할지 모르겠다”는 상태를 줄이는 목적입니다.
3) FAQ를 전환(Conversion) 요소로 취급
FAQ는 부가 페이지가 아니라 문의 전환을 돕는 핵심 콘텐츠로 설계했습니다. 특히 아래 항목은 문의를 막는 대표적인 장애 요인이라 우선순위를 높였습니다.
세션 방식/주기
예약/가능 시간
비밀보장 범위(경계)
결제 및 보험/커버리지 관련 맥락
4) 트리아지(분류)를 돕는 문의 폼
Contact는 상담 문의 중심 CTA로 구성하고, 인테이크 폼은 과도한 입력을 요구하지 않도록 가볍게 유지했습니다. 또한 선택형 “문의 사유(Reason for inquiry)” 항목을 두어 운영 측면에서 분류가 가능하도록 했습니다.
5) EN/KR 다국어 기반
next-intl을 활용해 locale 기반 라우팅 및 메시지 관리 구조를 적용하여, 페이지/콘텐츠가 늘어도 유지보수가 가능하도록 구성했습니다.
기술 구현
사용 기술
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 16 + React 19 | 최신 라우팅/레이아웃 패턴 기반 |
| 언어 | TypeScript | UI/콘텐츠 props 안정성 확보 |
| 스타일 | Tailwind CSS v4 | 빠른 반복과 일관된 디자인 토큰 |
| 다국어 | next-intl | locale-first 구조로 확장 용이 |
| 아이콘 | lucide-react + react-icons | 가벼운 아이콘과 UI 신호 통일 |
| 테스트 | Jest + RTL, Playwright | 컴포넌트 품질 + 사용자 플로우 검증 |
구현 포인트
페이지/섹션 구성을 재사용 가능한 패턴으로 정리해 확장 용이
가독성과 안정감을 우선한 타이포/여백 설계(모바일 우선)
콘텐츠 블록 간 경계를 명확히 해 유지보수 편의성 확보
초기부터 테스트 기반을 깔아 반복 작업 시 회귀 리스크 감소
이 프로젝트가 보여주는 역량
헬스케어/전문 서비스 영역에 적합한 신뢰·명확성·저마찰 UX 설계
실제 사용자 질문 순서를 반영한 정보 구조(IA) 구성
Next.js + TypeScript + Tailwind 기반의 정돈된 구현
다국어(i18n)와 테스트(E2E/Unit)까지 고려한 품질 중심 개발
핵심 목표: 신뢰 형성 + 상담 문의 전환
역할: 1인 개발(IA → UI → i18n → 테스트 구성)