공지

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

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

I. 이전 글 소개

처음 shiny를 접하거나 shiny의 전체 튜토리얼이 궁금한 사람들을 위해 이전 글을 소개한다. - shiny tutorial 01 - get started - shiny tutorial 02 - Shiny Structure

II. HTML Content 개요

이번 시간에는 HTML Content 개요에 대한 간략적인 소개를 하려고 한다. 영어가 편하거나 중고급 개발자 분들은 Customize your UI with HTML를 참고하기를 바란다.

텍스트 및 이미지와 같은 HTML 콘텐츠를 사용하여 Shiny 앱의 모양을 사용자 지정할 수 있다. HTML은 다양한 태그의 조합으로 UI를 꾸미는 역할을 하며, Shiny의 문법역시 HTML 태그와 거의 유사하다. 예를 들면 아래와 같다. (Shiny: HTML)

Shiny는 굉장히 HTML 지향적으로 구성되어 있다. 만약 더 많은 태그가 궁금한 사람들은 아래에서 다음과 같이 소스코드를 실행한다.

library(shiny)
names(tags)
##   [1] "a"           "abbr"        "address"     "area"        "article"    
##   [6] "aside"       "audio"       "b"           "base"        "bdi"        
##  [11] "bdo"         "blockquote"  "body"        "br"          "button"     
##  [16] "canvas"      "caption"     "cite"        "code"        "col"        
##  [21] "colgroup"    "command"     "data"        "datalist"    "dd"         
##  [26] "del"         "details"     "dfn"         "dialog"      "div"        
##  [31] "dl"          "dt"          "em"          "embed"       "eventsource"
##  [36] "fieldset"    "figcaption"  "figure"      "footer"      "form"       
##  [41] "h1"          "h2"          "h3"          "h4"          "h5"         
##  [46] "h6"          "head"        "header"      "hgroup"      "hr"         
##  [51] "html"        "i"           "iframe"      "img"         "input"      
##  [56] "ins"         "kbd"         "keygen"      "label"       "legend"     
##  [61] "li"          "link"        "main"        "mark"        "map"        
##  [66] "menu"        "meta"        "meter"       "nav"         "noscript"   
##  [71] "object"      "ol"          "optgroup"    "option"      "output"     
##  [76] "p"           "param"       "picture"     "pre"         "progress"   
##  [81] "q"           "rp"          "rt"          "ruby"        "s"          
##  [86] "samp"        "script"      "section"     "select"      "small"      
##  [91] "source"      "span"        "strong"      "style"       "sub"        
##  [96] "summary"     "sup"         "table"       "tbody"       "td"         
## [101] "template"    "textarea"    "tfoot"       "th"          "thead"      
## [106] "time"        "title"       "tr"          "track"       "u"          
## [111] "ul"          "var"         "video"       "wbr"

names(tags)는 총 114개의 함수로 구성되어 있고, 이 숫자 역시 shiny 패키지가 업데이트 될수록 함수가 늘어나는 양상을 띄고 있다. (예: Shiny 홈페이지에는 110개의 함수만 소개됨)

III. Shiny 안에 Tag 생성

ui 내부에 별도로 HTML tag를 생성하고 싶다면 아래와 같이 tags를 활용하여 HTML 태그를 생성하면 된다.

예시 1. h1 tag

tags$h1("h1 tag")

h1 tag

# <h1>h1 tag</h1>

예시 2. div tag 속성값 입력

tags$div(class = "header")
# <div class="header"></div>

예시 3. div 태그 안에 p 태그 넣기

tags$div(class = "p", checked = NA,
  tags$p("Is Shiny Tutorial easy to learn? If so"),
)

Is Shiny Tutorial easy to learn? If so

# <div class="p" checked>
#   <p>Is Shiny Tutorial easy to learn? If so</p>
# </div>

예시 5. withTags 활용법

HTML tags를 활용하려면 지속적으로 tags를 입력해야 하는 불편함이 있다. 그런데, withTags를 활용하면 tags를 중복적으로 사용하지 않아도 되는 장점이 있다.

withTags({
  div(class="header", checked=NA,
    p("Is Shiny Tutorial easy to learn? If so"),
    a(href="shiny.rstudio.com/tutorial", "Let's Do it. Click Here!")
  )
})

Is Shiny Tutorial easy to learn? If so

Let's Do it. Click Here! 
# <div class="header" checked>
#   <p>Is Shiny Tutorial easy to learn? If so</p>
#  <a href="shiny.rstudio.com/tutorial">Let's Do it.  Click Here!</a>
# </div>

웹프로그래머에게는 사실 매우 간단한 작업일 수도 있지만, Web 환경에 익숙하지 않은 데이터 분석가에게는 조금은 어려울 수 있다. 그러나, 오픈소스로 대시보드를 작업해야 한다면, HTML은 매우 중요한 작업이 될 가능성이 크다. 시각적으로 좋은 디자인일 수록, 가독성이 높은 대시보드일수록 클라이언트 또는 상급자가 쉽게 의사결정을 할 수 있도록 도와줄 수 있기 때문이다.

IV. Reference

Grolemund, G., Cheng, J., & Cetinkaya-Rundel, M. (2017, August 9). Customize your UI with HTML. Retrieved from https://shiny.rstudio.com/articles/html-tags.html

Congratulation! You Mastered HTML content in Shiny