언어 설정

p5.js 튜토리얼 기여를 위한 가이드

이 튜토리얼은 테가 브레인(Tega Brain)이 제작하였습니다.

p5.js 튜토리얼은 이에 열정을 느끼는 교육자와 모든 분들께 열려있습니다. p5.js 프로젝트는 보다 다양한 사람들을 위한 크리에이티브 코딩 및 오픈 소스 개발을 추구하며, 모든 개발 과정을 공개하는 것을 하나의 즐거운 과정으로 여깁니다. 현재까지 제작된 튜토리얼은 p5 학습, 프로그래밍 기술, 오픈소스 프로젝트 공헌 방법 등에 대한 내용을 다룹니다.

새로운 튜토리얼을 제안하거나, 튜토리얼 준비 및 기여에 대한 가이드라인 제작을 환영합니다.

커뮤니티 기여 시작하기:

  • 우선, 제안하려는 튜토리얼이 현재 진행 중인 내용들과 겹치는 지의 여부를 이 스프레드시트 에서 확인하세요. 만약 제안하고자 하는 튜토리얼 주제가 현재 진행 중인 것이라면, 해당 주제의 마무리 작업 또는 p5.js 웹사이트상의 공개 작업에 참여할 수 있고 관련해서는 아래의 이메일로 연락주시면 감사하겠습니다.
  • 제안하려는 튜토리얼이 스프레드시트 리스트에 포함되지 않는다면, 튜토리얼에 대한 간략한 설명을 [email protected]로 보내주세요.

p5.js 튜토리얼 온라인 공개 준비하기:

튜토리얼을 p5.js 웹사이트상 공개할 준비가 되었다면, 다음의 단계를 따라주세요.

튜토리얼 콘텐츠를 이 기본 구조 에 따라 tutorial-name.hbs 파일로 변환해주세요. 콘텐츠에는 아래와 같은 헤더(header)가 반드시 포함되어야 합니다:

Screenshot of example header for the file referenced in previous paragraph.

튜토리얼을 포함한 폴더는 p5js 웹사이트 상 'tutorials' 폴더에 배치됩니다. index.hbs 파일은 p5.js 튜토리얼 랜딩 페이지 에 해당하며, test-tutorial.hbs 파일은 테스트 튜토리얼입니다.

모든 콘텐츠는 페이지상 <section > </section> 태그에 포함되어야하며, <h1> 와 <h2> 태그, 그리고 <p> 문단 태그로서 문서 형식이 정의되어야 합니다. 형식 예시는 다음의 페이지에서 확인해보세요: 테스트 튜토리얼

튜토리얼이 이미지 파일을 포함할 경우, p5 웹사이트의 에셋(assets) 폴더에 배치됩니다. 파일 경로는 아래와 같이 src/assets/learn/test-tutorial/images에 해당합니다.

Screenshot of a GitHub page showing the file path referenced in previous paragraph.

페이지의 HTML에 형식을 맞추기 위해 다음의 태그를 사용하세요:


<pre><code class="language-javascript">
Your code here!
</code></pre>

웹페이지에 p5.js 스케치 올리기(embedding)

p5.js를 사용한다는 것은 튜토리얼 설명을 위해 예제에 각종 애니메이션, 인터랙션, 그리고 수정 기능을 포함할 수 있음을 뜻합니다. 이 경우, 튜토리얼 예제는 p5.js 스케치의 형태로 준비되어야하며, 튜토리얼 페이지상 다음의 두가지 방식으로 임베드될 수 있습니다.

  1. 만약 튜토리얼 예제가 p5.js 웹페이지의레퍼런스와 같이 코드를 수정할 수 있는 형태라면, p5js 위젯을 사용하여 HTML 페이지에 임베드할 수 있습니다.이 가이드를 따라 위젯으로 p5js를 임베드하는 방법에 대해 알아보세요. 가이드는Toolness가 작성하였습니다. 이러한 사례에 해당하는 튜토리얼이 작동하는 모습은 테스트 튜토리얼 페이지에서 확인할 수 있습니다.
  2. 튜토리얼 예제가 애니메이션 그리고/또는 인터랙션을 포함하나 코드 수정 기능을 포함하지 않는다면, 다음과 같이 iframe을 사용하여 p5.js 스케치를 페이지상 임베드할 수 있습니다.

iframe을 사용하여 p5 스케치 임베드하기

iframe은 한 페이지상 다른 페이지를 보기 위해 만드는 창문틀과도 같습니다. 이 창문틀을 따라 페이지상의 다른 내용들로부터 구분되는 셈이지요. 이 경우, p5.js 스케치를 포함한 index.html를 보여주는 창문틀의 역할을 합니다.

Illustration of a p5.js iframe embedded within a HTML page.

스크린샷에 보이듯, p5 웹사이트 /src/assets/learn 폴더에 스케치의 이름을 딴 별도의 폴더를 새로이 생성하여 여러분의 튜토리얼용 p5 스케치를 올리세요. 이 경로를 통해 iframe에서 보여줄 모든 이미지와 p5 스케치가 저장됩니다.

Screenshot of a GitHub page showing an example file path for tutorial photos.

여러분의 p5 예제를 포함한 폴더의 하위에는 sketch.js 파일과 embed.html 파일이 반드시 있어야 합니다.

Screenshot of a GitHub page showing an example of an embed.html file for a tutorial sketch.

embed.html 파일이 웹사이트의 p5 라이브러리와도 일치하는지를 확인하세요. 만약, 여러분의 파일 구조가 위와 같다면 p5.js 라이브러리 경로는 "../../../js/p5.min.js" 일것 입니다.

그리고나면, 튜토리얼 콘텐츠를 담고 있는 .hbs 파일상 p5js index 파일을 iframe의 형태로 임베드할 수 있습니다. iframe 임베드를 위한 코드는 다음과 같습니다:


<iframe src="http://p5js.org/assets/learn/tes-tutorial/embed.html" width="600" height="400">
</iframe>

iframe 서식 바꾸기:


<style> iframe{ border: none; } </style>

iframe을 이용한 무제 스케치 작동 확인하기:

http://staging.p5js.org/assets/learn/test-tutorial/embed.html

위의 스케치가 p5 site에 임베드된 모습:

http://staging.p5js.org/learn/test-tutorial.html

한가지 주의해야할 점은, iframe의 사이즈는 반드시 직접 조정해야된다는 것입니다. 특히, 튜토리얼 콘텐츠의 크기가 규격화된 경우 그러합니다.

또한, p5.js 라이브러리 파일 연결 링크는 튜토리얼 콘텐츠가 포함되어있는 .eps 페이지가 아닌, 스케치를 렌더링하는 별도의 html 페이지에 위치합니다. (이 경우, 해당 html 페이지의 명칭은 embed.html입니다.)

p5.js 스케치를 임베드하는 방법에 대해 더 알고 싶다면 다음의 링크를 확인하세요: 링크

마무리하기

앞서 언급된 메일을 통해 튜토리얼 콘텐츠 확인을 마쳤다면, p5.js-website repository를 Fork 하세요. 그리고 상기된 방법에 따라 콘텐츠를 준비하고 풀 리퀘스트(pull request)를 하여, 여러분의 기여 내용이 웹사이트에 공개될 수 있도록 하세요!

감사합니다!