워드프레스용 트위터 Bootstrap 테마 10선

Bootstrap은 Twitter 개발자인 MarkJacob에 의해 시작된 프로젝트로 현재 많은 인기를 얻고 있는 front-end 웹 개발 오픈소스 프레임워크입니다.

Mark는 Bootstrap을 아래와 같이 설명하고 있네요.

At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. “by Mark”

이번 포스트에서는  Bootstrap에 대해 간략히 소개하고 Bootstrap을 사용한 워드프레스 테마도 소개하겠습니다. 


BootStrap 소개

위에서도 언급했지만 Bootstrap은 Mark와 Jacob에 의해 트위터 내부에서 프로젝트로 시작되었습니다. 이 프로젝트는 트위터 초기 개발자들의 일관성 없는 front-end 개발(간단히 말해 우리 눈에 보이는 화면을 구성하는 개발입니다.)에서 비롯되었죠.

일관성은 팀워크에서 매우 중요한 역할을 합니다. 일관성 없이 일을 진행하면 처음에는 어떻게든 굴러가겠지만 시간이 흘러 수정과 관리가 필요할 때 어려움을 겪을 수 있죠.

예를 들어 착한 워드프레스 블로그(이하 착워블)에서는 일관성을 유지하기 위해 기본적으로 동일한 템플릿위에서 자유롭게 포스팅을 하고 있습니다. 만일 기본 템플릿이 없다면 글을 읽는 방문자들에게 혼란을 줄 수 있고 훗날 포스팅의 템플릿을 변경할 때에도 문제가 발생할 수 있겠죠.

By nerds, for nerds.

nerds는 보통 괴짜들을 일컫는 말입니다. 조금 더 직설적으로 표현하면 “찌질이”입니다. 그런데 찌질이도 두 분류가 있죠. 겉과 속이 모두 찌질한 사람들과 일반인의 눈에만 찌질하게 보이나 개발이나 특정 분야에 있어서는 타의 추종을 불허하는 사람들입니다. 여기서는 후자를 의미하겠죠.

bootstrap1
Bootstrap은 오픈소스로 현재 GitHub(많은 nerds가 서식(?)하는 곳입니다.)에서 지속적인 개발을 진행하고 있습니다. 혼자하는 것이 아니라 여러 사람들이 개발에 동참하고 있기 때문에 발전 속도 및 가능성이 매우 높죠.

Made for everyone.

Bootstrap은 크로스브라우징이 가능하기 때문에 웹사이트 제작시 브라우져에 따라 다르게 반응하는 걱정을 덜 수 있습니다. 특히 웹계의 골치덩어리 인터넷 익스플로어도 7버젼까지 커버를 한다니 솔깃하네요.
bootstrap2
이 뿐만 아니라 모든 기기(태블릿, 스마트폰 그리고 데스크탑)에서 반응형(Responsive)으로 보여질 수 있습니다.

Packed with features.

12개 열로 화면을 나눠서 자유롭게 화면 구성을 할 수 있습니다. 이는 그리드(grid)라고 불리우며 반응형 웹에서 꼭 필요한 사항이죠. 예를 들어 현재 여러분의 화면에 12개의 열로 웹을 구성했다면 스마트폰에는 1개나 2개의 열로 화면을 구성하여 어떠한 기기에서도 눈 아프지 않게 웹을 볼 수 있도록 도와주는 것입니다.
bootstrap3
이 그리드 구성을 직접 확인해보고 싶으시면 예제 화면으로 이동하셔서 브라우져의 사이즈를 늘렸다 줄였다 해보세요. 이 뿐만 아니라 front-end 개발에 필요한 콤포넌트, 자바스크립트 플러그인, 타이포그래피, 폼 컨트롤, 그리고 web-based Customizer 를 제공하여 여러분이 원하는 웹을 자유롭게 만들 수 있도록 도와줍니다.

Bootstrap을 이용한 워드프레스 무료 테마

Bootstrap for WordPress by @Facens

bootstrap_wp1
자세히 보기 | 데모 보기

StrapPress

bootstrap_wp2
자세히 보기 | 데모 보기

WP-Bootstrap

bootstrap_wp3
자세히 보기

BootstrapWP

bootstrap_wp6
자세히 보기

Roots Theme

bootstrap_wp5
자세히 보기 | 데모 보기

Bootstrap을 이용한 워드프레스 프리미엄 테마

CrossRoad


자세히 보기 | 데모 보기

Zeitgeist


자세히 보기 | 데모 보기

Grandeur


자세히 보기 | 데모 보기

Popular


자세히 보기 | 데모 보기

Accord


자세히 보기 | 데모 보기

마치며

Bootstrap은 많은 장점이 있습니다. 그 중에서 가장 큰 장점은 대중화가 되어간다는 것이죠. 웹에는 다양한 front-end 프레임워크가 존재하지만 대중화가 안된다면 업그레이드가 느려지고 시간이 흘러 사장될 가능성이 높아지기 때문입니다. 이는 워드프레스도 마찬가지죠. 세상에 많은 CMS툴이 있지만 그 중에서 가장 대중화가 되었기에 지속적인 발전 가능성이 보이는 것이죠.

Bootstrap의 인기 이면에는 기술적인 부분과 함께 Twitter라는 백그라운드도 한 몫을 했다고 생각합니다. 인기가 높아지는 만큼 Twitter에서도 꾸준히 마케팅 등에 지원을 하겠죠.

워드프레스 커뮤니티에서는 웹에서 소위 뜬다! 싶은 것들은 바로 바로 테마나 플러그인으로 만들어 주기 때문에 사용자들은 어떤 플랫폼이든 쉽게 접해볼 수 있는 장점이 있습니다. 여러분도 Bootstrap에 관심이 있다면 워드프레스 Bootstrap 테마를 사용해보세요.

그럼 오늘도 즐거운 블로깅 하세요!

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스용 트위터 Bootstrap 테마 10선”에 대한 11개의 생각

  1. 좋은 정보 잘보고 갑니다 감사합니다
    요즘 부트스트랩에 관심가지고 있는데 워드프레스용 테마도 이렇게 많고 멋진줄은 몰랐네요

    1. bootstrap이 front-end 개발의 선두주자로 떠오르면서 워드프레스에서도 많은 테마들이 bootstrap을 사용하고 있습니다. 제가 만든 이 테마도 bootstrap 베이스입니다.

  2. 답변을 주셔서 너무 감사합니다. 한가지 질문을 더하려고 합니다. bootstrap에 테마에 나눔고딕으로 다 바꾸려고 하는데 쉽지가 않아서 기존에 하는 방식과는 차이가 있어서 ㅠ.ㅠ; 죄송합니다.

  3. 질문을 해도 될지 모르겠네요. Boostrap의 한글폰트를 적용하려고 하는데 어떻게 해야하는지 css를 다 찾아보아도 한글폰트 적용할 곳을 찾기가 힘이 드네요

HwangC 에 답글 남기기 응답 취소

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.