Voca Study에서 주차별 학습 진행률을 단계형 UI로 표현한 방법
영단어 학습 서비스에서 현재 주차, 단계 진행률, 남은 흐름을 한눈에 보여주기 위해 진행률 UI를 설계한 기준을 정리합니다.
문제 상황
영단어 학습 화면은 사용자가 지금 어디까지 왔는지 계속 알려줘야 합니다. 단어를 보고, 뜻을 확인하고, 예문을 읽고, 의미를 확장하고, 퀴즈를 푸는 흐름이 이어지기 때문입니다.
처음에는 단순한 숫자 진행률만 생각했습니다.
예를 들어 3 / 10처럼 현재 단계와 전체 단계를 보여주는 방식입니다.
하지만 이 방식만으로는 사용자가 지금 학습의 어느 구간에 있는지 직관적으로 알기 어렵습니다.
특히 주차별 학습처럼 여러 단계가 반복되는 구조에서는 숫자보다 시각적인 구간 표시가 더 잘 맞았습니다.
단계형 진행률로 바꾼 이유
학습 플로우는 하나의 긴 페이지가 아니라 여러 작은 단계로 나뉘어 있었습니다. 그래서 상단에 얇은 progress segment를 두고, 현재 단계만 강조하는 방식으로 구성했습니다.
type StudyStep = {
id: string;
title: string;
completed: boolean;
active: boolean;
};
각 단계는 완료 여부와 현재 활성 상태만 알면 됩니다. 진행률 UI는 이 데이터를 받아 segment 색상과 길이를 결정합니다.
function ProgressSegments({ steps }: { steps: StudyStep[] }) {
return (
<div className="progress">
{steps.map((step) => (
<span
key={step.id}
className={step.active || step.completed ? "is-active" : "is-idle"}
/>
))}
</div>
);
}
구현 자체는 단순하지만 효과는 컸습니다. 사용자는 지금 단계가 앞쪽인지, 중간인지, 거의 끝났는지 바로 알 수 있습니다.
현재 주차와 단계 제목 분리
상단에는 Week 01 같은 큰 흐름과, 현재 단계 제목을 함께 보여주었습니다.
둘을 하나의 문자열로 합치지 않고 분리한 이유는 역할이 다르기 때문입니다.
- Week: 학습 묶음의 기준
- Step title: 현재 해야 할 작업
- Progress segment: 전체 흐름에서의 위치
이 세 가지가 분리되어 있어야 화면이 바뀌어도 구조가 흔들리지 않습니다.
예를 들어 Expand the Meaning, Fill in the Blanks 같은 단계 제목이 바뀌어도 주차 정보와 진행률은 그대로 유지됩니다.
시간 정보와 함께 배치하기
학습 화면에는 타이머도 함께 필요했습니다. 다만 타이머를 너무 크게 보여주면 학습 내용보다 시간이 더 중요해 보입니다. 그래서 우측 상단에 작게 배치하고, 진행률과 같은 줄에서 보조 정보처럼 보이게 했습니다.
타이머는 사용자의 긴장감을 만들 수 있으므로, 시각적으로는 절제하는 편이 낫다고 봤습니다. 학습의 중심은 단어와 예문이고, 타이머는 현재 세션을 인지하게 해주는 보조 정보입니다.
정리
학습 서비스의 진행률은 단순히 몇 퍼센트인지 알려주는 요소가 아닙니다. 사용자가 지금 어느 흐름에 있고, 얼마나 남았는지 감각적으로 이해하게 만드는 장치입니다.
정리한 기준은 다음과 같습니다.
- 숫자 진행률보다 단계형 segment가 학습 흐름에 잘 맞는다.
- 주차, 단계 제목, 진행률은 역할을 분리한다.
- 현재 단계만 강하게 강조하고 나머지는 조용하게 둔다.
- 타이머는 보조 정보로 배치한다.
- 진행 상태는 UI 전용 상태로 단순하게 관리한다.
이 구조를 잡아두면 이후 퀴즈, 예문, 의미 확장 화면이 추가되어도 상단 진행률은 같은 방식으로 재사용할 수 있습니다.