LG Innotek

개요

  • 홈페이지 디자인, 프론트: 클리어픽스
  • 제작 기간: 2017년 2월 ~ 6월
  • 사용 라이브러리: 워드프레스,  Uncode 테마, Ivy-MU 0.3

제작소감

아이비넷에 입사하고 나서는 처음으로 작업한 기업을 위한 홈페이지입니다. 처음이다 보니 시행착오가 많았던 프로젝트였습니다.

워드프레스의 좋은 테마들은 많은 장치를 가지고 있어 잘 활용하면 개발 요건 없이도 홈페이지를 만들 수 있습니다. 그러나 이처럼 복잡한 구조와 다양한 업무를 위한 로직이 내제된 홈페이지들은 단순히 유/무료로 구할 수 있는 플러그인만으로는 해결되기 어렵습니다.

특히 홈페이지 GNB 부근에 있는 multi depth menu (다단 깊이 메뉴)는 그 어떤 워드프레스 테마나 워드프레스 기반의 웹페이지에서 찾기 어려운 독특한 (그러나 다른 비-워드프레스 기반의 대형 웹사이트에서는 자주 기획되는) 메뉴입니다.

다단 깊이 메뉴
LG 이노텍 다단 깊이 메뉴. 홒메이지에서는 최대 4단계까지 깊이 조정이 들어간다.

이것이 브레드크럼과는 다른 점이 있습니다. 최상단부터 최하단까지 노드를 모두 훑어 내려오며 각 단계에서 형제 요소들을 모두 드롭다운으로 조회 가능하다는 점입니다. 브레드크럼에 비해 복잡한 구조이나 반면 사용자에게 보다 자신이 있는 위치를 자세하게 설명해 줄 수 있습니다. 더구나 기존의 워드프레스 메뉴 구조를 완전히 활용하면서 만들어야 하므로 제작 난이도는 조금 높았습니다. 그러나 LG 이노텍과 같은 복잡한 메뉴를 가진 기업을 위한 네비게이션을 만들 때는 의미 있는 선택이라고도 볼 수 있습니다.

내부 로직, 그리고 Ivy-MU

빈 이미지에 대한 디폴트 이미지, 제품 담당자 설정 기능, 제품 문의시 제품 담당자에게 문의 내용 통지 등 여러 업무 로직들이 들어있어 겉으로는 커스텀 플러그인이 무엇을 하는지 뚜렷이 보이지는 않습니다.

그러나 모든 제품 페이지는 기존의 페이지가 아닌 커스텀 플러그인이 제공한 커스텀 포스트, 커스텀 택소노미를 기반으로 하고 있습니다. 꽤 많은 종류의 커스텀 필드가 사용되는데, 이를 위해 Ivy-MU를 도입하여 보았습니다.

댓글 남기기