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

남양주개발자

·

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
반응형

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

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

143개의 댓글

  • 이전 댓글 더보기
  • Favicon of https://thank.happydal.net ^*;*^

    2021.03.05 16:58 신고

    감사합니다. 한가지 더 문의드립니다. 사용하다 보니 2차 도메인으로 연결한 브롤그에서는 프로필을 눌러도 펼쳐지지가 않고 그냥 홈화면이 새로 고침이 됩니다. 프로필 화면이 펼져지게 하려면 어떻게 해야할까요?

  • Favicon of https://thank.happydal.net ^*;*^

    2021.03.05 18:02 신고

    제가 이동중이라 나중에 올려드려보겠습니다. 신경써 주시어 감사합니다.

  • Favicon of https://weweb.tistory.com ·♛·

    2021.03.20 18:41 신고

    멋진 스킨 감사합니다. 혹시 이 스킨은 게시글 수정이 관리자 모드로만 들어가야 수정할 수 있나요? 올라가 있는 글 내에서 수정 버튼이 없는 것 같은데.. 의도하신 점인지 궁금합니다!

  • Favicon of https://www.ziwoogae.com 지우개닷컴

    2021.03.22 23:28 신고

    스킨이 깔끔해요. 공유해 주셔서 감사합니다.

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

      2021.03.23 06:56 신고

      사용해주셔서 감사합니다

    • Favicon of https://www.ziwoogae.com 지우개닷컴

      2021.03.23 10:47 신고

      남양주님 예쁜 스킨 공유해 주셔서 감사드려요.

      스킨 하단 부분에 공유 버튼을 눌러 "주소 복사 후 붙여넣기"를 하니 URI 디코딩이 잘 안되더라구요.

      나중에 시간 나실 때 한번 확인해 주시면 정말 감사드리겠습니다.

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

      2021.03.23 10:54 신고

      한번 확인해보겠습니다!
      요즘 회사일과 이것저것 병행하다보니 업데이트할 시간이 없네요ㅠㅠ
      얼른 정리해서 좀 더 업그레이드된 버전으로 찾아뵙도록 하겠습니다

    • Favicon of https://www.ziwoogae.com 지우개닷컴

      2021.03.23 11:00 신고

      네, 말씀감사드립니다. 쉬엄쉬엄 시간 나실 때 한번 봐 주세요^^

  • Favicon of https://likeyam.com 서이쿤

    2021.03.23 00:10 신고

    대박이네요 멋져요 잘사용하겠습니다 ㅎ

  • Favicon of https://monstergreen.tistory.com 초록괴물

    2021.03.23 10:06 신고

    안녕하세요! 베이스캠프 스킨 너무 잘 사용하고 있습니다. 감사합니다!
    궁금한게 있어서 댓글 남깁니다.
    모바일버전에서는 로그인을 하지 않아도 사이드메뉴를 열 수 있는데
    PC버전에서는 사이드메뉴를 열면 로그인창으로 넘어가집니다 ㅠㅠ

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

      2021.03.23 10:18 신고

      해당 사이트를 들어가서 사이드메뉴 눌러봤는데 정상적으로 잘 작동하는 것 같아요!

    • Favicon of https://monstergreen.tistory.com 초록괴물

      2021.03.26 09:58 신고

      감사합니다.
      혹시 유튜브 동영상을 반응형으로 삽입하는 방법이 있을까요?
      모바일에서는 동영상 크기 조절이 힘드네요 ㅠㅠ

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

    2021.03.26 23:36 신고

    진짜 지리네요...

  • Favicon of https://monstergreen.tistory.com 초록괴물

    2021.03.29 10:02 신고

    안녕하세요! 스킨 정말 이쁘게 잘 사용하고 있습니다.
    궁금한게 있어서 댓글 남겨봅니다.

    * 본문 줄 간격은 CSS에서 찾아보는데 어딜 건드려야 할까요 ㅠㅠ

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

      2021.04.04 16:35 신고

      일단 기본적인 간격은 스킨 옵션에서 조절이 가능하고, 만약 더 상세하게 조절하시려면 .markdown 부분을 손보셔야되어 좀 까다로우실 것 같습니다

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

    2021.04.02 12:59 신고

    너무 이뻐요! 그런데 저는 적용이 안되네요 ㅠㅠ 왜그럴까요? ㅜㅜ
    그리고 암호화폐 후원하기 팝업창 어떻게 하신건가요??

  • Favicon of https://nhj12311.tistory.com IT's me

    2021.04.02 15:34 신고

    몇몇 글을 보다가 스킨이 참 깔끔하다 했는데 원작자셨군요. 굳.

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

    2021.04.04 16:30 신고

    안녕하세요^^
    정말 제가 원하던 스킨을 찾았습니다 !!
    너무 감사합니다 ~!!

    제블로그는 아직 유익한 정보나 볼것들이 없지만,
    추후 저도 도움이 되는 것을 하고 싶어요 ㅎ

    코인 후원 받기도 설정이 가능한가요?? 보이지 않아서요^^ ㅋ

    시간되시면 부탁드릴게요 ~!!

    정말 므쩌요~!! 대단하십니다 !! ㅋ

  • 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 Arthur

    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 신고

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