티스토리 각주 기능 완벽 지원 | MINy MAC Skin으로 가독성을 극대화하는 법
티스토리 각주 기능, 제대로 쓰고 싶었던 이유
정보 정리하는 글 쓸 때마다 고민되는 게 하나 있었다.
본문 흐름은 끊고 싶지 않은데, 출처나 보충 설명은 어딘가에 남겨두고 싶을 때.
예를 들면 "이 방법은 2023년 기준으로 유효하다" 이런 문장 뒤에 (2025년 현재는 정책이 바뀌었을 수 있음)
이런 식으로 짧게 덧붙이고 싶은 순간. 그럴 때 쓰는 게 각주(Footnote)인데, 티스토리 기본 각주는 솔직히 좀 아쉬웠다.
기존 각주의 불편했던 점
- 디자인이 투박하다
본문이랑 따로 노는 느낌. 그냥 밑에 회색 글씨로 쭉 나열되는 식. - 링크를 바로 못 누른다
각주 안에 링크 넣으면 그냥 텍스트로만 보임.
클릭하려면 따로 복사해서 주소창에 붙여넣어야 했음. - 모바일에서 가독성 떨어진다
글 하단에 각주 설명이 길게 쌓이면 스크롤이 불필요하게 늘어남. - 코드가 직관적이지 않다
[❤️footnote]내용[/❤️footnote] 이런 식인데, 매번 기억 안 남.
그래서 MINy MAC Skin 만들 때 "각주도 제대로 쓰게 해보자" 싶었다.
바뀐 점 1. 한글로 써도 된다
기존에는 이렇게 써야 했다.
[❤️footnote]각주내용[/❤️footnote]
이제는 이것도 된다.
[❤️각주]각주내용[/❤️각주]
영어 외울 필요 없이 그냥 한글로 써도 똑같이 작동한다.
실제로 써보니까 훨씬 편했다. 글 쓰다가 각주 넣을 때 손이 멈추지 않는 느낌.
👉 실제 출력 예시 [각주] 이렇게 나온다 :D [/각주]
바뀐 점 2. 하단 각주 목록 없앰
기존 티스토리 각주는 글 맨 아래에 각주 설명이 자동으로 쌓인다.
근데 솔직히, 그거 꼭 필요한가 싶었다.
각주 번호 누르면 바로 내용 보이는데 굳이 하단에 또 정리해서 보여줄 이유가 있나?
그래서 과감하게 뺐다.
결과적으로
- 본문 흐름 안 끊기고
- 스크롤 불필요하게 안 늘어나고
- 화면이 훨씬 깔끔해졌다.
바뀐 점 3. 각주 안 링크 바로 클릭 가능
이게 제일 답답했던 부분이었다.
각주에 참고 링크 넣어도 기존엔 그냥 텍스트로만 보였음.
이제는 이런 것들 다 클릭 가능하다.
- 일반 URL
- 티스토리 내부 링크
- 텍스트에 걸린 링크
👉 실제 출력 예시 1
출처 남기거나, 관련 글 연결할 때 확실히 편해졌다.
디자인은 최대한 심플하게
각주가 너무 튀면 본문 읽는 흐름이 깨진다.
그래서 iOS / macOS 스타일처럼 "있는데 없는 것처럼" 만드는 게 목표였다.
- 과하지 않은 강조
- 본문이랑 자연스럽게 어울리는 색감
- 클릭했을 때만 살짝 뜨는 구조
각주도 콘텐츠의 일부라고 생각하면서 만들었다.
주의사항
위에서 설명한
- 한글 각주 코드
- 각주 안 링크 클릭 기능
이 두 가지는 MINy MAC Skin 전용이다.
다른 스킨으로 바꾸면 정상 작동 안 될 수 있으니 참고해서 쓰면 된다.
마무리
각주 기능 자체는 작은 요소인데,제대로 지원되니까 글 쓰는 방식 자체가 좀 달라졌다.
예전엔 "이거 각주로 빼야 하나 말아야 하나" 고민하다가
그냥 본문에 다 때려박곤 했는데,이제는 꼭 필요한 건 본문에 두고 보충 정보는 각주로 자연스럽게 빼는 게 편해졌다.
정보 정리 글이나 리뷰 많이 쓰는 사람이라면 한 번쯤 써볼 만하다고 생각한다.
- https://miny.tistory.com/ 이렇게도 가능하고 티스토리 링크 도 가능합니다. [본문으로]