Quarto – Quarto 프레젠테이션

안녕하세요

이 프레젠테이션에서는 Quarto와 Reveal.js로 할 수 있는 다음 예시를 보여드립니다.

코드와 LaTeX 수식 발표
슬라이드 출력에 계산 포함
이미지, 비디오, iframe 배경
화려한 전환과 애니메이션
스크롤 보기 활성화

…그리고 더 많은 기능

멋진 코드

20개 이상의 구문 강조 테마 제공
접근성을 최적화한 기본 테마

# Define a server for the Shiny app
function(input, output) {
  
  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
  })
}

코드 애니메이션

20개 이상의 구문 강조 테마 제공
접근성을 최적화한 기본 테마

# Define a server for the Shiny app
function(input, output) {
  
  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
    barplot(WorldPhones[,input$region]*1000, 
            main=input$region,
            ylab="Number of Telephones",
            xlab="Year")
  })
}

줄 강조

특정 줄을 강조
추가 줄을 단계적으로 강조

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

실행 가능한 코드

library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess")

LaTeX 수식

MathJax로 수식을 HTML로 렌더링합니다.

\begin{gather*}
a_1=b_1+c_1\\
a_2=b_2+c_2-d_2+e_2
\end{gather*}

\begin{align}
a_{11}& =b_{11}&
  a_{12}& =b_{12}\\
a_{21}& =b_{21}&
  a_{22}& =b_{22}+c_{22}
\end{align}

\[\begin{gather*} a_1=b_1+c_1\\ a_2=b_2+c_2-d_2+e_2 \end{gather*}\] \[\begin{align} a_{11}& =b_{11}& a_{12}& =b_{12}\\ a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \end{align}\]

열 레이아웃

내용을 다양한 너비의 열로 배치합니다.

Motor Trend 자동차 도로 테스트

이 데이터는 1974년 미국 Motor Trend 잡지에서 추출했으며 32대 자동차의 연료 소비와 자동차 설계 및 성능의 10가지 요소를 포함합니다.

	mpg	cyl	disp	hp	wt
Mazda RX4	21.0	6	160	110	2.620
Mazda RX4 Wag	21.0	6	160	110	2.875
Datsun 710	22.8	4	108	93	2.320
Hornet 4 Drive	21.4	6	258	110	3.215
Hornet Sportabout	18.7	8	360	175	3.440
Valiant	18.1	6	225	105	3.460

증분 목록

목록은 선택적으로 단계적으로 표시할 수 있습니다.

첫 번째 항목
두 번째 항목
세 번째 항목

다른 유형의 콘텐츠도 일시 정지를 넣어 단계적으로 표시할 수 있습니다.

프래그먼트

프래그먼트로 텍스트를 단계적으로 표시하고 애니메이션을 적용합니다.

페이드 인

페이드 인하며 위로 이동

페이드 인하며 왼쪽으로 이동

페이드 인 후 반투명 처리

취소선

빨간색 강조

슬라이드 배경

슬라이드에 background 속성을 설정하면 배경색을 바꿀 수 있습니다(모든 CSS 색상 형식 지원).

background-transition 옵션으로 다양한 배경 전환을 사용할 수 있습니다.

미디어 배경

다음 항목도 슬라이드 배경으로 사용할 수 있습니다.

이미지: background-image
비디오: background-video
iframe: background-iframe

절대 위치

이미지나 다른 요소를 정확한 위치에 배치합니다.

자동 애니메이션

자동 애니메이션으로 슬라이드 간에 일치하는 요소를 자동으로 애니메이션 처리합니다.

자동 애니메이션

자동 애니메이션으로 슬라이드 간에 일치하는 요소를 자동으로 애니메이션 처리합니다.

슬라이드 전환

다음 몇 개의 슬라이드는 slide 전환을 사용합니다.

전환	설명
`none`	전환 없음(기본값, 즉시 전환)
`fade`	교차 페이드
`slide`	가로로 슬라이드
`convex`	볼록한 각도로 슬라이드
`concave`	오목한 각도로 슬라이드
`zoom`	들어오는 슬라이드가 화면 중앙에서 커지도록 확대합니다.

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160.0	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160.0	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108.0	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258.0	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360.0	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225.0	105	2.76	3.460	20.22	1	0	3	1
Duster 360	14.3	8	360.0	245	3.21	3.570	15.84	0	0	3	4
Merc 240D	24.4	4	146.7	62	3.69	3.190	20.00	1	0	4	2
Merc 230	22.8	4	140.8	95	3.92	3.150	22.90	1	0	4	2
Merc 280	19.2	6	167.6	123	3.92	3.440	18.30	1	0	4	4
Merc 280C	17.8	6	167.6	123	3.92	3.440	18.90	1	0	4	4
Merc 450SE	16.4	8	275.8	180	3.07	4.070	17.40	0	0	3	3
Merc 450SL	17.3	8	275.8	180	3.07	3.730	17.60	0	0	3	3
Merc 450SLC	15.2	8	275.8	180	3.07	3.780	18.00	0	0	3	3
Cadillac Fleetwood	10.4	8	472.0	205	2.93	5.250	17.98	0	0	3	4
Lincoln Continental	10.4	8	460.0	215	3.00	5.424	17.82	0	0	3	4
Chrysler Imperial	14.7	8	440.0	230	3.23	5.345	17.42	0	0	3	4
Fiat 128	32.4	4	78.7	66	4.08	2.200	19.47	1	1	4	1
Honda Civic	30.4	4	75.7	52	4.93	1.615	18.52	1	1	4	2
Toyota Corolla	33.9	4	71.1	65	4.22	1.835	19.90	1	1	4	1
Toyota Corona	21.5	4	120.1	97	3.70	2.465	20.01	1	0	3	1
Dodge Challenger	15.5	8	318.0	150	2.76	3.520	16.87	0	0	3	2
AMC Javelin	15.2	8	304.0	150	3.15	3.435	17.30	0	0	3	2
Camaro Z28	13.3	8	350.0	245	3.73	3.840	15.41	0	0	3	4
Pontiac Firebird	19.2	8	400.0	175	3.08	3.845	17.05	0	0	3	2
Fiat X1-9	27.3	4	79.0	66	4.08	1.935	18.90	1	1	4	1
Porsche 914-2	26.0	4	120.3	91	4.43	2.140	16.70	0	1	5	2
Lotus Europa	30.4	4	95.1	113	3.77	1.513	16.90	1	1	5	2
Ford Pantera L	15.8	8	351.0	264	4.22	3.170	14.50	0	1	5	4
Ferrari Dino	19.7	6	145.0	175	3.62	2.770	15.50	0	1	5	6
Maserati Bora	15.0	8	301.0	335	3.54	3.570	14.60	0	1	5	8
Volvo 142E	21.4	4	121.0	109	4.11	2.780	18.60	1	1	4	2

인터랙티브 슬라이드

프레젠테이션에 Jupyter 위젯과 htmlwidgets를 포함합니다.

인터랙티브 슬라이드

Observable과 Shiny로 프레젠테이션을 애플리케이션으로 바꿉니다. 구성 요소 레이아웃으로 입력과 출력을 배치합니다.

viewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "talent weight" })
viewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "looks weight" })
viewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: "min fame" })

import { plotActors } from './actors.js';
plotActors(actors, talentWeight, looksWeight, minimum)

미리보기 링크

프레젠테이션 흐름을 끊지 않고 하이퍼링크로 이동합니다.

preview-links 옵션을 사용하면 슬라이드 위에 iframe으로 링크를 열 수 있습니다. 아래 링크를 클릭해 데모를 확인하세요.

Matplotlib: Python 시각화

테마

10가지 기본 제공 테마(또는 직접 만들기)

쉬운 탐색

프레젠테이션의 다른 부분으로 빠르게 이동합니다.

메뉴 버튼(슬라이드 왼쪽 아래)으로 슬라이드 메뉴를 열어 다른 슬라이드로 이동하거나 프레젠테이션 도구에 접근합니다.

m을(를) 눌러 메뉴를 열고 닫을 수도 있습니다.

g을(를) 눌러 ‘슬라이드로 이동’ 모달을 열면 슬라이드 번호나 id로 빠르게 이동할 수 있습니다.

슬라이드로 이동

프레젠테이션의 다른 부분으로 빠르게 이동합니다.

칠판

자유 형식의 그림과 슬라이드 주석

슬라이드 왼쪽 아래의 칠판 버튼으로 칠판을 켜고 끕니다.

슬라이드 왼쪽 아래의 노트 캔버스 버튼으로 현재 슬라이드 위에 그리기를 켜고 끕니다.

b로 칠판을, c로 노트 캔버스를 켜고 끌 수도 있습니다.

관점

o을(를) 눌러 개요 모드를 전환합니다.

Alt를 누른 채 요소를 클릭하면 해당 요소로 확대됩니다. 이 슬라이드에서 지금 해보세요.

발표자 보기

s을(를) 누르거나 프레젠테이션 메뉴의 도구()를 사용해 발표자 보기를 엽니다.

스크롤 보기

r을(를) 누르거나 프레젠테이션 메뉴의 도구()를 사용해 스크롤 보기를 엽니다.

이 슬라이드에서 지금 해보세요. 오른쪽에 스크롤바가 보이고 마우스로 프레젠테이션을 아래로 스크롤할 수 있습니다.

스크롤 보기 동작은 scroll-view 설정으로 구성할 수 있습니다.

저작 도구

Jupyter와 VS Code를 포함한 모든 노트북/텍스트 편집기에서 실시간 나란히 미리보기를 제공합니다.

저작 도구

RStudio에는 통합 프레젠테이션 미리보기 창이 있습니다.

그 밖에도…

터치 최적화(모바일에서도 보기 좋고, 스와이프로 슬라이드를 이동)
바닥글과 로고 (슬라이드별 사용자 정의 바닥글 지정 또는 전역 바닥글 숨김)
자동 슬라이드 (사용자 입력 없이 자동으로 슬라이드 진행)
멀티플렉스 (청중이 자신의 휴대폰, 태블릿, 노트북에서 발표 중인 슬라이드를 따라갈 수 있습니다).