풀스크린 드론 히어로 영역, GSAP ScrollTrigger 연동 가로 타임라인, 안전보건 인포그래픽, 그리고 어드민 실적 관리 CMS를 설계한 화면 설계서입니다.
메인 영상 로딩부터 연혁 가로 타임라인 탐색, 공사 실적 필터링 조회 및 실적 상세 보기, 문의 전송 흐름
웹 최적화 드론 영상 자동 재생
웅장한 4K 비주얼 첫인상
스크롤에 반응하여 좌우 슬라이딩
하는 기업 연혁 타임라인 조회
비동기 필터링으로 시공 실적
그리드 및 호버 레이아웃 확인
스크롤 진행도에 매칭되는
시인성 높은 안전 관리 체계 시각화
실시간 이메일 연동 폼메일로
견적 의뢰 및 채용 서류 제출
최적화된 드론 영상 & GSAP Scroll 인터랙션 하이엔드 테마
웹사이트 접속 시 풀스크린 백그라운드로 웅장한 현장 드론 비디오가 자동 루프 재생되며, 하이엔드 슬로건 타이포그래피가 스크롤에 맞춰 차오르는 첫 화면 레이아웃입니다.
미디어 파일은 AWS CloudFront에서 가변 비트레이트 분산 스트리밍을 거치며, 모바일과 PC 환경에 맞춰 각각 WebM 및 MP4 포맷으로 분기 처리되어 렌더링됩니다.
신규 친환경 바이오플랜트 공사 수주 및 하이테크 현장 포트폴리오 다각화 달성.
중대재해 제로 실현을 위한 독자적 스마트 안전관리 솔루션 전격 도입.
울산 국가산업단지 내 주요 석유화학 플랜트 배관 및 모듈 시공 성공.
마우스 스크롤 다운을 가로 스크롤로 매핑하여 연도별 랜드마크 공사 실적 사진과 텍스트 정보가 좌우로 부드럽게 활주하듯 전개되는 연혁 화면 레이아웃입니다.
GSAP ScrollTrigger의 Pin 기능을 활성화하여 스크롤 락을 건 후, 타임라인의 x축을 translateX로 트랜지션 처리합니다. 모바일에서는 스와이프 제스처로 자연스럽게 전환됩니다.
건설사의 가장 중요한 자산인 안전 경영 체계와 품질 가이드 라우 데이터를 시각화한 인터랙티브 모바일 대시보드 화면입니다.
스크롤 진행도(Scroll Progress)를 0부터 100까지 감지하여, 인포그래픽 카드 요소들이 깊이감 있게 서서히 드러나는 패럴랙스(Parallax) Reveal 효과를 구현합니다.
새로운 시공 실적 정보 등록, 카테고리 태깅, 실적 갤러리 업데이트, 실시간 접수 문의 모니터링 흐름
보안 강화 로그인 경로를 통해
워드프레스 커스텀 관리자 진입
Gutenberg 블록 에디터를 통해
시공 실적 템플릿 필드 채우기
관급/민간, 토목/플랜트 등
분류를 클릭 한 번으로 태깅
추가 즉시 메인/포트폴리오
갤러리에 새로고침 없이 즉시 로드
고객이 제출한 폼메일 견적을
어드민 대시보드에서 실시간 모니터링
코딩 지식이 없는 관리자가 텍스트와 이미지를 간편하게 채워 넣을 수 있는 ACF Pro 맞춤형 컴포넌트 입력 양식입니다.
입력된 데이터는 워드프레스 REST API를 거쳐 관계형 DB에 저장되며, 업로드된 사진은 AWS S3 WebP 포맷 최적화 엔진을 거쳐 갤러리에 자동 렌더링됩니다.
| 발송인 | 기업명 | 문의 분류 | 수신일자 | 상태 |
|---|---|---|---|---|
| 홍길동 | (주)엘에스에너지 | 변전소 배관 철골 시공 견적 의뢰 | 2026-05-21 09:12 | 미확인 |
| 김영희 | 개인의뢰 | 품질관리/공사감독 채용 지원서 제출 | 2026-05-20 18:30 | 답변완료 |
웹사이트 고객문의(Contact) 폼을 통해 접수된 견적 의뢰 및 채용 문의 리스트를 실시간으로 집계하고 이메일 전송 로그를 감시하는 화면입니다.
문의 전송 시 SMTP 서버 릴레이를 거쳐 등록된 사내 메일 주소로 알림이 발송되고, 어드민 로컬 DB에도 유실 방지용 이중 로깅 처리가 들어갑니다.
드론 대용량 영상 스트리밍으로 인한 네트워크 대역폭(Bandwidth) 사용량과 웹서버 성능 지표를 한눈에 관제하는 모니터링 뷰입니다.
AWS CloudFront API를 파이프라인으로 연결하여, 일일 미디어 전송 용량 및 CDN 캐시 적중률(Cache Hit Rate)을 그래프로 실시간 렌더링합니다.
FFmpeg 트랜스코딩 스케줄링, SEO 메타 스키마 관리, SQL Injection 차단 및 SSL 상태 모니터링 흐름
워드프레스 취약점 및 플러그인
상태 실시간 원격 검사
드론 raw 비디오 감지 시
자동 WebM/H.265 이중 렌더링
CloudFront CDN 캐시 재생성
및 초기 엣지 노드 강제 배포
포털 로봇을 위한 구조화 데이터
마크업 유효성 검사
DDoS 및 Brute-force 공격에 대한
실시간 IP 밴 로그 트랙
모바일 평균 첫 로드 타임: 8.4초
모바일 평균 첫 로드 타임: 1.2초
드론 영상 캐시 분산 전송에 관련된 엣지 노드 트래픽 용량 및 디바이스별 트래픽 쉐어링을 체크하는 인프라 대시보드 화면입니다.
비트레이트 압축 스크립트를 통해 용량이 150MB에서 8MB로 최적화된 영상의 대역폭 소모량 감소 및 엣지 노드 응답속도를 0.3초대로 안정화합니다.
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "울산종합건설",
"address": {
"@type": "PostalAddress",
"addressLocality": "울산광역시 울주군 온산읍",
"addressCountry": "KR"
},
"areaServed": "울산광역시 및 전국 대규모 산업단지",
"award": "울산 시공능력평가 TOP 10"
}
대기업 원청사와의 검색 결과 최적화를 위해 구글/네이버 포털 검색 로봇에게 전달되는 JSON-LD 구조화 데이터의 유효성을 검증하는 뷰입니다.
헤더 내에 LocalBusiness 및 Organization 스키마를 이식하여 검색 결과 시 기업 로고, 주소, 평점, 주요 시공 실적이 리치 스니펫으로 풍부하게 연출되도록 자동 매핑합니다.
XML-RPC 공격 차단 로그, 로그인 시도 실패 제한 수치(Limit Login Attempts), SQL 인젝션 공격 방지를 위한 DB 접두어 방어 상태를 보여주는 보안 관제 콘솔 화면입니다.
특정 IP에서 비정상적인 로그인 시도가 3회 이상 발생할 경우 방화벽 API를 트리거하여 기기 레벨에서 403 Forbidden 차단 및 보안 관리자에게 경고 이메일을 즉시 발송합니다.