SYSTEM BLUEPRINT

종합건설사 하이엔드 웹 플랫폼
상세 화면 설계도 (Wireframe)

풀스크린 드론 히어로 영역, GSAP ScrollTrigger 연동 가로 타임라인, 안전보건 인포그래픽, 그리고 어드민 실적 관리 CMS를 설계한 화면 설계서입니다.

All Rights Reserved © idealabsP.01
일반 방문자 시나리오

일반 방문자의 웹 탐색 여정 (Visitor Journey)

메인 영상 로딩부터 연혁 가로 타임라인 탐색, 공사 실적 필터링 조회 및 실적 상세 보기, 문의 전송 흐름

1. 메인 영상 로드

웹 최적화 드론 영상 자동 재생
웅장한 4K 비주얼 첫인상

2. 가로 타임라인 탐색

스크롤에 반응하여 좌우 슬라이딩
하는 기업 연혁 타임라인 조회

3. 공사 실적 갤러리

비동기 필터링으로 시공 실적
그리드 및 호버 레이아웃 확인

4. 안전보건 인포그래픽

스크롤 진행도에 매칭되는
시인성 높은 안전 관리 체계 시각화

5. 견적 및 채용 접수

실시간 이메일 연동 폼메일로
견적 의뢰 및 채용 서류 제출

All Rights Reserved © idealabsP.02
일반 방문자 | 화면 01

풀스크린 드론 영상 메인 화면 (WF 1-1)

https://www.company.co.kr/
WOOLSAN CONST
기업소개 시공실적 품질경영 안전경영 인재채용
GPS: 35.4512° N, 129.3512° E
ALT: 124m | SPD: 14m/s
ISO: 100 | shutter: 1/240
BATTERY: ■■■■□ 78%
LIVE STREAMING

울산의 신뢰를 넘어,
대한민국의 미래를 시공합니다

최적화된 4K 비디오 스트리밍 & GSAP Scroll 인터랙션 하이엔드 테마

SCROLL DOWN

[화면 개요 및 목적]

웹사이트 접속 시 풀스크린 백그라운드로 웅장한 현장 드론 비디오가 자동 루프 재생되며, 하이엔드 슬로건 타이포그래피가 스크롤에 맞춰 차오르는 첫 화면 레이아웃입니다.

[핵심 기능 로직]

미디어 파일은 AWS CloudFront에서 가변 비트레이트 분산 스트리밍을 거치며, 모바일과 PC 환경에 맞춰 각각 WebM 및 MP4 포맷으로 분기 처리되어 렌더링됩니다.

  • FFmpeg Adaptive Video Rendering
  • AWS CloudFront CDN Caching
All Rights Reserved © idealabsP.03
일반 방문자 | 화면 02

스크롤 반응형 가로 타임라인 연혁 (WF 1-2)

https://www.company.co.kr/company/history
데스크톱 가로 스크롤 뷰 (PC Screen) GSAP Pin Active

마우스 휠 스크롤 발생 시 화면이 고정(Pin)되고 연혁 카드가 X축 가로 슬라이딩 형태로 활주합니다.

2026
시공평가 TOP 10

바이오플랜트 공사 수주 및 수소 환원철 시공 포트폴리오 확보.

2024
ISO 45001 안전 인증

중대재해 Zero 실현을 위한 스마트 안전 IT 현장 솔루션 도입.

가로 스크롤 이동 (Scroll & Drag)
모바일 세로 목록 전환 (Mobile Screen) 세로 스크롤
회사 연혁
2026
시공평가 TOP 10

바이오플랜트 공사 수주

2024
ISO 45001 안전 인증

스마트 안전 IT 솔루션 도입

[화면 개요 및 목적]

마우스 스크롤 다운을 가로 스크롤로 매핑하여 연도별 랜드마크 공사 실적 사진과 텍스트 정보가 좌우로 부드럽게 활주하듯 전개되는 연혁 화면 레이아웃입니다.

[핵심 기능 로직]

GSAP ScrollTrigger의 Pin 기능을 활성화하여 스크롤 락을 건 후, 타임라인의 x축을 translateX로 트랜지션 처리합니다. 모바일에서는 스와이프 제스처로 자연스럽게 전환됩니다.

  • GSAP ScrollTrigger Horizontal Pinning
  • Responsive Touch Gestures Matrix
All Rights Reserved © idealabsP.04
일반 방문자 | 화면 03

품질/안전 경영 모바일 인포그래픽 (WF 1-3)

9:41 AM
스마트 안전경영 현장 A
무재해 기록판
452일 돌파
100%
1
작업 착수 전 TBM 의무 실시
당일 작업 위험요소 교육 및 모바일 확인 서명
진행중
2
스마트 IoT 안전 헬멧 연동
작업자 심박수, 낙하 충격, 실시간 위치 GPS 연동 수집
3
AI 자동 객체 인식 CCTV 구축
안전모 미착용 또는 비인가 구역 진입 시 즉시 경보

[화면 개요 및 목적]

건설사의 가장 중요한 자산인 안전 경영 체계와 품질 가이드 라우 데이터를 시각화한 인터랙티브 모바일 대시보드 화면입니다.

[핵심 기능 로직]

스크롤 진행도(Scroll Progress)를 0부터 100까지 감지하여, 인포그래픽 카드 요소들이 깊이감 있게 서서히 드러나는 패럴랙스(Parallax) Reveal 효과를 구현합니다.

  • Parallax Layer Depth Reveal Logic
  • SVG Vector Stroke-Dashoffset Animation
All Rights Reserved © idealabsP.05
내부 관리자 시나리오

관리자의 실적 관리 및 채용/문의 대응 여정 (CMS Flow)

새로운 시공 실적 정보 등록, 카테고리 태깅, 실적 갤러리 업데이트, 실시간 접수 문의 모니터링 흐름

1. 어드민 로그인

보안 강화 로그인 경로를 통해
워드프레스 커스텀 관리자 진입

2. 컴포넌트 블록 등록

Gutenberg 블록 에디터를 통해
시공 실적 템플릿 필드 채우기

3. 포트폴리오 메타 태깅

관급/민간, 토목/플랜트 등
분류를 클릭 한 번으로 태깅

4. 갤러리 비동기 동기화

추가 즉시 메인/포트폴리오
갤러리에 새로고침 없이 즉시 로드

5. 문의 수신함 관제

고객이 제출한 폼메일 견적을
어드민 대시보드에서 실시간 모니터링

All Rights Reserved © idealabsP.06
내부 관리자 | 화면 01

블록 기반 포트폴리오 CMS 등록 화면 (WF 2-1)

https://www.company.co.kr/wp-admin/post-new.php?post_type=portfolio
WP-ADMIN / CUSTOM FIELDS

시공 실적 포트폴리오 관리자 등록 (Gutenberg + ACF Pro)

포트폴리오 CPT Active
실적 카테고리 태깅
플랜트 (Plant)
토목공사 (Civil)
관급공사 (Public)
드래그 앤 드롭 또는 파일 탐색기 열기
* 대용량 고화질 JPG도 S3 파이프라인에서 자동으로 90% 이상 용량을 압축한 WebP 포맷으로 변환됩니다.

[화면 개요 및 목적]

코딩 지식이 없는 관리자가 텍스트와 이미지를 간편하게 채워 넣을 수 있는 ACF Pro 맞춤형 컴포넌트 입력 양식입니다.

[핵심 기능 로직]

입력된 데이터는 워드프레스 REST API를 거쳐 관계형 DB에 저장되며, 업로드된 사진은 AWS S3 WebP 포맷 최적화 엔진을 거쳐 갤러리에 자동 렌더링됩니다.

  • Gutenberg Blocks Custom Schema
  • S3 WebP Auto-Converter Pipeline
All Rights Reserved © idealabsP.07
내부 관리자 | 화면 02

실시간 문의 접수 및 채용 관리함 (WF 2-2)

https://www.company.co.kr/wp-admin/admin.php?page=inbox

B2B 견적 의뢰 및 고객문의 관제 대시보드

실시간 비동기 문의 연동 및 SMTP 알림 파이프라인 관리 모듈

실시간 수신 관제중 (Socket Open)
발송 업체 의뢰 분류 수신 일시 이메일 상태
(주)엘에스에너지 온산 변전소 배관 시공 견적서 의뢰 2026-05-21 09:12 contact@lsenergy.co.kr 미결재 신규
(주)한주케미칼 플랜트 보온 공사 협력업체 등록 문의 2026-05-20 16:30 procurement@hanju.com 답변 발송완료
영남엔지니어링 토목공사 배관 자재 견적 의뢰 건 2026-05-18 14:05 sales@youngnam.co.kr 답변 발송완료

[화면 개요 및 목적]

웹사이트 고객문의(Contact) 폼을 통해 접수된 견적 의뢰 및 채용 문의 리스트를 실시간으로 집계하고 이메일 전송 로그를 감시하는 화면입니다.

[핵심 기능 로직]

문의 전송 시 SMTP 서버 릴레이를 거쳐 등록된 사내 메일 주소로 알림이 발송되고, 어드민 로컬 DB에도 유실 방지용 이중 로깅 처리가 들어갑니다.

  • SMTP Relay Mail Delivery Guard
  • Anti-Spam ReCAPTCHA v3 Verification
All Rights Reserved © idealabsP.08
내부 관리자 | 화면 03

트래픽 및 미디어 스트리밍 모니터링 (WF 2-3)

https://www.company.co.kr/wp-admin/admin.php?page=media-performance
CLOUDFRONT CDN STATISTICS

대용량 영상 트래픽 대역폭 및 캐시 적중률 관제

실시간 모니터링: 2026-05-21 10:00 KST
일일 누적 데이터 전송량
42.8 GB
Edge 캐시 적중률 (Cache Hit)
98.4 %
평균 최초 응답 속도 (TTFB)
0.38 초
시간별 대역폭 소모 트렌드 (최적화 전 vs 후)
최적화 전 원본 4K 로드 WebM / H.265 트래픽 (안정화)

[화면 개요 및 목적]

드론 대용량 영상 스트리밍으로 인한 네트워크 대역폭(Bandwidth) 사용량과 웹서버 성능 지표를 한눈에 관제하는 모니터링 뷰입니다.

[핵심 기능 로직]

AWS CloudFront API를 파이프라인으로 연결하여, 일일 미디어 전송 용량 및 CDN 캐시 적중률(Cache Hit Rate)을 그래프로 실시간 렌더링합니다.

  • Data Aggregation & Visualization
  • AWS CloudFront Telemetry Engine
All Rights Reserved © idealabsP.09
시스템 개발자 시나리오

시스템 개발자의 최적화 및 보안 관제 프로세스 (Ops Flow)

FFmpeg 트랜스코딩 스케줄링, SEO 메타 스키마 관리, SQL Injection 차단 및 SSL 상태 모니터링 흐름

1. 보안 스캔 실행

워드프레스 취약점 및 플러그인
상태 실시간 원격 검사

2. 비디오 자동 트랜스코딩

드론 raw 비디오 감지 시
자동 WebM/H.265 이중 렌더링

3. 캐시 프리로드 및 퍼지

CloudFront CDN 캐시 재생성
및 초기 엣지 노드 강제 배포

4. 구조화 SEO 스키마 확인

포털 로봇을 위한 구조화 데이터
마크업 유효성 검사

5. 웹방화벽 차단 모니터링

DDoS 및 Brute-force 공격에 대한
실시간 IP 밴 로그 트랙

All Rights Reserved © idealabsP.10
시스템 개발자 | 화면 01

AWS CloudFront CDN & 비디오 로드 모니터링 (WF 3-1)

https://aws.amazon.com/cloudfront/dashboard
AWS CLOUDFRONT / TRANSCODING PIPELINE

FFmpeg 영상 압축 전/후 용량 소모 분석 및 캐싱 지표

정상 동작중
원본 4K 드론 raw 영상 154.2 MB
• 모바일 LTE 환경 평균 첫 로딩 속도: 8.4초
• 동시 접속자 100명 발생시 대역폭 포화 위험
• 모바일 브라우저 재생 불가 가능성 있음 (HEVC 원본 지원 한계)
H.265/WebM 1080p 자동 트랜스코딩 8.1 MB
• 모바일 환경 평균 최초 로딩 속도: 1.2초 (94.7% 단축)
• CloudFront CDN 최다 엣지 노드 캐시 분산 전송
• 디바이스별 WebM / MP4 브라우저 분기 처리 완료

[화면 개요 및 목적]

드론 영상 캐시 분산 전송에 관련된 엣지 노드 트래픽 용량 및 디바이스별 트래픽 쉐어링을 체크하는 인프라 대시보드 화면입니다.

[핵심 기능 로직]

비트레이트 압축 스크립트를 통해 용량이 150MB에서 8MB로 최적화된 영상의 대역폭 소모량 감소 및 엣지 노드 응답속도를 0.3초대로 안정화합니다.

  • FFmpeg Compression Rate Analyzer
  • AWS CloudFront Serverless Metrics
All Rights Reserved © idealabsP.11
시스템 개발자 | 화면 02

구조화 데이터 SEO 스키마 마크업 테스터 (WF 3-2)

https://search.google.com/test/rich-results
JSON-LD SCHEMA VALIDATION

구조화 데이터 SEO 마크업 마스터 및 포털 인덱스 최적화

구글 리치검색 통과 
1 {
2   "@context": "https://schema.org",
3   "@type": "LocalBusiness",
4   "name": "울산종합건설",
5   "image": "https://www.company.co.kr/logo.png",
6   "address": {
7     "@type": "PostalAddress",
8     "addressLocality": "울산광역시 온산읍",
9     "addressCountry": "KR"
10  },
11  "areaServed": "전국 대규모 석유화학 및 바이오 플랜트",
12  "award": "울산 시공능력평가 TOP 10 획득"
13 }
검색 엔진 최적화 기대효과
구글/네이버 등 검색 크롤러 로봇에게 구조화된 기업 메타데이터를 직접 전송하여 노출 가중치 부여.
포털 검색결과 페이지 노출 시 사이트 내부의 공사 실적, 회사 주소, 브랜드 로고 등이 리치 스니펫으로 시인성 높게 연출 가능.

[화면 개요 및 목적]

대기업 원청사와의 검색 결과 최적화를 위해 구글/네이버 포털 검색 로봇에게 전달되는 JSON-LD 구조화 데이터의 유효성을 검증하는 뷰입니다.

[핵심 기능 로직]

헤더 내에 LocalBusiness 및 Organization 스키마를 이식하여 검색 결과 시 기업 로고, 주소, 평점, 주요 시공 실적이 리치 스니펫으로 풍부하게 연출되도록 자동 매핑합니다.

  • JSON-LD Schema Rich Snippet Mapper
  • Structured Search Engine Indexer API
All Rights Reserved © idealabsP.12
시스템 개발자 | 화면 03

보안 위협 탐지 및 DB 보안 대시보드 (WF 3-3)

https://www.company.co.kr/wp-admin/admin.php?page=security-logs
WEB APPLICATION FIREWALL (WAF)

실시간 해킹 침입 방어 및 DB 보안 인텔리전스 콘솔

방화벽 감제 중
[09:41:00] [SYSTEM] WAF active. Scanning incoming requests...
[09:41:02] [WAF] SQL-Injection Blocked from 182.21.43.12 - Query: UNION SELECT * FROM wp_users
[09:41:55] [SYSTEM] Brute-force Login path detected & isolated: /custom-admin-portal
[09:45:00] [SSL] Let's Encrypt Certificate validation check: OK (Expires in 88 days)
[09:48:12] [SYSTEM] Database prefix secured using custom prefix config "wp_sec_"
서버 및 데이터베이스 보호 체계
어드민 로그인 경로 격리 (/wp-admin 우회)
DB 테이블 접두사 변경 (보안 취약점 방지)
XML-RPC 원격 제어 포트 전면 비활성화
비정상 다중 접속 시도 IP 차단 스케줄러

[화면 개요 및 목적]

XML-RPC 공격 차단 로그, 로그인 시도 실패 제한 수치(Limit Login Attempts), SQL 인젝션 공격 방지를 위한 DB 접두어 방어 상태를 보여주는 보안 관제 콘솔 화면입니다.

[핵심 기능 로직]

특정 IP에서 비정상적인 로그인 시도가 3회 이상 발생할 경우 방화벽 API를 트리거하여 기기 레벨에서 403 Forbidden 차단 및 보안 관리자에게 경고 이메일을 즉시 발송합니다.

  • Brute-force Login Jail System
  • Issue Tracking & Status Management
All Rights Reserved © idealabsP.13