동물구조단체 사이트 관리 콘솔
MVP 이후 확장으로 이미지 최적화·부하 대응 현황, 카페24 데이터 이전과 301 리디렉션 매핑, 구글시트 연동 폼, 영문 변환, 권한 관리를 하나의 관리 콘솔로 통합한 구현한 프로젝트입니다.
프로젝트 개요
MVP 이후 확장으로 이미지 최적화·부하 대응 현황, 카페24 데이터 이전과 301 리디렉션 매핑, 구글시트 연동 폼, 영문 변환, 권한 관리를 하나의 관리 콘솔로 통합한 구현한 프로젝트입니다.
작업 범위
- 이미지 최적화·부하 대응 현황: 업로드 이미지의 리사이즈·압축·썸네일 생성 결과와 CDN 캐시 구성을 타일형 개요 화면에서 확인합니다
- 카페24 데이터 이전·301 리디렉션 매핑: 기존 카페24 게시물을 유형별로 조사·매핑하고 이전 전후 주소를 짝지어 301 리디렉션 규칙을 관리합니다
- 구글시트 연동 폼·영문 변환: 봉사 신청·문의 폼의 접수 내역을 구글시트로 전달하고, 공통 헤더의 영문 변환 방식(용어집 적용)을 설정합니다
- 권한 관리·비공개 글 접근 차단: 운영진 역할별 메뉴·작업 권한을 설정하고, 비공개 게시물은 링크 숨김이 아니라 서버에서 접근을 차단합니다
주요 업무
- 이미지 최적화·부하 대응 현황 화면: 업로드 시 Sharp로 규격별 변환본을 만들고 객체 스토리지와 CDN 경로를 함께 기록하는 파이프라인을 구성합니다
- 카페24 데이터 이전·301 리디렉션 매핑 화면: 목록에서 항목을 선택하면 우측에 이전 상태·신규 주소·검수 체크리스트를 보여주는 마스터-디테일 구조로 구현합니다
- 구글시트 연동 폼·영문 변환 화면: 폼 제출을 큐로 받아 Google Sheets API에 순차 기록하고, 번역 용어집을 관리 화면에서 편집합니다
- 권한 관리·비공개 글 접근 차단 화면: 역할 기반 권한표와 서버 단 세션 검사를 결합하고, 권한 변경 이력을 감사 목록으로 남깁니다
프로젝트 핵심 과제
이전 건수가 확정되지 않은 카페24 데이터를 유형별로 분류해 범위를 점진적으로 확정하는 이전 큐 설계
기존 주소 체계가 불규칙할 때 중복·순환 리디렉션 없이 301 규칙을 생성하는 매핑 검증 로직
트래픽이 몰리는 시간대의 이미지 요청을 CDN 캐시와 지연 로딩으로 분산하는 배포 구성 설계
자동 번역과 용어집 적용 중 한 가지 방식을 고를 때 동물 이름·보호 용어의 번역 일관성을 확보하는 방안
핵심 기능 상세
이미지 최적화·부하 대응 현황
업로드 이미지의 리사이즈·압축·썸네일 생성 결과와 CDN 캐시 구성을 타일형 개요 화면에서 확인합니다.
- Sharp 기반 업로드 시 3종 규격 리사이즈·WebP 변환 파이프라인 구성
- AWS S3 저장 후 CDN 캐시 경로와 Redis 메타데이터 캐시 연결
- 지연 로딩 적용 범위를 화면별 체크 목록으로 시각화
업로드부터 썸네일 생성, CDN 배포까지의 처리 단계를 한 화면에서 추적하도록 설계합니다.
카페24 데이터 이전·301 리디렉션 매핑
기존 카페24 게시물을 유형별로 조사·매핑하고 이전 전후 주소를 짝지어 301 리디렉션 규칙을 관리합니다.
- 공개 페이지 크롤링 결과를 유형별(게시판·개체·사진)로 분류하는 이전 큐 설계
- 이전 주소와 신규 주소를 매핑 테이블로 관리하고 Next.js 리디렉션 규칙으로 변환
- 시험 이전과 전체 이전 단계를 상태 값으로 구분하는 작업 모델
이전 건수가 확정되지 않아도 유형별 집계로 범위를 확인하도록 이전 현황 모델을 설계합니다.
구글시트 연동 폼·영문 변환
봉사 신청·문의 폼의 접수 내역을 구글시트로 전달하고, 공통 헤더의 영문 변환 방식(용어집 적용)을 설정합니다.
- 폼 제출 값을 서버에서 검증한 뒤 Google Sheets API로 행 추가
- Redis 기반 작업 큐로 전달 실패 건 재시도 처리
- 영문 변환 용어집 테이블과 언어 전환 쿠키 처리
접수 즉시 시트에 기록되고 실패 건은 재시도 목록에 남도록 전달 구조를 설계합니다.
권한 관리·비공개 글 접근 차단
운영진 역할별 메뉴·작업 권한을 설정하고, 비공개 게시물은 링크 숨김이 아니라 서버에서 접근을 차단합니다. 역할 기반 권한표와 서버 단 세션 검사를 결합하고, 권한 변경 이력을 감사 목록으로 남깁니다.
- 역할(관리자·편집자·열람자)별 권한표를 DB 테이블로 관리
- Route Handler와 서버 컴포넌트에서 세션 권한 검사를 공통 함수로 적용
- 권한 변경과 비공개 전환을 감사 로그 테이블에 기록
비공개 글의 주소를 직접 입력해도 서버가 권한을 검사해 접근을 막는 구조를 설계합니다.
프로젝트 진행 단계
이미지 처리 파이프라인 구축 · 2026.10
Sharp 변환 규격 3종 정의, S3 저장 구조와 CDN 경로 설계, Redis 메타데이터 캐시 연결
이전 매핑·리디렉션 엔진 개발 · 2026.10
이전 큐 모델, 주소 매핑 테이블, 301 규칙 생성 로직과 검수 화면 구현
시트 연동·다국어 모듈 구현 · 2026.10
Google Sheets API 전달 큐, 재시도 정책, 영문 용어집 관리 화면 구현
권한 체계·감사 로그 구축 · 2026.10
역할별 권한표, 서버 단 접근 검사, 비공개 글 차단, 감사 로그 테이블 구현
개발 결과
기술적 주안점
- 업로드부터 썸네일 생성, CDN 배포까지의 처리 단계를 한 화면에서 추적하도록 설계합니다
- 이전 건수가 확정되지 않아도 유형별 집계로 범위를 확인하도록 이전 현황 모델을 설계합니다
- 접수 즉시 시트에 기록되고 실패 건은 재시도 목록에 남도록 전달 구조를 설계합니다
