시작하기무료로 시작하기

상태 설정하기

영상에서 강조했던 좋은 UI/UX 실천법 중 하나는 색상을 효과적으로 활용하는 것입니다. 보신 것처럼, box()와 notificationItem()에 적절한 인자를 설정해 색상으로 구분되는 상태를 추가할 수 있습니다.

Available statuses

이렇게 미리 정의된 색상을 활용하면 사용자가 세부 내용을 꼼꼼히 보지 않아도 메시지의 성격을 빠르게 파악할 수 있습니다.

이어서 shinydashboard에서 다양한 상태를 적용해 보겠습니다.

이 연습 문제에서는 shiny와 shinydashboard 라이브러리가 이미 로드되어 있습니다. 또한 헤더와 사이드바는 sidebar로 저장되어 있으며, server()는 비어 있는 함수입니다.

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

shinydashboard로 대시보드 만들기

강의 보기

실습형 인터랙티브 연습

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

library(shiny)
library(shinydashboard)

sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Historical trends",
             tabName = "historical"),
    menuItem("Profits and Losses (PnLs)", 
             tabName = "profit", 
             icon = icon("money-bill-alt"),
             badgeLabel = "+2.3%", badgeColor = "green")
  )
)

header <- dashboardHeader(
  title = "Portfolio dashboard for Sally",
  titleWidth = 300,
  dropdownMenu(type = "notifications",
               # Change status of "Sell alert" from "warning" to "danger"
               notificationItem("Sell alert", status = "warning"),
               # Set status of "Buy alert" to "success".
               notificationItem("Buy alert", ___))
)

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
코드 편집 및 실행