이번에 준비한 튜토리얼은 제 강의를 듣는 과거-현재-미래 수강생분들을 위해 준비한 자료이다. 많은 도움이 되기를 바란다
이번에 준비한 Tutorial 코로나 세계현황을 Shiny Dashboard로 만들어 가는 과정을 담았다.
처음 shiny를 접하거나 shiny의 전체 튜토리얼이 궁금한 사람들을 위해 이전 글을 소개한다.
Shiny와 HTML 문법 사이에는 여러 공통점이 있다는 것을 확인 했다. 여기에서는 HTML의 내용보다는 CSS, 그리고 JQuery에 대해서 다루도록 한다.우선, 처음 접하는 CSS와 JQuery에 대해 간단하게 정리하면 아래와 같을 것이다 (김진성, 2018, p.678).
| 기술요소 | 내용 | 주요 기능 |
|---|---|---|
| HTML | - 시맨틱 태그, 디자인 속성 비 권장 - CSS 대체 태그 중단(center, frame, font 등) - 웹 개발용 API 제공 |
문서 작성 기능 |
| CSS | - HTML문서를 대상으로 디자인 적용 - 디자인 소프트웨어(Photoshop) 일부 기능 제공 |
디자인 기능 |
| JQuery | - 최신 자바스크립트 - 문서 객체 처리, 이벤트 핸들링, 애니메이션 - ajax 등의 개발에 필요한 라이브러리 제공 |
동적 기능 |
읽고나면, 딱히 정리되는 건 아니다. 역시 직접 실행해보고 해봐야 안다. CSS부터 적용한 Shiny가 어떻게 달라지는지 확인해보자.
이번 Tutorial 부터는 ui.R & server.R 두 파일로 구분할 것이다. 실제 프로젝트에서도 그렇게 진행한다.
위 싸이트에 들어가면 마음에 드는 테마를 클릭하여 CSS파일을 다운로드 받는다. 강사는 Darkly를 선택했다.
새롭게 R Shiny Project를 시작해본다. [File] - [New File] - [Shiny Web App]을 클릭하면 아래와 같은 팝업이 나오는데, 여기에서 반드시, Multiple File (ui.R/server.R)을 클릭한다.
디렉토리 tree구조를 살펴보면 아래와 같다. 특히 css파일이 어떤 폴더 안에 있는지를 확인한다. 반드시, www folder안에 css 파일이 있어야 한다.
$ tree
├── server.R
├── ui.R
└── www
└── bootstrap.min.css기본적으로 제공되는 ui.R와 server.R 소스코드를 그대로 활용했다. 실제로는 각자 준비한 소스코드가 있어야 하기 때문에, 실제 다운로드 받은 css 파일 적용할 때에는 조금 달라질 수 있음을 유의한다.
Shiny App 화면이다.#
# This is the user-interface definition of a Shiny web application. You can
# run the application by clicking 'Run App' above.
#
# Find out more about building applications with Shiny here:
#
# http://shiny.rstudio.com/
#
library(shiny)
# Define UI for application that draws a histogram
shinyUI(fluidPage(
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
plotOutput("distPlot")
)
)
))
CSS 파일을 적용한 Shiny App 화면이다. 여기에서 주의 깊게 봐야하는 것은 어떻게 Shiny에서 CSS File이 적용되는지의 여부다. 우선, 화면부터 확인해보자.배경색이 바뀐것을 확인할 수 있다. 여기에서 css경로가 들어간 코드 한줄 만 입력하면 된다. (# css 테마 적용, 코드 참조)
#
# This is the user-interface definition of a Shiny web application. You can
# run the application by clicking 'Run App' above.
#
# Find out more about building applications with Shiny here:
#
# http://shiny.rstudio.com/
#
library(shiny)
# Define UI for application that draws a histogram
shinyUI(fluidPage(
# css 테마 적용
tags$head(
tags$link(rel = "stylesheet", type="text/css", href = "bootstrap.min.css")
),
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
plotOutput("distPlot")
)
)
))기본 화면으로만 구성하니, 약간 멋이 없다. 이럴 때는 shiny gallery에서 응용해보자. 마찬가지로, 강사는 소스코드를 그대로 사용할 것이다.
Shiny Gallery에서 Retirement: simulating wealth with random returns, inflation and withdrawals 소스코드(ui.R / server.R)를 전체 Copy를 한다.
그 후에, 아래 코드를
# css 테마 적용
tags$head(
tags$link(rel = "stylesheet", type="text/css", href = "slate.css")
),ui.R 적당한 곳에 놓고 적용해본다. 그러면, shiny Gallery에서 보던 것과 다른 색상이 나타날 것이다. (slate.css 적용)
막상 전체를 해놓고 보니, 배경은 바뀌었으나, 특히 제목(Retirement: simulating wealth with random returns, inflation and withdrawals)글씨크기가 작아졌다. 또한 폰트도 바꾸고 싶은 충동이 느껴졌다. 이럴 때는, 전체 수정이 아닌 부분 수정의 개념으로 접근해서 입력해야 한다. (역시 Web Design은 힘들다!)
우선 아래 두개의 소스코드를 기억해두자. 아래 소스코드를 기존의 css파일과 적용하면 된다.
다른 소스코드는 만지지 않는다.
ui.R)는 아래와 같다.fluidPage(theme="simplex.min.css",
tags$style(type="text/css",
"label {font-size: 12px;}",
".recalculating {opacity: 1.0;}"
),
# Application title
tags$h2("Retirement: simulating wealth with random returns, inflation and withdrawals"),
...
...# css 테마 적용
tags$head(
tags$link(rel = "stylesheet", type="text/css", href = "slate.css"),
tags$style(HTML("
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
")),
tags$style(type="text/css",
"label {font-size: 12px;}",
".recalculating {opacity: 1.0;}",
)
),
# Application title
# h1 폰트 수정하는 코드
h1("Retirement: simulating wealth with random returns, inflation and withdrawals",
style = "font-family: 'Lobster', cursive;
font-weight: 1000; line-height: 1.1;
color: #FFFFFF;"),
...지금까지 shiny에 css코드를 입력하는 방법을 배웠다. 어려운 내용은 아니지만, 처음에는 어떻게 적용을 해야할지 모르는 경우가 많다. 그러한 분들에게 도움이 되기를 바라며.. 특히 잊지 말아야 하는 것은 css 파일을 생성 후 shiny에 적용하려면 www 폴더의 위치 즉 트리구조를 지키는 것을 만드는 것을 잊지 말아야 한다.
김진성. (2018). 빅데이터 분석을 위한 R 프로그래밍. 서울: 가메출판사.
Grolemund, Garrett. and Cheng, Joe., (2014). Style your apps with CSS Retrieved April 5, 2020, from https://shiny.rstudio.com/articles/css.html
Congratulation! You Mastered Application of CSS in Shiny