kimsQ Rb 2.0기본형 레이아웃

2014 년 3 월 17 일

킴스큐 개발그룹

기본형 레이아웃의 목적• Bootstrap 사용자라면 누구나 쉽게 이해할 수 있는 마크업• 테마적용 방법론을 제공• 커스터마이징을 위한 방법론 제공• 국내외 사용자들을 포괄할 수 있는 가장 기본적인 레이아웃

• 데스크탑 ~ 스마트 폰 구간의 반응형웹 지원• Bootstrap 기본 요소만을 사용하여 구성

특징

레이아웃 > 테마

• Easy to Install• Open Source• Modular

http://bootswatch.com/

특징

http://www.bootstrapzero.com/

아래의 디자인템플릿활용하여 다양한 확장 레이아웃 양산테마 참조

레이아웃 ( 헤더 , 풋터 , 메뉴 ) 이외에 게시판 , 블로그 , 위젯 , 모듈의 스타일 전체 영역에 영향을 줌

http://bootswatch.com/yeti/

yeti 테마

3rd party 테마 적용

A friendly foundation친절한 재단

/rb/layouts/default/_includes/_head.import.php

3rd party 테마 적용

http://bootswatch.com/united/

united 테마Ubuntu orange and unique font우분투 오렌지와 독특한 글꼴

http://bootswatch.com/superhero/

Superhero 테마The brave and the blue용감하고 블루

3rd party 테마 적용

http://bootswatch.com/spacelab/

Spacelab 테마Silvery and sleek빛과 매끄러운

3rd party 테마 적용

http://bootswatch.com/slate/

Slate 테마

3rd party 테마 적용

Shades of gunmetal gray건메탈 회색 음영

http://bootswatch.com/simplex/

Simplex 테마Mini and minimalist미니 미니멀

3rd party 테마 적용

http://bootswatch.com/readable/

Readable

Optimized for legibility가독성을 위해 최적화

3rd party 테마 적용

http://bootswatch.com/lumen/

LumenLight and shadow빛과 그림자

3rd party 테마 적용

http://bootswatch.com/flatly/

FlatlyFlat and modern플랫하고 현대적인

3rd party 테마 적용

http://bootswatch.com/cyborg/

CyborgJet black and electric blue제트 블랙과 전자 파란색

3rd party 테마 적용

http://bootswatch.com/cosmo/

CosmoAn ode to Metro메트로 스타일

3rd party 테마 적용

http://bootswatch.com/cerulean/

CeruleanA calm blue sky진정 푸른 하늘

3rd party 테마 적용

http://bootswatch.com/amelia/

AmeliaSweet and cheery달콤하고 기분좋은

3rd party 테마 적용

2 가지 버전제작• For developer ( 개발자용 – 레이아웃 어드민 없음 )• For user ( 사용자용 - 레이아웃 어드민 있음 )

로그인 레이어

1. 기본 레이어방식2. 페이지 방식3. 모달 방식

메시지 레이어

알림레이어

계정레이어

검색레이어

Bootstrap 전용모바일 전용 레이아웃

kimsQ Rb 2.0

특징1. 터치 기반의 UI 최적화2. 스마트폰과 테블릿 구간의 반응형 웹 지원3. 다양한 테마 지원4. 서랍형 사이드메뉴 네비게이션 제공

서랍형 사이드 메뉴 적용• Bootstrap 기본으로 적용된 토글형 drop 다운 메뉴는 2 차메뉴를

가진 사이트에서는 불편함• 모바일 ~ 데스크탑 구간의 반응형 웹을 지원하는 기본형 레이아웃에서

이미제공되는 nav 와 차별화된 네비게이션의 적용 필요성• 모바일 그리고 터치 환경에가 가장 친숙하고 편리한 네비게이션으로

판단하여 적용함

Drawer 사이드 메뉴 UI 적용

서랍형 사이드메뉴 구현을 위한 플로그인 적용

해결방법

테블릿 사용성 확보

테블릿 사용성 확보

테마

http://bootswatch.com/Bootstrap 기반 3rd party 테마 적용

테마

• 테마는 레이아웃에 포함된 엘리먼트를 포함하여 , 익스텐션 (모듈 , 위젯 , 페이지 ) 에 포함된 모든 엘리먼트에 영향을 줍니다 . 진정한 의미에서 테마로서의 역할이라고 생각됩니다 .

• 테마적용여부는 사용자의 선택이며 , 테마적용을 하지 않으면 , bootstrap 의 기본 스타일이 적용됩니다 .

• 레이아웃 CSS 에서 visual 영역을 테마영역으로 분리하니 , css 코드가 간결해져서 사용자 / 개발자가 해당 코드를 이해하기가 편해졌습니다 .

테마영역

킴스큐 익스텐션이 테마적용의 유연성 및 호환성을 확보하기 위해서는 Css 의 visual 영역은 테마영역에서 처리될 수 있도록 해야함익스텐션 개발시 기본 css 작성시에 에서는 배제해야 하며 boostrap 의 기본요소를 활용한 Html 코딩을 해야만 , 테마적용을 통한 동적인 스타일 변경이 가능합니다 .

Boostrap 의 기본요소만으로도 충분히 모든 종류의 UI 구현이 가능함을 확인

테마적용을 통한 동적인 스타일변경을 위한 전제조건

http://mdo.github.io/code-guide/

테마

테마가 만능은 아닐 것이지만 , 사이트 개발 시 디자인 개발에 효율성을 높혀 줄것으로 생각 .

일반 사용자는 테마를 적용해 본 후 , 내가 원하는 스타일의 테마로 선택하여 사용할 것 입니다 .

고급사용자는 3 가지의 방법이 가능할 것 같습니다 .

1. 내가 원하는 스타일과 유사한 스타일을 적용한후 , customize css 를 작성함 ( _main.css )2. 3rd party 테마를 배제한 후 , 처음부터 나만의 테마를 개발 .3. bootstrap 기본 스타일 기반위에서 customize css (_main.css) 를 작성함

테마 적용의 장점

개별 visual 요소를 제외한 익스텐션 코딩3rd party 익스텐션 간에 스타일 충돌을 방지할 것입니다 .

테마 적용 예시

Boostrap default 테마 Cyborg 테마 cupid 테마

로그인 관련 화면

로그인전 로그인 후로그인 모달

프로필 관련 화면

레이아웃 셋팅

레이아웃 셋팅 영역은 blank 서브레이아웃을 적용함

세부사항 변경 ( 모달 ) 변경여부 알림

kimsQ Rb 2.0포럼 기본형 테마 ( 목록 )

UI 특징• 데스크탑 환경에 최적화 됨 ( 마우스 UI 최적화 )• 스마트폰 ~ 데스크탑 구간의 반응형 웹 지원

기본 마크업 • Media list 요소 사용• http://getbootstrap.com/components/#media-list

사용된 3rd party 플러그인

http://silviomoreto.github.io/bootstrap-select/3/

Bootstrap-select

Select 태그듸 기능과 스타일을 개선함 모바일환경에서의 사용성과 bootstrap 과의 스타일 통합성을 높힘

filtering(카테고리 ) sorting( 정열 ) pager1 페이지출력수

공지글

비밀글

글쓴이아바타

게시물번호

http://getbootstrap.com/javascript/#tooltips

Bootstrap Tooltip 사용

Bootstrap Popover 사용

http://getbootstrap.com/javascript/#popovers

비밀글 처리

Modal 출력

Popover 출력

프로필 페이지

클릭

Mover over 시에 popover 가 실행Click 시에 modal 실행됨

프로필 요약

Page 이동

Mover over 시에 tooltip 이 실행Click 시에 modal 실행됨

특정 게시물에 댓들을 단 사람들

로그인 상태라면 댓글 등록 가능

수정 및 삭제가능

사진첨부

특정 게시물에 좋아요를 한 사람들

Mover over 시에 tooltip 이 실행Click 시에 modal 실행됨

관리자 일때만 출력됨

포럼 테마 일반설정 ( Settings )

포럼 테마 스타일 설정 ( Settings )

레이아웃 테마적용 후 , 포럼의 세부 스타일 조정

http://mjolnic.github.io/bootstrap-colorpicker/

Bootstrap Colorpicker 2.0

• Border color• Hover color• Link color 등

가로형 방향세로형 방향

태블릿에서의 사용성

스마트폰에서의 사용성

포럼모듈 - 테마( 모바일 전용 )

Infinite scroll자동 & 수동

포럼모듈 > 게시판테마 ( 모바일전용 ) > 목록

포럼모듈 - 게시판테마 ( 모바일전용 ) - 게시물 쓰기

포럼모듈 > 게시판테마 ( 모바일전용 ) > 게시물 보기

모달방식 페이지방식 (상단 ) 페이지방식 ( 하단 )

포럼모듈 > 게시판테마 ( 모바일전용 ) > 메인 네비게이션 접근방식

포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록

포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록

포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > filtering

포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > Sorting

포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > Searching