기조나 Powerpoint 대신 VS 코드를 사용하는 방법

This article was originally written on my personal blog.
I am republishing it here for the DEV community.

지난주I spoke at Bulgaria PHP 2019.the great feedback I got 이후 몇 명이 나에게 강연의'최초 내용'을 물었다.사실 나는 일반적인 프레젠테이션 도구를 사용하지 않고 코드 편집기에서 모든 것을 완성했다. VisualStudio 코드이다.
다음은 내가 왜 이렇게 했는지 이유와 방법이기 때문에 나는 그것을 참고할 수 있다. 나의 설명을 되풀이하는 것이 아니라.그것도 네가 이렇게 하도록 격려할 수 있기를 바란다.나는 이것이 강력한 기술 담화 형식이라고 생각한다.

TL;DR I made a VS Code Extension to help you do the same.
👉 It's called Slides.

VS 코드는 데모 도구로 사용됩니다.그런데 왜?

응, 나는 깨우침을 받았다.읽은 적이 있어요the original blog post from André Staltz. 아주 좋아해요.나는 네가 한번 읽어 보라고 건의하지만, 다음은 나의 총결이다.

기술 강연에서 진정으로 중요한 것은 내용이다.코드 편집기를 사용하는 것은 정말 중요한 내용을 주목하는 데 도움이 된다.너는 애니메이션을 좋아하지 않는다. 너는 단지 내용을 제공하기만 하면 된다.

당신이 코드로 기술 개념을 해석할 때 실제 조작에서 이 점을 설명하는 것이 가장 좋다.공백 파일에서 실시간으로 인코딩합니다.사람들에게 흑마법이 없다는 것을 보여주면 네가 말한 것이 확실히 효과가 있다.

사람들이 당신의 정보를 이해하는 데 도움을 줍니다.마치 네가 동료에게 어떻게 일을 하는지 보여주는 것 같다.

코드를 표시하려면 프레젠테이션 도구에서 전환하지 않고 코드 편집기에 남겨 두는 것이 좋습니다.

필요한 경우 이미지를 표시할 수 있습니다.

나의 강연은 육각형 건축의 비밀에 관한 것이다.언어, 체계 구조, 도구가 어떻든지 간에 코드 라이브러리 배후의 보편적인 진리가 무엇인지 사람들에게 이해하게 하고 싶다.그래서 코드를 보여주고 싶어요.나는 구체적인 업무 실례로 이 이론을 설명해야 한다.
이것이 바로 내가 이번 강연에서 VS 코드만 사용하기로 결정한 이유다.너무 좋아요!
지금 나는 약간의 것을 배웠다.만약 너도 이렇게 하고 싶다면, 나는 너와 함께 나누는 것이 매우 도움이 될 것이라고 생각한다😉

VS 코드를 사용하여 훌륭한 프레젠테이션 작성 방법

이론을 떠나 VS 코드만으로 멋진 연설을 할 수 있는 비결은 다음과 같습니다.

가격 인하 문서의 원시 내용

도표와 도면을 통해 풍부한 내용을 제공

실행 가능한 빈 파일에서 실시간 인코딩

일반 터미널을 사용하여 선명도 향상

일을 순조롭게 하다

컴퓨터 뒤에 있지 말고 마우스로 클릭

가격 인하 문건의 원시 내용

내용을 주목하다.간단한 가격 인하 방식으로 이 내용을 쓰시오.보여줘.
당신의 (좋은) 내용을 더욱 편안하게 보기 위해서는 VS 코드를 적절하게 설정하는 것이 좋습니다.안드레 스텔츠의 조언에 따르면 가장 좋은 것은:

라이트 주제를 사용합니다.대비도가 항상 좋아서 방이 아무리 어두워도 사람들이 읽을 수 있다.

방 뒤에서 누구나 읽을 수 있도록 충분한 글씨체를 사용하세요.

방해에서 벗어나다.사이드바와 모든 것을 숨기다.파일 내용만 표시하면 됩니다.

도표와 도면을 통해 풍부한 내용을 제공하다

나는 육각형 건축물에 대해 이야기했다.몇몇 도표를 사용하면 이 이론을 더욱 쉽게 이해할 수 있다.이런 상황에서 나는 ASCII 예술에서 운을 만나고 싶지 않다.
나는 다른 곳에서 그래프를 그리고 그림을 내보냅니다. (이것은 심지어 Keynote일 수도 있습니다.)VS 코드는 이미지를 표시하므로 슬라이드 쇼와 같습니다.

이번 강연을 위해서 나는 심지어 손으로 그려서 내가 말한 모든 것을 설명하기로 결정했다.그러나 이것은 개인을 겨냥한 것이고 이번 강연을 겨냥한 것이다.이것도 제가 아까 강연했던 슬라이드를 준비했기 때문이에요.🤓

실행 가능한 빈 파일에서 실시간 인코딩

나는 자모순으로 파일의 이름을 지었다.편의를 위해서 나는 계수기를 접두사로 사용한다.그래서 저는 01.md,02.md,03.jpg 등등을 선택했습니다.
실시간 인코딩을 원할 때, 나는 빈 파일을 넣고, 그 중에서 인코딩을 할 것이다.예: 04.php 또는 04.js.
서류를 비우는 것이 가장 좋다.만약 안에 내용이 있다면 관중들이 이미 틀림없이 알고 있는 것일 것이다.
이것은 단지 나의 코드 편집기의 일반적인 파일이기 때문에, 나는 나중에 터미널에서 코드를 실행할 수 있다.흑마법은 없다!

일반 터미널을 사용하여 선명도 향상

터미널하면 우리 개발자들은 매우 화려할 것이다.나는 너의 배치가 나의 것과 다르다고 내기를 걸겠다.우리는 모두 자신의 구체적인 수요와 개인 스타일에 따라 도구를 조정할 것이다.괜찮아요!
그러나 대화 과정에서 신경을 곤두세울 수도 있다.나는git의 별명이나 셸 테마를 떠올리게 하고 싶지 않다.나는 그들이 나의 강연 내용에 관심을 가지기를 바란다.
그래서 나는 강연 과정에서 그런 화려한 것들을 없애자고 제안한다.아무도 놀라게 하지 않을 기본적인 bash 셸 하나면 충분하다.
나도 VS 코드 삽입식 단말기를 사용하는 것을 더 좋아하기 때문에 내 코드 편집기에 남는다. 이것이 바로 내가 왜 Keynote를 사용하지 않는 이유이다.이렇게 하면, 나는 그것을 나의 단말기를 사용하는 비화식 버전으로 설정할 수 있으며, 내가 매일 사용하는 단말기를 변경할 필요가 없다.

실시간 인코딩을 원활하게 하다

실시간 인코딩은 위험한 프레젠테이션 형식이다.특히 네가 이렇게 하는 것에 익숙하지 않을 때.청중 앞에서 자신 있게 코드를 작성하고 강연의 오락성을 유지하려면 많은 연습이 필요하다.
너는 글자를 잘못 쓸 것이다. 왜냐하면 너의 손은 스트레스로 인해 떨리기 때문이다.너는 기본적인 것을 잊어버릴 것이다. 왜냐하면 모든 사람이 너를 보고 있기 때문이다.그러나 가장 중요한 것은 인코딩을 시작할 때 시청자들과의 연락을 끊을 수도 있다는 것이다.두 가지 이유가 있습니다.

컴퓨터를 볼 때 더 이상 컴퓨터를 보지 않는다.네가 이렇게 할 때, 너는 사람과의 시각적 관계를 깨뜨린다.시각적 연결은 훌륭한 강연을 발표하는 데 매우 중요하다.때로는 그것을 깨는 것이 좋다. 네가 이 기간 동안 그들과 계속 이야기를 나누기만 하면.문제는......

너도 그만해.적어도 너의 데이터는 훨씬 느리다.당신이 쓰고 싶은 코드를 생각할 때, 코드는 'hmmmmm' 로 가득 차서, 동시에 말에만 집중할 수 없다.

컴퓨터를 보면서 다음 단계에 무엇을 입력해야 하는지 기억하고 의미 있는 정보를 말하지 않으려고 할 때 사람들은 지루함을 느끼고 그것과 어긋난다.
이게 왜 연습이 필요한 거야?이렇게 하면 너는 코드를 작성할 때 의미 있는 강연을 유지할 수 있다.아니면 타자를 치면서 청중을 볼 수도 있다.그럴듯한 실시간 인코딩이 얼마나 많은 준비를 필요로 하는지 과소평가하지 마라!사람들 앞에서 코드를 짜서 재미있게 하기란 정말 어렵다.
따라서 다음과 같은 두 가지 옵션이 있습니다.

연습, 연습, 사람들 앞에서 연습, 네가 충분히 편안해질 때까지 연습해라.

사용the VS Code Hacker Typer extension.그것은 네가 생방송 코드를 미리 녹음하고 생방송에서 재방송할 수 있도록 허락한다.

But, that's not live-coding anymore! What's the point? Why not just showing code in slides then?

주요한 차이는 교부에 있다.
내 강연에서, 나는 사람들이 코드 편집기의 상하문에서 공백 파일에서 작성 중인 코드를 보길 바란다.코드를 작성한 후에 나는 그것을 실행할 수 있다.나는 이것이 가장 좋은 이해라고 생각한다.
나의 타자 기술은 회의 참가자들에게 결코 중요하지 않다.내가 저장한 宏을 다시 놓을 때, 나는 주의력을 강연에 집중하고 청중과 연락을 유지할 수 있다.내가 말한 것이 더 재미있을 뿐만 아니라, 사람들이 스크린에서 본 내용과 관련이 있다.
물론 준비와 연습이 있어야만 순조롭게 진행될 수 있다.
너는 아마 이 생각을 좋아하지 않을 것이다. 괜찮아.나는 중요한 것은 강연의 내용과 강연이라고 생각한다.이것은 정말 사람들에게 멋진 내용을 제공하는 데 도움이 된다.

말할 때 컴퓨터 뒤에 계속 있지 말고 마우스로 눌러라

나는 너에게 강연을 오락적으로 하기 위해 관중과 상호작용하는 것이 얼마나 중요한지 말했었다.
인코딩할 때, 너는 컴퓨터 뒤에 갇혀 있다.괜찮습니다.하지만 인코딩을 하지 않을 때 밖으로 나갈 수 있다면 사람들과 더 가까워질 수 있다.컴퓨터 스탠드 뒤에 숨지 마라.너의 관중과 상호작용하다.
이 점을 하려면 슬라이드를 원격으로 전환할 수 있어야 한다.만약 당신이 1분 간격으로 당신의 컴퓨터로 돌아가서 다음 슬라이드를 볼 필요가 없다면, 효과가 더욱 좋을 것이다.이것이 바로 클릭기의 용도다!
근데 어떻게 VS 코드의 클릭기를 쓸 수 있어요?내 말은 슬라이드는 사실상 다른 옵션에서 열린 파일이라는 것이다.그렇다면 당신의 클릭기는 어떻게 VS 코드를 다음 옵션에 들어가게 합니까?
답안은 거의 문제에 있다.이 점을 하려면 두 가지가 필요하다.

VS 코드에서 다음 탭으로 이동하는 바로 가기를 정의합니다.이 명령은 workbench.action.nextEditor입니다. 키보드 단축키를 구성할 수 있습니다.

사용자가 정의한 단축키와 일치하도록 클릭기를 다시 비추십시오.

클릭기를 어떻게 다시 비추느냐는 운영체제와 클릭기에 달려 있다.MacOS에서, 나는 Karabiner-Elements 라는 도구를 사용하여 나의 클릭기를 다시 비추었다.나는 this tutorial to remap a wireless presenter가 매우 유용하다는 것을 발견했다.

내가 사용한 설정

André Staltz의 권장 사항에 따라 일반적으로 앞의 몇 가지 설정을 확인하는 데 사용됩니다.

{
  "workbench.colorTheme": "GitHub Clean White",
  "workbench.colorCustomizations": {
    "editorCursor.background": "#ffffff",
    "editorCursor.foreground": "#0000bb",
    "editor.lineHighlightBackground": "#f0f0f0",
    "editor.selectionBackground": "#aaeeff"
  },
  "workbench.statusBar.visible": false,
  "workbench.activityBar.visible": false,
  "editor.minimap.enabled": false,
  "explorer.openEditors.visible": 0,
  "editor.renderWhitespace": "none",
  "editor.renderIndentGuides": false,
  "editor.fontFamily": "SF Mono",
  "terminal.integrated.fontFamily": "SF Mono",
  "editor.fontWeight": "600",
  "editor.fontSize": 24,
  "terminal.integrated.fontWeight": "800",
  "terminal.integrated.fontSize": 28,
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.shell.osx": "/bin/bash",
  "editor.formatOnSave": false,
  "workbench.editor.enablePreview": false
}

GitHub Clean White 테마와 SF Mono를 설치했습니다. GitHub처럼 보이기 때문에 개발자들은 이 테마에 익숙해졌을 것입니다.화사한 주제나 글씨체보다 읽을 만하고 신경 쓰지 않는다.
강연이 시작되었을 때, 나는 방 뒤에 가서 글씨체의 크기를 검사했다.나는 그것을 조정해서 뒤에서 읽기에 매우 편안하게 했다.

확장을 통한 대부분의 프로세스 자동화

내 연설의 시작을 되돌아보면 다음과 같은 것이 필요하다.

내 VS 코드 설정 업데이트

슬라이드 사이를 전환할 수 있도록 바로 가기를 구성합니다

.

모든 파일을 순서대로 열기

강연이 끝날 때, 나는 보통 그것을 처리한다. 왜냐하면 내 컴퓨터에서 강연을 하는 것은 불편하기 때문이다.이것이 바로 슬라이드 모드입니다.
나는 수동으로 왔다 갔다 하고 싶지 않기 때문에 확장에서 자동화를 실현하고 그것을 발표했다.그것의 이름Slides은 네가 직접 시험해 볼 수 있다.

슬라이드에서는 VS 코드를 프레젠테이션 도구로 쉽게 사용할 수 있습니다.슬라이드 쇼 모드를 전환할 수 있습니다.프레젠테이션 설정을 조정하고 단일 바로 가기로 슬라이드를 엽니다.그것은 네가 슬라이드 사이를 내비게이션할 수 있게 한다.마지막으로 완료되면 슬라이드 모드를 종료할 수 있습니다.
당신은 어떻게 생각합니까?너는 다음 강연에서 VS 코드를 사용할 거니?만약 없다면, 무엇이 너를 방해했니?