진행 상황을 시각화하는 타임라인 UI 만들기 (JavaScript 기반)

 

 

웹에서 사용자의 위치와 진행 상태를 명확하게 보여주는 UI는 사용자 경험에 큰 영향을 줍니다. 특히 CAD와 같은 기술 자료를 제공하는 페이지에서는 “지금 내가 어떤 단계에 있는지”를 직관적으로 인식할 수 있어야 하죠. 이번 글에서는 JavaScript와 CSS만으로 구현하는 진행 단계 타임라인 UI를 소개합니다.

 

💡 직접 활용한 예시는 현재 CAD 페이지의 흐름

STEP 1: CAD 파일 준비 >> STEP 2: CAD 파일 검토 >>  STEP 3: 승인 대기 >>  STEP 4: 다운로드 가능

 

STEP 1과 STEP 2는 이미지가 이미 등록된 완료 단계로 같은 색상으로 그룹화하고, 승인 대기 상태인 STEP 3는 강조 애니메이션으로 표현해 사용자의 주의를 끌 수 있도록 구성해 봤습니다.

 

✅ 주요 기능 요약

• 스텝1, 스텝2는 동일한 색상으로 그룹화 (예: 완료된 단계)
• 현재 진행 중인 스텝은 강조 애니메이션 적용
• 마우스 오버 시 툴팁으로 상세 설명 제공
• 반응형 디자인으로 모바일 대응

 

🧩 HTML 구조 예시

 

<div class="timeline">
  <div class="step completed">STEP 1<br><span>CAD 파일 준비</span></div>
  <div class="step completed">STEP 2<br><span>CAD 파일 검토</span></div>
  <div class="step active">STEP 3<br><span>승인 대기</span></div>
  <div class="step">STEP 4<br><span>다운로드 가능</span></div>
</div>

 

🎨 CSS 디자인 포인트

 

.timeline {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}
.step {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-bottom: 4px solid #ccc;
  position: relative;
}
.step.completed {
  border-color: #4CAF50; /* 완료된 스텝 색상 */
  color: #4CAF50;
}
.step.active {
  border-color: #FF9800;
  color: #FF9800;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

 

💡 활용 예시: CAD 데이터 다운로드 흐름

• STEP 1~2: 이미지가 이미 등록된 상태 → 같은 색상으로 그룹 처리
• STEP 3: 승인 대기 상태 → 강조 애니메이션
• STEP 4: 다운로드 가능 → 회색 처리

이런 방식으로 실제 3D CAD 데이터 페이지의 흐름을 시각화하면, 사용자에게 현재 위치를 명확히 전달할 수 있어요.

 

 

자바스크립트로 구현하는 인터랙티브 타임라인 UI – CAD 페이지 흐름에 적용하기

기존에는 정적인 타임라인 UI를 HTML과 CSS만으로 구성했지만, 이번에는 사용자의 상호작용에 따라 진행 단계를 제어하거나 애니메이션을 제어할 수 있는 동적 타임라인으로 확장해 봅니다.

 

⚙ JavaScript 코드 예시

// 초기 상태 가져오기
let currentStep = parseInt(localStorage.getItem('currentStep')) || 1;
const steps = document.querySelectorAll('.step');

function renderSteps(step) {
  steps.forEach((el, i) => {
    el.classList.remove('completed', 'active');
    if (i < step - 1) el.classList.add('completed'); // 이전 단계
    else if (i === step - 1) el.classList.add('active'); // 현재 단계
  });
}

renderSteps(currentStep);

// 클릭 이벤트로 단계 이동
steps.forEach((el, i) => {
  el.addEventListener('click', () => {
    currentStep = i + 1;
    localStorage.setItem('currentStep', currentStep);
    renderSteps(currentStep);
  });
});

 

이 코드는 사용자 클릭으로 진행 단계를 업데이트하고, 다음 방문 시에도 이전 상태를 유지할 수 있게 해줍니다.

 

💡 적용 아이디어: 클릭으로 단계 전환 + 저장 기능

1. 사용자가 STEP 1~4 중 하나를 클릭하면 해당 단계로 진행 상태 업데이트
2. 진행 상태는 localStorage에 저장돼 다음 접속 시에도 유지
3. 특정 조건(API 응답 등)에 따라 자동으로 단계 전환 가능

 

✔ 타임라인 UI의 핵심 기능

• 완료된 단계(STEP 1~2)는 동일한 색상과 아이콘으로 그룹 처리
• 진행 중인 단계(STEP 3)는 컬러 강조 + 애니메이션 효과
• 대기 상태(STEP 4)는 흐린 색으로 시각적 대비
• 반응형 레이아웃으로 모바일에서도 잘 작동
• 스크린리더 사용자를 위한 접근성 속성(aria-label, role) 포함

 

🌐 접근성을 고려한 설계 포인트

 

요즘은 단순한 시각적 만족을 넘어서, 모든 사용자에게 정보를 동등하게 전달하는 것이 중요합니다.

이 타임라인 컴포넌트에도 다음과 같은 접근성 요소를 반영했습니다:

• 각 단계에 role="listitem"과 aria-label 적용: 스크린리더가 각 상태를 읽을 수 있게 함
• 색상 외에 ✔/⏳ 등의 텍스트 혹은 아이콘으로 상태 구분
• 충분한 색 대비 확보 (WCAG 기준 4.5:1 이상)
• 향후에는 키보드 접근성(tab 키 지원)도 추가할 계획

 

✅ 접근성 고려 HTML 예제

<section aria-labelledby="timeline-heading">
  <h2 id="timeline-heading">진행 단계 타임라인</h2>
  <ol class="timeline" role="list" aria-label="CAD 파일 다운로드 진행 단계">
    <li class="step completed" role="listitem" aria-label="STEP 1 완료: CAD 파일 준비">
      <span class="visually-hidden">✔</span>
      <strong>STEP 1</strong>: CAD 파일 준비
    </li>
    <li class="step completed" role="listitem" aria-label="STEP 2 완료: CAD 파일 검토">
      <span class="visually-hidden">✔</span>
      <strong>STEP 2</strong>: CAD 파일 검토
    </li>
    <li class="step active" role="listitem" aria-label="STEP 3 진행중: 승인 대기">
      <span class="visually-hidden">⏳</span>
      <strong>STEP 3</strong>: 승인 대기
    </li>
    <li class="step" role="listitem" aria-label="STEP 4 예정: 다운로드 가능">
      <span class="visually-hidden">⬜</span>
      <strong>STEP 4</strong>: 다운로드 가능
    </li>
  </ol>
</section>

 

🌐 주요 접근성 포인트

• <ol> 태그 사용 → 단계의 순서를 의미적으로 표현
• aria-label, role="list" / listitem" 속성 → 스크린리더가 각 단계를 정확히 안내
• 상태 아이콘(✔, ⏳, ⬜) 텍스트 숨김 처리 → <span class="visually-hidden">으로 시각 장애 사용자에게 설명 제공
• aria-labelledby를 통해 타임라인 제목 연결

 

💡 시각적으로 숨긴 텍스트 처리 CSS 예시

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

 

이렇게 구성하면 디자인을 해치지 않으면서도 보조 기술을 사용하는 분들에게 친절한 UI가 됩니다. 😄

 

🧑‍💻 시나리오 적용 예 (CAD 다운로드 페이지)

• 사용자가 STEP 2(CAD 이미지 업로드)를 완료하면 자동으로 STEP 3으로 넘어감
• 관리자 계정에서는 승인 시 자동 STEP 4로 전환 + 다운로드 버튼 활성화
• 이미지를 업로드했는지 여부는 API 상태값을 통해 감지 가능

 

🔐 추가 기능 아이디어 (확장 가능)

• 버튼 클릭 시 서버에 상태 업데이트 요청 (fetch 이용)
• 접근 제어: 로그인한 사용자만 특정 단계 진행 가능
• 상태별로 시간 기록 저장 (예: 승인 대기 시간이 오래 걸릴 경우 표시)

 

📝 마무리하며

이처럼 간단한 타임라인 컴포넌트 하나만으로도 사용자의 경험을 한층 높일 수 있습니다.

특히 CAD와 같이 단계별 흐름이 명확한 서비스라면 더욱 적합하죠.

그리고 JavaScript를 더하면 단순히 “보여주는 UI”를 넘어서 

사용자와의 상호작용을 기반으로 단계가 변경되는 실시간 인터페이스를 만들 수 있어요.