이러닝 화면에서 자주 생기는 가독성 문제와 수정법

요약

이러닝 화면이 읽기 어렵다면 글자 크기와 함께 대비·문장 길이·정보의 묶음·읽는 순서를 확인하세요. 같은 크기의 글씨도 복잡한 배경이나 긴 문장 안에서는 찾고 읽기 어려울 수 있습니다.

수정은 ‘눈에 들어오는가 → 의미가 구분되는가 → 다음 행동을 찾을 수 있는가’ 순서로 진행해 보세요. 마지막에는 편집 화면이 아니라 학습자가 실제로 볼 재생 화면에서 확인합니다.

이 글이 필요한 분

• PPT에서는 괜찮았는데 영상이나 모바일에서 글씨가 작아지는 분
• 제목과 핵심 내용이 한꺼번에 눈에 들어오지 않는 분
• 강조색을 많이 썼는데 무엇이 중요한지 흐려지는 분
• ‘잘 안 읽힌다’는 피드백을 구체적인 수정 요청으로 바꾸려는 분

전체 흐름

먼저 실제 기기와 재생 환경에서 읽기 어려운 위치를 표시합니다. 다음으로 문제를 크기, 대비, 문장, 배치, 구분 방식 중 하나로 분류합니다. 수정한 뒤에는 같은 조건에서 다시 읽어 보고, 다른 요소가 밀리거나 잘리지 않았는지 확인하세요.

단계별 설명: 자주 생기는 5가지 문제

1. 실제 재생 화면에서 글씨가 작습니다

편집 중 크게 확대한 화면으로만 검수하면 재생할 때의 크기를 놓치기 쉽습니다. 플레이어의 메뉴와 자막이 차지하는 영역까지 포함해 확인하세요. 도식 안의 주석과 캡처 화면 속 글씨도 본문과 함께 점검해야 합니다.

글씨를 키웠더니 공간이 부족하다면 모든 요소를 다시 줄이지 마세요. 한 화면에서 꼭 판단해야 하는 내용과 다음 화면에서 설명해도 되는 내용을 나누거나, 캡처에서 필요한 부분을 확대해 별도로 보여줄 수 있습니다.

2. 글씨와 배경의 대비가 약합니다

밝은 회색 글씨, 사진 위 자막, 연한 색의 작은 주석을 확인하세요. 사진 위 문구에는 일정한 배경 영역을 마련하고, 본문 색을 충분히 진하게 조정합니다. 눈으로만 판단하지 말고 글씨와 배경의 색 조합을 측정하는 도구로 확인하세요.

웹 콘텐츠 기준인 WCAG 2.2의 1.4.3은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 대비를 요구합니다. 큰 텍스트의 정의와 로고 등 예외는 W3C 대비 기준 설명에서 확인할 수 있습니다. 이 수치만 통과했다고 화면의 가독성이나 접근성 전체가 확보되는 것은 아닙니다.

3. 한 문장에 여러 행동이 들어 있습니다

‘신청서를 확인한 뒤 누락 항목을 보완하고 제출 버튼을 눌러 승인 결과를 확인하세요’처럼 행동이 이어지면 현재 무엇을 해야 하는지 찾기 어렵습니다. 각 단계의 행동과 완료 조건을 나누세요.

예를 들어 ‘1. 누락 항목 확인 → 2. 항목 보완 → 3. 제출’로 보여주고, 승인 결과 확인은 이후 화면에서 안내할 수 있습니다. 문장을 줄일 때 예외 조건이나 반드시 입력할 항목까지 삭제하지 않도록 주의하세요.

4. 제목·본문·주석이 같은 무게로 보입니다

모든 글씨를 굵게 만들고 여러 색으로 강조하면 중심이 흐려집니다. 먼저 읽어야 할 제목, 판단에 쓸 기준, 보충 설명의 위계를 정합니다. 서로 관련 있는 요소는 가깝게 두고, 다른 묶음 사이에는 간격을 둡니다.

여백을 확보하려고 설명을 무조건 삭제하기보다 위치를 바꾸거나 화면을 나눠 보세요. 표에서는 비교할 항목이 같은 위치에 있는지, 화살표는 어디에서 시작해 어디로 이어지는지 함께 확인합니다.

5. 색만 보고 의미를 구분해야 합니다

‘빨간 항목을 선택하세요’처럼 색에만 의존하면 색을 구분하기 어려운 학습자에게 의미가 전달되지 않을 수 있습니다. ‘미제출’ 같은 상태 이름, 기호, 테두리 등 다른 단서를 함께 제공합니다.

WCAG 2.2의 1.4.1은 정보 전달이나 행동 지시 등에 색을 유일한 시각적 수단으로 사용하지 않도록 합니다. 색을 없애야 한다는 뜻은 아닙니다. 색과 글자 또는 형태를 함께 쓰는 방식은 W3C 색 사용 기준 설명을 참고하세요.

실제 예시: 신청 절차 안내를 고친다면

다음은 가상의 교육 화면입니다. 한 문단에 확인·보완·제출이 들어 있고, 빨간색과 초록색만으로 처리 상태를 표시했다고 가정해 보겠습니다.

수정 전

신청 내용을 확인하고 빨간 항목을 수정한 다음 제출 버튼을 누르세요. 제출이 끝나면 초록색으로 표시됩니다.

이 화면에서는 ‘빨간 항목’이 무엇을 의미하는지, 어느 시점에 제출할 수 있는지 확인해야 합니다. 긴 문장을 줄이는 것만으로는 문제가 해결되지 않습니다.

수정 후

• 1. 확인: ‘보완 필요’라고 표시된 항목을 찾습니다.
• 2. 보완: 해당 항목에 표시된 누락 정보를 입력합니다.
• 3. 제출: 필수 항목 입력을 마친 뒤 ‘제출’을 선택합니다.
• 완료 확인: ‘제출 완료’ 문구가 나타나는지 확인합니다.

이때 상태 이름과 버튼 문구는 실제 서비스와 일치해야 합니다. 서비스에 없는 표시를 교육 화면에만 만들어 넣지 말고, 실제 화면을 확인한 뒤 표현을 확정하세요.

바로 쓰는 도구: 가독성 수정 기록

‘글씨를 크게’처럼 수정 방법만 전달하기보다 문제 위치와 학습자가 겪는 어려움을 함께 기록하세요.

• 화면 번호와 위치: [예: 07번 화면 오른쪽 도식의 주석]
• 확인 환경: [기기·브라우저 또는 플레이어·화면 크기]
• 증상: [예: 본문은 읽히지만 도식 속 주석을 구분하기 어려움]
• 원인 후보: [크기 / 대비 / 문장 / 배치 / 색에 의존한 구분]
• 수정 내용: [예: 주석을 도식 밖으로 옮기고 연결선으로 대응]
• 재확인 결과: [같은 환경에서 읽힘 / 추가 수정 필요]

웹으로 제공하는 학습 콘텐츠는 확대하거나 좁은 화면에서 볼 때 내용이 잘리거나 가로 이동을 반복하게 되는지도 확인하세요. WCAG 2.2의 1.4.10은 세로로 읽는 콘텐츠의 320 CSS 픽셀 너비에서 정보·기능 손실과 양방향 스크롤을 다룹니다. 지도·표처럼 이차원 배치가 필요한 부분에는 예외가 있습니다. W3C 재배치 기준 설명

이 웹 기준을 영상 한 프레임의 필수 규격으로 그대로 적용하지는 않습니다. 영상과 고정 슬라이드는 실제 재생 크기, 자막, 확대 자료와 대본 등 제공 방식을 함께 검토하세요.

최종 점검

• 편집 화면이 아닌 실제 재생 환경에서 확인했나요?
• 도식·캡처·주석까지 읽을 수 있나요?
• 글씨와 배경의 대비를 확인했나요?
• 제목과 판단 기준, 보충 설명이 구분되나요?
• 색을 구분하지 않아도 상태와 지시를 이해할 수 있나요?
• 확대하거나 좁은 화면으로 볼 때 필요한 내용이 사라지지 않나요?
• 수정 후 다른 문구의 잘림과 요소 겹침도 다시 확인했나요?

오늘 검수할 화면 한 장을 골라 ‘보임·구분·행동’ 순서로 읽어 보세요. 어느 단계에서 막히는지 적으면, 추상적인 피드백을 실행할 수 있는 수정 지시로 바꿀 수 있습니다.

함께 읽기: 한 화면에 정보를 얼마나 넣어야 할까, 이러닝 화면의 시선 흐름