SYSTEM BLUEPRINT

의료 반응형
웹사이트 스토리보드

환자와 운영자가 같은 상태를 바라보는 화면 설계

스토리보드란?

환자 여정과 운영자 관리의 연결을 화면 단위로 검증합니다.

    환자 예약|콘텐츠 탐색|운영자 관리

화면은 예쁘게 끝나지 않고 운영 가능한 상태로 이어져야 합니다.

PATIENT FLOW 시나리오

환자 예약 여정

핵심 화면과 상태 변화가 끊기지 않도록 설계한 사용자 흐름

지점 선택

4개 지점 게이트웨이에서 목적지를 좁힙니다.

진료과 탐색

진료과 정보와 핵심 안내를 빠르게 비교합니다.

예약 일정 선택

날짜와 시간 슬롯을 운영 규칙에 맞춰 선택합니다.

정보 확인

비회원 본인인증과 예약 정보를 확인합니다.

완료·상태 관리

예약·콘텐츠 상태를 관리자에서 이어서 확인합니다.

PATIENT FLOW | 화면 01

게이트웨이 / 지점 홈

#
게이트웨이 / 지점 홈
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
PATIENT FLOW | 화면 02

진료과 / 예약 선택

#
진료과 / 예약 선택
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
PATIENT FLOW | 화면 03

관리자 / 상태 보드

#
관리자 / 상태 보드
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
PATIENT FLOW 시나리오

콘텐츠 탐색 여정

핵심 화면과 상태 변화가 끊기지 않도록 설계한 사용자 흐름

지점 선택

4개 지점 게이트웨이에서 목적지를 좁힙니다.

진료과 탐색

진료과 정보와 핵심 안내를 빠르게 비교합니다.

예약 일정 선택

날짜와 시간 슬롯을 운영 규칙에 맞춰 선택합니다.

정보 확인

비회원 본인인증과 예약 정보를 확인합니다.

완료·상태 관리

예약·콘텐츠 상태를 관리자에서 이어서 확인합니다.

PATIENT FLOW | 화면 01

게이트웨이 / 지점 홈

#
게이트웨이 / 지점 홈
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
PATIENT FLOW | 화면 02

진료과 / 예약 선택

#
진료과 / 예약 선택
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
PATIENT FLOW | 화면 03

관리자 / 상태 보드

#
관리자 / 상태 보드
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
ADMIN FLOW 시나리오

운영자 관리 여정

핵심 화면과 상태 변화가 끊기지 않도록 설계한 사용자 흐름

지점 선택

4개 지점 게이트웨이에서 목적지를 좁힙니다.

진료과 탐색

진료과 정보와 핵심 안내를 빠르게 비교합니다.

예약 일정 선택

날짜와 시간 슬롯을 운영 규칙에 맞춰 선택합니다.

정보 확인

비회원 본인인증과 예약 정보를 확인합니다.

완료·상태 관리

예약·콘텐츠 상태를 관리자에서 이어서 확인합니다.

ADMIN FLOW | 화면 01

게이트웨이 / 지점 홈

#
게이트웨이 / 지점 홈
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
ADMIN FLOW | 화면 02

진료과 / 예약 선택

#
진료과 / 예약 선택
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS
ADMIN FLOW | 화면 03

관리자 / 상태 보드

#
관리자 / 상태 보드
지점 선택 ›진료과·날짜·시간 ›예약 정보 확인

[화면 개요 및 목적]

공통 헤더·상태·CTA로 흐름을 유지

[핵심 기능 로직]

선택 상태와 다음 행동을 한 화면에서 이해

    HTML5 · CSS3 · JS