멜로디로 소통하는 그들의 일상, 안테나

상세페이지

  • HOME > 프로젝트 & 프로모션

멜로디로 소통하는 그들의 일상, 안테나

잘 쉬는 것도 능력이다. 때로는 잠시 모든 것을 멈추자. 어느 날 이유 없이 무기력함을 느끼는 이유는 성취 욕구가 너무 크기 때문이다. 하고 싶고 이루고자 하는 것조차 없으면 그런 감정을 느낄 수 없다. 그러니 우리 모두 힘내자. 이렇게 지치고 힘들 때 음악으로 위안받는 사람들은 주목하길 바란다. 감성변태 유희열이 속한 안테나가 웹사이트를 개편했다.
글. 남은선 기자 es@websmedia.co.kr


프로젝트명  안테나 웹사이트 개편 URL  www.antenna.co.kr 부문  브랜드/프로모션 클라이언트  안테나(Antenna) 제작사  D.FY 오픈일  2015년 12월 21일




안테나가 변하고 있다 안테나가 무엇인지 잘 모르는 사람은 오디션 프로그램 ‘K팝 스타’를 떠올리면 된다. 요즘 SBS에서 시즌5를 방영하고 있다. 안테나는 YG, JYP, 그리고 SM과 달리 전형적인 아이돌보다는 통기타나 피아노를 연주하면서 노래와 작곡도 할 수 있는 아티스트를 선호한다. 감성과 예술성으로 음악을 만들고 들려준다. 다양한 대중문화 영역을 아우르는 크리에이티브 그룹으로서 대중성과 실험성을 균형 있게 실현하고 있다. 소속가수로는 유희열, 루시드폴, 페퍼톤스, 정재형, 박새별, 권진아, 이진아 등이 있다. 

최근 안테나는 오디션 프로그램을 통해 여러 신인 가수를 영입하면서, 규모를 확장하고 있다. 또한 2015년 사명을 ‘안테나뮤직’에서 ‘안테나(Antenna)’로 바꿨다. 새로운 브랜드마크도 만들었다. 노란색 동그란 원 안에 검은색 알파벳 A가 들어가 있다. 그에 이어 2015년 12월에는 전면 개편한 공식 웹사이트를 공개했다. 웹사이트에서 볼 수 있는 안테나를 소개하는 문구가 인상적이다. 

 “아티스트들의 음악에 담긴 삶의 시선이나 방식을 이야기하고자 합니다. 소속 아티스트 각자가 지닌 본질을 끌어내어 음반을 제작
하고 소개하는 것, 우리는 이것이 좋은 사람, 좋은 음악을 만들어 낸다고 믿고 있습니다.” 


‘좋은 사람, 좋은 음악’을 전하는 창구 
 
웹사이트 제작사 디파이(D.FY)의 권순규 CD는 “안테나가 어떤 음악을 추구하는지, 웹사이트의 운영 방향과 목적이 무엇인지 등을 기획 단계에서 많이 대화한 덕분에 가장 이상적인 접점을 찾을 수 있었다”고 밝혔다. 또한 “유희열씨가 꼼꼼하게 검토하면서 원하는 점을 명확하게 제시해준 점이 인상 깊었다”고 덧붙였다. 이와 같은 소통으로 나온 웹사이트 기획 목적은 브랜딩(Branding), 기록 보관(Archive), 연결(Connect) 세 가지다. 대중과 소통하면서, 그들에게 새로운 영감과 공감을 주기 위해 ‘Hello, Antenna’라는 슬로건도 탄생했다. 유희열은 방송에서 안테나라는 회사명은 ‘세상에 널리 음악적 전파를 쏘겠다’는 의미를 담고 있다며 수줍게 밝힌 적이 있다. 안테나는 그들만의 방향성과 속도로 나아가고 있다. 웹사이트에도 안테나의 아이덴티티인 음악성과 진정성을 담기 위해 가장 신경 썼다. 소속 아티스트들의 다양한 콘텐츠도 강화했다. 
 

콘텐츠가 중심인 단순한 구성 
 
UI는 최소화하고 심플하게 디자인했으며, 가장 기본적인 카테고리로만 분류했다. 카테고리는 News, Releases, Artists, Events, #Antenna로 나눴다. 각 카테고리를 클릭해 들어갈 필요가 없다. 메인 페이지에서 스크롤로 쭉 내리면 모든 콘텐츠를 둘러볼 수 있다. 마치 소셜 큐레이션 서비스처럼 안테나의 콘텐츠를 아카이브했다. 이 특성을 살리는 의외의 재미도 숨겨져 있다. 바로 메뉴 버튼이다. 좌측 상단에 안테나의 심볼마크는 클릭하면 첫 번째 페이지로 이동하는 기능이 아닌, 메뉴 버튼이다. 그리고 중요한 콘텐츠나 기능이 눈에 띄도록 공백을 적절히 활용했다. 버튼은 테두리나 박스로 표현하지 않고, 타이틀을 의미 있는 단어로 정하고 시스템 컬러를 사용했다. 기능적인 측면을 떠나 안테나만의 콘텐츠가 중심이 되고, 팬들과 소통할 수 있는 공간과 단순한 정보 구조를 만들었다. 웹사이트 기획 목적 중의 하나인 ‘연결(Connect)’을 구현한 셈이다. 


안테나 심볼마크, 아티스트 영상을 활용한 브랜딩 
 
웹사이트 메인 페이지 상단에는 풀 스크린 화면으로 안테나 소속 아티스트의 모습을 영상으로 띄워 브랜딩 영역으로 활용했다. 또한 패럴랙스 스크롤링으로 보디 영역과 구분했다. 이는 안테나 소개 페이지에서도 똑같이 적용했다. 전반적으로 전반적으로 안테나의 심볼마크 원형만을 가져와 페이지 내에 주요 타이틀 또는 타일 리스트의 콘텐츠마다 마침표처럼 표현 했다. 또한 심볼마크와 로고 타입을 응용해 아이콘이나 아티스트 리스트와 로딩무비 디자인에 반영해 일관된 아이덴티티를 느낄 수 있다.





interview 권순규 디파이 디자인팀  크리에이티브 디렉터

안테나 웹사이트는 디파이가 지금까지 진행했던 프로젝트보다 더 특별한 프로젝트입니다. 회사 업무이면서도 팬심이 들어가서 애정이 듬뿍 들어갔으니까요. 아마 저희 팀원들도 같은 마음이었을 겁니다. 그러다 보니 콘셉트 방향을 잡아나갈 때부터, 안테나 특유의 감성을 벗어나는 불필요한 요소는 최대한 자제하려 했어요. 그리고 안테나가 앞으로 추구하는 것들을 안테나의 공식 웹사이트에 잘 나타낼 수 있게 하는 공간 설계에 초점을 맞췄습니다. 아쉬운 부분들은 아직도 남아있지만, 이것을 시작으로 앞으로 잘 채워나갈 수 있기를 바랍니다.






information architecture 관리자 단의 효율성 고려

안테나의 메인 페이지는 모든 콘텐츠를 실시간 아카이브한다. 이처럼 상시 변하는 콘텐츠를 구현하기 위한 정보 구조화가 필요했다. 프론트 화면에만 국한하지 않고, 어드민과 프론트 간의 구조적인 부분을 동시에 만들었다. 먼저 웹사이트의 모든 콘텐츠를 분류했다. 그들의 중요도와 주기 계산을 통해 다른 콘텐츠를 한 공간에 모았을 때, 어떤 기준과 구성으로 노출할 것인지를 기획했다. 개발 측면에서 관리자와 연결 및 로딩할 콘텐츠 양을 설계하면서, 디자인으로 어떻게 표현할지까지 구상했다. 이를 통해 콘텐츠를 한 번 등록하면, 웹사이트 스스로 형태를 변화하는 모습으로 구축할 수 있었다.






development issue 콘텐츠 실시간 연동과 신속한 로딩

안테나 소속 아티스트가 운영하는 소셜 미디어의 콘텐츠를 API를 이용해 메인페이지와 실시간 연동이 가능하게 만들었다. ‘최초 더 보기’ 버튼을 클릭한 후에는 눈에 보이는 곳의 콘텐츠를 먼저 로딩하고, 스크롤하면 콘텐츠를 로딩하는 기법을 사용했다. 콘텐츠를 한 번에 로딩하지 않고 순서대로 로딩하기 때문에 속도가 빠르다. 다음 콘텐츠를 바로 한눈에 이어 볼 수도 있다. 그리고 콘텐츠를 클릭하면 새로운 페이지로 이동하지 않고, 현재 위치에서 레이어 팝업 형태로 뜬다. 해당 페이지의 우측 상단의 닫기 버튼을 클릭하면, 바로 이전 페이지로 이동한다.






ui&ux 단순한 인터페이스와 구성

콘텐츠는 일정한 크기의 카드뷰 형태로 구성했다. 또한 이것들을 타일 리스트로 뿌려 놓았다. 이 때문에 꼭 메뉴를 통해 다른 카테고리로 이동하지 않아도 된다. 하단으로 스크롤을 내리다가 클릭하다 보면 자연스레 다른 카테고리로 이동하기 때문이다. 그렇다고 메뉴 버튼이 아예 없는 것은 아니다. 좌측 상단에 있는 노란색 원형의 안테나의 심볼마크를 클릭하면 메뉴가 뜬다. 사용자들이 웹사이트의 로고를 클릭하면 메인 페이지로 이동하는 것을 안다는 사실을 역이용해, 심볼마크에 메뉴를 숨겨놓은 셈이다.






layout 콘텐츠를 돋보이게 하는 레이아웃

다양한 종류의 디바이스에 반응하는 레이아웃을 구현하기 위해 반응형 웹으로 구축했다. 이를 위해서 심플한 면 분할로 이뤄진 그리드 레이아웃을 채택했다. 또한 텍스트와 이미지 중심으로 콘텐츠를 구성하고 UI 일관성을 유지하면서, 화면에 보이는 요소들을 목적과 성격에 맞게 균형감을 가질 수 있게 표현했다. 예를 들어 News 카테고리에는 단문의 텍스트 타입으로 구성했으며, 반대로 Releases, Artists, #Antenna 카테고리는 이미지 중심으로 만들었다. 이는 타일 리스트형식으로 나열했을 때 텍스트와 이미지가 적절하게 조화를 이루는 레이아웃을 통해, 콘텐츠가 중심이라는 점을 강조했다.

tags 디아이투데이 , ditoday , 월간 DI , 디아이 , DI 매거진 , 디아이 매거진 , 남은선 기자 , 안테나 뮤직 , 안테나 , 유희열 , 웹사이트 , 웹사이트 개편 , 디파이 , 엔터테인먼트

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
프로젝트 & 프로모션
bapul, 심플한 공부 비법 바로단어장
프로젝트 & 프로모션
쉽고 빠른 법률 상담 서비스, 로톡
프로젝트 & 프로모션
멜로디로 소통하는 그들의 일상, 안테나
프로젝트 & 프로모션
코스메틱 웹사이트의 표준, VDL
프로젝트 & 프로모션
“진수 선배, 맥주 사주세요” 카스 ‘Buy Me A Beer’

정기구독신청