들어가며
복잡한 프로세스나 단계별 절차를 시각적으로 설명하는 것은 사용자 경험에서 매우 중요합니다. 케이테마 프리미엄 Process Steps Widget은 서비스 제공 절차, 제품 제작 과정, 업무 프로세스 등을 직관적으로 표현할 수 있는 강력한 도구입니다.
이번 업데이트에서는 step-separator 간격 로직을 개선하여, 각 단계 사이의 구분선이 균일한 간격을 유지하도록 최적화했습니다.
주요 기능
1. 세 가지 표시 타입
번호 (Number)
- 1, 2, 3… 순차적 번호 표시
- 깔끔하고 전통적인 스타일
- 비즈니스 프로세스에 적합
아이콘 (Icon)
- FontAwesome 아이콘 사용
- 시각적으로 명확한 표현
- 창의적인 디자인 가능
번호 + 아이콘 (Both)
- 번호와 아이콘 동시 표시
- 가장 상세한 표현
- 복잡한 프로세스에 적합
2. 구분선 스타일 (4가지)
Line (실선)
- 기본 실선 구분
- 모던하고 깔끔
- 대부분의 디자인과 어울림
Dashed (파선)
- 점선 구분
- 부드럽고 캐주얼한 느낌
- 프로세스가 유연함을 표현
Arrow (화살표)
- → 화살표 모양
- 진행 방향 명확히 표시
- 흐름을 강조
None (없음)
- 구분선 표시 안 함
- 미니멀 디자인
- 단계별 독립성 강조
3. 정렬 옵션 (4가지)
- Top – 상단 정렬 (원/번호 기준)
- Middle – 중앙 정렬 (기본값)
- Bottom – 하단 정렬
- Stretch – 균등 분배
4. 완전한 반응형
- 데스크톱/태블릿/모바일 별도 설정
- 원 크기 자동 조절
- 간격 반응형 적용
- 텍스트 크기 자동 최적화
최신 업데이트 (v2.0.1)
Step Separator 간격 로직 개선
문제점 (이전 버전)
이전 버전에서는 step-separator 요소가 step-wrapper 안에 중첩되어 있었고, 고정된 margin-left: 20px를 사용했습니다. 이로 인해:
- 사용자가 Elementor에서 설정한 Step Gap 값이 무시됨
- 단계 요소와 구분선 사이의 간격이 불균일
- 반응형 디바이스에서 간격 조절 어려움
해결 방법 (v2.0.1)
1. HTML 구조 개선:
<div class="step-wrapper">
<div class="step-circle">...</div>
<div class="step-content">...</div>
<div class="step-separator">...</div>
</div>
<div class="step-wrapper">
<div class="step-circle">...</div>
<div class="step-content">...</div>
</div>
<div class="step-separator">...</div>2. CSS 개선:
/* 변경 전 */
.step-separator {
margin-left: 20px; /* 고정값 */
}
/* 변경 후 */
.step-separator {
flex-shrink: 0; /* 부모 gap으로 간격 관리 */
}
.ktheme-steps-container {
gap: {{SIZE}}{{UNIT}}; /* Elementor 설정값 적용 */
}개선 효과
- 일관된 간격 – 모든 요소가 균일한 간격 유지
- 사용자 제어 – Elementor에서 설정한 간격 정확히 적용
- 반응형 개선 – 디바이스별 간격 조절 용이
- 유지보수 향상 – CSS 변수 중앙 관리
Elementor에서 설정하기
1. 위젯 추가
- Elementor 편집기에서 “Process Steps” 위젯 찾기
- 위젯 아이콘: 수평 네비게이션 모양
- 카테고리: K-Theme Premium
- 페이지에 드래그 앤 드롭
2. 단계 섹션
단계 아이템 추가하기
- “아이템 추가” 버튼 클릭
- 각 단계마다 설정:
- 표시 타입 – 번호 / 아이콘 / 둘 다
- 아이콘 – FontAwesome 아이콘 선택 (아이콘 모드)
- 제목 – 단계 제목 (예: “기획 단계”)
- 설명 – 단계 설명 (HTML 지원)
- 드래그하여 순서 변경 가능
예시
단계 1:
- 표시 타입: 번호
- 제목: 상담 및 기획
- 설명: 고객님의 요구사항을 분석하고 최적의 솔루션을 제안합니다.
단계 2:
- 표시 타입: 번호
- 제목: 디자인 개발
- 설명: 브랜드 아이덴티티에 맞는 디자인을 제작합니다.
단계 3:
- 표시 타입: 번호
- 제목: 개발 및 테스트
- 설명: 최신 기술로 개발하고 철저히 테스트합니다.
단계 4:
- 표시 타입: 번호
- 제목: 런칭 및 유지보수
- 설명: 성공적인 런칭과 지속적인 관리를 제공합니다.
3. 레이아웃 섹션
Separator 스타일
- Line – 실선 (─────)
- Dashed – 파선 (- – – – -)
- Arrow – 화살표 (→)
- None – 없음
Circle 크기
- 40px ~ 150px (기본값: 60px)
- 번호/아이콘이 들어갈 원의 크기
- 제목 크기와 균형 맞추기
Step Gap (단계 간격)
- 0px ~ 100px (기본값: 30px)
- 데스크톱/태블릿/모바일 별도 설정 가능
- 각 단계 요소와 구분선 사이의 균일한 간격
정렬
- Top – 상단 정렬
- Middle – 중앙 정렬 (기본값)
- Bottom – 하단 정렬
- Stretch – 균등 분배
스타일 탭 설정
1. Circle (원) 스타일
Circle 색상
- 배경색 – 원의 배경색 (기본: Primary Color)
- 텍스트/아이콘 색상 – 번호/아이콘 색상 (기본: 흰색)
Circle 테두리
- 테두리 타입 – 없음/실선/파선/점선/이중선
- 테두리 굵기 – 1px ~ 10px
- 테두리 색상 – 색상 선택
- Border Radius – 0px (사각형) ~ 50% (원형)
Circle 그림자
- Box Shadow – 깊이감 추가
- X/Y 오프셋, Blur, Spread, 색상 조절
Typography
- 폰트 패밀리 – 기본/커스텀 폰트
- 폰트 크기 – 16px ~ 48px (기본: 24px)
- 폰트 굵기 – Light ~ Black
- 줄 높이 – 조절 가능
2. Title (제목) 스타일
색상
- 텍스트 색상 – 제목 색상
- 호버 색상 – 마우스 오버 시 색상 변경 (선택 사항)
Typography
- 폰트 패밀리
- 폰트 크기 – 14px ~ 36px (기본: 18px)
- 폰트 굵기 – Regular, Medium, Bold 등
- Text Transform – 대문자/소문자 변환
- 줄 높이
- Letter Spacing – 자간
간격
- Margin – 상하좌우 마진
- Padding – 상하좌우 패딩
3. Description (설명) 스타일
색상
- 텍스트 색상 – 설명 색상 (기본: 회색)
Typography
- 폰트 패밀리
- 폰트 크기 – 12px ~ 24px (기본: 14px)
- 폰트 굵기 – 보통 Light 또는 Regular
- 줄 높이 – 가독성 위해 1.6 ~ 1.8 권장
간격
- Margin – 상하좌우 마진
4. Separator (구분선) 스타일
색상
- 선 색상 – 구분선 색상
크기
- 선 굵기 – 1px ~ 5px (기본: 2px)
- 선 길이 – 10px ~ 100px (기본: 40px)
Arrow (화살표 모드)
- 화살표 크기 – 16px ~ 48px
- 화살표 색상 – 색상 선택
5. Container (컨테이너) 스타일
배경
- 배경색 – 전체 컨테이너 배경
- 배경 이미지 – 선택 사항
간격
- Padding – 상하좌우 내부 여백
- Margin – 상하좌우 외부 여백
테두리
- 테두리 타입 – 없음/실선/파선 등
- Border Radius – 모서리 둥글기
그림자
- Box Shadow – 컨테이너 그림자
실전 활용 예제
예제 1: 서비스 제공 프로세스 (4단계)
설정:
- 표시 타입: 번호
- Separator 스타일: Arrow
- Circle 크기: 70px
- Step Gap: 40px
- 정렬: Middle
- Circle 배경: Primary Color (#0d6efd)
- Circle 텍스트: 흰색
- Title 크기: 20px, Bold
- Description 크기: 15px, Regular
단계:
- 상담 및 분석
- 기획 및 디자인
- 개발 및 테스트
- 런칭 및 지원
결과: 명확한 화살표로 진행 방향을 나타내는 전문적인 프로세스 다이어그램
예제 2: 제품 제작 단계 (5단계, 아이콘)
설정:
- 표시 타입: 아이콘
- Separator 스타일: Dashed
- Circle 크기: 80px
- Step Gap: 30px
- 정렬: Top
- Circle 배경: 그라디언트 (#667eea → #764ba2)
- Title 크기: 18px, Medium
- Description 크기: 14px, Light
단계:
- 아이디어 (fa-lightbulb) – 창의적인 아이디어 발굴
- 설계 (fa-pencil-ruler) – 상세한 설계도 작성
- 시제품 (fa-hammer) – 시제품 제작 및 테스트
- 생산 (fa-industry) – 대량 생산 시작
- 출시 (fa-rocket) – 시장 출시 및 마케팅
결과: 시각적으로 명확한 아이콘과 부드러운 파선으로 유연한 프로세스 표현
예제 3: 간단한 3단계 프로세스 (미니멀)
설정:
- 표시 타입: 번호
- Separator 스타일: None
- Circle 크기: 50px
- Step Gap: 60px
- 정렬: Stretch
- Circle 배경: 흰색
- Circle 테두리: 3px, Primary Color
- Circle 텍스트: Primary Color
- Title 크기: 16px, Bold
- Description: 숨김
단계:
- 신청
- 검토
- 승인
결과: 구분선 없이 깔끔하고 미니멀한 3단계 프로세스
예제 4: 복합 표시 (번호 + 아이콘)
설정:
- 표시 타입: 둘 다 (번호 + 아이콘)
- Separator 스타일: Line
- Circle 크기: 90px
- Step Gap: 35px
- 정렬: Middle
- Circle 배경: 진한 회색 (#343a40)
- Circle 테두리: 없음
- Box Shadow: 0px 4px 15px rgba(0,0,0,0.2)
단계:
- (fa-user-plus) 회원가입
- (fa-check-circle) 이메일 인증
- (fa-user-edit) 프로필 작성
- (fa-check-double) 가입 완료
결과: 번호와 아이콘을 함께 표시하여 가장 상세하고 전문적인 프로세스 다이어그램
반응형 동작
데스크톱 (≥1024px)
- 모든 단계가 가로로 일렬 배치
- Circle 크기: 설정값 (기본 60px)
- Step Gap: 설정값 (기본 30px)
- 설명 텍스트: 전체 표시
태블릿 (768-1023px)
- 가로 배치 유지
- Circle 크기: 약 80% (48px)
- Step Gap: 약 75% (22px)
- 설명 텍스트: 줄 높이 조정
- 폰트 크기: 약 90%
모바일 (<768px)
- 세로 배치로 자동 전환
- Circle 크기: 약 70% (42px)
- Step Gap: 20px
- Separator: 세로 방향 표시 (Arrow는 아래 방향)
- 설명 텍스트: 짧게 요약 권장
디자인 팁
1. 단계 수에 따른 권장 설정
3단계 이하
- Circle 크기: 70-90px (크게)
- Step Gap: 50-70px (넓게)
- 설명 많이 작성 가능
- Separator: Arrow 또는 None
4-5단계
- Circle 크기: 60-70px (보통)
- Step Gap: 30-40px (적당히)
- 설명 적절히 작성
- Separator: Line 또는 Arrow
6단계 이상
- Circle 크기: 50-60px (작게)
- Step Gap: 20-30px (좁게)
- 설명 간략히 또는 생략
- Separator: Line 또는 Dashed
2. 색상 조합 추천
비즈니스/전문적
- Circle 배경: #0d6efd (파랑) 또는 #6c757d (회색)
- Circle 텍스트: #ffffff (흰색)
- Title: #212529 (진한 회색)
- Description: #6c757d (중간 회색)
- Separator: #dee2e6 (연한 회색)
모던/창의적
- Circle 배경: 그라디언트 (#667eea → #764ba2)
- Circle 텍스트: #ffffff
- Title: #343a40 (진한 회색)
- Description: #6c757d
- Separator: #667eea (그라디언트 시작 색)
미니멀/클린
- Circle 배경: #ffffff (흰색)
- Circle 테두리: 2-3px, #0d6efd
- Circle 텍스트: #0d6efd
- Title: #000000 (검정)
- Description: #6c757d
- Separator: None 또는 #e9ecef (매우 연한 회색)
3. Typography 조합
제목 강조형
- Title: 20px, Bold
- Description: 14px, Light
- Circle 번호: 28px, Bold
균형형
- Title: 18px, Medium
- Description: 15px, Regular
- Circle 번호: 24px, Medium
설명 강조형
- Title: 16px, Medium
- Description: 16px, Regular
- Circle 번호: 22px, Medium
접근성 및 성능
접근성
- 시맨틱 HTML – 올바른 구조 사용
- ARIA 레이블 – 스크린 리더 지원
- 키보드 네비게이션 – Tab 키로 이동 가능
- 고대비 모드 – 색상 대비 충분히 확보
- 대체 텍스트 – 아이콘에 의미 전달
성능 최적화
- CSS Flexbox – GPU 가속 레이아웃
- 최소 DOM – 불필요한 요소 제거
- CSS 변수 – 동적 스타일링
- FontAwesome 최적화 – 사용 아이콘만 로드
자주 묻는 질문 (FAQ)
Q1. 세로 레이아웃으로 변경할 수 있나요?
A: 기본적으로 가로 레이아웃이지만, CSS 커스텀 코드로 세로 레이아웃을 만들 수 있습니다. 또는 모바일 미리보기에서 세로 레이아웃을 확인할 수 있습니다.
Q2. 단계 간격이 적용되지 않아요.
A: v2.0.1 업데이트를 적용했는지 확인하세요. 이전 버전에서는 고정 마진으로 인해 간격이 제대로 적용되지 않았습니다. 업데이트 후에는 Step Gap 설정이 정확히 반영됩니다.
Q3. 아이콘이 표시되지 않아요.
A:
- 표시 타입이 “아이콘” 또는 “둘 다”로 설정되었는지 확인
- FontAwesome 라이브러리가 로드되었는지 확인
- 아이콘을 다시 선택해보기
- 페이지 새로고침
Q4. 번호와 아이콘을 같이 표시하면 너무 작아요.
A: “둘 다” 모드를 사용할 때는 Circle 크기를 80-100px로 크게 설정하는 것을 권장합니다. 폰트 크기도 조절하여 가독성을 높이세요.
Q5. 모바일에서 레이아웃이 깨져요.
A: 반응형 설정을 확인하세요. 모바일에서는 자동으로 세로 레이아웃으로 전환되며, Circle 크기와 Step Gap이 자동 조절됩니다. 설명 텍스트가 너무 길면 간략히 줄이는 것을 권장합니다.
호환성
필수 요구사항
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
브라우저 지원
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- iOS Safari 14+
- Chrome Android 90+
마무리
Process Steps Widget은 복잡한 프로세스를 직관적으로 시각화하여 사용자 이해도를 크게 높입니다. v2.0.1 업데이트로 step-separator 간격 로직이 개선되어, 이제 Elementor에서 설정한 간격이 모든 요소에 균일하게 적용됩니다.
4가지 Separator 스타일, 3가지 표시 타입, 완전한 반응형 지원으로 어떤 디자인에도 완벽하게 어울리는 프로세스 다이어그램을 만들 수 있습니다. 서비스 소개, 제품 제작 과정, 업무 프로세스 등 다양한 상황에서 활용해보세요!
다음 단계
- 여러분의 비즈니스 프로세스 정리하기
- 각 단계별 명확한 제목과 설명 작성하기
- 브랜드 색상에 맞게 스타일 커스터마이징하기
- A/B 테스팅으로 최적의 디자인 찾기
관련 문서
더 나은 사용자 경험을 위해 Process Steps Widget을 활용해보세요!
