디지털 프런티어 미디어브레인이 2023년을 맞아 새롭게 홈페이지를 개편했습니다. 기존 홈페이지와는 완전히 다른 모습인데요, 홈페이지를 기획, 리뉴얼한 사내 TF팀의 이야기를 들어보겠습니다. 특히 이번 사내 TF팀은 주니어 브레인들로 구성되어 젊은 세대의 취향을 깊이 반영하겠다는 의지가 돋보입니다.
기획 파트
- 디지털 트렌드 변화에 맞춰 회사 이미지를 변화하고, 방문자에 맞는 정보 제공 노력
- ONE TEAM 메시지와 작업한 프로젝트를 효과적으로 전달
- 미디어브레인이 해온 프로젝트 상세 페이지와 뉴스룸 콘텐츠 주목
홈페이지를 리뉴얼한 목적은 무엇인가요?
디지털 트렌드가 급변하면서 미디어브레인 홈페이지도 변화할 시기가 되었다고 생각했습니다. 창립 18주년을 맞는 미디어브레인의 이미지를 변화시키는 한편 홈페이지 방문자를 분석하고 잠재적인 방문자를 예측하여 그에 맞는 콘텐츠와 정보를 제공하려고 노력했습니다.
홈페이지에서 가장 강조하고 싶은 것은?
미디어브레인이 중요하게 생각하는 가치 ‘함께 일한다’를 의미하는 ‘ONE TEAM’ 메시지를 강조했습니다. 또한 미디어브레인이 지금까지 이루어 낸 프로젝트들을 비주얼 이미지를 통해 효과적으로 전달하려고 잘 보여주는데 집중했어요.
타깃 이용자가 꼭 봤으면 하는 부분은 어디인가요?
미디어브레인이 작업한 결과물을 보여주는 프로젝트 상세페이지입니다. 리뉴얼 작업을 진행하며 가장 많은 시간을 투자한 페이지인데요, 사용자 목적에 맞는 디테일한 작업물을 배치했고, 미디어브레인이 가지고 있는 능력과 가치를 가장 잘 보여준다고 자부합니다. 또한 소셜팀에서 운영하는 뉴스룸 콘텐츠를 메인 영역에 배치하여 미디어브레인의 콘텐츠 제작 능력을 드러내고자 했습니다.
홈페이지 리뉴얼에서 가장 중점을 둔 부분은 어디인가요?
홈페이지 리뉴얼 과정 중에서 기획팀이 가장 중점을 둔 부분은 ‘커뮤니케이션’ 입니다. 어떻게 하면 의견을 잘 조율할 수 있을지 고민했고 서로가 원하는 방향을 원활한 소통을 통해 하나로 만들어 가는 과정에 중점을 두었습니다.
가장 애착이 가는 과정이나 결과는 어떤 것인가요?
팀원들과 처음으로 진행했던 프로젝트다 보니 서로 업무 스타일을 파악하고 이해하기 위한 미팅을 자주(아주 많이) 했습니다. 가장 기억나는 한 부분은 기획서 초반에 진행했던 ‘브레인스토밍’인데요, ‘ONE TEAM’ 키워드를 가지고 각자 생각나는 단어를 적어보고 의견을 조율하는 시간이었어요. TF 팀원들이 열정적으로 참여했기 때문에 좋은 시너지를 낼 수 있었고, 그 시너지로 인해 만족스러운 결과물이 나왔다고 생각합니다.
리뉴얼 한 홈페이지에 대해 5점 만점에 몇 점을 주시겠어요?
4.7점입니다. 팀원들 모두가 열정과 시간을 쏟아부어 만든 프로젝트로 5점 만점을 주고 싶지만, 아무래도 경험이 부족하여 디테일한 요소를 캐치하지 못한 아쉬웠던 점들이 있었습니다.
디자인 파트
- 블루와 오렌지 컬러로 안정감과 속도감을 전달
- ‘ONE TEAM’ 개념을 모티브로 원형과 사각형을 사용
- 회사의 가치를 최대한 보여주고자 노력
오렌지와 블루 컬러 코드의 의미는 무엇인가요?
“미디어브레인 블루”는 미디어브레인의 기존 브랜드 컬러입니다. 색채학적으로 신뢰를 주는 색이지요. 미디어브레인 블루 컬러를 반전하면 보색으로 오렌지 컬러가 나옵니다. 오렌지는 색채학에서 원기, 유쾌, 적극을 상징합니다. 디자인팀은 홈페이지를 개편하며 새롭게 팀에 합류한, 그리고 합류할 팀원들의 에너지를 불어넣고 싶었습니다. 회사를 잘 나타내는 안정감 있는 미디어브레인 블루를 처음 메인에 진입할 때 보여주고, 오렌지 컬러로 활력감과 율동감을 표현했습니다. 발 빠르게 변하는 트렌드 속에서 미디어브레인의 안정감 외에 속도감까지 보여주고자 하는 의도입니다.
동그라미와 사각형은 어떤 의미인가요? > ‘ONE TEAM’이라는 개편 컨셉에 따라 어떤 작업이든 어떤 구성원이든 하나의 목표를 위해 한 팀처럼 움직이는 게 마치 점, 선, 면의 구조와 닮았다고 생각 들었습니다. 점이 모여 선이 되고, 선이 모여 면이 됩니다. 저희도 각자 다른 구성원들이지만 한 프로젝트를 끝마치기 위해 서로를 이해하고 협력하면서 결국에는 하나의 결과물을 만들었습니다. 이걸 모티브로 점을 원형으로 표현하고 선/면은 사각형으로 표현했습니다.
디자이너 관점에서 가장 중요하게 생각한 것은 무엇인가요?
웹이라는 자유로운 환경에서 미디어브레인이 갖고 있는 기획력, 디자인, 퍼블리싱의 최대치를 다 보여줄 수 있는 디자인을 하고, 첫 인상을 가장 멋지게 보여주는 것입니다.
디자이너로서 홈페이지에 주고 싶은 점수는?
4.5점입니다. 오랫동안 유지해 왔던 홈페이지를 개편하려니 하고자 하는 바가 너무 많았습니다. 브랜드 아이덴티티를 좀 더 보완해야 했고, 추가하고 싶은 것도 정말 다양해 저희는 선택과 집중이 필요했습니다. 그 과정에서 빠른 대응을 하지 못했던 부분이 아쉽습니다. 결과물을 내어놓고 나니 이 경험에서 많은 걸 배웠다고 생각합니다.
퍼블리싱 파트
- 목적이 분명한 인터랙션만 사용해 시스템 리소스를 적절하게 사용
- 역동적인 애니메이션은 회사가 추구하는 가치와 일치하도록 의도.
- 크로스브라우징 이슈 해결하는 귀한 노하우 획득
퍼블리싱 할 때 가장 중점을 둔 부분은 무엇인가요?
이번 프로젝트에서 프런트엔드 작업 목표는 ‘인터랙션의 최소화’였습니다. 목적이 분명한 인터랙션만 최소한으로 사용하는 거죠. 맥락에 상관없이 화려하게만 보이는 애니메이션은 이용자의 피로도만 높인다고 판단했습니다. 그리고 과도한 시스템 리소스 사용으로 야기되는 에너지 낭비를 조금이나마 줄여보자는 이유도 있었습니다.
역동적으로 움직이는 동작에는 어떤 의미가 담겨 있나요?
가장 눈에 띄는 인터랙션은 index(메인)과 about(회사소개) 페이지의 히어로 영역입니다. 홈페이지의 주요 키워드인 ONE TEAM을 모티브로 원형 마스킹 애니메이션을 구현했습니다. index(메인) 페이지의 두 번째 영역에는 우리의 역량과 가치를 역동적으로 표현했습니다. 작은 점(원)에서 시작된 도형이 결국 하나의 팀으로 완성되는 과정을 담았습니다. 이 과정은 모바일에서 볼 때 더 빛이 납니다. 스크롤에 반응해 작동하는 애니메이션이 우리가 추구하는 가치를 보다 강력하게 전달합니다.
퍼블리싱 할 때 가장 좋았던 점은?
IE(인터넷 익스플로러)를 탈피했다는 점에서 큰 박수를 쳐주고 싶습니다. 덕분에 새로운 코드와 기술을 마음껏 적용할 수 있었습니다. 이전보다 시맨틱 하면서도 간결한 코드를 사용했습니다. ‘grid’와 ‘flex’를 이용한 정렬을 사용해 프런트 작업 기간을 획기적으로 줄였지만 여전히 크로스브라우징 이슈는 존재합니다. iOS의 Safari 브라우저가 IE(인터넷 익스플로러)의 악명을 이어받은 상황입니다. 어디서 터질지 모르는 Safari의 버그를 잡으며 귀한 노하우를 얻었습니다. 새로운 기술을 사용할 때 주의할 점을 학습하는 값진 시간이었습니다.
다들 오랜 시간 수고하고 협력해서 만든 미디어브레인 홈페이지, 당연히 들러보셔야겠지요? 아래 링크로 방문하시고, 궁금한 점은 언제든 질문하셔요!
