시력교정부터 노안·백내장까지 안내하는 안과 병원 웹사이트
Design Concept
선명한 시야를 위한 신뢰
눈 수술을 앞둔 환자가 가장 먼저 느끼는 두려움과 궁금증을 줄이는 것을 디자인의 출발점으로 삼았습니다.
신뢰감을 주는 블루 계열을 중심에 두고, 상담과 예약처럼 행동이 필요한 부분에만 오렌지 포인트를 사용해 눈에 띄도록 했으며, 진료 분야를 시력교정, 노안백내장, 눈종합검진 세 갈래로 나눠 첫 화면부터 길을 찾기 쉽게 했습니다.
수술 상세 페이지는 장비 특징, 수술 방식 비교, 수술 과정의 순서로 풀어 설명해 전문적인 내용도 차근차근 이해할 수 있도록 설계했습니다.
Design Elements
-
01
세 갈래 진료 분야 안내
시력교정수술, 노안백내장수술, 눈종합검진을 메인 슬라이드와 탭으로 나눴습니다.
방문 목적에 맞는 진료를 첫 화면에서 바로 고를 수 있습니다. -
02
블루 중심의 신뢰 컬러
드림 블루와 딥 블루를 바탕으로 하고 상담·예약에는 오렌지를 포인트로 썼습니다.
의료 사이트의 깔끔함과 행동 유도를 함께 확보했습니다. -
03
수술 비교형 상세 페이지
라식, 라섹, 스마일의 차이와 장단점을 표와 설명으로 나란히 정리했습니다.
수술 장비의 특징과 과정까지 한 페이지에서 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FA6F12
- Dream Blue#094FA3
- Deep Blue#004589
- Sky Blue#00A6F2
- Signal Orange#FA6F12
- Light Blue Gray#E8F0F9
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gmarket Sans
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
수술별 세부 페이지를 같은 규칙으로 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 대메뉴와 좌측 소메뉴를 같은 틀로 쓰고, 현재 위치를 경로로 표시했습니다.
각 수술 페이지는 특징, 방식 비교, 과정 순서로 같은 흐름을 따릅니다.
- Grid
- 본문은 최대 1,200px 폭 안에서 섹션별 카드와 표로 정리했습니다.
- Header
- 드림소개, 시력교정수술, 노안백내장수술, 눈종합검진, 고객센터, 증명서의 대메뉴를 펼침 메뉴로 제공했습니다.
- CTA
- 온라인 상담, 온라인 예약, 카카오톡 상담으로 이어지는 버튼을 곳곳에 두었습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC여섯 개 대메뉴와 하위 메뉴를 펼쳐 한 번에 탐색
MO햄버거 메뉴 안에서 단계별로 펼쳐 이동
-
Layout
PC1,200px 기준 섹션형 구성과 슬라이드
MO좌우 여백을 두고 1열로 재배치
-
Typography
PCPretendard 본문과 Gmarket Sans 강조 제목
MO제목·본문 크기를 줄이고 줄바꿈 최적화
-
Image
PC수술 장비·과정 이미지를 크게 배치
MO이미지 비율 유지, 한 화면 한 메시지로 정리
