Android BootStrap(안드로이드 부트스트랩)



부트스트랩(BootStrap)은 웹개발시 좀 더 세련되고 직관적인 컴포넌트를 쉽게 사용하기위한 프레임워크다. 웹개발이나 블로그를 운영중이라는 한번쯤 들어 보거나 사용해보았을 것이다. 웹개발시 필요한 기능이 어느정도 갖추어 졌을 뿐만아니라, 화면 구성요소, 타이포그래피, 양식 입력요소등 많을 기능을 지원한다. 

안드로이드 앱도 이렇게 좀 더 세련된 UI를 쉽게 개발 할 수 있도록 Android BootStrap 이라고 하여 예전부터 꾸준히 다양하게 오픈소스로 개발되고 있다. 그 중 웹 BootStrap의 컨포넌트를 그대로 안드로이드에 적용한 오픈소스를 하나 소개 하겠다.

GitHub: https://github.com/Bearded-Hen/Android-Bootstrap

 

손쉬운 애니메이션, 타이포그래피를 이용한 버튼, 입력창을 제공한다. 커스텀 뷰로 만들어, 개발자는 레이아웃 xml에서 쉽게 추가가능하다.

<com.beardedhen.androidbootstrap.BootstrapButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Default"
    androidbootstrap:type="default"
    androidbootstrap:icon_left="fa-heart"
    android:layout_margin="10dp"
/>

<

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

버튼의 아이콘을 이미지리소스가 아닌 폰트의 벡터 아이콘으로 사용한다. 웹 부트스트랩이 이러한 방법을 사용하는데, 안드로이드에서 동일하게 적용 하고 있다. http://fontawesome.io/icons/에 공개된 아이콘을 모두 사용할 수 있다. 




블로그 마크쿼리 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 기반으로 작성된 글입니다.





부트스트랩기반의 마크쿼리를 적용한 티스토리

반응형 웹을 오픈소스로 공개한 부트스트랩에 대한 많은 관심을 가지고 있었다. jQuery등 내가 모르는 부분이 많아서 티스토리에 적용 해볼까 하다가 여러번 포기 한적이 있었다. 그와중에 또 한번 적용을 시도 해볼려다가 우연히 마크쿼리를 찾게 되었다. 

부트스트랩 기반으로 티스토리, 워드프레스등 다양한 블로그에 스킨을 만들어서 오픈베타를 공개했다. 

마크쿼리 공식홈페이지: http://markquery.github.io

한국어 가이드: http://markquery.kr

스킨 다운로드 GitHub: https://github.com/markquery/tistory-spidersweb

반응형웹으로 바꾸다!

GitHub에서 파일을 다운받은뒤 티스토리에 새로운스킨 등록에서 파일을 등록을 해주면 쉽게 적용이 된다. 

나는 이전 컨텐츠에 코드를 쉽게 보기위해 SyntaxHighlighter를 써왔기 때문에 SyntaxHighlighter를 설치하고, 나눔고딕으로 폰트를 바꿨다. 

반응형 웹인 부트스트랩 기반이기 때문에 브라우저, 디바이스에서 최적화된 UI/UX를 제공 한다.

 – 데스크탑에서 브라우저

– iPad Mini


– 갤럭시 S3

티스토리의 경우 모바일 페이지를 따로 제공을 해주나 마크쿼리 스킨을 이용하게되면 모바일 페이지가 무의미 해진다. 브라우저의 창이나 디바이스의 해상도에 따라 최적의 UI/UX를 제공하기 때문이다. 이런것을 반응형 웹이라고 부른다. 

아직 오픈베타이기 때문에 몇몇 문제점이 나타난다. 물론 부트스크랩이나 마크쿼리 스킨의 문제점으로 보기는 힘들고, 티스토리와의 연동에 문제점들이다. 

1. 반응형 웹은 이미지또한 브라우저의 크기에 따라 줄었다 커졌다한다. 이렇게 반응을 하기위해 이미지 리소스삽입시 <img src=”url”> 태그를 써야되나 티스토리의 글쓰기시 이미지 삽입되는 부분이 태그가 아닌 치환자(?)로 되어 있기 때문에 이미지의 크기가 고정되어 버린다. 이것을 해결 하기위해 모두 img 테그로 변환해야 한다.(지금 이글은 모두 img태그로 변형 했다.) 기존에 이미 작성 해놓은 컨텐츠들을 마이그레이션 해줘야 한다.

2. 메인을 꾸미기위한 홈에디션을 사용시 위의 이미지와 같은 문제점이 발생한다. 홈에디션에서 사용자편집에서 html로 작성을 할 수있어서 이부분은 해결 될 수는 있지만 초보자가 사용하기에는 다소 힘들 수도 있다. 또한 홈에디션 사용시 우측 메뉴들의 구성이 깨지는 문제점이 발생한다.

3. 개발자 블로그이기에 SyntaxHighlighter를 사용이 빈번히 발생하는데 이또한 크기가 고정으로 되는 문제점이 발생한다. 

이런 문제점이 있는것은 당연한것이며, 이런것을 제외하고는 모든것에 만족스럽고 훌륭하다. 그리고 마크쿼리가 추구하는 누구나 쉽게 활용할수 있고 자유롭게 접근 할수 있다는 점이 목표를 이룬것 같다고 생각 한다. 웹디자이너, 개발자 없이도 더욱 멋지고 경쟁력 있는 콘텐츠를 제작가능할 것 같다.