티스토리 블로그 반응형 무료 스킨 배포 :: 베이스캠프 (나눔, 추천)

남양주개발자

·

2021. 1. 23. 17:35

728x90
반응형

티스토리 블로그 반응형 무료 스킨 배포 :: 베이스캠프 (나눔, 추천)

업데이트 히스토리

 

Releases · ruden91/public-basecamp-skin

티스토리 무료 반응형 스킨 :: 베이스캠프. Contribute to ruden91/public-basecamp-skin development by creating an account on GitHub.

github.com

😎 스킨 소개

베이스캠프 스킨은 티스토리 블로그에서 사용되는 스킨입니다. 누구나 무료로 사용 및 커스터마이징을 할 수 있습니다. 미니멀리즘을 추구하는 컨셉에 맞게 굉장히 단순함을 강조하는 스킨입니다. 디자인이 굉장히 심플하지만, 블로그에 꼭 필요한 기능들을 모두 포함하고 있기 때문에 깔끔한 스킨을 원하는 블로거 분들에게 추천드립니다.

🖥 브라우저 지원 환경

베이스캠프 스킨은 모던 웹 브라우저 대해서만 지원하고 있습니다. IE는 지원하고 있지 않고, 앞으로도 지원할 계획이 없으니 해당 브라우저 지원을 원하는 사용자분은 다른 스킨을 사용하시는 것을 추천합니다.

⚙️ 다운로드

다운로드 받기 전

깃허브 페이지로 이동한 후 아래 Watch 버튼을 활성화시키면 스킨 업데이트가 진행되었을 때 이메일로 자동으로 알림이 갑니다. 최신 베이스캠프 스킨을 이용하고 싶으신 블로거분들은 번거롭더라도 깃허브 회원가입 후 해당 프로젝트 Watch를 활성화 시켜주세요!

깃허브 베이스캠프 스킨 프로젝트 Watch

Watch를 활성화하시면서 그 오른쪽에 있는 별(🌟, Star)도 한번 꾹! 눌러주세요. 스타의 의미는 인스타그램의 좋아요와 비슷한 기능으로 스킨 개발자가 스킨 개발의 뿌듯함을 느낄 수 있는 부분입니다. 무료로 제공되는 스킨인 만큼 이용하실 때 스타 한번씩만 눌러주세요.😘

🎊 설치 방법

베이스캠프 스킨을 다운받으려면 여기를 클릭하세요.

 

ruden91/public-basecamp-skin

티스토리 무료 반응형 스킨 :: 베이스캠프. Contribute to ruden91/public-basecamp-skin development by creating an account on GitHub.

github.com

베이스캠프 스킨 깃허브 저장소로 이동한 후 Code > Download ZIP을 클릭하면 간편하게 다운로드할 수 있습니다!

다운로드 예시

스킨 등록 시 주의사항은 images 폴더 안에 있는 파일들까지 모두 업로드해야 정상적으로 스킨을 사용할 수 있습니다. 이점 꼭! 참고하시기 바랍니다. images 폴더 안에 있는 모든 assets들을 꼭!!! 업로드 해주세요.

✨ 특징

✏️ 폰트

베이스캠프 스킨은 기본적으로 "Noto Sans KR" 폰트를 사용하고 있습니다.

🚀 퍼포먼스

구글 검색 엔진에서 콘텐츠의 가치를 기준으로 문서 순위를 매기지만 웹사이트의 퍼포먼스도 그 기준에 영향을 준다는 점 알고 계셨나요? 최적화된 웹사이트의 경우 구글 검색 엔진이 좀 더 높은 점수를 준답니다. 베이스캠프는 스킨 사용자들에게 최적화된 SEO를 제공하기 위해 퍼포먼스를 고려해서 구현된 스킨입니다. 

베이스캠프 라이트하우스 수치

구글 퍼포먼스 측정도구인 라이트하우스(Lighthouse) 기준으로 매우 좋은 평점을 받은 스킨으로 굉장히 좋은 퍼포먼스를 보여주고 있습니다. (측정 수치는 네트워크나 실제 페이지에서 사용되는 광고수 그리고 다양한 변수로 인해 달라지는 점 참고바랍니다.)

 

Lighthouse  |  Tools for Web Developers  |  Google Developers

Learn how to set up Lighthouse to audit and improve your web apps.

developers.google.com

라이트하우스 퍼포먼스 부분에서 개선하지 못하는 부분은 티스토리에서 자동으로 삽입되는 스크립트가 대부분이라 스킨을 개발하는 개발자가 개선할 수 없는 영역입니다.

블로그 로딩 속도를 끌어올리기 위해 오프스크린 이미지 지연로딩을 적용했습니다. 아래는 Chrome dev tool에서 제공하는 네트워크 환경에 따른 테스트 결과입니다. 네트워크 환경은 fast3G(Download 1500 kb/s = 1.5 Mb/s, Latency = 550 ms)로 굉장히 느린 환경에서 이미지 지연 로딩이 적용된 예시입니다.

네트워크: fast3G (Download 1500 kb/s = 1.5 Mb/s, Latency = 550 ms) lazyload 적용예시

이미지 지연 로딩을 적용하면 아래의 장점이 있습니다.

  1. 블로그 초기 로딩 속도를 빠르게 할 수 있습니다.
  2. 특히 모바일 환경에서 유저들에게 좋은 사용자 경험을 전달할 수 있습니다.
  3. 불필요한 이미지 리소스를 받지 않기 때문에 유저들의 불필요한 데이터 낭비를 막을 수 있습니다.

🎨 반응형 웹디자인

베이스캠프 스킨 반응형을 사용하기 위해 티스토리 관리자 > 꾸미기 > 모바일로 이동하면 모바일 꾸미기 설정 페이지로 이동하게 되는데 여기서 티스토리 모바일웹 자동 연결을 사용하지 않습니다.를 선택한 후 저장해 주세요.

모바일 꾸미기 설정 예시

베이스캠프 스킨 반응형 데모 페이지를 보고 싶다면, 여기를 클릭하세요.

PC > Tablet > Mobile 반응형 예시

베이스캠프@1.0.0-rc8 버전부터 모바일 바텀 네비게이션을 제공합니다! 유저들은 기존보다 훨씬 편리하게 사이트를 이용할 수 있습니다. 현재 추천글 부분은 제공하지 않고, 1.0.0-rc9 버전부터 추천글 버튼 기능을 제공할 예정이니 참고해주세요!

모바일 바텀네비게이션 예시

모바일 환경 우측 사이드바 제거

모바일 디바이스에서 사용자에게 좋은 사용자 경험을 전달하기 위해 과감하게 우측 사이드바를 제거했습니다. 우측 사이드바를 제거함으로써 우측 사이드바에 존재하는 광고나 다른 콘텐츠들을 불러오는 리소스를 아꼈습니다.

만약 본문 커스텀 애드센스 삽입 기능을 사용한다면, 포스팅 내부에 삽입되는 애드센스 광고 개수 또한 증가하기 때문에 콘텐츠 내부 광고 노출량을 높임으로써 궁극적으로 수익률 향상까지 기대할 수 있습니다.

이전, 다음 포스트 유도 팝업

이전, 다음 포스트 유도 팝업은 min-width: 1090px 사이즈 이상의 디바이스에서만 노출되게끔 설계되어 있습니다.

⚡️ Vanilla JS

jQuery는 개발자가 DOM과 관련된 조작을 굉장히 편하게 작업할 수 있게 해 주는 이점이 있지만, Vanilla JS에 비해 퍼포먼스 면에서 그리 득이 되는 라이브러리는 아닙니다. 티스토리에서 기본적으로 jQuery 라이브러리를 import 시키기 때문에 제거할 순 없지만, 코드 작성에 있어 jQuery를 지양하고 순수 자바스크립트로 구현함으로써 좀 더 나은 퍼포먼스를 기대할 수 있습니다.

💸 본문 커스텀 애드센스 삽입 기능

본문 커스텀 애드센스 변수 예시

우리가 원하는 부분에 광고를 송출하기 위해서 상세 페이지의 자동 광고를 제외해주세요! 본문 커스텀 애드센스 삽입 기능을 실행하면 본문 내부의 h2태그 상단에 자동으로 광고가 삽입됩니다.

수익 > 애드센스 관리로 이동한 후 전체 자동광고 설정에서 글 본문을 제외하세요.

글 본문에 커스텀 애드센스를 적용하기 위해 자동 광고 글 본문 예외처리

해당 부분에 대해서 좀 더 자세한 정보를 원하신다면, 여기를 클릭하세요.

🔮 매력적인 사이드메뉴

사이드메뉴에 나를 소개할 문구와 배경이미지를 넣어보세요! 사이트를 좀 더 개성있게 만들어 다른 블로그와 차별화된 나만의 블로그를 만들어 보세요. 배경화면과 타이틀, 서브타이틀 그리고 설명문구까지 모두 커스터마이징 가능하답니다!

불로그에 개성을 불어넣어줄 사이드메뉴

스킨 편집에서 사이드메뉴에 존재하는 모든 프로필 정보를 커스터마이징할 수 있습니다.

스킨편집에서 프로필 내용을 수정하는 모습

💝 조금 더 특별한, 공감!

좀 더 매력적인 블로그로 만들기 위해 공감 기능에 매력적인 효과를 넣어줬습니다. 또한 독자가 포스팅을 모두 읽었을 때 공감을 유도하는 메시지까지 제공하고 있습니다. 해당 기능을 통해 공감수를 높이는 기대를 할 수 있습니다.

공감 이펙트 예시

해당 공감 이펙트는 아래 레퍼런스를 참고해 구현했습니다.

 

Twitter Like Animation Example

How Twitter implemented it's new like animation....

codepen.io

💑 사용자와 상호작용하세요!

베이스캠프 스킨에선 Toast 메시지를 통해 사용자와 상호작용할 수 있게 토스트 팝업 기능을 제공하고 있습니다.

Toast 메시지 예시

1.0.0-rc7 버전 이후로 토스트 메시지를 원하는 문구로 변경할수도 있답니다! 원하는 문구로 사용자와 상호작용하세요!

토스트 메시지를 커스터마이징할 수 있는 모습

📌 퀵메뉴

포스팅 좌측에 퀵메뉴를 제공하고 있습니다. 목차라고도 부를 수 있는 퀵메뉴는 독자들이 원하는 부분으로 쉽게 이동하게끔 유도하여 좋은 사용자 경험을 제공합니다.

베이스캠프 퀵메뉴(quickmenu) 예시

퀵메뉴를 만드는 방법은? 굉장히 간단하답니다. 단지 글을 작성할 때 제목1, 제목2를 적절하게 잘 사용만 하시면 됩니다.

티스토리 에디터에서 헤딩태그를 설정할 수 있다

제목(헤딩) 태그를 적절하게 사용하는 것은 퀵메뉴에 독자들에게 의미있는 메뉴를 노출하는 것 외에 SEO 측면에서도 굉장히 중요한 부분입니다. 헤딩 태그를 적절하게 배치함으로써 유저뿐만 아니라 크롤봇에게도 매력적인 콘텐츠를 만들어 보세요!

🎁 이 모든게 무료! 여러분께 무료로 제공합니다. 🎁

❗️ 저작권

베이스캠프 스킨은 무료로 배포되며, 무단 배포 및 저작권 명시 부분 수정, 재배포를 금지하고 있습니다. 또한 해당 스킨은 판매의 목적으로 사용될 수 없습니다.
무료로 제공되는 스킨인 만큼 기본적인 스킨에 대한 규정을 지켜주세요.
하단 푸터(Footer)에 존재하는 "Designed by 베이스캠프" 표기는 고정해야하며, 해당 사항을 어기는 사용자가 발생 시 해당 스킨의 무료 배포가 중단될 수 있으며 업데이트 및 개선사항 반영도 진행되지 않는다는 점 유의하시기 바랍니다. "Designed by 베이스캠프"를 제외한 카피라이트 문구는 스킨 편집에서 수정할 수 있으니 자유롭게 문구 변경하셔도 무방합니다.

Designed by 예시

🤝 피드백

해당 스킨을 이용하다가 불편함을 느낀 부분이나 개선했으면 좋을 것 같은 점이 있다면 주저하지 마시고, 해당 저장소의 이슈(Issue)에 글을 남겨주세요! 다음 업데이트 사항에 해당 피드백을 반영하겠습니다.
깃허브 이슈 페이지는 여기를 클릭하면 이동할 수 있습니다.
베이스캠프 스킨의 퀄리티를 높이기 위해서는 스킨을 사용해주시는 여러분의 소중한 피드백이 필요합니다. 가감 없이 많은 피드백 부탁드립니다!

❤️ 기부

베이스캠프 스킨은 기본적으로 무료로 배포됩니다! 베이스캠프 스킨을 다운로드하기 전에 스킨 개발자를 위해 별(🌟, Star)을 한번 꾹 눌러주세요!

깃허브 별점은 개발자에게 큰 힘이 됩니다

스킨을 유용하게 사용하고 계시다면, 스킨 개발자에게 🍻맥주 한잔 선물하는게 어떨까요? 스킨 개발자에게 고마움을 전달하는 방법은 아주 간단해요! 아래 링크로 이동하면 스킨 개발자에게 맥주 한잔을 간편하게 선물할 수 있습니다.

728x90
반응형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

158개의 댓글

  • 이전 댓글 더보기
  • Favicon of https://monstergreen.tistory.com 초록괴물

    2021.04.04 17:28 신고

    계속 물어봐서 죄송해요ㅠㅠ
    스킨옵션에서 본문 줄 간격을 수정할 수 있다고 하셨는데 저는 왜 폰트 사이즈 수정만 있을까요. ㅠㅠ

  • Favicon of https://ardr.tistory.com ZLB

    2021.04.04 19:12 신고

    질문있습니다. 구글 SEO 맞추기 위해서 page speed 점수를 확인 해봤는데 너무 낮게 나오더라고요 .
    좀 끌어올릴 수 있는 방법이 없나요? 아니면 이 스킨을 쓸 경우에 그것은 감수해야하는 것인가요?
    잘 몰라서 질문남깁니다.

  • Favicon of https://baekdoraji.tistory.com 차차백조

    2021.04.04 22:37 신고

    개발자님!! 개발자님 스킨으로 하자마자 애드센스 승인 받았습니다 !!
    감사합니다 ㅜ

  • Favicon of https://baekdoraji.tistory.com 차차백조

    2021.04.04 22:38 신고

    개발자님ㅜㅜ 개발자님 스킨으로 바꾸고 바로 애드센스 승인 받았어요!!
    우앙 ~!! 너무 감사드려용 ㅎㅎ 조만간 수익내서 코인 날리겠습니다 ! ㅎ
    너무너무 감사합니다 ~~~~!! 꺄아ㅏㅏㅏ !! 남양주 개발자님 짱짱 !!

  • Favicon of https://deusexmarchina.tistory.com 제카르도

    2021.04.07 21:27 신고

    너무 이쁘고 잘쓰고 있습니다 ㅎㅎ


    혹시 다크모드도 추가 하실 생각은 없으신가요

    버튼으로 다크모드 라이트모드 on/off 할 수 있게

    • Favicon of https://webruden.tistory.com 남양주개발자

      2021.04.07 22:19 신고

      2.0에서 추가될 예정입니다 :)
      현재는 스킨 개발을 조금 쉬는 중이라 차차 업데이트 진행할게요ㅠㅠ
      이용해주셔서 감사합니다 :)

  • Favicon of https://koreafrom.tistory.com Storyerp

    2021.04.14 14:37 신고

    좋은 정보가 많네요..자주 오겠습니다. 아참..근데 암호화폐 후원하기는 어떻게 넣으신건가요??

  • Favicon of https://asenteller.com ʕ·͡ᴥ·ʔノ

    2021.04.15 21:00 신고

    .gitignore

    스킨등록에서 위 항목만 등록이 안됩니다. 일시적오류로 좀있다가 다시 시도하라는 글만 계쏙 뜨내요. 제 컴 문제일까요? 저걸빼고 일단 다등록했는데 적용이 되긴하는데... 안올라가는 저건 어떤기능을 하는건지...

  • Favicon of https://asenteller.com ʕ·͡ᴥ·ʔノ

    2021.04.16 18:33 신고

    h2,3 태그 위아래로 마진을 주어서 p태그와 간격을 주려는데 어디를 변경해야할까요.. 기본 티스토리랑 달라서 f12눌러도 모르겟어요... 마크다운 샬라샬라 되있어서...

    그리고 태그매니저 넣는곳이, 애널리틱스에 무효트래픽 추적하고 하는 그거 넣는 것인가요?

  • Favicon of https://angoon.tistory.com 안군블로그

    2021.04.16 21:33 신고

    좋은 스킨 감사합니다 스킨 변경하고 싶었는데 바꿔야 되겠어요^^

  • Favicon of https://topicis.tistory.com 퍼니즈

    2021.05.04 11:34 신고

    스킨 잘쓰겠습니다 다름이 아니라 스크롤을 내리면 좌측에 뜨는 공감버튼이랑 공유버튼이 안 사라지고 계속 나타나게 할수 있나염?

  • Favicon of https://quddydwjswk.tistory.com 병용전자

    2021.05.08 20:46 신고

    안녕하세요 스킨 잘 쓰고 있어요. 제 블로그에는 소제목을 사용하는데요. <h5 style="font-size: 28px; font-family: Arial,Nanum Gothic, Dotum, AppleGothic, sans-serif; border-bottom: #32407a 2px solid; margin: 10px 0px 5px; border-left: #32407a 10px solid; letter-spacing: -0.07em; line-height: 35px; padding: 0px 10px 1px 10px;"><b>블루 RGB(50,64,122)</b></h5> 이 코드를 이용해서 소제목을 넣는데 애드센스를 위해서 h2 태그로 해두니 소제목 세로줄이 끝도 없이 길어지는 문제가 발생합니다. h5로 해두니 세로줄이 길어지는 문제는 없지만 h2로 해두고 공개나 비공개로 해두니 바로 문제가 발생하더라구요. 어떡해야할까요?

  • Favicon of https://gamsungreview.tistory.com 귿보이

    2021.05.14 19:14 신고

    썸네일의 이미지들이 정사각형이 아닌 직사각형으로 보이는데
    1:1 비율의 정사각형 사이즈로도 변경이 가능한가요?

  • Favicon of https://lnstagram.kr pmuk

    2021.05.21 11:39 신고

    감사합니다!! 너무 깔끔해서 좋아요. 질문이 있는데요. H2,H3 글자크기를 같게 만들고싶은데 수정할 방법이 없을까요

  • Favicon of https://ssummersnight.tistory.com ㄹl애

    2021.05.21 13:37 신고

    멋지시네요. 처음이라 하나하나 보면서 하느라 눈이 침침 ^^

  • Favicon of https://topicis.tistory.com 퍼니즈

    2021.05.23 22:30 신고

    우측에 공감버튼이랑 공유 버튼 어디서 수정해야 하나여? 위치가 안 보여서 ㅠㅠ

  • Favicon of https://topicis.tistory.com 퍼니즈

    2021.05.23 22:30 신고

    그리고 공유버튼을 다른곳에 위치하고 싶은데 방법점여 텍스트로 하고 싶습니다

  • Favicon of https://devgraphy.tistory.com Devgraphy

    2021.06.06 16:45 신고

    마크다운으로
    - 표시가 표현이 안되는데 어떻게 해결할 수 있을까요?

  • Favicon of https://devgraphy.tistory.com Devgraphy

    2021.06.06 16:52 신고

    마크다운으로 리스트 작성하려는데 - (대시)로 쓴 것들이 표시가 안되는데 문제 해결할 수 있을까요???

  • Favicon of https://gyu-investing.tistory.com bobgyu

    2021.06.06 23:09 신고

    저도 언젠가 이런 스킨 만들어보고 싶네요. 웹개발쪽은 html이 어떻게 구성되어있는지밖에 몰라서 까마득합니다 ㅋㅋㅋ 스킨 감사히 잘 사용하겠습니다~

  • Kwanjini@gmail.com

    2021.07.06 08:11

    베이스캠프 스킨 잘 사용하고 있습니다. 기존에 여러 스킨 사용했는데 정말 제가 원하던 스킨 스타일이어서 너무 감사하면서 사용하고 있습니다. 다만 사용하면서 몇가지 향후에 개선하실때 반영해주셨으면 하는 사항이 있어 글 남깁니다.
    1. 상단 앵커광고가 안됩니다.
    2. 본문에 인용 설정시, 왼쪽 바 현식으로 이용하는 스타일 적용이 안됩니다.

    감사합니다.