작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지)

영문 제목 : Twitter Bootstrap for Web Development


원고는 한달 전에 완료가 됐지만 리뷰와 부트스트랩 3.0 버전 추가 수록으로 인해 책의 출간이 다소 늦어졌습니다. 이제 표지 디자인이 나왔고 모든 편집이 완료돼서 오늘부터 인쇄 작업에 들어가며 내일부터 각 인터넷 서점에 예약 판매를 올릴 예정입니다. 



부트스트랩 3.0 버전이 현재 92% 진행됐는데 이달 말 정도면 완료되리라 생각합니다. 이전 글에서도 언급했듯이 부트스트랩 3.0은 모바일 우선 지원(Mobile First)이라서 2.0 버전과 좀 다릅니다. 레이아웃 방법도 달라지고 기능도 모바일에 맞게 줄어들었습니다. 모바일은 가벼워야 하고 많이 사용하지 않는 기능은 축소해야하기 때문이죠. 


3.0 부분을 추가 수록하려다 보니 분량이 많이 늘어나서 이부분만 따로 떼어서 첨부 파일들과 함께 제 블로그에 PDF 파일로 제공할 예정입니다. 2.0 버전을 기초로 웹디자인 한 것을 3.0 버전을 사용해서 수정하는 부분이라서 이 파일만 봐서는 내용을 잘 알 수가 없습니다.


두가지 버전으로 디자인 한 것을 비교해 볼 수 있습니다. 3.0 버전은 아직 완료가 안된 상태라서 버튼이나 메뉴바 등 여러 곳이 제대로 나타나지 않습니다.


2.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo/


3.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo2/


부트스트랩 3.0 버전 3.17일 현재 미리보기 : http://twitter-bootstrap.kr/bootstrap3/



이 책의 내용을 응용하면 티스토리 블로그도 핀터레스트 사이트처럼 만들 수 있습니다. 요즘 인기있는 웹사이트 레이아웃이죠. 썸네일의 크기에 상관없이 높이가 자동으로 맞춰지고 무한스크롤 플러그인을 추가하면 스크롤해서 내릴 때 페이지가 자동으로 피드됩니다. 현재 티스토리 데모 블로그에서 작업 중인데 원활하게 작동된다면 이전 스킨과 마찬가지로 조건부 공개할 예정입니다.


데모 블로그 : http://jquerymobile.tistory.com/



구매 사이트(3/29 출고)


YES24

강컴닷컴

알라딘

교보문고

인터파크

옥션

지마켓

11번가도서

반디앤루니스

리브로



저작자 표시 비영리 변경 금지
신고
BlogIcon jodsign

티스토리 스킨 기대되네요 ^^
또 트위터 부트슼트랩이라는것이 갑자기 궁금해지네요

BlogIcon 베누시안

부트스트랩으로 웹디자인 하면 웹 개발 시간이 3분의 1로 단축되더군요. 스킨은 며칠 내로 완료하겠습니다. 감사합니다.

BlogIcon 로렌과오뚜막

우와..데모보니까 진짜 핀터레스트와 비슷하네요 ㅎㅎ 대단하심..

BlogIcon 베누시안

감사합니다. 워드프레스도 그렇고 이런 레이아웃이 요즘 유행이죠. 심플한 디자인으로 콘텐츠에만 집중할 수 있더군요.

지나가다

표지의 앵무새가 '일본DTP출판의 실제' 인가하는(제목은 일본 서점에서 흘려봐서 정확하지는 않음. 다만 표지가 인상적이어서 기억에 남네요) 표지 앵무새 이미지를 그대로 복사했네요...일본책은 어두운 숲 바탕에 앵무새 이미지 였는데 ...좀 그렇네요^^ 블로그 내용은 참으로 알차네요~ 잘 보고 갑니다

BlogIcon 베누시안

안녕하세요. 혹시 해당 표지를 볼 수 있는 웹사이트를 알 수 있을까요?

BlogIcon 베누시안

문의를 하니 디자이너가 직접 디자인 한 것이라고 합니다. 앵무새의 포즈가 그런 모양이 많아서 흡사한 것이겠죠. 감사합니다.

BlogIcon 서민당총재

축하드립니다!!!

BlogIcon 베누시안

안녕하세요. 축하 감사합니다.

지나가다

앗 바로 리플을 다셨군요~ 제가 출판기획업자라 이리저리 웹서핑을 하다 님 블로그의 앵무새 이미지만 가지고 실례를 범한 거 같네요...출장갔을 때 디카파일 뒤져보니까 '디자인의인출vol16' 이라는 표지입니다. 일본 아마존 검색하면 나올꺼예요. 확인해보니까 같은 앵무새인데 그림체가 다르네요. 적절한 시기에 빨리 출판하신 거 축하드립니다.

BlogIcon 베누시안

제 생각에는 앵무새 사진 이미지를 바탕으로 디자이너가 색상을 입혀서 그래픽 이미지를 만든 것 같습니다. 어떤 이미지를 만들기 위해서는 모델이 필요하겠죠. 앵무새의 그런 포즈가 좋아보이다 보니 그런 이미지도 많더군요. 이미지를 바탕으로 색을 입혀서 새로운 이미지를 만들었다면 이미지를 도용한 것으로 보이지는 않습니다. 이미지를 자세히 볼 수 있도록 정면 이미지를 올렸습니다. 지적해주신 것에 대해 감사드립니다.

BlogIcon 겨울뵤올

오랜만입니다.. 베누시안님~~!!
책 출간하시는 건가요??
우와.. 축하드려요..^^
역쉬.. 꾸준히 한 분야를 정진하신 보람이 있으시겠습니다..^^

BlogIcon 베누시안

감사합니다. 정말 오랫만이네요. 지난 1년 책 두권 만드느라고 정말 바뻤답니다. 좀 쉬면서 다음 책을 구상하고 있습니다.

BlogIcon 빠광

예약구매완료! 제생일날출고된다니 기대반 설램반으로 기다리고있습니다!

책출간 진심으로 축하드립니다 :D

BlogIcon 베누시안

안녕하세요. 축하 감사드립니다.
책이 오늘 인쇄 완료돼서 출고됐고 각 서점에 배송됩니다.
예약 하셨으면 빠르면 월요일쯤 받아보실 수 있네요.
관심가져주셔서 감사합니다.

BlogIcon retrojeina

와....검색하다 왔는데 멋지시군요...덕분에 부트스트랩에 대한 관심이 늘었습니다.
티스토리 스킨도 대박이네요. 스킨 배포 (혹은 판매) 얼른 하셨으면 좋겠네요.^^

BlogIcon 베누시안

감사합니다. 제가 요즘 다른 일을 하고 있어서 스킨 완성을 조금 미루게되네요. 조만간 공개하도록 하겠습니다.

ws

아직 서점엔 없나봐요... 동네 문고점 두곳과 좀 먼곳은 전화해서 물어보니 없더라구요.. yes24실시간이체하는데 은행 전산장애가 있서 은행가서 겨우 입금해서 주문했네요.. 내일 받는데 기대되네요..ㅎ

BlogIcon 베누시안

안녕하세요. 부트스트랩이 아직 많이 알려지지 않아서 동네 서점에는 없답니다. 어렵게 주문하셨네요. 책을 구매해 주셔서 감사합니다.

BlogIcon 이욱

베누시안님 오랜만에 뵙습니다. ^^
오랜만에 들렀는데 또 책을 발간하셨군요. 축하드립니다.

언릉 구매해서 봐야겠네요. 또다시 궁금한점을 왕창 풀어놓도록 하겠습니다.

BlogIcon 베누시안

안녕하세요. 반갑습니다. 누구신가 했더니 맥프레소님이군요. 워드프레스 책에서 사용한 부트스트랩에 관한 내용입니다. 워드프레스에서는 기능만 사용하다보니 많이 부족한 것 같아서 보다 자세한 내용의 책이 필요할 것 같더군요. 걱정은 했지만 반응은 좋은 편이네요. 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

워드프레스에 스타일시트와 자바스크립트 파일을 대기함수와 등록함수를 이용해 추가하면 됩니다. 함수파일을 자유롭게 다룰려면 php를 공부해야하는데 그럴려면 몇년 걸립니다. 디자인만 하는 사람은 개발자가 되기 어렵더군요. 개발자 또한 디자이너가 되기 어렵죠. 둘다 잘 할려면 시간이 엄청 걸립니다. 개발자의 사이트를 보면 장식이 하나도 없죠. 워드프레스 기본 테마만 사용하더군요.

macpresso

functions.php에
wp_enqueue_script( 'masonry-script', get_stylesheet_directory_uri() . '/js/jquery.masonry.min.js', array('jquery') );

이런식으로 추가는 했는데 의문점은 부트스트랩 책 예제에서는 ul을 제어하기 위한 스크립트 코드를 넣는데 워드프레스로 변환 할때 이 스크립트 코드를 대체 할 다른 코드를 functions.php에 별로도 추가 하지 않아도 가능할까요?

BlogIcon 베누시안

함수에 등록하는 이유는 head 태그에 링크하는 것과 같습니다. 자바스크립트 파일을 인식시켜주기 위한 것이죠.

bosscc

.banner [class^="icon-"].pull-left, .banner [class*=" icon-"].pull-left
문법 설명 좀 부탁드립니다. 정확한 내용을 모르겠어요.

BlogIcon 베누시안

속성 선택자에 관한 내용인데요. 캐랫( ^ )는 시작 부분에 icon-가 있으면 선택되고 별표는 시작이든 마지막이든 상관없이 icon-가 있으면 선택됩니다. 그러니 .banner [class^="icon-"]는 .banner 선택자 내부에 있는 icon-로 시작하는 클래스 선택자가 있으면 선택됩니다. .pull-left는 부트스트랩 선택자로 float:left; 역할을 합니다.

이외에도 $는 속성 중에 마지막 글자가 있으면 선택됩니다. 아래 글을 참고하세요.

http://martian36.tistory.com/1141

bosscc

열심히 책을 보면서 따라해 보고 있습니다. 근데 소스파일 데모사이트와 다른 현상이 있는데요
. (데모페이지는 잘 됩니다.)
갤러리 페이지에서 이미지를 클릭시에 모달 갤러리로 보여지지가 않습니다.
우선 자바스크립트에서 에러가 나는 것으로 보여집니다. loading image도 없는 것도 문제인 것 같고요.
그리고 현재버젼의 jasonry파일을 다운받으면 호환에 문제가 있는 것 같습니다. 사용법을 좀 보고 있는데요. 동일한 동작을 하려면 팁이 있을까요?
데모사이트와 소스파일 버젼 확인 및 소스파일 동작 확인 부탁드립니다.

BlogIcon 베누시안

안녕하세요. 모든 프로그램은 버전이 달라지면 서로 충돌이 일어나기 마련입니다. 부트스트랩 3.0 버전을 다른 플러그인과 사용할 수 없는 것과 마찬가지죠. 그러니 책에 나온 버전만으로 익히신 다음에 다른 버전을 시도해 보세요. 새로운 버전으로 해보니 잘 됩니다. 원리를 익히신 다음에 하셔야 쉬워집니다. 데모 페이지는 다른 호환되는 플러그인을 사용해서 3.0 버전으로 업데이트 할 예정입니다.

bosscc

책대로 따라서 하는 중에 앞서 질문처럼 갤러리 페이지의 모달 갤러리의 경우 올려놓으신 소스 파일 그대로 돌려도 나오지 않습니다.(혹시 몰라 다시 파일 다운로드하고 돌려봐도 똑같습니다. 데모 사이트와 소스가 다른 부분이 있는지요?) 메이슨리나 무한 드래그 등 플러그인들은 잘 동작을 하는데 해당 이미지를 클릭시에 모달 갤러리로 나오지 않고 스크립트에러가 나옵니다. 한번 확인 부탁드립니다.

BlogIcon 베누시안

http://martian36.tistory.com/1134

위 글의 하단에 업데이트된 부분을 해결하기 위한 내용을 추가했으니 참고하세요.

비밀댓글입니다

티스토리 툴바