9월 초에 첫 심사라서 부랴부랴 온라인 전시 템플릿을 완성하고 있다. 작품도 다 안했는데일단 지금까지 한 거라도 넣어서 하란다. 원래 포트폴리오는 따로 만들어서 심사 받는 거였는데 아예 온라인 전시용으로 만든 걸 가지고 심사를 진행한다고 한다.

만들면서 했던 고민들

어디까지 써도 되냐?

일단 템플릿 담당 교수님께서 하지 말라고 하신 건 다 안했다.

  • 이미지는 반드시 JPG 80과 WEBP만 써라. PNG랑 GIF 쓰면 개인 면담할 거다.
  • 이미지 너비는 1440px 안 넘기게 해라. 절.대. 1440px 넘기지 마라.
  • 이미지 한 장 크기 1MB 넘기지 마라.
  • 전체 파일 크기 100MB 넘기지 말고 웬만하면 50MB 이하로 만들어라.
  • 영상은 vimeo나 youtube로 넣어라.(GIF 넣고 싶은 사람은 영상으로 넣으랬음)
  • GIF는 안 되지만 lottie는 써도 된다.
  • 링크는 아직 협의 중인데 써도 되는지는 나중에 알려주겠다.(일단 넣지 말라는 뜻인 듯)

찾아보니까 로티가 JSON 파일로 넣는 애니메이션인가 본데 그럼 내가 임의로 자바스크립트를 써도 상관 없다는 거겠지? 라는 생각으로 이것저것 시도하고 있다.

투명 배경을 써야 하는 이미지들은 포토샵을 이용해서 WEBP 파일로 변환했다. WEBP는 우리가 잘 모를 거라고 설명 안 해줬는데 어차피 검색만 하면 나오는 걸... webp 파일 용량이 더 작던데 이미지 많으면 다 그거 쓰지 않을까?

개인적으로 폰트도 import해서 텍스트를 넣고 싶은데 해도 되는지 확신이 안 서서 그냥 이미지로 넣을 예정이다. 그렇지만 1440 이미지에 24px 텍스트로 써놓으면 모바일에서는 6px로 보일 거라는데 너무 별로지 않냐? 그게 보이냐고ㅠ

스크롤 애니메이션을 쓸 것인가?

요즘은 스크롤 애니메이션을 안 쓰는 추세인가 보다. 최신 유행 어디서 보는지는 모르겠지만 삼성이랑 애플 제품 페이지를 보고 대충 예상하는 거다.(ㅋㅋㅋ) 둘다 몇 년 전에는 3D랑 설명 이미지를 적절히 합쳐서 스크롤 애니메이션을 사용했었는데 지금은 제품 정보가 대시보드처럼 한눈에 보이게 했다. 해당 영역을 클릭하면 자세한 내용이 나타나는 방식이다.

애플의 경우 스크롤 애니메이션은 최소한으로 사용했고, 삼성은 안 쓰고 영상을 쓴 것 같다.

사실 옛날에 삼성이랑 애플 제품 정보 페이지 봤던 게 기억에 남아서 비슷하게 시도해보려고 스크롤 애니메이션을 사용했었다. 근데 내가 뭔가 실수했는지 out of memory가 떠서 그냥 삭제하고 css keyframe으로 무한반복 애니메이션을 만들었다. css로만 하니까 아주 쾌적하다.

비록 당시 봤던 디자인에 눈이 멀어 잊고 있었지만 사실 난 스크롤 애니메이션 별로 안 좋아하긴 했다. 삼성이랑 애플은 재밌고 멋있게 만들었으니까 좋아보였던 거지. 내가 계속 내려야 해서 너무 귀찮은 디자인이다. 개인적으로는 지금 디자인이 훨씬 보기 편하다.

어쨌든 성능이랑 디자인, 난이도 측면에 문제가 있어서 스크롤 애니메이션은 빼버렸다.

어떻게 상호작용할 것인가?

온라인이긴 해도 '전시'니까 관객이 상호작용할 수 있는 장치를 넣고 싶다.

오프라인에서는 디자인한 작품의 실물을 보고 기회가 되면 만져볼 수도 있다는 장점이 있는데 온라인은 그냥 이미지만 봐야 한다. 근데 우리도 만져보지 말라는 법 있냐?

기본적인 hover랑 클릭 이벤트만 잘 넣으면 적당한 즐거움을 줄 수 있지 않을까 싶다. 일단 지금 세 작품 다 어떻게 할지 대충 생각은 해뒀다.

다른 건 약간 게임처럼(?) 상호작용한다는 느낌이고 편집디자인 작품은 그냥 작품 설명을 좀 더 자세히 읽어볼 수 있게 도와주는 느낌으로 할 생각이다. 솔직히 편집디자인 작품이 그렇게 잘 나온 건 아니라서 포장이라도 잘 해보려고 노력 중이다.😇 모모세 교수님도 나보고 그러셨다고. 작품이 이상해도 편집만 잘하면 잘해보이니까 편집 스킬을 잘 연구해보라고. 근데 진짜 맞는 말이야. 약간 하고 싶은 거 만들어 놓고 입 털어서 작품에 의미를 담는 미대생처럼 살라는 뜻 같아.

근데 진짜 주제 선정한 거 보면 다 별 생각 없이 시작했다.

  • 인터랙션 - 정보 디자인 책 읽다가 '빨강 vs 파랑' 있는 거 보고 '오, 이거 한국 버전으로 해볼까?'해서 시작함. 양심적으로 디자인은 다르게 했음. 학문 뭐로 할지 아직 못 정했음.😇
  • 타이포(편집) - 한 달 동안 주제 못 잡고 있으니까 교수님이 이런 주제 어떻냐고 추천해주심. 얼씨구나 하고 그걸로 진행함. 학문 '철학'도 나중에 갖다 붙인 거임.
  • 일러스트 - 어떻게 같은 주제로 에피소드가 8개나 나오는지 1도 모르겠어서 별 이상한 얘기 다 가져갔었는데 온앤오프 Fifty Fifty 듣다가 외식 메뉴 정하는 데 천만 년 걸리는 이야기를 쓰기로 함.

초반 기획 때랑 지금 비교해보면 진짜...ㅎ

얘기가 좀 샜는데 어쨌든 상호작용할 수 있게 많이 시도해보고, 심사 때 이런 거 넣지 말라고 퇴짜 맞으면 그냥 이미지로 넣어야지 뭐... 좀 아까운 건 깃허브에 따로 저장해두고.

3D 어떡하냐?

타이포 작품에 패키지 넣어야 하는데 진짜 3D는 적성에 안 맞는다는 걸 몸소 느끼고 있다. 나 너무 힘들어요. 그냥 개기지 말고 실제 목업을 만들 걸 그랬나. 포토샵으로 편집해서 넣는 게 빠르겠어.