모든 포트폴리오LUDGI / PROJECT ARCHIVE
자체 제작 · 인터랙티브 CMS 시연
SECOND CHANCE — 동물구조 웹사이트와 CMS
문 밖으로 다가오는 강아지, 스크롤로 열리는 정원, 직접 고쳐 보는 동물 기록. 처음의 몰입감부터 매일의 운영까지 연결한 동물구조단체 웹사이트 콘셉트입니다.
LUDGI가 독립 제작한 포트폴리오 콘셉트입니다. 특정 동물구조단체의 공식 서비스나 고객 납품 사례가 아닙니다. 동물 이름·사연·상태는 가상이며 일부 영상은 AI로 움직임을 만들었습니다. CMS 변경 사항은 체험 중인 브라우저에만 저장됩니다. 실제 계정 인증·공유 데이터베이스·입양 신청·결제는 연결하지 않았습니다.
선택한 화면
SELECTED VIEWS
제작 노트
PROCESS & SCOPE
마음을 움직이는 첫 장면에서, 운영자의 매일까지.
동물구조단체의 웹사이트는 방문자에게 동물의 이야기를 전하면서, 적은 인력으로 일하는 운영자가 매일 내용을 고칠 수 있어야 합니다. SECOND CHANCE는 이 두 가지 경험을 하나의 디자인으로 연결하기 위해 제작했습니다.
열리는 문을 브랜드 모티프로 잡고 정원, 동물 초상, 관리자 화면에 같은 형태를 이어 썼습니다. 히어로의 실제 영상과 마우스 반응·스크롤 전환으로 첫인상을 만들고, CMS에서는 동물 선택 → 내용 수정 → 저장 → 공개 화면 확인이 끊기지 않도록 구성했습니다. 공개 페이지의 한·영 전환, 휴대폰 레이아웃, 키보드 조작과 동작 줄이기도 함께 고려했습니다.
- 시네마틱 첫 화면
- 배경과 강아지가 서로 다른 깊이로 반응하고, 스크롤을 내리면 아치가 정원으로 열립니다. 강아지를 누르면 확대된 상태로 영상이 계속 재생되며, 바깥을 누르면 부드럽게 원위치로 돌아갑니다.
- 동물을 만나는 탐색
- 움직이는 동물 카드, 이름·종·성별·연령·체중·입양 상태 필터, 개체별 소개·건강·구조 배경을 연결했습니다. 심사 중·입양 완료 상태에서는 신청 동선을 숨기는 규칙을 시연합니다.
- 쉽게 고치는 CMS
- 사진 추가·순서 변경·자동 축소, 동물과 소식의 임시저장·공개·숨김, 상태 변경일과 이력, 첫 화면 문구 편집을 제공합니다. 공개 페이지에서 해당 동물의 편집 화면으로 바로 이동할 수 있습니다.
- 반응형과 접근성
- 메인과 소개·활동·입양·봉사·후원·소식 페이지를 구성했습니다. 준비된 한국어·영어 문구, 좁은 화면의 메뉴, 키보드 포커스, 반복 영상 일시정지와 동작 줄이기를 지원합니다.
- 실서비스 전환 범위
- 현재는 브라우저 저장소를 사용하는 체험판입니다. 서버 인증·권한 제어, 공유 데이터베이스, 실제 신청·구글시트 연동, 기존 데이터 이전·301 매핑, 부하·복구 검증은 고객 요구와 원본 데이터를 확인한 뒤 구현하는 별도 운영 단계입니다.
LET’S CONNECT
이 작업에서 시작할 다음 이야기.
브랜드 웹사이트와 쉬운 운영 도구가 필요하다면, 원하는 화면과 업무부터 이야기해 주세요.