여러 개의 위젯을 한꺼번에 복사할 수 없을까요?

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

시작에 앞서
디자인 모드에서 위젯은 복사가 가능합니다. 그러나 1개만 복사가 되기에 종종 여러 개의 위젯을 한꺼번에 복사할 수 없는지 문의하시는 분들이 계십니다. 아무래도 다른 페이지에 여러 개의 위젯을 하나, 하나 복제하는 데 따른 불편함 때문인 것으로 생각됩니다.


위젯을 한꺼번에 복제할 수 있는 방법은 없지만 대체 방법으로 섹션 복제 기능이 있습니다. 섹션을 복사하면, 복사한 섹션에 들어간 위젯들도 모두 함께 복사됩니다. 따라서 위젯을 하나, 하나 복사할 필요가 없어집니다.


이 방법은 다소 디자인적으로 고민이 필요할 수도 있지만, 여러 페이지에 부분적으로 같은 디자인이 반복될 때 파격적으로 작업시간을 단축시키는 효과를 볼 수 있습니다.


오늘은 아임웹연구소 가이드 페이지를 살펴보면서, 어떻게 반복적인 작업을 줄일 수 있는지 알아보겠습니다.


아임웹연구소 입문가이드 보기
http://imweblab.com/step-1-select-solution



1단계, 아임웹연구소 가이드 페이지 전체 레이아웃
가장 먼저 어떤 섹션이 반복되는지 생각해봐야 합니다. 아임웹연구소 입문가이드 페이지는, 상단/하단 영역을 제외하고 본문이 3개의 섹션으로 나누어져 있습니다.





섹션 1 구성 살펴보기
저는 가이드를 제작할 때 스텝 바이 스텝 형식으로 구성하는 걸 좋아합니다. 따라서 [섹션 1]처럼 단계를 표시하는 제목과 약간의 텍스트로 구성했죠. 이렇게 구성하면 좋은 점은 [섹션 1]을 그대로 복사해서, 다음 2단계에 붙여 넣고 내용만 약간 바꾸면 된다는 점입니다.



그럼 번거롭게 새롭게 섹션을 디자인하거나, 위젯을 하나, 하나 복사해서 붙여 넣을 필요가 없어집니다. [섹션 1]을 통째로 복사해서, 다른 페이지에 붙여넣기 하면 될 테니까요. :)




섹션 2 구성 살펴보기
[섹션 2]는 실제 가이드 내용입니다. 이 부분은 콘텐츠 내용 및 길이에 따라 디자인 레이아웃이 달라질 수 있기에 섹션 복제 기능은 사용하지 않았습니다.





섹션 3 구성 살펴보기
[섹션 3]의 경우 다음 단계 페이지로 이동하기 위한 버튼과 페이스북 댓글 플러그인으로 구성되어 있습니다. [섹션 3]은 기본적으로 버튼 링크 주소를 재설정하는 일 이외에 수정할 부분이 없습니다. 그렇다는 건 [섹션 3]도 섹션을 통째로 복사해, 나머지 단계별 가이드 페이지에 그대로 붙여 넣어 쓸 수 있게 됩니다.





섹션 복사/붙여넣기/이동시키는 방법
위젯을 사용해 섹션을 꾸몄다면, 섹션은 언제든 복사가 가능하고, 같은 또는 다른 페이지에 붙여넣기가 가능합니다. 섹션 기본 사용법은 아임웹 동영상 강의(바로가기) 5화에서 좀 더 상세하게 알아보실 수 있습니다.

*쇼핑, 갤러리 같은 DB 요소 위젯이 들어간 섹션은 정상적으로 복제가 되지 않을 수 있습니다. 그러나 기본적으로 섹션 복제는 되기 때문에, 필요한 경우 DB 요소 위젯을 추가해주시면 됩니다.



맺으며
프로그램 계열의 사용법이 대체로 그러하듯, 빠른 작업의 기본은 반복적으로 사용할 부분을 미리 구성하고, 단축키(또는 단축 기능)를 사용하는 것입니다. 페이지 레이아웃을 잘 구성해보신 후, 섹션 복제 기능을 활용해 여러 페이지를 빠르게 만들어보세요. :)

위 그림과 함께 아임웹연구소 가이드 페이지가 어떻게 구성되었는지, 직접 살펴보시려면 아래 링크를 클릭해주세요.

http://imweblab.com/step-1-select-solution



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

아임웹 공식제휴사

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