05 · Service Patterns · 진입 · 계정
마이페이지My Page
로그인 사용자의 개인 허브. 프로필·활동·설정이 한 주소에 모여있지만, 사용자가 가장 자주 찾는 2~3개 진입점을 최상단에 배치해야 ‘길을 잃지 않는 마이페이지’가 됩니다.
화면 구조
- 헤더 요약 — 프로필 이미지 · 이름 · 교적 상태(부서·구역) 한 줄. 편집 링크 우측.
- 핵심 지표 3~4개 — 진행 중 신청, 참여 소그룹, 헌금 내역 등 가장 자주 확인하는 수치. 카드로 시각화.
- 최근 활동 — 신청·예배 출석·나눔 타임라인. 전체 보기 링크.
- 설정 섹션 — 계정·알림·계좌 정보·개인정보. 세부 페이지로 분기.
핵심 지표 카드
진행 중 신청
2건
가장 가까운 일정 · 이번 토요일
올해 헌금
480,000원
최근 드림 4월 19일
소속 소그룹
1곳
다음 모임 4/28 수요일
카드는 수치 + 맥락 한 줄. 올해 헌금 480,000원만 적으면 그냥 수치지만, “최근 드림 4월 19일” 한 줄이 붙으면 성도가 다음 행동을 떠올리게 됩니다.
배치의 원칙
- 사용자가 가장 자주 찾는 항목을 첫 번째 스크롤 안에. 통계가 아닌 ‘다음 행동’.
- “설정”은 한 덩어리로. 여러 곳에 흩어 놓으면 사용자는 메뉴를 헤매게 됩니다.
- 모바일은 세로 한 줄. 카드 간 간격은 16px로 타이트하게.
Do· 행동 중심 마이페이지
상단에 “이번 주 예배”·“신청 내역” 같은 바로가기를 배치. 성도는 마이페이지에 정보 열람이 아니라다음 일정 확인을 하러 옵니다.
Don't· 통계 대시보드
방문한 횟수·평균 체류시간 같은 수치를 나열하지 마세요. 성도 본인에게는 가치가 없고, 공간만 차지합니다.
설정 섹션
- 카테고리별 분리: 프로필 · 알림 · 계좌 정보 · 개인정보 · 약관.
- 각 설정은 자신의 상세 페이지로 이동. 복잡한 설정을 마이페이지 안에 펼치지 마세요.
- 로그아웃 · 탈퇴는 최하단. 탈퇴는 설정 > 보안 안에.
조합되는 컴포넌트
접근성
- 이름·이메일 같은 개인정보는 스크린리더에 항상 읽히게. 단, 전체 공개 페이지와 혼동 없게 별도 헤딩 구조.
- 수치 카드는
dl/dt/dd가 의미상 가장 적합. - 설정 토글은
Switch사용 시aria-checked가 자동 반영되는지 확인.