동의어와 반의어를 함께 보여주는 단어 의미 확장 UI 설계
단어의 뜻만 외우는 화면에서 벗어나 동의어, 반의어, 예문을 함께 배치해 의미를 확장한 UI 설계 기준을 정리합니다.
문제 상황
영단어를 외울 때 단어 하나와 뜻 하나만 연결하면 기억이 얕게 남기 쉽습니다. 특히 추상적인 단어는 한국어 뜻 하나로는 뉘앙스를 충분히 설명하기 어렵습니다.
그래서 단어의 의미를 확장하는 단계에서는 동의어와 반의어를 함께 보여주는 화면을 구성했습니다. 예를 들어 중심 단어를 가운데에 두고, 왼쪽에는 비슷한 의미, 오른쪽에는 반대 의미를 배치하는 방식입니다.
중심 단어를 고정하기
의미 확장 화면에서 가장 중요한 것은 중심 단어를 잃지 않는 것입니다. 동의어와 반의어가 추가되면 화면에 정보가 많아지고, 사용자는 어떤 단어를 기준으로 보고 있는지 헷갈릴 수 있습니다.
그래서 중심 단어는 화면 중앙에 크게 고정했습니다. 동의어와 반의어는 중심 단어를 설명하는 보조 정보로 배치했습니다.
type MeaningExpansion = {
target: WordItem;
synonym: WordItem;
antonym: WordItem;
};
데이터 구조도 target을 기준으로 두었습니다. 동의어와 반의어는 각각 별도 카드처럼 보이지만, 실제로는 target을 설명하기 위한 관계 데이터입니다.
좌우 대비로 의미 차이 만들기
동의어와 반의어는 단순 목록보다 대비 구조가 잘 맞았습니다. 왼쪽은 밝은 배경, 오른쪽은 어두운 배경처럼 시각적 대비를 주면 의미의 방향이 분리되어 보입니다.
다만 색상 자체가 의미를 대신하게 만들면 안 됩니다.
그래서 Synonym, Antonym 라벨을 함께 두고, 각 단어의 예문까지 표시했습니다.
<section>
<MeaningCard label="Synonym" word={synonym} />
<TargetWord word={target} />
<MeaningCard label="Antonym" word={antonym} />
</section>
이 구조에서는 중심 단어와 관계 단어가 시각적으로 분리됩니다. 사용자는 단어 하나를 외우는 것이 아니라, 의미의 범위를 함께 이해하게 됩니다.
예문 강조 규칙
동의어와 반의어 카드에도 예문을 넣었습니다. 단어만 나열하면 실제 쓰임이 약해지기 때문입니다. 예문에서는 해당 단어를 강조해 문장 안에서 어떤 역할을 하는지 보이게 했습니다.
강조 색상은 전체 UI의 포인트 컬러와 맞췄습니다. 새로운 색상을 계속 추가하면 학습 화면보다 장식이 먼저 보이기 쉽습니다. 학습 서비스에서는 강조 색상을 적게 쓰는 편이 더 안정적이었습니다.
정리
동의어와 반의어 UI는 단순히 단어를 더 많이 보여주는 화면이 아닙니다. 중심 단어의 의미를 넓히고, 비슷한 의미와 반대 의미를 비교하게 만드는 화면입니다.
정리한 기준은 다음과 같습니다.
- 중심 단어를 화면에서 가장 강하게 고정한다.
- 동의어와 반의어는 target을 기준으로 한 관계 데이터로 본다.
- 좌우 대비를 사용하되 라벨과 예문으로 의미를 보강한다.
- 예문 안의 핵심 단어를 강조한다.
- 포인트 컬러는 적게 사용해 학습 내용이 먼저 보이게 한다.
이 화면은 이후 빈칸 퀴즈로 넘어가기 전에 의미를 넓히는 중간 단계 역할을 했습니다. 바로 문제를 풀게 하는 것보다, 먼저 단어 주변의 의미 지도를 만들어주는 편이 자연스러웠습니다.