Salient 세일리언트 테마: 포트폴리오·모션 사이트 만들기
Salient는 큰 이미지, 포트폴리오와 화면 전환 효과를 활용하는 사이트에 맞는 다목적 워드프레스 테마입니다. 주요 기능, 적합한 사이트, 설정 순서와 설치 전 주의사항을 공식 정보 기준으로 정리했습니다.
Salient는 큰 이미지, 포트폴리오와 화면 전환 효과를 활용하는 사이트에 맞는 다목적 워드프레스 테마입니다.
Nectar 요소와 움직임이 중심인 테마
Salient는 Nectar라는 자체 요소 묶음을 갖고 있습니다. WPBakery 빌더 위에 얹혀 있는데, 실제로 쓰는 건 대부분 Nectar 쪽입니다. 슬라이더, 포트폴리오, 카운터, 분할 화면 같은 것들이 이미 완성된 형태로 들어 있어서 골라 넣기만 하면 됩니다.
가장 눈에 띄는 건 움직임입니다. 스크롤을 내리면 요소가 아래에서 올라오거나 서서히 나타납니다. 이런 걸 다른 테마에서 하려면 애니메이션 플러그인을 따로 붙이고 설정을 만져야 하는데, Salient는 요소마다 체크 한 번으로 켭니다.
Salient 테마 디자인은 어떤가요
같은 테마로 만든 것이라고 보기 어려울 만큼 성격이 다릅니다. 눌러서 스크롤해 보시면 이 테마가 말하는 “움직임”이 무엇인지 바로 보입니다.
.tdemo{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:26px 0 0} .tdemo.c3{grid-template-columns:repeat(3,1fr);gap:16px} .tdemo a{display:block;text-decoration:none;border:1px solid var(--rule);border-radius:14px; overflow:hidden;background:var(--surface);box-shadow:var(--shadow); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .tdemo a:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg)} .tdemo img{width:100%;display:block;border-radius:0;border:0;margin:0; aspect-ratio:16/10;object-fit:cover;object-position:top} .tdemo .c{display:block;padding:14px 16px 16px} .tdemo b{display:block;font-size:14.5px;font-weight:700;color:var(--ink); margin-bottom:4px;letter-spacing:-.01em} .tdemo .c>span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.55;word-break:keep-all} /* 템플릿 열기 버튼 */ .tdemo em{display:inline-flex;align-items:center;gap:5px;margin-top:12px; font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:-.01em; color:var(--accent-deep);background:var(--accent-wash); padding:7px 13px;border-radius:999px;line-height:1; transition:background .17s ease,color .17s ease} .tdemo em i{font-style:normal;display:inline-block;transition:transform .17s ease} .tdemo a:hover em{background:var(--accent);color:#fff} .tdemo a:hover em i{transform:translateX(3px)} /* 갤러리 아래 안내문 — .eco-disc는 음수 마진이 있어 카드와 겹치므로 쓰지 않는다 */ /* .a-body p{margin:0 0 22px}(0,1,1)가 .tdnote(0,1,0)를 이기므로 클래스를 겹쳐 특이도를 올린다 */ .tdnote.tdnote{margin:30px 0 34px;font-size:12.8px;line-height:1.65;color:var(--ink-3);word-break:keep-all} .tdnote.tdnote a{color:var(--accent-deep)} @media(max-width:820px){.tdemo.c3{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.tdemo,.tdemo.c3{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .tdemo a,.tdemo em,.tdemo em i{transition:none} .tdemo a:hover{transform:none}.tdemo a:hover em i{transform:none} }
기본 꾸밈전체 화면 슬라이더가 첫 화면을 채웁니다. Salient의 기본 성격이 가장 잘 드러납니다.템플릿 열기→
에이전시작업물을 격자로 늘어놓는 구성. 디자인·영상 스튜디오에 맞습니다.템플릿 열기→
음식점사진을 크게 쓰고 메뉴·예약으로 이어집니다. 카페나 식당에 어울립니다.템플릿 열기→
앱·서비스한 페이지로 끝나는 소개형. 기능 설명과 다운로드 버튼이 중심입니다.템플릿 열기→본보기 사이트 전체는 Salient 공식 사이트에서 보실 수 있습니다. 업종별로 수십 종이 준비되어 있습니다.
Salient 테마, 무엇을 할 수 있나요
| 기능 | 하는 일 |
|---|---|
| Nectar 슬라이더 | 전체 화면 슬라이더가 테마에 내장되어 있습니다. 별도 슬라이더 플러그인이 필요 없습니다. |
| 스크롤 연출 | 요소마다 나타나는 방식을 체크 한 번으로 켭니다. 플러그인을 붙이지 않아도 됩니다. |
| 포트폴리오 | 작업물을 격자·모자이크·슬라이드로 보여줍니다. 필터도 붙일 수 있습니다. |
| 헤더 옵션 | 투명 헤더, 스크롤 시 고정, 좌측 세로 메뉴 등 형태를 설정으로 바꿉니다. |
| Nectar 요소 모음 | 카운터, 분할 화면, 아이콘 박스, 타임라인 등 완성된 요소를 골라 넣습니다. |
| WooCommerce 지원 | 쇼핑 기능이 필요하면 상품 화면 디자인까지 함께 제공됩니다. |
| 페이지 빌더 | WPBakery 기반이라 화면에서 끌어다 놓는 방식으로 페이지를 만듭니다. |
| 본보기 사이트 가져오기 | 업종별 완성 사이트를 통째로 가져와 내용만 바꿉니다. |
로고부터 포트폴리오까지 손볼 곳
① 본보기 사이트부터 가져오기
Salient는 본보기 사이트를 통째로 가져오는 방식입니다.
- 설치는 업종별 완성 사이트를 통째로 가져오는 데서 시작합니다. 기존 설정을 덮어쓰니 운영 중인 사이트라면 저희에게 맡겨 주시면 안전하게 진행해 드립니다.
- 목록에서 원하는 본보기 사이트를 고르고 Install을 누릅니다. 위 갤러리에서 봐 두신 것을 고르시면 됩니다.
- 필수 플러그인을 먼저 설치하라는 안내가 뜨면 전부 설치합니다.
- 10~20분 걸립니다. 사진과 슬라이더가 많아 다른 테마보다 오래 걸립니다.
② 로고·색상·글꼴 바꾸기
- Salient → General Settings → Logo에서 로고를 올립니다. 투명 헤더를 쓰신다면 밝은 배경용·어두운 배경용 두 가지를 각각 올리는 칸이 있습니다.
- Salient → Styling에서 주 색상(Accent Color)을 바꿉니다. 버튼·링크·강조가 한꺼번에 따라옵니다.
- Salient → Typography에서 글꼴을 정합니다.
Salient의 기본 글꼴은 영문 전용이라 한글이 밋밋하게 나옵니다. Pretendard나 노토 산스 KR로 바꾸시면 훨씬 낫습니다. 설치할 때 한글에서 어긋나는 곳은 저희가 점검해 드립니다.
③ 메뉴 만들기
메뉴는 테마와 상관없이 워드프레스 공통입니다. 외모 → 메뉴에서 만듭니다.
- 새 메뉴 만들기를 누르고 이름을 정합니다(예: 주메뉴).
- 왼쪽에서 페이지나 카테고리를 골라 메뉴에 추가합니다.
- 항목을 드래그해 순서를 바꿉니다. 오른쪽으로 살짝 밀면 하위 메뉴가 됩니다.
- 아래 메뉴 설정에서 표시 위치를 체크합니다.
- 메뉴 저장을 누릅니다.
항목이 많으면 방문자가 고르지 못합니다. 자주 안 보는 페이지는 푸터로 내리세요. 순서는 왼쪽일수록 중요한 것으로 놓습니다.
④ 움직임 조절하기
Salient의 장점이자 함정입니다. 기본값이 꽤 과합니다.
- 움직임은 페이지 전환과 요소별 등장 효과를 따로 끄고 켤 수 있습니다.
- 페이지 전환 효과(Page Transition)를 확인합니다. 부담스러우면 끄거나 Fade로 바꾸세요.
- 요소별 등장 효과는 각 요소의 Animation 항목에서 개별로 켜고 끕니다.
모든 요소가 하나씩 나타나면 스크롤이 답답해집니다. 방문자가 보러 온 건 작업물과 내용입니다. 첫 화면과 중요한 구역 한두 곳만 남기고 나머지는 끄시는 편이 결과적으로 더 좋아 보입니다.
⑤ 포트폴리오 올리기
작업물을 보여주는 게 이 테마를 쓰는 이유라면 여기가 핵심입니다.
- 포트폴리오 → 새로 추가에서 항목을 하나씩 등록합니다.
- 대표 이미지를 넣습니다. 비율이 섞이면 격자가 지저분해지니 전부 같게 맞추세요.
- Portfolio Categories로 분류하면 목록에 필터가 생깁니다.
- 페이지에 Portfolio 요소를 넣고 열 수·필터 표시 여부를 정합니다.
Elementor·속도·한글을 묻는 분들께
Elementor를 쓸 수 있나요
권하지 않습니다. Salient의 본보기 사이트는 WPBakery 기반의 자체 요소(Nectar)에 맞춰 만들어져 있습니다. Elementor를 섞으면 테마의 장점이 사라집니다. 빌더 사용법은 설치에 포함해 안내해 드립니다.
무겁지 않나요
가벼운 축은 아닙니다. 슬라이더·애니메이션·큰 사진이 기본으로 들어 있어서입니다. 다만 안 쓰는 연출을 끄고 사진을 미리 줄여 올리면 체감 속도가 꽤 달라집니다. 캐시와 이미지 최적화는 함께 쓰시길 권합니다.
한글이 깨지지 않나요
깨지지 않습니다. 다만 기본 글꼴이 영문용이라 글꼴과 줄간격만 바꾸시면 인상이 크게 달라집니다. 설치 시 한글에서 어긋나는 곳은 저희가 점검해 드립니다.
포트폴리오 개수 제한이 있나요
없습니다. 다만 수백 개가 넘어가면 목록 화면이 느려질 수 있으니 페이지당 표시 개수를 12~24개로 두고 더보기를 쓰시는 편이 좋습니다.
Salient를 깔기 전에 확인할 것
- 새 사이트나 스테이징 복제본에서 본보기 사이트를 먼저 가져옵니다.
- 포함 빌더와 필수 플러그인의 업데이트·라이선스 방식을 확인합니다.
- 모바일 화면, 글·상품 템플릿과 테마 변경 시 이전 범위를 점검합니다.
구입 전에 Salient 공식 사이트에서 볼 것
기능, 지원 환경과 요금은 바뀔 수 있습니다. 설치 전 공식 홈페이지에서 현재 문서와 변경 내역을 확인하세요. 이 글은 2026년 9월 18일에 다시 검수했습니다.