Quarto 블로그에서 여러 언어로 포스팅하기

자그마치 3개의 퀑 기술이 합쳐진 컴비네이션

이번 글은 Quarto 블로그에서 어떻게 여러가지 언어로 포스팅 하는가를 다뤄보겠다.

여러가지 언어로 아티클을 작성하여 포스팅 하면 URL을 살짝 변경하는 것으로 다양한 언어의 글을 하나의 사이트에서 보여줄 수 있다. 아래의 예시는 최근 작성했던 블로그의 글을 예시로한 설명 이미지이다.

추가로 이 profile을 활용한 다중 언어 컨셉은 Mario Angst에 의해 2022년에 처음 제시 되었고, 2023년에 김재현님에 의해 조금 더 풀어져서 (netlify) 공개 된 글 또한 있으니, 두 글을 참고하는 것도 좋다.

Quarto에서의 다중 언어

개요로 나는 왜 Quarto blog에서 여러개의 언어를 제공하는 것이 필요했는가를 설명하겠다.

우선 미디엄은, 안타깝지만 R 코드를 쓰기 좋은 블로그 서비스는 아니다.

엄밀히는 아래처럼 코드를 입력할 수 있는 기능이 있기 때문에 코드를 쓰기 안 좋지는 않다. 다만 결과를 미디엄에 넣기 위해서는 Rstudio에서의 결과를 스크린 샷을 찍어서 이미지를 입력해야만 한다. 그런데 Quarto에서는 R의 코드와 결과를 동시에 보여줄 수도 있다는 점이 더 뛰어난 부분일 뿐.

library(ggplot2)

mtcars |> 
  ggplot(aes(x = mpg, y = wt)) +
  geom_point() +
  geom_smooth(method = "lm", se = FALSE) +
  labs(title = "Scatterplot of mpg vs wt",
       x = "mpg",
       y = "wt") +
  theme_minimal()

또한 미디엄은 여러개의 언어를 블로그 주인이나, 독자가 사용할 수 있는 기능을 제공하지 않는다.

아래 이미지는 다뤄볼 주제로 관심을 두고 있는 Gemini API를 설명하는 Google AI for Developers의 페이지로 사용자가 언어를 선택하면 해당 언어에 맞추어 자동으로 번역하여 콘텐츠를 제공한다.

물론 이는 구글이기 때문에 가능한 것이라고도 생각되지만, 다소 번거롭더라도 하나의 아티클 안에 한글과 영어를 작성해두면 각자 보여주는 것 정도는 충분히 가능한 웹에서 가능한 기능이라고 생각된다.

아무튼 R 관련 콘텐츠들을 작성하면서 주로 미디엄이 아닌 Quarto 블로그에 게시하였는데 아무래도 “국내의 아주 작은 R 관련 직군들” 외에는 이 내용들이 크게 도움이 되지 않았으리라 생각한다.

차선으로는 R-bloggers에 게시하는 방법도 있지만 이는 Quarto 블로그에서 바로 작성할 수는 없고 별도의 R-posts라는 곳(워드프레스 기반)을 거쳐서 글을 다시 작성해야한다.

이러한 상태에서 최근 해외 진출을 염두해 두고 있는… 조직의 상황으로 인해 Quarto 블로그에 영어와 “일본어” 콘텐츠를 제작할 필요성을 느끼기도 했고 이를 위해 꽤 오랜 시간 동안 방법을 찾고 있었다.

물론 가장 단순하고 확실한 (어쩌면 좋은) 방법은 별도의 도메인으로 각각 구분하여 작성하는 것이지만 이왕이면 1개의 qmd 파일에서만 끝내고 싶었다.

Quarto profile

약 7개월 전, (23년 말) Quarto 에는 project profiles 라는 기능이 추가 되었다.

Quarto - Project Profiles

이는 Quarto로 결과물을 만들때 옵션에 따라서 프로젝트의 결과물이 다르게 보이는 것을 목적으로 한다.

웹페이지의 예시를 하나 설명하자면 사용자의 수준에 따라서 1개의 소스 코드로 basic과 추가 내용을 담은 advance 2 개의 버전을 가지는 별도의 책을 1개의 Quarto 프로젝트로 만드는 것을 생각해볼 수 있다.

원리를 대충 설명하면

• 모든 Quarto 프로젝트에서는 _quarto.yml이라는 파일을 통해 프로젝트의 설정을 관리한다.
• 이 때 프로젝트에 _quarto-advanced.yml이라는 또 하나의 설정 파일을 만들고 (advanced는 바뀌어도 됨)

# _quarto.yml
project:
  title: "basic"
  output-dir: _site

# _quarto-advanced.yml
project:
  title: "advanced book"
  output-dir: _site-advanced

• Quarto 코드에 아래와 같이 chunk를 사용하면 이는 해당 프로파일에서만 보이게 된다. content-visible, when-profile 외에 content-hidden, unless-profile 등의 옵션도 있지만 전혀 중요하지 않으니 생략하겠다.

::: {.content-visible when-profile="basic"}
This content will only appear in the basic version.
:::

::: {.content-visible when-profile="advanced"}
This content will only appear in the advanced version.
:::

• 이어서 Quarto를 render 할때 --profile 옵션을 사용해서 각각의 콘텐츠를 만들어 낸다. (놀랍게도 basic, advanced 사이에 띄어쓰기 하면 터진다)

quarto render --profile basic,advanced

#### or ####

quarto render --profile basic
quarto render --profile advanced

이런 방식을 사용하면 앞에서 언급한 routing 방식과 조금 유사하게 다중 언어 콘텐츠를 1개의 qmd 파일로 만들어낼 수 있다.

yml 파일에서의 추가 설정을 사용해 en, jp 같은 세부 디렉토리를 구분하는 것은 별도의 설명을 하지 않겠다.

Quarto 블로그에서의 다중 언어

Quarto에서는 profile 기능을 사용해 1개의 qmd로 여러 결과물을 만들어 낼 수 있지만, 블로그는 또 다른 문제가 발생한다. 바로 결과물을 전환할 수 있게 하는 이 기능이다.

Quarto 블로그는 아래와 같이 블로그와 아티클을 별도의 프로젝트로 간주하는 조금 특별한 구성을 갖는다.

여기서 profile 을 추가하면 조금 더 복잡해진다. (심지어 JP도 추가된다면 더더욱)

그래서 다중 언어 콘텐츠를 제공하기 위해서는 아티클 레벨이나 블로그 레벨에서의 다른 url 주소로 이동할 수 있게 하는 기능이 필요하다.

우선 블로그 레벨에서는 위 “한국어, English, 日本語” 를 구성하는 버튼을 만들고 href 속성을 사용해 en,jp url로 이동하게 하면 된다.

 - icon: translate
      menu:
      - text: 한국어
        href: ../index.html
      - text: English
        href: ../en/index.html
      - text: 日本語
        href: ../jp/index.html

이렇게 블로그 레벨에서 사용하게 되면 (모든 아티클에 공통으로 적용되기 때문에) 어떤 아티클 위치에서도 언어 버튼을 사용하더라도 해당 언어를 제공하는 블로그 페이지로 이동할 수 있지만, 동시에 어디서나 항상 해당 언어 블로그의 첫 페이지로 이동한다는 단점이 생긴다.

아티클 레벨에서는 아직 적용해보진 않았지만, 마찬가지로 아티클에 바닐라 HTML을 활용해 버튼을 만들고 그 버튼에 onclick 속성을 주면 해당 아티클의 en, jp, 를 붙인 url로 이동할 수 있게 하면 되지 않을까 정도로만 생각하고 있다.

아티클 작성

이제 시스템은 갖추었으니 한글로 작성한 아티클을 영어와 일본어로 번역하여 아래처럼 블록안에 작성할 시간이다.

::: {.content-visible when-profile='ko'}
한국어 콘텐츠
:::

::: {.content-visible when-profile='en'}
English contents
:::

::: {.content-visible when-profile='jp'}
日本コンテンツ
:::

다행히, 한국어로 작성하는 것은 크게 어렵지 않다.

영어로 작성하는 것은 하려면 하지만, 일본어는 도저히 작성할 수 없으니 좋은 번역기를 사용한다.

이를 위해 처음에는 deepL을 사용했다. 그러나 deepL에는 치명적인 단점이 하나 있는데 정확한 로직은 모르지만 아마 ` backtick이나 <, =, * 같은 “코드성" 단어가 들어가면 번역을 하지 못한다.

문장 단위로 쪼개서 시도하거나 웹 버전에서 해도 큰 차이는 없었던 것으로 기억.

아무튼 그래서 이 문제를 해결하기 위해 코드 부분을 제거하고 번역 하는 것도 고려했으나 번역문의 의미가 정확한지를 알 수 없기 때문에 (특히 일본어) 기각했다.

그런데 이 걸 github copilot이 또 해낸다.

이전에 사용하는 IDE인 Rstudio에 연동을 해 놓았기 때문에 코드 작업에는 종종 사용했는데 이런 식으로 코드가 아닌 문서에 대한 추론과 작업도 어느 정도 가능하다.

물론 거의 매 문장을 copilot을 활용하기 위해 약간 대기하고 탭으로 작업해야한다는 번거로움도 있지만 이 정도면 상당히 만족스럽다. 일본어는 모르지만 어쨌든 영어도 번역 자체는 그렇게 이상하지 않은 것 같다.

나중에는 별도의 R 패키지로 API를 사용해 profile을 포함한 다중 언어 콘텐츠를 채워 넣는 기능을 만들어도 좋지 않을까 고려 중. 2025 posit::conf 딱대라.

정리

• Quarto 에서는 profile 기능을 사용해 하나의 qmd에서 여러 결과를 만들어 낼 수 있다.
• 이를 활용하면 qmd의 결과물 (HTML 파일)을 url 주소를 분리하여 만들어 낼 수 있다.
• Quarto 블로그에서 navigation bar와 href 기능을 사용하면 특정 url 주소로 이동하게 할 수 있다.
• Quarto 작업을 위해 사용하는 IDE와, 연동한 copilot을 사용해 번역 콘텐츠를 생성할 수 있다.
• 결과 한국어로 콘텐츠를 만들고 나면 영어와 일본어 페이지 또한 각각 제공이 가능하다.