이러닝 버튼과 지시문을 헷갈리지 않게 쓰는 법

요약

좋은 버튼은 누른 뒤 일어날 일을 미리 알려줍니다. ‘확인’, ‘보기’, ‘다음’처럼 뜻이 넓은 말보다 정답 확인, 해설 보기, 다음 사례로 이동처럼 행동과 결과가 함께 보이는 표현이 좋습니다.

지시문은 버튼 문구를 반복하는 자리가 아닙니다. 학습자가 지금 무엇을 보고, 무엇을 선택하고, 언제 버튼을 눌러야 하는지 알려주는 짧은 길잡이여야 합니다.

왜 버튼 앞에서 멈추게 될까요?

학습자가 버튼을 찾지 못해서만은 아닙니다. 눌러도 되는 시점과 누른 뒤의 결과가 분명하지 않을 때도 멈춥니다.

• ‘확인’이 선택을 저장하는지 정답을 보여주는지 알 수 없습니다.
• ‘보기’가 자료를 여는지 전체 화면으로 확대하는지 알 수 없습니다.
• 여러 버튼의 이름이 비슷해 어느 것부터 눌러야 할지 모릅니다.
• 지시문과 버튼이 서로 다른 행동을 말합니다.

화면이 단순해 보여도 이런 작은 불일치는 학습 흐름을 자주 끊습니다.

버튼은 행동과 결과가 보이게 쓰세요

버튼 문구는 가능하면 행동 + 대상 또는 결과로 만듭니다.

수정 전	수정 후	눌렀을 때 일어나는 일
확인	정답 확인	채점 결과와 해설이 나타남
보기	예시 답안 보기	예시 답안 창이 열림
저장	작성 내용 저장	현재 입력 내용이 저장됨
다음	다음 사례로 이동	다음 사례 화면으로 넘어감
다시	문제 다시 풀기	선택이 초기화되고 재도전 시작

버튼이 반복해서 사용된다면 같은 결과에는 같은 표현을 쓰세요. 어떤 화면에서는 ‘정답 확인’, 다른 화면에서는 ‘제출’이라고 쓰면 서로 다른 기능처럼 느껴집니다.

지시문은 세 가지 정보만 남기세요

지시문이 길수록 친절해지는 것은 아닙니다. 다음 세 가지 가운데 필요한 정보만 남기면 읽기 쉬워집니다.

1. 대상: 무엇을 보고 판단하는가?
2. 행동: 고르는가, 연결하는가, 입력하는가?
3. 완료 조건: 몇 개를 선택한 뒤 어떤 버튼을 누르는가?

예를 들어 “아래 내용을 잘 읽어본 후 알맞다고 생각하는 답을 선택해 주시기 바랍니다”보다 “사례를 읽고 가장 적절한 응답 하나를 선택하세요”가 빠르게 이해됩니다.

버튼까지 안내해야 한다면 “응답을 선택한 뒤 정답 확인을 누르세요”처럼 실제 버튼 이름을 그대로 적습니다.

화면 상태가 바뀌면 문구도 바뀌어야 합니다

같은 자리에 있는 버튼이라도 화면 상태에 따라 할 일이 달라질 수 있습니다.

선택 전

아직 답을 고르지 않았다면 ‘정답 확인’ 버튼을 비활성화하고, 가까운 곳에 “응답을 먼저 선택하세요”라고 알려주세요.

선택 후

선택이 끝나면 버튼을 활성화합니다. 이때 지시문은 더 이상 선택을 재촉할 필요가 없습니다.

채점 후

결과가 나타났다면 주 행동도 달라집니다. ‘정답 확인’을 계속 남겨두지 말고 ‘다음 문제’ 또는 ‘다시 풀기’로 바꿉니다.

상태 변화가 보이면 학습자는 자신이 어디까지 진행했는지 쉽게 판단할 수 있습니다.

접근성까지 고려한 표현인지 확인하세요

색이나 위치만으로 버튼을 설명하지 마세요. “오른쪽의 주황색 버튼을 누르세요”는 화면 크기와 색 인식 환경에 따라 맞지 않을 수 있습니다. “정답 확인을 누르세요”처럼 버튼 이름으로 안내하는 편이 안전합니다.

아이콘만 있는 버튼에는 보이는 이름이나 보조 설명이 필요합니다. 특히 재생, 음소거, 닫기처럼 익숙해 보이는 아이콘도 처음 사용하는 사람에게는 뜻이 다를 수 있습니다.

게시 전 점검

• 버튼 이름만 읽어도 누른 뒤의 결과를 예상할 수 있나요?
• 같은 기능에 같은 표현을 사용했나요?
• 지시문과 실제 버튼 이름이 일치하나요?
• 선택 전·후·채점 후의 화면 상태가 구분되나요?
• 색상이나 위치만으로 행동을 안내하지 않았나요?

버튼 문구는 짧지만 학습 흐름을 결정합니다. 화면을 완성한 뒤 “이 버튼을 처음 보는 사람도 다음 결과를 예상할 수 있을까?”를 한 번 확인해 보세요.