본문 바로가기
SSAFYcial/기획 기사

개발 블로그 시작하기 #2. 블로그 플랫폼 추천 (1) TISTORY 티스토리

by simply._. 2022. 9. 27.

목차

    인사말

    안녕하세요. 오늘은 두 번째 기획 기사로 개발 블로그 플랫폼을 소개해드리고자 합니다. 네이버 블로그, Wordpress, Medium, velog 등 다양한 블로그 플랫폼이 존재합니다. 각각 다른 특징이 있어서, 처음 블로그를 시작할 때 플랫폼 선택에 고민을 하게 되더라고요.

     

    저는 그중에서도, 제가 글을 쓰고 있는 바로 이 플랫폼, 티스토리에 대해 다룰 예정입니다. 제가 비록 짧지만, 약 6개월이라는 시간 동안 사용하면서 많은 장점이 있다고 생각이 돼서 설명드리게 됐는데요. 회원 가입부터 기초적인 부분 위주로 이야기하려고 합니다. 


    0. TISTORY란?

    👇TISTORY 홈페이지                

     

    TISTORY

    나를 표현하는 블로그를 만들어보세요.

    www.tistory.com

    Tistory는 카카오에서 운영 중인 블로그 플랫폼입니다. 이로 인해 다음 검색 노출에 유리하고, 카카오 계정을 연동해 가입할 수 있다는 장점이 있어요. 대신 다음을 제외한 다른 사이트의 검색 노출은 다소 불리한 점이 있다는 단점이 있습니다.

     

    티스토리의 가장 큰 장점은 블로그 운영의 자율성이 높다는 것입니다. HTML, CSS, Javascript로 페이지를 만들 수 있고, 글 쓰기 또한 HTML과 Markdown을 사용할 수 있습니다. 물론 기존 테마를 활용한다면 HTML과 CSS를 몰라도 충분히 블로그 운영이 가능합니다.

     

    또한, 한 계정으로 여러 개의 블로그를 운영할 수 있다는 장점도 있습니다. 이제 막 개발 공부를 시작하신 분들께는 기본 기능을 사용하다가, 공부 후에 더 다양하게 활용해 볼 수 있어 좋을 듯합니다. 다만, 코딩에 더 특화돼 있는 플랫폼도 있어 코딩뿐만 아니라 글쓰기도 함께 하실 분들께 더 추천드리고 싶네요.


    1. 블로그 만들기

    티스토리는 카카오 계정 또는 티스토리 계정으로 로그인할 수 있으며, 신규 가입은 카카오 계정으로만 가능합니다. 가입 시 닉네임, 블로그 이름, 블로그 주소, 블로그 스킨을 선택하면, 회원 가입 및 블로그 생성이 완료됩니다. 다른 설정은 모두 수정이 가능하나, 블로그 주소는 수정이 불가능합니다.

     

    앞서 언급했듯이 티스토리는 한 계정으로 여러 개의 블로그를 생성할 수 있습니다. 한 계정 당 5개의 블로그 운영이 가능하며, 총 10회 블로그를 개설할 수 있습니다. 목적이 다른 여러 블로그를 운영할 생각이 있는 분들에게 좋을 듯합니다.


    2. 글쓰기

    먼저 블로그의 핵심인 글쓰기에 대해 먼저 설명드리려고 합니다. 글쓰기는 사실 설명 없이도 충분히 가능한 부분이긴 하지만, 내용적인 부분보다는 티스토리에서 사용할 수 있는 기능 위주로 말씀드리려 합니다. 글쓰기 모드와 코드 작성법을 언급할 예정입니다.

     

    1) 글 작성하기

    티스토리에서 글을 쓰는 방법은 기본모드, 마크다운, HTML이 있습니다. 글쓰기 페이지의 오른쪽 위에서 모드 변경이 가능합니다. 마크다운과 HTML을 아신다면 유용하게 활용이 가능한데요. 마크다운은 기본모드의 일부 기능이 안 되는 경우가 있어 모드 변경 시 주의가 필요합니다.

     

    ✔️기본모드

    ✔️마크다운

    ✔️HTML

     

    2) 코드 작성하기

    아마 글을 쓰시다 보면 코드를 함께 작성하실 일도 있으실 텐데요. 티스토리에서 코드를 작성하는 방법도 매우 다양합니다. 저는 그중에서도 티스토리 자체 코드블럭 입력 기능, Color Scripter, Trinket 이 세 가지를 설명하려고 합니다. 각각 다른 특징이 있어서 자신에게 잘 맞는 방법을 찾아 쓰시면 좋을 듯합니다.

     

    ✔️코드블럭 삽입

    print("Hello Python")

     

    글쓰기 기본모드에서 오른쪽 위의 ···를 누르신 뒤, 코드블럭을 누르시면 됩니다. 작성하고자 하는 언어를 선택하신 뒤 코드를 입력하시면 됩니다. 마크다운에서는 ```을, HTML에서는 <code> 태그를 사용하시면 됩니다. 코드블럭 삽입의 장점은 다른 사이트 접속이나 회원가입 필요 없이 바로 코드 작성이 가능해 편리하다는 점입니다.

     

    ✔️Color Scripter

     

    Color Scripter

    Simple & Flexible Syntax HighLighter

    colorscripter.com

    1
    print("Hello Python")
    cs

     

    Color Scripter의 사용 방법은 간단합니다. 사이트 접속 후, 코드를 작성하신 뒤 왼쪽 아래 HTML로 복사를 눌러주세요. 그다음 글쓰기 모드를 HTML로 바꾸고 복사한 HTML를 붙여 넣으시면 됩니다. 줄 번호, 다크 모드 설정이 가능하고 가독성이 높다는 장점이 있어요.

     

    ✔️Trinket

     

    Trinket

    Trinket Premium Plans Designed with individual learners and educators in mind, premium plans offer more power and convenience. View Premium Plans Free Support for Educators Educators are a key part of our mission. We offer free support to all verified educ

    trinket.io

     

    먼저 Trinket 접속 후 회원가입을 진행해 주세요. 회원가입을 하셨다면 로그인 후 Home에서 오른쪽 위의 'New Trinket'을 눌러주세요. 그럼 여러 언어가 나타나는데, 작성하실 언어를 선택해 주세요. 이후 뜨는 창에서 코드를 입력해 주세요. 코드 입력이 완료됐다면 파일명 위에 공유 아이콘을 눌러주세요.

     

    다음에는 Embed를 누르시고, 코드를 복사해 주세요. 이제 복사한 코드를 HTML 모드에서 붙여 넣으시면 됩니다. Trinket에서 봤던 창이 그대로 삽입됩니다. 실행 버튼을 누르면 코드 실행을 할 수 있습니다. 만약 HTML, CSS, JavaScript를 실행하고 싶으시다면 다른 웹사이트인 Codepen을 사용해 보시는 것을 추천드려요!


    3. 블로그 꾸미기

    세 번째로는 블로그의 디자인에 대해 이야기해보고자 합니다. 블로그 관리 페이지 > 꾸미기에서 다양한 설정을 하실 수 있는데요. 그중에서도 스킨 변경에서는 설정된 스킨을 확인할 수 있고, 그 아래 스킨 편집에서는 스킨의 세세한 부분을 설정할 수 있습니다.

     

    ✏️관리 페이지를 못 찾으시겠다면, 블로그 주소 뒤에 /manage를 붙이면 접속 가능합니다.

     

    1) 기존 스킨 사용하기

    우선, 티스토리를 처음 접하시는 분들, 아직 HTML과 CSS를 잘 모르시는 분들께 적합한 방법인데요. 티스토리에서 제공되는 기본 스킨이나 다른 사용자의 스킨을 활용하는 것입니다. 기본 스킨도 다양하고, 깔끔해 사용하시기 좋습니다. 저도 기본 스킨 중 하나인 Book Club 스킨을 약간 수정해서 사용하고 있습니다.

     

    또한, 인터넷에 검색해 보시면 개인이 만들어서 무료로 제공하는 스킨도 찾아보실 수 있습니다. 이러한 경우에는 스킨 변경 > 스킨 등록해서 사용하실 수 있습니다. 저작권에 유의해서 사용하시면, 기본 스킨보다 더 다양한 기능을 지원하는 경우도 많아서 유용하리라 생각합니다.

     

    2) 나만의 스킨 제작하기

    티스토리에서 제공하는 기본 스킨도 사용할 수 있지만, 직접 원하는 스킨을 만드는 것도 가능합니다. HTML, CSS, JavaScript를 이용하시면 되는데요. 더 자세한 내용은 아래 링크에서 티스토리 스킨 제작 가이드를 확인해 주세요.

     

    소개 · GitBook

    티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토

    tistory.github.io


    4. TIP

    마지막으로 앞서 말씀드렸던 기본적인 기능 외에도 제가 티스토리를 활용하면서 유용하다고 느꼈던 기능들을 소개해 드리려 합니다. 꼭 필요한 부분은 아니라 본인의 취향에 따라 추가할 수 있는 기능들이니 원하시는 바에 따라 적절히 활용하시면 좋을 듯합니다.

     

    1) 목차 만들기

    제 블로그를 PC에서 접속하신 분들이 시라면 글 왼쪽에 목차를 보실 수 있을 텐데요. 목차는 전체적인 글의 내용을 파악할 수 있게 해 줄 뿐만 아니라, 원하는 부분만 보기도 편하다는 장점이 있습니다. 왼쪽 목차를 하나를 클릭해 보시면 해당 목차 내용이 시작되는 지점으로 스크롤이 이동합니다.

     

    제가 사용한 스크롤을 따라다는 플로팅 목차도 있고, 글 맨 위에 삽입되는 목차 등 HTML, CSS, JavaScript로 직접 구현하시면 됩니다. 직접 하지 못하더라도, 구글링 하시면 코드를 몰라도 할 수 있습니다😊 저도 플로팅 목차를 넣을 당시에는 HTML, CSS를 전혀 모르는 상태였답니다.

     

    2) 검색 등록

    작성한 글을 많은 사람들과 공유하고 싶으시거나 포털사이트 검색을 통한 유입을 원하시는 분들께 추천드리는 방법입니다. 여러 사이트에 검색 등록을 해, 등록한 사이트에서 내 블로그 검색 및 유입이 가능하도록 하는 것인데요. 이 블로그는 Daum, Naver, Google, Bing, Zum에 검색 등록해둔 상태입니다. (아래 사진 참고)

     

    ✔️Google 검색 등록: Google Search Console

    ✔️Naver 검색 등록: 네이버 서치어드바이저 (naver.com)

    ✔️Daum 검색 등록: Daum 검색등록

    ✔️Bing 검색 등록: Bing Webmaster Tools

    ✔️Zum 검색 등록: ZUM - 사이트 검색등록

    empty

    empty

     

     

    검색 등록은 위 리스트에서 링크에 접속해하시면 됩니다. 티스토리의 경우, 다음 검색 등록을 하지 않아도 자동으로 검색 등록이 됩니다. 하지만, 저는 검색 등록이 제대로 돼 있지 않다는 걸 확인하고 고객센터에 문의했었어요. 한 번쯤은 검색이 되는지 확인해 보시는 것을 권해드려요.

     

    3) 플러그인 기능

    블로그 관리 페이지 > 플러그인에 들어가시면 다양한 기능을 추가할 수 있는 플러그인을 보실 수 있습니다. 앞서 설명드린 구글 검색 등록도 플러그인에 있습니다. 플러그인 중에 코드 문법 강조도 있어서, 코드 블럭의 스타일을 바꾸실 수도 있습니다.

     

    이외에도 다양한 티스토리 기능을 알고 싶으시다면 아래 티스토리 공식 블로그를 참고하시면 좋을 듯합니다.

     

    👇티스토리 업데이트 소식, 가이드, 사용 팁 등을 볼 수 있는 티스토리 공식 블로그입니다.  

     

    TISTORY

    티스토리의 새로운 소식을 전합니다.

    notice.tistory.com


    마무리

    오늘 포스팅은 여기까지입니다. 읽어주셔서 감사합니다😊

     

    👉 이전 기획 기사 #1 블로그 운영 이유 보러가기       

     

    개발 블로그 시작하기 #1. 개발자는 왜 블로그를 운영할까? | Engineering Blog

    인사말 안녕하세요! 기획 기사로 돌아온 8기 SSAFYcial 서지윤입니다. 오늘은 올해 하반기 동안 이어지는 제 기획 기사에 대해 설명하고, 첫 번째 이야기를 풀어나가려고 합니다. 제 기획 주제는 '

    p-lay-ground.tistory.com

    반응형