스마트폰 or PC 모두 보기 좋은 그래프
한국사회는 한 페이지 짜리 개조식 보고서가 사실상 표준이다. 특히 공직사회 or 기성사회가 그렇다. 정작 실무자들은 그다지 신경쓰지 않는 것 같지만 21세기에서 모바일, PC, 인쇄를 모두 고려하여 동일한 읽기환경을 제공하는 것은 꽤나 중요한 문제다. 궁극적으로 나아가야 할 방향이라고 보아도 무방하다.
최근에 개인연구 초안을 작성한 적이 있는데, 인쇄물 없이 대중교통에서 퇴고하거나 친구에게 보여주고 의견을 묻거나 하는 등의 목적으로도 웹기반 글쓰기는 훌륭한 방법임을 새삼 체감했다. 그러다보니 자연스레 모바일과 PC에서 동일한 읽기경험을 고민하게 되었다. 이 글에는 그 삽질들을 기록한다.
개조식 보고서는 그 목적상 한 눈에 글의 구조가 들어오는 것이 중요하기 때문에, 오로지 종이문서만이 고려대상이다.1 사실상 문서가 아니라 장표(…). 이것이 일종의 제도적 경로로 형성되어서, .hwp 프로그램 등 한국에서 지식노동자는 지식의 생산 뿐만 아니라 편집까지도 함께 해야한다. 무슨 말인지 이해가 안간다면 정상이다. 그만큼 한국사회가 문서작업을 작성 + 편집으로 인식하고 있다는 것을 반증한다.
멀리 갈 것도 없이 정부출연연구소도 본문은 .pdf로 다운받아야만 볼 수 있다. 이따금씩 미리보기 기능을 제공하기도 하지만 내용은 그냥 문서를 굳이 이미지 파일로 바꿔서(…) 새창에 띄워줄 뿐이다. 예를 들어 이 곳이 그렇다. 물론 웹기반 글쓰기를 잘 실천한 곳도 있다. 이 경우 .pdf 파일로 다운받아 PC를 주섬주섬 꺼내거나 출력할 필요 없이, 스마트폰으로도 충분히 침대에 누워서 읽을 수 있다. 표가 뭉게져서 보기 힘들다고? 한국의 장표식 글쓰기는 그 특성상 표가 좀 많다. 동일 주제, 동일 분량의 해외논문에는 표가 정말 안쓰인다. 한국사람들, 표 정말 좋아한다.
.hwp가 없는 외국에서는 글깨나 쓰는 교수나 작가들은 Microsoft Word의 최소한의 기능만 쓴다. 기능자체가 있는줄도 모르는 사람도 많다. 편집부가 따로 있기 때문. 심지어는 윈도우에 기본탑재된 무료프로그램 워드패드로 다 해결하는 경우도 많다. 오히려 Word에는 작성한 문서를 이메일로 보내주는 기능이 있다. 원노트도 마찬가지다. 원노트는 한술 더떠서 이메일을 노트로 보내주는 기능도 있다.
같은 워드프로세서 워드는 .hwp에 비해 기능이 부실한 것이 아니라, .hwp가 워드프로세서 이상의 기능까지 함께 수행하고 있다고 보는 것이 맞는 표현일 것이다. MS 측에서 문서편집 프로그램은 따로 있다. Microsoft Publisher가 바로 그것. 이 때문에 국내 저널 및 인덱싱 서비스(KCI 등)에서는 무조건 .pdf 다운로드 기반의 서비스만 제공한다. 종이와 쪽넘김의 제한이 없는 웹기반 글쓰기가 상대적으로 저발전하게 된 원인. 당장에 엘스비어, 슈프링거 등 쟁쟁한 해외 학술출판사는 웹기반 Article이 기본이고 .pdf 제공을 병행하고 있다.
논문, 기사, 소설 등 줄글로 쓰이는 글은 상대적으로 유연하다. Soft Warp 태그 덕분에 창 사이즈에 맞추어 글자들이 자동으로 줄바꿈되기 때문이다. 단어단위로만 줄바꿈하는 방식이나(주로 영어), 단어를 무시하고 한줄을 최대한 가득 채우는 방식(주로 한글) 모두 가능하다. 작은 화면에도 얼마든지 출력할 수 있고, 읽는데 불편함이 없다. 지금 이 블로그에서도 스타일시트(SCSS)에서 제목줄은 단어단위로 줄바꿈하도록 설정되어 있다. 이렇게:
scss
h3 {
font-weight: 700 !important;
font-weight: 700 !important;
opacity: 1 !important; /* 불투명도 100%로 설정 */
background-color: transparent !important;
filter: none !important; /* 필터 효과 제거 */
border-bottom: 1px solid $gray-400 !important;
margin-top: 1.5em !important;
padding-bottom: 10px !important;
word-break: keep-all !important; /* 단어 단위로 줄바꿈 */
}문제는 그림이다. 아래 Figure 1 을 살펴보자. 보통 논문에 들어갈 그래프는 가로폭이 출력용지의 가로공간을 꽉 채운다. 모바일에서도 동일하다. 그림이 좀 작아질 뿐, 이 정도는 봐줄만 하다.
그러나 문제는 지금부터다. 아래 Figure 2 처럼 2개의 그림을 좌우로 나타내야 할 때가 있다.
역시 가로가 넓은 데스크탑 화면이나 종이에서는 무리가 없지만, 스마트폰의 좁은 화면으로는 슬슬 무리가 온다. 가뜩이나 작은 화면에, 범례까지 추가하면 더더욱 읽기 힘들어진다. 아래 Figure 3 을 스마트폰에서 확인해보자. 눈이 침침해진다.
해결은 간단한 아이디어에서 출발한다. 바로 출력면의 세로폭이 더 클 때에는 그림의 좌우배치를 상하배치로 바꾸는 것이다. 그러려면 먼저 그래프를 분해해야 하고, 분해한 그림을 상하로 재배치해야 한다.
전자는 grid 패키지를 통해, 후자는 Markdown으로 해결한다.
grid 패키지는 ggplot() 그래프 내에서 범례(legend)를 따로 잘라내준다. 방법은 간단하다. get_legend() 함수를 ggplot() 객체에 사용하면 된다. theme()를 사용해서 범례의 나열 방향을 수평으로 바꿔주자. 여백제거도 잊지말자.
성공했다면 Figure 4 처럼 보인다. 범례가 2개인 경우도 있다. 물론 문제없다(Figure 5).
상하로 재배치한 새로운 .png 파일을 만드는 것이 아니다. 분해한 그림들을 HTML 내부 레이아웃에 재배치하는 방법이다. Quarto는 HTML과 연동되는 레이아웃 문법을 제공한다. 2 \(\times\) 2 구조의 예시는 아래와 같다.
범례의 종류가 2개(color, linetype)이므로, 3 \(\times\) 2 레이아웃으로 구성하되, 하단 2개 행은 병합하여 가운데정렬로 배치하자. 이렇게.
문제없다. 이미지를 text wraping하면 된다. 핵심키워드는 float.
위 코드블록 중 style="float: reight" 부분이 텍스트를 그림 주위로 Wrapping 하게끔 배치하는 내용이다. 이 역시 Quarto Markdown에서 기본적으로 제공한다.
이렇게 하면 오른쪽에 그림을 절반정도 사이즈로 배치하고, 오른쪽 남는 공간에 텍스트를 채워주면 된다. 반드시 레이아웃 태그를 활용해야 스마트폰에서도 상하단으로 적용된다. Figure 7 가 그 예시이다. 굳이 column을 지정해줄 필요 없이 자동으로 텍스트가 이미지를 감싸도록 한다. 모바일뷰에서는 그냥 상하로 배치된다.
먼저 본격적인 매칭 전에 수혜기업과 비수혜기업의 매출액 추이를 확인해보자. Figure 7 과 같다. 수혜기업의 정책시행 전-후의 상승세가 나타난다. 그러나 이대로는 정책이 효과적이었다고 주장하기는 어렵다. 왜일까? 이미 잘하고 있는 기업을 대상으로 정책지원이 이루어진 것이 아니냐라는 반문이 제기될 수 있겠다. 뿐만 아니라 비수혜기업의 매출액 성장세를 고려하면, 굳이 정책이 필요했는가?라는 의문도 충분해 가능하다. 이 그래프는 정부정책 성과평가 보고서에 사용할 수 없다.
위처럼 자연스럽게 배치된다.
이 포스트를 PC 화면과 모바일 화면 각각으로 접속하여 내용을 확인해보자.
그리고 이런 양식 글쓰기가 오히려 사고의 틀을 제한하기도 한다.↩︎