요즘 사진기를 빌려주고 나니 농사일이나 일상 사진을 찍을 수 없어 블로그 관련 글들만 주구장창 쓰고 있다.

특히 요즘에 나는 오래전부터 해보고 싶었던 스킨 만들기에 빠져 있다. 이제 거의 완성형에 가까워진듯 해서 그동안 스킨 만드는 과정에 대해서 간단히 글을 남겨 놓으려고 한다.

이번에 만들어 본 스킨의 기본 베이스는 티스토리에서 제공하는 #1 스킨이다. 개인이 배포하는 스킨의 경우 수정 배포를 금지하는 경우가 많다. 워드프레스의 무료 테마를 활용해보려고 생각했는데 뭔가 찝찝해서 관뒀다. #1 스킨은 1단형 스킨으로 수정이나 배포에 별다른 조건이나 제약이 없어서 선택하게 되었다. 최근에는 사이드바가 없는 1단형 화면이 대세인듯 하기도 하다.

개인적으로는 사이드바가 항상 보이는 화면을 좋아한다.

#1 스킨은 기본적으로 컴퓨터 PC 화면이 기본으로 되어 있다. 모바일 화면은 미디어 쿼리를 사용해 화면 구성을 하게 된다. 사용자가 모바일이 아무리 많아졌다고 해도 모바일은 모바일이다. 집중도를 생각하면 기본이 PC로 되어 있는 구성이 아무래도 관리하기에 편리하고 좋다.


1 첫화면 & 카테고리 선택 화면

스킨 만들기의 재료인 #1 스킨을 일단 블로그에 설치하고 첫화면과 카테고리 선택시 화면을 먼저 수정했다. 이미지 그리드 방식의 맨소니를 행님댁님의 스킨에서 참고해서 블로그에 적용했다.

첫화면과 카테고리 선택화면만 해도 뭔가 다 한것 같은 기분이 든다.




2 카테고리 메뉴 버튼 화면

기존의 카테고리 화면이 너무 밋밋한 느낌이 들어 기존의 부분은 모두 제거하고 좀 더 눈에 띄는 효과를 사용했다. 메뉴 버튼은 상단 한 가운데에 위치하도록 했다. 반드시 왼쪽 상단이나 오른쪽 상단에 위치하란 법은 없으니..



메뉴 버튼



메뉴 버튼 클릭시 카테고리 화면

3 관리 메뉴 화면

글쓰기, 설정 등 관리 메뉴 화면도 드랍 다운 방식의 애니메이션 효과를 이용했다.

블로그 타이틀을 클릭하면 메뉴 화면이 드랍다운되면서 나타난다.



블로그 타이틀 클릭시 관리 메뉴 화면

4 검색 버튼 화면

검색 버튼도 스킨에서 제공되는 부분은 모두 제거하고 완전히 새로 추가했다. 코드랍에 검색 버튼이 괜찮아 보이길래 이 스킨에 맞도록 수정했다.

검색 부분을 클릭하면 전체 검색 화면이 짜잔하고 나타난다. ㅡ,.ㅡ;



검색 클릭시 화면

5 사이드 메뉴 화면

#1 스킨의 사이드바는 하단에 위치하고 있다.

기존의 구성을 2단으로 배치하고 글자 크기가 너무 작아 크게 조정했다.

그리고 메뉴의 각 아이콘을 제목 옆에 사용하려다가 좀 더 크게 눈에 띄도록 오른편에 배치하여 강조했다.

하단의 메뉴를 숨겨서 버튼을 클릭하여 보이게 하는것도 좋을 듯 하다. (버튼이 너무 많아지는것도 불편할듯하고 큰 의미는 없는것 같아서 그냥 두기로 ...)



하단 사이드 메뉴

6 카테고리 관련글

카테고리 관련글 부분은 이미지를 원형으로 만들어 보았다. 남들 다하는 네모 모양에서 벗어나자!!



카테고리 다른글

7 기타 수정 사항

아직 약간씩 다듬어야 할 필요가 있는 부분들이 있고 이외에도 여기저기 소소하게 조금씩 수정한 곳들이 많지만 모두 기억하기도 어려워 생략;;;

스킨 만드는것도 처음 한번이 어렵지 해보고 나면 다음번에 시도할때는 좀 더 손쉽게 할 수 있을것 같은 생각이 든다. 미리 겁먹지 말자!!

수정을 시도해 보다 포기한 부분들도 있다. 이미지 그리드 배치를 좀 더 다른 모양으로 구성해 보려고 했는데 적용이 되지 않는다. -.-; 아무래도 아직은 내게 무리인듯 싶다.


스킨 데모 #1 보기


스킨 데모 #2 보기


스킨 데모 #3 보기
댓글
  • 프로필사진 비밀댓글입니다 2017.10.18 20:21
  • 프로필사진 SONYLOVE 죄송합니다.
    저는 현재 초대장을 배포하고 있지 않습니다.
    2017.10.18 22:44 신고
  • 프로필사진 비밀댓글입니다 2018.03.13 18:08
  • 프로필사진 SONYLOVE 좋게 봐주시니 감사해요. 저도 현재 상태가 마음에 들어요. ^_^ 2018.03.14 11:08 신고
  • 프로필사진 비밀댓글입니다 2018.03.15 14:52
  • 프로필사진 SONYLOVE 현재 스킨은 티스토리 기본 #1 스킨을 베이스로 사용중이에요. 배포는 죄송하지만 고려하지 않고 있어요.
    그리고 정확히 어떻게 사용하고 싶으시다는 건지 알수가 없어 제가 답변 드리기 어렵군요.
    블로그에 사용된 대부분은 공개된 인터넷 소스들을 활용한것들이라 검색을 이용하시면 수많은 자료들을 찾으실 수 있을겁니다.
    도움이 되어 드리지 못해 죄송합니다.
    2018.03.16 16:57 신고
  • 프로필사진 GGOGUMA 38 안녕하세요 ...이제 티스토리 블로그를 시작하는 초짜입니다 ㅠㅠ 질문이 하나 있는데요 ..블로그를 티스토리에서 제공해주는 스킨을 사용중이에요. 그런데 제 블로그 이름과 다르게 블로그 이름이 떠서요..이거는 어떻게 해결해야 하나요 ㅠㅠ?/
    2018.09.29 15:20 신고
  • 프로필사진 SONYLOVE 어느 부분을 말씀하시는지 잘 모르겠는데요. 2018.09.29 17:46 신고
  • 프로필사진 GGOGUMA 38 제 블로그 이름은 ggoguma farm 인데 블로그에 들어가면 book review라고 써 있는 점이요...ㅠㅠㅠ
    2018.09.29 20:58 신고
  • 프로필사진 SONYLOVE 아. 그건 블로그 이름과 관계없이 블로그 스킨의 css 에서 그림 파일로 되어 있어서 그림 파일을 변경하시던지 텍스트 형태로 입력해서 변경하셔야해요.

    스킨 편집에서 보시면 css 에 아래의 부분이 있는데 header 에 현재 파일명이 title.png 를 바탕이미지로 사용중이네요. 이게 book review 란 글자형태의 이미지로 되어 있어서 그래요.

    /* Header */
    /* title */
    #header h1 {font-family:/*@title-font-family*//*@*/;font-size:/*@title-font-size*//*@*/;color:/*@title-color*//*@*/;}
    #header h1 a {display:block;width:306px;height:49px;background:url(images/title.png) left top no-repeat;cursor:pointer;}
    * html #header h1 a {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//tistory1.daumcdn.net/tistory/0/tis_simpleGrid/images/title.png', sizingMethod='crop');}
    #header h1 a:hover { text-decoration:none;}
    #header h1 span {display:none;}
    2018.09.29 22:31 신고
  • 프로필사진 GGOGUMA 38 정말 감사합니다 ㅠㅠ!!!! 2018.09.30 10:30 신고
  • 프로필사진 GGOGUMA 38 죄송한데 한가지만 더 물어볼께요 ㅠㅠㅠ그럼 다른 이미지로 바꾸려면 어떻게 해야 되나요?
    컴알못이라...
    2018.10.01 23:27 신고
  • 프로필사진 SONYLOVE 업로드된 이미지를 찾아 같은 이름으로 수정한 이미지 파일을 올리거나 새로운 파일명으로 수정하거나..
    아니면 background 를 제거하고 텍스트를 입력해서 변경하거나 방법이 가장 간단하고 ..
    선택하기 나름이긴 합니다.
    근데 스킨 자체가 오래된 것이고 반응형 스킨도 아니라서 왠만하면 최근 배포하는 스킨을 사용하시는게 좋을 듯 합니다. 아무래도 제약이 많다보니..
    2018.10.01 23:39 신고
  • 프로필사진 Murx2 어지간하면 댓글 안달고 가는데요.
    진짜 애정이 느껴지는 공간이네요. 일일히 디자인하고 정리하고 하시느라 고생많으셨겠네요.ㅎ
    2018.12.07 16:30 신고
  • 프로필사진 SONYLOVE 모든 과정을 자세히 쓸수는 없어서 눈에 띄는 큰 부분들만 간단히 기록했어요.
    시간이 지나면 다 까먹습니다. ㅎㅎ
    들러주셔서 감사합니다.
    2018.12.12 20:57 신고
  • 프로필사진 야호선종 이쁘게 잘 만드셨네요! 저도 도전해보려고요!! 2021.04.01 20:19 신고
  • 프로필사진 SONYLOVE 거의 짜집기 수준인데.. 좋게 봐주시니 감사합니다. ^_^
    멋진 스킨 만드시기 바랍니다..
    2021.05.16 00:07 신고