Project #2 : AnimateJS
분명 이전 프로젝트의 프롤로그에서… JS관련 프로젝트를 하겠다고 한 거 같은데… 이제서야 시작을 하려 한다…ㅎㅎㅎ 물론 잊고 있었던 것은 아니다. 단지 컨셉을 정하는데 좀 많이 오래 걸렸을 뿐이다. 아무튼, 겨울방학이 반이나 지나가서야 시작하는 두번째 프로젝트에 대해서도 기록을 남기려 한다.
Concept?
앞에서도 언급했듯이, 프로젝트 시작이 늦어진 것은 컨셉 때문이었다. JS나 웹에 대해서는 완전히 문외한이었기 때문에, 어떤 식으로 공부를 해야 할 지, 어떤 걸 만들어야 할 지조차 감이 오지 않았다. 대충 둘러보았을 때는 TODO 앱이 가장 일반적이었는데, 뭔가 강의보고 따라 만드는 식은 그리 내키지 않았다. 그러다 이 영상을 보게 되었고, 이런 식의 시각적인 효과를 JS로 만들 수 있다면 재미있을 것 같다는 생각을 했다. 특히, 내가 대입 준비할 때는 디자인과를 희망했을 정도로 디자인에 나름대로? 흥미가 있었기 때문에 이런 시각적인 프로젝트가 더욱 매력적으로 다가왔다. 이런 목표를 잡은 것이 약 2주 전이었다.
아니, 그럼 왜 이제 와서 프롤로그를 적고 있는 걸까? “어떻게” 만들지는 정했어도 “뭘” 만들지를 정하지 못했기 때문이다. 단순히 애니메이션 효과만 구현하는 것은 뭔가 밋밋하고, 의미도 없을 것 같아서, 뭔가 컨셉을 잡아서 이에 맞게 효과를 구현하면 더 재미있을 것 같았다. 하지만 그 컨셉이라는 걸 정하는게 너무나도 어려웠다.
- 애니메이션 효과랑 의성어/의태어를 연관시켜서,
레터링 디자인에 효과를 적용하면 어떨까?- 음… 뭔가 진부해
- 난 고양이를 좋아하니까…
고양이에다가 애니메이션 효과를 적용하는 건 어떨까?
약간 망한 고양이 사진 같은 느낌으로…- 음… 이렇다 할 느낌이 안 오는데?
대략 이런 과정의 무한 반복이었다. 그러다가 이런 결론에 도달했다.
- 굳이 그렇게 거창한 컨셉이 있어야 할까?
그래서 정한 것이, “TMI 모음집”이었다. 알파벳 A~Z까지에 대응되는 단어를 뽑아서, 각 단어에 맞는 효과를 적용하면서 나에 대한 짧은 이야기(물론 내 개인 정보가 너무 새지 않는 선에서)를 적어두는 것이다. 그렇게 만들어두면 이 블로그의 About Me 탭에 링크를 걸어두는 것도 괜찮을 것 같다. 아직은 조금 추상적이지만, 그래도 나름대로의 가이드라인이 잡힌 것으로 만족한다.
TODO
- Main Page Design
우선 26개의 알파벳을 보여주면서 유저가 원하는 알파벳을 고르도록 하는 메인 페이지부터 구현해야 한다. - Animation Effect Implementation
메인 페이지를 다 만들면 알파벳을 하나씩 골라서 각 알파벳에 맞는 이야기와 애니메이션 효과를 만들 것이다.
사실… 조금 불안하긴 하다. 처음 시도하는 것이라 조잡할 것 같기도 하고, 중간에 포기할 수도 있을 것 같다. 그렇지만, “일단 시작하면 뭐라도 되겠지”라는 생각으로, 가볍게 시작해보려 한다.