Download - 킴스큐 rb 20 사용자영역 스크린샷 들
![Page 1: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/1.jpg)
kimsQ Rb 2.0기본형 레이아웃
2014 년 3 월 17 일
킴스큐 개발그룹
![Page 2: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/2.jpg)
기본형 레이아웃의 목적• Bootstrap 사용자라면 누구나 쉽게 이해할 수 있는 마크업• 테마적용 방법론을 제공• 커스터마이징을 위한 방법론 제공• 국내외 사용자들을 포괄할 수 있는 가장 기본적인 레이아웃
• 데스크탑 ~ 스마트 폰 구간의 반응형웹 지원• Bootstrap 기본 요소만을 사용하여 구성
특징
![Page 3: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/3.jpg)
레이아웃 > 테마
• Easy to Install• Open Source• Modular
http://bootswatch.com/
특징
http://www.bootstrapzero.com/
아래의 디자인템플릿활용하여 다양한 확장 레이아웃 양산테마 참조
레이아웃 ( 헤더 , 풋터 , 메뉴 ) 이외에 게시판 , 블로그 , 위젯 , 모듈의 스타일 전체 영역에 영향을 줌
![Page 4: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/4.jpg)
http://bootswatch.com/yeti/
yeti 테마
3rd party 테마 적용
A friendly foundation친절한 재단
/rb/layouts/default/_includes/_head.import.php
![Page 5: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/5.jpg)
3rd party 테마 적용
http://bootswatch.com/united/
united 테마Ubuntu orange and unique font우분투 오렌지와 독특한 글꼴
![Page 6: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/6.jpg)
http://bootswatch.com/superhero/
Superhero 테마The brave and the blue용감하고 블루
3rd party 테마 적용
![Page 7: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/7.jpg)
http://bootswatch.com/spacelab/
Spacelab 테마Silvery and sleek빛과 매끄러운
3rd party 테마 적용
![Page 8: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/8.jpg)
http://bootswatch.com/slate/
Slate 테마
3rd party 테마 적용
Shades of gunmetal gray건메탈 회색 음영
![Page 9: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/9.jpg)
http://bootswatch.com/simplex/
Simplex 테마Mini and minimalist미니 미니멀
3rd party 테마 적용
![Page 10: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/10.jpg)
http://bootswatch.com/readable/
Readable
Optimized for legibility가독성을 위해 최적화
3rd party 테마 적용
![Page 11: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/11.jpg)
http://bootswatch.com/lumen/
LumenLight and shadow빛과 그림자
3rd party 테마 적용
![Page 12: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/12.jpg)
http://bootswatch.com/flatly/
FlatlyFlat and modern플랫하고 현대적인
3rd party 테마 적용
![Page 13: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/13.jpg)
http://bootswatch.com/cyborg/
CyborgJet black and electric blue제트 블랙과 전자 파란색
3rd party 테마 적용
![Page 14: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/14.jpg)
http://bootswatch.com/cosmo/
CosmoAn ode to Metro메트로 스타일
3rd party 테마 적용
![Page 15: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/15.jpg)
http://bootswatch.com/cerulean/
CeruleanA calm blue sky진정 푸른 하늘
3rd party 테마 적용
![Page 16: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/16.jpg)
http://bootswatch.com/amelia/
AmeliaSweet and cheery달콤하고 기분좋은
3rd party 테마 적용
![Page 17: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/17.jpg)
2 가지 버전제작• For developer ( 개발자용 – 레이아웃 어드민 없음 )• For user ( 사용자용 - 레이아웃 어드민 있음 )
![Page 18: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/18.jpg)
로그인 레이어
1. 기본 레이어방식2. 페이지 방식3. 모달 방식
![Page 19: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/19.jpg)
메시지 레이어
![Page 20: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/20.jpg)
알림레이어
![Page 21: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/21.jpg)
계정레이어
![Page 22: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/22.jpg)
검색레이어
![Page 23: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/23.jpg)
Bootstrap 전용모바일 전용 레이아웃
kimsQ Rb 2.0
![Page 24: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/24.jpg)
특징1. 터치 기반의 UI 최적화2. 스마트폰과 테블릿 구간의 반응형 웹 지원3. 다양한 테마 지원4. 서랍형 사이드메뉴 네비게이션 제공
![Page 25: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/25.jpg)
서랍형 사이드 메뉴 적용• Bootstrap 기본으로 적용된 토글형 drop 다운 메뉴는 2 차메뉴를
가진 사이트에서는 불편함• 모바일 ~ 데스크탑 구간의 반응형 웹을 지원하는 기본형 레이아웃에서
이미제공되는 nav 와 차별화된 네비게이션의 적용 필요성• 모바일 그리고 터치 환경에가 가장 친숙하고 편리한 네비게이션으로
판단하여 적용함
![Page 26: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/26.jpg)
Drawer 사이드 메뉴 UI 적용
서랍형 사이드메뉴 구현을 위한 플로그인 적용
![Page 27: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/27.jpg)
해결방법
테블릿 사용성 확보
![Page 28: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/28.jpg)
테블릿 사용성 확보
![Page 30: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/30.jpg)
테마
• 테마는 레이아웃에 포함된 엘리먼트를 포함하여 , 익스텐션 (모듈 , 위젯 , 페이지 ) 에 포함된 모든 엘리먼트에 영향을 줍니다 . 진정한 의미에서 테마로서의 역할이라고 생각됩니다 .
• 테마적용여부는 사용자의 선택이며 , 테마적용을 하지 않으면 , bootstrap 의 기본 스타일이 적용됩니다 .
• 레이아웃 CSS 에서 visual 영역을 테마영역으로 분리하니 , css 코드가 간결해져서 사용자 / 개발자가 해당 코드를 이해하기가 편해졌습니다 .
테마영역
킴스큐 익스텐션이 테마적용의 유연성 및 호환성을 확보하기 위해서는 Css 의 visual 영역은 테마영역에서 처리될 수 있도록 해야함익스텐션 개발시 기본 css 작성시에 에서는 배제해야 하며 boostrap 의 기본요소를 활용한 Html 코딩을 해야만 , 테마적용을 통한 동적인 스타일 변경이 가능합니다 .
Boostrap 의 기본요소만으로도 충분히 모든 종류의 UI 구현이 가능함을 확인
테마적용을 통한 동적인 스타일변경을 위한 전제조건
http://mdo.github.io/code-guide/
![Page 31: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/31.jpg)
테마
테마가 만능은 아닐 것이지만 , 사이트 개발 시 디자인 개발에 효율성을 높혀 줄것으로 생각 .
일반 사용자는 테마를 적용해 본 후 , 내가 원하는 스타일의 테마로 선택하여 사용할 것 입니다 .
고급사용자는 3 가지의 방법이 가능할 것 같습니다 .
1. 내가 원하는 스타일과 유사한 스타일을 적용한후 , customize css 를 작성함 ( _main.css )2. 3rd party 테마를 배제한 후 , 처음부터 나만의 테마를 개발 .3. bootstrap 기본 스타일 기반위에서 customize css (_main.css) 를 작성함
테마 적용의 장점
개별 visual 요소를 제외한 익스텐션 코딩3rd party 익스텐션 간에 스타일 충돌을 방지할 것입니다 .
![Page 32: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/32.jpg)
테마 적용 예시
Boostrap default 테마 Cyborg 테마 cupid 테마
![Page 33: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/33.jpg)
로그인 관련 화면
로그인전 로그인 후로그인 모달
![Page 34: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/34.jpg)
프로필 관련 화면
![Page 35: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/35.jpg)
레이아웃 셋팅
레이아웃 셋팅 영역은 blank 서브레이아웃을 적용함
세부사항 변경 ( 모달 ) 변경여부 알림
![Page 36: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/36.jpg)
kimsQ Rb 2.0포럼 기본형 테마 ( 목록 )
![Page 37: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/37.jpg)
UI 특징• 데스크탑 환경에 최적화 됨 ( 마우스 UI 최적화 )• 스마트폰 ~ 데스크탑 구간의 반응형 웹 지원
![Page 38: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/38.jpg)
기본 마크업 • Media list 요소 사용• http://getbootstrap.com/components/#media-list
사용된 3rd party 플러그인
http://silviomoreto.github.io/bootstrap-select/3/
Bootstrap-select
Select 태그듸 기능과 스타일을 개선함 모바일환경에서의 사용성과 bootstrap 과의 스타일 통합성을 높힘
![Page 39: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/39.jpg)
filtering(카테고리 ) sorting( 정열 ) pager1 페이지출력수
공지글
비밀글
글쓴이아바타
게시물번호
![Page 40: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/40.jpg)
http://getbootstrap.com/javascript/#tooltips
Bootstrap Tooltip 사용
Bootstrap Popover 사용
http://getbootstrap.com/javascript/#popovers
![Page 41: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/41.jpg)
비밀글 처리
![Page 42: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/42.jpg)
Modal 출력
Popover 출력
프로필 페이지
클릭
Mover over 시에 popover 가 실행Click 시에 modal 실행됨
프로필 요약
Page 이동
![Page 43: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/43.jpg)
Mover over 시에 tooltip 이 실행Click 시에 modal 실행됨
특정 게시물에 댓들을 단 사람들
로그인 상태라면 댓글 등록 가능
수정 및 삭제가능
사진첨부
![Page 44: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/44.jpg)
특정 게시물에 좋아요를 한 사람들
Mover over 시에 tooltip 이 실행Click 시에 modal 실행됨
![Page 45: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/45.jpg)
관리자 일때만 출력됨
포럼 테마 일반설정 ( Settings )
![Page 46: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/46.jpg)
포럼 테마 스타일 설정 ( Settings )
레이아웃 테마적용 후 , 포럼의 세부 스타일 조정
http://mjolnic.github.io/bootstrap-colorpicker/
Bootstrap Colorpicker 2.0
• Border color• Hover color• Link color 등
![Page 47: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/47.jpg)
가로형 방향세로형 방향
태블릿에서의 사용성
![Page 48: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/48.jpg)
스마트폰에서의 사용성
![Page 49: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/49.jpg)
포럼모듈 - 테마( 모바일 전용 )
![Page 50: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/50.jpg)
Infinite scroll자동 & 수동
포럼모듈 > 게시판테마 ( 모바일전용 ) > 목록
![Page 51: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/51.jpg)
포럼모듈 - 게시판테마 ( 모바일전용 ) - 게시물 쓰기
![Page 52: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/52.jpg)
포럼모듈 > 게시판테마 ( 모바일전용 ) > 게시물 보기
모달방식 페이지방식 (상단 ) 페이지방식 ( 하단 )
![Page 53: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/53.jpg)
포럼모듈 > 게시판테마 ( 모바일전용 ) > 메인 네비게이션 접근방식
![Page 54: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/54.jpg)
포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록
![Page 55: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/55.jpg)
포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록
![Page 56: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/56.jpg)
포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > filtering
![Page 57: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/57.jpg)
포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > Sorting
![Page 58: 킴스큐 rb 20 사용자영역 스크린샷 들](https://reader034.vdocuments.pub/reader034/viewer/2022052311/5588f718d8b42ab4418b466a/html5/thumbnails/58.jpg)
포럼모듈 > 갤러리 테마 ( 모바일전용 ) > 목록 > Searching