두드림


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

(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를 활용하여 웹사이트에 적용될 비주얼 컨셉과 디자인 시안을 제작하였습니다.
다양한 스타일과 표현 방식을 빠르게 탐색해 디자인 방향성을 보다 명확히 정리하고, 전체 프로젝트의 톤앤매너에 적합한
시각적 요소를 효율적으로 도출하였습니다.
Landing Page
텍스트 위주의 의료 정보를 그래프와 수치로 시각화하여 사용자가 내용을 직관적으로 이해할 수 있도록 구성하였으며,
증상에 따른 신체 자세와 동작 표현에는 생성형 AI를 활용해 설명력을 보완하였습니다.
이를 통해 정보의 이해도를 높이는 동시에, 의료 정보에 대한 신뢰를 시각적으로 전달하는 랜딩페이지 경험을 설계하였습니다.
(UI strategy)
정보 우선 구조의 UI 설계
데이터 시각화를 활용한 직관적 표현
설명 보조를 위한 AI 기반 비주얼 적용
의료 정보를 직관적으로 전달하고
신뢰를 형성하는 UI를 목표로 설계하였습니다.
(UI Component)
두드림 정형외과 웹사이트의 UI 컴포넌트는 의료 정보 전달에 최적화된 구조를 기반으로 설계되었습니다.
버튼, 탭, 셀렉트 박스, 퀵버튼 등 핵심 요소를 공통 규칙에 따라 구성해 가독성과 사용성을 높였으며,
다양한 디바이스 환경에서도 일관된 사용자 경험을 제공할 수 있도록 제작하였습니다.
(Typeface)
#A76F58
R 152 G 100 B 78
#DDC8B5
R 221 G 200 B 181
#797355
R 121 G 115 B 85
#7D5A80
R 125 G 90 B 128
(Responsive Design)
PC, 태블릿, 모바일 등 다양한 화면 환경에서도 콘텐츠의 가독성과 사용성이 유지될 수 있도록 레이아웃 구조와
UI 컴포넌트를 반응형 기준으로 설계하였습니다. 디바이스에 따라 정보의 흐름이 끊기지 않도록 화면 구성과 인터랙션을 최적화해
어떤 환경에서도 동일한 사용자 경험을 제공하고자 하였습니다.
들어갈 메시지 영역