Skip to main content
m1

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

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

아세아시멘트 환경경영시스템
아세아시멘트 자원순환체계 구축
아세아시멘트 제품정보

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

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

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

www-asiacement-co-kr-step-making_popup

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

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

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

www-asiacement-co-kr-company-vision1

↑ 하위메뉴가 감춰진 상태

www-asiacement-co-kr-company-vision2

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

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

www-asiacement-co-kr-floating-menu

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

www-asiacement-co-kr-whole-menu

↑ 전체 메뉴를 펼친 모습

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

www-asiacement-co-kr-promotion-webzine

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

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

www-asiacement-co-kr-e-book2

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

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

www-asiacement-co-kr-history

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

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

www-asiacement-co-kr-history-list1

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

www-asiacement-co-kr-history-list2

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

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

www-asiaholdings-co-kr

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

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

compare

↑ 통일성은 유지하면서도 완전히 다른 느낌을 받을 수 있는 아세아시멘트(좌)와 아세아(주)(우)

FacebookTwitterGoogle+Share