insight ) 행복의 기호들

행복의 기호들 사이트 바로가기

행복의 기호들 – Symbols of Happiness

 

올해 초여름 즈음에 발견한 사이트.

DDP 디자인 아카이브 기획전시 사이트이다. 디자인과 일상은 어떻게 연관되어 탄생했는지에 대한 이야기.

이런 방식으로 전시를 기획하고, 경험을 선물할 수 있구나 느낀 좋은 경험이었다.

또, 역시 정확한 목표 기획 의도, 뒷받혀주는 통일된 디자인이 주는 세련됨이 전체적인 완성도를 좌우한다는 확신을 한 계기기도 하다.

 

나는 개발자로서...ㅎㅎ 스텍이 제일 궁금했다. 일단, 프론트 그래픽은 Three.js로 3D WebGL을 제어하고, 그외의 메뉴나 팝업등은 일반적인 DOM으로 구현했다. 배포는 워드 프레스를 사용한듯...? (잘 모르겠다...) ssl인증이 안붙은거 보면, 프로젝트 기간이 끝났나보다.

단순한 기능을 활용하여 몰입감을 주는 연출을 구현함. 카메라 무빙이 자연스럽다. 난 프론트를 주로 하지 않아서, 이런 디테일한 무빙 작업이 더 멋져보이는듯..ㅎㅎ

 

 

https도 연결 안 되어 있고, 배포 측면에서 완성도가 그렇게 높다고 할 수 없지만, 그래도 3d그래픽과, 카메라 연출이 좋아서. 또 전체적인 디자인 통일성이 인상깊었다.

하.. 내가 봐온 3d webGL 레퍼런스 사이에서 광명을 본 느낌? 디자인 제일 깔끔하다. 요즘 유행하는 단순하고 어딘가 쨍한 디자인 ㅋㅋㅋ

 

 

 

각각의 태마를 3d 그래픽으로 공중성 같은 컨셉으로 진행했다. 하위 테마는 위성같이 그래픽이 뜨도록. 단순하고 통일된 컨셉이 감각적이다. 또, 카메라가 스무스하게 연출되어서 거부감도 없고, 마우스로 시야각을 바꿀 수 있는데, 저항감을 주어 UX에도 무리없게 만들어둔게 특징. 세부 메뉴들은 html로 처리한 것도 좋은 선택같다.

 

— 사실 이것 모두 ddp 단기 전시 프로젝트라 가능한 일... 정보가 한정되어 있고, 텍스트, 이미지 양이 모두 감당 가능하기 때문! 과연 여기는, 데이터가 늘어났을때 어떻게 처리할지 궁금하다. 어떤 UI와 플로우로 풀어낼까?

— 데이터는 ajax로 불러오는데, 서버사이드 랜더링인듯

— 여기에 멀티 접속시 별/행성을 추가하는 기획도 재밌겠다. 거기에 스트리밍같이 채팅을 추가해도 좋고.

 

역시 디자인 완성도가 높은 웹사이트들은 반응형이 잘 구현되어 있다.

 

모델링도 로우폴리로 잘 정돈되어 보이고, 무엇보다 컨셉이 귀여워서 기억에 남는다.

UI도 3D에 이질감없이 잘 먹혀들어간듯 :)

나도 저런 사이트 만들고 싶다!! 열정 충전!! 🔋