'2017/05'에 해당되는 글 2건

  1. 2017.05.19 부트스트랩에 대해서 (2)
  2. 2017.05.18 반응형 홈페이지란? (2)

안녕하세요!
오늘은 반응형 홈페이지를 제작하기 위해서 부트스트랩에 대해 먼저 알아보겠습니다.

부트스트랩의 등장 이유는 개발이 진행될 때 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 개발을 시작할 때 미리 어느 정도의 표준을 정해서 진행하는 경우가 많이 있습니다. 그러나 이런 작업이 진행되지 않은 경우 각 개발자의 소스코드 작성 형태 등이 제각각이기 때문에
디자인까지 달라질 수 있죠. 이런 경우 심지어는 다시 작업에 들어가기도 합니다.
트위터의 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)은 이러한 다른 생각과 환경에서 오는 여러가지 어려운 점을 개선하기 위해서 정형화된 인터페이스를 만들었습니다. 처음에는 주말과 가외 시간을 이용해서 1년동안 작업한 후 다른 개발자들에게 선보였는데 반응이 좋아 많은 개발자들이 사용하기 시작했고 후에는 하나의 프레임워크 형태로 발전했습니다.

아래 사이트에서 정보를 자세하게 얻을 수 있습니다.
http://twitter.github.com/bootstrap/

http://getbootstrap.com/

부트스트랩이란 ??
부트스트랩은 쉽게 말해 CSS와 자바스크립트로 이루어진 라이브러리라고 할 수 있습니다.
보통 웹 개발을 할때 웹디자이너나 프로그래머가 css, 자바스크립트를 만들어서 사용하게 되는데요. 미리 CSS와 자바스크립트를 어느 정도 만들어 배포하는 거죠. CSS와 자바스크립트로 사전 디자인 작업이 되어 있기 때문에 HTML을 이용해서 웹페이지의 뼈대를 만들고 이 부트스트랩을 이용해서 미리 정의된 스타일시트를 이용하면 쉽게 화면 레이아웃 요소들을 정할 수 있게 됩니다.
부트스트랩의 스타일시트는 약 6500 ~ 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있다는 장점이 있어 큰 인기를 얻고 있습니다.
부트스트랩의 스타일시트는 디자인 작업을 쉽게 할 수 있도록 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리입니다. 위와 같은 버튼 뿐만 아니라 form에 사용되는 각종 태그, 아이콘, 드랍다운 메뉴 등 웹페이지에 사용되는 모든 요소에 대해서 스타일시트를 미리 만들어 놓고 HTML 페이지의 태그에 적용한다면 부트스트랩에 지정된 디자인으로 웹페이지가 자동으로 만들어지도록 해놓은 것이죠.

부트스트랩의 장점
글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있습니다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 엇비슷한 디자인이 뚝딱 만들어집니다. 거기다 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원합니다. 이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없습니다.
거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있습니다. 즉 반응형 웹 디자인을 지원한다는 의미입니다. 거기다 이게 오픈소스 입니다.

부트스트랩의 단점
단점은 디자인이 정형화 되어 있다 보니 비슷한 디자인의 페이지가 양산될 수 있다는 것입니다. 그러나 이건 오픈소스의 힘으로 극복이 가능합니다. 오픈소스이다 보니 사용자가 커스터마이징 하는 것도 자유롭고, 이 커스터마이징 한 것을 재배포해도 됩니다. 심지어는 상업적으로 판매하는 것도 허용합니다.
하지만 우리나라에서는 심플한 디자인보다는 이미지를 많이 쓰는 화려한 디자인을 선호하는지라 부트스트랩으로 만드려면 소스를 처음부터 뜯어 고치다시피 코딩을 해야하다보니 아무래도 아직은 많이 선호하고 있지는 않은것 같습니다. 그리고 이외에도 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다는 것입니다. 이 때문에 HTML5가 제대로 지원되지 않는 IE7,8의 경우에는 강제로 HTML5를 인식시키는 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 됩니다. 결국 이 때문인지 3.0에서는 IE8부터 정식 지원합니다.

아래 사이트는 부트스트랩을 배울수 있는 사이트입니다.
http://bootstrapk.com/

저 역시 비슷한 내용을 토대로 설명을 드리겠지만 위 사이트에서 부트스트랩을 먼저 만나보시길 바랍니다.

그럼 다음 포스팅에서는 간단한 반응형 페이지를 한번 제작해보겠습니다.
읽어주셔서 감사합니다.

 

'반응형웹' 카테고리의 다른 글

부트스트랩에 대해서  (2) 2017.05.19
반응형 홈페이지란?  (2) 2017.05.18
Posted by 진격의 파파

댓글을 달아 주세요

  1. 2017.06.02 14:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. alisyabob 2019.09.08 21:57 신고  댓글주소  수정/삭제  댓글쓰기

    퍼가도 될까요?

안녕하세요!
반응형 홈페이지 제작관련 블로그를 발행해보려 메뉴를 하나 만들었습니다.

저는 지금 홈페이지 제작 사업을 하고 있습니다. 사실 홈페이지 제작사업 홍보를 목적으로 블로그 포스팅을 하는것은 아니지만 조금이라도 도움이 되었으면 하는 바램은 있습니다 ^^;;

요즘 홈페이지 만들어지는것을 보면 보통 반응형 홈페이지로 제작을 많이 진행하고 있습니다.
업체를 방문해보면 사실 반응형 홈페이지에 대해서 모르시는 분들이 대부분입니다. 그래서 항상 아래 내용들을 설명드리고 있습니다.

 

 

반응형 홈페이지란 쉽게 설명드리면 해상도 즉 PC, 태블릿, 모바일 마다 화면의 크기가 틀린데 어떤 기기의 화면에 따라 자동으로  반응하여 사이즈를 조절해주는 홈페이지를 말합니다.  아래 이미지를 보시면 더 이해가 될것입니다.

위 이미지는 PC 화면, 태블릿 화면 그리고 모바일 화면에 보여지는 모습을 보여줍니다.
이미지라던지 텍스트, 내용 등이 화면의 사이즈에 맞추어서 보여지게 됩니다. 이러하게 구성되는 홈페이지를 반응형 홈페이지라고 칭합니다.

모바일 점유율이 날이면 날마다 높아지고 있는데 예전에 만들어진 홈페이지를 모바일로 검색하여 보면 알겠지만 두 손가락을 이용해 사이즈를 줄였다 늘렸다 하면서 보아야 하는 불편함이 있죠. 그래서 요즘 만들어지는 홈페이지들을 보면 모바일에서도 최적화되는 반응형 홈페이지를 주로 구축을 하고 있습니다. 그렇기때문에 반응형 홈페이지의 중요성이 점점 더 높아지고 있습니다.

아무튼!!!
오늘 포스팅은 반응형 홈페이지가 무엇인지에 대해서 알아보았고 다음 포스팅부터는 반응형 홈페이지 구축 방법에 대해서 슬슬 설명을 해볼까 합니다.

오랜만에 글을 쓰니 두서없이 막 써내려간듯하네요.. 너그럽게 이해바랍니다. ^^;

'반응형웹' 카테고리의 다른 글

부트스트랩에 대해서  (2) 2017.05.19
반응형 홈페이지란?  (2) 2017.05.18
Posted by 진격의 파파

댓글을 달아 주세요

  1. cho 2017.05.18 21:18  댓글주소  수정/삭제  댓글쓰기

    아하 그렇군요! 저근데 혹시 실례가 아니라면 초대장좀 yoonseho6234@naver.com으로 보내주셧으면 정말 감사하겟습니다..ㅠㅠ

  2. 긴기연 2017.09.19 21:02  댓글주소  수정/삭제  댓글쓰기

    50대 후반의 그래픽디자인너입니다.
    쉽고 이해하기 좋게 꾸며주셔서 많은 도움되었습니다