블로그 마크쿼리 v3 기반으로 변경



부트스트랩 기반 마크쿼리를 사용한지도 벌써 6개월정도 지난것 같다. 처음 부트스트랩기반의 블로그를 만들어 보려고 하다 개발자이지만, 웹개발에 많은 지식이 없는 관계로 찾아보다가 마크쿼리를 알게 되었다. 마크쿼리는 다양한 블로그에 부트스크랩을 아주 쉽게 적용 할 수 있도록 커스터마이징하여 레이아웃을 제공한다.

v3로 바꾸면서 고정레이아웃을 사용하자.

이전 마크쿼리 v2에서 레이아웃의 문제점: 풀 레이아웃

– v2에서는 레이아웃을 고정영역이 아닌 풀화면 사이즈로 잡다보니 컨텐츠 이미지를 어떻게 배치 할까 많은 고민이 들었으며, 작은 사이즈의 이미지 또한 문제였다. 어느정도 고정적인 레이아웃으로 잡아야 겠다고 계속 생각 해왔었다. 

가로 고정 1200px로 가로 고정영역을 주자.

– 티스토리 티에디션은 가로 1000px까지만 지원한다. 다음에서도 이정도 사이즈가 평균 사이즈다라는 통계를 바탕으로 최대 크기를 잡았을 거라 생각 한다. 국내 포털이 수많은 데이터를 기반으로 잡은 수치라 믿고 1000px에 사이드메뉴 배치를 한다고 생각해서 1200px로 잡으면 나름 평균적이지 않을까라는 생각을 했다.

 티스토리 티에디션 지원

– 마크쿼리 v2에서는 티에디션이 고정영역으로 지정되어 버려 쓰지 못했다. 대안으로 태터데스크를 사용할 수 있었는데, 뭔가 충돌이 일어나 몇몇 기능이 작동 되지 않는 문제점이 있었다. v3로 넘어 오면서 티에디션이 유연한 사이즈로 바뀌게 되었지만, 1단이 아닌 여러단을 쓰면 부자연스러운 레이아웃 배치가 문제가 있다. 그래도 메인화면을 구성하는게 방문자를 좀 많이 잡아 둘 수 있다는 점에서 만족 해야 겠다. v2에서는 메인페이지를 구성하지 않아 필요한 컨텐츠만 보고 나가버리는 사용자가 대부분이였다. 

 폰트설정기능의 보안점

– 본문에서 폰트 설정을 할수 있는 기능이 생겼으나, 1회성으로 페이지 이동시 다시 초기화 되어버린다. 결론적으로 설정을 저장하지 않는한 이런 기능의 사용빈도는 떨어 질것같다. 

든든한 지원

마크쿼리 커뮤니티 사이트를 통해 다양한 지원을 해준다. 

<

p style=”text-align: center; clear: none; float: none;”>




부트스트랩 Responsive Utility를 이용한 해상도의 최적화된 레이아웃 구성

Bootstrap의 가장 핵심적인 반응형 웹을 구축 할수 있는 기반이 되는  Responsice Utility Classes를 제공한다. 이 class를 이용하면 화면에 크기변경에 따른 Callback을 해주기 때문에, 메뉴를 보였다가 화면이 작을 경우 숨기는등 해상도 변경에 따른 작업을 할 수 있다.


responsive.less에 클래스가 호출 되는 해상도를 정의 할 수 있다. 









































Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible



기본적으로 위의 해상도에 따라 class가 호출 되며, 사용방법은 아주 간단하다. <span>에 특정 해상도로 변했을때 하는 작업을 하면 된다.





phone
tablet
desktop





아래는 실제 코드로 테스트를 해보았다. 아래는 해상도별로 메시지가 바뀐다.


현재 화면은 폰에 최적화 되어있습니다.

현재 화면은 테블릿에 최적화 되어있습니다.

현재 화면은 데크스톱에 최적화 되어있습니다.



언제 사용하기 좋을까?


구글 에드센스 광고를 붙일경우 크기가 고정이기 때문에, 가로로 긴 광고를 붙이면 테블릿이나 폰의 경우에는 짤리게 된다. 이런 경우에 각각의 해상도에 따라서 화면에 최적화된 광고를 넣으면 좋을 것이다. 




이런 식으로 특정 고정된 크기가 있을 경우 해상도 별로 처리하는 경우 많은 도움이 된다.


부트스트랩 2.3.2 기반으로 작성된 글입니다.