R 패키지 문서에 서버 없이 Shiny 앱 추가하는 법

pkgdown 문서에 서버 없이 작동하는 shinylive 앱을 추가하는 방법을 소개합니다.

shinylive
Author

Gyeom Hwangbo

Published

July 29, 2025

참고 글

Getting started

pkgdown을 이용한 R 패키지 문서화와 서버 없이 작동하는 Shiny 앱 만들기는 위 글에서 확인할 수 있습니다. 이 글에서는 간단한 R package 생성부터 pkgdown으로 gh-pages에 deploy한 웹페이지에 Shiny 앱을 추가하는 방법을 소개합니다.

Shinylive란?

“Shinylive”는 Shiny 애플리케이션을 브라우저 안에서 실행할 수 있게 해주는 도구입니다. 전통적인 Shiny는 R 서버가 필요합니다. 반면에 Shinylive는 R과 Shiny 애플리케이션을 브라우저 자체에 탑재합니다.

장점

  • 서버 없이 실행 가능해 호스팅 비용, 유지보수가 필요 없습니다.
  • 정적 파일로 Github Pages 같은 곳에 바로 배포 가능합니다.

단점

  • 초기 로딩 속도가 느립니다.
  • 사용자 기기에서 모든 연산이 이루어져 복잡한 계산은 느릴 수 있습니다.
  • 코드가 브라우저에 노출됩니다.

준비물

  • 패키지 설치
install.packages(c("shiny", "shinylive", "pkgdown", "usethis", "devtools"))
  • R package
  • Shiny app

R package 생성

  1. 빈 git repository(public)를 생성 후 로컬에 clone 합니다.
  2. clone된 폴더로 R package를 생성 합니다.
usethis::create_package(".") # R package 생성

  1. R 함수 생성

    R/ 아래에 함수 hello.R을 생성합니다.

#' # hello.R
#' Say hello
#'
#' @param name A character name
#' @return A greeting
#' @export
hello <- function(name) {
  paste("Hello,", name)
}

Shiny app 생성

  1. 폴더 생성
# Rstudio Terminal에 입력
mkdir -p inst/app/source
cp R/hello.R inst/app/source

  1. Shiny app 생성

    inst/app/ 아래에 app.R을 생성합니다.

# app.R
library(shiny)

source("source/hello.R")

ui <- fluidPage(
  textInput("name", "Name:"),
  textOutput("out")
)

server <- function(input, output, session) {
  output$out <- renderText({
    hello(input$name)
  })
}

shinyApp(ui, server)

Shinylive app 생성

pkgdown은 docs라는 폴더를 생성하고 docs 내부에 파일들을 생성합니다. 이 때, pkgdown은 pkgdown/assets/ 아래 있는 모든 파일들을 docs 폴더로 복사합니다. pkgdown/assets/ 아래 Shinylive app을 export합니다.

shinylive::export("inst/app", "pkgdown/assets/site")

export 후 pkgdown/assets/site/ 아래에 다음과 같은 파일들이 생성됩니다. 결과 파일들

pkgdown 문서화

  1. 문서화
devtools::document()
usethis::use_pkgdown_github_pages()
usethis::use_pkgdown()
pkgdown::build_site()

docs/ 아래에 다음과 같은 파일들이 생성됩니다. 결과 파일들

  1. _pkgdown.yml 수정

    _pkgdown.yml 파일의 navbar에 Shinylive app 링크를 추가합니다. 기존 pkgdown 문서 아래에 다음 내용을 추가합니다.

navbar:
  structure:
    left:
    - home
    - reference
    - hello
  components:
    hello:
      text: Hello
      href: site/index.html

이후 다시 build_site()를 해봅니다.

pkgdown::build_site()

여기서 navbar에 Hello 탭이 생기는 것을 확인할 수 있습니다. (여기서 Hello 동작 안하지만 정상적인 현상입니다.) .gitignore 파일에서 docs를 제거 후 git에 commit합니다. github repository에 gh-pages가 생성됩니다. (약간의 시간이 소요됩니다.) 연결된 gh-pages에 들어가면 Hello가 정상적으로 동작 하는 것을 확인할 수 있습니다.

정리

수정 및 생성한 폴더와 파일은 다음과 같습니다.

myPackage/
├── _pkgdown.yml
├── .gitignore
├── inst/
│   └── app/
│       ├── app.R
│       └── source/
│           └── hello.R
└── R/
    └── hello.R

UI tweak

이렇게 추가한 Shinylive app은 UI 구성 요소가 다르다는 문제가 있습니다. UI를 pkgdown 문서와 일치시키는 방법을 소개합니다.

pkgdown으로 생성된 문서의 UI는 docs/index.html과 이에 연결된 .css 및 .js 스크립트들로 이루어져 있습니다. 따라서 index.html을 복사하고, 내용을 지우고, Shinylive app의 내용을 추가하면 같은 UI를 사용할 수 있습니다.

  1. docs/index.html을 pkgdown/assets에 복사
# Rstudio Terminal에 입력
cp docs/index.html pkgdown/assets/hello.html

1-1. index.html은 다음과 같은 구조로 되어 있습니다.

<!DOCTYPE html>
<head>
<!-- .css, .js 스크립트 연결 -->
</head>
<body>
  <nav>
  </nav>
  <div class="container template-home">
    <div class="row">
      <main id="main" class="col-md-9">
      </main>
      <aside class="col-md-3"><div class="license">
      </aside>
    </div>
      <footer>
      </footer>
  </div>
</body>
</html>

각 <nav>, <main>, <aside>, <footer>는 아래 부분을 정의합니다. 각 영역 설명

  1. hello.html에서 사용할 <nav>, <footer>를 남겨두고 <aside>를 삭제합니다. <main> 아래 내용을 아래와 같이 수정합니다.
  <main id="main" class="col-md-12" style="max-width: 1200px;">
    <iframe src="site/index.html" style="width:100%; height:calc(100vh - 106px); border:none;"></iframe>
  </main>

<main> 영역의 크기를 조절할 때, border:1px solid black;로 테두리 설정하면 조절하기 용이합니다.

  1. _pkgdown.yml의 navbar 부분을 다음과 같이 수정합니다.
navbar:
  structure:
    left:
    - home
    - reference
    - hello
  components:
    hello:
      text: Hello
      href: hello.html
  1. 마지막으로 다시 사이트를 업데이트 하고 git에 commit 합니다.
pkgdown::build_site()

Reuse

Citation

BibTeX citation:
@online{hwangbo2025,
  author = {Hwangbo, Gyeom},
  title = {R {패키지} {문서에} {서버} {없이} {Shiny} {앱} {추가하는}
    {법}},
  date = {2025-07-29},
  url = {https://blog.zarathu.com/posts/2025-07-29-pkgdownshiny/},
  langid = {en}
}
For attribution, please cite this work as:
Hwangbo, Gyeom. 2025. “R 패키지 문서에 서버 없이 Shiny 앱 추가하는 법.” July 29, 2025. https://blog.zarathu.com/posts/2025-07-29-pkgdownshiny/.