카테고리
입문자를 위한 가이드
사이트 개설부터 디자인모드 제작까지 캠페이너스를 이해하고 쉽게 사용하실 수 있어요.
개인/단체/회사/기관 모두 이용 가능한가요?
[답변] 네. 모두 이용 가능합니다. - 개인 : 예비 디자이너, 작가, 포토그래퍼 / 1인 기업 등 - 단체 : 종교 / 친목 / 동문회 등 - 회사 : 기업 / 일반 상점 / 온라인숍 등 - 기관 : 비영리기관 / 공공기관 등체험판 개설하기
새로운 무료 사이트를 개설하고 30일간 체험할 수 있습니다.체험판에서 제작한 디자인을 정식판으로 이전할 수 있나요?
이용하던 체험판에서 정식판 전환을 신청하시면 체험판에서 이용하던 디자인 요소들이 승계됩니다. 하지만 회원정보, 상품, 게시물, 입력폼 접수내역과 같은 데이터들과 관리자 모드 변경 사항은 승계되지 않습니다.(초기화) 제작하신 디자인은 디자인 모드 > 게시하기를 눌러 게시 완료된 디자인까지만 승계됩니다. 정식판 결제 전에 제작하신 디자인을 게시하기를 눌러 게시완료 처리를 하셨는지 꼭 확인을 부탁드리고 있습니다.디자인 모드란?
사이트를 목적에 맞게 꾸미는 일은 디자인 모드에서 합니다. 이 장에서는 디자인 모드에서 반드시 숙지해야 할 사항들을 소개해 드리겠습니다. 먼저 다음의 영상을 통해 배워보세요 - 캠페이너스로 웹사이트 제작하기 기초 사용법 - 디자인 모드 접속 방법 1. 주소창에 도메인(xxxx.campaignus.me 또는 mydomain.com)을 입력하고, 바로 이어 /admin을 추가 입력합니다. 2. 관리자 계정으로 로그인을 하여 관리자 모드에 접속합니다. 3. 관리자 모드의 메뉴 중(왼쪽) 디자인 모드를 누릅니다. 참고: 디자인 모드는 고도의 웹기술이 포함되어 있어 원활한 동작을 위해 웹표준을 제대로 준수하지 않는 Internet Explorer 접근은 제한하고 있습니다. (추천 브라우저 다운로드 : Google Chrome) 디자인 모드 작업환경 디자인 모드에는 총 14가지의 메뉴로 구성되어 있으며, 각 메뉴는 아래 그림과 함께 설명을 참조해주세요. 1 메뉴 관리 새로운 메뉴(페이지)를 생디자인 모드 조작법 기초
그리드 시스템 이해하기 왼쪽 이미지와 오른쪽 이미지 중 어떤 것이 정리가 잘 되어 보이고 컨텐츠가 잘 보이나요?거의 모든 사람은 오른쪽을 택할 것입니다. 이는 간단한 그리드 시스템의 예시입니다. 그리드 시스템은 제일 처음 건축에서 개발단계에서 구획을 나눌 때 사용되었고 그후 타이포그래피에서 활용되다가 1930년경 신문잡지등에서 기사, 사진 등 각 컨텐츠등을 효율적으로 구성하기 위해사용되었습니다. 캠페이너스에도 레이아웃을 쉽고 빠르게 구성할 수 있도록 그리드 시스템이 도입되어 있습니다. 캠페이너스로 제작된 사이트는 12칼럼 그리드 구조로 만들어지며 객체의 이동이나 크기 조정은 전체 폭의 1/12(약 8.33%) 만큼씩 조정됩니다. 얼핏 과도하게 제한되는 것 같지만 대부분의 상황에서 적절한 레이아웃을 만들 수 있는 시스템입니다. 드래그로 요소 이동 디자인 모드에서 가장 많이 쓰이는 것 중 하나는 드래그입니다. 위젯을 원하는 위치로 이동을 시킬때 사용합니다. 대상을 좌/우로 이동시키는 것디자인 모드에서 작업한 내용이 실제 페이지에서 보여지지 않아요.
디자인 모드에서 디자인 작업 후 미리보기 또는 내 도메인으로 접속했을 때 디자인한 작업 내용이 보이지 않는다면, [게시하기] 버튼을 누르지 않아 디자인이 반영되지 않은 것입니다. 반영수정 작업이 있을 경우 [게시하기] 버튼이 녹색(활성화) 버튼으로 변경되며, 변경사항이 더 이상 없을 경우에는 [게시완료](파란색)으로 나타납니다.위젯 추가하기
위젯이란? 디자인 모드에서 페이지를 꾸밀 때 사용되는 가장 작은 단위의 구성요소입니다. 이미지, 텍스트, 동영상, 버튼, 게시판, 갤러리 등 다양한 위젯들이 준비되어 있습니다. 메뉴를 추가하고 위젯을 사용해 페이지에 글이나 그림, 동영상 등 콘텐츠를 추가해보세요. *위젯은 캠페이너스 업데이트에 따라 계속해서 추가될 수 있습니다. - 위젯별 기능 설명 (디자인 요소) - 위젯별 기능 설명 (DB 요소) 위젯 추가하기 위젯은 다음과 같은 두 가지 방법으로 추가할 수 있습니다. 방법1. 디자인 모드 왼쪽 윗부분 ≡ 버튼(메뉴 관리) 아래 + 버튼을 눌러 위젯을 추가할 수 있습니다.방법2. 위젯과 위젯 사이 마우스 커서를 놓으면, ⊕ 버튼이 생겨납니다. 이 ⊕를 클릭해 위젯을 추가할 수 있습니다. 위젯 추가 + 버튼을 클릭하면 다음과 같은 위젯 목록 창이 뜹니다. 이 중에서 삽입하고자 하는 위젯을 클릭하여 추가합니다.위젯별 기능 설명 (디자인 요소)
이미지 위젯 텍스트 위젯과 더불어 가장 자주 쓰이는 위젯 중 하나입니다. 페이지에 이미지 요소를 삽입하고자 할 때 사용합니다. 설정항목 - 이미지 추가하기 : 이미지 위젯 위에서 마우스 오른쪽 커서를 눌러 이미지 설정을 클릭합니다. 왼쪽 상단 이미지 영역에 마우스 커서를 올려놓으면 이미지를 업로드 하거나 캠페이너스가 제공하는 무료 이미지를 선택할 수 있습니다. - 이미지 채우기 : 이미지를 그리드에 빈 공간 없이 가득 채우게 됩니다. 이 옵션이 해제되면 허용된 그리드 공간 내에서 이미지를 잘림 없이 표현합니다. - 라이트박스 : 이미지를 누르면 주변이 어두워지면서 큰 이미지로 확대하여 보여줍니다. 이미지 링크와 함께 사용할 경우 이 옵션이 무시됩니다. - 원형 이미지 : 이미지를 원형으로 만듭니다. 이미지의 원본 비율과 상관 없이 정원 형태로 만듭니다. - 흑백 이미지 : 이미지를 흑백으로 만듭니다. - 선명하게 : 이미지가 좀 더 선명하게 보입니다. 이미지 유형에 따라 부적절하게위젯별 기능 설명 (DB 요소)
게시판 위젯 설정 방법디자인 모드 > (왼쪽 윗부분) + 아이콘을 눌러 게시판 위젯 생성 > 생성된 게시판 위젯 위에서 우클릭 > 게시판 설정 클릭!*게시물을 추가하려면, 디자인 모드 (오른쪽 윗부분) 미리보기에서 '글쓰기' 버튼을 클릭해 입력해야 합니다. (참고 : 게시판에 컨텐츠 올리기) 설정항목 - 게시판 연동 : 게시판 위젯을 실수로 삭제하더라도 게시판 데이터베이스(DB)는 그대로 남아 있습니다. 또한 A라는 메뉴에서 사용한 게시판을 B라는 메뉴에서도 사용할 수 있습니다. 게시판 연동은 이러한 기능들을 위한 것이며, 선택한 게시판 데이터베이스를 불러옵니다. - 상품평/기타 게시판 : 상품평, 리뷰 게시판을 만들 때 사용할 수 있습니다. - 연동게시판 선택 : 새로운 게시판이 아닌 기존 게시판의 게시물을 불러오려는 경우 선택합니다. - 게시판 이름 : 게시판 이름을 설정할 수 있습니다. 처음 게시판 생성 시 자동으로 '이름 없는 게시판#' 이름이 지정되므로 알아보기 쉬운 게시판위젯 설정하기
위젯 설정을 열어 각 위젯이 가진 고유의 설정을 변경할 수 있습니다. 위젯 설정 열기 1. 위젯을 추가합니다. 2. 위젯에 마우스 커서를 놓습니다. 3. 마우스 오른쪽 버튼을 클릭합니다. 다음 그림은 이미지 위젯에 마우스 오른쪽 버튼을 클릭한 장면입니다. 4. 설정을 클릭합니다. 위젯에 따라 설정 앞 이름이 달라집니다.섹션이란?
섹션이란? 캠페이너스는 메뉴(페이지) 안에 섹션(단락)이 있고, 섹션 안에 위젯(최소 단위)이 올라가는 구조입니다. 다음의 이미지처럼 페이지 내에 여러개의 섹션으로 나누고 각 섹션 별로 다른 분위기를 연출할 수 있습니다.섹션 설정하기
섹션에 배경이미지/동영상을 넣거나 배경색, 상하/좌우 여백 및 각종 효과를 섹션 설정에서 설정할 수 있습니다. 1. 섹션 설정 창 열기 1. 섹션 위에 마우스를 올립니다. 섹션은 위젯 영역 뒤쪽에 있기 때문에 위젯이 없는 곳이나 가장자리 회색부분에 마우스를 올립니다. 2. 마우스 오른쪽 버튼을 클릭합니다.(우클릭) 3. 섹션 설정을 클릭하면 섹션 설정 창이 열립니다. 2. 섹션 설정하기 - 배경에 이미지 또는 동영상 넣기 : 섹션 설정 창의 윗부분에 마우스 커서를 올리면 이미지 찾기, 무료 이미지, 동영상 버튼이 나타납니다. 버튼을 클릭하여 무료 이미지를 넣거나 내가 가진 이미지를 업로드할 수 있습니다. 동영상 버튼을 클릭하면 유튜브 또는 비메오 영상 주소를 넣어 섹션 배경을 동영상으로 설정할 수 있습니다. - 배경 > 이미지 : 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다. - 배경 > 배경색 : 배경색을섹션 추가/복사/이동/삭제하기
1. 섹션 추가하기 섹션 추가는 빈 섹션을 추가하거나 샘플섹션을 활용하거나 기존의 섹션을 복사하여 할 수 있습니다. 섹션을 하나씩 만들어 보면서 필요에 따라 유용한 방법을 활용하시길 바랍니다. 1) 빈 섹션추가하기 위젯이 하나도 없는, 말 그대로 비어있는 섹션을 추가할 수 있습니다. 추가방법 - 디자인 모드 > (좌 또는 우) 가장자리 회색 기둥 부분 우클릭 > 빈 섹션추가 클릭 - 섹션은 위젯 영역 뒤쪽에 있기 때문에 위젯이 없는 곳을 마우스 우클릭해서도 섹션 설정 및 빈 섹션추가를 할 수 있습니다. 2) 샘플섹션 활용하기 샘플섹션은 여러 개의 위젯을 배치하여 미리 디자인된 섹션입니다. 샘플섹션을 추가 후 위젯을 추가하거나 수정하여 활용할 수 있습니다. 추가방법 1. 디자인 모드에서 왼쪽 윗부분의 마술지팡이 모양 아이콘 섹션 추가를 클릭합니다. 2. 그러면 왼쪽에서 섹션 추가 사이드바가 열립니다. 3. 왼쪽 윗부분의 비주얼, 컨텐츠, 푸터/메뉴 중에서 카테고리를 먼저 선택하고 원하샘플섹션 활용하기
샘플섹션은 여러 개의 위젯을 배치하여 미리 디자인된 섹션입니다. 샘플섹션을 추가 후 위젯을 추가하거나 수정하여 활용할 수 있습니다. 샘플섹션은 무제한 이용하실 수 있습니다. 샘플섹션 추가하기 1. 디자인 모드에서 왼쪽 윗부분의 마술지팡이 모양 아이콘 섹션 추가를 클릭합니다. 2. 그러면 왼쪽에서 섹션 추가 사이드바가 열립니다. 3. 왼쪽 윗부분의 비주얼, 컨텐츠, 푸터/메뉴 중에서 카테고리를 먼저 선택하고 원하는 샘플섹션을 클릭합니다. 4. 그러면 샘플섹션이 추가되고 자동으로 추가된 섹션이 있는 위치로 화면이 이동합니다. 1. 푸터/메뉴 섹션은 페이지의 가장 아래에만 삽입됩니다. 섹션 이동하기 섹션은 위젯과 달리 섹션끼리 나란히 있을 수 없으며 항상 가로 영역을 가득 채우는 형태로 존재합니다. 따라서 섹션은 위/아래로만 이동할 수 있습니다. 1. 이동할 섹션 위에서 마우스를 올립니다. 섹션은 위젯 영역 뒤쪽에 있기 때문에 위젯이 없는 곳이나 가장자리 회색부분에 마우스를 올립니다. 2메뉴 설정하기
메뉴 설정을 열어 메뉴명을 편집하거나 페이지 URL, 페이지 제목/설명, 접속권한 외 옵션 등을 설정할 수 있습니다. 메뉴 설정 열기 1단계, 디자인 모드에서 (왼쪽 윗부분) ≡ 아이콘(메뉴 관리)을 클릭합니다. 2단계, 메뉴명 오른쪽의, i( 느낌표) 아이콘을 클릭하면 메뉴 설정 창이 열립니다. 또는, 메뉴명 위에 마우스를 올려놓고 오른쪽 커서를 눌러 나타나는 보조 메뉴에서 메뉴 설정을 클릭해 열 수 있습니다. 메뉴 설정항목 1. 메뉴명 : 메뉴명을 변경합니다. 메뉴명을 변경하면 상단 메뉴바 메뉴명도 함께 변경됩니다. 2. URL : 해당 메뉴의 주소(URL)를 변경합니다. *메뉴의 주제와 관련있어서 논리적이고 이해하기 쉬운 단어(영어)로 변경 권장 3. 페이지 제목 : 페이지 제목을 작성합니다. *검색엔진최적화에 영향 4. 페이지 설명 : 페이지 내용을 간략하게 작성합니다. *50자 이하 입력 권장 5. 메뉴 대표이미지 : 사이트 공유 시 표시되는 메뉴 대표 이미지를 업로드합니다관리자 모드란?
사이트 구성시 처음에 많이 사용하는 것은 디자인 모드일 수 있지만, 디자인이 완성된 이후에는 관리자 모드가 운영에 있어 가장 많이 보는 페이지가 될 수 있습니다. 관리자 모드에서는 사이트 이름 변경, 회원관리, 가입 설정 등 디자인 외적인 각종 설정을 할 수 있습니다. --- 1 각종 관리 메뉴를 열어볼 수 있습니다. 상세 설정 및 조회를 하기 위해서는 하위 메뉴에 접근해야 합니다. --- 2 다른 언어 사이트의 관리자 모드로 이동합니다. (다국어 기능 이용 고객에게만 노출되는 메뉴) --- 3 내 사이트의 이름을 표시합니다. 누르면 새 창으로 실제 사이트로 이동합니다. --- 4 내 사이트의 이름을 누르는 것과 같이 새 창으로 내 사이트가 열립니다. --- 5 관리자 모드를 종료하고 로그아웃 합니다. --- 6 요금제 만료일, 도메인, SSL, SMS 충전 현황 등 각종 정보를 확인할 수 있습니다. --- 7 내 사이트의 운영진 목록을 한 눈에 볼 수 있습니다. --- 8 운영진들템플릿을 변경할 수 있나요?
- 템플릿은 사이트 개설 시에만 선택이 가능하며, 개설 이후 변경은 지원되지 않습니다. - 다만, 다른 템플릿의 모든 기능들은 캠페이너스 기본 기능을 통해 제작된 것이기 때문에, 디자인 수정을 통해 원하시는 기능을 동일하게 구현하실 수 있습니다. - 디자인 모드 내 샘플섹션은 무제한 이용하실 수 있습니다. 샘플섹션 활용하기 > 관련 도움말 - 샘플섹션 활용하기 - 체험판에서 제작한 디자인을 정식판으로 이전할 수 있나요?이미지 등 위젯 크기를 조정하고 싶어요.
캠페이너스의 그리드 시스템은 12단계로 이루어지며 항상 본문 폭에 가득차도록 구성됩니다. 따라서 이미지를 삽입하면 본문폭만큼 크게 삽입됩니다. 이 상태에서 이미지의 크기를 조정하고 싶을 때 두 가지 방법을 사용할 수 있습니다. 여백 위젯 활용하기 1. 먼저 디자인 모드에 진입하여 이미지를 삽입합니다.2. 여백 위젯을 두 개 추가합니다.3. 여백 위젯을 추가한 이미지 양 옆에 각각 배치합니다.4. 여백 위젯과 이미지 위젯 사이를 좌우로 드래그하여 원하는 크기로 조정합니다. 이미지 아래쪽을 드래그하여 크기 조정 1. 디자인 모드에서 이미지를 삽입합니다. 2. 삽입된 이미지의 하단부에 마우스 커서를 올려놓습니다. (마우스 커서의 모양이 변하는 영역이 있습니다)3. 위 상태에서 이미지 하단부를 클릭한채로 위/아래로 이동하면 크기가 조정됩니다. 관련 도움말 - 이미지의 적절한 해상도와 용량은? - 이미지가 표시되는 방식 맞춤설정하기적용한 폰트가 브라우저별로 차이가 발생합니다.
같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다. 하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다. 위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다. 보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다. 폰트 렌더링 차이는 조정이 어렵습니다. 웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다. 하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가능합니다. 일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만, 근본적으로 같은 렌더링으로 표현하는 것은그리드란 무엇인가요?
그리드 시스템은 한정된 공간 안에서 레이아웃을 배치하는데 도움을 줍니다. 그리드 시스템은 이미 건축, 책, 신문과 같은 곳에서 이미 널리 쓰이고 있습니다. 웹 페이지에서도 그리드 시스템에 의해 레이아웃을 구성하면 더 쉽고 빠르고 아름답게 디자인을 할 수 있습니다. 캠페이너스는 12단 그리드 시스템이 적용되어 있습니다. 간단히 그리드 시스템이 적용된 웹 페이지를 살펴볼까요? 아래 예시는 캠페이너스에서도 채택하고 있는 12단 그리드 시스템을 적용한 사이트 입니다. 언뜻 복잡한 이미지와 텍스트가 배치되어있지만 어수선한 느낌이 들지 않습니다. 그 이유는 바로 그리드 시스템을 적용했기 때문입니다. 레이아웃의 큰 축을 이루는 텍스트들은 12단계의 그리드에 포함되어 있는 것을 확인할 수 있습니다. 캠페이너스는 12단계의 그리드 시스템을 따르고 있기 때문에 각 요소(위젯)들은 1/12칸 단위로만 움직임을 제어할 수 있습니다. 언뜻 보면 움직임의 제약이 많아보이지만, 오히려 이러한 제약이 일관되고갤러리 위젯
위젯 소개 갤러리는 이미지 및 이미지 설명 텍스트의 묶음이며 다양한 방식으로 표현할 수 있습니다. 이미지 위젯으로도 비슷한 구성이 가능하지만 갤러리만으로 표현 가능한 요소들이 있으며, 무엇보다 한꺼번에 여러 이미지를 추가할 때는 갤러리 위젯이 효율적입니다. 위젯 설정 위젯 설정에서 갤러리를 설정합니다. 1. 갤러리 위젯을 추가합니다. 2. 갤러리 설정을 엽니다. 갤러리 설정항목 설정창 상단 갤러리 설정 탭 메뉴에서 갤러리 콘텐츠를 추가합니다. 다음으로 디자인 탭 메뉴에서 갤러리 스타일 및 디자인을 설정할 수 있습니다. 1. 갤러리 설정 창 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다. 2. 이미지 추가 또는 동영상 추가를 클릭합니다. 3. 내 PC에서 이미지 추가하거나, 동영상(유튜브 또는 Vimeo) URL을 입력합니다. 4. (필요한 경우) 갤러리 별로 제목과 설명, 링크를 추가합니다. 5. 갤러리 설정 창 왼쪽의 갤러리 이름을 입력합니다. 6. 갤러리 설정메뉴 상단 숨김
페이지의 상단(헤더) 섹션을 숨길 수 있습니다. 상단에는 로고, 메뉴바, 로그인/가입 버튼 등 중요 메뉴가 표시되지만 랜딩페이지, 이벤트 페이지 제작 등의 이유로 상단을 숨겨야 한다면 다음 방법을 사용해 보시길 바랍니다. 상단 숨김 방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다. 3. 상단을 숨기려는 메뉴명 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다. 4. 옵션 항목에서 상단 숨김 옵션을 선택합니다.