# 27개의 포트폴리오 레이아웃 URL: https://canvaswp.com/ko/templates/portfolio/ Updated: 2026-11-05 템플릿 그리드와 메이슨리. 필터링 및 로딩 스타일. 그리고 이들 뒤에 있는 단일 프로젝트 레이아웃도 포함됩니다. [라이브 쇼케이스 열기](https://demos.canvaswp.com/classic/) [데모 웹사이트 둘러보기](https://canvaswp.com/ko/demos/) 최종 업데이트 2026년 11월 5일 - 그리드 - 메이슨리 - 로딩 스타일 - 단일 프로젝트 - 레이아웃 ## 그리드 5개 이 페이지의 모든 그리드는 ‘Layout’을 ‘Portfolio’로 설정한 Canvas Posts 블록 하나입니다. ‘Columns’에서 한 행에 표시할 프로젝트 수를 정하고, ‘Portfolio Gutter’에서 프로젝트 사이의 간격을 설정하며 간격을 0까지 줄일 수도 있습니다. 한 열 버전에서는 ‘Alternating Split Cards’를 켜면 각 프로젝트가 설명과 나란히 놓이고, 그림의 위치가 두 번째 카드마다 좌우로 바뀝니다. - [1 컬럼 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-1/) - [2열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-2/) - [3열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-3/) - [5열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-5/) - [6열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-6/) ## 메이슨리 6 같은 블록, 다른 Grid Engine입니다. 메이슨리 모드를 선택하면 카드가 각자의 높이를 유지한 채 행 줄을 맞출 필요 없이 열에 맞춰 배치됩니다. 리듬은 Card Shape에서 나옵니다. 모든 사진을 하나의 모양으로 자르거나, 프로젝트마다 고유한 모양을 유지하게 할 수 있습니다. 혼합형 버전은 호버 오버레이 안으로 제목도 옮깁니다. - [혼합 컬럼 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6열 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## 로딩 스타일 5 이 설정은 방문자가 나머지 작업으로 이동하는 방식을 결정합니다. 페이지네이션 스타일에서는 클라이언트 측 페이지 나누기와 무한 스크롤 등을 선택할 수 있습니다. 프로젝트를 페이지 내에서 열기 옵션은 그리드 위에 프로젝트를 불러오며 페이지를 벗어나지 않게 합니다. 프로젝트 열기 위치 옵션에서는 라이트박스 모달로 표시할 수 있습니다. 필터 스타일은 Canvas Grid Filter 블록(카테고리 버튼 줄)의 각 스타일에 대해 셔플 버튼을 포함하거나 제외한 레이아웃을 설정합니다. - [jQuery 페이지네이션 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [무한 스크롤 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [페이지 내 AJAX (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-ajax/) - [모달 내 AJAX (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [필터 스타일 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## 싱글 프로젝트 5 프로젝트 페이지의 레이아웃은 프로젝트를 편집하면서 템플릿 설정에서 고른 템플릿을 따릅니다. 템플릿은 큰 이미지, 갤러리 슬라이더, 썸네일 그리드, 동영상 등 네 가지 미디어 유형을 다룹니다. 각 템플릿에는 왼쪽이나 오른쪽, 또는 양쪽에 사이드바를 두거나, 전체 너비로 배치하거나, 풀블리드 히어로 아래에 배치하는 옵션이 있습니다. 여기 연결된 페이지는 이 템플릿 세트의 일부 예시입니다. - [Parallax Image (새 탭에서 열림)](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [슬라이더 갤러리 (새 탭에서 열림)](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 비디오 (새 탭에서 열림)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [메이슨리 썸네일 (새 탭에서 열림)](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [동영상 삽입 (새 탭에서 열림)](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## 레이아웃 6 그리드가 페이지에서 놓이는 위치입니다. 사이드바 버전은 같은 블록을 사이드바(최근 글, 빠른 연락 양식 등 위젯)와 나란히 있는 본문 열에 배치합니다. 100% 너비는 그리드를 여백 없이 가장자리부터 끝까지 채웁니다. 패럴랙스를 켜면 Parallax Cards가 적용되며, 각 이미지가 페이지 스크롤에 따라 움직이는 배경 레이어로 바뀝니다. - [기본 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [오른쪽 사이드바 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [왼쪽 사이드바 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [양쪽 사이드바 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [100% 너비 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [패럴랙스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/portfolio-parallax/) 모든 링크는 실시간 쇼케이스의 실제 페이지를 열며, 여러분이 설치하는 것과 같은 테마와 블록으로 만들어져 있습니다. 내 사이트에서 ## 블록 하나로 이 중 무엇이든 만들어 보세요 쇼케이스는 둘러보시라고 준비된 것입니다. 그 뒤의 블록과 템플릿은 Canvas와 함께 제공되므로, 위의 모든 레이아웃을 여러분의 사이트에서 다시 만들 수 있습니다. ### 프로젝트는 레코드입니다 작업물은 포트폴리오 콘텐츠 유형에 프로젝트당 레코드 하나씩 저장되며, Grid Filter가 버튼을 만들 때 읽는 카테고리도 함께 저장됩니다. 프로젝트를 추가하면 해당 카테고리를 나열하는 사이트의 모든 그리드에 자동으로 반영됩니다. 페이지 자체는 편집할 필요가 없습니다. ### 그리드는 설정으로 조정합니다 Canvas Posts 블록을 삽입하고 포트폴리오 레이아웃을 선택한 다음, 이 페이지의 이름을 참고하여 레이아웃 및 페이지 매김 패널을 차례로 설정하세요. 프로젝트 페이지 자체의 경우, Canvas는 제목과 메타 목록부터 관련 프로젝트까지 포트폴리오 블록 8개를 추가합니다. ### 또는 완성된 데모 가져오기 데모 웹사이트 88개 중 21개는 포트폴리오 프로젝트가 이미 배치된 상태로 가져와지며, 에이전시, 사진작가 또는 일러스트레이터를 위해 구성되어 있습니다. 이 중 하나에서 시작하면 레이아웃이 아니라 프로젝트만 편집하면 됩니다. - [포트폴리오 데모 비교](https://canvaswp.com/ko/wordpress-themes/portfolio/) ### 모든 플랜, 모든 레이아웃 포트폴리오 애드온은 없습니다. 그리드, 필터, 로딩 스타일, 단일 프로젝트 템플릿은 평생 플랜과 마찬가지로 연간 플랜에서도 사용할 수 있습니다. 모든 플랜에 모든 블록이 포함되어 있기 때문입니다. - [플랜 비교하기](https://canvaswp.com/ko/pricing/) 고르는 방법 ## 내 작업에 어울리는 포트폴리오 레이아웃은? 사진부터 시작하세요. 레이아웃은 사진을 보여주기 위해 존재합니다. 한 방향으로 촬영한 사진은 행이 정렬되는 고정 그리드에 잘 어울립니다. 세로형과 가로형 작업이 섞여 있다면 메이슨리 레이아웃이 적합합니다. 메이슨리에서는 각 카드가 자신의 사진 비율을 유지할 수 있습니다. 사례 연구는 읽는 방식이 다릅니다. 프로젝트마다 단락 분량의 맥락이 필요하면 분할 카드의 단일 열 그리드가 여유를 주고, 에이전시가 작업 옆에 연락처를 두고 싶다면 사이드바 버전이 적합합니다. 프로젝트 개수도 함께 고려하세요. 작은 작업물 모음은 위에 필터를 둔 화면 하나에 들어갑니다. 몇 줄을 넘어가면 페이지가 빠르게 열리도록 로딩 방식을 선택하세요. 현재 위치를 알고 싶어 하는 방문자에게는 페이지네이터를, 둘러보는 방문자에게는 무한 스크롤을 권장합니다. 단일 프로젝트라면 먼저 미디어에 맞게 템플릿을 고르세요. 촬영물에는 갤러리 슬라이더, 영상물에는 비디오를 사용하고, 사이드바는 가장 마지막에 결정하세요. 더 많은 템플릿 ## 라이브러리의 나머지 - [페이지 템플릿 13](https://canvaswp.com/ko/templates/page-templates/) - [숏코드 및 요소 57](https://canvaswp.com/ko/templates/shortcodes/) - [블로그 레이아웃 35](https://canvaswp.com/ko/templates/blog/) - [쇼핑몰 레이아웃 9](https://canvaswp.com/ko/templates/shop/)