본문바로가기

참포도나무병원 홈페이지 제작 | 병원홈페이지 · 반응형 홈페이지 · SEO 최적화 · UI/UX 개선

참포도나무병원 홈페이지 리뉴얼

KEYWORD #웹사이트 #UI/UX #반응형웹 #CMS개발 #브랜딩 #LOGO디자인 #CI #3D #그래픽디자인

DATE 2025

나눔을 바탕으로 참된 진료, 참된 자유를 지향하는 참포도나무병원 홈페이지 리뉴얼 프로젝트를 진행했습니다. 이번 프로젝트는 참포도나무병원이 쌓아온 브랜드 아이덴티티를 극대화 하면서도 병원의 전문성을 효과적으로 전달하고 사용자 친화적인 경험을 제공하는데 중점을 두었습니다. 특히, 홈페이지 를 제작하면서 병원이 가진 핵심 가치와 철학, 스토리를 보다 신뢰감 있게 전달하기 위해 차분하면서도 세련된 디자인을 적용하고, 핵심 진료 분야를 직관적으로 탐색할 수 있도록 UI/UX를 최적화하였습니다. 의료 콘텐츠는 전문적인 정보를 쉽게 이해할 수 있도록 체계적으로 구성했으며, 환자 중심의 의료 경험을 강조할 수 있도록 콘텐츠 전략을 정교하게 설계했을 뿐 아니라 반응형 홈페이지로 사이트를 구현하여, 다양한 디바이스에서도 최적화된 사용자 경험을 제공했습니다.

또한, 소이정의 MEDI CMS를 적용하여 병원맞춤형 콘텐츠 관리기능 및 SEO 최적화 기능을 제공하여 운영 효율성 개선 및 검색 접근성을 강화하고, 지속적인 콘텐츠 업데이트가 가능하도록 확장성을 고려한 구조를 적용하였습니다.
이번 리뉴얼을 통해 참포도나무병원은 디지털 환경에서의 경쟁력을 한층 강화하고, 보다 직관적인 사용자 경험을 제공할 수 있는 기반을 마련했습니다.

C . H . A . M
환자의 아픔을 치료하는
참포도나무병원
환자
치료
회복
나눔

Project
Overview

참포도나무 병원은 정형외과, 내과, 건강검진센터를 운영하며 특히 척추 및 관절 치료에 강점을 가진 종합 의료 기관입니다.
최첨단 의료 장비와 전문 의료진을 통해 환자들에게 체계적이고 신뢰할 수 있는 의료 서비스를 제공합니다.
소이정은 참포도나무 병원의 신뢰성과 전문성을 강조하면서도 사용자 친화적이고 접근성이 높은 웹사이트를 디자인 및 개발하였습니다.
의료 서비스에 대한 신뢰감을 주면서도 현대적인 디자인 요소를 결합하여 병원의 브랜드 이미지를 강화하는 데 초점을 맞추었습니다.

Responsive Design

반응형 디자인

Interactive UI

직관적인 인터페이스

Visual Hierarchy

시각적 계층 구조

User Experience

사용자 경험 개선

Project Goal

3D 요소 및 인터랙티브 디자인을 활용하여
차별화된 비주얼 아이덴티티 구축

Digital Identity
Interactive
Design
3D Visual

Digital Identity

브랜드의 컬러와 타이포그래피, UI 스타일을 통합 적용하여 병원의 신뢰성과 일관된 아이덴티티를 표현하였습니다.
이를 통해 사용자는 병원의 브랜드 가치를 더욱 명확하게 인식할 수 있으며 신뢰감을 느낄 수 있습니다.

Interactive Design

마우스 호버와 스크롤 애니메이션을 활용하여 부드럽고 자연스러운 인터랙션을 구현하였습니다.
사용자는 병원의 핵심 정보를 직관적으로 탐색할 수 있어 흥미롭고 몰입감 있는 경험을 할 수 있습니다.

3D Visual

참포도나무 병원의 신뢰성과 차별화를 위해 메인 화면에 3D 그래픽을 활용하였습니다.
3D 그래픽을 활용하여 병원의 전문성을 강조하고 차별화된 비주얼 아이덴티티를 구축하였습니다.

Interactive
Design

3D Modeling Deign

병원의 철학과 이미지를
직관적으로 전달할 수 있는 3D 그래픽 제작
C . H . A . M
뇌 3D 이미지
심장 3D 이미지
관절 3D 이미지
척추 3D 이미지

01

뇌·뇌혈관

02

심장

03

관절

04

척추

Scroll

Landing
Page

Trusted Experience

병원의 핵심 서비스와 가치를 직관적으로 전달하며
신뢰감을 주는 랜딩페이지 설계

Sub Page

병원의 다양한 의료 서비스를 명확하게 전달하도록 구성

Project
Design System

UI Concept

병원의 신뢰성과 안정감을 유지하면서도, 블록형 디자인과
곡선 요소를 활용하여 따뜻한 분위기 연출

01

블록형 디자인 적용

콘텐츠를 명확하게 구분하여 정보 전달력을 높이고,
직관적인 UI 구조를 설계하였습니다.

02

곡선을 활용한 부드러운 디자인

딱딱한 느낌을 줄이기 위해 버튼과 카드형 UI 등에 곡선을 적용하여
부드러운 사용자 경험을 제공합니다.

03

정돈된 레이아웃 구성

불필요한 요소를 최소화하고, 체계적인 그리드 시스템을 적용하여
가독성과 사용성을 극대화 하였습니다.

Typeface

병원의 브랜드 정체성을 강조하기 위해 핵심 컬러인
그린 계열을 중심으로 디자인

국문
Pretendard
Regular
Medium
Bold

참포도나무병원

영문
Pretendard
Regular
Medium
Bold

Champdonamu

Chams Pastel Mint

#C5EAE1

Chams Deep Teal

#00816C

Chams Pale Mint

#D6F6EE

Chams Turquoise

#08B89A

2D Icon

직관적인 이해를 돕기 위한
심플한 스타일의 2D 아이콘 제작

C

H

A

M

P

O

D

O

N

A

M

U

Responsive
Design

Mobile Design

모바일 환경에서도 최적의 사용성을 제공하기 위한
반응형 디자인 적용

모바일 최적화된 인터렉션

병원 센터 및 미디어룸을 카드형 UI로 구성하여 가독성을 높이고,
스크롤 및 터치에 최적화된 디자인 설계