shiny tutorial 08 - HTML, CSS 적용

2020-04-05

Development, R, Shiny

Page content

공지

이번에 준비한 튜토리얼은 제 강의를 듣는 과거-현재-미래 수강생분들을 위해 준비한 자료이다. 많은 도움이 되기를 바란다

이번에 준비한 Tutorial 코로나 세계현황을 Shiny Dashboard로 만들어 가는 과정을 담았다.

I. 이전 글 소개

처음 shiny를 접하거나 shiny의 전체 튜토리얼이 궁금한 사람들을 위해 이전 글을 소개한다.

II. HTML, CSS, JQuery 소개

shiny tutorial 03 - HTML content에서 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 두 파일로 구분할 것이다. 실제 프로젝트에서도 그렇게 진행한다.

III. CSS 적용

(1) CSS 파일 다운 받기

빠르게 대시보드를 작성해야 하는 것이 선결과제이기 때문에, 처음부터 하나씩 만들 생각을 하면 곤란하다.
CSS파일 부트스트랩: https://bootswatch.com/

위 싸이트에 들어가면 마음에 드는 테마를 클릭하여 CSS파일을 다운로드 받는다. 강사는 Darkly를 선택했다.

(2) R Shiny Project 시작

새롭게 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

(3) App 화면 비교

기본적으로 제공되는 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에서 응용해보자. 마찬가지로, 강사는 소스코드를 그대로 사용할 것이다.

(4) 다른 앱의 적용 (실습)

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 적용)

(5) CSS Shiny에 직접 적용 (제목 수정)

막상 전체를 해놓고 보니, 배경은 바뀌었으나, 특히 제목(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;"),
...

바뀐 폰트와 제목이 커진 것을 확인할 수 있다. 이와 같이 미세하게 적용하려면 해당 tag, 이를테면, h1에 적용한 예의 경우처럼 직접적으로 적용해야 한다. 다시 느끼시겠지만, shiny를 시각적으로 잘 구현하려면, HTML과 CSS을 잘 알고 있어야 함을 이해했을 것이다.

IV. 결론

지금까지 shiny에 css코드를 입력하는 방법을 배웠다. 어려운 내용은 아니지만, 처음에는 어떻게 적용을 해야할지 모르는 경우가 많다. 그러한 분들에게 도움이 되기를 바라며.. 특히 잊지 말아야 하는 것은 css 파일을 생성 후 shiny에 적용하려면 www 폴더의 위치 즉 트리구조를 지키는 것을 만드는 것을 잊지 말아야 한다.

V. 더 알아보기

JQuery와 JavaScript를 연동하는 예제는 수강생들의 개별적인 과제로 남겨두겠다. 어려운 내용은 아니지만, 역시 어떻게 적용되는지는 실제로 해봐야 안다.

특히 shiny는 다양한 JavaScript를 쉽게 응용할 수 있도록 shinyjs라는 패키지를 직접 만들었는데, 다양한 예제들이 있으니, 한번 확인해보면 좋다. 간단한 JavaScript는 shinyjs에서 활용하라는 뜻이기도 하다.

VI. Reference

김진성. (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