codestudy with rawside
JavaScript Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
study1
study2
readme.md

readme.md

코드스터디 CodeStudy

SeMA 비엔날레 미디어시티서울 <불확실한 학교> 프로그램의 참여 작가인 곽규섭씨와 협력 작가인 스투키 스튜디오가 2회에 걸쳐 진행한 코드스터디의 목표 및 진행과정 등에 대한 설명, 예제 파일입니다. 이 문서는 코드스터디 진행을 담당했던 스투키 스튜디오가 작성하였습니다.

일시

  • 사전 모임 : 2016년 10월 19일(수) 16:30 ~ 18:00
  • 1차 스터디 : 2016년 11월 8일(화) 16:00 ~ 18:10
  • 2차 스터디 : 2016년 11월 15일(화) 17:10 ~ 19:00

장소

  • 로사이드(rawside)

참여자

  • 참여 작가 : 곽규섭
  • 진행 : 김태경 & 정유미 @stuckyi studio
  • 참관 : 고재필 @rawside, 곽동욱 (곽규섭 작가 아버님)

코드스터디 진행 배경

  • <불확실한 학교> 참가자 전시 "상호의존"에 일부로 코드스터디를 진행하고, 진행한 내용을 정리하기로 하였습니다.

  • 곽규섭 작가는 손그림 뿐만이 아니라 그림판, 포토샵, 일러스트레이터 등을 활용하여 캐릭터, 동물, 식물, 물건 등 다양한 소재로 꾸준히 그림을 그리고 있으며, 컴퓨터 및 블로그에 차곡차곡 아카이빙하고 있습니다.

  • <불확실한 학교> 프로그램에서 코딩을 배우는 과정에서 코드를 수정 및 응용하면서 남다른 흥미를 보였고, 추가적으로 공부를 하고 싶어하는 상황이었습니다.

  • 스투키 스튜디오는 웹에서 사용자가 능동적인 정보 탐색이 가능하도록 정보를 가공하고 전달하는 방식을 탐구하고 관련 작업을 하고 있는 스튜디오로, <불확실한 학교> 프로그램에서 P5.js 수업 보조 및 HTML/CSS 부분의 교육을 담당하였습니다.

  • 총 4시간 가량의 짧은 스터디이지만 곽규섭 작가가 코딩을 통해 자신의 작업을 아카이빙하거나 창작을 하는 새로운 방식을 좀더 알게되면 좋을 것이라는 생각으로 코드스터디를 진행하게 되었습니다.


코드스터디 진행 과정

1.코드스터디 목적 및 방향성 수립
2.사전 미팅
3.커리큘럼 작성 및 예제 준비
4.1차 스터디
5.2차 스터디


> 코드스터디 목적 및 방향성 수립

코드 스터디를 진행하기로 한 후, 스투키 스튜디오는 곽규섭 작가가 어떤 프로그래밍 언어를 학습해야하고, 코드를 배우는 것이 어떤 점에서 유익할지 나름 그 이유에 대해 생각해보는 시간을 가졌습니다.

다음과 같은 질문들에 대해 답을 생각해보았습니다.

  • 규섭씨가 어떤 부분에 흥미가 있는지
  • 코딩을 어떤 목적으로 더 배워야할지
  • 스터디가 끝났을 때 어떤 작업을 어떻게 이어나갈 수 있을 지
  • 규섭씨가 독자적으로 학습하려는 의지가 어느 정도 있을 지
  • 영어로 된 코딩 참조 문서들을 보면서 학습할 수 있을 지

위의 질문들을 바탕으로 우리는 곽규섭 작가가 코드를 배우는 목적은 크게 봤을 때 두 갈래가 될 수 있다고 생각했습니다.

  1. 본인의 작업을 체계적으로 모으고 탐색할 수 있는 소개 및 아카이빙용 웹사이트를 제작하는 것
    지금까지 하드디스크와 블로그를 통해 꾸준이 쌓아져왔지만 분류가 잘 되지 못한 것을 사이트를 제작하면서 체계적으로 분류하고, 인터넷이 연결이 된 환경이라면 어디서나 자신의 작품을 관람할 수 있게 만드는 것

  2. 지금까지의 창작물을 기반으로 한 재창작
    기존에 일일히 수작업을 했던 부분을 코딩을 통해 컴퓨터에게 맡김으로써 노동력을 절감하고, 상호작용을 통해 예측하지 못한 재미있는 결과를 도출할 수 있는 인터랙티브한 캔버스를 만들어 보는 것

2회 총 4시간 동안 진행할 예제를 1을 목적으로 할지, 2를 목적으로 할 지 고민을 했습니다. 지속가능성, 시간적 한계 등을 지표삼아 고민한 결과 2를 목적으로 스터디를 진행하기로 했습니다. 코드 스터디를 통해 프로그래밍 문법을 완벽히 이해하거나, 코딩을 통해 상용화할 수 있는 창작물을 만들지는 못하더라도, 코드로 창작을 하는 의미나 이유를 알게끔 하고 흥미를 더 가질 수 있게끔 하자는 목표를 갖고 커리큘럼을 짜게 되었습니다.


> 사전 미팅

사전 미팅에서는 주로 규섭씨에 대해 궁금한 점을 여쭤보았고, 코드 예제 작성에 필요한 규섭씨가 제작한 이미지 파일을 받아왔습니다. 그리고 로사이드 고재필, 김인경, 김효나씨와 코드스터디의 방향성 및 기존에 로사이드에서 진행하던 아트링크와의 차이점을 함께 이야기한 뒤 구체적인 일정을 확인했습니다.


> 커리큘럼 작성 및 예제 준비

  • 규섭씨가 활동하고 있는 단체인 로사이드와 1회의 사전 만남을 통해 얻은 규섭씨에 대한 사전 정보와 규섭씨가 그렸던 그림 일부를 전달받은 후 구체적인 스터디 방법을 계획하였습니다.
  • 프로그래밍 언어는 지난 <불확실한 학교>에서 규섭씨가 배웠던 P5.js를 활용하여 진행하기로 했습니다. 그중에서도 규섭씨 그림 작품들을 간편하고 재미있게 활용할 수 있게 하기 위해 P5.play 라이브러리를 사용하였습니다.
  • 키보드나 마우스를 이용하여 간단한 인터랙션이 가능한 예제를 만들어 규섭씨가 코드작업에 대한 흥미를 가질 수 있게 한 뒤, 이미지 가공법 및 코드의 패턴에 대한 학습을 진행하고 몇 차례 반복한 뒤, 예제를 응용하여 결과적으로 웹상에서 볼 수 있는 하나의 인터랙티브 콘텐츠를 제작하는 것까지를 목표로 삼았습니다.
  • 소스로 사용할 이미지들은 로사이드에서 받은 규섭씨의 손그림과 규섭씨의 블로그에서 투명한 배경으로 가공을 하기 쉬운, 각 예제에 적합한 이미지들을 배경이 투명한 png 파일로 변환하여 준비하였습니다.

> 1차 스터디

1차 스터디 사진1
1차 스터디 사진2
1차 스터디 사진3

목적

  • 코딩을 위해 필요한 프로그램 설치
  • 파일시스템 관리, 이미지 가공법 학습
  • 간단한 인터랙션이 있는 코드 예제를 통해 코드를 배우는 목적 이해
  • 응용 가능한 코드 패턴 학습

순서
1. 수업에 대한 일정 및 목적에 대해 이야기
2. 규섭씨 외장하드에 이미지를 모아두는 파일 시스템 보기
3. 수업 진행에 필요한 파일들 점검, 설치
(p5.js / bracket / firefox / 미리 준비한 코드 예제 파일 및 이미지)
4. 미리 준비한 코드 예제에 대한 설명, 포토샵으로 직접 이미지 가공하여 대체하기, 코드 패턴 파악 및 직접 추가해보기

  • 예제1) 마우스 클릭을 통한 랜덤 캐릭터 생성
  • 예제2) sprite img를 이용하여 물건의 색깔이 바뀌게 만들기
  • 예제3) sprite img를 이용하여 캐릭터가 걷는 것처럼 만들기
  • 예제4) 스페이스 바를 누르면 캐릭터가 점프하도록 만들기
    1. 다음 수업 일정 및 방향에 대해 논의 및 정리

1차 스터디 예제화면1
1차 스터디 예제화면2

1차 스터디 후기

규섭씨가 흥미를 가질수 있을 지, 코드 패턴을 어느 정도로 이해할 지 예측을 할 수 없는 상황에서 진행된 1차 스터디였습니다.
우리가 예상한 것 보다 훨씬 더 흥미를 가지고 재밌어하고 이해를 잘하고 능동적으로 참여하시는 모습을 보며 규섭씨가 코드의 패턴을 파악하는 것에 굉장히 능숙하며, 한번 학습한 것을 바탕으로 다양한 오브젝트를 반복적으로 추가하는 것을 쉽게 한다는 것을 알게되었습니다.

동영상 제작 도구인 애프터이펙트를 사용하는 것과 과정과 결과적인 측면에서 어떤 차이가 있는지 설명을 드렸고 이에 대해 규섭씨와 규섭씨 아버지가 잘 이해를 하셨습니다.

스터디 전의 예상으로는 파일 시스템에 대해 설명드리는 것이 난관일 것이라 생각했는데, 이미 규섭씨가 만든 이미지에 대해 파일 및 폴더 관리가 쉽게 탐색이 가능할만큼 상당히 잘 되고있다는 점에 놀랐습니다. 또한 이미지를 다루는 프로그램인 포토샵이나 일러스트레이터를 이전에 사용해보신적이 있어서 이미지 가공과 저장에 대한 설명 시간이 생각보다 적게 들어서 그 시간동안에 예제를 추가적으로 더 알려드릴 수 있었습니다.

1차 스터디 전에는 규섭씨가 코드에 대해 최대한 많이 이해를 하는게 혼자서 작업을 하는데도 좋지 않을까 생각했지만, 스터디 후에는 우리가 할 수 있는 부분과 규섭씨가 할 수 있는 부분이 같을 필요도, 같을 수도 없다는 생각이 들었고 규섭씨가 꼭 코드를 완벽하게 이해하지 않아도 함께 작업에 대한 얘기를 할 수 있다면 실제로 해보기 전에는 예상하지 못하는 재밌는 것들이 나올 것이라고 기대하게 되었습니다.

규섭씨와 함께 다음 예제에 대한 아이디어를 이야기해보고 싶었는데 아직 그 단계까지는 이야기를 할 수 없어서 아쉬웠습니다. 일단 주어진 시간동안 우리는 규섭씨의 다양한 캐릭터를 살릴 수 있는 재밌는 예제를 소개해드리는 것을 할 수 있을 것 같다고 생각하게 되었습니다.

이외에도 규섭씨가 너무나도 해맑게 웃고 과자도 먹여주시고 친하게 대해주어 우리도 너무 기분이 좋았고 규섭씨라는 사람에 대해 더 알게 되고 친해지는 느낌에 행복함을 느끼게 되었습니다.


> 2차 스터디

2차 스터디
2차 스터디
2차 스터디

목적

  • 지난 시간의 코드에 다른 인터랙션 추가하기
  • 규섭씨의 이미지 및 사운드 소스로 예제 응용해보기
  • 규섭씨의 다른 작업들처럼 블로그에 아카이빙하기 위해 화면 캡쳐하고 웹서버에 파일 올리기

순서
1. 지난 시간에 대한 간단한 복습
2. 수업 진행에 필요한 파일들 설치 (다음팟플레이어 / 파일질라)
3. 준비한 예제를 다양하게 응용하기
4. 시작할 때 및 점프할 때의 소리를 직접 녹음하여 코드에 적용시키기
5. 완성한 예제를 다음팟플레이어 프로그램을 통해 화면 녹화하여 규섭씨 블로그에 올리기
6. 파일질라 프로그램을 이용하여 웹서버에 예제 올리기
7. 예제를 실은 웹페이지 주소블로그에 올리기

2차 스터디 예제 화면

2차 스터디 후기
곽규섭 창작자의 캐릭터 세계를 바탕으로 콘텐츠를 만들다보니 기반이 되는 코드만 준비해 놓으면 이미지, 사운드, 더 추가할 요소 등의 상상력은 규섭씨에게 맡길 수 있었던 덕분에 콘텐츠의 기획 등에 있어서의 부담감 없이 코딩과 협업의 즐거움만 느끼게 될 수 있었습니다.

그렇게 하다보니 ‘이렇게 하면 재밌겠다.’, ‘저걸 추가 하면 더 좋을 것 같다.’ 등 아이디어도 더 잘 떠올랐고, 우리가 러프하게 만든 이 콘텐츠도 우리끼리는 충분히 재밌다고 생각했습니다.

우리에게 있어서 좋았던 점은 모두를 이해시키는 콘텐츠를 제작해야겠다는 부담감에서 벗어나 재밌게, 그리고 함께 콘텐츠를 만드는 경험을 했다는 것입니다.

스터디 중에 규섭씨가 전시회에서 공연했던 노래에 대해 이야기를 하다가 코드 파일에도 규섭씨의 목소리를 직접 넣으면 어떨까라는 아이디어가 나왔고 그 자리에서 녹음을 해서 인터랙션에 추가하였는데 그 과정이 너무도 즐거웠습니다. 규섭씨는 여러 캐릭터의 이름을 한번에 빨리 발음하는 것을 재미있어 했고 점프를 할 때 소리도 캐릭터 이름을 빨리 연달아 발음한 것으로 넣었습니다.

예제에서 걸어다니고 점프를 하는 캐릭터가 튤립 코스프레를 하고 있는 규섭씨의 사진이었는데, 규섭씨가 그것에 대해 인지를 하고 코드가 실행되었을 때의 인사를 ‘안녕 튤립 잘부탁한다'라고 넣었습니다. 본인이 만든 세계와 캐릭터이니만큼 코드를 통해 만들어진 규섭씨의 캐릭터 세상에 대해 이해도가 높고 이미지나 사운드를 추가하고 확장함에 있어서 일관된 세계관과 규칙을 가질 수 있다는 것이 앞으로 협업을 할 때 기획에 있어 큰 장점으로 역할을 하게 될 것이라 생각했습니다.

그리고 1차 코드스터디와 마찬가지로 2차 코드스터디에서도 ‘코드를 잘 가르쳐주었고 잘 배웠다’, ‘앞으로도 규섭씨가 혼자 코딩을 지속할 수 있겠다' 등의 가치 평가 지표 외에도 중요한 가치가 존재함을 느꼈습니다.

2회의 짧은 스터디였지만 우리의 기대보다 훨씬 더 곽규섭 창작자가 재밌어하고 계속 웃음을 보여주었고 매번 준비해온 과자를 직접 우리에게 먹여주고, 집에 가는 길에 우리를 기다려 주는 등 점점 친밀하게 대하는 모습을 보여주었습니다. 처음에 의사소통에 대해 걱정했던 것이 기우였음을 알게 되었습니다. 규섭씨와 서로 더 잘 알게되고 규섭씨가 사용하는 언어를 좀 더 이해하게 됨으로써 관계를 맺는 행복감을 느꼈고 코드 스터디를 마치고 집에 가는 길에 우리의 표정은 피곤함 대신 스터디 경험에 대한 즐거운 대화로 가득했습니다.


마무리하며

이번 두 번은 기존에 로사이드에서 진행하는 아트링크와 같은 “긴 호흡의 협업”이라는 의미보다는 코드를 좀 더 알려드리는, 다소 일방향적인 목적이 있던 스터디였습니다. 이 스터디가 끝나고 로사이드가 바쁜 일정이 끝나는 내년 초에 아트링크에 대해서도 얘기를 해보기로 했습니다. 2회의 스터디를 통해 우리가 나름 얻었다고 생각하는 것은 분명히 있지만 협업이라는 의미에서보다는 알려드리는 입장에서의 의미가 더 컸다는 한계가 있었습니다. 본격적으로 아트링크를 하게 된다면 규섭씨 혹은 다른 창작자분과 하는 협업으로서 우리가 어떤 작업을 할 수 있고, 그 작업이 창작의 즐거움을 너머 우리에게 어떤 의미가 될 수 있을 지 곰곰이 생각해보기로 했습니다.

2회차 스터디를 끝내면서의 이런 이야기가 오갔습니다.

고재필 : "앞으로도 코딩 할거예요?"
곽규섭 : “(우렁차게)네!!”

규섭씨의 대답은 행동으로 옮겨졌습니다.

코드 스터디 이후로 곽규섭 창작자가 집에서 혼자서 캐릭터를 추가한 예제 페이지를 블로그에 업로드 한 것을 확인하였습니다. (블로그 글1, 블로그 글2)
알려드렸던대로, 이미지를 투명 배경 png 파일로 잘 가공하여 보기 좋은 크기로 코드 폴더 내 이미지 폴더에 저장하고, 해당 이미지를 불러오는 코드를 추가하고, 화면 캡쳐를 하고, 주소까지 올린 것을 보고 진짜로 혼자 집에서 하셨구나 싶어 놀랍고 뿌듯했습니다. 시간이 없어서 FTP로 파일을 서버에 업로드하는 것까지는 알려드리지 못해서 로컬 주소를 올리신 것이 아쉬워서 메일로라도 알려드릴 예정입니다.


설치 (Install)

  • bracket : 코드 수정을 위한 에디터
  • p5play : 자바스크립트 라이브러리
  • firefox : 웹 브라우저
  • fileZilla : FTP 프로그램
  • 예제 파일은 Github으로 공유

기타 링크