화면 구성 이해하기
Vet-Sync는 PC, 태블릿, 모바일 각각에 최적화된 화면을 제공합니다. 기기에 따라 네비게이션 위치와 레이아웃이 자동으로 전환됩니다.
PC 화면 구성
PC에서는 상단 헤더 + 네비게이션 탭 구조로 동작합니다.
상단 헤더
- Vet-Sync 로고: 클릭하면 대시보드(차트 목록)로 이동
- 프로필: 현재 로그인한 사용자 이름 표시
- 설정 아이콘: 병원 관리, 계정 설정 등으로 이동
네비게이션 탭
상단 헤더 아래에 주요 기능 탭이 배치됩니다.
- 차트 목록 — 오늘/특정 날짜의 모든 차트 목록
- 업무 — 마킹된 업무 목록
- 환자/보호자 — 환자 및 보호자 관리
- 게시판 — 공지사항, 인수인계 등 커뮤니케이션
대시보드 (차트 목록)
차트 목록은 격자(Grid) 형태로 표시되며, 열 수를 2~10열까지 수동 조정할 수 있습니다.
팁: 모니터 크기에 따라 열 수를 조절하면 한눈에 더 많은 차트를 볼 수 있습니다.
모바일 화면 구성
모바일(스마트폰)에서는 하단 5탭 네비게이션으로 동작합니다. 상단 헤더는 표시되지 않습니다.
스크린샷: 모바일 전체 화면 — 차트 목록 + 하단 5탭 네비게이션
하단 5탭
| 탭 | 기능 | 설명 |
|---|---|---|
| 차트 | 차트 목록 | 오늘의 모든 차트 조회 |
| 업무 | 업무 목록 | 마킹된 업무 확인 및 완료 |
| 빠른 입력 | 빠른 입력 | 차트 없이 빠르게 값 입력 |
| 차트 검색 | 차트 검색 | 날짜/환자명으로 차트 검색 |
| 더보기 | 더보기 | 환자/보호자, 게시판, 설정 등 |
태블릿 화면 구성
태블릿에서는 모바일과 같은 하단 5탭 네비게이션을 사용하지만, 넓은 화면을 활용하여 차트를 더 넓게 표시합니다.
스크린샷: 태블릿 화면 — 넓은 차트 그리드 + 하단 5탭
보기 모드 전환
태블릿에서는 차트 그리드의 보기 모드를 전환할 수 있습니다.
- 축소 모드 (Shrink): 모든 열을 화면에 맞춰 축소 표시 — 한눈에 전체 현황 파악
- 스크롤 모드 (Scroll): 원래 크기로 표시하고 좌우 스크롤 — 상세 내용 확인에 유리
팁: 차트 상세 화면의 우측 상단에서 보기 모드를 전환할 수 있습니다.
공통 요소
모든 기기에서 공통으로 사용하는 UI 요소입니다.
날짜 이동
차트 목록과 업무 목록에서 좌우 화살표로 다른 날짜의 데이터를 확인할 수 있습니다.
검색
- 환자 검색: 환자 이름으로 검색
- 차트 검색: 날짜, 환자명으로 과거 차트 검색
알림
실시간 알림을 통해 다른 스태프가 변경한 차트 내용이 자동으로 동기화됩니다. 별도의 새로고침 없이 항상 최신 상태를 유지합니다.
팁: PWA(Progressive Web App)로 설치하면 앱처럼 사용할 수 있습니다. 모바일에서 브라우저의 "홈 화면에 추가" 기능을 이용하세요.