Uncode 테마

Uncode 테마 시작하기

오늘은 Uncode 테마 사용법에 대해 소개합니다.

Uncode 테마Undsgn이라는 곳에서 개발 배포하고 있는 프리미엄 워드프레스 테마인데요. 테마포레스트 워드프레스 테마 랭킹에도 상위에 랭크되어 있는 인기 테마 중 하나입니다.

무엇보다 이 테마는 고급스러운 디자인을 가진 다양한 템플릿들을 보유하고 있는 것이 특징인데요. 테마 홈페이지에 접속하여 다양한 데모 사이트들을 확인해 보면 이 테마로 만들 수 있는 다양한 디자인에 눈길이 가게 됩니다.

Uncode 테마 설치하기

하지만 실제로 Uncode 테마를 처음 설치하고서 사이트를 확인해 보면 다음과 같이 빈 화면만 덩그러니 표시되는 것을 확인할 수 있습니다.

어떻게 하면 데모 사이트에 나와 있는 것 같은 고급스러운 디자인의 사이트를 만들 수 있는 걸까요?

우선 필수 플러그인들부터 설치하죠.

Uncode 테마는 다음과 같은 2개의 필수 플러그인 설치가 필요합니다.

  • Uncode Core
  • Uncode WPBakery Page Builder

이 중 Uncode Core는 테마 설치 시에 함께 설치가 되고, 나머지 Uncode WPBakery Page Builder 테마는 유명한 WPBakery Page Builder 플러그인을 Uncode에 맞게 변형한 플러그인으로, 관리자 대시보드 “Uncode > Install Plugins” 메뉴에서 설치하면 됩니다.

이 메뉴에서 보면 그 밖에도 여러 가지 플러그인들이 나와 있는데, 이들 플러그인은 필수 플러그인은 아니기 때문에 그때그때 필요에 따라 선별해서 설치하면 되구요.

자, 이제 필수 플러그인이 모두 설치되었습니다.

DEMO 콘텐츠 설치하기

관리자 대시보드 “Uncode” 메뉴 아래에 있는 “Import Demo”로 가면 아래와 같이 데모 사이트를 임포트시킬 수 있는 기능이 제공됩니다.

여기서 보면 다양한 유형의 임포트(Import) 옵션들이 있는데요.

맨 위의 “Import Demo”는 그야말로 전체 데모 사이트를 한꺼번에 임포트하는 기능이며, 그 아래로 각각 싱글 레이아웃, 메뉴, 테마 옵션, 위젯만 따로따로 임포트할 수 있는 선택지가 나와 있습니다.

만약 Uncode 데모 사이트에 나와 있는 모든 데모들을 전부 임포트하고 싶다면 이 임포트 데모(Import Demo) 기능을 쓰면 됩니다.

하지만 굳이 전체 데모 사이트를 임포트할 필요는 없을 듯 하니, 여기서는 싱글 레이아웃(Single Layout) 임포트 기능을 사용해 보기로 하겠습니다.

Uncode 데모 중 “Blog Grid” 레이아웃을 한번 임포트해 보겠습니다.

관리자 대시보드 “Uncode > Import Demo” 메뉴로 가서 “Import Single Layouts” 버튼을 클릭합니다.

그러면 다음과 같이 레이아웃을 선택하는 창이 열립니다.

여기서 우리가 임포트하고 싶은 레이아웃들만 골라 임포트하면 되는데요. 여기서는 간단하게 우리가 앞서 임포트하기로 선택한 “Blog Grid (Homepage)” 하나만 골라 임포트해 보겠습니다.

그러면 다음과 같이 경고창이 뜨는데요. 이 부분은 일단 무시하고 넘어 갑니다.

기다리라는 메시지와 함께 스피너가 뱅글뱅글 돌아가면 잠시 기다립니다. (이 작업은 이미지 데이터들을 모두 가져오기 때문에 실제로는 시간이 좀 걸립니다)

휴~ 임포트가 완료 되었네요!

이제 관리자 대시보드 “페이지”에 가보면 “Blog Grid” 라는 페이지가 추가된 것을 알 수 있습니다. 임포트가 제대로 되었네요.

이 페이지를 한번 확인해 볼까요? 실제로 페이지를 확인해 보면 기대와는 달리 검은 바탕에 포스트만 달랑 하나 나와 있네요.

포스트 부분이야 우리가 아직 글을 써 올리지 않아서 그런 거라 하더라도 레이아웃이 원래 기대했던 것과 너무 다르지 않나요?

메뉴 임포트하기

아직 메뉴를 임포트시키지 않아 그렇습니다.

그럼 이번엔 메뉴도 한번 임포트해 볼까요?

관리자 대시보드 “Uncode > Import Demo” 메뉴에 가서 “IMPORT MENU” 버튼을 한번 눌러 봅니다.

다시 한번 “CONFIRM” 버튼을 누르면 앞서와 동일한 절차를 거쳐 이번엔 메뉴가 임포트됩니다.

어디 한번 볼까요?

좀전 보다는 훨씬 더 “Blog Grid” 레이아웃의 모습에 가까워 졌군요. 방금 우리는 메뉴만 임포트시켰는데 실제로는 Uncode 테마에서 샘플 포스트까지 같이 임포트 시켰네요. (이 글들은 나중에 삭제하면 되겠죠?)

테마 옵션 임포트하기

이제 마지막으로 테마 옵션까지 한번 임포트해 보기로 하겠습니다.

“Uncode > Import Demo” 메뉴로 가서 “IMPORT OPTIONS” 버튼을 클릭합니다. 다시 한번 “CONFIRM” 버튼을 누르면 잠시 후 임포트가 완료됩니다.

그런 다음, 다시 한번 페이지로 돌아와 확인해 보겠습니다.

어떤가요? 앞서 우리가 설치하려 했던 “Blog Grid” 레이아웃과 비슷해 졌나요?

이런 식으로 Uncode 테마에서는 “Single Layout 임포트” 기능을 이용해 필요한 레이아웃 부분만 가져다 사용하면 별로 어렵지 않게 나만의 사이트를 구성할 수 있습니다.

이 페이지를 메인 화면으로 하고 싶다면, 설정에서 조정해 주면 되구요.(아래 글 참조)

Blocksy 테마에서 메인 페이지 디자인하기

데모 미디어 삭제하기

Uncode 테마의 데모 임포트 기능을 사용하면 데모 사이트의 모든 데이터를 가져와 쓰게 됩니다. 특히 미디어 부분이 그런데요.

데모 사이트(또는 싱글 레이아웃)를 임포트한 다음 대시보드에서 미디어 라이브러리로 가 보면, 데모에서 사용된 모든 이미지들이 전부 임포트된 것을 확인할 수 있습니다.

대체로 이건 우리가 바라는 건 아니죠. 그래서 이 (쓸모 없는) 미디어 파일들은 삭제해 주는 게 좋습니다.

다행히도 Uncode 테마에서 이 기능을 제공합니다. 관리자 대시보드 “Uncode > Import Demo” 화면 맨 하단에 보면 “DELETE DEMO MEDIA”라는 버튼이 있습니다. 이 버튼을 클릭하면 앞서 추가되었던 모든 미디어 파일이 삭제됩니다.

한번 해 보세요!

이것으로 Uncode 테마 사용법에 대해 간단하게 알아 보았습니다. Uncode 테마를 설치하고 테마에서 제공하는 임포트(Import) 기능을 이용하여 사이트 레이아웃을 하나 가져와 설치해 보았는데요.

사실 Unode 테마에는 이 방법 말고도 “와이어프레임(Wireframe)”이라는 방식의 사이트 구성 방법도 제공합니다. 실제로 저는 임포트 방식 보다는 이 와이어프레임 방식을 더 선호하는데요.

이 방법은 지면 관계상 다음 번에 따로 설명 드리도록 하겠습니다.

Uncode 테마, 멋진 테마지만 다루기에 조금 까다로운 테마이긴 합니다. 그렇지만 몇 가지 개념들만 익혀 놓으면 아주아주 편리하게 사용할 수 있는 유연한 테마이기도 하죠.

오늘은 여기까지입니다. 긴글 읽어 주셔서 감사합니다. 🙂

0 thoughts on “Uncode 테마 시작하기”