본문 바로가기

Works/Blog Skin

2017 새해 뻘짓 - 네이버 블로그 스킨 변경

약 3시간 정도의 잉여로운 시간을 들여서 네이버 블로그 스킨을 바꾸었다. 뭐 포스팅하는 것도 없고 저품질인지 검색 1 페이지는 커녕 검색 결과에 잡히지도 않는 블로그 이지만 이웃 관계 맺어 놓은것 때문에 안 접고 운영하는 중...


최근 인터웹을 이리저리 돌아다니다가 네이버 블로그들의 요즘 들어서 상단 부분을 홈페이지 처럼 꾸미는 것을 보게 되었다. 호기심에 크롬 인스펙터로 소스를 떠보니 안에 이미지 맵으로 구조를 짜놓은 것을 발견했다. 


이미지 맵... 처음에 html 배울때 도대체 이딴것을 누가 쓴다고 만들어 놓은건가 했는데 이런데 쓰인다는 것을 비로소 깨달았다. (그러니 결국 정말 쓸데없는 것...) 


이전 스킨은 위젯에 flex-box를 때려넣는 기행을 벌인데 반해 이번에는 image map을 사용하여 이미지 위에 링크를 입혀 버렸다. 이렇게 편한 방법이 있는데 왜 flex-box로 삽질했단 말인가 OTL (물론 코드 재활용이 불가능 하기 때문에 노가다 성은 더 높다.)


네이버 아이템 팩토리에 등록해서 원하는 사람은 사용 할 수 있게 할 생각. (근데 투명위젯을 자동으로 깔아줄지가 의문) 개인편집용 PSD 파일과, image map 용 좌표 파일도 함께 제공 할 계획



6개의 버튼이 있는 것 처럼 보이지만 사실은 이미지 맵으로 10개의 영역을 쪼개서 쓰고 있다.



블록 지정을 하면 바로 드러난다. (아이고 무식해) 메뉴는 끌 수가 없게 되어 있어서 할 수 없이 글자색을 흰색으로 바꾸는 꼼수를 취했다. 


앞에서 언급 했듯이 상단 전체를 홈페이지 비슷하게 만드는게 요즘 트렌드 이다. 개인 사업체에서 홈페이지 굴리느니 네이버 블로그에 둥지틀고 서버비용도 아끼고 어뷰징으로 네이버 검색결과 상위권도 차지하고, 꿩먹고 알먹고


그러나 이 경우 일반적으로 좌표를 찾아서 적는 방식으로 할 경우 굉장한 노가다를 수반해야 할 것으로 보임. 드림위버 같이 고도의 image mapping을 제공하는 툴을 사용하면 몰라도... 물론 고작 그거하자고 드림위버를 쓰는건 완전 바보짓


세삼 CSS가 얼마나 편한 물건인지 깨달았다. 병신 쪼다 같은 네이버 시스템으로 링크 위치 지정하려면 고작 이런 꼼수 밖에 없으니...