신 상단 디자인 작업환경 살펴보기

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

시작에 앞서
지난 강좌에서도 알려드렸지만, 상단 디자인을 편집할 수 있는 기능들이 기존에 비해 대단히 많아졌습니다. 그만큼 사용법도 어려워졌는데, 이번 강좌에서는 상단 디자인 편집 모드 내 어떤 메뉴들이 있는지 살펴보겠습니다.



상단 디자인 편집 메뉴 살펴보기
페이지 디자인 모드 내에서도 상단 디자인 편집 모드가 추가되었습니다. 상단 디자인 편집 모드를 켜는 방법은 기존과 동일합니다. 페이지 디자인 모드에서 상단 영역에 마우스 커서를 놓고, 마우스 우클릭을 하면 나타나는 보조 메뉴에서 [상단 설정]을 클릭해주세요.



메뉴 살펴보기

1) 디자인 모드로 돌아가기
상단 디자인 편집 모드를 끄고, 디자인 모드로 돌아갑니다.


2) 상단 기본/겹치기 모드 전환하기
메뉴를 클릭해, 기본 상단 또는 겹치기 한 상단 디자인을 따로따로 관리할 수 있습니다.


3) 뷰포트 변경
모바일 버전 상단 디자인도 사용자가 직접 편집할 수 있게 되었습니다. 뷰포트 변경을 클릭해, 모바일 뷰포트로 변경하면 모바일 전용 상단 디자인을 꾸밀 수 있습니다.


4) 공통 디자인 설정
공통 디자인 설정을 클릭해, 기본적인 글자 색, 메뉴 색, 활성화 메뉴 색, 글꼴 등을 지정할 수 있습니다. 제 경우 상단 디자인 편집 모드에서 공통 디자인 설정 메뉴는, 상단 디자인을 하는 과정에서 일관성 있는 디자인을 위해 주로 브랜드 색상 및 메뉴 색상 확인하는 데 사용합니다.


5) 위젯 추가
각 섹션 위쪽 끄트머리 부분에 마우스 커서를 대면, 위 그림 7번과 같은 (+) 아이콘이 나타납니다. 이를 클릭하여 상단메뉴에 들어갈 위젯을 추가할 수 있습니다.


6) 상단 고정메뉴
상단 고정메뉴는 아래 8번 스크롤 고정과 유사하게, 상단메뉴를 페이지 최상단에 고정시키는 기능입니다. 상단 고정메뉴 제작법은 기본 상단 디자인 제작법과 같지만, 섹션을 추가할 수는 없습니다. 간편하게 페이지 상단에 고정되는 상단메뉴를 만들거나, 기본 상단 디자인과는 다른 색상 구성으로 디자인하고자 할 때 사용할 수 있습니다.


7) 상단 테마
상단 디자인을 다른 테마로 바꿀 수 있습니다.

*이전 상단 디자인으로 돌아가고 싶으신 경우, 상단 테마에서 메뉴를 찾으실 수 있습니다.


8) 스크롤 고정
위 5번 상단 고정메뉴와 유사한 기능이지만, 스크롤 고정의 경우 원하는 특정 섹션만 고정시킬 수 있다는 점이 큰 차별점입니다. 핀 아이콘을 클릭해 고정이 가능합니다. 일부 섹션을 고정하거나, 모든 섹션을 다 고정시킬 수도 있습니다.

*단, 모든 섹션을 고정시키는 경우 본문 페이지의 많은 부분이 상단메뉴에 가려질 수 있으니 주의해주세요.


9) 섹션 구분선
각 섹션 단과 행이 어떻게 나누어졌는지 확인할 수 있습니다. 세로 구분선의 경우 마우스로 드래그하면, 가로 단의 크기를 조절할 수 있습니다.


10) 섹션 설정
ⓘ 아이콘을 클릭해 빠르게 섹션 설정 창을 켤 수 있습니다.


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

아임웹 공식제휴사

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