비주얼 스터디

개요

사용자와 상호 작용할 수 있는 동적 매체를 활용한 학습자료를 제작하여 웹사이트를 통해 모든 사람에게 제공합니다.

기존 학습 자료는 책, 칠판, 공책과 같이 정지된 매체를 이용합니다. 그렇다보니 학습 자료와 학습자 사이의 상호작용은 아예 없거나 부분적입니다. 프로그래밍을 이용해 이런 한계를 극복한 새로운 매체로 학습 자료를 만들고자 합니다. 이 새로운 매체는 시간에 따라 움직일 수 있으며 사용자의 입력에 따라 변화할 수 있습니다. 따라서 학습자는 보다 능동적인 자세로 학습에 참여할 수 있고 이를 통해 보다 깊은 이해에 도달 할 수 있습니다. 또한 이 학습 자료는 인터넷을 통해 누구나 제한없이 접근 할 수 있습니다.

목표

• 누구나 쉽게 접근
• 영상, 시각화, 상호 작용을 통한 이해 극대화

프로젝트에 공헌하기

이 프로젝트는 당신의 도움이 필요합니다. 위 목적에 동의하신다면 공헌해주세요.

공통

• 수학, 컴퓨터, 과학 등 자신이 아는 것에 대해서 이해하기 쉽게 문서를 작성해주세요.

당신이 개발자라면

• 이 프로젝트의 생산성, 접근성, 성능을 올릴 수 있도록 도와주세요.
• d3.js, p5.js, three.js 등으로 학습자의 이해를 돕는 시각화 자료를 만들어주세요.

개발자가 아니라면

• 불편 사항 및 개선 사항을 GitHub 이슈에 남겨주세요.
• 학습 자료에서 설명을 보충하거나 개선해주세요.
• 이 글을 더 매끄럽게 개선시켜주세요.
• 다른 사람들에게 이 프로젝트를 소개해주세요.
• 이 프로젝트를 수업에 활용해주세요.

공헌 시작하기

본 프로젝트는 Vue.js의 프레임워크인 Nuxt.js를 이용합니다. 이 프로젝트의 소스코드를 컴퓨터에서 실행하기 위해서는 Node.js가 필요합니다. 스타일 작성은 CSS전처리기인 SASS(SCSS)를 이용합니다. 추가적으로 생산성과 스타일의 통일성을 위해 tailwind를 사용합니다. 하지만 간단한 수업 문서 작성을 할 경우 Vue.js나 Nuxt.js에 대해서 깊게 아실 필요는 없습니다. 당신이 개발자가 아니더라도 프로젝트에 공헌 할 수 있게 돕겠습니다. 만약 문서 작성 중에 프로그래밍 적인 문제에 부딪힌다면 GitHub 이슈에 내용을 남겨주세요.

1. GitHub에 로그인을 한 후 레포지토리의 우측 상단에 Fork 버튼을 클릭합니다.
2. 본인 계정에 복사된 저장소에서 Code버튼을 클릭하여 표시된 저장소의 주소를 복사합니다.
3. 터미널에 git clone [복사한 저장소 주소]을 입력하여 GitHub으로부터 프로젝트의 소스코드를 컴퓨터에 다운로드 합니다.
4. Node.js가 없는 경우 여기서 설치합니다.
5. 터미널에 npm install을 입력하여 해당 프로젝트를 실행하기 위한 의존성을 설치합니다.
6. 터미널에 npm run dev를 입력하여 해당 프로젝트를 컴퓨터에서 실행시킵니다.
7. 브라우저를 열어 http://localhost:3000에 접속합니다.

스크린샷