UILAB 디자인 스터디 5주차 — 참관
조성제 — Intended motion design in branding (브랜딩에서 의도된 모션 디자인
김동영 디자이너 — UX부터 데이터 드리븐까지 디자이너 스택 변천사
발표자료가 아직 공개되지는 않았습니다. (마지막 6주차 발표자료와 함께 공개 예정)
브랜드 아이덴티티를 모션에 접목해서 활용하는 부분이 꽤 신선했습니다. (물론 그전에도 우버 리브랜딩이나 JTBC / MBC ID 를 보면 없는 것은 아니지만…)
데이터 드리븐에 관한 내용은 흥미로웠으나, 디자이너 스택변천사 부분은 당시 토론하시는 분들이 많아 대화를 나누진 못했지만 저는 약간 부정적으로 보는 부분도 있었습니다.
Intended motion design in branding (브랜딩에서 의도된 모션 디자인)
Premier League
스포츠를 좋아하지 않아 잘은 모르겠지만, Premier League라는 잉글랜드축구협회가 운영하는 리그가 있습니다. 프리미어 리그에서 25주년을 맞아 중계방송에 사용하는 영상 그래픽의 브랜딩을 진행했습니다.
사각형을 기반으로 골, 패스, 드리블과 같은 축구에서의 행위(?) 를 모션으로 표현화를 시키고 이를 일종의 컴포넌트화 하여 영상그래픽에 적용한 부분이 인상깊습니다. (이와 비슷하게 SONY의 PS4 영상도 끝내줍니다.)
강렬한 색체와 굵기대비를 준 타이포그래피가 극박하고 알 수 없는 스포츠의 세계를 잘 표현해주는 것 같습니다.
현재 사이트 리뉴얼을 진행하면서 부분부분 전환효과나 모션이 들어가는데 효과에 대한 규칙이나 시간등이 정해져 있지 않아 뒤죽박죽 난해함을 많이 느끼는데 반성하게 되었습니다.
Fox Sports
Like, Totally
Launched in 2013, Fox Sports Netherlands is, as its name implies, the Dutch version of Fox Sports, consisting of seven…www.underconsideration.com
역시 모르는 스포츠관련, 폭스 스포츠 채널 리브랜딩 프로젝트 입니다.
기존의 로고를 좀더 단순화 시켰으며 토탈풋볼에서 영감을 받아 아이덴티티 시스탬을 구축했다고 합니다.
정사각형을 기반으로 한 그리드와, Sparta라는 새로운 서체를 개발했고 이를 방송 모션그래픽과 각종 인쇄물에 반영했습니다.
특히 Goal을 표현한 것을 보고 심장이 찌릿했습니다. 글자와 그리드를 가지고 골을 넣었을 때의 감성을 율동감있게 표현했기 때문인데요, 그냥 보면 쉽네 이래도 글자만으로 율동감을 주기란 쉽지가 않습니다. (단순한 웹 디자인에서도 문단의 흐름을 고려한 글줄길이 때문에 몇번이고 엔터와 백스페이스키를 누르는걸요.)
영상에서도 마찬가지로, 개발한 서체와 정사각형에 기반한 그리드 시스템을 모션에 반영하여 역동적이고 재미있는 영상을 만들어 냅니다.
최근 PlusA에서 올라온 삼성화재 브랜드 포토제작기를 보며 다른 디자인 분야(?) 이지만, 위 영상 또한 하나의 브랜드를 위한 톤엔매너 라는 생각이 들었습니다.
이를 웹으로 끌어오면 단순히 PlusA 처럼 쓰여지는 사진의 톤엔매너를 다룰 수도 있지만 그 안에서 적용되는 수 많은 UI의 동작방식과 애니메이션 또한 브랜드를 잘 나타낼 수 있는 톤엔메너 요소로 활용할 수 있겠다라는 생각이 들었습니다.
이를 위해선 디자인하고자 하는 대상의 브랜드스러움이 무엇인가? 에 대해 끊임없이 질문해야 겠지요… (PlusX에서 강조하는 말인데 참 좋아하는 단어입니다.)
UX부터 데이터 드리븐까지 디자이너 스택 변천사
데이터로 기획과 디자인을 하다.
각종 도구(Google Analytics 혹은 자체개발 엔진)을 통해 데이터를 통한 정량적인 분석이 가능해지면서 디자이너의 직관/주관적인 판단보다 수치를 이용한 객관화된 분석이 가능해졌습니다.
지금도 그렇고, 기존까지는 심미적인 이유나 혹은 주관적인 이유로 디자인을 했다면 이제는 분석도구를 통해 디자인 결과물에 대한 좋고 나쁨을 객관적으로 판단할 수 있기 때문에 이유있는 디자인이 가능해지고, 클라이언트를 설득할 수 있게 변화했다고 생각합니다.
물론 이에 대해, 아직 SEO등 데이터를 분석하는 능력을 디자이너들과 개발자들에게 까지 요구하면서 새로 공부해야할 것이 생김과 더불어 데이터에 대한 접근권한, 따로 공부하려면 축적된 실제 서비스 데이터가 있어야 하는데 그것이 없어 제대로 공부를 할 수 없다는 이야기들이 오갔습니다.
실제로 저 또한 비슷한데요, 통계 도구에 대해 어떻게 다루는지는 모르지만 광고집행이나 서비스를 론칭하면서 어느 부분에 방문지표가 높은지등을 알고싶지만 마케팅팀만 알고 있으며 이에 대한 접근권한이 없습니다.
현재 이를 잘 활용하고 있는 회사가 ‘데일리 호텔’과 ‘쿠팡’, ‘마켓컬리’ 로 보입니다.
진입장벽이 높고, 전문성 또한 요구되지만 데이터를 분석하고 이를 디자인에 반영할 수 있게된다면 설득력 있는 디자이너로 발전하지 않을까 생각해봅니다.
심미적인 가치가 단순히 시각에만 머물지 말고 즈니스나 다른 영역과 엮일 때 기존보다 더 큰 빛을 발휘할 수 있다.
이다윗 디자이너
그렇다고 심미적 요소를 배제할 수는 없습니다. 심미적인게 우선이 되어야 하니까요… 심미성을 기반으로 데이터를 활용한 디자인이 도출되어야 한다고 생각하고 공감합니다.
디자인 가이드·시스템
스터디에서는 디자인시스템과 프로토타이핑 툴이 보급되면서 UI 설계와 작업에 투자하는 시간이 줄어들었음을 언급하며 짧게 지나갔습니다. 그러면서 어떻게 해야 효과적으로 디자인 시스템을 활용할 수 있는가에 대해 이야기 했습니다.
보통 신생 스타트업이나, 시장에서 경쟁중인 업체에서는 잦은 변화로 디자인 시스템이 구축되지 않고 경쟁에서 이겨 어느정도 안정화가 되면 그때부터 디자인 시스템을 구축한다고 합니다.
물론 윗 글처럼, 서비스나 국가를 확장하거나 폴랫폼이 다양화 될때 아이덴티티가 파편화되는 것을 막기위해 지정하는 것도 있습니다. (저는 이 경우에 속합니다.)
디자인 시스템이라 하면 1차적으로 디자인 내적으로 사용하지만, 2차적으로는 개발 할 때 디자인 수치등을 개발자가 활용하기 쉽도록 하기위해 구축하기도 합니다. 하지만 실제 실무를 경험하면서 느낀점은 개발자들이 디자인 시스템을 숙지하지 못하고 제멋대로 적용하거나 기존에 있는 코드들을 복붙하는 경우가 많았습니다.
디자이너로 입사했지만 마크업을 진행하면서 아무리 유료도구를 사용하더라도 개발자들이 보기 어렵게 구성되어있는 점을 알 수 있었습니다. (저는 주로 스케치파일 자체를 받아서 열어봅니다. 이미지도 제멋대로 뽑아낼 수 있고 편하거든요.)
이러한 측면에서 디자이너들에게만이 아닌 원활한 업무 커뮤니케이션을 가능케 하는 좋은 디자인 가이드는 무엇인가?에 대해 생각해보게 되었습니다.
Full-stack Designer
윗 글과 발표내용은 차이가 큽니다. (원글은 고충을, 발표에서는 그래서 디자이너는 개발에 대한 지식을 갖추어야 한다.)
개발을 이해하면 좋은 점
넓은 시야를 가질 수 있다.
개발자와 원활한 커뮤니케이션을 할 수 있다.
본인의 전문성을 높일 수 있다.
작업 시 개발에 대한 고려사항과 문제를 판단할 수 있다.
스터디에서는 긍정적인 측면만 보여줬지만, 단점 또한 존재합니다.
이것저것 다 할줄아는 디자이너가 물론 좋지만 그것은 주 업무인 디자인을 잘 하고 + α 가 되었을 때의 이야기 일 뿐, 디자인을 못하는데 다른거 할줄알면 아무런 메리트가 없습니다. 또한 α는 이미 그쪽을 전문으로 하는 직업군이 있는데 말이죠.
학교 다닐때도 학과 및 요즘 디자인대학 트렌드가 인터렉티브 미디어 디자인에 특화되어 있는지라 코딩을 할줄 알아야한다고 강조하는데, 저는 이러한 점에서 풀스택 디자이너를 매우 안좋게 봅니다. (물론 디자인 풀스택이 코딩만 해당하는게 아니고 BX/UI/GUI/ILLUST/MOVE를 넘나드는 것이지만요.)
실제로는 풀스택 디자이너를 바라는 회사도 없다.
단지 개발을 이해하는 디자이너를 찾을 뿐!
스터디 PPT 내용 중 —
이러한 회사는 디자인 전문 회사 (에이전시)나 중견이상 급의 회사에만 있다는것이 저의 짧은 생각입니다.
더불어 풀스택 디자이너로서 장점에 해당 하려면 디자인에 대한 연차가 쌓이고 그 후 +α 요소로 공부해 장점으로 내세우는 경우에만 해당하지 않을까 생각해봅니다.