워드프레스 원페이지 레이아웃 테마

5

들어가며

원페이지 레이아웃과 관련된 질문을 종종 본 적이 있는데요, 원페이지는 해외에서 2~3년 전부터 인기가 시들해지고 있다고 하네요. 그래도 원페이지 레이아웃을 찾는 분들이 계셔서 여기에 몇 가지 테마를 소개해봅니다. 원페이지 레이아웃은 SEO에 안 좋은 영향을 미칠 수 있다고 하니 이런 점을 주의하여 구성하시기 바랍니다. (가령 전면 페이지를 원페이지 레이아웃으로 구성하고 다른 페이지는 일반적인 페이지로 구성하는 것도 한 방법 같습니다.)

대부분의 유명한 인기 테마에서는 원페이지 레이아웃의 데모를 제공합니다. 사실 원페이지 형식으로 레이아웃을 구성하는 것은 그리 어렵지 않습니다. 원페이지 데모를 하나 로드하여 분석해보면 어떻게 구성하는지 쉽게 이해할 수 있을 것입니다.

다목적 테마를 이용한 원페이지 레이아웃 사이트 만들기

예를 들어 오랫동안 판매 1위 자리를 지켜오고 있는 아바다(Avada)의 경우에도 원페이지 레이아웃의 데모를 제공합니다.

아바다의 데모 중에서 Hosting 데모가 원페이지 레이아웃 형식입니다. 첫 페이지(전면 페이지)를 원페이지 형식으로 구현하고 이외에 Support, Blog 등의 링크를 메뉴에 추가한 형식입니다. 다만 첫 페이지 내의 하위 섹션으로 이동하는 것은 메뉴에 추가되어 있지 않습니다만, 원하는 경우 메뉴를 새롭게 구성하여 첫 페이지 내의 하위 섹션으로 이동하도록 만들 수 있습니다.

X 테마는 아바다에 이어 두 번째로 많이 판매되는 테마입니다. 이 테마도 나름대로 좋은 테마 같습니다. X 테마의 Renew 2 데모도 원페이지 구성입니다. 이 데모는 전형적인 원페이지 구성을 보여주고 있고, 메뉴에서 Blog를 제외한 모든 메뉴 항목이 첫 페이지(전면 페이지) 내의 하위 섹션으로 이동하도록 되어 있습니다. Blog를 누르면 메뉴가 다르게 구성되어 있습니다. (“X Theme 테마와 데모 설치하기” 참고)

Enfold 테마에서도 마찬가지로 원페이지 구성을 데모로 제공합니다. 데모 이름에 “One Page”를 추가하여 쉽게 알아 볼 수 있도록 했네요.

Salient도 판매 Top 10에 드는 테마로서, 괜찮은 기능을 제공하는 테마입니다. 이 테마의 Classic All Purpose 데모를 확인해보면 첫 페이지(전면 페이지)가 Parallax 효과가 적용된 원페이지로 구성되어 있습니다.

Onepage Parallax에 특화된 테마 이용하기

위와 같이 인기 있는 다목적 테마(Mulit-purpose themes)을 사용하여 쉽게 원페이지 레이아웃을 구성할 수 있습니다. 또 다른 방법으로는 Onepage Parallax 효과를 제공하도록 특화된 테마를 사용하는 것도 가능합니다. 이런 종류의 테마로서 인기 있는 테마가 Jarvis, 907, SCRN, Patti과 같은 테마가 있습니다.

Jarvis 원페이지 Parallax 테마

Jarvis - 원페이지 패럴랙스 테마

Jarvis는 One Page parallax 테마 중에서 최고의 판매를 보이는 테마입니다. 원페이지 레이아웃의 홈페이지(데모)를 12가지 이상 제공하고 있습니다. (데모 페이지를 확인해보면 10개 정도만 표시되어 있네요.)

Jarvis는 다국어 번역 플러그인인 WPML, 쇼핑몰 플러그인인 우커머스, WPMU 등과 호환되고, Contact Form 7을 지원합니다.

Jarvis에서 제공하는 데모를 활용하여 다양한 구성의 원페이지 레이아웃의 사이트를 만들 수 있습니다.

자세한 내용과 데모는 Jarvis 테마 사이트에 확인할 수 있습니다.

HyperX – 깔금하고 모던한 프리랜서 및 에이전시를 위한 포트폴리오 테마

HyperX - 프리랜서와 에이전시를 위한 포트폴리오 테마

Hyper-X는 심플하고 사용하기 편리하며 깔끔하고 모던한 테마로서 포트폴리오형 테마입니다. 하지만 이 테마는 다양한 데모를 제공하고 특히 원페이지 레이아웃으로도 구성이 가능합니다. 이 테마에 대해서는 이 글에서 자세히 살펴볼 수 있습니다.

907 – 반응형 워드프레스 원펭지ㅣ – 멀티 원페이지 Parallax

907-One-Page-Theme

907은 원페이지 테마로서는 Jarvis에 이어 두 번째로 많이 판매되는 테마로 테마 가격이 49달러(2016년 9월 초 현재 기준)로 조금 저렴한 편입니다. 비주얼 컴포저가 기본 탑재되어 있고 다국어 번역 플러그인인 WPML과 호환됩니다.

현재 13가지 데모를 제공하고 있습니다.

  • GYM(체육관) 데모
  • Drone(드론) 데모
  • Construction(건설) 데모
  • Barbar 쇼핑몰 데모
  • APP 데모
  • Photography(사진) V2 데모
  • Adventure 데모
  • Designer 데모
  • Photography(사진) 데모
  • Single Property(부동산) 데모
  • Creative 데모
  • Creative V2 데모
  • Freelancer(포트폴리오) 데모

907 테마 사이트에서 자세한 내용과 데모를 확인해볼 수 있습니다.

SCRN – 반응형 원페이지/싱글 페이지 포트폴리오

SCRN

SCRN은 원페이지 반응형 포트폴리오 워드프레스 테마로서 개인 자굼 또는 사업체를 홍보하는 데 적합합니다. 이 테마는 모든 현대식 모바일 장치와 호환됩니다. 미니멀한 단일 페이지 디자인 외에 블로그도 제공합니다. 이제 포트폴리오에서 동영상(비디오)도 제공한다고 하네요.

SCRN은 39달러(2016년 9월 초 기준)로 더 저렴하네요. IE8부터 호환되고 WPML과도 호환된다고 합니다. 이 테마에 대한 자세한 내용과 데모는 SCRN 테마 페이지를 참고해보시기 바랍니다.

Patti – Parallax 원 페이지 워드프레스 테마

Patti - 워드프레스 원 페이지 테마

괜찮은 판매를 보이는 또 다른 원페이지 테마인 Patti는 사용자 평가면에서 4.85(5.0 만점)로 매우 높은 편이고 가격도 44달러(2016년 9월 초 기준)로 저렴한 편입니다.

Patti는 모던하고 우아한 원페이지 워드프레스 테마로서 크레이에이티브한 사용자에게 완벽한 테마입니다. 모든 종류의 비즈니스에 적합합니다. 모든 세부 사항이 주의를 기울어 디자인되어 완벽하고 멋진 사용자 경험을 만들어냅니다.

슬라이더 레볼루션비주얼 컴포저가 포함되어 있으며 다국어 플러그인인 WPML 및 우커머스(WooCommerce)와 호환됩니다.

실제 데모를 보면 깔끔하면서도 거의 모든 기능이 다 포함되어 있네요. Patti에 대한 자세한 내용과 데모는 플러그인 페이지를 참고해보시기 바랍니다.

OneUp – 원페이지 Parallax 레티나 워드프레스 테마

OneUp - 원페이지 워드프레스 테마

OneUp은 모든 종류의 크리에이티브 또는 비즈니스 용도로 적합한 반응형 HTML5 레티나 지원 원페이지 워드프레스 테마입니다. 반응형 트위터 브트스트랩(Twitter Bootstrap) 프레임워크에 기반을 둔 이 테마는 모바일과 데스크톱 플랫폼 모두에 최적화되어 있습니다. 이미지 레이지 로딩(Lazy-loading; 지연 로드)과 필요한 모든 스크립트 압축을 사용하므로 웹사이트가 훌륭해보일 뿐만 아니라 매우 빠른 속도를 보인다고 합니다.

IE 8부터 지원하는 것으로 명시되어 있습니다. 자세한 내용과 데모는 OneUp 테마 페이지를 참고하시기 바랍니다.

참고: Bootstrap 사용에 대해서는 논란이 있으므로 여러 가지 측면을 고려하여 결정하면 좋을 듯 합니다. “5 reasons NOT to use Twitter Bootstrap(트위터 부트스트랩을 사용해서는 안 되는 5가지 이유)“을 참고해보세요. (어떤 글에서는 디자이너가 없고 자금 여력이 없는 스타트업이 아니라면 사용하지 않을 것을 권장하기도 하네요.)

Visia – 반응형 원 페이지 워드프레스 테마

Visia---Responsive-One-Page-Retina-WordPress-Theme

Visia는 완전한 반응형의 원 페이지(단일 페이지) 워드프레스 테마로 레티나를 지원하고 별도의 블로그 섹션을 제공합니다. 이 테마는 모든 종류의 크리에이티브 또는 비즈니스 용도로 적합합니다. 모바일 및 데스크톱 플랫폼 모두에 최적화되어 있습니다. Visia는 이미지 자산을 지연 로드하고 필요한 모든 스크립트를 압축하므로 웹사이트가 훌륭해보일 뿐만 아니라 매우 빠른 속도를 보인다고 합니다.

이 테마는 IE 8부터 지원하고 다국어 플러그인인 WPML과 호환됩니다(참고로 다국어 사이트를 운영하려는 경우 WPML 호환 여부를 확인하면 좋습니다).

자세한 내용과 데모는 Visia 테마 페이지를 참고하시기 바랍니다.

마치며

워드프레스 사용법에 익숙한 경우 마음에 드는 적당한 다목적 테마(예: 아바다, Enfold)를 선택하여 만들거나 Jarvis와 같이 원페이지에 특화된 테마를 선택하여 이용하는 것도 한 방법 같습니다. 개인적으로는 심플한 것을 좋아하기 때문에 원페이지 구성을 별로 선호하지 않지만 크레에이티브한 사이트를 구축하거나 하는 등 강렬한 효과를 주거나 페이지를 벗어나지 않고 한 페이지 내에서 중요한 정보를 제공하고자 할 때 유용할 것 같습니다.

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

5개 댓글
  1. Matthew

    One page 사이트는 한 2-3년 전 부터 한물 갔구요, 요즘은 앱을 제공하는 경우가 아니면 거의 사용되지 않습니다.

    저도 5년전쯤 hackya.com 의 일부분을 one page 로 구축하기도 했었는데, SEO 에 상당한 악영향을 끼칩니다.

    https://www.katetooncopywriter.com.au/5-reasons-why-single-page-websites-are-bad-for-seo/

    요즘은 one page 사이트가 언급되는 경우도 거의 없는데,

    “최근 들어 원페이지 형식으로 사이트를 구성하는 경우를 많이 봅니다. 일종의 트렌드같습니다.” 라고 하신 말씀은 아마 한국어 사이트가 이런가 봅니다.

    훔.. 그런데 한국도 대기업 사이트들 (네이버 나눔폰트 사이트 처럼) 이 몇년전 one page 사이트 구축을 잠깐 해보다 말았고, 요즘은 전혀 안하는데….

    어디서 one page 사이트들을 많이 보셨는지 궁금합니다.

    워드프레스 쪽에서는 언급하신 Jarvis 테마가 거의 one page 테마 끝물이었는데 Jarvis 가 나온게 대략 4년전쯤 이었거든요…

    1. Word

      그런가요?
      최근 들어 이런 원페이지 레이아웃과 관련하여 질문이 많아서 그런 줄 알았더니 요즘은 시들해진 모양이네요.
      내용을 수정하도록 하겠습니다.

      1. Matthew

        아마 개인분들이시겠죠. 한국으로 정보전달이 3-4년 정도 지연되서 전달되거든요. 그래서 웹 트렌드 나 유행 같은게 전달되는데 그정도의 시간차가 존재합니다.

      2. Word

        그럴 수도 있을 수도 있고 아니면 개인 취양일 수도 있겠네요.

        최근에 Bootstrap에 대한 질문이 올라와서 저는 사용하지 않는 것이 좋겠다고 했더니 다른 분이 Bootstrap을 사용하는 것이 좋을 수도 있다고 하니까 결국 질문하신 분이 사용하는 쪽으로 선택을 하더군요.

        원페이지 구성을 꼭 원한다면 메인 페이지는 원페이지 형식으로 구성하되 개별 페이지도 별도로 구성하여 연결하고 블로그도 포함시키고 하면 어떨까 하는 것이 개인적인 생각입니다.

      3. Matthew

        이런거는 워드님이 개발경험이 없으셔서 잘 모르시는 부분인데요, 의뢰자 분들 중, “답정너” 란 분들이 상당히 많습니다. 저도 정확한 의미는 모르지만, “답정너” 가 답은 정해져 있으니 너는 답만하면되 였던가…

        암튼, 자기가 원하는걸 만들어 주길 원하시는 의뢰자분들이 대다수 입니다.

        부트스트랩이 좋으시다구요? 그럼 부트스트랩을 사용해서 사이트를 만들면 되는 겁니다.

        그렇게 해서 7-8초 만에 로딩되는 사이트가 만들어지면? (대한민국 대부분의 워드프레스 기반 쇼핑몰이 이정도의 속도로 로딩됩니다.) 로딩속도가 느려서 사이트가 활성화 되지 않겠죠? 그럼 의뢰자는 그때가서

        아, 로딩속도가 느려서 사이트가 활성화 되지 않는구나 라고 파악하는 의뢰인도 계실거고,

        다시 사이트가 빨리 로딩되게 의뢰를 한다면, (본인이나 다른 개발자에게 하겠죠?) 그때가서 다시 부트스트랩을 빼고 사이트 구축을 하면 되는 겁니다.

        이런 경우가 생각보다 많습니다.

        중요한 점은, 개발자가 이런 의견을 의뢰인에게 알릴 필요가 없는겁니다. 왜? 답정너니까요.

        ‘아, 이인간 내가 부트스트랩을 쓰겠다는데, 참 말 많네.” 이러고 부트스트랩을 사용하겠다는 다른 개발자에게 찾아가는거죠.

        워드님이 잘못 생각하시는 건, 본인의 의견이 중요하다고 착각하시는 겁니다. 개발을 해달라고 하면 개발을 해줘야지, 거기서 컨설팅해주려고 하면 안되는 겁니다. 왜냐하면 고객은 항상 옳거든요. 고객은 항상 개발자 보다 더 전문가거든요.

        개발자는 의견을 가질 필요가 없습니다. 그냥 만들어 달라는거 만들어 주는게 개발자 입니다.

        *물론 컨설팅 의뢰가 들어오면 컨설팅을 하죠.

        컨설팅 해달라고 하면 컨설팅 해주고, 개발해달라고 하면 개발해주고. 그럼 끝!!!

댓글 남기기