MoMA 브랜드 시스템 디자인, Order.design

2024년 9월 13일 금요일

MoMA 브랜드 시스템 디자인, Order.design

@order.design, https://order.design/project/moma

MoMA는 미국 뉴욕시에 위치한 근현대 전문 미술관으로 세계적으로 강력한 영향력을 가지고 있습니다. 영문 명칭의 머리글자를 따서 <모마>라고도 불립니다. Order.design은 2019년에 MoMA 브랜드 시스템을 새롭게 리뉴얼했습니다.

Interview check
  • MoMA의 커뮤니케이션 계획이 전시 중심 캠페인에서 계절별 접근 방식(봄-여름-가을)으로 확대됨에 따라, MoMA는 Order에 광고 및 관련 자료를 위한 보다 모듈화되고 적응 가능하며 확장 가능한 디자인 시스템을 발전시키고 정의해 달라고 요청했습니다. (Order.design 프로젝트 소개 본문 중 발췌)


Moma의 브랜드 시스템을 한 눈에 보여주는 영상입니다. 박스 형태의 모듈 디자인으로 구성되어, 각 박스마다 고유한 역할이 존재하는 것처럼 보여집니다. 추측해보자면 작품 이미지 / 작품 제목 / 작가 / 주제 / MoMa 브랜드 영역으로 나누어진 것 같습니다.

박스는 이미지에서 한 작품, 그리고 여러 작품이 담긴 시즌으로 그리고 마지막엔 MoMA 전체로 확장됩니다. 이러한 시스템을 사용하여 MoMA 내에 있는 수 많은 작품들을 계속해서 관람하는 경험을 제공하고 싶지 않았을까 생각합니다. 웹이나 모바일 환경이라고 생각한다면 아래로 스크롤을 하면서 무한한 작품 탐색, 관람이 가능한 구조입니다.

가설 1. 그리드 시스템을 통해 MoMA 내에 있는 수 많은 작품들을 계속해서 관람하는 경험을 제공하고자 했을 것이다.


사용한 폰트는 MoMA Sans로 자체적으로 제작한 폰트로 보여집니다. 웨이트를 Bold로 두껍게 사용하여 단단하고 힘있는 인상을 전달합니다. 채도가 높고 대비가 높게 설계된 색상과 더불어 본다면 MoMA 브랜드의 전체적인 방향이 높은 주목도에 방향이 잡혀있다고 느껴집니다. 멀리서 보면 각 작품들이 서로 자신을 봐달라고 소리치는 느낌을 받기도 합니다.


영상을 통해 MoMA 브랜드의 주요 모티프인 그리드 시스템을 확인할 수 있습니다. 모듈 한 개의 구조는 Exhibition / CTA / Art / Museum 으로 구성됩니다. 이렇게 구성된 하나의 세트들이 모듈 방식으로 계속해서 이어 붙여집니다. 여기서 더 재밌는 점은 구조를 한 단계 더 높인 단계의 시스템도 존재합니다.

작품들이 모여 하나의 전시가 되고, 여러 개의 전시들이 이어 붙여지면서 하나의 시즌을 이루게 됩니다. 해당 모듈에서 하나의 전시는 가로 방향으로 펼쳐집니다. 더 나아가 각 시즌들이 합쳐지는 구조는 어떻게 표현했을 지 궁금해집니다. Z축까지 써야될 것 같은 느낌이네요.


다음 영상들을 통해 그 답을 보여줍니다. 많은 시즌들이 쌓여 하나의 그룹을 이루고, 수많은 그룹들은 시각적인 패턴을 이루게 됩니다. 이러한 패턴은 시각적 장치로 활용될 수 있으면서, MoMA 내에 있는 전체 작품들을 의미하기도 합니다.

아래 영상은 그리드 시스템 내 <모션>에 대한 가이드입니다. Up, Over, Scaled 로 나누어 유저의 탐색 목적에 맞게 나누어져 있습니다.

  1. UP: 아래로 스크롤하면서 한 전시를 살펴 볼 때 (세로 방향으로 스크롤)

  2. OVER: 한 시즌 중에 해당된 전시나 작품을 탐색할 때 (가로 방향으로 스크롤)

  3. Scaled: MoMA 내에 속해있는 수 많은 작품들을 탐색할 때 (줌아웃되면서 확장)



MoMA의 그리드 시스템은 기본적으로 12x12 그리드를 사용하고 있습니다. 때에 따라 12 / 6 / 4 / 3 / 2 / 1 로 나누어져 사용할 수 있습니다. 인상적인 부분은 가이드만 제시하는 것이 아니라, 그리드를 사용해서 어플리케이션을 제작하는 방법을 단계별로 나누어 자세하게 소개하고 있습니다. 이러한 부분은 브랜드에 대한 유지나 관리에 있어서도 참고하기 좋은 가이드일 것 같습니다.


다음으로 재밌는 가이드는 Color relationships 인데요. MoMA 브랜드는 서브 컬러로 다양한 조합의 컬러들을 사용하고 있기 때문에, 두 색을 붙여 사용할 때의 색상들에 대한 가이드도 명확하게 제시하고 있습니다.

이건 다른 얘기지만, 브랜드 가이드를 문서가 아닌 웹사이트로 운영한다면 확실히 모션이나 변화에 대한 가이드를 더 자세하게 알려줄 수 있어 좋은 것 같습니다.


카드 형태의 모듈 컨셉은 <Layer>이며, 이는 MoMA 빌딩에서 영감을 얻었다고 합니다. Layer에 대한 컨셉은 모션을 보면 더 확실히 이해할 수 있습니다. 카드 전체가 한꺼번에 움직이는 것이 아니라 글자, 배경, 이미지 다 따로 움직임을 가져가서 각각 분리된 Layer임을 느낄 수 있는 장치라고 생각합니다.




글 마무리

이번 레퍼런스 분석은 그리드를 모티프로 활용하여 전개해나가는 브랜드를 위주로 찾아봤었습니다. 어떤 이유에서 그리드를 모티프로 가져갔는 지, 그리드와 모듈 시스템을 사용했을 때의 장단점은 무엇인지 확인해보고 싶었습니다. MoMA와 같이 수 많은 전시들이 매년 꾸준하게 기획되고 전시되는 공간이자 브랜드일 경우, 그리드 시스템은 더욱 빛을 본다고 생각합니다.

동일한 구조 내에서 다양한 콘텐츠들을 보여줘야 할 때 사용해볼 수 있는 장치라고 느껴집니다. 일관된 인상을 전달해줄 수 있지만, 단조로운 구성만으로 반복되어진다면 지루해질 수 있기에 그리드 내에서도 유연함과 변화를 어떻게 가져갈 수 있는 지도 중요한 포인트라고 생각합니다.


인사이트 및 연습방법

인사이트 1. 그리드 시스템을 사용해야하는 이유와 장단점


🔗 글이 좋았다면 링크로 공유해보세요

Designspark