이 워드프레스 블로그를 운영하다 본문에 표를 삽입해야 하는 포스팅을 쓴 적이 있다. 몇몇 IT회사의 기계번역 기술 번역 품질을 비교하는 내용이었다. 2016년 11월 20일 게재한 이것(https://mincheol.im/48)과 2017년 3월 23일 게재한 이것(https://mincheol.im/59)이다.
두 포스팅 모두 표 데이터를 엑셀 파일로 정리해 갖고 있었다. 먼젓번 포스팅을 게재할 땐 이걸 HTML 표로 집어넣으려니 막연했다. 궁한대로 엑셀 파일을 띄운 화면의 해상도를 적당히 조정해 스크린샷을 떴다. 캡처 이미지를 그대로 포스팅에 집어넣었다.
나중 포스팅을 게재할 땐 표의 글자가 더 많아졌다. HTML 표로 만들어 보겠다고 생각은 했지만 원하는 서식을 적용할 수가 없었다. 또 엑셀 파일을 띄웠다. 이번엔 화면 해상도를 높이면서 셀 배경색을 입힌 스크린샷을 떴다. 같은 식으로 포스팅에 집어넣었다.
이게 쭉 마음에 걸렸다. 두 번 다 포스팅 본문에 표의 주요 텍스트를 담았고 일일이 관련 내용을 설명도 했지만, 결국 이미지 속의 표에 들어간 수많은 글자들은 장식이었다. 데이터로 처리되지 않는 한계가 있었다. 이걸 데이터, 텍스트로 인식되는 HTML 표로 만들고 싶었다.
먼젓 포스팅과 나중 포스팅을 작성한 시점 사이 기간에, 블로그 서비스를 티스토리에서 자체 호스팅 워드프레스로 바꾸면서 이를 실현할 수 있게 됐다. 워드프레스용 HTML 표 작성 플러그인인 테이블프레스(TablePress)를 최근 설치한 덕분이다.
테이블프레스 플러그인을 사용하면 워드프레스 포스팅에 숏코드(shortcode) 형태로 삽입할 수 있는 HTML 표 데이터를 만들 수 있다. 플러그인 기능으로 표의 기본 데이터를 컨트롤하는 요소를 넣거나 뺄 수 있고, 개별 스타일도 지정할 수 있다. CSS 코딩 지식이 약간 필요하다.
테이블프레스의 또다른 장점은 엑셀 파일을 업로드해 그대로 표 데이터로 입력할 수 있다는 것이다. 앞서 언급한, 과거 엑셀 스크린샷 이미지로 삽입했던 표도 그 원본 엑셀 파일을 업로드해 손쉽게 표 데이터로 만들 수 있었다. 그리고 이미지였던 표를 방금 이걸로 대체했다.
포스팅의 레이아웃을 비교해 보니 테이블프레스의 장점이 확연해진다. 스크린샷 형태의 표 이미지는, 검색엔진은 말할 것도 없고 애초에 글씨가 너무 작아 사람도 못 읽는 수준이었다. 이젠 브라우저에서 글자 배율을 조정하는 것으로 일종의 접근성을 보장할 수 있다.
표를 스크린샷 이미지로 썼던 기존 포스팅 레이아웃과 테이블프레스 HTML 표로 만들어 넣은 새 포스팅 레이아웃을 나란히 놓고 견줘 봤다. 아래 삽입한 이미지다. 서체 크기, 컬럼 폭을 다듬어 보니 역시 HTML로 만든 표가 당연히 읽기 좋아 보인다.
—
170518 입력. 210821 수정. 230617 제목 변경, 본문 이미지 대체 텍스트 추가.