시작하기무료로 시작하기

UI/UX 원칙을 적용한 와이어프레이밍

이제 일부 원칙을 적용하면서 대시보드에 대한 와이어프레이밍을 해 보겠습니다. 이 연습 문제에서는 시각화가 렌더링되지 않는다는 점에 유의하세요.

Sally를 위한 대시보드를 만든다고 가정해 봅시다. Sally의 포트폴리오는 두 개의 주식, Apple(AAPL)과 Disney(DIS)로 구성되어 있습니다. Sally의 대시보드에는 무엇을 포함하시겠어요?

고려할 변수로는 각 주식의 일별 시가와 종가(open, close), 그리고 최고가와 최저가(high, low)가 있습니다. 또 다른 주요 변수로는 당일 거래량(즉, 하루 동안 거래된 주식 수)인 volume이 있습니다.

이 연습 문제에는 shinydashboard와 shiny 라이브러리가 이미 포함되어 있으며, 빈 함수 server()가 저장되어 있습니다.

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

shinydashboard로 대시보드 만들기

강의 보기

실습형 인터랙티브 연습

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

library(shinydashboard)
library(shiny)

header <- dashboardHeader(
  title = "Portfolio dashboard for Sally",
  titleWidth = 300
)

sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Historical trends",
             tabName = "historical"),
    menuItem("Profits and Losses (PnLs)", 
             tabName = "profit", 
             icon = icon("money-bill-alt"),
             # Truncate the number in the badge label to 2 decimal places
             badgeLabel = "+2.324815454862%", 
             # Change the badge color to green
             badgeColor = "red")
  )
)

body <- dashboardBody(tabItems(
  tabItem(tabName = "historical",
          fluidRow(box(selectInput("stock", "Select stock symbol", 
                                   choices=c("AAPL", "DIS"))),
                   box("Stock name", width = 6)),
          fluidRow(box("valueBox", "Open", width = 2), 
                   box("valueBox", "High", width = 2),
                   box("valueBox", "Low", width = 2),
                   box("valueBox", "Close", width = 2),
                   box("valueBox", "Volume", width = 2)),
          fluidRow(box("valueBox", "Open % change", width = 2, color = "red"), 
                   box("valueBox", "High % change", width = 2),
                   box("valueBox", "Low % change", width = 2),
                   box("valueBox", "Close % change", width = 2),
                   box("valueBox", "Volume % change", width = 2))),
  tabItem(tabName = "profit",
          fluidRow(box("valueBox", "Account balance", width = 3),
                   box("valueBox",  "Value at Risk (Var)", width = 3),
                   box("valueBox", "Returns", width = 3),
                   box("valueBox", "Profit-to-loss ratio", width = 3)),
          fluidRow(box("PnL chart", width = 12, height = 400)))
)
)

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