Kakao Instagram Facebook NAVER 이웃 E-mail 구독

Daily Log | 평범해서 소중한 일상
감자 오이의 부트스트랩 적용한 티스토리 스킨
2014. 2. 17. 00:38

Welcome to LuCKi's New Home

 

 

드디어!

토종감자 수입오이가 블로그 스킨을 만들었습니다.

원래 2014년 1월 1일날 새마음 새각오로 발표하려던 스킨인데, 신정은 고사하고, 어느덧 구정도 지나, 2월도 중순에 이르러서야 완성하게 되었네요. 스킨 만드는거 역시 만만한 일이 아닙니다. 

새 스킨에대해 간략히 소개 드리면요,

 

 

1. Responsive web design

 

오래전부터 모바일과 데스크탑에서 같은 모양새를 보여드리고 싶었습니다. 그래서 어디선가 줏어들은 부트스트랩 Bootstrap 을 적용해 보고 싶었는데, 저는 컴퓨터 프로그래머도 웹프로그래머도 아닌관계로 엄청난 도전이 아닐 수 없었습니다. 게다가 블로그 기반이 워드프레스도 아닌 티스토리인지라 기본틀에 부트스트랩을 적용해 보며, 고대 상형문자를 해독하는 기분이 들었습니다. 정말 전혀 뭐가 뭔지 이해가 가지 않았다는 소립니다. 그런데, 마침 이웃 블로거인 신난 제이유님께서 부트스트랩을 멋지게 적용한 스킨을 턱 내놓으신게 아니겠어요? 얼른 달려가 봤더니 마크쿼리님께서 이미 수고로운 일을 다 해 놓으셨다는 정보를 주셨어요. 그래서 모든게 일사 천리로 진행...될 줄 알았건만 제가 만들어 놓은 단순한 디자인을 마크쿼리님의 스켈레톤스킨에 적용하는 것이 또 보통 일이 아니더군요.

 

 

2. What is different?

 

디자인은 모바일에서도 깔끔하게 볼 수 있도록 블럭 디자인의 추세를 따라가 보았습니다.

 

 

블로그 색상은 총 7가지가 사용되었습니다.

이유는 저희 블로그가 여행 블로그를 기본으로 하고 있기에, 세상의 모든 곳을 블로그에 담고자 하는 마음으로 남북 아메리카를 따로 봐서 6개 대륙과 달에서 지구를 바라보는 것을 마지막 여행으로 삼고 싶었기에, 우주를 상징하는 한 색을 포함해, 총 7가지 색을 넣어 보았습니다. 

언젠간 다 가 볼 수 있겠죠? ^^

 

색상을 고르는데만, 거의 일주일 넘게 걸렸는데요, 제가 즐겨 찾는 싸이트 중 컬러러버 colorlover 라는 싸이트가 제일 유용했답니다. 웹디자인 뿐만 아니라 인쇄물 디자인이나 집안 인테리어, 옷 색상 매칭할 때까지 두루 유용하답니다.

 

블로그 메인페이지 구성에 약간의 변화가 있는데요, 기존에 새 포스팅을 보여주는 메인 사진은 같고요, 티에디션대신 주제별, 테마별로 여행기를 묶어보았습니다. 관심있으신 테마를 클릭하시면 그에 해당하는 여행기가 갤러리 형식으로 보여집니다.

 

포스팅 부분의 사진도 방문하시는 분들 시원 시원하게 보시라고, 1000px로 늘렸습니다. 클릭 없이 큰사이즈로 감상하세요. 그리고 제 포스팅은 스크롤 압박이 심한 경우가 많은데요, ( 압니다, 저도. ^^; 줄여 볼려고 노력하는데 잘 안돼요.) 약간이나마 도움이 될까 싶어 '맨 위로가기' 버튼을 추가해 보았습니다. 오른쪽 구석에 Top 이라고 써있는 화살표가 그것입니다.

 

 

3. We are really together on this blog

 

이번 스킨변경으로 감자와 오이의 블로그에 정말 감자, 오이 모두의 손길이 묻게 되었습니다. 예전에는 사실 감자양 혼자서 운영하던 블로그였는데, 이번 블로그 스킨에 오이군 PowerKiKi이 지대한 도움을 주었기 때문입니다. 앞으로도 오이군이 글을 쓰거나 사진을 찍을 일은 별로 없어보이지만, 어쨌든 스킨뒤로 보이지 않는 모든 코드는 오이군이 짰습니다. 아시다 시피 디자인을 뙇! 그려놨다고 해서 블로그가 그 모양대로 퇗! 나오는게 아니거든요. 웹코드를 짤줄 알아야 블로그에 디자인도 적용이 가능한데, 제가 혼자 했으면 1년 걸릴 일을 오이군이 틈틈히 두달만에 툭탁 해주었어요. 그래서 이제 정말 토종감자 수입오이가 함께 만든 블로그가 맞습니다. ^^

 

원래는 새 스킨을 2014년 기념으로 발표하고 싶었습니다. 그런데, 낯선 코드의 홍수속에서 감자양이 정신을 차리지 못하게 됩니다. 그러나 욕심은 하늘을 찔러, 제가 원하는 디자인을 포기하지도 못합니다. 결국 별 진전없이 세월만 흐르자 보다못한 오이군이 도움의 손길을 내밀게 됩니다. 이때부터 모든 일이 정말 일사천리로 진행되기 시작했어요. 불가능해보이던 모든 디자인이 현실이 되었습니다. 

 

각 브라우져와 특히 익스플로러 하위 버전에서 모양새가 흐트러지던 문제도 해결을 해 주었고요, 부트스트랩도 최신버전으로 업데이트를 마쳤답니다. 최신버전에서는 익스플로러 8에서 적용이 안되던 문제를 해결해 놓았다네요. 근데, 여전히 잘 안되는 듯... -_-; 결국 오이군이 수동으로 고쳤고요.

검색 결과도 갤러리 형식으로 제공하도록 해주었습니다. 왜 다른 곳에서는 기본적인 지원인데, 티스토리에선 지원을 안해서, 이렇게 복잡한 방법을 사용하도록 하는지는 몰라도 어쨌든 해결 완료. 근데, 로딩 속도가 조금 느리네요. 어쨌든 일단 만족하고, 차차 해결책을 찾아봐야겠어요.

 

그래도 이 홈페이지는 크롬 Chrome에서 가장 예쁘게 보입니다. 

다른 브라우져에서도 다 정상적으로 작동하긴하는데, 몇몇 소소한 디자인이 익스플로러에서는 안되는 경우가 있어요. 해결하려다가 감자 오이 스트레스로 대머리 될까 싶어 일단 이렇게 둡니다. 전부 차근차근 고쳐갈께요.


스킨을 뚝딱 뚝딱 잘 만드는 것을 보니, 오이군이 회사에서도 일을 잘 하고 있겠다는 생각이 들어 기특하고, 뿌듯하기도 했답니다. 오이군의 정체는...웹 프로그래머거든요. ^^ 사실 중간에 오이군의 귀차니즘과 타협해서 원하던 디자인에서 멀어진 부분도 좀 있지만( 남편 스타일...^^;), 앞으로 소소하게 수정하여, 원래 디자인대로 다 고쳐나갈 예정입니다. (마누라 파워! = 바가지) ^^;

 

 

4. 구독해주세요! 페북 좋아요도 눌러주세요!

 

구독 버튼을 모두 메뉴 버튼으로 올려놨습니다. 방문하시는 분들 눈이 확~들어오라고요 ^^

앞으로는 RSS, 네이버, 다음뷰 등으로 구독 하셔서 새글이 올라오면 편하게 방문해 보세요. 버스나 지하철 이동시간, 지겨운 근무 시간 등 틈틈히 시간을 떼워보아요. ^^;;; 

단, 길을 걸을 때 스마트 폰으로 읽지는 말아주세요. 저 얼마전에 길가다 스맛폰에 집중한 남정네가 거의 사고 날뻔 하는 장면을 목격해서 가슴이 철렁. 

 

페북 좋아요 버튼은 페이지 맨 아래에 있습니다.

토감수오 싸이트 좋아요도 한번 콕! 눌러주세요. 좋아요 버튼이 이제 모바일에서도 보인답니다. ^^

 

앞으로도 토종감자 수입오이이야기 많이 사랑해주세요. 

감사합니다. ^^