PENNY PAGE
CASE 42MediCare

처음 온 사람도 바로 아는
원격진료를 가장 가까이

컨셉 작업 — 스마트 헬스케어 플랫폼을 가정해 만든 랜딩입니다.

업종
의료·헬스케어 플랫폼
형태
컨셉 시안 · 플랫폼 랜딩
구성
3대 서비스 · 의료진 · 수치
이용 후기 · CTA · 문의 폼
기술 스택
반응형 HTML/CSS · Vanilla JS · IntersectionObserver · 카운트업 애니메이션
MediCare 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 42

01과제

무엇을 받았고, 무엇을 했나

비대면 의료 서비스는 처음 온 사람도 무엇을 할 수 있는지 바로 알아야 합니다. 그래서 원격진료·AI 건강체크·처방전 배달 세 서비스를 첫 스크롤에 배치하고, 숫자 지표는 requestAnimationFrame 카운트업으로 보여 주게 했습니다.

의료진 소개와 이용 후기, 문의 폼까지 이어지는 플랫폼 랜딩으로 구성했습니다.

핵심 — 첫 스크롤에 세 서비스원격진료·AI 건강체크·처방전 배달을 첫 스크롤에 세워, 무엇을 할 수 있는지부터 보여 줍니다.

02화면

히어로가 아니라 실제로 일하는 구간

3대 서비스 — 원격진료·AI 건강체크
013대 서비스 — 원격진료·AI 건강체크
의료진 카드
02의료진 카드
숫자 카운트업 · 이용 후기
03숫자 카운트업 · 이용 후기
문의 폼
04문의 폼

03구성

이 사이트에 들어간 것

  • 01
    웨이브 히어로다크 네이비 톤
  • 02
    3대 서비스 섹션원격진료·AI 건강체크·처방전 배달
  • 03
    의료진 카드진료과·경력 표기
  • 04
    숫자 카운트업requestAnimationFrame
  • 05
    이용 후기별점 카드
  • 06
    문의 폼문의 유형 선택
  • 07
    스크롤 리빌 모션IntersectionObserver
  • 08
    반응형 내비모바일 메뉴
MediCare 모바일 전체 화면

모바일 · 스크롤해서 보기

컨셉 작업입니다.

특정 고객 없이 업종 문법을 연구하려고 만든 시안입니다.