knitr::include_graphics("fig/xaringan-overview.png")

xaringan은 처음 세상에 나온 이후 나름대로 생태계를 굳건하게 꾸려 나가고 있다. 관련 주요 팩키지는 다음과 같다.

1 슬라이드쇼 기본기능12

1.1 2 칼럼

기본적으로 .pull-left가 내장되어 있는데 5:5로 화면을 분할하는데 기본 문법은 다음과 같다.

```{r whatever}

.pull-left[

```r
R code
```
]
.pull-right[

![](fig/test.png)

]

```

한걸음 더 나아가 칼럼 비율을 조정하고자 할 경우 다음과 같이 코드를 다시 작성할 수 있다. 즉, .css 파일에 다음과 같이 .left-column, .right-column에 관련 비율을 조정하게 되면 원하는 비율대로 2칼럼 슬라이드 제작이 가능하게 된다.

/* Two-column layout */
.left-column {
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2, .left-column h3 {
  color: #1381B099;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #1381B0;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

1.2 한줄씩 보여주기

--을 사용함으로써 한줄씩 순차적으로 보여주는 것이 가능하다. 영어로 increnetal reveal 기능이라고도 한다.

# Tidyverse Korea

--
KRUG Fork?

--
### Facebook 페북 그룹

--
## Seoul R 미트업

1.3 코드 강조 기능

R 코드 강조를 위해서 #<<을 코드 뒷쪽에 붙이면 강조된다.

random_var <- rnorm(1000)
# mean(random_var)

random_df <- tibble(var = random_var)

random_df %>% 
  ggplot(aes(x=var)) + #<<
    geom_histogram()

1.4 출력 결과 강조

출력 결과 강조를 위해서 출력결과에 chunk 선택옵션으로 highlight.output으로 특정 행을 강조하면 된다.

random_df
# A tibble: 1,000 x 1
      var
    <dbl>
 1 -0.330
 2  1.48 
 3 -0.251
 4 -0.145
 5  0.705
 6 -1.37 
 7 -0.809
 8  1.75 
 9 -1.06 
10  0.420
# … with 990 more rows

1.5 외부 이미지 삽입

R마크다운에서 많이 사용되는 이미지 삽입 구문, 예를 들어, ![](fig/xaringan-hex.png){width=17px}은 사용될 수 없어 다음과 같이 HTML img 태그를 사용하거나, knitr::include_graphics() 태그를 사용한다.

<img src="fig/xaringan-hex.png" width="50%" />
```{r image-resize}
knitr::include_graphics("fig/xaringan-hex.png")
```

1.6 로고 삽입

--- 다음에 background-imageurl() 함수로 다음과 같이 작성하여 로컬 이미지를 가져와서 로고를 지정할 수 있다. 좌측하단, 우측상단에 다음과 같이 로고를 삽입한다.

---
background-image: url(fig/xaringan-hex.png), url(fig/xaringan-hex.png) 
background-position: 5% 100%, 100% 5%
background-size: 5%, 10%
  
# 로고 삽입  

1.7 키보드 단축키

xaringan 으로 제작된 슬라이드쇼는 ? 단축키로 발표자료에 대한 다양한 기능을 실시간으로 확인할 수 있다. 숫자 + 엔터키를 치게 되면 해당 슬라이드로 바로 가게 되고 p 단축키는 발표자 모드를 볼 수 있는 기능을 제공한다.

2 PPT → xaringan3

slidex 팩키지는 pptx, docx 파일을 파싱할 경우 XML로 구성된 점을 감안하여 이를 다시 xaringan 으로 만들어 주는 역할을 수행한다. 하지만, 현재 오류가 있어 다음 헬로 월드 코드도 돌아가지 않고 있어 수정 작업중에 있다.

library(slidex)
pptx <- system.file("examples", "slidedemo.pptx", package = "slidex")

convert_pptx(path = pptx, author = "Daniel Anderson")

3 html 슬라이드 → .png

xaringan으로 제작한 .html 슬라이드를 예를 들어 .png와 같은 이미지로 작업을 할 경우 몇가지 장점이 있다. 발표자료를 만들 경우 맨 앞장 Title 슬라이드와, 목차, 소분류 제목, 본문, 마무리 슬라이드로 구성되는 대략의 얼개를 확인할 수 있다는 장점이 있다. 이를 위해서 pagedown 팩키지로 html 파일을 pdf 파일로 변환시킨 후에 magick에서 pdf 파일을 불러 읽을 수 있도록 한 후 다양한 이미지 처리 작업을 수행한다.

3.1 테마(theme)

knitr 팩키지 include_url()함수를 사용하면 xaringan 슬라이드를 R마크다운 문서에 내장할 수 있다.

knitr::include_url('https://statkclee.github.io/comp_document/tutorial/slideshows/xaringan_theme.html#1')

3.2 PDF 변환

pagedown 팩키지 chrome_print() 함수를 사용하게 되면 xaringan .html슬라이드를 .pdf 파일로 변환시킬 수 있다.

pagedown::chrome_print("xaringan_theme.html", output="xaringan_theme.pdf")

3.3 이미지 작업

.pdf 파일을 이미지로 작업할 경우 두가지 방법이 있는데 pdftoolsmgaick 팩키지가 그것이다. .pdf 파일에서 텍스트를 추출하는 등의 작업을 하지 않을 것이라 magick 팩키지 image_read_pdf() 함수를 사용해서 magick 이미지 객체로 후속 작업을 수행하는 것이 훨씬 더 수월하다.

library(magick)

chocolate <- image_read_pdf("tutorial/slideshows/xaringan_theme.pdf")

chocolate %>% 
  image_scale("300") %>% 
  image_append(stack = FALSE)

4 .css 날코딩

발표 슬라이드는 크다 다음과 같이 5가지로 나눠진다.

  • 제목 타이틀 슬라이드
  • 목차(Table of Contents)
  • 소제목 타이틀 슬라이드
  • 본문 슬라이드
  • 마무리 슬라이드

제목 타이틀 슬라이드를 제작하는 것이 아마도 발표자료 제작의 첫걸음으로 생각된다. .css 파일을 하나 제작하는데 기본적인 .css 문법에 맞춰 html 태그를 매칭하는 방식으로 제작한다.

pagedown::chrome_print("xaringan_title_slides.html", output="xaringan_title_slides.pdf")

전체 적인 작업흐름은 구글 검색으로 적당한 외부 이미지 파일을 첫 제목 슬라이드에 넣고 이를 .css 에 반영한다. 한글 폰트를 Google Fonts에서 가져와서 웹브라우져에서 실시간 사용하도록 활성화시키고 html 태그 h1, h2, h3body에 대한 내용을 적용시킨다.

title_slides <- image_read_pdf("tutorial/slideshows/xaringan_title_slides.pdf")

title_slides %>% 
  image_scale("300") %>% 
  image_append(stack = FALSE)

4.1 최소 .css

Google Fonts 웹사이트에서 한글 폰트를 특정하고 .title-slide다음과 같이 지정하고 이미지를 넣고 h1, h2등을 지정하고 본문 글꼴도 지정한다.

@import url(https://fonts.googleapis.com/css?family=Nanum+Pen+Script);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR);

.title-slide {
  background-image: url(fig/slide_background_milky_way.jpg);
  background-size: cover;
}

h1, h2{
  font-family: 'Nanum Pen Script';
  font-weight: normal;
}

body { font-family: 'Noto Sans KR', 'Nanum Pen Script', serif; }

.remark-code, .remark-inline-code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace; }

4.2 다운로드

상기 .css 파일을 다운로드 받는다.

xfun::embed_file('tutorial/slideshows/xaringan-title.css')
Download xaringan-title.css

.css 파일을 R마크다운 xaringan 슬라이드쇼에 반영하여 발표 슬라이드 외관을 깔끔하게 정리한다.

xfun::embed_file('tutorial/slideshows/xaringan_title_slides.Rmd')
Download xaringan_title_slides.Rmd

5 xaringanthemer

xaringanthemer를 활용할 경우 .css를 많이 고치지 않고 xaringan 슬라이드 작성에 많이 사용되는 기능을 쉽게 넣을 수 있다.

knitr::include_url('https://statkclee.github.io/comp_document/tutorial/slideshows/xaringanthemer.html')

상기 슬라이드를 앞서와 같이 PDF 로 변환시킨 후에 PNG 이미지 파일로 일별할 수 있다.

pagedown::chrome_print("xaringanthemer.html", output="xaringanthemer.pdf")
themer_slides <- image_read_pdf("tutorial/slideshows/xaringanthemer.pdf")

themer_slides %>% 
  image_scale("300") %>% 
  image_append(stack = FALSE)

xaringanthemer은 또한 ggplot으로 시각화 그래프를 넣을 경우 look-and-feel을 자동으로 맞춰준다는 면에서 큰 장점도 있다.

YAML 헤더에 seal: false을 지정할 경우 background-image: url("fig/slide_background_milky_way.jpg");와 같이 원하는 이미지를 지정할 수 있다.

.title-slide {
  background-image: url("fig/slide_background_milky_way.jpg");
  background-size: cover;
}

5.1 다운로드

상기 .css 파일을 다운로드 받는다.

xfun::embed_file('tutorial/slideshows/my-xaringan-themer.css')
Download my-xaringan-themer.css

.css 파일을 R마크다운 xaringan 슬라이드쇼에 반영하여 발표 슬라이드 외관을 깔끔하게 정리한다.

xfun::embed_file('tutorial/slideshows/xaringanthemer.Rmd')
Download xaringanthemer.Rmd

6 여자 닌자4

Earo Wang, “Presenting like a kunoichi kunoichi with Xaringa”, R Ladies 2020 발표자료를 참조하여 가장 많이 사용되는 발표자료 형태를 찾아 나중에 xaringan 발표자료를 제작할 때 활용하도록 한다.

knitr::include_url('https://statkclee.github.io/comp_document/tutorial/slideshows/female-ninja.html')

6.1 다운로드

필요한 .css, .js 파일은 별도 준비하여 나중에 사용하도록 한다.

xfun::embed_file('tutorial/slideshows/female-ninja.Rmd')
Download female-ninja.Rmd
 

데이터 과학자 이광춘 저작

kwangchun.lee.7@gmail.com