스마트폰 or PC 모두 보기 좋은 그래프
한국사회는 한 페이지 짜리 개조식 보고서가 사실상 표준이다. 특히 공직사회 or 기성사회가 그렇다. 정작 실무자들은 그다지 신경쓰지 않는 것 같지만 21세기에서 모바일, PC, 인쇄를 모두 고려하여 동일한 읽기환경을 제공하는 것은 꽤나 중요한 문제다. 궁극적으로 나아가야 할 방향이라고 보아도 무방하다.
최근에 개인연구 초안을 작성한 적이 있는데, 인쇄물 없이 대중교통에서 퇴고하거나 친구에게 보여주고 의견을 묻거나 하는 등의 목적으로도 웹기반 글쓰기는 훌륭한 방법임을 새삼 체감했다. 그러다보니 자연스레 모바일과 PC에서 동일한 읽기경험을 고민하게 되었다.
개조식 보고서는 그 목적상 한 눈에 글의 구조가 들어오는 것이 중요하기 때문에, 오로지 종이문서만이 고려대상이다.1 사실상 문서가 아니라 장표(…). 이것이 일종의 제도적 경로로 형성되어서, .hwp 프로그램 등 한국에서 지식노동자는 지식의 생산 뿐만 아니라 편집까지도 함께 해야한다. 무슨 말인지 공감이 안 된다면 정상이다. 이미 우리는 무의식중에 문서작업을 작성과 편집을 합친 개념으로 인식하고 있는 것이다.
멀리 갈 것도 없이 정부출연연구소도 본문은 .pdf로 다운받아야만 볼 수 있다. 이따금씩 미리보기 기능을 제공하기도 하지만 내용은 그냥 문서를 굳이 이미지 파일로 바꿔서(…) 새창에 띄워줄 뿐이다. 예를 들어 이 곳이 그렇다. 물론 웹기반 글쓰기를 잘 실천한 곳도 있다. 이 경우 .pdf 파일로 다운받아 PC를 주섬주섬 꺼내거나 출력할 필요 없이, 스마트폰으로도 충분히 침대에 누워서 읽을 수 있다. 표가 뭉게져서 보기 힘들다고? 한국의 장표식 글쓰기는 그 특성상 표가 좀 많다. 동일 주제, 동일 분량의 해외논문에는 표가 정말 안쓰인다. 한국사람들, 표 정말 좋아한다. 그래서일까, .hwp의 표기능은 정말 최고다.
.hwp은 독자규격으로 발산진화 중이다. 물론 최근에는 .hwpx, .hml 등 차세대 포맷이 개방되고는 있지만, 여전히 독자규격인 것은 변함이 없다
.hwp가 없는 외국의 경우, 글깨나 쓰는 교수나 작가들은 Microsoft Word를 최소한의 기능만으로 쓴다. 심지어는 이러저러한 기능자체가 있는 줄도 모르는 채 그냥 사용하는 사람도 많다. 대개 편집부가 따로 있기 때문. 당장에 학술논문도 편집위원회가 따로 존재한다. Author(s)는 양식에 얽매일 필요없이 쭉쭉 써나가기만 하면 된다. 심지어는 윈도우에 기본탑재된 무료프로그램 워드패드로 다 해결하는 글쟁이도 많다.
흔히 있는 오해가 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 을 살펴보자. 그림이 너무 크다. 보통 논문에 들어갈 그래프는 가로폭이 출력용지의 가로공간을 꽉 채운다. 모바일에서도 동일하다. 그림이 좀 작아질 뿐, 이 정도는 봐줄만 하다. 다만 이렇게 하면 PC화면에서 그림이 지나치게 커진다는 단점이 있다. 그림이 너무 크게 들어가면 그림에 대한 description text를 함께 읽어야 할 때 불편해진다.
뿐만 아니라, 그림이 작을 때에는 모바일에서도 문제가 발생한다. 예를 들어 아래 Figure 2 처럼 2개의 그림을 좌우로 나타내야 할 때가 있다.
이번에는 가로가 넓은 데스크탑 화면이나 종이에서는 가독성이 올라간다. 그러나 스마트폰의 좁은 화면으로는 슬슬 무리가 온다. 가뜩이나 작은 화면에, 범례까지 추가하면 더더욱 읽기 힘들어진다. 아래 Figure 3 을 스마트폰에서 확인해보자. 눈이 침침해진다.
어찌저찌 2개까지는 시력으로 커버할 수 있다 하더라도, 3개부터는 점점 힘들어진다. Figure 4 를 보자.
해결은 간단한 아이디어에서 출발한다. 바로 출력면의 세로폭이 더 클 때에는 그림의 좌우배치를 상하배치로 바꾸는 것이다. 그러려면 먼저 그래프를 분해해야 하고, 분해한 그림을 상하로 재배치해야 한다.
전자는 grid 패키지를 통해, 후자는 Markdown으로 해결한다.
그림이 1개일 때에는 텍스트가 그림 주변으로 Wrapping 되도록 배치한다.
grid 패키지는 ggplot() 그래프 내에서 범례(legend)를 따로 잘라내준다. 방법은 간단하다. get_legend() 함수를 ggplot() 객체에 사용하면 된다. theme()를 사용해서 범례의 나열 방향을 수평으로 바꿔주자. 여백제거도 잊지말자.
성공했다면 Figure 5 처럼 범례만 뚝 떨어져서 생성된다.
상하로 재배치한 새로운 .png 파일을 만드는 것이 아니다. 분해한 그림들을 HTML 내부 레이아웃에 재배치하는 방법이다. Quarto는 HTML과 연동되는 레이아웃 문법을 제공한다. 2 \(\times\) 2 구조의 예시는 아래와 같다.
범례의 종류가 2개(color, linetype)이므로, 2 \(\times\) 2 레이아웃으로 구성하되, 하단 행은 2개 열을 하나로 병합하여 가운데정렬로 배치하자. 이렇게.
Figure 6 을 넓은 PC화면으로 보면 Figure 3 이랑 동일하게 보인다. 그러나 스마트폰같이 좁은 화면으로 보면 그림의 폭이 좁아지는 것이 아니라, 상하로 재배치된다. 범례까지 같이.
1개 짜리 그림도 작게 그리고 싶지만 여백이 신경쓰인다고? 문제없다. 이미지를 text wraping하면 된다. 핵심키워드는 float.
위 코드블록 중 style="float: right" 부분이 텍스트를 그림 주위로 Wrapping 하게끔 배치하는 내용이다. 이 역시 Quarto Markdown에서 기본적으로 제공한다. 이렇게 하면 오른쪽에 그림을 절반정도 사이즈로 배치하고, 오른쪽 남는 공간에 텍스트를 채워주면 된다. 반드시 레이아웃 태그를 활용해야 스마트폰에서도 상하단으로 적용된다. Figure 7 가 그 예시이다. 굳이 column을 지정해줄 필요 없이 자동으로 텍스트가 이미지를 감싸도록 한다. 모바일뷰에서는 그냥 상하로 배치된다.
아래의 예시를 확인해보자.
먼저 본격적인 매칭 전에 수혜기업과 비수혜기업의 매출액 추이를 확인해보자. Figure 7 과 같다. 수혜기업의 정책시행 전-후의 상승세가 나타난다.
그러나 이대로는 정책이 효과적이었다고 주장하기는 어렵다. 왜일까? 이미 잘하고 있는 기업을 대상으로 정책지원이 이루어진 것이 아니냐라는 반문이 제기될 수 있다. 정책시행 전에도 수혜기업은 비수혜기업보다 이미 매출액이 높게 나타난다.
뿐만 아니라, 비수혜기업의 매출액도 정책시행 후 성장세를 그리고 있다. 정책수혜를 받지 않은 비수혜기업도 매출액이 증가하고 있음을 고려하면 굳이 정책이 필요했는가?라는 의문도 충분히 가능하다.
증가폭도 비수혜기업이 더 높다. 수혜기업은 정책시행 1년 후 대비 2년 후 약 2.09배 성장한 반면, 비수혜기업은 약 2.27배 성장하는 것으로 보인다. 비수혜기업이 더 크게 성장한 것이다. 결과적으로 이 그래프를 정부정책 성과평가 보고서에 사용하게 되면, 굳이 이 정책이 필요했는가? 라는 의문에 힘이 실릴 뿐이다. 물론 이 자료를 근거로 정책을 받지 않은 기업이 더 크게 성장하므로, 정책을 수행해선 안된다고 주장할 수도 없다. 요컨대, 이 자료로는 그 어떤 주장에도 논리적 인과관계에 대한 엄격한 근거를 마련해주지 못한다.
PC 화면에서는 그림이 우측에 배치되고 후속 description text가 그림 주변으로 wrapping되어 나타난다. 모바일 화면에서는 그림이 상단에 배치되고 후속 description text가 하단에 배치된다. 당연하지만 PC 화면에서도 창 크기를 좁게 만들면 상하단으로 재정렬된다.
그리고 이런 양식 글쓰기가 오히려 사고의 틀을 제한하기도 한다.↩︎