해외 환자를 위한 안과 진료 안내 영문 웹사이트
Design Concept
낯선 곳에서도 편안한 안과
한국을 찾는 해외 환자가 낯선 환경에서도 진료 정보를 쉽게 찾고 신뢰할 수 있도록 하는 것을 디자인의 출발점으로 삼았습니다.
네이비와 블루를 중심으로 청결하고 차분한 병원의 인상을 만들고, 오렌지 포인트로 상담과 예약 버튼이 눈에 띄도록 했습니다. 영상 배경의 첫 화면과 큰 사진으로 병원의 분위기를 먼저 전달합니다.
진료는 시력교정, 노안·백내장, 종합검진의 세 분야로 나누고 각 분야 아래 세부 진료를 정리해, 환자가 자신의 증상에 맞는 페이지를 빠르게 찾고 온라인 상담과 예약까지 이어지도록 설계했습니다.
Design Elements
-
01
세 개 진료 분야로 나눈 구조
시력교정, 노안·백내장, 종합검진을 탭으로 나눠 메인에서 바로 이동할 수 있게 했습니다.
환자가 증상별로 필요한 진료를 빠르게 찾습니다. -
02
진료 서비스 카드 슬라이드
ATO SMILE, ICL, 드라이아이 등 세부 진료를 카드로 만들어 슬라이드로 보여줍니다.
각 카드에서 해당 진료 페이지로 바로 연결됩니다. -
03
의료진 소개와 환자 후기
의료진 이름과 약력을 별도 페이지로 정리하고, 메인에는 환자 후기와 영상 후기를 함께 배치했습니다.
처음 방문하는 환자가 신뢰할 근거를 쉽게 확인합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#FA6F12
- Deep Navy#062651
- Clinic Blue#094FA3
- Sky Blue#00A6F2
- Aqua Mint#01CAC4
- Charcoal#222222
- Gray#7F7F7F
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
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
- 사진과 설명을 좌우 또는 상하로 배치하는 반복 레이아웃으로 정보를 정리했습니다.
- Header
- 대분류 5개와 하위 진료 메뉴를 펼쳐지는 서브 메뉴로 제공하고 로그인·언어 선택을 함께 두었습니다.
- CTA
- 온라인 상담, 온라인 예약, Zoom 상담 버튼을 메인과 퀵메뉴에 반복 배치했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC대분류와 하위 진료를 펼치는 상단 메뉴
MO우측 슬라이드 사이드 메뉴로 전환
-
Layout
PC영상 배경 배너와 탭, 카드 슬라이드 배치
MO세로 한 줄로 정리해 카드 슬라이드 유지
-
Typography
PC영문 제목 중심의 큰 타이틀 서체
MO제목·본문 크기를 줄여 긴 영문도 읽기 쉽게
-
Image
PC넓은 영상과 병원 사진 활용
MO모바일에서도 영상 배너와 사진 비율 유지
