사이드바 레이아웃

레이아웃 함수는 UI에서 입력과 결과물을 시각적으로 배치할 수 있게 해요. 알맞은 레이아웃을 사용하면 Shiny 앱의 미적 완성도가 높아지고, 사용자 경험도 개선됩니다.

이번 연습 문제에서는 유행하는 이름의 인기도를 탐색하는 Shiny 앱의 레이아웃을 수정해 보세요. 최종 앱은 다음과 비슷한 모습이어야 합니다:

An app where the name selector appears in the left sidebar, while the graph appears on the right in the main panel

이 연습은 강의의 일부입니다

R로 Shiny 웹 애플리케이션 만들기

강의 보기

연습 안내

이 앱의 레이아웃을 수정해, 이름 선택기가 사이드바에 표시되고 그래프와 표가 오른쪽 메인 패널에 나타나도록 하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

코드 편집 및 실행