개발자가 아닌 나에게 부트스트랩

개발자가 아닌 입장에서 부트스트랩을 내 입장에서 적어보려 한다.

 

이 블로그 스킨을 부트스트랩 버전 5에서 기존의 버전 3으로 다시 돌아갔다. 지금 부트스트랩 최신 버전은 5.2 베타 1이다. 참고로 부트스트랩 영어 홈페이지를 방문하면 최신 버전을 알 수 있다. 

 

전에 2013년 8월에 발표된 부트스트랩 버전 3으로 만든 스킨을 사용했다. 부트스트랩 버전이 업데이트될 때마다 이 블로그 스킨도 최신 버전으로 변경해야겠다고 생각했지만 그게 쉽지 않았다. 대신 부트스트랩이 업데이트가 될 때 내가 만든 다른 티스토리에서 부트스트랩 버전 4, 5를 테스트했다. 

---

 

장점

 

내가 부트스트랩 버전 2를 별로 사용하지 않고 3을 오랫동안 사용했다. 부트스트랩을 사용하면서 느낀 점은 정말 간단히 반응형 홈페이지를 만들 수 있다는 것이다. 부트스트랩 라이브러리에 모든 것이 정의됐기 때문에 HTML, CSS, 스크립트를 전혀 몰라도 정의만 해주면 멋진 요소를 만들 수 있다.

 

첫 번째 예로 버튼인 경우 아래와 같이 부트스트랩 CSS에 정의됐기 때문에 부트스트랩 문법만 알면 아래 형태를 간단히 만들 수 있다. 아래는 부트스트랩 버전 5이고 며칠 전 이 블로그에서 부트스트랩을 사용할 때 적었기 때문인데 아래처럼 나온다. 5에서는 3에 없는 secondary, dark, light가 추가됐다. 그러니 버튼에서 회색이 된 것이다. 현재 이 블로그는 3을 사용 중이다. 

 

 

 

두 번째 예로  부트스트랩에서는 크기, 색, 애니메이션이 추가된 진행 바로 아래와 같은 진행 바를 아주 쉽게 추가할 수 있다. 아래와 같은 것을 대단히 만드는 것이 힘들 것 같지만 부트스트랩 문법만 알면 간단히 만들 수 있다. 버전 3과 달리 5에서 많은 특징을 사용할 것이라 기대했는데 다시 3으로 돌아가 아쉽다.

 

 

 

 

세 번째 예로 아래와 같은 캐러셀인 경우 스크립트를 몰라도 부트스트랩 스크립트(JS)에 정의됐다. 그러니 문법만 간단히 만들 수 있다. 아래는 버전 3의 캐러셀이 다르고 이 글을 처음 적었을 때 5의 캐러셀을 추가했는데 수정했다. 참고로 새로 추가된  부트스트랩 홈페이지를 방문하면 오프캔버스, 아코디언 등 다양한 스크립트를 볼 수 있다. 참고로 수정하면서 캐러셀에 AOS라는 스크롤 애니메이션을 추가했고 스크롤 애니메이션은 부트스트랩 기능이 아니다.

 

 

1.  
2.  
3.  

First slide : Lorem Ipsum is simply dummy text of the printing and typesetting industrye

Second slide : Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Third slide : t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged

Previous Next

 

 

반응형 홈페이지를 만들기 위해 미디어쿼리 등 용어도 읽힐 필요 없이 부트스트랩에서 하라는 대로 하면 간단히 반응형 웹페이지를 만들 수 있다. 또한 많은 무료 부트스트랩 템플릿을 사용하면 멋있는 반응형 템플릿은 간단히 만들 수 있다.

 

---

단점

 

부트스트랩을 사용하면 장점만 있는 것은 아니다. 모든 것에는 장점이 있다면 단점은 따라오기 마련이다. 만약 버튼을 만든다고 간단히 부트스트랩에 기본으로 정의된 것을 사용하려고 한다. 굳이 어렵게 HTML, CSS, 자바스크립트를 사용하여 멋있는 것을 만들고 싶지 않게 된다. 내가 부트스트랩을 사용하면서 느꼈다.

 

 

부트스트랩으로 만든 홈페이지인 경우는 거의 비슷한 경우가 많다. 내가 블로그를 다루니 COM, NET, KR 등의 주소를 사용하지 못하는 네이버, 다음 등의 블로그를 방문하면 어떤 블로그인지 바로 알 수 있다. 반면에 개인 도메인을 허용하는 티스토리를 포함한  워드프레스, 구글 블로그 등은 알 수 없다. 즉, 대부분은 부트스트랩을 사용한 홈페이지를 보면 무엇으로 만들었는지 알 수 있다.

 

 

부트스트랩 테마를 배포하는 웹디자이너 홈페이지를 보면 부트스트랩 테마는 부트스트랩에서 제공하는 스크립트만이 아닌 다양한 스크립트로 독특하게 만든다. 부트스트랩으로 만들었다는 느낌이 안 난다. 처음 이 블로그를 부트스트랩 버전 3으로 만들었을 때 부트스트랩 느낌이 났다. 

 

위에서 설명한 슬라이드인 캐러셀을 부트스트랩에 있는 것을 사용하는 것이 아닌 다른 스크립트를 사용한다. 그러면 부트스트랩이라는 느낌이 퇴색될 것이다.  

 

 

이 문제를 해결하기 위해 HTML, CSS, 스크립트를 배우지만 부트스트랩에 빠지면 쉬움의 유혹은 벗어나기 힘들다.