본문바로가기

두드림정형외과 병원 홈페이지 제작 : 편리한 병원 예약 & UI/UX 개선으로 환자 만족도 향상

두드림정형외과 홈페이지 제작

KEYWORD #두드림정형외과 #AI이미지생성 #병원홈페이지 #병원CMS #병원웹디자인 #병원웹리뉴얼 #병원웹사이트 #반응형웹

두드림 정형외과 웹사이트 리뉴얼 프로젝트는 병원이 추구하는 진료 철학과 의료 전문성이 환자에게 보다 명확하게 전달될 수 있도록 정보 구조와 시각적 표현을 중심으로 설계되었습니다. 복잡하고 어렵게 느껴질 수 있는 정형외과 의료 정보를 그래프, 수치, 시각적 요소를 활용해 직관적으로 이해할 수 있도록 구성하고, 환자가 자신의 증상과 진료 과정을 단계적으로 파악할 수 있는 콘텐츠 흐름을 구축하였습니다. 또한 차분하고 안정적인 톤앤매너를 적용해 의료 서비스에 대한 신뢰를 자연스럽게 형성하도록 디자인하였습니다. 전반적인 UI/UX는 환자의 정보 탐색 부담을 줄이는 데 초점을 맞추어
진료 안내, 클리닉 소개, 상담 유도까지 이어지는 흐름을 명확하게 정리하였으며, 반응형 웹 환경을 기반으로 다양한 디바이스에서도 일관된 의료 정보 경험을 제공하도록 구현하였습니다. 이번 리뉴얼을 통해 두드림 정형외과는 디지털 환경에서도 병원의 전문성과 신뢰를 효과적으로 전달할 수 있는 의료 웹사이트를 구축하였습니다.

Doodoorim
두(DO)드림
마음에 한걸음 더 다가가고
다(DA)드림
온 마음을 담아 진료하는
환자를 최우선에 두는
진심의 진료 솔루션
DODA 프로그램은 두드림의 수년간 축적된 노하우를 바탕으로
어깨의 원인 치료와 개인별 맞춤 접근을 실현한 고유 치료 솔루션입니다.
  • D
    DOWN THE PAIN
    염증 치료
  • O
    OPEN THE JOINT
    가동성 확보
  • D
    DEVELOP THE MUSCLE
    근력 강화
  • A
    ACTIVATE YOUR LIFE
    치료 졸업

(Project Overview)

환자의 통증을 이해하고,
신뢰로 이어지는 의료 경험을 설계하다

소이정은 두드림 정형외과의 진료 철학과 전문성이 환자에게 보다 명확하고 신뢰감 있게 전달될 수 있도록
웹사이트 전반의 정보 구조와 사용자 경험을 중심으로 리뉴얼 디자인을 진행하였습니다.
복잡한 의료 정보는 이해하기 쉬운 구조로 재정비하고, 의료진의 전문성과 병원의 신뢰도를 효과적으로 표현하기 위해
시각적 톤앤매너와 콘텐츠 구성을 정리해 웹사이트 디자인을 새롭게 구축하였습니다.

Generative AI

생성형 AI 활용

Information Architecture

정보 구조 개선

Responsive Design

반응형 디자인

(Project Goal)

두드림 정형외과의
진료 철학과
의료 정보를 명확하게 전달하는 웹사이트 구축

두드림

정보 전달력 중심의
레이아웃
신뢰를 전달하는
콘텐츠 구성
진료 흐름을
이해하기 쉬운 구성

다드림

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

Doodoorim Orthopedic Clinic

두드림정형외과 노트북 목업

(Generative AI Design)

생성형 AI를 활용해
웹사이트에 적용될 비주얼 디자인 제작

디자인 초기 단계에서 생성형 AI를 활용하여 웹사이트에 적용될 비주얼 컨셉과 디자인 시안을 제작하였습니다.
다양한 스타일과 표현 방식을 빠르게 탐색해 디자인 방향성을 보다 명확히 정리하고, 전체 프로젝트의 톤앤매너에 적합한
시각적 요소를 효율적으로 도출하였습니다.

두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지
두드림정형외과 ai 이미지

Landing Page

데이터 시각화를 중심으로 설계한
의료 랜딩페이지 디자인

텍스트 위주의 의료 정보를 그래프와 수치로 시각화하여 사용자가 내용을 직관적으로 이해할 수 있도록 구성하였으며,
증상에 따른 신체 자세와 동작 표현에는 생성형 AI를 활용해 설명력을 보완하였습니다.
이를 통해 정보의 이해도를 높이는 동시에, 의료 정보에 대한 신뢰를 시각적으로 전달하는 랜딩페이지 경험을 설계하였습니다.

두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
Scroll
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI
두드림정형외과 Landing Page UI

(UI strategy)

1

정보 우선 구조의 UI 설계

2

데이터 시각화를 활용한 직관적 표현

3

설명 보조를 위한 AI 기반 비주얼 적용

의료 정보를 직관적으로 전달하고
신뢰를 형성하는 UI를 목표로 설계하였습니다.

(UI Component)

컴포넌트를 활용하여
의료 정보 전달에
최적화된
구조를 기반으로 설계

두드림 정형외과 웹사이트의 UI 컴포넌트는 의료 정보 전달에 최적화된 구조를 기반으로 설계되었습니다.
버튼, 탭, 셀렉트 박스, 퀵버튼 등 핵심 요소를 공통 규칙에 따라 구성해 가독성과 사용성을 높였으며,
다양한 디바이스 환경에서도 일관된 사용자 경험을 제공할 수 있도록 제작하였습니다.

Quick Component
Button Component
Tab Button Component

(Typeface)

가독성과 안정감을 동시에
고려한
웹 환경에 최적화된 타이포그래피 적용

EN
Pretendard
KR
Pretendard
COLOR

#A76F58

R 152 G 100 B 78

COLOR

#DDC8B5

R 221 G 200 B 181

COLOR

#797355

R 121 G 115 B 85

COLOR

#7D5A80

R 125 G 90 B 128

(Responsive Design)

일관된 의료 정보 경험을 제공하는
다양한 환경을 고려한 반응형 설계

PC, 태블릿, 모바일 등 다양한 화면 환경에서도 콘텐츠의 가독성과 사용성이 유지될 수 있도록 레이아웃 구조와
UI 컴포넌트를 반응형 기준으로 설계하였습니다. 디바이스에 따라 정보의 흐름이 끊기지 않도록 화면 구성과 인터랙션을 최적화해
어떤 환경에서도 동일한 사용자 경험을 제공하고자 하였습니다.

두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 모바일 UI
두드림정형외과 로고