AnimateJS : C, D

AnimateJS의 C, D 스토리를 추가했다. 이와 더불어 컨셉을 좀 더 명확하게 했으며, 처음 페이지가 로딩될 때의 로딩 창도 기본적인 형태는 구현했다. 소스코드는 여기에, 실제 사이트는 여기에서 확인할 수 있다. 조언/코드 리뷰 등등은 언제든 환영한다.

Loading Page

이전에 구현한 슬롯이 웹페이지에 기본적으로 추가된 것이 아니라 app.js가 로드되면서 동적으로 추가되는 것이기 때문에, 처음 페이지를 열게 되면 슬롯들이 보이지 않는 시간이 잠깐 생겼다. 이게 은근 신경쓰이는 부분이라서 로딩 창을 고려하게 되었다. 페이지가 로드되면서 슬롯들이 생성되는 것을 가린다면 좀 더 완성도가 높아보이리라고 생각한 것이다.

현재는 로딩창의 상단에 붉은 글씨로 안내 문구도 적혀있다. 아직 반응형 웹 디자인을 적용하지 않았기 때문에, PC 외에서는 디스플레이의 비율이 이상하게 보일 것이다. 그렇다고 바로 반응형 웹 디자인을 적용하기엔 시간이 걸릴 것 같았기에, 우선은 안내라도 넣어두는 것이 맞다고 생각했다. 후에 이 메시지는 지울 생각이다.

솔직히 지금의 로딩 페이지 디자인이 딱히 마음에 들지는 않는다. 너무 Form Follows Function를 따라한 느낌이 강하고, 그렇다고 FFF처럼 세련된 느낌도 아니기 때문이다. 우선은 임시방편으로 이런 디자인을 채용하되, 이후에 괜찮은 디자인으로 바꿔넣을 생각이다.

Typography Concept

기존에 내가 잡은 컨셉은 다음과 같았다.

• 알파벳 A~Z까지에 대응되는 단어를 뽑아서, 각 단어에 맞는 효과를 적용하면서 나에 대한 짧은 이야기(물론 내 개인 정보가 너무 새지 않는 선에서)를 적어두는 것…

여기서 모호한 점은 ‘각 단어에 맞는 효과’였다. 단순히 애니메이션 효과를 만든다고 하기엔 그 효과의 대상이 필요했다. 그렇지만, 현재 내 실력으로는 뭔가 눈길을 딱 끌 만한 멋진 디자인의 이미지를 도출하기 어려웠다. 이대로 별다른 컨셉 없이 스토리를 하나씩 만들어간다면, 앞에서도 말했던 FFF를 따라한 느낌을 지우기 어려울 것이기 때문이다.(사실 모티브를 FFF에서 받았다고 언급은 했지만, 전체적인 사이트의 분위기가 FFF와 너무 유사해지는 것은 바라지 않는다.)

그러다 찾은 컨셉이 타이포그래피(Typography)였다. A~Z의 각 스토리가 모두 타이포그래피로 이루어져 있다면 나름대로 통일감도 있을 것이고, 이미지를 생각해내는 것도 비교적 쉬울 것이라는 계산이었다.(실제로 난 발표용 프레젠테이션에도 타이포그래피를 어느 정도 이용했었다.) 사실 여기까지 보면 대체 뭘 만들겠다는 건지 감이 잘 안오는데, 바로 아래의 내용을 보면 어느정도 느낌이 올 것이다.

C - Coffee lover

사실 알파벳 상으로 나열하느라 먼저 오긴 했는데, 스토리 ‘C’는 두 번째로 만들어졌다. 그렇지만, 정리할 때는 알파벳 순이 보기 좋으니까(?) 먼저 설명하겠다.

처음 들어가면 이런 식으로 커피잔 하나가 보이게 된다. 여기서 커피잔이 있는 화면을 누르게 되면 커피가 위에서 내려오도록 했다. 또한, 내려온 커피가 커피잔에 모이기까지 가능하도록 구현을 했다.

다만 커피가 차오르는 데에는 상한이 있으며 그 이상으로는 차오르지 않는다. 화면을 누르지 않은 상태로 어느 정도 시간이 지나면 커피가 조금씩 줄어들게 된다. 커피잔 안의 커피는 물결치도록 되어있는데 여기서 이 물결 효과는 “인터랙티브 디벨로퍼” 채널의 강의를 참고했다.

D - Design? Develop?

앞에서 언급했다시피, 스토리 ‘D’는 내가 맨 먼저 구현한 스토리이다.

처음 들어가면 이런 식으로 화면이 보이게 된다. 여기서 우측의 화면을 누르고 마우스를 내리면 ‘esigner’의 글씨에서 색이 점점 빠지고, 그만큼 ‘eveloper’의 색이 차오르게 된다. 물론, 마우스를 위로 올리게 되면 다시 ‘esigner’의 색이 차오르고, ‘evelopver’의 색이 빠지게 된다. 또한 이렇게 두 텍스트의 색깔 비율이 바뀌면 가장 큰 ‘D’의 색깔도 그 둘의 평균으로 맞춰지게 된다.

다만 마우스로 드래그하는 도중 우측 화면의 영역을 벗어나게 되면 더이상 드래그의 영향을 받지 않도록 했다. 처음에는 이를 구현하지 못해서 화면 밖으로 마우스가 나갔다가 다시 돌아오는 경우 텍스트의 색깔이 급변하는 이슈가 있었다.

Next Step

1. Next Content
   현재 제목만 정해놓고 컨텐츠는 추가하지 않은 알파벳이 몇 있다. 이들에 대한 내용을 추가해야 한다.
2. Page Transition Effect
   일단 기본적인 로딩 창은 만들었지만, 어느정도 개선이 필요하다. 따라서 이를 수정할 필요가 있다.
   또한, 아직 각 슬롯을 선택했을 때의 로딩 창이 없으므로, 이 또한 구현해야 한다.
3. Flexible Design…
   위에서도 언급한 스마트폰에서의 터치 문제 및 화면 깨짐 문제를 해결하고 싶다.

나름대로 잘 진행되는 듯하다. 다만, 너무 이쪽에 몰입한 듯 하니, 기존 프로젝트와 어느정도 균형을 다시 맞춰야겠다.