그래프가 포함된 웹 글쓰기 1: 모바일에서도 읽히는 그림 배치

화면이 작아지면 생기는 문제

최근 개인연구 초안을 웹 문서로 작성하면서 대중교통에서도 퇴고하고, 링크 하나로 의견을 받을 수 있다는 장점을 체감했다. 그런데 본문은 스마트폰에서 자연스럽게 줄바꿈되는 반면, 그래프는 종이 문서에서 쓰던 배치를 그대로 옮기면 금방 읽기 어려워졌다.

.pdf나 .hwp는 편집자가 정한 한 페이지의 형태를 보존하는 데 강하다. 반면 HTML 문서는 독자의 화면 폭에 맞추어 읽는 흐름을 다시 구성할 수 있다. 웹 기반 글쓰기의 장점을 살리려면, 그래프 역시 화면 폭에 따라 배치를 바꾸어야 한다.

아래 Figure 1 처럼 그림이 하나라면 본문 폭을 모두 쓰는 배치도 크게 문제되지 않는다. 다만 넓은 PC 화면에서는 그림과 이에 대한 설명을 한 시야에서 함께 읽기 어려울 수 있다.

Figure 1: 가로폭을 꽉 채우는 그림

뿐만 아니라, 그림이 작을 때에는 모바일에서도 문제가 발생한다. 예를 들어 아래 Figure 2 처럼 2개의 그림을 좌우로 나타내야 할 때가 있다.

Figure 2: 가로폭을 꽉 채우는 2개의 그림

이번에는 가로가 넓은 데스크탑 화면이나 종이에서는 가독성이 올라간다. 그러나 스마트폰의 좁은 화면으로는 슬슬 무리가 온다. 가뜩이나 작은 화면에, 범례까지 추가하면 더더욱 읽기 힘들어진다. 아래 Figure 3 을 스마트폰에서 확인해보자. 눈이 침침해진다.

Figure 3: 가로폭을 꽉 채우는 2개의 그림과 범례

어찌저찌 2개까지는 시력으로 커버할 수 있다 하더라도, 3개부터는 점점 힘들어진다. Figure 4 를 보자.

Figure 4: 가로폭을 꽉 채우는 3개의 그림

화면 폭에 맞추어 배치하기

해결은 간단하다. 화면이 좁을 때에는 여러 그림의 좌우 배치를 상하 배치로 바꾸고, 그림이 하나일 때에는 충분히 넓은 화면에서만 본문이 그림 주위로 흐르게 한다.

여러 그림은 세로로 재배치

두 패널이 하나의 범례를 공유한다면 먼저 범례를 별도의 이미지로 추출할 수 있다. get_legend()는 cowplot 패키지 함수이며, grid::unit()으로 그림 여백을 정리한다.

R

library(ggplot2)
library(cowplot)

legend <- cowplot::get_legend(
  g1 +
    theme(
      legend.position = "bottom",
      legend.direction = "horizontal",
      plot.margin = grid::unit(c(0, 0, 0, 0), "cm")
    )
)

성공했다면 Figure 5 처럼 범례만 뚝 떨어져서 생성된다.

Figure 5: 범례 분리하기

상하로 재배치한 새로운 .png를 다시 만들 필요는 없다. Quarto의 layout 속성으로 두 그림과 범례를 HTML 안에서 배열할 수 있다. 아래 배열은 첫 행에 두 패널, 둘째 행에 범례 하나를 배치한다.

markdown

::: {layout="[[1,1], [1]]"}
![](왼쪽그림.png){width=400px}

![](오른쪽그림.png){width=400px}

![](범례.png){width=400px fig-align="center" style="margin-bottom: 0px;"}
:::

Figure 6: 반응형 이미지

Figure 6 을 넓은 PC 화면으로 보면 Figure 3 과 비슷하지만, 스마트폰처럼 좁은 화면에서는 각 셀이 세로로 이어져 패널과 범례를 읽을 수 있다.

그림 하나는 텍스트와 함께 배치

그림이 하나라면 데스크탑에서는 그림을 오른쪽에 두고 본문을 옆으로 흐르게 할 수 있다. 다만 float: right만 사용하면 좁은 화면에서도 배치가 남을 수 있으므로, 작은 화면에서는 float를 해제하는 스타일을 함께 지정하는 편이 안전하다.

styles.scss

.figure-wrap-right {
  float: right;
  max-width: 325px;
  margin: 0 0 0.75rem 1rem;
}

@media (max-width: 576px) {
  .figure-wrap-right {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

markdown

::: {.figure-wrap-right}
![정책시행 전후 매출액 추이](before.png){#fig-before width=325px}
:::
이곳에 텍스트 입력

아래 예시에는 같은 스타일을 적용했다. 넓은 화면에서는 Figure 7 오른쪽 배치와 본문 wrapping이 나타나고, 모바일 화면에서는 그림 뒤에 본문이 이어진다.

Figure 7: 정책시행 전후 매출액 추이

먼저 본격적인 매칭 전에 수혜기업과 비수혜기업의 매출액 추이를 확인해보자. Figure 7 과 같다. 수혜기업의 정책시행 전-후의 상승세가 나타난다.

그러나 이대로는 정책이 효과적이었다고 주장하기는 어렵다. 왜일까? 이미 잘하고 있는 기업을 대상으로 정책지원이 이루어진 것이 아니냐라는 반문이 제기될 수 있다. 정책시행 전에도 수혜기업은 비수혜기업보다 이미 매출액이 높게 나타난다.

뿐만 아니라, 비수혜기업의 매출액도 정책시행 후 성장세를 그리고 있다. 정책수혜를 받지 않은 비수혜기업도 매출액이 증가하고 있음을 고려하면 굳이 정책이 필요했는가?라는 의문도 충분히 가능하다.

증가폭도 비수혜기업이 더 높다. 수혜기업은 정책시행 1년 후 대비 2년 후 약 2.09배 성장한 반면, 비수혜기업은 약 2.27배 성장하는 것으로 보인다. 비수혜기업이 더 크게 성장한 것이다. 결과적으로 이 그래프를 정부정책 성과평가 보고서에 사용하게 되면, 굳이 이 정책이 필요했는가? 라는 의문에 힘이 실릴 뿐이다. 물론 이 자료를 근거로 정책을 받지 않은 기업이 더 크게 성장하므로, 정책을 수행해선 안된다고 주장할 수도 없다. 요컨대, 이 자료로는 그 어떤 주장에도 논리적 인과관계에 대한 엄격한 근거를 마련해주지 못한다.

PC 화면에서는 그림이 오른쪽에 배치되고 후속 설명이 주위를 흐른다. 모바일 화면이나 좁은 브라우저 창에서는 media query에 따라 그림과 설명이 상하로 배치된다.

저장된 이미지가 아니라 R 코드 청크에서 직접 출력되는 여러 그래프를 배치하려면, 다음 글에서 column 청크 옵션을 사용한다.