새로운 상단 디자인 5가지 주요 기능 살펴보기

  아임웹 연구소 소장 해준  |  2017 . 10 . 18

시작에 앞서
드디어 기다리고 기다리던 새로운 상단 디자인이 적용되었습니다. 전 세계를 뒤져봐도 위지위그, 드래그 앤 드롭 기반의 웹사이트 제작 솔루션 중 이만한 디자인 자유도를 제공하는 곳은 흔치 않을 겁니다. 최소한 제가 아는 선에서는 없습니다.

그만큼 대단히 많은 기능이 추가되었고, 잘만 사용하면 솔루션이라고는 믿기지 않을 만큼 멋진 디자인이 가능해졌습니다. 그러나 그만큼 사용법은 어려워졌고, 신경 써야 할 부분이 많아진 것도 사실입니다.

저는 사실 너무 많은 기능에 무엇부터 여러분들께 알려드려야 할지 사실 고민이 많았습니다. 그러나 고민만으로 그 어떤 것도 시작되지 않는 법! 우선 큼직큼직한 부분부터 써보고자 합니다. 오늘 강좌를 통해 '신 상단 디자인 편집 메뉴'에 대한 주요 기능들을 알려드리고, 차차 응용하는 방법을 추가해가겠습니다.



Point 1. 최대 3단으로 나눌 수 있는 상단 섹션
우리는 페이지 본문을 디자인할 때, 섹션을 추가한 다음, 위젯을 추가하거나, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 최대 3개 단으로 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다.

1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 설정됩니다. 여기서 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운 단이 생겨나며, 왼쪽/가운데/오른쪽 모두 위젯을 추가하는 경우, 3개 단으로 설정됩니다.



2) 단 크기 조절하는 방법
단의 크기는 파란 점선을 통해 구분이 가능합니다. 각 단은 파란 세로 점선을 마우스로 좌우로 드래그함으로써 그 크기를 균등하게 조절할 수 있습니다.





Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있게 되었습니다. 이로써 더욱 차별적인 상단 디자인이 가능하게 되었으며, 필요에 따라 특정 섹션은 마우스 스크롤을 해도 상단에 고정할 수 있는 기능도 추가되었습니다.

1) 상단 전용 섹션을 추가하는 방법
상단 영역에 마우스 커서를 놓고 우클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 [빈 섹션 추가]를 클릭하여 섹션을 여러 개로 늘릴 수 있습니다.



2) 섹션 단위 상단 고정하기
상단 전용 섹션 좌측에 위치한 [핀] 아이콘을 클릭하는 것으로, 원하는 섹션을 상단에 고정시킬 수 있습니다. 상단에 고정되길 원하는 섹션만 핀을 클릭해주세요. 물론 모든 섹션 핀을 클릭하면 모든 섹션들을 고정시키는 것도 가능합니다.



3) 상단 고정메뉴 설정하기
상단 섹션 고정과는 별개 디자인 스타일로 [상단 고정메뉴]를 만들 수도 있습니다. 기본 상단 디자인과는 다른 스타일로 상단 고정메뉴를 만들고 싶은 경우 사용할 수 있습니다.





Point 3. 위젯들로 상단 메뉴를 더 다양하고, 자유롭게
위젯들을 사용해 상단 메뉴를 풍성하게 꾸밀 수 있습니다. 기존에 기능하던 상단 메뉴 외에도 다양한 상단 전용 위젯들이 추가되었으며, 일부 위젯은 로그인 전/후의 기능도 변경할 수 있게 되었습니다.

1) 위젯을 추가하는 방법
빈 상단 전용 섹션을 추가하면 처음에는 한 개 위젯만 추가가 가능합니다. 위젯 추가 후 필요하다면, 마우스 커서를 상단 섹션 위쪽 끄트머리에 놓으면, 플러스(+) 아이콘이 나타납니다. 이 플러스(+) 아이콘을 클릭하는 것으로 새로운 위젯을 추가할 수 있습니다.

추가로 왼쪽 끄트머리에 마우스 커서를 대면, 왼쪽 단에 위젯이 추가되며, 오른쪽 끄트머리에 오른쪽 단에 추가됩니다.




2) 위젯 배치하는 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 단 역시 좌 또는 우로 드래그하여 변경이 가능합니다. 보다 간편하게 위젯이 위치한 단을 변경하려면, 위젯 보조 메뉴를 열고 '이동' 메뉴를 클릭해 왼쪽/가운데/오른쪽을 선택해주세요.




3) 위젯 디자인 변경 및 설정 방법
상단 전용 위젯 역시 고유의 설정을 가지고 있습니다. 설정 창을 열면 각 위젯이 가진 디자인 및 설정, 옵션을 변경할 수 있습니다.





Point 4. 달라진 겹치기 디자인 메뉴
지금까지는 '겹치기'라는 메뉴 클릭 한 번으로 상단과 섹션 배경을 겹치는 것이 가능했습니다. 그러나 상단 섹션을 여러 개로 구성할 수 있고, 일부 섹션만 고정할 수 있게 된 지금 기존과는 작업환경이 다소 달라졌습니다.

기본 상단과 겹치기 한 상단 디자인 별도 관리 가능
디자인 모드 상단 중앙에 위치한 탭 메뉴를 클릭해 '기본 상단' 또는 '겹치기 한 상단' 디자인을 따로따로 관리할 수 있습니다.





Point 5. 모바일 상단 디자인 가능
구형 상단의 경우 모바일 버전은 별도 디자인할 수 있는 옵션이 매우 적었습니다. 그러나 신형 상단의 경우 PC 상단을 디자인하듯, 똑같이 편집이 가능해졌습니다.



1) 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
2) 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
3) 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.
4) PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.
5) 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.
6) 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.