주요 내용
코스: 컴퓨터 프로그래밍 > 단원 4
단원 8: 심화 개발 도구칸아카데미 밖에서 ProcessingJS 사용하기
칸아카데미는 꽤 괜찮은 에디팅 환경을 가지고 있습니다. 실시간으로 업데이트되고, 도움이 될만한 에러도 알려주고, 넘버 스크러버와 색상 선택기도 제공합니다. 칸아카데미의 환경은 초보 프로그래머를 생각해 디자인했습니다. 매일 초보 프로그래머 수 천명이 들어오는데 JavaScript를 더 쉽게 배울 수 있도록 하고 있습니다.
JavaScript에 익숙해지고 더욱 길고 복잡한 프로그램을 개발하기 시작할수록 코딩 환경에 다른 기능이 필요해지기 시작할 것입니다. 실시간 업데이트를 원하지 않을 수도 있고, 코드를 여러 파일에 나누어 저장하거나 버전 관리 시스템이 필요할 수도 있습니다. 아니면 그냥 ProcessingJS 프로그램을 웹 사이트에 통합시키도 싶을 수도 있죠.
그렇다면 ProcessingJS 프로그램을 칸아카데미 밖에서 프로그래밍 하는 것이 좋을 수 있습니다. 데스크톱 에디터에서는 파일에 프로그램 코드를 복사하는 것만으로는 프로그램이 작동하지 않습니다. 왜 그럴까요?
ProcessingJS는 웹 기술 위에 지어진 라이브러리입니다. 칸아카데미에서 프로그램을 만들면, 사실 칸아카데미 에디터가 보이지 않게 웹 페이지(HTML 파일)를 만들어서
<canvas>태그를 넣고, ProcessingJS JavaScript 라이브러리를 불러온 후에 프로그램 코드를 실행합니다.칸아카데미 밖에서 프로그램을 만들고 싶다면 여러분이 직접 그러한 HTML 파일을 만들어야 한다는 뜻입니다.
다음 예제를 사용해 시작해 보세요:
위 예제는 칸아카데미 웹 페이지 환경을 사용해 만든 것이지만 다른 코드 에디터 환경에 붙여 넣어도 괜찮습니다.
그 탬플릿에 프로그램 코드를 붙여 넣으면 아마 모든 것이 완벽히 작동할 것입니다. 좋습니다!
모든 것이 완벽히 작동하지 않는다면 탬플릿이 칸아카데미와 다른 ProcessingJS 버전을 사용하기 때문일 수도 있습니다. 칸아카데미 버전은 특수하게 칸아카데미 안에서 사용할 목적으로 만들어졌기 때문에 다른 곳에서 개발을 할 때에는 공식 ProcessingJS 라이브러리 사용을 추천합니다.
다음은 공식 버젼과 칸아카데미 버전의 주요 차이입니다:
- 칸아카데미는 전역 불리언에
mousePressed대신mouseIsPressed를 사용합니다. 또한 칸아카데미는keyPressed대신keyIsPressed를 사용합니다. 코드를 탬플릿에 복사할 때mouseIsPressed와keyIsPressed를 바꾸어야 한다는 뜻입니다. - 칸아카데미는 모든 각도를 나타내는 매개변수에 호도법 대신 육십분법을 사용합니다. 프로그램에서 각도를 나타내는 데 육십분법을 사용했다면
radians()를 사용해 변환하면 됩니다. - 칸아카데미는 이미지와 소리에
getImage()와getSound()를 사용하는데, 이는 공식 버전에는 존재하지 않습니다. 이미지는PImage를 사용하면 되고, 소리를 재생하려면<audio>태그를 만들어야 합니다.
공식 버전은 이미지 처리와 더 많은 3차원 기능 등 더 많은 기능을 가지고 있습니다. 이는 문서를 참조하세요.
여러분이 칸아카데미 밖에서 만든 프로그램이 어떨지 정말 궁금하네요. 칸아카데미 ProcessingJS 버전으로 변환하거나 칸아카데미 웹 페이지 환경에 올려서 공유해 보았으면 좋겠습니다.
다음에는 데스크톱 에디터와 디버깅 도구에 대해서 알아보겠습니다.
