shiny tutorial 03 - HTML content

Development, R, Shiny
Page content

공지

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

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

I. 이전 글 소개

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

II. HTML Content 개요

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

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

  • h1(): first level header,
  • strong(): 글씨 굵게,
  • em(): 글씨 이탤릭체,
  • a(): web 페이지 연결,
  • img(): 이미지 삽입,

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>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"),
)

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

예시 4. div 태그 안에 p & a 태그 같이 넣기

tags$div(class = "header", checked = NA,
  tags$p("Is Shiny Tutorial easy to learn? If so"),
  tags$a(href = "shiny.rstudio.com/tutorial", "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>

예시 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!")
  )
})

# <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