진료과별 의료진을
확인하는 화면
의료진 소개는 진료과 탭과 사진·이름·소개 문구가 함께 있는 카드로 구성되어 있습니다. 탭을 전환하며 해당 진료과의 의료진을 확인하는 인터랙션과 카드 레이아웃을 구현했습니다. PC와 모바일에서 사진과 텍스트가 화면 폭에 맞게 배치되도록 반응형 스타일을 적용했습니다.
린여성병원 홈페이지 퍼블리싱
의료진과 진료 정보를 PC·모바일 화면으로 구현한 반응형 웹 퍼블리싱
- 클라이언트명
- 린여성병원
- 기술
- HTML5, CSS3, JavaScript, jQuery
- 프로젝트 유형
- 병원 홈페이지 · 반응형 웹
- 담당 범위
- 웹 퍼블리싱 · HTML/CSS 화면 구현 · JavaScript 인터랙션
- 프로젝트 개요
-
- 린여성병원은 서울 동대문구에서 분만과 산부인과, 난임, 피부과, 건강검진 진료를 하는 여성병원입니다.
- 웹셀러는 제공된 디자인을 바탕으로 병원 홈페이지의 PC·모바일 화면과 사용자 인터랙션을 구현했습니다.
- 화면 구현 목표
-
- 의료진 소개, 진료센터, 진료시간, 오시는 길, 예약 안내처럼 환자가 자주 찾는 정보를 메인 화면에서 바로 찾을 수 있게 합니다.
- 어떤 기기로 들어와도 글자와 버튼이 화면 폭에 맞게 보이도록 반응형 웹으로 구성합니다.
화면에 적용한 색상과 서체
제공된 디자인의 색상과 타이포그래피를 화면에 반영했습니다. 강조색과 본문색의 역할을 유지하며 제목, 설명과 버튼의 스타일을 구현했습니다.
primary Color
secondary Color
text Color
Title
명조 계열
Body
Noto Sans KR
퍼블리싱 화면
진료 정보를 찾는 흐름을
화면에 담았습니다
병원 홈페이지에는 의료진과 진료센터 소개, 진료시간과 교통편처럼 목적이 다른 정보가 함께 담깁니다. 이번 퍼블리싱에서는 제공된 디자인의 구성과 표현을 살리면서, 정보의 양과 화면 폭이 달라져도 내용을 읽고 다음 화면으로 이동할 수 있도록 구현했습니다.
진료과별 의료진을
많은 진료 정보를 담는
메뉴와 안내 화면
이용 안내와 여러 진료센터의 하위 메뉴를 홈페이지 화면으로 옮겼습니다. 긴 메뉴명과 설명 문구도 읽을 수 있도록 줄바꿈과 간격을 조정하고, 화면 크기에 맞춰 내비게이션과 콘텐츠 배치가 달라지도록 구현했습니다.
방문 전에 확인하는
진료시간과 위치
진료과별 시간표, 전화 예약 안내, 주소와 교통편을 확인할 수 있는 화면을 구현했습니다. 전화 연결 버튼과 이용 안내 링크를 통해 필요한 정보로 이동할 수 있도록 연결하고, 모바일에서도 시간과 위치 정보를 읽기 편하게 배치했습니다.
웹셀러가 맡은 퍼블리싱 작업
이 사례의 담당 범위는 화면 구현입니다. 제공된 디자인을 HTML·CSS로 옮기고, JavaScript와 jQuery로 화면 전환과 탐색에 필요한 동작을 구현했습니다.
-
HTML·CSS 화면 구현
메인, 의료진 소개, 진료센터와 이용 안내 화면의 마크업과 스타일을 구현했습니다. 제목·본문·이미지·버튼의 표현을 화면 구성에 맞췄습니다.
-
PC·모바일 반응형
화면 폭에 따라 메뉴와 콘텐츠의 배치, 카드의 크기, 텍스트 줄바꿈과 간격이 달라지도록 스타일을 적용했습니다.
-
탐색 인터랙션
메뉴 열기와 닫기, 의료진 탭 전환 등 방문자가 정보를 탐색하는 데 필요한 화면 동작과 안내 링크를 구현했습니다.
준비된 디자인을
실제 홈페이지로 구현하고 싶으신가요?
디자인 시안과 필요한 화면, 적용할 기능을 알려주시면
퍼블리싱 범위와 일정을 상담해 드립니다.
지금 웹셀러에 상담하세요.
카카오 1:1 문의