• 플러그인 업데이트 Process Steps Widget

플러그인 업데이트 Process Steps Widget

작성일 2025년 12월 29일 작성자 KTheme
# Process Steps Widget – 프로세스 단계 시각화의 완성

들어가며

복잡한 프로세스나 단계별 절차를 시각적으로 설명하는 것은 사용자 경험에서 매우 중요합니다. 케이테마 프리미엄 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. 위젯 추가

  1. Elementor 편집기에서 “Process Steps” 위젯 찾기
  2. 위젯 아이콘: 수평 네비게이션 모양
  3. 카테고리: K-Theme Premium
  4. 페이지에 드래그 앤 드롭

2. 단계 섹션

단계 아이템 추가하기

  1. “아이템 추가” 버튼 클릭
  2. 각 단계마다 설정:
    • 표시 타입 – 번호 / 아이콘 / 둘 다
    • 아이콘 – FontAwesome 아이콘 선택 (아이콘 모드)
    • 제목 – 단계 제목 (예: “기획 단계”)
    • 설명 – 단계 설명 (HTML 지원)
  3. 드래그하여 순서 변경 가능

예시

단계 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

단계:

  1. 상담 및 분석
  2. 기획 및 디자인
  3. 개발 및 테스트
  4. 런칭 및 지원

결과: 명확한 화살표로 진행 방향을 나타내는 전문적인 프로세스 다이어그램

예제 2: 제품 제작 단계 (5단계, 아이콘)

설정:

  • 표시 타입: 아이콘
  • Separator 스타일: Dashed
  • Circle 크기: 80px
  • Step Gap: 30px
  • 정렬: Top
  • Circle 배경: 그라디언트 (#667eea → #764ba2)
  • Title 크기: 18px, Medium
  • Description 크기: 14px, Light

단계:

  1. 아이디어 (fa-lightbulb) – 창의적인 아이디어 발굴
  2. 설계 (fa-pencil-ruler) – 상세한 설계도 작성
  3. 시제품 (fa-hammer) – 시제품 제작 및 테스트
  4. 생산 (fa-industry) – 대량 생산 시작
  5. 출시 (fa-rocket) – 시장 출시 및 마케팅

결과: 시각적으로 명확한 아이콘과 부드러운 파선으로 유연한 프로세스 표현

예제 3: 간단한 3단계 프로세스 (미니멀)

설정:

  • 표시 타입: 번호
  • Separator 스타일: None
  • Circle 크기: 50px
  • Step Gap: 60px
  • 정렬: Stretch
  • Circle 배경: 흰색
  • Circle 테두리: 3px, Primary Color
  • Circle 텍스트: Primary Color
  • Title 크기: 16px, Bold
  • Description: 숨김

단계:

  1. 신청
  2. 검토
  3. 승인

결과: 구분선 없이 깔끔하고 미니멀한 3단계 프로세스

예제 4: 복합 표시 (번호 + 아이콘)

설정:

  • 표시 타입: 둘 다 (번호 + 아이콘)
  • Separator 스타일: Line
  • Circle 크기: 90px
  • Step Gap: 35px
  • 정렬: Middle
  • Circle 배경: 진한 회색 (#343a40)
  • Circle 테두리: 없음
  • Box Shadow: 0px 4px 15px rgba(0,0,0,0.2)

단계:

  1. (fa-user-plus) 회원가입
  2. (fa-check-circle) 이메일 인증
  3. (fa-user-edit) 프로필 작성
  4. (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:

  1. 표시 타입이 “아이콘” 또는 “둘 다”로 설정되었는지 확인
  2. FontAwesome 라이브러리가 로드되었는지 확인
  3. 아이콘을 다시 선택해보기
  4. 페이지 새로고침

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을 활용해보세요!

«
페이팔 구매시 USD를 선택하세요
KRW 한국 원화
USD 미국 달러