매뉴얼

디자인팜 2.0 컨텐츠 추가/수정/삭제 방법 안내 (소스 수정 방법 안내)

이제 디자인팜2.0의 컨텐츠 추가 및 수정 방법에 대해 알려드릴 차례입니다^^

디자인팜 내에서의 컨텐츠라고 하면, 사이트 레이아웃(스킨)을 제외한 컨텐츠 페이지를 구성하는 요소이며 쉽게 설명드리자면 컨텐츠 덩어리라고 생각하시면 됩니다.

현재 디자인팜에서 기본적인 컨텐츠들을 제공하고 있으며 이 컨텐츠들을 조합하면 메인화면 또는 서브 메뉴 페이지가 완성이 됩니다.

그럼 컨텐츠 추가 및 수정&삭제 방법에 대해 설명해 드리도록 하겠습니다.

 


 

1. 컨텐츠를 추가 할 페이지 선택

처음 디자인팜2.0을 실행하면 메인화면을 선택하는 팝업창이 먼저 나타납니다.

이 때, 기존에 제공되는 메인화면을 선택하지 않고 나만의 메인화면 또는 서브 페이지를 만들고 싶다면 메인화면 팝업창을 닫아 주세요. 그럼 아래와 같은 화면이 보일 것 입니다.

 

 

메인화면 선택 창을 닫고 나면 빈 메인화면 페이지가 나타납니다. 만약 메인화면이 아닌 다른 페이지의 화면을 편집하고 싶으시다면 상단에 있는 '메뉴관리' 버튼을 눌러주세요.

그럼 아래와 같이 페이지를 선택 할 수 있는 메뉴화면이 나타날 것 입니다. 메뉴를 등록한 상태라면 아래처럼 메뉴들이 나타날 것이고, 만약 메뉴가 등록되지 않은 상태라면 '대메뉴 추가' 후 '페이지 추가'를 해서 작업 할 메뉴 페이지를 생성해 주시면 됩니다.

그리고 생성된 메뉴명을 클릭하시면 해당 페이지의 편집화면으로 이동됩니다^^

 

 

 

2. 컨텐츠를 넣을 블록 추가

컨텐츠를 넣기 위해서는 반드시 블록이 필요합니다. 페이지에 아무것도 없는 상태에서는 컨텐츠가 설치되지 않으며, 컨텐츠를 담을 그릇인 블록을 먼저 추가해 주셔야 컨텐츠를 설치 할 수 있습니다.

우선 기본 블록을 추가해 보겠습니다. ( 블록 추가에 대한 자세한 설명은 여기서 봐주세요^^ ☞ 블록 추가방법 )

 

 

처음 기본 블록을 추가하면 6칸짜리의 블록이 기본으로 생성이 됩니다. 저는 컨텐츠를 3칸 넣을 예정이기 때문에 블록의 칸을 3칸으로 만들도록 하겠습니다.

블록의 칸을 수정한 후 우측의 블록 출력형태 선택에서 모바일과 태블릿별로 원하는 레이아웃을 선택해 주세요. 이렇게 선택된 레이아웃은 실제 페이지 화면에서 브라우저 크기를 줄였을 때

선택된 모양대로 레이아웃이 변화합니다. 반응형으로 제작하시는 분들은 반드시 원하는 형태를 선택해 주셔야 해요^^

 

 

 

3. 컨텐츠 추가

컨텐츠를 넣는 방법은 2가지가 있습니다.

첫 번째, 좌측의 기본 컨텐츠 넣기

두 번째, 디자인 블록에 등록된 컨텐츠를 활용

 

좌측의 기본 컨텐츠 넣기는 주로 서브 페이지를 편집 할 때 많이 사용됩니다. 텍스트, 이미지, 표 등을 이용하면 설명 또는 안내 페이지가 손쉽게 완성되기 때문입니다.

그리고 디자인 블록이 등록된 컨텐츠를 활용하는 것은 완성되어 있는 컨텐츠들을 가져와 블록에 배치하면 페이지가 완성되는데 손쉽게 퀄리티 높은 메인화면, 서브 페이지를 만들 수 있습니다.

 

3-1. 좌측의 기본 컨텐츠를 넣는 방법

우선 좌측의 기본 컨텐츠 넣기부터 설명해 드리겠습니다^^

좌측에 제공되는 기본 컨텐츠들은 컨텐츠명 클릭 후 마우스 오른쪽 버튼을 누른 상태로 드래그(끌어오기)를 해서 원하는 블록 칸 안에 넣어주시면 컨텐츠가 설치됩니다.

만약 원하는 블록 칸이 아닌 다른 칸에 컨텐츠가 설치되었을 경우 당황하시지 마시고 설치된 컨텐츠를 다시 클릭하신 후 똑같이 드래그(끌어오기) 해서 원하는 블록 칸으로 이동해서 재배치 해주시면 됩니다~

저는 타이틀 텍스트와 이미지 컨텐츠를 설치해 보겠습니다.

 

 

컨텐츠를 끌어와서 설치하기까지 완료 되셨나요?^^ 참 쉽죠~?

설치한 컨텐츠의 내용을 바꾸는 방법을 알려드리기 전에 한 가지 설명하고 넘어가야 할 것이 있습니다~

블록 안에 설치된 컨텐츠 위에 마우스를 올려보면 컨텐츠 영역에 테두리가 생기면서 우측 상단에 버튼들이 나타날 것 입니다.

그럼 여기서 잠깐 이 버튼들에 대해 설명하고 넘어가도록 하겠습니다^^

아래의 이미지와 이미지 밑에 첨부한 설명을 참고해 주세요.

 

① : 컨텐츠 즐겨찾기

    -  화면에 컨텐츠 영역으로 표시되어 있는 '타이틀 텍스트 입력' 의 컨텐츠를 즐겨찾기 할 수 있습니다.
       자주 쓰는 컨텐츠들은 이 버튼을 이용해 즐겨찾기에 등록한 다음, 좌측 상단에 있는 같은 별 모양의 탭에서 가져와서 다시 사용하실 수 있습니다.

② : 컨텐츠 수정

    - 컨텐츠를 수정 할 수 있는 버튼입니다. 이 버튼을 누르면 우측에 컨텐츠 편집 항목들이 나타나고 항목에 맞춰서 컨텐츠 내용을 수정해 주시면 됩니다.

③ : 컨텐츠 삭제

    - 이 버튼을 누르면 해당 컨텐츠가 삭제되며, 삭제된 컨텐츠를 다시 복구하고 싶으시면 좌측 상단에 있는 휴지통 탭에서 다시 가져오실 수 있습니다.

④ : 해당 셀(블록의 칸) 즐겨찾기

    - 이미지에 보면 블록 한 칸이 파란색으로 표시가 되어있을 것 입니다. 이 한 칸을 셀이라고 하며, 블록 한 칸에 설치 되어있는 컨텐츠들의 배치 상태를 그대로 다시 재사용 하고 싶으시면 이 버튼을 이용해 주세요.
      이 셀을 즐겨찾기한 뒤 좌측 상단에 있는 같은 별 모양의 탭에서 등록한 셀을 블록 안으로 드래그 해서 가져와 사용하시면 됩니다.

 

그럼 설치된 '타이틀 텍스트 입력' 컨텐츠의 글자 내용을 바꿔보도록 하겠습니다. 위에 설명 드렸던 수정 버튼을 클릭해 주시면 우측에 컨텐츠의 내용 항목들이 나타날 것 입니다.

이 항목들의 내용을 바꿔보도록 하겠습니다^^

타이틀 내용 글자를 변경하고 글자 색상, 그리고 타이틀 글자 앞에 나타날 아이콘 모양을 변경해 보겠습니다.

그리고 타이틀 컨텐츠와 그 아래 설치했던 이미지 컨텐츠와 간격이 너무 좁으니 이 사이의 간격을 넓히기 위해 여백을 주도록 하겠습니다.

컨텐츠의 여백을 주는 방법은 우측 항목 중 상단에 있는 '기본옵션' 버튼을 누르면 여백을 지정하는 칸들이 나타는데 여기에서 여백을 설정하시면 됩니다.

상단 여백을 제외한 좌측, 우측, 하단 여백만 설정 가능하니 참고 바랍니다^^

변경되는 항목의 내용들은 아래의 이미지를 참고해 주세요.

 

 

내용을 변경하고 하단에 있는 적용버튼을 누르면 편집 화면에 변경된 내용이 적용 되어있을 것 입니다. 편집 화면 상단에 보시면 '미리보기' 버튼이 있는데 이 버튼을 누르면 실제 페이지에서의 모습을 확인 하실 수 있습니다.

 

 

타이틀 내용이 변경되었나요?^^ 변경이 완료 되었다면 이제 이미지 컨텐츠를 바꿔보도록 하겠습니다.

위와 같은 방법으로 이미지 컨텐츠 내용을 수정해 주세요~

 

 

이제 어느정도 컨텐츠 사용법에 대해 감이 잡히시나요? 아직 어려우신가요?ㅜㅜ

그렇다면 컨텐츠 하나를 더 추가해서 따라해 보도록 합시다^^

저는 사진 밑에 사진 설명을 넣고 싶으니 좌측 컨텐츠에서 '장문 텍스트' 컨텐츠를 드래그 해서 설치해 보도록 하겠습니다.

이 컨텐츠는 사진 밑에 넣고 싶으니 마우스로 끌어다가 사진 밑에다가 놔두도록 하겠습니다.

그리고 컨텐츠 수정 버튼을 누르고 우측에서 '텍스트 수정' 버튼을 눌러 장문 텍스트의 내용을 입력해 보겠습니다.

 

 

내용을 입력한 후 '미리보기' 버튼으로 페이지를 확인해 보면 아래와 같이 나올 것 입니다. 저는 사진과 장문 텍스트 사이의 간격이 좁은 것 같아 여백을 줘서 간격을 띄웠습니다~^^

 

 

예제에서 사용한 컨텐츠 외에도 여러가지의 다양한 컨텐츠들이 제공되고 있으니 하나씩 다 살펴보시고 설치해서 사용해 보시면 기본 컨텐츠에 대한 전반적인 파악이 될 것 입니다.

기본 컨텐츠를 잘 활용하면 여러 타입의 페이지들을 쉽게 제작하실 수 있습니다~^^

그럼 이제 디자인 블록에 등록된 컨텐츠를 활용하는 방법에 대해 설명해 드리겠습니다.

 

 

3-2. 디자인 블록에 등록된 컨텐츠를 활용하는 방법

디자인 블록은 제작 난이도가 높은 구조의 컨텐츠를 미리 제작해 고객님들이 사용하시기 편하도록 블록에 배치하여 제공하는 컨텐츠 모음입니다.

기본 컨텐츠와 마찬가지로 내용 수정 및 위치 이동이 자유롭기 때문에 활용도가 높을 것 이라고 생각됩니다^^

디자인 블록에 등록된 컨텐츠를 확인하는 방법은 앞서 설명해드렸던 기본블록 추가 할 때처럼 '블록 추가' 버튼을 클릭해 주세요.

그럼 블록 추가 팝업창이 뜨는데 팝업창 상단의 디자인블록 탭에 있는 것들이 한 블록별로 컨텐츠들이 채워져있는 디자인 블록들 입니다.

기본 컨텐츠들로 제작하기 어려운 디자인의 컨텐츠이나 이미 만들어져 있는 완성도 높은 컨텐츠들을 사용하고 싶으실 때엔 이 탭에서 찾아서 사용하시면 됩니다^^

디자인 블록들 중에 마음에 드시는 것을 찾으셨다면 우측 하단에 있는 '블록 추가' 버튼을 눌러주시면 화면에 설치됩니다~

 

 

블록 추가 하셨나요?^^ 블록 추가한 후 페이지를 확인해 보면 아래처럼 블록이 추가되어 컨텐츠들이 늘어난 것이 보이실 겁니다.

그런데 앞서 제작해놓은 컨텐츠와 위아래 간격이 너무 좁다 싶으시죠? 그럴때는 블록 하단에 있는 하단 여백을 설정해 주시면 됩니다^^

편집 화면에서 처음 제작한 블록과 조금 전 추가했던 블록 사이의 틈새에 마우스를 올려 보시면 여백 설정하는 부분이 나타나는데 이 곳을 클릭해 주세요~

 

 

 

이렇게 추가된 컨텐츠들의 내용은 컨텐츠 수정 버튼을 눌러 위와 동일하게 내용을 수정해 주시면 됩니다~

디자인 블록의 컨텐츠들 역시 마우스 드래그로 이동이 가능하기 때문에 원하는 디자인의 블록을 추가하신 후 사용하고자 하시는 컨텐츠를 다른 블록의 칸으로 옮겨 재배치 해주시면 간단하게 페이지가 바뀝니다^^

 

컨텐츠 추가하는 방법에 대한 설명이 끝났습니다~

아주 간단하게 컨텐츠가 추가되죠?^^ 디자인팜2.0은 별도의 소스 코딩없이 간단하게 컨텐츠가 완성되는 큰 장점이 있습니다.

그럼 이제 컨텐츠의 내용 및 설정을 수정하는 방법에 대해 알려드리도록 하겠습니다.

 

 

4. 컨텐츠 수정

설치된 컨텐츠의 내용을 제작하는 사이트에 맞게 내용이 수정되어야겠죠?^^

컨텐츠 내용을 수정하는 방법에 대해 위에서 어느정도 설명하고 넘어왔기 때문에 수정 방법에 대해 이미 짐작하시고 계시는 분들이 있으실 것 입니다~ㅎㅎ

마우스를 올려 나타나는 수정 버튼을 눌러 우측 항목에서 수정하면 되는데 일반적인 글자 수정이나 이미지 수정 같은 경우는 위에서 하셨던대로 수정 버튼을 눌러 우측의 항목에서 수정하시면 됩니다.

만약 설치한 디자인 블록 중에 최근 게시글, 쇼핑몰 상품 출력 등 프로그램 관련 컨텐츠들은 설정이 초기화 되기 때문에 이 부분을 다시 설정하는 방법에 대해 알려드리겠습니다.

 

예제로 사용한 디자인 블록을 설치하도록 하겠습니다.

 

 

위 블록에는 최근 게시글 컨텐츠가 포함되어 있는 블록입니다. 앞서 말씀드렸다시피 프로그램 관련 설정은 블록 설치시에 초기화 됩니다.

초기화되는 이유는 이미 컨텐츠에 지정되어 있던 프로그램 코드가 해당 사이트의 프로그램 코드와 중복되거나 설치되어 있지 않은 프로그램 코드일 수가 있기 때문에 이러한 문제점을 방지하고자 블록 설치시 초기화가 됩니다^^

설치한 블록의 컨텐츠 중 최근 게시글 컨텐츠에 마우스를 올려 수정 버튼을 클릭해보도록 하겠습니다. 그럼 아래의 이미지와 같이 우측에 설정 항목들이 출력이 되겠죠~?

 

 

자, 여기서 제가 말씀드린 프로그램 코드인 '게시판 코드' 항목이 보이실 겁니다. 이 항목은 현재 아무 값도 설정되어 있지 않는 상태입니다.

만약 게시판들의 전체 글을 다 출력하고 싶으시면 저 설정 그대로 두시면 되구요. 만약 특정 게시판의 게시글을 출력해오고 싶으시다면 이미지에 표시된 게시판 코드를 설정해 주셔야 합니다.

다른 프로그램 관련 컨텐츠들도 역시 같은 형태로 되어있기 때문에 이와같은 방법으로 설정해서 수정해 주시면 됩니다^^

 

5. 컨텐츠 삭제

컨텐츠 삭제 방법은 컨텐츠 위에 마우스를 올리면 나타나는 버튼들 중 휴지통 모양인 버튼을 클릭하면 해당 컨텐츠가 삭제 됩니다.

이 방법은 개별적으로 컨텐츠를 삭제하는 방법이며, 블록 한줄의 컨텐츠를 다 삭제하고 싶으시면 블록 우측의 휴지통 버튼을 클릭해 주시면 됩니다^^

그리고 블록이 여러 줄이고 설치된 컨텐츠가 많은데 다 없애고 싶으시다면 편집화면 중앙 하단에 있는 '모든블록삭제' 버튼을 눌러주시면 화면이 깨끗하게 비워집니다~

각 버튼들의 위치는 아래의 이미지를 참고해 주세요^^!

 

 

[고급 사용자 전용 - 소스 수정 방법]

현재 디자인팜2.0에서는 초급 사용자들을 위해 컨텐츠의 소스 수정이 불가능한 상태이지만 세부적인 컨텐츠 디자인 수정을 원하는 고급 사용자들을 위한 소스 수정 방법을 알려드리겠습니다.

수정하고자 하는 컨텐츠 위에 마우스를 올리고 나타나는 버튼들 중 수정 버튼을 클릭하면 우측에 설정 항목들이 나오는 것은 이제 아실 겁니다^^

여기서 소스 수정을 하는 버튼은 우측 상단에 보시면 빨간색 망치버튼이 소스 수정 창으로 이동할 수 있는 버튼입니다~

이 버튼을 클릭하면 css / html / js 를 수정 할 수 있는 소스 창이 나타나며 여기에서 수정을 해주시면 됩니다^^

 

 

만약 컨텐츠의 우측 설정 항목을 추가 / 수정 / 삭제를 하고 싶으시면 소스 창의 하단에 있는 '변수관리' 버튼을 눌러 해당 팝업 창에서 수정해 주시면 됩니다~

변수관리에서 수정하신 후 해당 창 하단에 있는 '저장' 버튼을 눌러주신 다음 소스 수정 창의 하단에 있는 '수정' 버튼을 최종적으로 눌러 주셔야 변경된 내용이 적용되니 주의해 주세요^^

 

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top