구조에서 새 가족까지
방문자와 운영자의 화면 여정
구조 소식, 입양 정보, 쉬운 관리자와 안정적 운영을 화면으로 확인합니다.
스토리보드란?
스토리보드는 실제로 쓰게 될 화면을 미리 확인하는 설계 문서입니다. 방문자가 구조 소식을 보고 참여하는 흐름과 운영진이 콘텐츠를 발행하는 흐름을 나란히 보여줍니다.
- 방문자가 구조 소식에서 입양 대기 동물로 이동해 상세 정보를 확인
- 봉사·문의 참여 경로를 찾고 신청 정보를 입력
- 운영자가 사진과 글을 등록하고 공개 상태를 관리
- 이전·트래픽·백업 점검으로 운영 안정성을 확인
마지막까지 보시면 공개 사이트와 관리자 화면이 어떻게 이어지는지 확인하실 수 있습니다.
발견에서 입양·참여까지
구조 소식을 보고 입양 동물을 살피며 필요한 참여 방법으로 연결됩니다.
1. 소식 발견
메인에서 최신 구조 소식 확인
2. 동물 탐색
종류·이름으로 입양 검색
3. 상세 확인
건강·구조 배경·상태 확인
4. 참여 선택
입양·봉사·후원 경로 선택
5. 신청 접수
입력과 접수 안내 확인
구조 소식이 먼저 보이는 홈
구조 소식이 먼저 보이는 홈
구조에서
새 가족까지.
봄이의 회복 이야기를 만나보세요.
입양 친구 만나기 ↗[화면 개요 및 목적]
메인과 6개 메뉴에서 최신 구조 소식, 입양·후원·봉사로 빠르게 이동합니다. 실제 사이트는 /site/에서 체험할 수 있습니다.
[핵심 기능 로직]
정적 공개 페이지와 이미지 WebP 파생본을 CDN 캐시에 배포해 방문 급증 때 원본 서버 요청을 줄입니다.
- 빠른 공개정적 웹 + CDN
- 가벼운 사진WebP 자동 변환
입양 대기 동물 탐색
입양 대기 동물 탐색
강아지 · 여아 · 2살 · 7kg · 입양 대기
고양이 · 남아 · 1살 · 4kg · 입양 대기
강아지 · 남아 · 3살 · 11kg · 상담 중
[화면 개요 및 목적]
종류와 이름으로 동물을 찾고 건강·구조 배경·입양 상태를 상세에서 확인합니다.
[핵심 기능 로직]
입양 상태가 심사 중이면 신청 버튼을 숨기고 완료 개체에는 완료 배지를 노출합니다.
- 찾기 쉬운 목록검색·필터
- 상태 혼동 방지상태별 CTA
봉사·문의 참여 신청
봉사·문의 참여 신청
봉사 참여 신청
이름 김보호
분야 센터 봉사
희망일 2026.11.14
상태 접수 전
신청 내용 확인 ↗[화면 개요 및 목적]
방문자가 참여 방법을 비교하고 봉사·문의 접수를 선택합니다.
[핵심 기능 로직]
실제 운영 시 신청 정보는 동의 확인 후 서버에서 처리하고 구글시트에는 최소한의 접수 정보만 연동합니다.
- 접수 누락 방지폼 검증
- 운영자 확인구글시트 연동
작성부터 공개·점검까지
코드 없이 콘텐츠를 발행하고 개체 상태와 운영 지표를 관리합니다.
1. 글 작성
제목과 구조 이야기 입력
2. 사진 올리기
여러 장 끌어놓고 최적화
3. 상태 정하기
임시저장·공개·숨김
4. 개체 관리
입양 상태와 변경일 기록
5. 운영 점검
이전·301·백업 확인
글쓰기와 여러 장 사진 업로드
글쓰기와 여러 장 사진 업로드
구조 소식 작성
사진 여러 장 끌어놓기
사진 4장 선택됨
원본 18.4MB
WebP 변환 후 2.1MB
최적화 완료 ✓
미리보기 · 공개하기[화면 개요 및 목적]
코드를 열지 않고 제목·본문을 쓰고 여러 사진을 끌어놓아 공개 상태를 정합니다. 실제 관리자 체험은 /site/admin.html입니다.
[핵심 기능 로직]
업로드 즉시 긴 변 1600px로 리사이즈하고 WebP로 변환해 미리보기와 예상 용량을 보여줍니다.
- 운영이 쉬운 글쓰기독립 CMS
- 업로드 부하 감소WebP 파생본
입양 상태·공개 권한 관리
입양 상태·공개 권한 관리
입양 동물 관리
[화면 개요 및 목적]
운영자가 개체별 공개·숨김과 입양 상태를 관리하고 변경일을 추적합니다.
[핵심 기능 로직]
비공개 글은 서버에서 권한 검사를 거쳐 차단하며 상태 변경과 변경 시각을 감사 기록에 남깁니다.
- 잘못된 공개 방지서버 권한 검사
- 기록 추적변경일 로그
이전·301·트래픽 운영 점검
이전·301·트래픽 운영 점검
[화면 개요 및 목적]
카페24 콘텐츠 현황과 시험 이전 결과, URL 연결, 이미지 최적화 및 백업 상태를 확인합니다.
[핵심 기능 로직]
콘텐츠 유형·건수별 매핑 → 시험 이전 → 전체 이전 → 301 검사 → 복구 리허설로 최종 승인합니다. 호스팅 전송량 한도는 실사 후 계약서에 명시합니다.
- 기존 링크 보존301 리디렉션
- 장애 복구 준비백업 복원 점검
유저 여정 타이틀 (Admin Flow)
유저 타입 3이 플랫폼을 사용하는 전체 흐름 설명.
1. 단계명
단계 설명
두 번째 줄
2. 단계명
단계 설명
두 번째 줄
3. 단계명
단계 설명
두 번째 줄
4. 단계명
단계 설명
두 번째 줄
5. 단계명
단계 설명
두 번째 줄