시각적 향상

사례 연구: R의 Shiny로 웹 애플리케이션 만들기

Dean Attali

Shiny Consultant

Shiny 테이블

tableOutput("table")

output$table <- renderTable({ gapminder })

chapter3_4_visual_enhancements.003.png

DT로 더 나은 테이블 만들기

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.004.png

DT로 더 나은 테이블 만들기

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.005.png

DT로 더 나은 테이블 만들기

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.006.png

DT로 더 나은 테이블 만들기

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.007.png

DT로 더 나은 테이블 만들기

DT::dataTableOutput("table")

output$table <- DT::renderDataTable({ gapminder })

chapter3_4_visual_enhancements.008.png

UI를 탭으로 나누기

chapter3_4_visual_enhancements.009.png

UI를 탭으로 나누기

chapter3_4_visual_enhancements.010.png

UI를 탭으로 나누기

tabPanel(title = "tab 1", "content goes here")

tabPanel(title = "tab 2", "second tab", plotOutput("plot"))

fluidPage(

  tabsetPanel(

    tabPanel(title = "tab 1", "first tab content goes here"),
    tabPanel(title = "tab 2", "second tab", plotOutput("plot")),
    tabPanel(title = "tab 3", textInput("text", "Name", ""))

  )

)

chapter3_4_visual_enhancements.016.png

CSS: 앱의 모양 미세 조정

계단식 스타일 시트(CSS)
웹페이지 요소의 모양을 커스터마이즈하는 마크업 언어
- Shiny UI는 웹페이지입니다
배경색, 글자색, 글자 크기, 여백, 글꼴 등

CSS 문법

CSS 규칙 문법

#ID {
  property: value;
  property: value;
  ...
}

ID는 스타일을 적용할 요소의 ID입니다

Shiny에 CSS를 추가하려면 tags$style()을 사용합니다

ui <- fluidPage(
  tags$style("
    #ID {
      property: value;
    }
  ")
)

CSS 예시

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.029.png

CSS 예시

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.030.png

CSS 예시

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.031.png

CSS 예시

ui <- fluidPage(
  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

chapter3_4_visual_enhancements.032.png

CSS 예시

css <- "

  #name {
    color: red;
  }

  #table {
    background: yellow;
    font-size: 24px;
  }

"

ui <- fluidPage(

  tags$style(css),

  textInput("name", "Enter your name", "Dean"),
  tableOutput("table")
)

Ayo berlatih!

사례 연구: R의 Shiny로 웹 애플리케이션 만들기