SYSTEM BLUEPRINT

베이어레프코리아
홈페이지 보안형 재구축 화면 설계

기존 디자인을 유지하며 새 구조로 옮기는 사용자, 운영자, 검수 담당자 흐름입니다.

방문자 시나리오

기존과 같은 탐색 경험

방문자는 제품, 솔루션, 프로젝트, 자료를 이전과 동일한 흐름으로 확인합니다.

1. 메인 진입

브랜드 비주얼 확인
주요 메뉴 접근

2. 제품 탐색

카테고리 선택
제품 목록 확인

3. 상세 확인

제품 설명과 이미지 확인
관련 자료 연결

4. 자료 다운로드

카탈로그와 문서 다운로드
정적 파일 연결

5. 문의 전환

전화와 회사 정보 확인
오프라인 문의 유도

방문자 | 화면 01

현행 사이트 구조 분석

https://www.beijerref.co.kr/main/main.html
현행 홈페이지 맵

Products 53개, Projects 19개, News 191개, 다운로드 62개를 기준으로 이관 범위를 분리합니다.

서버 필요 판단

검색과 목록은 정적 데이터로 가능, 관리자 등록은 선택형 DB 범위로 분리합니다.

[화면 개요 및 목적]

현재 홈페이지의 메뉴와 콘텐츠 수량을 기준으로 재구축 범위를 확정합니다.

[핵심 기능 로직]

크롤링 결과를 바탕으로 정적 이관 가능 항목과 DB 필요 후보를 분리합니다.

  • 사이트 맵 추출
  • 콘텐츠 인벤토리
방문자 | 화면 02

새 메인과 제품 목록

/products
새 홈페이지 구성

메인 슬라이더, 제품 목록, 프로젝트 사례, 뉴스와 자료실을 React 컴포넌트로 재구성합니다.

다운로드 처리

기존 파일은 정적 파일로 연결하고, 권한 기능이 필요할 때만 서버를 추가합니다.

[화면 개요 및 목적]

기존 디자인 톤을 유지하면서 메뉴, 슬라이더, 제품 목록을 최신 구조로 구현합니다.

[핵심 기능 로직]

React 컴포넌트와 JSON 데이터를 연결해 서버 없이 목록과 필터를 제공합니다.

  • React Component
  • Static JSON
방문자 | 화면 03

검수와 보안 조치 내역

보안 검수 리포트

구버전 스크립트 제거, 최신 빌드 결과, 보안 스캔 대응 메모를 납품합니다.

비용 상한

기본 300만원, 관리자와 DB가 추가되어도 500만원 선에서 조정합니다.

[화면 개요 및 목적]

본사 검수에 필요한 변경 내역을 한눈에 확인합니다.

[핵심 기능 로직]

구버전 라이브러리 제거, 신규 빌드 적용, 브라우저 검수 결과를 문서화합니다.

  • QA Checklist
  • Security Memo
운영 담당자 시나리오

콘텐츠 운영 범위 결정

운영자가 직접 수정할 영역과 개발팀이 관리할 영역을 미팅에서 구분합니다.

1. 자료 목록 확인

상품, 뉴스, 자료실 수량 점검

2. 수정 빈도 분류

자주 바뀌는 영역 표시

3. DB 필요 판단

관리자 필요 여부 결정

4. 비용 조정

300만원 기본
최대 500만원 상한

5. 운영 인수

수정 방법과 문서 전달

운영 담당자 | 화면 01

콘텐츠 인벤토리

/content-map
현행 홈페이지 맵

Products 53개, Projects 19개, News 191개, 다운로드 62개를 기준으로 이관 범위를 분리합니다.

서버 필요 판단

검색과 목록은 정적 데이터로 가능, 관리자 등록은 선택형 DB 범위로 분리합니다.

[화면 개요 및 목적]

전체 콘텐츠를 표로 정리해 이관 누락을 방지합니다.

[핵심 기능 로직]

정적 데이터로 가능한 항목은 우선 이관하고, 관리자 필요 항목만 별도 분리합니다.

  • Content Audit
  • Migration Table
운영 담당자 | 화면 02

선택형 관리자 범위

/admin-scope
보안 검수 리포트

구버전 스크립트 제거, 최신 빌드 결과, 보안 스캔 대응 메모를 납품합니다.

비용 상한

기본 300만원, 관리자와 DB가 추가되어도 500만원 선에서 조정합니다.

[화면 개요 및 목적]

관리자 기능이 정말 필요한 부분만 선택합니다.

[핵심 기능 로직]

DB, 로그인, 파일 업로드가 필요한 경우에만 백엔드 범위로 전환합니다.

  • Optional CMS
  • Supabase
운영 담당자 | 화면 03

운영 인수 문서

/handover
새 홈페이지 구성

메인 슬라이더, 제품 목록, 프로젝트 사례, 뉴스와 자료실을 React 컴포넌트로 재구성합니다.

다운로드 처리

기존 파일은 정적 파일로 연결하고, 권한 기능이 필요할 때만 서버를 추가합니다.

[화면 개요 및 목적]

배포 후 수정 요청과 유지보수 기준을 문서화합니다.

[핵심 기능 로직]

정적 수정과 관리자 수정 범위를 나눠 월간 유지보수로 연결합니다.

  • Data Aggregation & Visualization
  • Handover Guide
본사 검수 담당자 시나리오

보안 스캔 대응 흐름

구버전 라이브러리 제거 후 스캔 대응 근거를 제공합니다.

1. 지적 항목 확인

Panorays 리포트 검토

2. 원인 제거

구버전 파일 제거

3. 새 빌드 적용

최신 프론트엔드 배포

4. 재검수

브라우저와 스캔 확인

5. 보고

조치 내역서 전달

본사 검수 담당자 | 화면 01

보안 항목 매핑

/security-map
보안 검수 리포트

구버전 스크립트 제거, 최신 빌드 결과, 보안 스캔 대응 메모를 납품합니다.

비용 상한

기본 300만원, 관리자와 DB가 추가되어도 500만원 선에서 조정합니다.

[화면 개요 및 목적]

보안 지적 항목을 실제 파일과 화면 기능에 연결합니다.

[핵심 기능 로직]

jQuery 1.7.1, jQuery UI 1.12.1 제거 여부를 기준으로 체크합니다.

  • Security Mapping
  • Dependency Check
본사 검수 담당자 | 화면 02

재구축 결과 검수

/qa
새 홈페이지 구성

메인 슬라이더, 제품 목록, 프로젝트 사례, 뉴스와 자료실을 React 컴포넌트로 재구성합니다.

다운로드 처리

기존 파일은 정적 파일로 연결하고, 권한 기능이 필요할 때만 서버를 추가합니다.

[화면 개요 및 목적]

새 버전의 메뉴, 슬라이더, 팝업, 모바일 표시를 확인합니다.

[핵심 기능 로직]

주요 브라우저와 화면 크기별로 동일 동작을 점검합니다.

  • Cross Browser QA
  • Responsive Test
본사 검수 담당자 | 화면 03

Claim Fix 보고

/claim-fix
보안 검수 리포트

구버전 스크립트 제거, 최신 빌드 결과, 보안 스캔 대응 메모를 납품합니다.

비용 상한

기본 300만원, 관리자와 DB가 추가되어도 500만원 선에서 조정합니다.

[화면 개요 및 목적]

본사에 전달 가능한 조치 완료 내역을 정리합니다.

[핵심 기능 로직]

변경 전후 라이브러리, 배포 경로, 검수 결과를 한 페이지로 제공합니다.

  • Fix Report
  • Issue Tracking & Status Management