SYSTEM BLUEPRINT

워드프레스 리뉴얼 & 데이터 이관
사용자별 화면 설계 및 시나리오

사이트 방문자 · 콘텐츠 관리자 · 이관 담당 3개 시점에서, 제안서의 전략이 실제 화면으로 어떻게 구현되는지 정의한 설계도입니다.

P.01
사이트 방문자 시나리오

자료를 찾으러 온 방문자의 여정

27개 메뉴를 헤매던 방문자가 4개 메뉴 안에서 3클릭 이내에 자료를 받아가는 흐름입니다.

1. 메인 진입

새 메인에서
목적을 즉시 인지

2. 통합 메뉴 탐색

4개로 통폐합된
메뉴 구조

3. 자료실 검색

키워드 + 카테고리
필터로 즉시 좁힘

4. 자료 다운로드

이관된 첨부파일
정상 다운로드

5. 문의 전환

모바일에서도
동일한 경험

P.02
사이트 방문자 | 화면 01

신규 메인 페이지 (Desktop)

https://www.company.co.kr
□ COMPANY
회사소개사업분야자료실고객지원
MAIN VISUAL · 신규 디자인
기술로 증명하는
25년의 신뢰
회사소개서 다운로드
●
회사소개
●
사업분야
●
자료실
●
고객지원
최신 자료실더보기 +
2026년 제품 카탈로그 (Rev.7) [첨부 2]2026.08.14
KS 인증서 갱신 안내 [첨부 1]2026.07.30
설비 시공 사례집 vol.12 [첨부 5]2026.07.02

[화면 개요 및 목적]

제안서 전략 02(IA 통폐합 & 메인 리디자인)를 시각화한 화면입니다. 상단 GNB는 회사소개·사업분야·자료실·고객지원 4개로 통합되고, 히어로 배너 아래에 방문자가 가장 많이 찾는 자료실 최신 글을 바로 노출합니다.

[핵심 기능 로직]

메인 배너와 4개 진입 카드는 블록 단위로 구성되어 담당자가 직접 문구·이미지·링크를 교체할 수 있습니다. 최신 자료실 영역은 CPT(resource)에서 발행일 기준으로 자동 출력됩니다.

  • WordPress CPT · 블록 에디터
  • 반응형 3 브레이크포인트
P.03
사이트 방문자 | 화면 02

자료실 검색 및 목록

https://www.company.co.kr/resource
카탈로그 |
검색
전체 1,482 카탈로그 312 인증서 96 시공사례 674 기술자료 400
번호제목등록일다운로드
14822026년 제품 카탈로그 (Rev.7) PDF2026.08.14312회
1481KS 인증서 갱신 안내 PDF2026.07.3088회
1480설비 시공 사례집 vol.12 PDF2026.07.02540회
1479배관 자재 규격표 (개정) PDF2026.06.21201회
1 2 3 ›
이관 검증: 기존 자료실 1,482건 / 첨부 3,914개 — 불일치 0건

[화면 개요 및 목적]

이관된 자료 1,482건이 실제로 검색·필터·다운로드까지 정상 동작하는지를 보여주는 화면입니다. 하단에는 이관 검증 결과를 함께 표기해 데이터가 온전히 옮겨졌음을 방문 화면에서도 확인할 수 있게 했습니다.

[핵심 기능 로직]

키워드 검색은 제목·본문·첨부 파일명까지 색인하며, 카테고리 칩은 이관 시 매핑한 taxonomy를 그대로 사용합니다. 다운로드 수는 기존 조회수 데이터를 승계해 표시합니다.

  • Custom Taxonomy · 검색 색인
  • 첨부 메타데이터 승계
P.04
사이트 방문자 | 화면 03

모바일 반응형 대응

□ COMPANY☰
기술로 증명하는
25년의 신뢰
회사소개
사업분야
자료실
고객지원
최신 자료실
2026 제품 카탈로그 (Rev.7)
KS 인증서 갱신 안내
설비 시공 사례집 vol.12
반응형 3 브레이크포인트
Mobile~ 767px
Tablet768 ~ 1023px
Desktop1024px ~
기존 JSP 사이트는 모바일 전용 뷰가 없어 가로 스크롤이 발생. 리뉴얼 후 모바일 이탈률 개선이 1차 성과 지표.

[화면 개요 및 목적]

기존 JSP 사이트는 고정폭 1024px로 모바일에서 가로 스크롤이 발생했습니다. 리뉴얼 후 동일 콘텐츠가 모바일에서 세로 흐름으로 재배치되는 모습을 설계했습니다.

[핵심 기능 로직]

모바일 우선으로 GNB는 햄버거 메뉴로 축약되고, 4개 진입 카드는 2×2 그리드로 재배치됩니다. 이미지는 WebP로 자동 변환되어 모바일 로딩 속도를 확보합니다.

  • Mobile-first CSS
  • WebP 자동 변환 · LCP 최적화
P.05
콘텐츠 관리자 시나리오

개발자 없이 운영하는 담당자의 여정

제안서 전략 03(자립형 운영 체계)이 실제 관리자 화면에서 어떻게 구현되는지 보여줍니다.

1. 관리자 로그인

보호된 주소 +
2단계 인증

2. 자료실 글 등록

제목·카테고리·
첨부 드래그 업로드

3. 갤러리 업로드

다중 이미지 +
자동 최적화

4. 메인 배너 교체

블록 편집으로
직접 수정

5. 발행 및 확인

즉시 반영 +
자동 백업

P.06
콘텐츠 관리자 | 화면 01

자료실 새 글 등록

https://www.company.co.kr/wp-admin/post-new.php
알림판
미디어
자료실
갤러리
페이지
설정
자료실 › 새 글 등록
2026년 제품 카탈로그 (Rev.7)
카테고리: 카탈로그 ▾
공개 범위: 전체 공개 ▾
⇪
파일을 끌어다 놓으세요
catalog_2026_rev7.pdf (12.4MB) 업로드 완료 ✓
임시저장
발행

[화면 개요 및 목적]

담당자가 가장 자주 하는 업무인 자료 등록 화면입니다. 불필요한 워드프레스 기본 메뉴는 숨기고 실제 사용하는 항목만 남겨 학습 부담을 줄였습니다.

[핵심 기능 로직]

첨부는 드래그 앤 드롭으로 업로드되며 업로드 즉시 용량·확장자를 검사합니다. 카테고리는 이관 시 정의한 taxonomy와 동일해 기존 자료와 같은 체계로 쌓입니다.

  • 역할별 관리자 메뉴 간소화
  • 업로드 검증 · 용량 제한 설정
P.07
콘텐츠 관리자 | 화면 02

갤러리 다중 업로드

https://www.company.co.kr/wp-admin/upload.php
갤러리 › 시공사례 업로드
+ 이미지 추가
현장_01.jpg
현장_02.jpg
현장_03.jpg
현장_04.jpg
현장_05.jpg
현장_06.jpg
현장_07.jpg
현장_08.jpg
업로드 진행6 / 8
WebP 자동 변환 · 썸네일 3종 생성 · 원본 보존

[화면 개요 및 목적]

시공 현장 사진처럼 다량의 이미지를 한 번에 올리는 업무를 위한 화면입니다. 업로드 진행 상태를 명확히 표시해 대량 작업 중 불안을 없앱니다.

[핵심 기능 로직]

업로드된 이미지는 WebP로 자동 변환되고 썸네일 3종이 생성되며 원본은 별도 보존합니다. 이관된 기존 갤러리 864건과 동일한 구조로 저장됩니다.

  • 이미지 자동 최적화 파이프라인
  • 원본 보존 · 썸네일 3종 생성
P.08
콘텐츠 관리자 | 화면 03

메인 배너 블록 편집

https://www.company.co.kr/wp-admin/site-editor.php
메인 배너 교체 (블록 편집)
편집 중인 블록
2026 신제품 라인업
공개
담당자가 개발자 호출 없이 문구·이미지·링크를 직접 수정합니다.
블록 설정
제목: 2026 신제품 라인업
배경: 그라디언트 ▾
링크: /products/2026
Child Theme 적용 — 테마를 업데이트해도 이 커스텀은 유지됩니다.
업데이트

[화면 개요 및 목적]

"메인 문구 하나 바꾸려고 개발사에 연락"하던 상황을 없애는 화면입니다. 편집 가능한 블록만 열어두어 담당자가 레이아웃을 깨뜨릴 위험을 차단했습니다.

[핵심 기능 로직]

커스텀은 Child Theme에 격리되어 테마 업데이트 시에도 유지됩니다. 편집 권한은 역할별로 제한되며 변경 이력은 리비전으로 보관됩니다.

  • Data Aggregation & Visualization
  • Child Theme 격리 · 리비전 관리
P.09
이관 담당 (우리팀) 시나리오

데이터 이관 담당자의 검증 여정

제안서 전략 01(무손실 이관 파이프라인)의 실제 실행 과정과 산출물입니다.

1. 레거시 스캔

테이블·첨부
전수 조사

2. 매핑 정의

JSP 테이블 →
워드프레스 구조

3. 시험 이관

스테이징에서
선행 실행

4. 검증 리포트

MD5 대조 후
불일치 0건 확인

5. 컷오버

도메인 전환 +
301 적용

P.10
이관 담당 (우리팀) | 화면 01

레거시 스캔 및 매핑 정의

https://staging.company.co.kr/migration/scan
레거시 스캔 결과 · 매핑 정의
레거시 (JSP)WordPress 대상건수상태
tb_board_dataCPT: resource1,482매핑완료
tb_board_filewp_postmeta+미디어3,914매핑완료
tb_galleryCPT: gallery864매핑완료
tb_noticepost (공지)311매핑완료
tb_member미이관 (개인정보)—제외
총 이관 대상
6,571건
첨부 총 용량
18.7GB
EUC-KR 파일명
1,206건
한글 파일명 1,206건은 EUC-KR → UTF-8 변환 후 재검증 대상으로 별도 큐에 분리합니다.

[화면 개요 및 목적]

이관의 첫 단계로 기존 JSP 사이트의 테이블과 첨부파일을 전수 조사하고, 각 항목이 워드프레스의 어떤 구조로 옮겨질지 1:1로 정의합니다. 회원 정보처럼 이관하지 않을 대상도 명시적으로 제외 처리합니다.

[핵심 기능 로직]

EUC-KR로 저장된 한글 파일명 1,206건은 변환 실패 위험이 높아 별도 큐로 분리해 처리하고 개별 재검증합니다. 이 분리 처리가 이관 사고의 대부분을 예방합니다.

  • DB 스키마 매핑 · CPT 설계
  • EUC-KR → UTF-8 정규화
P.11
이관 담당 (우리팀) | 화면 02

스테이징 시험 이관 실행

https://staging.company.co.kr/migration/run
스테이징 시험 이관 · 실행 로그
RUNNING
게시글 이관 (resource)1,482 / 1,482
첨부파일 전송3,761 / 3,914
갤러리 이미지 + WebP 변환610 / 864
[10:41:02] scan legacy tb_board_data ... 1482 rows
[10:41:20] normalize encoding EUC-KR -> UTF-8 ... 1206 files
[10:42:55] import posts ... OK 1482
[10:47:31] transfer attachments ... 3761/3914
[10:47:33] WARN 파일명 중복 2건 → suffix 부여 후 재시도
[10:47:36] md5 verify ... match 3761 / mismatch 0

[화면 개요 및 목적]

실서비스에 손대기 전 스테이징에서 전체 이관을 한 번 완주합니다. 진행률과 실시간 로그로 어느 단계에서 무엇이 처리되는지 투명하게 확인할 수 있습니다.

[핵심 기능 로직]

파일명 중복이나 전송 실패는 경고로 기록되고 자동 재시도됩니다. 전송이 끝난 파일은 즉시 MD5 해시를 대조해 원본과 동일한지 검사합니다.

  • 배치 이관 · 자동 재시도
  • MD5 해시 대조 검증
P.12
이관 담당 (우리팀) | 화면 03

이관 검증 리포트 (인수 기준)

https://staging.company.co.kr/migration/report
이관 검증 리포트 · 컷오버 승인
불일치 0건
검증 항목기존이관 후판정
자료실 게시글1,4821,482일치
첨부파일3,9143,914일치
첨부 총 용량18.7GB18.7GB일치
갤러리 이미지864864일치
MD5 해시 대조—0 mismatch일치
301 매핑 커버리지
100% (2,317 URL)
컷오버 예상 다운타임
12분
롤백 소요
5분 이내

[화면 개요 및 목적]

이 화면이 본 제안의 핵심입니다. 게시글·첨부·용량·갤러리·해시를 이관 전후로 대조한 표를 클라이언트가 직접 확인하고, 이 표가 모두 '일치'일 때만 컷오버를 승인합니다.

[핵심 기능 로직]

301 매핑 커버리지와 예상 다운타임, 롤백 소요 시간을 함께 제시해 전환 리스크를 수치로 관리합니다. 리포트는 PDF로 제출되어 내부 보고 자료로 그대로 쓰입니다.

  • 이관 전후 대조 · 리포트 자동 생성
  • Issue Tracking & Status Management
P.13