Patterns

패턴

컴포넌트를 조합한 반복 사용 패턴입니다. el_imin의 롤링 히어로·프로모션 밴드와 el_axai의 리빌·섹션 헤더를 표준화했습니다.

섹션 헤더

오버라인 + 제목 + 설명. 모든 랜딩 섹션의 시작입니다.

Services

이온디가 해드리는 일

상담만 하고 끝나는 컨설팅이 아닙니다. 진단부터 구축, 교육까지가 저희 일입니다.

다크 히어로 키트

el_axai에서 흡수한 다크 섹션 조합입니다. e-dark + e-grid-bg(그리드 텍스처) + e-glow(글로우) + e-eyebrow(눈썹 배지).

AX — AI Transformation

매일 반복하는 그 업무,
AI가 대신하게 하세요

어떤 업무를 맡길 수 있는지 진단해 드리고, 실제로 돌아가는 시스템까지 만들어 드립니다.

무료 진단 받기 활용법 보기

롤링 텍스트 히어로

el_imin의 시그니처. 타깃 고객의 상황을 3문장으로 순환 호명합니다. 문장이 3개일 때 높이가 맞습니다.

AI가 대신하게 하세요

접근성 노트: 롤링 영역에는 aria-hidden을 적용하고, 스크린리더용 고정 문장을 별도로 제공하세요.

프로모션 밴드

섹션 사이 호흡을 만드는 풀폭 밴드. 한 줄 카피 + CTA 하나.

CTA 박스

페이지 하단 전환 유도 블록입니다. e-cta 하나로 다크 배경과 글로우가 내장됩니다.

무료로 진단해 드립니다

상담했다고 꼭 진행하실 필요는 없습니다.

무료 업무 진단 신청

스탯 행

신뢰 지표. 3~4개를 한 행에 배열합니다.

25+

년의 구축 경력

2000년부터

500+

완료 프로젝트

기업·기관·병의원

1:1

대표 직접 상담

영업사원 없음

스크롤 리빌

뷰포트 진입 시 떠오르는 등장 모션. --d 변수로 카드마다 시차(스태거)를 줍니다.

첫 번째

--d: 0s

두 번째

--d: .1s

세 번째

--d: .2s

구현 참고: 레이아웃에 IntersectionObserver 스크립트가 필요합니다. .e-reveal 요소에 뷰포트 진입 시 .is-in 클래스를 부여하세요. 모션 최소화 설정에서는 자동으로 꺼집니다.

호버 리프트 카드

그리드에서 올린 카드만 떠오릅니다. hover 상태에서 6px 위로 올라가며 확대됩니다.

빠른 구축

기존 이온디 호스팅 인프라에서 지원합니다. 별도 설정 없이 즉시 사용 가능합니다.

안정성

25년 이상의 웹 구축 경험을 바탕으로 한 검증된 기술 스택입니다.

지원

문제 발생 시 이온디 기술 팀이 직접 지원합니다. 응답 시간은 1시간 이내입니다.

패턴