모션·인터랙션 기획
① 절제된 회색 톤 + 포인트 1색(세아는 오렌지 #e64d2c, 웰텍은 블루 1색 권장) — 사진이 주인공이고 UI는 뒤로 물러남.
② 메인은 화면 단위로 끊어 보여줌: KV(3D 영상) → 제품 3분할 패널 → APPLICATIONS 계단식 카드. 휠 한 번에 한 화면, 이전 화면은 0.7배로 줄며 뒤로 빠지고 다음 화면이 아래서 올라옴(700ms).
③ 글자는 '제목 → 설명 → 버튼' 순서로 500ms 씩 시차를 두고 올라오고, 패널끼리도 300ms 씩 어긋남. 한 번에 다 뜨는 게 없음.
④ 호버는 작게·확실하게: 사진 1.03 확대(0.8s), 화살표 아이콘이 좌우로 한 번 흔들리며 포인트색으로 변함(800ms), 둥근 + 버튼 180° 회전.
⑤ 전체메뉴는 우측 50% 서랍(배경 0.8s 페이드, 패널 0.4s 슬라이드), 문의는 우측 고정 세로 탭 QUICK INQUIRY → 폼 서랍. 두 서랍이 사이트 어디서나 같은 자리.
⑥ 서브 페이지는 모션을 거의 쓰지 않음. 번호(01·02) 붙인 섹션, 큰 사진 한 장, 넓은 여백, 회색/진회색 배경 교차로 리듬을 만듦.
휠 하이재킹(화면 단위 강제 스크롤)은 쓰지 않습니다. 세아제강 방식은 접근성·모바일·SEO 긴 본문에 불리하고, 발주처 담당자가 표를 보러 오는 사이트에 맞지 않습니다. 대신 '이전 화면이 줄어들며 사라지는' 느낌은 KV 축소 효과로 살립니다.
모든 등장 모션은 한 번만, 0.5~0.8초, ease-out(cubic-bezier .4,0,.2,1). 시차는 100~300ms. 2초 넘는 연출 없음.
prefers-reduced-motion 설정 사용자에겐 전부 끕니다(와이어프레임 상단 '모션 끄기' 버튼이 같은 동작).
실구현 라이브러리 권장: GSAP 3 + ScrollTrigger(리빌·패럴랙스·카운트), Swiper(뉴스·현장 사진 슬라이드), Lenis(부드러운 스크롤, 선택). 영상은 mp4 1회 재생 후 정지(세아 방식), 모바일은 포스터 이미지.
| # | 위치 | 효과 | 트리거 | 시간·이징 | 세아제강 참고 | 와이어프레임 |
|---|---|---|---|---|---|---|
| G1 | 전체메뉴 ☰ | 우측 50% 서랍 + 대메뉴 8개 순차 등장, 대메뉴 호버 시 하위 메뉴 활성 | ☰ 클릭 | 배경 0.8s / 패널 0.4s / 항목 0.05s 시차 | gnb-wrap transform 0.4s, gnb-bg opacity 0.8s | 적용됨 |
| G2 | QUICK INQUIRY | 우측 고정 세로 탭 → 문의 폼 서랍(420px) | 탭 클릭 | 0.4s ease | quick-wrap transform 0.4s | 적용됨 |
| G3 | 메가메뉴 | PC 상단 메뉴 호버 시 전체 하위 메뉴 패널 펼침, 항목 0.04s 시차, 현재 메뉴 밑줄 좌→우 | GNB 호버 | 0.35s | (세아는 ☰ 전용. 벤치마킹 엑셀: 상단 노출 유지) | 적용됨 |
| G4 | 헤더 축소 | 스크롤 80px 넘으면 높이 76→58, 그림자 | scroll | 0.3s | — | 적용됨 |
| G5 | 페이지 진입 | 본문 페이드인 0.4s + 서브 비주얼 제목 위로 등장 | load | 0.4~0.7s | — | 적용됨 |
| G6 | 서브 비주얼 패럴랙스 | 스크롤하면 제목이 천천히 내려가며 흐려짐 | scroll 0~400px | scroll 연동 | — | 적용됨 |
| G7 | LNB 고정 | 하위 메뉴 바가 헤더 아래 고정, 활성 밑줄 slide | scroll / hover | 0.3s | second-tab | 적용됨 |
| G8 | 버튼 호버 | 화살표 좌우 흔들림 + 테두리·글자 포인트색 | hover | 0.8s ease-in-out | arrow-move · flash_border | 적용됨 |
| G9 | 카드 호버 | 6px 상승 + 그림자 + 사진 1.04 확대 + 제목 밑 포인트 라인 | hover | 0.35s / 사진 0.8s | img transform 0.8s cubic-bezier(.4,0,.2,1) | 적용됨 |
| G10 | 스크롤 리빌 | 모든 콘텐츠 블록 40px 아래서 페이드업, 카드·단계·연표·표 행은 0.1s 시차 | 뷰포트 15% 진입 | 0.6s | col translate(0,150px)→0 | 적용됨 |
| G11 | 맨 위로 | 600px 이상 스크롤 시 나타남 | scroll | 0.3s | goTop | 적용됨 |
| G12 | 페이지 전환 | 클릭 시 현재 화면 페이드아웃 → 다음 페이지 페이드인(SPA 아님, View Transitions API 선택) | 링크 클릭 | 0.3s | — | 설명만 |
| # | 위치 | 효과 | 트리거 | 시간·이징 | 세아제강 참고 | 와이어프레임 |
|---|---|---|---|---|---|---|
| M1 | KV | 영상 1회 재생 → 카피 2줄 아래→위 순차(0.25s) → 서브카피·버튼. 스크롤하면 KV scale 1→0.7 + 페이드, 카피는 위로 빠짐. 하단 스크롤 힌트 깜빡임 | load / scroll | 0.8s / scroll 연동 | kv h2 span 700ms 시차, show-info 전환 scale(0.7) | 적용됨 |
| M2 | 사업 패널 3분할 | 제목→설명→버튼 패널별 0.3s 어긋남, 호버 패널 확장(1.6배)+사진 확대, 1초 뒤 보조 버튼 2개 | 리빌 / hover | 0.5s / flex 1s | products col 500ms 100·300ms, detail-btn-wrap 1000ms | 적용됨 |
| M3 | 숫자 | 0→목표값 카운트업, 타일 순차 등장 | 뷰포트 60% | 1.4s ease-out | (현대스틸파이프 숫자 5개) | 적용됨 |
| M4 | 대표 기술 2카드 | G9 카드 호버 | hover | — | — | 적용됨 |
| M5 | 용도 카드 5장 | 균등 그리드, 0.1s 시차 리빌 + 사진 와이프, 호버 시 6px 상승·사진 1.04 확대 (v0.4: 계단식·패럴랙스 제거) | 리빌 | 0.5s, 0.1s 시차 | about col 순서 2,1,0,5,4,3,6 의 단순화 | 적용됨 |
| M6 | ESG·IR·뉴스 | 4카드 0.1s 시차 | 리빌 | 0.5s | — | 적용됨 |
| M7 | 발주처 로고 | 무한 가로 흐름, 호버 정지 | 항상 | 22s linear | — | 적용됨 |
| M8 | 하단 배너 | 카탈로그 + QUICK INQUIRY 2버튼, G8 호버 | hover | — | banner 섹션 | 적용됨 |
| M9 | 뉴스 슬라이드 | 뉴스 3장 이상이면 Swiper 자동 넘김 5s, 호버 정지 | 자동 | 0.6s | — | 설명만 |
| M10 | 고객 서비스 바로가기 | 원형 아이콘 6개가 튀어오르며 순차 등장(back-ease), 호버 시 아이콘 회전·배경 포인트색 | 리빌 / hover | 0.5s, 0.08s 시차 | 휴스틸·넥스틸 아이콘 열 | 적용됨 |
| M11 | 프로젝트 카드 | 해외/국내 탭 전환 시 카드 페이드, 카드 호버 G9 | 클릭 / hover | 0.3s | SK오션플랜트 실적 카드 | 적용됨 |
| M12 | (제외) 막 열림 인트로 | 3D 와 함께 제거 — 영상이 인트로 역할 | — | — | — | 설명만 |
| M13 | (제외) 3D 강관 오브젝트 | 대표 피드백 2026-10-29: 과함 → KV 는 영상으로 | — | — | — | 설명만 |
| M14 | (제외) 기술 애니메이션 | 대표 피드백: 과함 → 사진 카드 + 스크롤 와이프·패럴랙스로 대체 | — | — | — | 설명만 |
| M15 | 섹션 인디케이터 | 오른쪽 세로 점 9개, 현재 섹션 강조·라벨, 클릭 이동 | scroll / 클릭 | 0.3s | SK오션플랜트·넥스틸 세로 바 | 적용됨 |
| M16 | 대형 타이포 띠 | WELTECH · 3LP · RIR … 외곽선 글자가 가로로 흐름 | 항상 | 30s linear | — | 적용됨 |
| M17 | 패널 자동 강조 | 사용자 호버 전까지 3패널이 3.5초마다 번갈아 확장 | 자동 | flex 1s | — | 적용됨 |
| # | 위치 | 효과 | 트리거 | 시간·이징 | 세아제강 참고 | 와이어프레임 |
|---|---|---|---|---|---|---|
| S-A | 이미지 와이프 | 사진 자리가 아래→위로 닦이듯 드러남(clip-path), 안쪽 사진은 1.08→1 축소 | 뷰포트 진입 | 0.9s ease-out | — | 적용됨 |
| S-B | 좌우 슬라이드 리빌 | 섹션이 번갈아 왼쪽/오른쪽 60px 에서 들어옴 (숫자·프로젝트 ← / 기술·ESG →), 사업 패널은 0.92→1 확대 | 뷰포트 진입 | 0.7s | products translateY(100%) 전환 재해석 | 적용됨 |
| S-C | 패럴랙스 | 대표 기술 사진 2장이 스크롤 속도의 ±6% 로 서로 다르게 움직여 깊이감 (용도 카드는 v0.4 에서 제외) | scroll 연동 | 즉시(rAF) | — | 적용됨 |
| S-D | 섹션 배경 전환 | 현재 섹션에 따라 바탕색이 흰색→연회색→연파랑으로 부드럽게 바뀜(세아 bgGray/bgDarkGray 교차) | 섹션 50% 진입 | 0.8s | about bgWhite · bgGray | 적용됨 |
| S-E | 스크롤 진행 바 | 상단 3px 포인트색 바가 읽은 만큼 채워짐 | scroll 연동 | 즉시 | — | 적용됨 |
| S-F | 타이포 띠 스크롤 연동 | 대형 외곽선 글자 띠가 자동 흐름 대신 스크롤 방향·속도에 맞춰 움직임 | scroll 연동 | 즉시 | — | 적용됨 |
| S-G | 제목 라인 드로잉 | 섹션 제목 아래 포인트 선이 왼쪽에서 그려짐, 영문 라벨 먼저·국문 제목 나중 | 뷰포트 진입 | 0.6s | — | 적용됨 |
| S-H | 서브 페이지 | 같은 리빌·와이프·표 행 시차를 서브 전 페이지에 적용 + 서브 비주얼 패럴랙스(G6) | 뷰포트 진입 | 0.6s | — | 적용됨 |
| # | 위치 | 효과 | 트리거 | 시간·이징 | 세아제강 참고 | 와이어프레임 |
|---|---|---|---|---|---|---|
| S1 | 강관 제품 페이지 | 규격표 행 순차 등장(G10), 인증 배지 호버 반전, 시공 사진 호버 확대 | 리빌 / hover | 0.5s | product-detail 섹션 번호 01·02 | 적용됨 |
| S2 | 생산설비·공정 | 3LP 코팅 10단계 번호가 튀어나오듯(scale 0→1, back-ease) 순차 등장 | 리빌 | 0.4s, 0.1s 시차 | — | 적용됨 |
| S3 | RIR 공법 | 공정 3단계 순차, 특징 4카드 시차, 시공 전·후 슬라이더(드래그로 비교) 권장 | 리빌 / drag | 0.5s | — | 설명만 |
| S4 | 시공 실적 | 지도 핀 순차 드롭, 표 행 순차, 탭 필터 전환 시 행 페이드 | 리빌 / 클릭 | 0.4s | — | 설명만 |
| S5 | 연혁 | 세로 선이 위에서 아래로 그려지며 항목 등장, 3단계 탭 전환 슬라이드 | 리빌 / 탭 | 선 1.2s | history 페이지 | 적용됨 |
| S6 | 핵심 기술·지식재산권 | 카드 호버, 필터 칩 클릭 시 행 페이드 전환 | hover / 클릭 | 0.3s | patent 페이지 | 적용됨 |
| S7 | ESG 데이터·IR 재무 | 차트 막대 하나씩 자라남(세아 finance 차트와 동일), 수치 카운트업 | 리빌 | 0.5s 시차 | finance.asp 차트 막대 순차 | 설명만 |
| S8 | 윤리제보센터 | 5단계 절차 순차 등장, 폼은 모션 없음(신뢰감) | 리빌 | 0.4s | — | 적용됨 |
| S9 | 홍보영상·뉴스 | 썸네일 호버 확대 + 재생 아이콘 페이드, 목록 순차 등장 | hover / 리빌 | 0.5s | — | 적용됨 |
| S10 | 인재채용 | 인재상 3카드 시차, 채용 절차 4단계 순차 | 리빌 | 0.4s | — | 적용됨 |
색
바탕 흰색/연회색(#f4f4f4)/진회색(#2b2b2b) 3단 교차 + 포인트 블루 1색. 포인트색은 호버·활성·숫자에만
타이포
국문 Pretendard, 영문 섹션 라벨은 대문자 소형(APPLICATIONS 식). 제목 28~40px, 본문 15px
사진
공장 라인·관 내부·현장 항공 사진 위주, 세로 패널엔 세로 사진. 사람 사진은 ESG·채용에만
여백
섹션 간 120px, 서브 섹션은 번호(01·02) + 좌측 제목 / 우측 사진 2단