아세아시멘트 홈페이지 제작후기

2015년 50주년을 맞이한 아세아시멘트는 국내 굴지의 시멘트 회사입니다. 50주년을 맞이하여 아세아시멘트는 대대적인 홈페이지 리뉴얼 작업에 들어갔는데요. 아세아시멘트 홈페이지 및 50년사 홈페이지, 아세아(주) 홈페이지까지 크게 세 갈래의 방대한 작업이었습니다. 각 사이트의 반응형 웹 작업과 다국어 작업까지 모두 마무리되고 나니 2016년이 되어서야 후기를 남기게 되었네요.

↑ 아세아시멘트의 오랜 역사만큼이나 다양하고 알찬 방대한 양의 콘텐츠들

1. 아세아시멘트 제조공정 사이버투어
플래시 애니메이션, 모바일에서도 볼 수 있게!

50년이나 된 회사인 만큼 방대한 콘텐츠를 자랑하는 아세아시멘트 홈페이지에서 가장 먼저 소개할 내용은 “아세아시멘트 제조공정 사이버투어”입니다. 기존에 플래시로 만들어진 애니메이션 페이지를 HTML5 canvas로 변환하여 재활용한 애니메이션 페이지로 기존의 동적인 애니메이션들이 그대로 구현되었습니다.

↑ 클릭하여 애니메이션을 확인하실 수 있습니다.

2. 사용자 편의성을 고려한 UI
어떤 사용자라도 쉽게 접근할 수 있는 네비게이션 요소들!

다음으로 소개할 내용은 사용자 편의를 고려한 네비게이션 메뉴입니다. 주 메뉴에 마우스를 가져다 대면 하위메뉴가 보이는 일반적인 형태를 띄고 있지만 펼쳐진 메뉴의 왼쪽아래 ‘메뉴고정’ 체크박스가 있어 마우스를 뗀 상태에서도 계속 펼쳐진 메뉴를 확인할 수 있습니다. UI디자인의 최신 트랜드인 플랫디자인이 적용된 아이콘들을 배치하여 밋밋함을 배제하면서도 한 눈에 쏙 들어오는 네비게이션입니다.

↑ 하위메뉴가 감춰진 상태

↑ 하위메뉴가 열려진 상태. 왼쪽 아래를 보면 메뉴 고정 체크박스가 있습니다.

또한 스크롤을 내려도 언제나 따라오는 플로팅 메뉴(오른쪽)에 자주 이용하는 메뉴 아이콘들을 배치하였고, 오른쪽 가장 상단에는 전체 메뉴를 한 눈에 펼쳐 볼 수 있는 버튼을 배치하였습니다. 오랜 역사와 전통만큼이나 다양하고 풍부한 콘텐츠 중 사용자가 원하는 콘텐츠를 홈페이지 어디에서나 찾기 쉽도록 배려한 것입니다.

↑ 스크롤해도 따라오는 플로팅 메뉴

↑ 전체 메뉴를 펼친 모습

3. 사보, 웹진으로 재탄생
E-BOOK 기능으로 동적인 웹진 구현!

↑ 책장의 책들처럼 진열된 아세아시멘트의 사보들(클릭하면 페이지로 연결됩니다.)

새롭게 개편된 아세아시멘트 홈페이지에서는 매분기별로 발행되는 사보에 E-BOOK 플러그인 적용으로 홈페이지에서 직접 웹진을 볼 수 있습니다. 책장을 넘기는 듯한 효과는 물론 줌인, 줌아웃, 전체 보기, 페이지 바로가기 등의 기능이 적용됩니다.

↑ 사보를 선택하여 클릭하면 책장을 넘기며 볼 수 있는 E-BOOK이 나옵니다.

4. 아세아 50년사
홈페이지에서 사이버 역사관을!

↑ 아세아 50년사의 인트로 페이지 (클릭하면 아세아 50년사 홈페이지가 새 창에서 열립니다.)

아세아 50년사의 인트로 페이지에서 각 항목을 클릭하여 들어가면 각각의 연도 페이지를 확인할 수 있습니다. 또판 각 연도 내에서도 마우스휠을 스크롤하거나 오른쪽 중단의 네비게이션을 클릭하면 원페이지 스크롤 방식으로 다음 페이지를 바로바로 확인할 수 있습니다.

↑↓ 스크롤로 연결되는 페이지

각 페이지마다 한 개의 장으로 E-BOOK 형태의 히스토리북과 화보도 연결되어 있으며, 메트로 디자인 적용과 섬세한 반응형 작업을 통해 어떤 기기에서도 아세아시멘트의 장구한 역사를 일목요연하게 파악할 수 있습니다.

5. 아세아(주) 홈페이지
가로형 디자인의 새로운 사이트!

↑ 아세아(주) 홈페이지 메인화면 (클릭하면 홈페이지가 새 창에서 열립니다.)

아세아시멘트의 지주사인 아세아(주)의 홈페이지는 아세아시멘트 홈페이지의 기본 컨셉트는 유지되면서도 완전히 다른 느낌의 새로운 홈페이지입니다. 최근 각광받고 있는 가로형 레이아웃으로 왼쪽에 네비게이션이 위치하며, 메인 페이지에서는 스크롤 없이 한 눈에 모든 요소가 보일 수 있도록(데스크탑 PC 기준) 제작되었습니다. 같은 그룹사이지만 각각 완전히 다른 하나의 회사이듯이, 기본 디자인 컨셉트를 같게 유지하면서도 완전히 다른 레이아웃을 적용하여 새로운 느낌을 받을 수 있습니다.