상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 이 도움말에서는 상단 디자인 모드의 주요 기능들에 대해 설명합니다.
Point 1. 최대 3개 열로 구성
사용자는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 열까지 나눌 수 있으며, 각 열마다 필요한 위젯을 나누어 배치할 수 있습니다.
1. 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
상단에 위젯을 추가할 수 있습니다. 추가한 위젯은 왼쪽/가운데/오른쪽으로 배치할 수 있으며, 배치된 위젯의 개수에 따라 최대 3개 열로 구성됩니다.
2. 열 너비 조절 방법
열의 너비를 조절할 수 있습니다. 열의 너비는 파란 점선을 통해 구분이 가능하며, 파란 점선을 마우스 클릭 후 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다. 위젯이 차지하는 영역 대비 열의 너비가 모자라면, 해당 위젯은 정상적으로 표시되지 않을 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있습니다.
1. 상단 섹션을 추가 방법
상단 위젯이 없는 영역에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 빈 섹션 추가를 클릭해 섹션을 여러 개로 추가할 수 있습니다.
2. 섹션 단위로 상단 스크롤 고정하기
마우스 휠 스크롤 시 상단 섹션이 브라우저 최상단에 고정되도록 설정할 수 있습니다. 섹션을 여러 개 사용하시는 경우 특정 섹션만 고정되도록 개별 설정도 가능합니다.상단에 고정되길 원하는 섹션의 왼쪽 상단에 위치한 핀 아이콘을 클릭해보세요. 상단 섹션 고정하기
3. 상단 고정메뉴 설정하기
마우스 스크롤 시 기본 상단 디자인과는 완전히 다른 디자인의 상단이 나타나도록 설정할 수도 있습니다. 오른쪽 상단 고정메뉴 설정을 클릭해보세요.
Point 3. 상단 전용 위젯
로고, 로그인/장바구니, 메뉴 버튼 등 상단 디자인을 위한 전용 위젯들이 제공됩니다. 상단 전용 위젯 살펴보기
1. 위젯 추가 방법
마우스 포인터를 상단에 올리면 위젯 추가 아이콘이 나타납니다. 이 아이콘을 클릭하면 위젯 목록이 나타납니다.
2. 위젯 배치 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그 하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 열 역시 왼쪽 또는 오른쪽으로 드래그 하여 변경할 수 있습니다.
3. 위젯 디자인 변경 및 설정 방법
위젯 설정을 열면 각 위젯이 가진 고유의 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단 디자인은 크게 기본과 겹치기 상태로 나눠집니다. 겹치기란 상단 기본 디자인과 본문 배경 이미지를 겹치는 기능입니다. 따라서 일부 설정을 제외하고 디자인을 완전 다르게 할 수는 없지만 일부 설정을 다르게 지정할 수 있습니다.
상단 기본을 먼저 제작하고 겹치기 메뉴로 이동해 배경 이미지 어둡기 정도에 맞춰 로고, 메뉴 색상 등 설정을 변경해보세요.
Point 5. 모바일 상단 디자인 가능
뷰포트를 모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기
상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
디자인 모드에서 메뉴 관리, 위젯, 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 보세요. 각종 설정을 위한 보조(컨텍스트) 메뉴를 열 수 있습니다.
메뉴 관리에서:
메뉴 설정: 메뉴명 수정, 메뉴 주소(URL), 페이지 제목 및 설명 등을 변경할 수 있는 설정 메뉴를 엽니다.
메뉴 추가: 새로운 메뉴(페이지)를 추가합니다.
메뉴 복제: 해당 메뉴를 복제합니다.
삭제: 메뉴를 삭제합니다.
위젯에서:
(위젯) 설정: 위젯 설정 메뉴를 엽니다. 위젯별로 옵션을 변경할 수 있습니다.
애니메이션: 애니메이션 설정 메뉴를 엽니다. *여백 위젯 제외
가로 영역 확장: 위젯 가로 크기를 브라우저 양끝까지 확장시킵니다.
위젯 복사 / 붙여넣기: 위젯을 복제합니다.
(위젯) 삭제: 위젯을 삭제합니다.
섹션에서:
섹션 설정: 섹션 설정 창을 엽니다. 섹션 배경에 색/이미지/동영상을 넣거나 각종 효과, 옵션을 줄 수 있습니다.
빈 섹션추가: 빈 섹션을 추가합니다.
위로 이동: 섹션을 위로 이동 시킵니다.
아래로 이동: 섹션을 아래로 이동 시킵니다.
섹션 복사: 섹션을 복사합니다.
섹션 붙여넣기: 섹션을 붙여넣기 합니다. *다른 메뉴에서 붙여넣기 가능
섹션 반복: 해당 섹션이 다른 모든 페이지에서도 반복되도록 설정합니다. *하단 제일 끝에 위치하는 경우만 해당
섹션 삭제: 섹션을 삭제합니다.
상단 헤더 (Header)에서:
상단 설정: 상단 설정 메뉴로 이동합니다.
겹치기: 상단 메뉴와 본문 배경이 겹치는 효과를 줍니다.
하단 푸터 (Footer)에서:
하단 설정: 하단 설정 메뉴를 엽니다.
디자인 모드에서 마우스 오른쪽 클릭 메뉴가 나타나지 않습니다.
디자인 모드에서 마우스 오른쪽 버튼 클릭 시 보조 메뉴가 나타나지 않거나, 브라우저 자체 오른쪽 메뉴가 나타나는 경우가 있습니다. 해당 문제는 주로 Google 크롬 브라우저 사용자 중 마우스 우클릭 해제 확장 프로그램(Extension)을 사용 중인 사용자에게서 발생합니다.
본 도움말은 Google 크롬 브라우저 사용자를 대상으로 마우스 우클릭 해제 확장 프로그램이 설치되어 있지 않은지 확인하는 방법 및 확장 프로그램 삭제(또는 사용중지) 방법을 설명합니다.
크롬 확장 프로그램 삭제하기
PC에서 Google 크롬 브라우저를 켭니다.
오른쪽 상단 더보기아이콘을 클릭합니다.
[도구 더보기 > 확장 프로그램]을 클릭합니다.
마우스 우클릭 해제 확장 프로그램을 찾습니다.
삭제를 클릭합니다.
경고창이 뜨면 다시 한 번 삭제를 클릭합니다.
확장 프로그램 사용중지
확장 프로그램을 일시적으로 사용 중지하려면 다음 지침에 따라 진행합니다. 언제든 다시 사용할 수 있습니다.
PC에서 Google 크롬 브라우저를 켭니다.
오른쪽 상단 더보기아이콘을 클릭합니다.
[도구 더보기 > 확장 프로그램]을 클릭합니다.
마우스 우클릭 해제 확장 프로그램을 찾습니다.
토글 버튼을 클릭해 확장 프로그램 사용을 중지합니다. 참고: 클릭해 다시 사용할 수 있습니다.
페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다. 여기서 섹션(Section)이란 페이지 내 구획 또는 단락을 의미합니다. 다음 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가, 그외 기타 다양한 효과를 추가하여 특별한 디자인도 가능합니다.
적절하게 섹션을 나누면 방문자들이 페이지 콘텐츠를 보기에도 수월하며 향후 모바일 디자인시에도 도움이 되기에 적극 활용해보실 것을 추천드립니다.
섹션 추가하기
섹션을 추가하는 방법에는 2가지가 있습니다.
1. 비주얼 섹션 또는 미리 구성된 섹션 템플릿 추가하기
콘텐츠, 상품 소개, 구성원, 연락처 등 자주 사용되는 레이아웃으로 미리 구성된 섹션 템플릿을 추가할 수 있습니다. 자세한 추가 방법은 다음 도움말을 참조하세요.
2. 빈 섹션 추가하기
위젯이 하나도 없는 빈 섹션을 추가할 수 있습니다. 빈 섹션 추가 방법은 다음 도움말을 참조하세요.
섹션 복사하기, 섹션 붙여넣기
섹션도 복제가 가능합니다. 메뉴별로 반복적으로 사용하는 디자인이 있는 경우 섹션 복제 기능을 활용해보세요.
섹션 이동하기
하나의 페이지에 여러 개 섹션이 있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다.
그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말합니다.
그리드 시스템은 컴퓨터가 개발되기 이전부터 건축, 책, 신문과 같은 곳에 이미 사용되어 왔습니다. 인터넷 보급 후에는 기술의 발전에 따라 웹 디자인에도 그리드 시스템이 사용되기 시작했으며, 이에 따라 디자이너들은 더 쉽고 빠르게, 게다가 아름답게 웹 디자인을 할 수 있게 됩니다.
위 예시는 12 그리드 시스템을 적용한 사이트입니다. 언뜻 복잡해질 수 있는 구조로 이미지와 텍스트가 배치되었지만 어수선한 느낌은 들지 않습니다. 그 이유는 그리드 시스템을 적용했기 때문입니다.
레이아웃의 큰 축을 이루는 텍스트들은 12단계의 그리드에 포함된 것을 확인할 수 있습니다. 12단계의 그리드 시스템을 따르고 있기 때문에 각 요소(위젯)는 1/12칸 단위로만 움직임을 제어할 수 있습니다.
언뜻 보면 움직임의 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 틀을 잡아주는 그리드 시스템은 디자인 과정을 더 간단하고 명료하게 해주며, 디자인 작업을 빠르고 편리하게 도와줍니다.
그리드 시스템의 역할과 장점
그리드 시스템으로 더 좋은 정보 전달 및 디자인 구조를 만들 수 있다.
디자인 위치에 대해 적절한 지침을 내려준다.
가독성과 주목성을 더 향상시킬 수 있다.
실제 적용 사례
다음 그림은 실제 제작된 사이트에 적용된 12 그리드입니다. 텍스트와 이미지, 가로선, 버튼이 12 그리드에 맞춰 배치된 걸 확인할 수 있습니다. 참고: 아래 오른쪽 그림은 이해를 돕기 위한 그림입니다. 실제 그리드는 디자인 모드에서 보이지 않습니다.
사용자는 위젯들을 추가할 수 있습니다. 처음 추가한 위젯은 12 그리드로 배치되고, 이후 원하는 위치로 이동한 다음 차지하는 그리드 수를 조절할 수 있습니다. 참고: 점선 안에 아무 콘텐츠도 없는 경우 해당 공간은 여백 위젯이 삽입된 영역입니다.
위 그림에 따르면 처음 4개 위젯은 12개의 그리드를 모두 차지하고 있는 걸 볼 수 있으며, HISTORY 텍스트 위젯은 4칸, 이미지는 총 8개를 차지하고 있는 걸 확인할 수 있습니다. 버튼은 HISTORY 텍스트 위젯 아래 배치되어, HISTORY 텍스트 위젯과 같은 4개의 그리드를 차지하게 됩니다.
같은 구조로 위젯들을 점차 아래로 쌓아간다고 생각해주시면 조금 더 편하게 페이지를 디자인할 수 있습니다.
그리드 시스템 활용
그리드 시스템은 방문자에게 페이지가 포함하는 정보를 최적의 형태로 보여주고, 전달하기 위한 도구입니다. 그리드 시스템에 따라 페이지를 디자인하면 많은 양의 정보도 정돈되고 안정된 구조로 만들어주며, 가독성 및 심미성도 더해집니다.
다음은 12 그리드를 활용한 정보 배치의 예제입니다.
위 예제와 같은 레이아웃은 각 메뉴(또는 메뉴군)가 포함하는 정보의 종류에 따라 달라집니다. 예를 들어 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단 레이아웃이 최적일 것입니다.
만약 여러분이 비영리단체를 운영하고 있고, 그 단체의 소개와 함께 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면, 아래 그림에서 오른쪽 하단 레이아웃이 최적일 수도 있습니다.
이처럼 그리드 시스템은 아름다운 페이지를 디자인 하는 데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는 데 도움을 줍니다.
다음은 제공하는 12 그리드 PDF 파일로 사용자는 이 파일을 다운로드하여 프린트 한 다음, 본인의 사이트 메뉴에 맞는 레이아웃을 그려볼 수 있습니다.
디자인 모드에 익숙해지는 경우 별도의 필기도구 및 소프트웨어(파워포인트, Sketch 등)를 사용하지 않아도, 디자인 모드에서 간편하게 메뉴를 추가하고, 위젯을 사용해 빠르게 페이지 레이아웃을 잡아볼 수 있습니다.
위젯 배치 및 그리드 연습하기
12 그리드 시스템에 따라 위젯을 배치하고, 그리드를 조절하는 방법에 대해 더 상세하게 배워보세요. 총 7가지 배치 방법 및 레이아웃에 대해 실습 형식으로 제공됩니다.
웹 페이지는 기본적으로 다음 그림처럼 상단, 본문, 하단으로 구성됩니다. 이 도움말에서는 각 영역에 일반적으로 어떤 요소들이 포함되며, 해당 요소를 추가하는 데 도움이 되는 도움말을 소개합니다.
상단(HEADER) 영역
상단 또는 내비게이션 메뉴라고 불리는 상단에는 로고, 메인메뉴, 로그인 및 회원가입 버튼 등이 포함됩니다. 상단은 의도하지 않은 이상 모든 페이지에서 표시되며, 방문자는 상단에 노출된 메뉴를 클릭해 페이지를 이동합니다.
본문(BODY) 영역
메뉴 클릭 시 해당 메뉴와 관련된 보조메뉴 및 콘텐츠가 표시되는 영역입니다.
1. 본문 기본
메뉴를 추가하고 본문에 해당 메뉴와 관련된 콘텐츠 및 각종 디자인 요소를 추가할 수 있습니다.
2. 본문 섹션
본문은 필요에 따라 몇 개의 섹션(구획)으로 나누어 제작할 수 있습니다. 섹션은 상하로만 추가할 수 있으며, 이동하고, 복제할 수 있습니다. 페이지에 포함된 콘텐츠가 길다고 판단되는 경우 섹션을 나누어 방문자의 가독성을 높이고, 보다 차별적으로 디자인해보세요.
하단(FOOTER) 영역
페이지 하단에는 상호, 대표자명, 연락처 등 주요 사이트 정보가 표시되며 필요에 따라 추가 메뉴가 표시됩니다. 온라인 쇼핑몰의 경우 전자결제(PG)사 정보 및 에스크로 이용확인증을 볼 수 있는 링크가 포함됩니다. 상단과 마찬가지로 의도하지 않은 이상 모든 페이지에서 표시됩니다.
반응형 웹사이트란, 다양한 장치의 디스플레이 크기에 대응하여 웹사이트 레이아웃, 콘텐츠 등이 최적의 형태로 제공되는 웹 기술을 말합니다. 과거에는 PC, 스마트폰, 태블릿 버전을 개별적으로 만들어야 했지만, 반응형 웹사이트의 경우 하나의 사이트만 만들면 거의 모든 기기에 알아서 대응하게 됩니다.
제작된 사이트에는 이 반응형 웹 기술이 적용되었습니다. 사용자는 PC 버전을 만들면 자동으로 모바일 버전도 제작되며, 모바일 뷰포트를 변경해 의도치 않게 구성된 디자인을 직접 변경하거나 추가하는 것도 가능합니다.
이 도움말에서는 모바일 버전 편집을 위한 뷰포트 변경 방법부터, 기본 편집 방법, 위젯 배치 방법, 모바일 상단 디자인에 관해 설명합니다.
1단계: 뷰포트 변경하기
모바일 편집을 시작하려면 가장 먼저 뷰포트를 모바일로 변경해야 합니다.
2단계: 모바일 디자인 편집하기
1. 위젯 & 섹션 숨기기
모바일 버전에서 불필요하다 생각되는 위젯(들)은 숨길 수 있으며, 섹션 단위로 숨길 수도 있습니다. 불필요한 여백, 이미지, 아이콘 외 모바일에서는 적용되지 않는 설명이나 문구가 포함된 섹션은 클릭 한 번으로 간편하게 숨겨보세요. *숨긴 위젯과 섹션은 언제든 복원 가능합니다.
2. 위젯 이동하기
자동 구성된 모바일 버전의 위젯 위치가 마음에 들지 않는 경우 마우스로 드래그하여 이동시킬 수 있습니다. 단, 이 경우 인접한 요소끼리만 이동이 가능하며 모든 위치로 이동시킬 순 없습니다.
모바일 버전은 그리드 시스템에 의해 PC 버전 데이터를 기반으로 자동 구성되며, 한 줄에 1개 또는 2개의 위젯으로 표현됩니다. 예를 들어 PC 버전에서 3개의 이미지를 가로로 나열한 경우 위 그림과 같이 위젯들을 배치할 수 있는데, 이처럼 가로로 나열한 이미지들은 모바일에서 세로로 나열됩니다.
만약 PC 버전과 같이 모바일에서도 한 줄에 3개씩 나열하고 싶은 경우 위젯을 마우스로 드래그하여 배치할 수 있지만, 일정 영역 바깥으로는 이동시킬 수 없습니다.
모바일에서 자동 변환되는 구성에 대해서는 다음 모바일 버전 위젯 배치 방법 도움말에서 상세히 알아볼 수 있습니다.
모바일 편집은 가급적 PC구성을 완료한 후 진행하실 것을 권장합니다. 만약 PC 버전 제작 중, 모바일 버전을 편집하는 경우 위와 같은 모바일 맞춤 구성 초기화 경고가 나타날 수 있습니다.
만약 경고를 무시하고 확인 버튼을 클릭하는 경우 작업하신 모바일 디자인이 초기화될 수 있으므로 주의해주세요.
3. 모바일 전용 섹션 활용하기
PC에서는 표시되지 않으면서, 모바일에서만 보이는 모바일 전용 섹션을 추가할 수 있습니다. 이 모바일 전용 섹션에는 직접 위젯을 추가할 수 있으며, 이동도 비교적 자유롭습니다. 모바일 전용 섹션은 PC 버전과는 전혀 다른 레이아웃이나 콘텐츠를 추가하거나, 기능을 구현할 때 사용합니다.
예를 들어 PC 버전의 상담신청 버튼을 클릭하면 게시판으로 이동하지만, 모바일 전용 섹션에 삽입된 버튼을 클릭하는 경우 전화걸기가 작동되도록 설정할 수 있습니다.
참고: 모바일 전용 섹션의 경우 PC 버전을 편집하더라도 모바일 맞춤 구성이 초기화 되지 않습니다.
3단계: 모바일 상단 편집하기
모바일은 세로 방향으로 볼 때 가로폭이 크게 좁아지는 만큼, PC 버전과 다르게 사이트 상단 영역을 간소화 시키는 것이 좋습니다. 디자인 모드 상단 설정을 통해 모바일 상단을 수정해보세요.
슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 사용됩니다.
새로운 슬라이드 추가: 새로운 슬라이드 버튼을 클릭해 새 슬라이드를 추가합니다.
슬라이드 순서 변경 및 삭제: 기존 슬라이드를 마우스 클릭해 드래그 하여 순서를 변경하거나, X를 클릭해 삭제할 수 있습니다. *삭제한 슬라이드는 복구할 수 없습니다.
슬라이드 에디터: 에디터를 사용해 텍스트를 입력하고 이미지 첨부 등 편집 도구를 사용해 콘텐츠를 작성합니다.
슬라이드 배경 설정: 슬라이드 배경으로 이미지 또는 유튜브 동영상을 사용할 수 있습니다. 동영상 배경을 설정하는 경우 단일 슬라이드만 이용 가능합니다.
슬라이드 링크: 슬라이드 클릭 시 이동할 링크 설정할 수 있습니다. 링크는 메뉴를 선택하거나 직접 URL을 입력할 수 있습니다.
슬라이드 디자인 설정: 슬라이드 모드, 디자인, 전환 효과, 버튼 디자인, 추가 효과 옵션을 설정할 수 있습니다.
비주얼 섹션 권장 배경 이미지
비주얼 섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 비주얼 섹션은 하단 끄트머리를 마우스로 드래그하여 높이 조절이 가능하지만, 브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 작업하실 때 사방에 어느 정도 여유 공간을 주세요.
사용자 기기의 화면 크기는 매우 다양하고 비주얼 섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 따라서 이미지에 텍스트가 포함되거나 특정한 인물 또는 제품에 포커스가 맞춰진 사진은 PC에서 잘 보인다 하더라도, 아래 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.
상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 이 도움말에서는 상단 디자인 모드의 주요 기능들에 대해 설명합니다.
Point 1. 최대 3개 열로 구성
사용자는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 열까지 나눌 수 있으며, 각 열마다 필요한 위젯을 나누어 배치할 수 있습니다.
1. 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
상단에 위젯을 추가할 수 있습니다. 추가한 위젯은 왼쪽/가운데/오른쪽으로 배치할 수 있으며, 배치된 위젯의 개수에 따라 최대 3개 열로 구성됩니다.
2. 열 너비 조절 방법
열의 너비를 조절할 수 있습니다. 열의 너비는 파란 점선을 통해 구분이 가능하며, 파란 점선을 마우스 클릭 후 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다. 위젯이 차지하는 영역 대비 열의 너비가 모자라면, 해당 위젯은 정상적으로 표시되지 않을 수 있습니다.
Point 2. 다수의 행으로 구성 가능
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있습니다.
1. 상단 섹션을 추가 방법
상단 위젯이 없는 영역에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 빈 섹션 추가를 클릭해 섹션을 여러 개로 추가할 수 있습니다.
2. 섹션 단위로 상단 스크롤 고정하기
마우스 휠 스크롤 시 상단 섹션이 브라우저 최상단에 고정되도록 설정할 수 있습니다. 섹션을 여러 개 사용하시는 경우 특정 섹션만 고정되도록 개별 설정도 가능합니다.상단에 고정되길 원하는 섹션의 왼쪽 상단에 위치한 핀 아이콘을 클릭해보세요. 상단 섹션 고정하기
3. 상단 고정메뉴 설정하기
마우스 스크롤 시 기본 상단 디자인과는 완전히 다른 디자인의 상단이 나타나도록 설정할 수도 있습니다. 오른쪽 상단 고정메뉴 설정을 클릭해보세요.
Point 3. 상단 전용 위젯
로고, 로그인/장바구니, 메뉴 버튼 등 상단 디자인을 위한 전용 위젯들이 제공됩니다. 상단 전용 위젯 살펴보기
1. 위젯 추가 방법
마우스 포인터를 상단에 올리면 위젯 추가
아이콘이 나타납니다. 이 아이콘을 클릭하면 위젯 목록이 나타납니다.
2. 위젯 배치 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그 하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 열 역시 왼쪽 또는 오른쪽으로 드래그 하여 변경할 수 있습니다.
3. 위젯 디자인 변경 및 설정 방법
위젯 설정을 열면 각 위젯이 가진 고유의 옵션을 변경할 수 있습니다.
Point 4. 기본 상단과 겹치기 상단 디자인
상단 디자인은 크게 기본과 겹치기 상태로 나눠집니다. 겹치기란 상단 기본 디자인과 본문 배경 이미지를 겹치는 기능입니다. 따라서 일부 설정을 제외하고 디자인을 완전 다르게 할 수는 없지만 일부 설정을 다르게 지정할 수 있습니다.
상단 기본을 먼저 제작하고 겹치기 메뉴로 이동해 배경 이미지 어둡기 정도에 맞춰 로고, 메뉴 색상 등 설정을 변경해보세요.
Point 5. 모바일 상단 디자인 가능
뷰포트를 모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기
상단이란?
웹 페이지는 위부터 상단(Header), 본문(Body), 하단(Footer)로 구성됩니다. 상단에는 로고, 메인 메뉴, 로그인/회원가입 등이 표시되는 영역으로 내비게이션 메뉴라고도 부릅니다.
상단 메뉴, 본문 배경과 겹치기
페이지 본문 배경에 색상, 이미지, 동영상이 있는 경우 아래 그림과 같이 상단 메뉴와 겹치는 효과를 적용할 수 있습니다.
디자인 모드에서 메뉴 관리, 위젯, 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 보세요. 각종 설정을 위한 보조(컨텍스트) 메뉴를 열 수 있습니다.
메뉴 관리에서:
위젯에서:
섹션에서:
상단 헤더 (Header)에서:
하단 푸터 (Footer)에서:
디자인 모드에서 마우스 오른쪽 클릭 메뉴가 나타나지 않습니다.
디자인 모드에서 마우스 오른쪽 버튼 클릭 시 보조 메뉴가 나타나지 않거나, 브라우저 자체 오른쪽 메뉴가 나타나는 경우가 있습니다. 해당 문제는 주로 Google 크롬 브라우저 사용자 중 마우스 우클릭 해제 확장 프로그램(Extension)을 사용 중인 사용자에게서 발생합니다.
본 도움말은 Google 크롬 브라우저 사용자를 대상으로 마우스 우클릭 해제 확장 프로그램이 설치되어 있지 않은지 확인하는 방법 및 확장 프로그램 삭제(또는 사용중지) 방법을 설명합니다.
크롬 확장 프로그램 삭제하기
삭제를 클릭합니다.
확장 프로그램 사용중지
확장 프로그램을 일시적으로 사용 중지하려면 다음 지침에 따라 진행합니다. 언제든 다시 사용할 수 있습니다.
토글 버튼을 클릭해 확장 프로그램 사용을 중지합니다.
참고: 클릭해 다시 사용할 수 있습니다.
섹션 설정 창을 열어 섹션에 배경(색상, 이미지, 동영상)을 추가하거나 위젯 간의 간격 조절, 여백 조절, 사이드 나누기, 각종 효과를 줄 수 있습니다.
섹션 설정 열기
위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
주의: 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.
보조 메뉴가 나오면 섹션 설정을 클릭합니다.
섹션 설정항목
섹션이란?
페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다. 여기서 섹션(Section)이란 페이지 내 구획 또는 단락을 의미합니다. 다음 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가, 그외 기타 다양한 효과를 추가하여 특별한 디자인도 가능합니다.
적절하게 섹션을 나누면 방문자들이 페이지 콘텐츠를 보기에도 수월하며 향후 모바일 디자인시에도 도움이 되기에 적극 활용해보실 것을 추천드립니다.
섹션 추가하기
섹션을 추가하는 방법에는 2가지가 있습니다.
1. 비주얼 섹션 또는 미리 구성된 섹션 템플릿 추가하기
콘텐츠, 상품 소개, 구성원, 연락처 등 자주 사용되는 레이아웃으로 미리 구성된 섹션 템플릿을 추가할 수 있습니다. 자세한 추가 방법은 다음 도움말을 참조하세요.
2. 빈 섹션 추가하기
위젯이 하나도 없는 빈 섹션을 추가할 수 있습니다. 빈 섹션 추가 방법은 다음 도움말을 참조하세요.
섹션 복사하기, 섹션 붙여넣기
섹션도 복제가 가능합니다. 메뉴별로 반복적으로 사용하는 디자인이 있는 경우 섹션 복제 기능을 활용해보세요.
섹션 이동하기
하나의 페이지에 여러 개 섹션이 있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다.
섹션 삭제하기
섹션은 언제든 삭제할 수 있습니다. 삭제 방법은 다음 도움말을 참조해주세요.
그리드 시스템이란?
그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말합니다.
그리드 시스템은 컴퓨터가 개발되기 이전부터 건축, 책, 신문과 같은 곳에 이미 사용되어 왔습니다. 인터넷 보급 후에는 기술의 발전에 따라 웹 디자인에도 그리드 시스템이 사용되기 시작했으며, 이에 따라 디자이너들은 더 쉽고 빠르게, 게다가 아름답게 웹 디자인을 할 수 있게 됩니다.
위 예시는 12 그리드 시스템을 적용한 사이트입니다. 언뜻 복잡해질 수 있는 구조로 이미지와 텍스트가 배치되었지만 어수선한 느낌은 들지 않습니다. 그 이유는 그리드 시스템을 적용했기 때문입니다.
레이아웃의 큰 축을 이루는 텍스트들은 12단계의 그리드에 포함된 것을 확인할 수 있습니다. 12단계의 그리드 시스템을 따르고 있기 때문에 각 요소(위젯)는 1/12칸 단위로만 움직임을 제어할 수 있습니다.
언뜻 보면 움직임의 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 틀을 잡아주는 그리드 시스템은 디자인 과정을 더 간단하고 명료하게 해주며, 디자인 작업을 빠르고 편리하게 도와줍니다.
그리드 시스템의 역할과 장점
실제 적용 사례
다음 그림은 실제 제작된 사이트에 적용된 12 그리드입니다. 텍스트와 이미지, 가로선, 버튼이 12 그리드에 맞춰 배치된 걸 확인할 수 있습니다.
참고: 아래 오른쪽 그림은 이해를 돕기 위한 그림입니다. 실제 그리드는 디자인 모드에서 보이지 않습니다.
사용자는 위젯들을 추가할 수 있습니다. 처음 추가한 위젯은 12 그리드로 배치되고, 이후 원하는 위치로 이동한 다음 차지하는 그리드 수를 조절할 수 있습니다.
참고: 점선 안에 아무 콘텐츠도 없는 경우 해당 공간은 여백 위젯이 삽입된 영역입니다.
위 그림에 따르면 처음 4개 위젯은 12개의 그리드를 모두 차지하고 있는 걸 볼 수 있으며, HISTORY 텍스트 위젯은 4칸, 이미지는 총 8개를 차지하고 있는 걸 확인할 수 있습니다. 버튼은 HISTORY 텍스트 위젯 아래 배치되어, HISTORY 텍스트 위젯과 같은 4개의 그리드를 차지하게 됩니다.
같은 구조로 위젯들을 점차 아래로 쌓아간다고 생각해주시면 조금 더 편하게 페이지를 디자인할 수 있습니다.
그리드 시스템 활용
그리드 시스템은 방문자에게 페이지가 포함하는 정보를 최적의 형태로 보여주고, 전달하기 위한 도구입니다. 그리드 시스템에 따라 페이지를 디자인하면 많은 양의 정보도 정돈되고 안정된 구조로 만들어주며, 가독성 및 심미성도 더해집니다.
다음은 12 그리드를 활용한 정보 배치의 예제입니다.
위 예제와 같은 레이아웃은 각 메뉴(또는 메뉴군)가 포함하는 정보의 종류에 따라 달라집니다. 예를 들어 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단 레이아웃이 최적일 것입니다.
만약 여러분이 비영리단체를 운영하고 있고, 그 단체의 소개와 함께 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면, 아래 그림에서 오른쪽 하단 레이아웃이 최적일 수도 있습니다.
이처럼 그리드 시스템은 아름다운 페이지를 디자인 하는 데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는 데 도움을 줍니다.
다음은 제공하는 12 그리드 PDF 파일로 사용자는 이 파일을 다운로드하여 프린트 한 다음, 본인의 사이트 메뉴에 맞는 레이아웃을 그려볼 수 있습니다.
디자인 모드에 익숙해지는 경우 별도의 필기도구 및 소프트웨어(파워포인트, Sketch 등)를 사용하지 않아도, 디자인 모드에서 간편하게 메뉴를 추가하고, 위젯을 사용해 빠르게 페이지 레이아웃을 잡아볼 수 있습니다.
위젯 배치 및 그리드 연습하기
12 그리드 시스템에 따라 위젯을 배치하고, 그리드를 조절하는 방법에 대해 더 상세하게 배워보세요. 총 7가지 배치 방법 및 레이아웃에 대해 실습 형식으로 제공됩니다.
웹 페이지는 기본적으로 다음 그림처럼 상단, 본문, 하단으로 구성됩니다. 이 도움말에서는 각 영역에 일반적으로 어떤 요소들이 포함되며, 해당 요소를 추가하는 데 도움이 되는 도움말을 소개합니다.
상단(HEADER) 영역
상단 또는 내비게이션 메뉴라고 불리는 상단에는 로고, 메인메뉴, 로그인 및 회원가입 버튼 등이 포함됩니다. 상단은 의도하지 않은 이상 모든 페이지에서 표시되며, 방문자는 상단에 노출된 메뉴를 클릭해 페이지를 이동합니다.
본문(BODY) 영역
메뉴 클릭 시 해당 메뉴와 관련된 보조메뉴 및 콘텐츠가 표시되는 영역입니다.
1. 본문 기본
메뉴를 추가하고 본문에 해당 메뉴와 관련된 콘텐츠 및 각종 디자인 요소를 추가할 수 있습니다.
2. 본문 섹션
본문은 필요에 따라 몇 개의 섹션(구획)으로 나누어 제작할 수 있습니다. 섹션은 상하로만 추가할 수 있으며, 이동하고, 복제할 수 있습니다. 페이지에 포함된 콘텐츠가 길다고 판단되는 경우 섹션을 나누어 방문자의 가독성을 높이고, 보다 차별적으로 디자인해보세요.
하단(FOOTER) 영역
페이지 하단에는 상호, 대표자명, 연락처 등 주요 사이트 정보가 표시되며 필요에 따라 추가 메뉴가 표시됩니다. 온라인 쇼핑몰의 경우 전자결제(PG)사 정보 및 에스크로 이용확인증을 볼 수 있는 링크가 포함됩니다. 상단과 마찬가지로 의도하지 않은 이상 모든 페이지에서 표시됩니다.
모바일 디자인 소개
반응형 웹사이트란, 다양한 장치의 디스플레이 크기에 대응하여 웹사이트 레이아웃, 콘텐츠 등이 최적의 형태로 제공되는 웹 기술을 말합니다. 과거에는 PC, 스마트폰, 태블릿 버전을 개별적으로 만들어야 했지만, 반응형 웹사이트의 경우 하나의 사이트만 만들면 거의 모든 기기에 알아서 대응하게 됩니다.
제작된 사이트에는 이 반응형 웹 기술이 적용되었습니다. 사용자는 PC 버전을 만들면 자동으로 모바일 버전도 제작되며, 모바일 뷰포트를 변경해 의도치 않게 구성된 디자인을 직접 변경하거나 추가하는 것도 가능합니다.
이 도움말에서는 모바일 버전 편집을 위한 뷰포트 변경 방법부터, 기본 편집 방법, 위젯 배치 방법, 모바일 상단 디자인에 관해 설명합니다.
1단계: 뷰포트 변경하기
모바일 편집을 시작하려면 가장 먼저 뷰포트를 모바일로 변경해야 합니다.
2단계: 모바일 디자인 편집하기
1. 위젯 & 섹션 숨기기
모바일 버전에서 불필요하다 생각되는 위젯(들)은 숨길 수 있으며, 섹션 단위로 숨길 수도 있습니다. 불필요한 여백, 이미지, 아이콘 외 모바일에서는 적용되지 않는 설명이나 문구가 포함된 섹션은 클릭 한 번으로 간편하게 숨겨보세요. *숨긴 위젯과 섹션은 언제든 복원 가능합니다.
2. 위젯 이동하기
자동 구성된 모바일 버전의 위젯 위치가 마음에 들지 않는 경우 마우스로 드래그하여 이동시킬 수 있습니다. 단, 이 경우 인접한 요소끼리만 이동이 가능하며 모든 위치로 이동시킬 순 없습니다.
모바일 버전은 그리드 시스템에 의해 PC 버전 데이터를 기반으로 자동 구성되며, 한 줄에 1개 또는 2개의 위젯으로 표현됩니다. 예를 들어 PC 버전에서 3개의 이미지를 가로로 나열한 경우 위 그림과 같이 위젯들을 배치할 수 있는데, 이처럼 가로로 나열한 이미지들은 모바일에서 세로로 나열됩니다.
만약 PC 버전과 같이 모바일에서도 한 줄에 3개씩 나열하고 싶은 경우 위젯을 마우스로 드래그하여 배치할 수 있지만, 일정 영역 바깥으로는 이동시킬 수 없습니다.
모바일에서 자동 변환되는 구성에 대해서는 다음 모바일 버전 위젯 배치 방법 도움말에서 상세히 알아볼 수 있습니다.
모바일 편집은 가급적 PC구성을 완료한 후 진행하실 것을 권장합니다. 만약 PC 버전 제작 중, 모바일 버전을 편집하는 경우 위와 같은 모바일 맞춤 구성 초기화 경고가 나타날 수 있습니다.
만약 경고를 무시하고 확인 버튼을 클릭하는 경우 작업하신 모바일 디자인이 초기화될 수 있으므로 주의해주세요.
3. 모바일 전용 섹션 활용하기
PC에서는 표시되지 않으면서, 모바일에서만 보이는 모바일 전용 섹션을 추가할 수 있습니다. 이 모바일 전용 섹션에는 직접 위젯을 추가할 수 있으며, 이동도 비교적 자유롭습니다. 모바일 전용 섹션은 PC 버전과는 전혀 다른 레이아웃이나 콘텐츠를 추가하거나, 기능을 구현할 때 사용합니다.
예를 들어 PC 버전의 상담신청 버튼을 클릭하면 게시판으로 이동하지만, 모바일 전용 섹션에 삽입된 버튼을 클릭하는 경우 전화걸기가 작동되도록 설정할 수 있습니다.
참고: 모바일 전용 섹션의 경우 PC 버전을 편집하더라도 모바일 맞춤 구성이 초기화 되지 않습니다.
3단계: 모바일 상단 편집하기
모바일은 세로 방향으로 볼 때 가로폭이 크게 좁아지는 만큼, PC 버전과 다르게 사이트 상단 영역을 간소화 시키는 것이 좋습니다. 디자인 모드 상단 설정을 통해 모바일 상단을 수정해보세요.
비주얼 섹션
슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 사용됩니다.
비주얼 섹션 권장 배경 이미지
비주얼 섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 비주얼 섹션은 하단 끄트머리를 마우스로 드래그하여 높이 조절이 가능하지만, 브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 작업하실 때 사방에 어느 정도 여유 공간을 주세요.
사용자 기기의 화면 크기는 매우 다양하고 비주얼 섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 따라서 이미지에 텍스트가 포함되거나 특정한 인물 또는 제품에 포커스가 맞춰진 사진은 PC에서 잘 보인다 하더라도, 아래 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.
메뉴 기본 사용법을 배울 수 있습니다.
참고: Free 버전 사용자의 경우 최대 5개까지 메뉴(상·하단, 하위 메뉴 포함)를 생성할 수 있습니다. 선택하신 테마 내 메뉴가 5개인 경우 기존 메뉴를 수정하거나 삭제하여 이용해주세요.
메뉴 추가, 이동하기
사이트 디자인 시 가장 먼저 해야 할 일은 메뉴(페이지)를 추가하고 배치하는 것입니다. 추가한 메뉴는 곧바로 상단 메뉴바에 추가되며, 메뉴를 이동시켜 순서를 변경할 수 있습니다.
메뉴 복제하기
기존 메뉴를 복제할 수 있습니다. 사이트 제작 중 같은 디자인을 여러번 반복 사용해야 하는 경우 메뉴 복제 기능을 사용해보세요. 복제한 메뉴의 일부 콘텐츠를 수정하며 작업하면 더 효율적이고 빠른 작업이 가능합니다.
메뉴명 변경하기
언제든 메뉴명을 변경할 수 있습니다. 메뉴 이름을 실수로 잘못 입력했거나 변경하고자 하는 경우 다음 도움말을 참조해주세요.
참고: Free 버전 사용자의 경우 최대 5개까지 메뉴를 구성할 수 있으며, 기존 메뉴명을 변경해 사용할 수 있습니다.
메뉴 삭제하기
더 이상 필요가 없어진 메뉴를 삭제합니다.