푸시웹 홈페이지상단,주요기능

상단 디자인 설정 주요 기능 알아보기

시작에 앞서

상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다. 푸시웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다.

이 섹션에서는 푸시웹 상단 디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다.

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 상단을 디자인하듯, 똑같이 편집이 가능해졌습니다.

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

2012년 모바일 앱 제작으로 첫발을 내딛은 이래, 2014년 PC 홈페이지, 모바일 웹, 앱 간의 원활한 연동 시스템 개발을 통해 기술적 기반을 다졌습니다. 이러한 경험을 바탕으로, 2016년 1월에는 다양한 업종을 위한 반응형 홈페이지, 쇼핑몰, 펜션 웹 솔루션을 선보이며 서비스 범위를 확장했습니다. 우리는 고객에게 최상의 사용 경험을 제공하고, 시대의 흐름에 맞춘 서비스 개발에 지속적으로 힘쓰고 있습니다.

대표전화	070-7517-8832
상담직통	010-5264-8829
자료 전송	pushweb@naver.com

디자인 모드