- CLIENT
- 생기한의원 (Saengki Korean Medicine Clinic)
- INDUSTRY
- 한방 의료 · 난치성 피부질환 · 전국 21개 지점
- PROJECT
- 의료 브랜드 홈페이지 구축 / 리뉴얼
- PERIOD
- 2023. 06 ~ 2024. 04
프릭스 수행범위
IA 설계, 상담·예약 동선, 메인/서브 GUI, 웹표준 마크업부터 반응형 대응까지 단일 팀이 수행했습니다.
BACKGROUND
리뉴얼이 필요했던 세 가지 이유
-
01
21년의 임상이 브랜드로 읽히지 않았다
생기한의원은 21년간 아토피·건선·사마귀 등 난치성 피부질환을 치료하며 피부과학연구소와 자체 한약 시스템을 갖춰 왔습니다. 그러나 이 축적이 일반 한의원과 같은 화면 문법 안에 묻혀, 전문 의료 브랜드로서의 차별점이 전달되지 않았습니다.
-
02
환자는 병명이 아니라 고민으로 찾아왔다
방문자 대부분은 '가렵다, 진물이 난다, 스테로이드를 끊고 싶다'는 고민을 안고 들어옵니다. 40개가 넘는 질환 정보와 치료사례, 상담 창구가 따로 흩어져 있어, 자신의 문제에 맞는 답을 찾고 상담까지 이어지는 길이 길었습니다.
-
03
21개 지점이 하나의 경험을 주지 못했다
강남역부터 부산센텀까지 전국 21개 지점이 운영되지만, 지점별 정보와 예약·Q&A 창구가 일관되게 연결되지 않았습니다. 모바일에서 가까운 지점을 찾고 바로 상담을 남기는 흐름이 끊겨 있었습니다.
다섯 집단, 다섯 개의 목적지
| 방문자 유형 | 방문 목적 | 도달해야 할 영역 |
|---|---|---|
| 피부질환 환자 | 내 증상이 어떤 질환이고 어떻게 치료하는가 | 피부질환·질환별 정보·스테로이드부작용 |
| 치료를 고민하는 보호자 | 실제로 좋아졌는지 믿을 수 있는가 | 치료사례·전후사진·고객후기 |
| 상담 희망 환자 | 비용과 기간을 먼저 묻고 싶다 | 상담문의·의료진상담·비급여항목 |
| 내원 예정 환자 | 가까운 지점과 예약 방법은 | 지점안내·21개 지점·간편예약 |
| 언론·일반 | 브랜드의 신뢰와 근거 | 생기한의원·언론보도·피부과학연구소 |
SOLUTION
정보구조를 다시 세운 세 가지 원칙
-
01
병명이 아니라 고민에서 출발한다
40여 개 질환을 '난치성피부질환 / 스테로이드부작용 / 질환별 정보'로 묶고, 메인에 추천검색 태그(#아토피 #건선 #사마귀)를 두었습니다. 병명을 몰라도 증상과 고민으로 원하는 정보에 닿습니다.
-
02
근거를 먼저 보여주고 상담으로 잇는다
질환 정보 → 치료 프로그램(SBT) → 치료사례 → 상담문의로 이어지는 '피부건강설계' 흐름을 만들었습니다. 정보를 읽던 자리에서 전후사진과 상담 창구가 바로 이어집니다.
-
03
21개 지점을 하나의 관문으로 모은다
전국 지점을 공통 템플릿(/branchsearch/{지점}/)으로 구성하고, 우측 퀵메뉴(문의·예약·전화·치료사례·지점안내)를 전 페이지에 상설 배치했습니다. 어느 화면에서든 한 번에 상담으로 이동합니다.
정보구조 (Information Architecture)
- 생기한의원브랜드소개생기스토리 · 피부과학연구소 · 생기홈케어 · 생기 언론보도 · 생기소식 · 생기칼럼지점소개21개 지점 소개
- 피부질환난치성피부질환 외 37
- 피부건강설계생기치료왜 생기한의원일까 · 생기 치료프로그램 · 생기 한약시스템 · 피부 면역 테스트치료사례전후사진 · 고객후기상담문의의료진 상담 · 진료 예약 · 비급여 항목 · 생기 지식iN · 지점 Q&A
퀵메뉴(문의 · 예약 · 전화 · 치료사례 · 지점안내 · 간편예약), 빠른상담 1577-6375, 통합검색, 로그인 / 마이페이지, SNS(인스타그램 · 유튜브 · 네이버) — 전 페이지 상설 노출
FEATURES
무엇을 개발했는가
보이는 기능
01
브랜드 스토리 메인 비주얼
'난치성 피부질환을 진심으로 치료해온 시간 21년'이라는 메시지를 첫 화면에 배치했습니다. 치료 설명보다 시간과 임상의 축적이 먼저 읽히도록 설계했습니다.
02
질환별 치료후기 탭
아토피·건선·지루성피부염·사마귀 등 질환 탭을 누르면 해당 전후사진과 영상후기가 바뀝니다. 같은 고민을 가진 환자의 사례를 한 번에 찾습니다.
03
SBT 프로그램 아이콘 체계
약침·약뜸·한약·광선치료·홈케어라인 등 11가지 치료 요소를 아이콘으로 정리해, 복합적인 한방 치료 과정을 한눈에 이해하도록 했습니다.
04
빠른상담 · 우측 퀵메뉴
지점 선택과 동의 체크만으로 상담을 남기는 빠른상담 폼과, 문의·예약·전화·지점안내 퀵메뉴를 전 페이지에 고정 노출합니다.
보이지 않는 기능
01
질환 콘텐츠 CMS
40여 개 질환 페이지를 공통 템플릿으로 운영하고, 칼럼·뉴스·언론보도를 담당자가 직접 등록·갱신합니다.
02
상담 · 예약 관리
의료진상담, 지점 Q&A, 간편예약 신청을 지점 단위로 접수해 문의가 해당 지점으로 바로 전달되도록 구성했습니다.
03
지점 템플릿 시스템
21개 지점 페이지를 동일 구조(/branchsearch/{지점}/01)로 생성해, 신규 지점 개설 시 빠르게 확장합니다.
04
SNS · 채널 연동
생기TV 영상후기, 유튜브, 인스타그램, 네이버 블로그·카페를 연결해 콘텐츠 채널을 하나의 허브로 묶었습니다.
05
회원 · 전환 추적
로그인/마이페이지와 GTM·픽셀 기반 전환 추적을 적용해 상담 유입 성과를 측정합니다.
06
의료법 · 웹표준
비급여항목 공개, 개인정보 동의 절차 등 의료기관 고지 요건 반영.
DESIGN
치료보다 먼저,
신뢰를 보여준다
피부질환 환자는 결정 전에 오래 고민합니다.
한방의 따뜻함은 지키되, 임상 근거와 실제 사례가 화면의 중심이 되도록 시각 언어를 정리했습니다.
근거가 주인공인 화면
연구소·컨퍼런스 사진과 전후사진, 영상후기를 전면에 배치했습니다. 광고 문구보다 실제 기록이 먼저 보이게 하는 것이 목표였습니다.
대형 숫자 타이포
'21년', '11가지 핵심 노하우'처럼 핵심 수치를 대형 타이포로 강조해, 스크롤 중에도 브랜드의 축적이 즉시 읽히게 했습니다.
차분한 화이트 · 네이비 톤
흰 배경과 네이비 계열 텍스트로 의료기관의 신뢰감을 만들고, 강조색은 상담·예약 버튼에만 집중시켰습니다.
질환 아이콘 · 태그 체계
SBT 치료 요소와 질환 탭을 아이콘·해시태그로 통일해, 어려운 한방 용어도 가볍게 탐색할 수 있게 했습니다.
섹션별 단일 메시지
스토리 → 솔루션 → 프로그램 → 연구소 → 후기 → 지점 순으로 한 섹션에 하나의 메시지만 남겨, 긴 메인도 이야기처럼 읽힙니다.
반응형 재배치
데스크톱의 질환 그리드와 후기 슬라이드는 모바일에서 스와이프형으로 전환되고, 퀵메뉴는 하단 고정 버튼으로 바뀝니다.
주요 화면
RESULT
무엇이 달라졌는가
| 구분 | BEFORE | AFTER | 의미 |
|---|---|---|---|
| 구조 | 병원 소개 중심 나열 | 고민·질환 중심 3축 | 환자가 자신의 증상에서 출발해 치료 정보에 닿습니다. |
| 동선 | 정보와 상담 창구 분리 | 근거 → 상담 연결 흐름 | 질환·사례 페이지에서 상담·예약으로 바로 이어집니다. |
| 지점 | 지점별 개별 안내 | 21개 지점 공통 템플릿 | 어느 지역에서나 같은 방식으로 지점을 찾고 예약합니다. |
| 운영 | 요청 기반 콘텐츠 갱신 | CMS 기반 직접 운영 | 칼럼·후기·언론보도를 담당자가 직접 갱신합니다. |
