안녕하세요. 린치핀소프트 한광희입니다.

 

Themeforest.net 에서 등록된 많은 테마들 중에 부트스트랩 또는 파운데이션과 같은 프레임워크를 이용하여 테마를 제작하는 경우가 많습니다. 특히 파운데이션이나 스켈레톤같은 프레임워크보다 부트스트랩을 이용한 테마의 제작이 조금 더 많은 양상을 보이는 것 같습니다. 부트스트랩, 파운데이션, 스켈레톤 뿐만 아니라 sematic-UI 나 Kendo-UI 등 많은 프레임워크를 이용하여 테마와 플러그인을 제작 할 수 있는데 오늘은 부트스트랩을 이용한 워드프레스 테마 제작에 대한 소개를 합니다.

일단 왜 부트스트랩 또는 스켈레톤,파운데이션과 같은 프레임워크를 이용하여 테마를 제작 할까요? 이에 대한 이유는 일반적으로 웹 서비스 개발시에 프레임워크를 이용하는 이유와 동일하다고 생각합니다(워드프레스 테마 개발이라는 환경에서는 추가적인 이점도 있습니다. 그에 대해서 뒤에서 계속 설명합니다)

 

bootstrap

 

 

 

1.크로스 브라우저에 대한 문제를 최소화 할 수 있다(또는 크로스 브라우저를 위한 최적화 비용을 줄일 수 있다)

 

CSS3 , HTML5, 구형 브라우저(IE)의 특수한 성격등등을 고려하여 대부분의 주요 브라우저에서 원활히 기능을 구현하는 것은 많은 부분에서 개발자의 경험과 실력/지식에 의존합니다. 또한 각 브라우저마다의 테스트와 특수한 예외를 파악하여 예외처리작업을 하는 등의 작업은 항상 시간이 소요될 수 밖에 없는 작업니다. 하지만 프레임워크를 이용하면 이런 부분을 상당 부분 줄 일 수 있습니다.(이런 프레임워크는 최소한 호환이 되는 브라우저의 버전등을 명시하여 놓습니다)

 

 

2.수많은 컴포넌트와 style 속성을 미리 정의하였기에 그를 재사용하여 개발속도를 빠르게 할 수 있다.

 

잘 제작된 프레임워크는 이용자에게 많은 선택권을 줍니다. 그래서 많은 요소와 컴포넌트등을 이용자가 직접 기술할 필요없이 클래스나 html태그를 이용하여 사용 할 수 있습니다. 일예로서 Bootstrap(부트스트랩)의 경우 각 디바이스의 화면 너비에 따라 반응형으로 레이아웃을 구현할 수 있도록 “클래스(Class)”가 다양하게 기술 되어 있습니다. 또한 Form, Panel, Nav 와 같은 웹 서비스에서 자주 사용하는 태그등에 예쁜 디자인을 적용하는 등 웹 서비스 개발에 있어 재사용되는 많은 부분등을 지원하고 있습니다.

추가적으로 부트스트랩의 경우 다른 사용자가 디자인작업을 한 CSS를 테마로 이용하여 색/모양/테마 등을 CSS 파일을 교체하여 빠르게 적용해 볼 수 있습니다.

 

 

3.반응형 웹까지 편리하게 구현해낼 수 있다.

 

css3와 media 태그 등으로 인하여 반응형 웹을 구현하기 쉬워졌습니다. 그렇지만 과거의 웹페이지(반응형이 아닌)와 비교하여 반응형으로 웹 페이지를 제작 하려면 추가적인 프로그래밍이 불가피 합니다. 하지만 프레임워크가 미리 정의해놓은 반응형 옵션을 선택하여 빠르게 개발 할 수 있습니다.

단, 프레임 워크에서 반응형의 기준으로 정해놓은 너비의 기준점과 같은 고유의 특성을 잘 파악하고 있어야 합니다. (예를 들어 부트스트랩 기준 xs 사이즈는 767px 이하의 모든 너비기준을 하나의 영역으로 간주하여 처리합니다.)

요즘 기준에 스마트폰의 너비와 태블릿의 경계가 모호해질만큼 다양한 사이즈의 스마트폰이 출시되는 환경에서 조금 더 사이즈를 세분화하여 처리할 수 있게끔 되어야 할지 모릅니다(이를 위해 추가적으로 media 태그를 기술 할 수 있고, 또는 더 작은 사이즈를 클래스화하여 지원할 수 있도록 하는 라이브러리를 이용하여도 좋은 방법이 될수 있습니다).

 

 

4. 다른 이용자나 고객이 자사가 개발한 테마를 커스터마이징 하기 수월하다.

 

부트스트랩같은 유명 프레임워크는 국외 뿐만 아니라 국내에서도 굉장히 유명한 프레임워크로 많은 프론트엔드 개발자들이 부담없이 사용하고 있는 유명한 기술 중에 하나입니다. 이런 프레임워크를 이용하여 테마를 개발할 경우 테마를 이용하는 고객이나 다른 개발자가 손쉽게 해당 테마를 커스터마이징 할 수 있게끔 환경이 구성된다는 이점이 있습니다. 이는 사실 테마를 구매하여 홈페이지를 제작하는 프리랜서나 에이전시 입장에서는 아주 중요한 사항일 수 있습니다.