기업·병원·IT 솔루션 소개에 효과적인 단계별 프로세스 UI 구현 가이드
CSS 26.01.08 조회 26기업·병원·IT 솔루션 소개에 효과적인 단계별 프로세스 UI 구현 가이드
기업·병원·IT·디자인 맞춤형 솔루션 소개 페이지에서 활용하기 좋은 절차 안내·이용 단계 UI 패턴을 소개합니다.
➰➰➰
✅ 모션 설명
진행 단계에 따라 progress bar가 이동하고 단계별 설명 콘텐츠가 자동으로 노출되는 프로세스 UI 모션
✅ 왜 프로세스(절차·단계) UI가 중요할까요?
기업·병원·컨설팅·IT 솔루션 소개 페이지에서는 다음 정보를 명확하게 전달해야 합니다.
· 프로젝트 프로세스
· 진료/예약 안내 흐름
· 서비스 이용 절차, 상담/진행 단계
이때, 모든 텍스트를 한 번에 보여주면 복잡하고 집중도가 떨어질 수 있습니다.
그래서 단계별로 일정 타이밍에 맞춰 콘텐츠를 노출하는 UI가 효과적입니다.
✅ 이런 페이지에 특히 잘 어울려요
1. 기업 서비스 / 프로젝트 진행 절차
· 컨설팅 프로세스
· 개발·제작 단계 안내
· 고객 온보딩 흐름
2. 병원·의료 서비스 안내
· 진료 예약 절차
· 검사·수술 진행 단계
· 환자 안내 프로세스
3. 맞춤형 / IT / 디자인 솔루션 소개
· 견적·문의 진행 흐름
· 패키지 서비스 신청 단계
· UX/UI 프로젝트 단계 소개
✏️ HTML 구조 설계 가이드
· progress bar와 단계 콘텐츠를 분리된 구조로 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <section class="process"> <div class="cont"> <div class="progress-bar"> <div class="progress-fill"></div> </div> <div class="page__inner"> <ul class="col-4"> <li>step01</li> <li>step02</li> <li>step03</li> <li>step04</li> </ul> </div> </div> </section> | cs |
✏️ Script 구현 포인트 (타이밍 자동 계산)
· 단계 콘텐츠에 show 클래스를 추가하여 opacity:0 -> 1로 노출 컨트롤
· progress bar 전체 진행 시간 / 단계 = 단계마다 할당되는 시간(구간) 을 계산하여 해당 단계의 노출 타이밍 동기화
· setTimeout() 함수를 활용하여 자동으로 고르게 분배
· GSAP ScrollTrigger와 접목시켜, 원하는 위치에 도달 시 모션 진행
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | // progress function runProgress() { const fills = document.querySelectorAll("#shTemplate .progress-fill"); const items = document.querySelectorAll("#shTemplate .process .col-4 li"); const steps = items.length; const duration = 2400; const segment = duration / (steps + 1); // 단계 초기화 items.forEach(li => li.classList.remove("show")); // progress-fill 초기값 fills.forEach(fill => { fill.style.transition = "none"; fill.style.width = "0%"; fill.style.height = "100%"; fill.offsetHeight; fill.style.transition = `width ${duration}ms linear`; // 애니메이션 시작 requestAnimationFrame(() => { fill.style.width = "100%"; }); }); // 단계별 순차 노출 items.forEach((item, index) => { setTimeout(() => { item.classList.add("show"); }, segment * (index + 1)); }); } // ScrollTrigger ScrollTrigger.create({ trigger: "#shTemplate .process", start: "0% 40%", end: "100% 100%", onEnter: () => { runProgress(); } }); | cs |
➰➰➰
디자인키트에서는 실제 서비스 화면에 바로 적용할 수 있는
인터랙션 가이드와 구현 템플릿을 지속적으로 업데이트하고 있습니다.
다양한 유형의 프로세스 UI와 기업·병원·컨설팅·IT 솔루션 소개 페이지 템플릿이 궁금하다면,
디자인키트 템플릿을 확인해 보세요.
✨관련링크✨
