웹디자인이 별거냐 손으로 그린다

요즘 스킨만들기에 빠져있다. 이미지가 없는 간단한 디자인을 좋아한다. 하지만 그래도 몇군데는 이미지로 처리하고 싶다. 저작권 문제도 있지만 공짜 이미지 가운데 맘에 쏙드는 걸 찾는 일이 쉽지 않았다. 그래서 손으로 그렸다. 스캔을 하고 높이가 25px가 되도록 만들었다. 혹시나 필요한 사람을 위해 올려둔다. 생각보다 재밌다.

드디어 조금씩 공부한 결과를 모두 모아 반응형 스킨을 만들었다. 그림까지 손으로 그려서 넣고 보니 뿌듯하다. 완성도는 조금 떨어지지만 그래도 공짜이니 쓰고 싶은 사람은 마음껏 쓰시라.

반응형 스킨을 만드는 css를 정리해 보자. 

#middle{ width:1000px; margin:20px auto; }

@media all and (max-width: 1050px) {

#middle{ width:800px; margin:20px auto;  }

}

붉은 글씨로 적힌 부분은 id가 middle인 div를 보통 1000px로 보여주다가 너비가 1050px가 되지 않는 화면에서는 너비를 800px로 바꿔서 보여준다. 지금 보고 있는 브라우저 크기를 줄여 보면 확인할 수 있다. 이 구문을 잘 활용하면 컴퓨터에선 2단으로 보여주고 모바일에선 1단으로 바뀌는 반응형 스킨을 만들 수 있다. 

티스토리에서는 잘 만든 모바일 스킨을 제공하고 있는데 왜 굳이 반응형 스킨을 만들었을까? 먼저 모바일 스킨은 맘대로 바꿀 수 없어서 수식을 보여줄 수 없다. 여기에 더해 모바일 화면을 보여주는 블로그 주소를 보면 http://suhak.tistory.com/m과 같이 원래 주소와 다르다. 같은 글을 다른 주소로 쓰는 셈이라서 검색에 노출될 확률은 낮아지게 된다. 따라서 반응형 스킨을 쓰면서 모바일웹은 비활성화 하는 것이 좋다. 

태그나 방명록은 거의 잘 쓰지 않아서 없앴다가 다시 넣어 놓았다. 옛날 홈피에 남겨진 방명록에 댓글을 달면서 기뻐하던 시절이 생각난다. 요즘은 SNS로 거의 실시간으로 소통이 이루어진다. 학교에 있을 때 톡을 거의 보지 않는다. 친구들에게 톡이나 문자를 씹는다고 타박을 많이 듣는다. 요즘 연인 사이에 바로 바로 답을 해야 한다는 스트레스를 받는 사람도 많을 것이다. 옛날 홈피시절 게시판 댓글이나 블로그 초창기 때 방명록으로 몇시간 혹은 하루 이틀 지나서도 댓글을 달아 소통하는 느낌도 때로는 그립다.  방명록에 글이 하나도 없으니 썰렁하다. 이글을 읽고 누군가 발자국을 남겨주기를 기대한다.