인터랙티브 교수ㆍ학습 웹 앱의 제작
웹 앱 제작의 실제

이상일(서울대학교 지리교육과 교수)

2026-01-13

웹 배포(deployment)

• https://www.shinyapps.io/

• 계정 생성

  • 로그인 후 상단 오른쪽 끝 메뉴 “Tokens” 페이지로 이동

  • 페이지에서 Show를 통해 인증 토큰(Token)과 Secret 확보: Show secret를 클릭하여 secret까지 보이게 한 후 복사하기

• RStudio에 토큰 설정

  • R 콘솔에 복사한 내용 붙여넣기 및 실행

• Publish 버튼 클릭

  • 스크립트 윈도우의 오른쪽 상단

  • 배포를 원하는 R 파일만 선택

• URL 생성: https://userid.shinyapps.io/project_name/

  • https://sangillee.shinyapps.io/AIEDU2025_Example/

Quarto와 Shiny의 결합

• 상황: Quarto 대시보드의 일부 영역에서 Shiny 사용

• 두 가지 접근

  • Shiny 중심 방식: Shiny 웹 앱의 생성

    • Quarto 대시보드 내에서 Quarto 문법으로 Shiny 웹 앱 구축

    • Quarto 대시보드 전체가 Shiny 웹 앱화: shinyapps.io를 통해 배포

    • 사례: https://sangillee.shinyapps.io/Dashboard_Example/

  • Quarto 중심 방식: Quarto 대시보드의 유지

    • Quarto 대시보드 속에 독립적으로 구축된 Shiny 웹 앱 임베딩

    • 여전히 Quarto 대시보드: Quarto Pub을 통해 배포

    • 사례: https://sangillee.snu.ac.kr/dashboard_examples/

Quarto와 Shiny의 결합: Shiny 중심 방식

• Quarto의 행렬 분할을 통한 레이아웃 설정 방식을 활용: 입력 함수와 출력 함수를 포함

  • shiny 패키지: fluidPage()

    • titlePanel(), SidebarLayout(), sidebarPanel(), mainPanel()

  • bslib 패키지: page_sidebar()

    • sidebar = sidebar(), card()

• Quarto 문법을 통해 Shiny 웹 앱 구축

Quarto와 Shiny의 결합: Shiny 중심 방식

• https://quarto.org/docs/dashboards/interactivity/shiny-r.html

• YAML 헤더에 다음 첨가: server: shiny

• UI 부분: 기본적으로는 r 코드 청크 속에 포함, 사이드바와 메인 병렬

  • 사이드바: 레이아웃 구성요소에 넣고 {.sidebar} CSS 클래스 지정 가능

  • 메인: 사이드바와 다른 레이아웃 구성요소에 넣기 가능

• Server 부분: r 코드 청크 속에 포함, 다음을 지정

  • #| context: server 지정

• 기타(패키지, 데이터 등) 부분: r 코드 청크 속에 포함, 다음을 지정

  • #| context: setup

  • #| include: false

Quarto와 Shiny의 결합: Quarto 중심 방식

• 보통 하나의 row에 임베딩

• src="" 부분만 교체

<iframe src="https://..." loading="lazy" style="width: 100%; height: 600px; border: 0px none;" allow="web-share; clipboard-write"></iframe>

Chatbot 웹 앱

https://ellmer.tidyverse.org/

https://posit-dev.github.io/shinychat/r/

Chatbot 웹 앱

• 코드
• 웹 앱

library(shiny)
library(shinychat)
library(bslib)
library(ellmer)

ui <- page_fillable(
  chat_ui(
    id = "chat",
    messages = "your messages here"
  ),
  fillable_mobile = TRUE
)

server <- function(input, output, session) {
  chat <-
    chat_openai(
      base_url = "https://api.openai.com/v1",
      model = "gpt-5.1",
      api_key = your_api_key_here,
      system_prompt = ""
    )

  observeEvent(input$chat_user_input, {
    stream <- chat$stream_async(input$chat_user_input)
    chat_append("chat", stream)
  })
}

shinyApp(ui, server)