1 타이포그래피와 색상¹ ²

발표자료를 구성하는 핵심적인 내용을 다양한 구성요소를 살펴본다. 글꼴(font)에 대한 타이포그래피 사항, 제목과 본문 글의 구현사항, 색상에 대한 내용도 일별한다.

library(tidyverse)
library(magick)
library(sysfonts)
# font_add_google("Noto Sans KR")
library(extrafont)
loadfonts()

## 텍스트 Lorem Ipsum ------------
lorem_raw <- lorem::ipsum(paragraphs = 3)

lorem_text <- lorem_raw %>% 
  str_split("\\.") %>% 
  unlist() %>% 
  str_trim() %>% 
  str_extract(pattern = "(?:\\w+\\s+){5}") 

lorem_text <- lorem_text[!is.na(lorem_text)]

## 빈 이미지 --------------------
template_img <- image_blank(width = 700, height = 350, color = "gray95", pseudo_image = "", defines = NULL)

## 조합 -------------------------
left_img <- template_img %>% 
  ## 폰트 -----------------------
  image_annotate("타이포그래피(Typography)", location = "+30+30", size = 20, font = "NanumGothic", color = "black") %>% 
  # image_annotate("Aa가", location = "+30+50", size = 30, font = "Noto Sans KR", color = "black") %>% 
  # image_annotate("Aa가", location = "+90+50", size = 30, font = "Noto Serif KR", color = "black")
  image_annotate("Aa가", location = "+30+60", size = 30, font = "NanumGothic", color = "black") %>% 
  image_annotate("Aa가", location = "+150+60", size = 30, font = "NanumMyeongjo", color = "black") %>% 
  image_annotate("Nanum 고딕", location = "+30+90", size = 10, font = "NanumGothic", color = "black") %>% 
  image_annotate("Nanum 명조", location = "+150+90", size = 10, font = "NanumMyeongjo", color = "black") %>% 
  ## 텍스트 -----------------------
  image_annotate("제목: Lorem Ipsum", location = "+30+150", size = 30, font = "NanumGothic", color = "black") %>% 
  image_annotate(lorem_text[1], location = "+30+200", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
  image_annotate(lorem_text[2], location = "+30+220", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
  image_annotate(lorem_text[3], location = "+30+240", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
  image_annotate(lorem_text[4], location = "+30+260", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
  image_annotate(lorem_text[5], location = "+30+280", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
  ## 색상 -----------------------
  image_annotate("색상 (Colors)",  location = "+430+30", size = 20, font = "NanumMyeongjo", color = "black") %>% 
  image_annotate("#EFBE43", location = "+470+90", size = 17, font = "NanumMyeongjo", color = "darkgray") %>%    
  image_annotate("#FDF7E9", location = "+470+140", size = 17, font = "NanumMyeongjo", color = "darkgray") %>%    
  image_annotate("#4466B0", location = "+470+190", size = 17, font = "NanumMyeongjo", color = "darkgray") %>% 
  image_annotate("#333333", location = "+470+240", size = 17, font = "NanumMyeongjo", color = "darkgray")  
  
full_img <- image_draw(left_img)
symbols(600, 100, circles=20, fg = '#EFBE43', bg='#EFBE43', inches=FALSE, add=TRUE)
symbols(600, 150, circles=20, fg = '#FDF7E9', bg='#FDF7E9', inches=FALSE, add=TRUE)
symbols(600, 200, circles=20, fg = '#4466B0', bg='#4466B0', inches=FALSE, add=TRUE)
symbols(600, 250, circles=20, fg = '#333333', bg='#333333', inches=FALSE, add=TRUE)

dev.off()

quartz_off_screen 
                2

print(full_img %>% image_resize("150%"))

# A tibble: 1 x 7
  format width height colorspace matte filesize density
  <chr>  <int>  <int> <chr>      <lgl>    <int> <chr>  
1 png     1050    525 sRGB       TRUE         0 72x72

1.1 간편 테스트 함수

앞선 타이포그래피와 색상을 간편하게 일별할 수 있도록 제작해본다.

generate_design <- function(title_font     = "NanumGothic",
                            paragraph_font = "NanumMyeongjo") {
  ## 텍스트 Lorem Ipsum ------------
  lorem_raw <- lorem::ipsum(paragraphs = 3)
  
  lorem_text <- lorem_raw %>% 
    str_split("\\.") %>% 
    unlist() %>% 
    str_trim() %>% 
    str_extract(pattern = "(?:\\w+\\s+){5}") 
  
  lorem_text <- lorem_text[!is.na(lorem_text)]
  
  ## 빈 이미지 --------------------
  template_img <- image_blank(width = 700, height = 350, color = "gray95", pseudo_image = "", defines = NULL)
  
  ## 조합 -------------------------
  left_img <- template_img %>% 
    ## 폰트 -----------------------
    image_annotate("타이포그래피(Typography)", location = "+30+30", size = 20, font = "NanumGothic", color = "black") %>% 
    # image_annotate("Aa가", location = "+30+50", size = 30, font = "Noto Sans KR", color = "black") %>% 
    # image_annotate("Aa가", location = "+90+50", size = 30, font = "Noto Serif KR", color = "black")
    image_annotate("Aa가", location = "+30+60", size = 30, font = title_font, color = "black") %>% 
    image_annotate("Aa가", location = "+150+60", size = 30, font = paragraph_font, color = "black") %>% 
    image_annotate(title_font, location = "+30+90", size = 10, font = title_font, color = "black") %>% 
    image_annotate(paragraph_font, location = "+150+90", size = 10, font = paragraph_font, color = "black") %>% 
    ## 텍스트 -----------------------
    image_annotate("제목: Lorem Ipsum", location = "+30+150", size = 30, font = "NanumGothic", color = "black") %>% 
    image_annotate(lorem_text[1], location = "+30+200", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
    image_annotate(lorem_text[2], location = "+30+220", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
    image_annotate(lorem_text[3], location = "+30+240", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
    image_annotate(lorem_text[4], location = "+30+260", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
    image_annotate(lorem_text[5], location = "+30+280", size = 20, font = "Nanum Myeongjo", color = "black") %>% 
    ## 색상 -----------------------
    image_annotate("색상 (Colors)",  location = "+430+30", size = 20, font = "NanumMyeongjo", color = "black") %>% 
    image_annotate("#EFBE43", location = "+470+90", size = 17, font = "NanumMyeongjo", color = "darkgray") %>%    
    image_annotate("#FDF7E9", location = "+470+140", size = 17, font = "NanumMyeongjo", color = "darkgray") %>%    
    image_annotate("#4466B0", location = "+470+190", size = 17, font = "NanumMyeongjo", color = "darkgray") %>% 
    image_annotate("#333333", location = "+470+240", size = 17, font = "NanumMyeongjo", color = "darkgray")  
    
  full_img <- image_draw(left_img)
  symbols(600, 100, circles=20, bg='#EFBE43', inches=FALSE, add=TRUE)
  symbols(600, 150, circles=20, bg='#FDF7E9', inches=FALSE, add=TRUE)
  symbols(600, 200, circles=20, bg='#4466B0', inches=FALSE, add=TRUE)
  symbols(600, 250, circles=20, bg='#333333', inches=FALSE, add=TRUE)
  
  dev.off()
  
  print(full_img)
  full_img %>% 
    image_write(path="fig/slideshow_design.png")
}

# generate_design()
# 
# design_img <- image_read(path="fig/slideshow_design.png")
# design_img

generate_design(title_font = "Nanum Pen Script",
                paragraph_font = "NanumGothicCoding")

# A tibble: 1 x 7
  format width height colorspace matte filesize density
  <chr>  <int>  <int> <chr>      <lgl>    <int> <chr>  
1 png      700    350 sRGB       TRUE         0 72x72

design_img <- image_read(path="fig/slideshow_design.png")
design_img %>% 
  image_resize("150%")

2 슬라이드 레이아웃

발표자료는 크게 첫 발표 슬라이드, 각 세션을 알리는 중간 제목 슬라이드, 그리고 본문 메인 슬라이드로 구성된다. 이러한 사례는 다음을 살펴보면 확연히 알 수 있다. xaringanthemer 팩키지에 포함된 slideshow를 통해 이를 확인해보자.

xaringanthemer를 설치하면 R 마크다운 문서를 신규로 생성할 경우 From Template > Ninja Themed Presentation에서 색상을 달리하는 템플릿이 있어 이를 일부 수정하여 원하는 템플릿을 바탕으로 발표자료를 slideshow 형태로 제작할 수 있다. 기본 Xaringan Default 설정된 것을 제작하는 방식은 다음과 같다.

# pagedown::chrome_print("slideshow/xaringan-themer.html", output="slideshow/xaringan-themer.pdf")

themer_layout <- image_read_pdf("slideshow/xaringan-themer.pdf")

themer_layout[c(1,6,7)] %>% 
  image_resize(300) %>% 
  image_append(stack=FALSE)

xaringanthemer 팩키지에 포함된 style_duo() 함수를 사용해서 발표첫장, 세션, 본문 슬라이드 내용을 살펴보면 다음과 같다.

# pagedown::chrome_print("slideshow/xaringan-style-duo.html", output="slideshow/xaringan-style-duo.pdf")

style_duo_layout <- image_read_pdf("slideshow/xaringan-style-duo.pdf")

style_duo_layout[c(1,6,7)] %>% 
  image_resize(300) %>% 
  image_append(stack=FALSE)

3 내보내기

xaringanBuilder 팩키지를 통해 다양한 형태 산출물을 제작할 수 있다.

Rmd | |–> social (png) | |–> html | |–> pdf | |–> png | |–> gif | |–> mp4 | |–> pptx

chromote 팩키지를 https://rstudio.github.io/chromote/ 설치하면 PDF 파일을 설치하는데 도움이 된다. build_pdf(), build_pptx() 함수 등을 사용하면 다양한 형태로 발표자료를 변환시킬 수가 있다.

# remotes::install_github("jhelvy/xaringanBuilder")
library(xaringanBuilder)

Sys.setenv(CHROMOTE_CHROME = "/path/to/browser")

build_pdf("slideshow/xaringan-themer.Rmd", output_file = "slideshow/xaringan-themer.pdf")

build_pptx("slideshow/xaringan-themer.Rmd", output_file = "slideshow/xaringan-themer.pptx")

knitr::include_graphics("slideshow/xaringan-themer.pdf")

데이터 과학자 이광춘 저작

kwangchun.lee.7@gmail.com

데이터 과학을 위한 저작도구: Computational Documents

`css` 템플릿: 글꼴, 스타일, …

이광춘

2021-07-26

1 타이포그래피와 색상¹ ²

1.1 간편 테스트 함수

2 슬라이드 레이아웃

3 내보내기

데이터 과학을 위한 저작도구: Computational Documents

css 템플릿: 글꼴, 스타일, …

이광춘

2021-07-26

1 타이포그래피와 색상1 2

1.1 간편 테스트 함수

2 슬라이드 레이아웃

3 내보내기

`css` 템플릿: 글꼴, 스타일, …

1 타이포그래피와 색상¹ ²