웹은 전세계를 잇는 가장 보편적인 매체입니다. WebGL, Web Audio 등 웹 기술이 발달함에 따라 인터랙티브하고 흥미로운 미디어 컨텐츠들을 기존의 웹사이트에 반영하는 일도 늘어나고 있으며, 동시에 웹사이트를 미디어로 사용하는 예술 작품도 많아지고 있습니다.
이번 워크샵에서는 Three.js 라는 프레임워크를 활용해 최근 각광받고 있는 3D 웹사이트를 제작하는 방법을 배워봅니다. 또한, 오디오에 반응해 3D 오브젝트를 움직이는 것 같은 audio-reactive한 웹사이트를 만드는 방법도 알아봅니다.
The web is the most universal medium that connects the world. With the advancement of web technologies such as WebGL and Web Audio, the integration of interactive and engaging media content into traditional websites is increasing. At the same time, more artists are utilizing websites as a medium for their creative works.
In this workshop, participants will learn how to create modern 3D websites using the popular framework Three.js. Additionally, they will explore techniques to develop audio-reactive web pages, where 3D objects respond dynamically to sound.
강사: 공재이 @jtodaone
공재이는 오디오비주얼을 중심으로 다양한 디지털 매체를 활용하는 미디어 작가다. 픽션적인 시나리오 속에서 동시대 사회가 갖는 다양한 현상과 문제들을 조명한다. WeSA Festival을 포함해 다양한 공연 및 전시에 참여했으며, 현재 한국예술종합학교 멀티미디어영상과 전문사과정에 재학 중이다.
일정: 7월 1일 토요일 오후 2시부터 6시 20분까지 (총 4시간, 중간 20분 쉬는 시간 포함)
대상: HTML, JavaScript에 대한 기초 지식이 있고, 오디오-리액티브한 웹 페이지를 만드는 것에 관심이 있는 사람
(기초 지식이 없으신 분들도 강의를 따라오실 수 있도록 템플릿을 준비 예정입니다.)
정원: 8명
내용:
- Vue.js를 통한 웹 프론트엔드 기초 (개발 환경 셋업 및 구조 설명)
- Tres.js (three.js + Vue)를 통한 오디오 리액티브 그래픽 만들기
- 화면 상에 3D 오브젝트 렌더링하기
- 오브젝트 움직이기
- 오디오 파일 재생하기
- 오디오 분석 정보 얻기 (Three.js AudioAnalyzer / Web Audio API – Audio Analyzer)
준비물:
랩탑 (Mac 혹은 Windows, 기본적으로는 Mac을 더 선호함), 이어폰 혹은 헤드폰
수강 신청:
- 구글폼(프로필 링크 참조) 작성
금액 및 장소:
- 금액: 60,000원 (계좌: 하나은행 918-910004-47704 주식회사 위사)
- 장소: 서울시 용산구 서빙고로 67, 103동 1107호 (파크타워아파트 오피스텔동) 위사 사무실
*신청순이 아닌 입금순으로 마감됩니다.
*워크숍 참여 확정시 안내 메일이 발송됩니다.
환불 규정:
2023년 6월 28일 23시 59분까지 환불 가능
기타 안내:
워크숍은 강의 형태로 진행됩니다.
노트북을 휴대하여 직접 실습을 해도 되고, 강의를 듣기만 해도 됩니다.
Instructor:
공재이 [@jtodaone]
공재이 is a media artist who utilizes various digital media with a focus on audiovisual content. Through fictional narratives, they shed light on contemporary social phenomena and issues. Gong has participated in various performances and exhibitions, including WeSA Festival, and is currently pursuing a Master’s degree in Multimedia at Korea National University of Arts.
Schedule:
- Date: July 1 (Saturday), 2:00 PM – 6:20 PM (Total: 4 hours, including a 20-minute break)
Target Audience:
Anyone with basic knowledge of HTML and JavaScript and an interest in creating audio-reactive web pages.
(A prepared template will be provided to help those without prior knowledge follow the lecture.)
Capacity: 8 participants
Workshop Content:
- Introduction to web front-end basics with Vue.js (setup and structure)
- Creating audio-reactive graphics using Tres.js (Three.js + Vue)
- Rendering 3D objects on screen
- Animating objects
- Playing audio files
- Analyzing audio data (Three.js AudioAnalyzer / Web Audio API – Audio Analyzer)
Required Materials:
- Laptop (Mac or Windows, Mac preferred)
- Earphones or headphones
Registration:
Fill out the Google Form (see profile link)
Fee & Venue:
- Fee: 60,000 KRW (Account: Hana Bank 918-910004-47704, WeSA Co., Ltd.)
- Venue: WeSA Office, Park Tower Apt. Office Building, 1107, 67 Seobinggo-ro, Yongsan-gu, Seoul
*Registrations will be confirmed based on payment, not submission order.
*Confirmation emails will be sent once participation is secured.
Refund Policy:
- Full refund available until June 28, 11:59 PM
Additional Information:
The workshop will be conducted in a lecture format.
Participants may bring their laptops for hands-on practice or simply attend the lecture.