영단어 학습 화면에서 정의 보기와 예문 노출을 분리한 이유
단어, 정의, 예문을 한 번에 보여주지 않고 사용자의 학습 흐름에 맞춰 단계적으로 노출한 이유를 정리합니다.
문제 상황
영단어 학습 화면에서는 단어, 뜻, 예문, 부가 설명을 모두 보여줄 수 있습니다. 하지만 정보를 한 화면에 한 번에 다 보여주면 사용자는 읽기만 하고 넘어가기 쉽습니다. 학습 화면에서는 정보량보다 사용자가 어떤 순서로 생각하게 만들지가 더 중요했습니다.
처음 화면에서는 단어를 크게 보여주고, 정의는 버튼을 눌렀을 때 확인할 수 있게 했습니다. 예문은 그 아래에 배치하되, 핵심 단어가 문장 안에서 어떻게 쓰이는지 강조했습니다.
정의를 바로 펼치지 않은 이유
정의를 처음부터 보여주면 사용자는 단어를 보자마자 의미를 확인합니다. 이 방식은 편하지만, 기억을 떠올리는 시간이 줄어듭니다.
그래서 Click for definition처럼 사용자가 한 번 멈추고 눌러보게 만들었습니다.
작은 클릭이지만 학습 흐름에서는 차이가 있습니다.
type DefinitionState = {
revealed: boolean;
};
상태는 단순합니다. 정의를 열었는지 여부만 관리하면 됩니다.
{definition.revealed ? (
<p>{word.definition}</p>
) : (
<button onClick={revealDefinition}>Click for definition</button>
)}
이 구조는 복잡하지 않지만, 사용자가 단어를 먼저 보고 스스로 떠올릴 여지를 만들어줍니다.
예문은 항상 문맥으로 보여주기
정의와 달리 예문은 학습 흐름에서 바로 보이게 두었습니다. 단어의 의미는 사전식 설명보다 문장 안에서 더 잘 이해되는 경우가 많기 때문입니다.
예문에서는 학습 대상 단어를 강조했습니다.
function HighlightedExample({ sentence, word }: Props) {
return sentence.split(word).map((part, index, list) => (
<Fragment key={index}>
{part}
{index < list.length - 1 && <mark>{word}</mark>}
</Fragment>
));
}
실제 구현에서는 대소문자나 파생형까지 고려해야 하지만, 핵심은 문장 전체를 숨기지 않는 것입니다. 정의는 기억을 떠올리기 위해 숨길 수 있지만, 예문은 의미를 추론하는 재료이기 때문입니다.
화면 밀도 조절
단어 자체는 가장 크게 보여주고, 정의 버튼은 그보다 작게 두었습니다. 예문 영역은 선으로 구분해 학습 대상 단어와 문맥을 분리했습니다.
이렇게 한 이유는 사용자의 시선 순서를 고정하기 위해서입니다.
- 단어를 먼저 본다.
- 의미를 떠올린다.
- 필요하면 정의를 확인한다.
- 예문으로 실제 사용 맥락을 본다.
UI는 이 순서를 방해하지 않는 정도로만 존재해야 합니다.
정리
영단어 학습 화면에서 중요한 것은 정보를 많이 보여주는 것이 아니라, 사용자가 어떤 순서로 생각하게 만들지입니다.
제가 정리한 기준은 다음과 같습니다.
- 단어는 화면의 가장 강한 요소로 둔다.
- 정의는 사용자가 원할 때 펼치게 한다.
- 예문은 의미를 추론하는 재료이므로 바로 제공한다.
- 예문 안의 핵심 단어는 시각적으로 강조한다.
- 화면 밀도는 학습 순서를 기준으로 조절한다.
이 방식은 이후 동의어, 반의어, 빈칸 퀴즈 같은 단계와도 잘 이어졌습니다. 사용자가 단어를 먼저 보고, 의미를 확장하고, 마지막에 문제로 확인하는 흐름을 만들 수 있었기 때문입니다.