#9 후원페이지 리뉴얼!
개발자인데요, 비영리단체를 만들었습니다
구구컬리지를 운영하면서 후원을 늘리기 위해서 어떻게 해야할까?를 늘 고민하게 됩니다. (저만 그런건 아니죠?) 구구컬리지와 같이 작고 (커엽고 소중한) 단체들은 상대적으로 노출도 쉽지 않고 홍보를 하고 싶어도 예산을 책정하기 힘들거라고 생각합니다.
이런 저런 후원을 어떻게 늘릴 수 있을까 생각하면서 구구컬리지 후원페이지는 충분히 매력적일까? 라는 생각이 들었습니다. 요새 대부분이 후원을 온라인으로 할텐데(거리 모금을 할 상황이 아니기 때문에).. 구구컬리지 후원페이지도 사이트에 들어가면 텍스트와 기사 링크만으로 후원페이지를 구성해놨었습니다.
구구컬리지 구 후원페이지 모습이미지를 보면 아시겠지만.. 평범한 후원 페이지의 모습입니다. 어쩌면 동영상도 없는 정말 노멀한 후원 페이지의 모습입니다. 그래서 다른 단체들의 후원페이지는 어떨까? 여기저기 구경을 하면서 다녔습니다. 다른 비영리단체들도 별?로 그렇게 다르지 않았어요!
그래서 (작고 커엽고 소중한) 구구컬리지가 후원을 받으려면 후원페이지라도 특색있게 만들자! 라고 결정을 하게 되었습니다. 그럼 어떻게 좀 특색있게 리뉴얼을 해볼까?! 웹 관련 기술들을 리서칭을 좀 진행을 하고서 내린 결정은 바로!! 3D!!
후원페이지를 3D로 만들어야겠다! 그러면 구구컬리지의 특징은 개발 역량도 들어날 수 있을 것 같았고! 3D관련 기술도 익힐 수 있고! 일석이조네! 그렇게 후원 페이지 리뉴얼 여정을 떠났습니다.
그리고 첫 번째 고민! 원래 구구컬리지 사이트안에서 제작할 것인가 아니면 다른 호스팅에서 제작하고 링크로 연결만 시킬것인가! 결론은 다른 호스팅에서 제작하고 링크로 연결만 시키는 게 좋겠다는 판단이 들었어요!
후원페이지와 구구컬리지 사이트의 목적이 다르다는 게 가장 큰 이유였고 후원페이지의 경우는 좀 더 자유롭게 제작하고 싶었습니다. 리뉴얼도 더 자주 할 것이라서 분리하는 게 낫다는 판단을 내렸습니다. :)
그렇게 몇달이 흘렸고.. 아래와 같이 후원페이지 리뉴얼을 하였습니다! ㅠㅠㅠㅠㅠ
구구컬리지 후원페이지THREE.js 라이브러리를 사용해서 웹3D를 제작하였고 블렌더를 사용해서 3D 모델링을 했습니다. 특히 3D 모델링은 처음해보는 거라 무척 헤맸네요.
옆의 이미지는 첫 번째 Scene으로 구구컬리지 온라인 사이트를 형상화? 했습니다. 여러 개의 책상이 두둥실 떠다니는 건 어디서든 접속가능하다는 것을 나타나긴 해요. 해당 Scene에서는 각 책상과 모니터에 텍스쳐 입히는 데 고생을.. 캐릭터는 readypalyone 을 이용했습니다
구구컬리지 후원페이지 2두 번째 Scene에서는 구구컬리지에서 진행중인 프로젝트를 형상화? 했습니다. 그리고 캐릭터의 이동과 애니메이션을 추가하였고 자세히보면 전선과 서버에 불빛이 깜빡깜빡하는 깜찍한 애니메이션을.. 그리고 교실의 바닥을 핸드폰으로 모델링을 했는데 그 이유는 인터넷에서 접속이 가능하다는 걸 나타내고 싶었습니다. ㅎㅎㅎ ^^;;
구구컬리지 후원페이지 3세 번째 Scene은 후원자들의 이야기를 담아보고 싶었어요. 그래서 여러 개의 캐릭터들이 로딩되고 옆에 텍스트를 로딩해주었습니다. 블렌더가 한글 텍스트가 안되는 걸 알고 충격! 하지만 한글 폰트 추가하고 복사 붙여넣기를 통해 한글 텍스트를 사용할 수 있었습니다. ^^;;
이렇게 처음으로 웹에 3D 기술을 이용해서 페이지를 만들어봤는데 정말 오랜만에 개인적으로 재미있는 작업이였습니다. (어느새 후원페이지를 만들어야 한다는 걸 망각) 게임 만들던 기억도 나고 이것도 저것도 되는 구나! 하면서 그리고 모델링도 해보니까 재미있었네요 ^^;; 3D로 만든 후원페이지라 일단은.. 특색은? 있네라고 만족을 하고 있습니다. ㅋㅋ 최적화라든가 조금 더 기획과 디자인의 퀄리티는 다음 작업, 리뉴얼 때 높여봐야 겠다고 생각이 드네요.
한 번 살펴보실 분들은 https://pangol.github.io/donate99/ 링크를 클릭해보세요!
(참! PC에서 와이파이 환경에서 클릭해보세요!)
