이러닝 화면의 시선 흐름을 설계하는 5가지 기준

요약

화면에 정보가 모두 들어 있다고 해서 잘 읽히는 것은 아닙니다. 학습자는 화면을 펼친 순간 어디부터 보고, 무엇을 이해하고, 다음에 무엇을 해야 하는지 빠르게 판단해야 합니다.

시선 흐름은 장식을 더하는 일이 아닙니다. 제목, 핵심 메시지, 시각 자료, 보충 설명, 행동 버튼의 우선순위를 눈에 보이게 만드는 일입니다.

화면을 처음 본 사람에게 3초만 보여준 뒤 무엇이 가장 먼저 보였는지 물어보세요. 핵심 제목이나 메시지가 아니라 장식, 번호, 이미지 배경이 먼저 보인다면 시각적 우선순위를 다시 정할 필요가 있습니다.

다음 문제도 함께 확인합니다.

제목은 화면의 주제를 한 문장으로 알려줍니다. 상단의 같은 위치에 두고 본문보다 분명히 크게 만드세요. 차시명, 소주제, 화면 제목이 모두 비슷하게 강조되면 시작점을 찾기 어려우므로 단계별 크기 차이를 둡니다.

한 화면에서 가장 기억해야 할 문장 하나를 정합니다. 굵기, 크기, 배경 면 가운데 한 가지 방식으로 강조하세요. 여러 문장을 모두 굵게 표시하면 강조 효과가 사라집니다.

그림과 설명이 떨어져 있으면 학습자는 시선을 왕복하며 관계를 추측해야 합니다. 번호, 선, 같은 색상 같은 단서를 사용해 어느 설명이 어느 부분을 가리키는지 바로 알 수 있게 하세요.

예시, 주의사항, 출처는 필요하지만 핵심 메시지와 같은 강도로 보일 필요는 없습니다. 글자 크기와 색 대비를 조금 낮추고 관련 내용 아래에 모아두면 본문 흐름을 방해하지 않습니다.

학습자가 내용을 읽은 뒤 해야 할 행동을 화면 끝에서 찾을 수 있어야 합니다. 주 행동 버튼은 하나만 강하게 보이게 하고, 보조 행동은 상대적으로 낮은 강도로 구분합니다.

글자를 무조건 크게 만드는 것보다 정보 사이에 충분한 차이를 만드는 것이 중요합니다. 제목 32px, 본문 30px처럼 거의 비슷하면 둘 다 크게 보여도 위계가 생기지 않습니다.

다음 네 가지를 조합해 단계 차이를 만드세요.

한 요소에서 차이를 충분히 줬다면 나머지 요소까지 모두 과하게 바꿀 필요는 없습니다.

PC 화면을 그대로 축소하면 글자가 작아지고 좌우 관계가 무너집니다. 모바일에서는 정보가 위에서 아래로 한 줄씩 이어지므로 읽는 순서를 다시 정해야 합니다.

제목 다음에 핵심 메시지를 두고, 그림과 관련 설명을 하나의 묶음으로 배치한 뒤 행동 버튼을 마지막에 둡니다. 두 칼럼 비교는 위아래 카드로 바꾸되 어느 카드가 먼저 와야 이해하기 쉬운지 판단하세요.

모바일 화면에서 첫 화면을 넘기기 전에 주제와 핵심 메시지가 보이는지도 확인합니다. 중요한 내용이 장식 이미지 아래로 밀리지 않게 하세요.

화면을 가리키며 “제목을 보고, 이 문장을 이해한 뒤, 그림에서 근거를 확인하고, 마지막으로 버튼을 누른다”고 설명해 보세요. 이 순서와 실제 시선 이동이 다르면 배치나 강조를 수정해야 합니다.

시선 흐름이 좋은 화면은 화려해서가 아니라 판단할 일이 적어서 편안합니다. 먼저 볼 것, 이해할 것, 행동할 것을 한 줄로 연결해 보세요.