들어가며

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

관련 문서