Offcanvas가 있는 반응형 스킨의 구조 설계

Posted by Readiz
2014.03.30 01:35 Creation/Design

Offcanvas가 있는 반응형 스킨의 구조 설계



  반응형 스킨이 지금은 그렇게 많지는 않지만.. 앞으로 반응형 스킨 제작 하실 분들에게 도움이 되시라고 이런 글도 한번 포스팅 해봅니다. 도움이 되셨으면 좋겠어요.

  이런 구조를 그려놓는걸 뭐라고 하는지는 잘 모르겠습니다. 전개도? 설계도? 아무튼 이것을 꼭 그리고 작업하실 필요는 없습니다만, 큰 그림이 머리속에 있는 것이 좋더군요.




  빨간색 칠해진 부분이 유저가 처음에 보게되는 부분입니다. 처음에는 네비게이션, 콘텐츠, 사이드바의 일부만 보게 됩니다. 이 이후에 Offcanvas가 동작하게 되면, Offcanvas가 우측으로 밀려나오게 됩니다. 아래 그림처럼요.



  이 구조는 실제로 Offcanvas가 우측으로 이동하는 구조입니다. 실제로 컨텐츠와 Navigation bar가 우측으로 밀려나는 것처럼 보이지만, 실제로는 Padding을 이용한 눈속임에 불과합니다. 본문과 네비게이션바는 실제로 Left값을 사용해서 우측으로 밀어버리는 것이 아닙니다. 그렇게 되면 Body안쪽 구조가 너무 복잡해지고, 스크롤바가 꼬여버리는 문제점이 발생합니다. 그래서 Offcanvas가 우측으로 이동함과 동시에 Body를 우측으로 움직이는 것처럼 보이게 하는 방법이 가장 좋았습니다.


  위 구조의 스킨이 Mobile로 가게되면 아래처럼 변합니다.



    


  사실 거의 동일합니다만 Contents-Sidebar가 좌우로 배치되어 있던 것이 Sidebar가 하단으로 내려오는 구조입니다. Offcanvas는 PC구조와 유사하게, 좌측에 붙어있다가 필요할 때 스르륵 모습을 나타내는 구조입니다. 여기서도 역시 실제로 본문을 우측으로 보내지 않고, Padding값을 조정하여 마치 우측으로 움직이는 것처럼 보이도록 하였습니다.


  대충 앞으로도 반응형 스킨이 나온다면 이 구조는 거의 정석이다시피 될 것 같군요. 이 구조가 사용자들에게 가장 익숙한 구조가 아닐까 싶습니다. 모바일 앱의 구조와도 굉장히 유사하구요. ^^


  그렇다면 위의 구조가 코딩으로는 어떻게 되어있는지 한번 개괄적으로 살펴봅시다.


<!-- FastBoot v1.5.1 by Readiz Responsive Tistory Skin http://readiz.com/ Open sources are copyright of their respective owners. --> <!DOCTYPE html><html><head> <title>[$$_page_title_$$] :: [$$_title_$$]</title> </head><body id="[$$_body_id_$$]"> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> </div> <div class="container"> <div class="row"> <div id="leftContent" class="col-md-9"></div> <div id="sidebar" class="sidebar col-md-3"></div> </div> </div> <div id="footer"> </div>  <!--F OffCanvas --> <div id="lnav"></div> <div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-5x"></i></div></body></html>


  구조가 동일하죠? 큰 그림만 보실 수 있게 코드를 많이 짤라보았습니다. 좌측 Content부분은 9만큼의 크기를.. 우측 Sidebar의 크기는 3의 크기를 가지도록 디자인 되어 있는 것이죠. 모바일에서는 Content와 Sidebar를 다른 줄로 떨어지게 하구요.

  큰 그림만 짜신다면 세부적인 것을 만드는 것은 일도 아니었으면 좋겠습니다만.. 이 그림을 짠 후부터 비로소 스킨제작을 시작할 수 있게 됩니다. ^^

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 리지이지
    bootstrap.min.custom.2.css 여기에 사이드바 테두리라구해야될려나 그림자라구해야될려나
    여기 들은거맞나요?
    • Bootstrap의 Panel요소는 아마 그대로 거의 쓰지 않았던 것으로 기억합니다..
      Style.css에서 기본 Bootstrap Panel요소를 거의 다 Overriding하고 있을거에요.

      말은 어려운데 그냥 Style.css에 있다는 말입니다.
    • 네 1.5-1 가지고 다시찝쩍거리고 잇어요 -0-
  2. 빨리 적용하고 싶네요 ㅜㅜ;; 그러기에는 밀린 포스팅이 많아서... HTML, CSS 도 근래들어 아예 처다도 안보고 있는데, 언넝 밀린 숙제(포스팅)를 끝내고 시작해야 겠네요
    • 에이 즐기면서 하셔야죠.. ㅋㅋ
      저도 일한다고 생각하면서 했으면 절대 이렇게까지 못만들었을 듯 합니다. ㅎㅎ
    • 저는... 지금 그리고 근 미래에는 기술직으로 일을 할 생각이지만, 먼 미래를 봤을 때는, 지금 블로깅 하고 잇는 사항들과 관련된 일을 하려고 계획중이거든요... 그래서 그런지 욕심이랑 의욕이 계속 앞서는거 같아요 ...

      리드이즈님도 그렇겠지만, 제가 블로그에 올린 게시물들이 웹 검색에서 노출이 되고 그로 인해 블로그로 유입이 된 사람들이 블로그에 와서 많은 정보들을 알아가고 도움을 받았다는 댓글 같은거 남기거나,,, 유입 검색어,키워드 등을 봤을 때 굉장히 뿌듯하고 느낌 좋더라고요 ㅎㅎ

      지극히 개인적인 공간으로 만들어진 블로그가 아니고, 정보성 블로그를 운영하는 사람들이 이 맛에 블로깅을 하는 거겠죠? ㅎㅎ
    • 댓글 덕분에 운영 하는거죠.. ^^
  3. 전 걍 만사 귀찮아서 오프켄버스 적용할때 body를 통째로 밀어버렸습니다. -ㅅ-
    디자인도 머리막 굴리다가 귀찮아서 정말 기본적이게 적용해놓았네요 ㅋㅋ
    • Estoque님이야 워낙 세련되게 적용해놓으셔서.. ^^;
      봐도 모르겠더라구요. ㅎㅎ 파운데이션도 강력한 것 같고..
      다음엔 저도 파운데이션 써봐야겠습니다. ㅎㅎ
  4. 이렇게 풀어서 적어주시니 이해가 참 쉽네요. 모든걸 어깨너머로 익히다 보니 가장 중요한 원리에 대해서 놓치고 가는 경우가 많아요. 기본을 모르고 기교만 늘어서 스킨을 만지다보니 이것 저것 붙여놔서 용량만 자꾸 커지는것 같아요. 시간나는데로 틈틈히 이론공부 하겠습니다.
    • 웹은 개괄적인 것만 이해하고 실습하면서 하면 됩니다. ㅋㅋ
  5. 안녕하세요. 리디즈님 열정에 잘 사용하고 있습니다.
    궁금한 것이 있어요.
    오프캔버스에 있는 티스토리 메뉴 (하위카테고리 포함)를 수정이나 삭제하고 싶은데 어떻게 해야하나요?
    • 방법이야 images폴더에 있는 fastboot_offcanvas.js를 수정하시면 됩니다만.. 사실 jQuery를 모르고서는 수정이 좀 힘듭니다.. ㅠ
      현재로서는 기본세팅은 쉽지만 세부적으로 수정하시기에는 조금 힘든 감이 있네요. 중재를 잘 시켜야 할텐데.. 한번 어떻게하면 수정하실 수 있게 할 수 있을지 고민해보겠습니다.
  6. 왠지 좀 힘들거 같은 느낌이었어요.
    날씨가 무척 덥네요...수고하세요^^

티스토리 툴바