연세하나

정신과를 처음 찾는 사람은 정보보다 불안이 앞선다 — 이 프로젝트는 그 지점에서 출발했습니다. 무음 루프 영상 히어로와 스크롤 스토리텔링으로 정보 게시판이 아닌 '여기라면 괜찮겠다'는 정서적 신뢰를 먼저 만들고, 어느 화면에서든 전화·네이버·카카오 예약으로 즉시 이어지는 전환 동선을 깔았습니다.

모션은 과하지 않게 — 안개처럼 선명해지는 텍스트, 잔잔한 등장 효과, 수채화 잎 장식만 사용했습니다. 클라이언트 요구였던 모바일 뷰 기준 설계에 맞춰 100dvh 풀스크린 히어로, iOS 노치 safe-area, 상태바 색상 일치까지 디테일을 챙겼습니다.

우울·불안·공황·수면·ADHD 등 자가 점검 10종은 '척도 데이터 + 채점 엔진 + 공통 UI' 구조로 만들어, 파일 하나만 추가하면 검사가 늘어납니다. 의료광고법에 맞춰 '진단' 표현을 코드 레벨에서 배제하고, 유료 척도 영역은 DSM-5 기준 자체 문항으로 대체했으며, 모든 결과 화면에 면책 문구를 상시 노출합니다.

민감정보는 제로 설계 — 답변·점수·결과는 서버로 보내지 않고 브라우저에서만 계산하며, 결과 이미지도 로컬에서 생성합니다. 분석 역시 익명 방문 데이터만 수집하고 검사 결과는 수집 자체를 하지 않습니다.

사이트 문구·진료일정·안내 팝업·의료진 정보를 4개의 Notion DB로 관리해, 병원이 개발자 없이 직접 수정하면 최대 1분 안에 사이트 전 표면에 반영됩니다. 토큰 미설정이나 API 장애 시에는 코드에 내장된 기본값으로 후퇴하는 폴백 우선 설계로, CMS가 죽어도 사이트는 깨지지 않습니다.

GA4 대신 자체 구축한 익명 분석 모듈은 매일 자정 이후 전환율·이탈률·스크롤 깊이·자가진단 퍼널 등 24개 지표를 집계해 병원 Notion으로 자동 리포트합니다. 운영 가이드 문서까지 인수인계해, 클라이언트가 스스로 운영하는 체계를 완성했습니다.

Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 기반 정적 44페이지 — 기획에서 정식 오픈까지 1인 수행으로 완성해 현재 무중단 운영 중입니다. 지역 검색 랜딩과 JSON-LD 구조화 데이터, AI 검색(AEO) 대응 llms.txt, 전역 보안 헤더와 접근성 처리까지 실서비스 기준의 품질로 마감했습니다.

정신건강의학과 홈페이지라는 민감한 도메인의 병원 홈페이지 제작 사례로서, 이 프로젝트는 Studio Sion이 일하는 방식 그 자체입니다 — 도메인의 맥락을 먼저 읽고, 법과 원칙을 코드로 강제하고, 배포 이후의 운영까지 설계하는 것.