본문 바로가기

Works/Blog Skin

[WIP] Meltdown Rev.2 이글루스를 시작으로 티스토리 스킨까지 기존에 있는 스킨들을 최신화, 코드 정리, 구조 / 속도 개선 작업을 할 예정이다. (사실 이거 2016년 7월에 했어야 했는데 1년이나 미루어졌다) 첫빠따(?)는 최초로 만든 이글루스 스킨인 Meltdown. 지금 와서 코드를 까보니 완전 개판오분전이다. 내가 이딴 스파게티 코드를 짜고 있었다니... 라고 자괴감이 드는 순간이다. 2014년에 짰던 코드 수준 지금 짜는 코드 수준 주요 변경 사항은 웹폰트 적용, compass 완전히 제거, 속도 개선, 자동 업데이트 기능 추가 등이다. 웹폰트와 rawgit의 속도 때문에 그다지 빠르진 않은 편이지만 일단 css가 케싱 되고 나면 퍼포먼스 상에 딱히 문제는 없어보인다. 어짜피 이글루스 구조도 개판인데 웹폰트 로딩이 개.. 더보기
[WIP] 새로운 마이피 스킨 동영상을 상단 헤더에 넣을수 있는 스킨이다. 유투브 영상을 바로 가져올수 있다면 좋을텐데 루리웹에서는 상단에 iframe을 못 넣게 막아놓았다. 그래서 Video 태그를 사용해서 억지로 집어넣었는데, 파일은 구글 드라이브에서 땡겨와서 쓰고 있다. 구글 드라이브에서 파일 가져오는 법은 의외로 쉽더라. 트래픽이 정신나간 수준만 아니면 구글에서도 특별히 짜르거나 하지는 않는 것으로 보임. 8.2 업데이트 리니어 그래디언트와 블랜딩 추가 아직 블랜딩에는 트랜지션이 적용 안된다. 되는 줄 알았는디... 사파리 빼고는 정상적으로 잘 뜸. 사파리는 아직도 css grid 랜더링에 버그가 있는것 같음 (쪼다같은 사파리...) 사파리 크롬 파이어폭스 더보기
이글루스 코드 제한에 딱 맞춘 CSS3 스킨 - Frosty 매번 스킨 만들때마다 느끼는 것이지만 CSS 글자수 제한 어떻게 안되나? 건의 한지가 언젠데 발전이 없는 것을 보면 이글루스 운영진은 티스토리보다 더 노답인듯. 덕분에 만들어 놓은 스타일도 글자수 제한으로 밀어버리고 새로 만드는 병크를 저질렀다. 글자수 제한 때문에 스킨 옵션에서 배경이미지 또는 헤더 이미지 둘중에 하나만 넣을 수 있다. 둘다 넣을 경우 잘린다. 사실 배경 이미지만 넣어도 일부 코드가 잘리지만 위치 설정용 코드만 잘리기 때문에 별 문제는 없다. (position 코드의 경우 전부 오버라이드됨. 헤더는 해당사항 없음.) 특징 CSS3을 사용하여 만들어진 스킨으로 표준 요소와 비표준 요소가 적절히 섞여있어 브라우저마다 다르게 보이는 스팩타클함을 자랑한다. 아마도 2년이내에는 모든 브라우저에서.. 더보기
CSS3의 새로운 효과와 스케치 목업으로 간단한 스킨 만들기 - 이글루스 스킨 Frosty CSS만 작성하면 스킨이 나오는 이글루스로 간단하게 만들어보았다. 제작시간: 약 하루? 어제 반나절 + 오늘 반나절 스케치로 만든 목업이다. 사용후기는 여기를 참고 그냥 평범한 1140 그리드 스킨이다. 딱 보면 느낌 알겠지만 반응형이 아니다. (애초에 지원할 이유도 없음)대신에 실험삼아 요새 핫한(?) CSS3 태그를 써 보았다. Backdrop filter 조니 아이브의 주도 하에 애플 제품군에는 새로운 디자인 언어가 적용되었다. 플렛 디자인이라고 불리는 이것은 기존의 실물을 흉내내던 스큐어모픽과는 달리 형광톤의 컬러와 블러 레이어를 통해 경계를 나누는 방식이다. 이후 iOS와 macOS의 서리낀 유리효과를 표현하고자 수많은 웹개발자들이 삽질에 삽질을 거듭하였다.물론 현재 쓰고 있는 XP1에도 검색창.. 더보기
2017 새해 뻘짓 - 네이버 블로그 스킨 변경 약 3시간 정도의 잉여로운 시간을 들여서 네이버 블로그 스킨을 바꾸었다. 뭐 포스팅하는 것도 없고 저품질인지 검색 1 페이지는 커녕 검색 결과에 잡히지도 않는 블로그 이지만 이웃 관계 맺어 놓은것 때문에 안 접고 운영하는 중... 최근 인터웹을 이리저리 돌아다니다가 네이버 블로그들의 요즘 들어서 상단 부분을 홈페이지 처럼 꾸미는 것을 보게 되었다. 호기심에 크롬 인스펙터로 소스를 떠보니 안에 이미지 맵으로 구조를 짜놓은 것을 발견했다. 이미지 맵... 처음에 html 배울때 도대체 이딴것을 누가 쓴다고 만들어 놓은건가 했는데 이런데 쓰인다는 것을 비로소 깨달았다. (그러니 결국 정말 쓸데없는 것...) 이전 스킨은 위젯에 flex-box를 때려넣는 기행을 벌인데 반해 이번에는 image map을 사용하여.. 더보기
Asterisk의 최적화된 광고 단위 가이드 Asterisk 스킨은 광고게시에 최적화 된 스킨이다. 즉, 처음 제작시부터 광고를 어떤식으로 배치하고, 어떻게 작용 할 것인지에 대한 고려가 들어가 있다. 일단, 그 전에 구글 광고 크기에 대해 알아보자. 기본적으로 광고크기에는 몇 가지 법칙이 있다.1. 광고는 클 수록 좋다. (시선집중)2. 큰 광고는 눌러지는 횟수도 많다. (큰 광고의 경우 텍스트 대신 디스플레이 광고가 뜨는 확률이 높다.)3. 따라서 큰 광고는 대체로 수익이 높다. 물론 정설은 아니며 필자가 3년간 블로그를 운영하면서 만들어진 통계수치와 자료에 따른 것이다. 구글도 바보는 아니기 때문에 최근 들어 이러한 큰 광고를 사용자들에게 많이 권장하고 있다. 불과 3년전만 해도 120X600(스카이스크레퍼)나 728X90(리더보드)만 되어도.. 더보기
네이버 블로그 위젯 마개조 스토리 알만한 사람들은 알겠지만 나는 현재 네이버 블로그를 병행해서 운영중이다. 주로 제품 리뷰랑 게임 영상만 올리고 그외 다른 것은 하지 않는다. 네이버는 스킨에서 자유롭게 건드릴 수 있는 곳이 헤더 밖에 없는데 이 헤더 마저도 사용자가 최대로 넓힐수 있는 너비는 500px 밖에 되지 않는다. 이를 꼼수를 써서 어떻게든 넓히는 방법을 알아냈다. 바로 위젯의 높이를 늘리는 것. 최대 허용 높이는 600px이 한계인 것 같다. 요즘 메인화면을 사진으로 채운 네이버 블로그들을 보니 이 방법을 쓰는 것 같았다. 여기서 한단계 더 나아가 inline-CSS가 도배되어 있는 위젯을 넣으면 어떻게 될까라는 실험을 해보았다. 참고로 네이버 블로그 위젯의 경우 style 태그는 원천 봉쇄되어 있으며, 인라인 스타일 밖에 허용.. 더보기
Burari² - 에디션2 Burari"²"의 에디션"2" 이다. (콩콩) 테마 다운로드 설치 방법은 기존과 완전히 동일하다. 기존 테마 설치 방법 업데이트 로그 - 소소한 버그 픽스- 웹폰트 로드 문제 수정- 레이아웃 변경- 테블릿(아이패드)에서 깨지는 문제 수정 시간나면 커피한잔 이라도 사주는 센스 더보기
Burari² 두번째 베리에이션 스퀘어스페이스 공식 블로그 덕분에 흥해진 50:50 레이아웃을 적용해 보았다. 무언가 급진적인 레이아웃을 좋아하는 사람에게 유용할 듯. 사실 풀 스크린 슬라이더를 부담스러워 하는 사람들도 꽤 되어 이런 추가 레이아웃을 만들어 보았다. 더보기
마이피 테마 - Burari² 지금으로 부터 무려 3년여전. 첫 마이피 테마를 만들었다. 이름은 Burarikun. (이름은 특정인물의 그것과 아무런 관련이 없음) 이후 군머도 다녀오고 많은 시간이 흐른 지금 다시 테마 제작에 도전했다. Burarikun - 루리웹 마이피용 CSS3 스타일 괴랄한 테이블 레이아웃은 flex-box를 사용해서 전부 박살냈다. Burari²는 1단형 레이아웃 이지만 원한다면 언제든지 2단, 3단으로 개조할 수도 있으며 사용자의 취향에 따라 사이드 바의 위치도 마음대로 바꿀 수 있다. (이것이 바로 flexbox의 힘!!) CSS3 표준 준수 기본적으로 마이피에서 제공되는 모든 요소에는 스타일이 적용되어 있으며, 불가능할 것 같았던 input image 버튼도 마개조를 시켰다. 방명록도 별도의 스타일이 적.. 더보기