새로운 하이브아레나 홈페이지

리뉴얼한 하이브아레나 홈페이지를 소개합니다.

얼마 전부터 조금씩 시작한 하이브아레나 홈페이지 리뉴얼 작업을 완료했다. 전체 일정은 약 2주정도로 계산하고 시작을 하였다. 먼가 야심찬 계획을 가지고 시작한 것은 아니었다. 공간에서 꾸준히 이벤트가 진행되고 우리 홈페이지에 정보를 표시했어야 했기에 홈페이지를 닫아두고 작업을 진행하지는 않았다. 기존의 홈페이지는 계속 노출되는 가운데 전체작업을 진행하였다. 자연스럽게 필요성이 느껴져서 시작하였다.

homepage

위의 이미지는 하이브아레나의 멤버들과 이야기한 개선할 사항들을 추린 내용이다. 새로 리뉴얼한 홈페이지의 목표를 다시 정리하자면 아래와 같다.

  • 최대한 홈페이지의 구조를 단순화할 것.
  • 모바일에서 정보를 쉽게 볼 수 있을 것.
  • 블로그를 보기 좋게 만들 것.
  • No coding, Only themes with plugins

홈페이지 구조 단순화하기

기존의 홈페이지는 Home을 비롯해서 About, Membership, Community, Event, Blog, Location, Contact 등 메뉴가 정말 많았다. 즉, 웹과 모바일에서 많은 페이지에 접속해서 정보를 접해야한다는 불편함을 주었다. About과 Memebership 페이지에서는 하이브아레나에 대한 소개가 겹치는 것도 존재하였다. 또한 데스크탑으로 홈페이지를 접속시 메뉴의 배경이 투명하여 뒷배경의 사진에 따라 메뉴의 가독성 부분에서 문제를 야기하였다.

우선 기존의 About, Membership, Location, Contact 페이지는 과감하게 하나의 페이지로 줄였다. 그 결과물은 새로운 홈페이지에서 바로 확인이 가능하다. One page의 느낌이 들도록 정보를 통합하고 간소화시켰다. 웹이든 모바일이든 하나의 페이지에서 아래로 드래그하여 원하는 정보를 볼 수 있도록 만들었다. 또한 복잡하던 메뉴를 Home,Events,Community,Blog 총 4개로 줄이고 메뉴의 가독성 부분도 아래와 같이 해결하였다.

new-menu

홈페이지의 구조화 문제는 워드프레스의 멀티사이트라는 기능을 이용해서 해결하였다. 이 기능은 하나의 도메인에 여러 서브 도메인 사이트를 만들 수 있는 기능이다. 우리의 홈페이지의 도메인 주소는 hivearena.com 이다. 블로그, 이벤트, 커뮤니티는 각각 blog.hivearena.com, events.hivearena.com, community.hivearena.com 이라는 도메인으로 만들어져있다. 즉, 위에서 언급한 4개의 메뉴가 각각 다른 4개의 사이트(디자인이 다른)로 연결이 된다. 안드로이드와 아이폰에서는 메뉴를 클릭할때마다 각각 새로운 창이 뜬다.(단, Home을 클릭시에는 새 창이 뜨질않고 같은 창에서 사이트가 바뀐다.)

hivearena-multisite

멀티사이트 기능은 위의 이미지처럼 하나의 워드프레스로 여러 사이트(도메인)를 관리할 수 있다는 장점을 가지고 있다. 자신이 사용하고 있는 호스팅에서 서브 도메인 환경을 지원한다면 누구나 사용이 가능하다. (카페24에서는 서브도메인 지원이라고 쓰여있는 호스팅에서 사용이 가능하다.) 실제 멀티사이트 환경을 세팅하는 것도 어렵지 않다. wordpress.org의 Create a Network에서 쉽게 따라할 수 있다.

모바일에서 정보를 쉽게 보게하기

우선 다양한 디바이스에서 정보를 쉽게 접할 수 있게 당연히 반응형 테마를 이용했다. 다만 Events 홈페이지에서도 볼 수 있다시피 모바일에서 접속하는 하이브아레나의 컨텐츠들은 왼쪽 정렬도 만들었다. 영어라면 모르겠지만 한글은 가독성을 조금이라고 고려했을 때 가운데 정렬은 피곤함을 유발한다. 그래서 아래의 사진과 같이 최대한 거의 모든 컨텐츠를 왼쪽을 기준으로 정렬하였다.

event-layout

이벤트 홈페이지

blog-layout

블로그 홈페이지

그리고 모바일에서는 최대한 적은 수의 클릭과 빠르게 정보를 볼 수 있게 만들었다.(이 부분은 계속 연구(?)중이다.) 하나의 이벤트를 신청한다면 하이브아레나 홈페이지에서 이벤트 홈페이지로 1번의 이동, 이벤트 홈페이지에서 세부이벤트로 1번의 이동, 세부이벤트에서 정보를 살펴보고 이벤트 신청하기 버튼 클릭 1번, 이벤트 정보를 살펴보고 신청하는데까지 3번의 클릭과 이동으로 끝나게 구상하였다. 블로그는 기존의 홈페이지보다 우선 디자인이 좋게 바꾸었고 마찬가지로 모바일에서는 2~3번의 이동이면 해당 포스트를 읽게 만들었다.(바로 이벤트, 블로그 홈페이지에 접속한다면 이동횟수 1번은 감소한다.)

블로그를 보기 좋게 만들 것.

블로그는 이전 모습보다 훨씬 좋아졌다. 홈페이지를 공개하고 가장 많이 받은 피드백 중 하나가 블로그가 정말 보기 좋아졌다라는 것이었다. 모바일에서의 모습에서는 약간 카드뉴스 느낌도 제공해준다.

No coding, Only themes with plugins

개인적으로 나는 워드프레스를 초기 스타트업에게는 너무나 매력적인 서비스라는 글로 소개한 바 있다. 실제 스타트업을 막 시작하는 사람입장에서 창업자가 개발자가 아닌 이상에서는 앱이나 웹을 만든다는게 어렵다. 그래서 코딩없이 만들 수 있다는 가능성을 제공하고 싶은 욕심에 테마와 플러그인을 가지고만 전체를 구축하였다.

테마는 Enfold라는 워드프레스 테마를 주로 썼고 블로그는 Magni라는 테마를 썼다. 플러그인은 기본적으로 워드프레스를 사용하는 사람이라면 쓰는 Jetpack, Akismet, TinyMCE Advanced를 비롯하여 이미지 최적화에는 EWWW Image Optimizer, SEO에는 Yoast에서 만든 WordPress SEO, 캐쉬에는 WP Super Cache 등 유료플러그인을 최대한 피하고 무료플러그인들을 썼다. 유료가 있다면 Social Share Plugin인 Monarch가 있다. 시간과 노력이 들어갔지만 홈페이지의 전체 모습과 기능을 구축하는데에는 호스팅비(매달 2만원)를 포함해서 많아야 20만원 남짓될꺼 같다.

그리고 WordPress Mu Domain Mapping이라는 플러그인도 쓰고 있는데 하이브아레나의 멤버십 회원들과 같이 쓰고 있는 블로그인 노마드 스피릿(http://knowmadspir.it)은 knowmadspirit.hivearena.com이 원래주소인데 해당 플러그인을 이용해서 knowmadspir.it로 보이게 만든 것이다.

추가로 새로 만든 홈페이지들의 반응형 이미지를 첨부해본다.^^

home-responsive

blog-responsive

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.