공지

이번에 준비한 튜토리얼은 제 강의를 듣는 과거-현재-미래 수강생분들을 위해 준비한 자료이다. 많은 도움이 되기를 바란다

이번에 준비한 Tutorial 코로나 세계현황을 Shiny Dashboard로 만들어 가는 과정을 담았다.

I. 이전 글 소개

처음 shiny를 접하거나 shiny의 전체 튜토리얼이 궁금한 사람들을 위해 이전 글을 소개한다. - shiny tutorial 01 - get started - shiny tutorial 02 - Shiny Structure - shiny tutorial 03 - HTML content

II. Layouts의 개요

이번 시간에는 Shiny Layouts 개요에 대한 간략적인 소개를 하려고 한다. 영어가 편하거나 중고급 개발자 분들은 Application layout guide를 참고하기를 바란다.

사실, 이 부분은 자세하게 다루기에는 부담이 존재한다. Layouts에 대한 디자인은 굉장히 주관적일 뿐더러, 처음부터 만들어가려면 그만큼 시간도 오래 걸리기 때문이다. 우리가 잊지말아야 하는 것 중의 하나는 Data Scientist는 Web Developer는 아니다. 기존의 Web Developer보다 대시보드를 시각적으로 더 잘 만들수는 없다. 그러나, 어떤 수집딘 데이터에서 어떤 Insight를 클라이언트에게 전달하지는 Web Developer보다는 더 나은 포지션에 있다.

따라서, Layout의 큰 개념만 잡는다면 다음부터는 R에서 제공하는 주요 Dashboard 패키지를 사용하는 것을 적극 권장한다.

III. Main Functions

예시 1. Sidebar Layout

이러한 Layout은 보통 화면 왼쪽에는 (단, Mobile 화면 위쪽) input에 관한 기능이 나온다면, 화면 오른쪽에는 input에 따라 결과값이 나타나는 output의 그래프, 표 등이 출력된다.

# 패키지
library(shiny)

# ui 정의
ui <- fluidPage(
  titlePanel("Sidebar Layout 예시"), # 제목 Panel

  sidebarLayout(
    sidebarPanel(
      numericInput(
        inputId = "n", label = "샘플사이즈",
        value = 25
      )
    ),

    mainPanel(
      plotOutput(outputId = "hist")
    )
  )
)

# server 정의
# output will be displayed
server <- function(input, output) {
  output$hist <- renderPlot({
    hist(rnorm(input$n))
  })
}

# shinyApp 실행
shinyApp(ui = ui, server = server)
## 
## Listening on http://127.0.0.1:6286

예시 2. Grid Layout

sidebarLayout()은 가장 낮은 수준의 grid layout을 제공하고 있는데, 본 예시에서는 조금 더 구체적으로 Grid Layout을 지정하도록 한다. 여기서 알아두어야 할 핵심 함수는 아래와 같다. - fluidRow(): 행과 관련이 있다. - column(): 열과 관련이 있다.

Column의 너비는 은 Bootstrp 12-wide grid system에 기초하며, 하나의 fluidRow()안에는 12개의 column()이 존재한다. (다시한번 느끼지만, Shiny를 잘할려면 HTML/CSS/JS를 잘해야 한다!)

library(shiny)
library(ggplot2)

dataset <- diamonds

ui <- fluidPage(

  title = "다이아몬드 데이터 탐색",
  
  plotOutput('plot'),
  
  hr(),

  fluidRow(
    column(3,
      h4("다이아몬드 데이터 탐색"),
      sliderInput('sampleSize', 'Sample Size', 
                  min=1, max=nrow(dataset), value=min(1000, nrow(dataset)), 
                  step=500, round=0),
      br(),
      checkboxInput('jitter', 'Jitter'),
      checkboxInput('smooth', 'Smooth')
    ),
    column(4, offset = 1,
      selectInput('x', 'X', names(dataset)),
      selectInput('y', 'Y', names(dataset), names(dataset)[[2]]),
      selectInput('color', 'Color', c('None', names(dataset)))
    ),
    column(4,
      selectInput('facet_row', 'Facet Row', c(None='.', names(dataset))),
      selectInput('facet_col', 'Facet Column', c(None='.', names(dataset)))
    )
  )
)

server <- function(input, output){    

  dataset <- reactive({
    diamonds[sample(nrow(diamonds), input$sampleSize),]
  })

  output$plot <- renderPlot({
    
    p <- ggplot(dataset(), aes_string(x=input$x, y=input$y)) + geom_point()
    
    if (input$color != 'None')
      p <- p + aes_string(color=input$color)
    
    facets <- paste(input$facet_row, '~', input$facet_col)
    if (facets != '. ~ .')
      p <- p + facet_grid(facets)
    
    if (input$jitter)
      p <- p + geom_jitter()
    if (input$smooth)
      p <- p + geom_smooth()
    
    print(p)
    
  }, height=400, width = 700)
}

shinyApp(ui = ui, server = server)
## 
## Listening on http://127.0.0.1:4447

예시 3. Navbar Pages

일반적인 웹사이트 메뉴 구성도와 큰 차이가 없다. 메뉴를 구성하는데, Top 메뉴와 Secondary Navigation까지 지원이 가능하다.

이 기능을 구현할 때는 사실상의 Shiny Project 단계로 진입하기 때문에, 이 때에는 메뉴 구성도와 같은 웹사이트 개발 지식이 수반되어야 한다.

library(shiny)

ui <- navbarPage("My Application",
  tabPanel("Component 1"),
  tabPanel("Component 2"),
  navbarMenu("More",
    tabPanel("Sub-Component A"),
    tabPanel("Sub-Component B"))
)

server <- function(input, output) {
  
}

shinyApp(ui = ui, server = server)
## 
## Listening on http://127.0.0.1:7782

지금까지 Layouts의 기본 개요와 함께 주요 Functions에 대해 간단하게 학습하는 시간을 가졌다. 여기에서는 Layouts의 기본 개념만 알고 있으면 추후에 Shiny 대시보드 디자인을 할 때, 보다 쉽게 구현이 가능하다.

특히, Grid System에 대한 개념이 매우 중요하므로 Application layout guide에서 추가 학습을 진행하는 것을 권장한다.

IV. Reference

Allaire. (2014, January 24). Application layout guide. Retrieved March 30, 2020, from https://shiny.rstudio.com/articles/layout-guide.html

Congratulation! You Mastered Layouts in Shiny