프로젝트 사례

Stillwell Therapy 웹사이트

Stillwell 상담/심리치료 프랙티스를 위한 EN/KR 다국어 웹사이트. 처음 상담을 알아보는 방문자의 질문에 차분하게 답하고, 부담 없는 이메일 문의로 이어지도록 설계했습니다. Cloudflare Workers에서 완전 정적 사이트로 운영됩니다.

라이브 프로젝트 보기 →
카테고리
헬스케어 마케팅 웹사이트
플랫폼
Next.js
클라이언트
Stillwell Counselling & Psychotherapy
유형
마케팅 웹사이트
역할
1인 개발: 정보구조(IA), 브랜드 로고, UI 구현, 다국어 콘텐츠 구조, 테스트, Cloudflare 배포
목표
처음 방문한 사람의 신뢰를 빠르게 얻고, 연락하는 일을 부담 없게 만드는 것
범위
Home, About, Services, Programs, FAQ, Credentials, Contact + EN/KR 전환 + 예약 가능 여부 배너 + 이메일 문의 폼

개요

Stillwell은 토론토에서 개인과 가족을 대상으로 상담을 하고, AMP, EMDR, Prepare/Enrich, 임상 슈퍼비전 프로그램을 운영하는 상담/심리치료 프랙티스입니다. 방문자가 높은 정서적 부담을 안고 들어온다는 점을 전제로, 화면은 차분하고 단정하게 유지하고 현실적인 질문에 먼저 답한 뒤, 방문자에게 최소한만 요구하는 상담 문의로 자연스럽게 이어지도록 설계했습니다.

목표

*

첫 화면에서 누구를, 어떻게 돕는 곳인지 전달

*

서비스 카테고리를 명확히 해 방문자가 자신의 상황을 쉽게 대입하도록

*

연락을 망설이게 하는 질문을 문의 전에 FAQ로 해소

*

문의 단계는 가볍고 사적으로

*

한 사이트에서 영어·한국어 사용자를 똑같이 지원

사용자 맥락과 UX 제약

상담 웹사이트 방문자는 보통 다음을 필요로 합니다.

*

"여기가 나에게 맞는가?", "어떻게 진행되는가?"를 즉시 판단할 수 있는 정보

*

과한 세일즈가 아닌, 안전하고 안정적인 톤

*

휴대폰에서도 편하게 읽히는 화면과 예측 가능한 동선

*

예약 가능 여부, 비밀보장, 비용/보험 같은 핵심 정보를 먼저

모든 레이아웃과 콘텐츠 결정은 이 제약을 기준으로 했습니다.

정보 구조(IA)

방문자가 실제로 묻는 질문 순서에 맞춰 내비게이션을 구성했습니다.

1.

Home: 차분한 히어로("We greet your heart gently."), 전문 분야 요약, Services/Contact로 빠른 이동

2.

About: 상담사 소개, 상담 접근 방식, 중점 분야, 소속 전문 단체

3.

Services: 개인·가족 상담을 이슈별 카드로 정리

4.

Programs: AMP, EMDR, Prepare/Enrich, 임상 슈퍼비전을 각각 구조화된 시작점으로 제시

5.

FAQ: 세션, 예약, 비밀보장, 비용

6.

Credentials: 학력, 훈련, 커뮤니티 활동

7.

Contact: "문의 사유" 항목이 있는 상담 문의 폼 + 전화·이메일·주소

핵심 설계 결정

1) 예약 가능 여부를 가장 먼저 안내

신규 내담자를 받지 않는 기간에는 모든 페이지 상단 배너로 이를 알리고, 한국어 상담사 목록으로 연결합니다. 방문자가 문의서를 다 쓰고 나서야 거절당하는 일 없이, 바로 다음 선택지를 얻을 수 있습니다.

2) 빠른 스캔을 위한 서비스 카드

Services는 쉬운 말로 쓴 짧은 카드로 구성해, 긴 문장을 읽지 않아도 "내 상황에 해당하는지" 판단할 수 있게 했습니다. 모바일에서 특히 중요합니다.

3) FAQ를 문의 경로의 일부로

FAQ는 부가 페이지가 아니라 문의로 가는 한 단계로 설계했습니다. 사람들이 가장 많이 망설이는 세션 방식, 예약, 비밀보장의 범위, 비용/보험을 다룹니다.

4) 사적이고 부담 없는 문의

문의 폼은 이름, 이메일, 메시지를 받고, "문의 사유"는 개인·가족·각 프로그램 중에서 한 번에 고를 수 있습니다. 전화와 제목은 선택입니다. 제출하면 방문자의 이메일 앱이 내용이 채워진 상태로 열리므로, 문의가 방문자에게서 상담사에게 바로 전달되고 제3자 서버에는 아무것도 저장되지 않습니다.

5) 브랜드에 맞춘 로고

물가에 마주 놓인 두 의자 위로 나무가 선 Stillwell 로고는 코드로 그려서, 하나의 원본에서 SVG와 아이콘 파일을 생성합니다. 어떤 크기에서도 선명하고 파비콘·헤더·SNS 미리보기에서 일관되게 보입니다.

6) 처음부터 다국어

next-intl로 영어와 한국어를 각각의 URL로 제공하고, 모든 문구는 메시지 파일로 관리해 레이아웃을 건드리지 않고 두 언어 모두 확장할 수 있습니다.

운영 측면에서 달라진 점

*

빠르고 편안한 읽기 경험: 미리 만들어 둔 페이지를 Cloudflare 네트워크에서 제공해 빠르게 열리고, 글자 크기와 여백을 조정해 편하게 읽힙니다.

*

모바일에서도 편리한 이용: 화면 크기에 맞춰 레이아웃이 조정되어 휴대폰에서도 서비스 확인과 문의까지 쉽게 이어집니다.

*

한국어·영어를 한 사이트에서: 한 번의 탭으로 언어를 전환할 수 있고, 페이지가 늘어나도 번역 콘텐츠를 계속 추가할 수 있습니다.

*

관리할 서버가 없음: 서버나 데이터베이스가 없는 완전 정적 사이트라 호스팅 비용이 최소화되고, 고장 나거나 공격받을 부분도 거의 없습니다.

*

안전한 업데이트: 자동화된 테스트가 화면 구성 요소와 주요 방문 흐름을 점검해 수정 과정에서 문제가 생길 위험을 줄입니다.

이 프로젝트가 보여주는 역량

*

민감한 전문 서비스 영역에 맞는 신뢰·명확성·저마찰 UX 설계

*

실제 방문자 질문 순서를 반영한 정보 구조(IA)

*

처음부터 다국어를 고려한 Next.js + TypeScript + Tailwind 구현

*

Cloudflare Workers 정적 사이트로 가볍고 관리 부담 적은 운영

*

유닛·E2E 테스트까지 갖춘 품질 중심 개발


Live: https://stillwell.servith.workers.dev/

핵심 목표: 신뢰 형성 + 상담 문의 전환

역할: 1인 개발(IA → 브랜드 → UI → i18n → 테스트 → 배포)

고객 포털무료 견적 받기