Google for Developers Korea Blog: HackFair 출품작 소개 4탄!~ 디지털 그림자 인형극

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

HackFair 출품작 소개 4탄!~ 디지털 그림자 인형극

2012년 12월 7일 금요일

1. 제목 : 디지털 그림자 인형극

그림자 인형극을 컴퓨터로 할 수 있는 도구

아이들이 좋아하는 구연동화를 어디서든 쉽게 할 수 있다.

캐릭터(그림자 인형)와 배경을 조종하여 구연자와 방청객이 직접 이야기를 나누며 인형극이 진행되므로 더욱 재미있다. (구연자의 역량이겠죠^^;)

2. 개발배경/목적
유튜브를 통해 중국, 일본, 인도네시아의 그림자 인형극을 보다가 문득, 조카들과 그림자 인형극을 해보면 어떨까 하는 생각이 들었지만 준비할 것이 너무 많았습니다.

캐릭터와 배경을 그리고, 오리고, 붙이고.. 조명과 무대까지 준비하기에는 여러가지로 어려울 것 같아, 컴퓨터로 쉽게 할 수 있으면 좋겠다는 생각에 개발을 시도하게 되었습니다.

인형극을 혼자 진행하는 것이 아니라, (자기만의 배역을 맡은) 아이들과 같이 대사를 주고 받으며 만들어 간다면 좀 더 재밌는 얘기도 만들고 공감대도 생길 것 같았습니다.

영화나 애니메이션과 같이 수동적으로 받아 들이는 미디어는 어쩌면 오히려 상상력/표현력을 제한하는 것은 아닐까요? 흑백의 캐릭터와 배경을 보며, ‘자신이 저 캐릭터라면 어떻게 할까?’... 와 같은 생각을 할 수 있도록 도와줍니다.

현재는 사용자의 캐릭터를 프로세싱의 draw에 적합하도록 변형시켜주는 웹 상의 스크립트만을 제공하고 있지만, 앞으로는 사용자 또는 디자이너가 자신의 이야기를 쉽게 인형극으로 만들수 있는 도구와 마켓을 제공하고 싶습니다.

또, 특정 플랫폼에 얽매이지 않고, 특별히 설치도 필요 없이 이용할 수 있도록 웹브라우저 기반으로 개발해 나가고 싶습니다.

3. 사용한 구글 관련 기술
구글 앱엔진

HTML5

4. 구성

프로세싱

미리 준비된 캐릭터와 배경 이미지 파일을 읽어 들이고 화면에 출력 합니다. 아두이노 콘트롤러의 I/O를 읽어들이고, 읽어들인 값을 기반으로 캐릭터 이미지를 이동시키고, 배경 화면을 바꿔줍니다.(크롬 웹앱으로 전환할 계획입니다.)

아두이노

콘트롤러의 부품인 가변 저항과 스위치를 읽어들여 사용자의 입력을 프로세싱에 전달합니다. (크롬의 USB API로 연결할 계획 중입니다.)

HTML5

사용자가 작성한 그림 파일을 프로세싱에 적합하도록 반전 및 마스크 이미지를 생성하는 캔버스 API와 픽셀 연산을 구현하였습니다.

구글 앱엔진(GAE)

HTML5를 이용한 웹 서비스를 위해 호스트를 준비하기에는 시간과 비용이 고민이 되었지만 다행히 GAE를 통해 쉽게 해결이 가능 했습니다. 난이도가 높진 않았지만 파이썬을 이용함으로써 쉽게 접근하고 응용할 수 있었습니다.

캐릭터와 배경 이미지

이 부분은 개발자 영역이 아니어서 특히 문제였습니다. 이야기를 구성하기 위한 캐릭터와 배경 이미지는 팀내의 디자이너께서 맡아주셨고 이번 출품작인 빨간망토와 늑대 이야기를 시작으로 여러 디자이너분들의 참여를 기대하고 있습니다.

5. 기능/특징
화면에 동화의 캐릭터와 배경을 출력하고 사용자의 키보드, 전용 콘트롤러 입력을 통해 캐릭터, 배경을 움직이거나 바꾸는 등의 기능을 수행합니다.

사용자가 원하는 캐릭터를 쉽게 프로세싱에 적용하기 위한 웹 상의 이미지 편집용 유틸을 제공합니다.

전용 콘트롤러의 경우, 아이들이 쉽게 조작함으로써 참여도를 높일 수 있습니다.

향후 계획 - 내년에 시도하고자 합니다.

터치 입력을 위한 UI

웹 브라우저로 제공

음악 제어 기능 추가

캐릭터, 배경의 자작을 위한 웹 기반 이미지 편집기

제작된 스토리를 공유하고 판매하기 위한 마켓 제공

6. 설치 URL
https://github.com/akudoku/digital_shadow_puppetry

http://magic-scissors.appspot.com/

7. 동영상 URL
http://youtu.be/BrceztIBcX0

8. 관련 특허 ( 발명의 명칭 / 출원번호 / 설명 )
일절의 특허가 없으며 모든 코드는 오픈소스로 제공될 예정 입니다.

(단, 스토리와 이미지의 판매에 대해서는 디자이너/개발자 재량 입니다.)

9. 팀원 소개
프로젝트 대표 메일은 bus710+ghackfair2012@gmail.com 입니다.

김성준 - 제안 및 개발을 담당했습니다. 간단한 수준의 프로그래밍이 가능합니다. 현재 모 디자인 회사에서 스크립트 개발자로 활동 중 입니다.

강수정 - 본 프로젝트에서 사용된 모든 이미지를 그렸으며, 현재 프리랜서로 활발히 활동 중 입니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms