김영사 디지털 교과서

02기술 결정

문제, 선택, 결과 순서로 적었습니다.

1. 결정 01

   레이아웃을 좌표가 아니라 흐름으로 짠다

   문제

   교과서 지면을 그대로 옮기려면 절대 위치로 요소를 배치하는 편이 빠릅니다. 그런데 디지털 교과서 뷰어는 기기마다 화면 크기가 다르고, 사용자가 글자 크기를 키울 수도 있습니다. 좌표로 고정한 지면은 그 순간 전부 깨집니다.

   선택

   지면을 그대로 베끼는 대신 콘텐츠의 의미 단위(제목·본문·문제·보기)로 구조를 다시 짜고, 배치는 흐름에 맡겼습니다. 디자인이 정확히 일치하지 않는 부분은 기획·디자인과 합의해 허용 범위를 정했습니다.

   결과

   글자 크기를 키우거나 화면이 좁아져도 내용이 겹치거나 잘리지 않았습니다. 지면과 픽셀 단위로 같지는 않지만, 읽을 수 있는 상태는 어디서나 유지됐습니다.

2. 결정 02

   대체 텍스트를 '나중에 채울 것'으로 두지 않는다

   문제

   교과서에는 삽화와 도표가 매우 많습니다. 처음에는 이미지를 먼저 넣고 대체 텍스트를 나중에 일괄로 채우려 했는데, 시간이 지나면 그 그림이 무엇을 설명하려던 것이었는지 작업자 본인도 기억하지 못했습니다.

   선택

   이미지를 넣는 그 순간에 대체 텍스트를 함께 쓰는 것을 규칙으로 삼았습니다. 단순 장식은 빈 alt로 명시해 읽히지 않게 하고, 정보를 담은 그림만 설명을 붙였습니다.

   결과

   뒤늦게 몰아서 채우는 작업이 없어졌고, 설명도 훨씬 정확해졌습니다. 이 그림이 장식인지 정보인지 구분하는 일이 접근성 작업의 절반이었습니다.

3. 결정 03

   뷰어별 차이는 추측하지 말고 목록으로 만든다

   문제

   같은 EPUB이 뷰어에 따라 다르게 렌더링됐습니다. 어떤 CSS가 어디서 무시되는지 감으로 대응하다 보니 같은 문제를 여러 번 다시 만났습니다.

   선택

   지원되지 않는 속성과 대체 방법을 표로 정리해 팀에서 함께 봤습니다. 새로 발견할 때마다 표에 줄을 추가했습니다.

   결과

   같은 문제를 두 번 겪는 일이 줄었습니다.

03주요 기능

• EPUB 3 기반 교과서 변환

  초등 영어·수학·과학 교과서를 디지털 교과서 규격으로 전환.

• 인터랙티브 학습 요소

  듣기 자료 재생, 문제 풀이, 정답 확인 등 지면에서 불가능한 동작을 추가.

• 멀티미디어 삽입

  음성·영상 자료를 본문 흐름 안에 배치해 별도 앱 없이 재생되게 했습니다.

• 웹접근성 준수

  시맨틱 구조, 대체 텍스트, 키보드 접근을 기준에 맞춰 작성.

• 뷰어 호환성 확보

  표준을 우선하고, 뷰어별 미지원 속성은 대체 구현으로 처리.

04회고