개인 사이트, 어디까지 만들어봤니? - ③ 티스토리

나는 HTML을 티스토리에서 처음 접했다.

계기는 단순했다. 온라인 채팅 로그를 플랫폼 외 공간에서 보고 싶었다. 근데 로그는 HTML로 구성되어 있었고, 이걸 플랫폼처럼 보려면 HTML로 글을 올릴 수 있는 사이트가 필요했다. 그게 티스토리였다.

따라서 자잘한 티스토리 팁 겸 HTML을 처음 접하며 느낀 고충을 모아보고자 한다.

---

티스토리의 가장 큰 장점을 꼽자면 자유로운 HTML을 예로 들 수 있을 것이다. 위에 적은 바와 같이 게시글 내에서도 HTML 기능을 사용할 수 있으며, 직접 스킨을 제작하는 것도 가능하다. 메인 페이지를 직접 꾸미고, 슬라이드 기능을 넣고, 메뉴를 좌측이든, 우측이든, 상단이든, 어떤 폰트로 어떤 크기만큼 넣을 지도 자유롭게 정할 수 있는 것이다.

덕분에 아래와 같은 커스터마이징이 가능하다.

스킨 고르기

티스토리 기본 스킨도 퀄리티가 좋은 편이지만, 구글에 티스토리 스킨을 검색하면 다양한 유/무료 스킨을 볼 수 있다.

📝 스킨 출처 - 묘연 티스토리 스킨 62 커버 버전

제작자에 따라 스킨 에디터 화면을 별도로 제공하기도 한다. 그 외 수정 기능은 스킨 편집 > html 편집에서 CSS 탭을 보면 된다. 시각적인 요소는 모두 여기서 고친다.

혹시 이미지나 폰트를 직접 첨부해서 사용해야 할 경우, 마찬가지로 html 편집 > 파일 업로드 탭에서 파일을 첨부하면 CSS 코드 내에서 쓸 수 있다. 물론, 용량이 클수록 로딩 시간이 걸리니 폰트는 웹폰트(woff)로, 이미지는 webp로 바꿔두는 게 좋다.

사이트에 들어갈 컬러 고르기

포토샵이나 일러스트레이터에서 쨍하고 화려한 컬러를 다루는 데에 익숙해져 있다가 처음 HTML을 접한 순간, 가장 먼저 느낀 건 막막함이었다. 온라인 이미지를 만들 때 예뻤던 컬러를 홈페이지에 넣으면 열에 아홉은 눈이 아프거나 안 보였기 때문이다.

이런 알록달록한 컬러는 웹페이지 만들 때 쓸 수 없다. 이유는 넣어보면 안다.

따라서 처음 개인 페이지를 디자인한다면, 핀터레스트 등에서 ‘ui color’ 키워드를 검색 후 나오는 검색 결과 기준으로 탐색하는 게 도움이 됐다. 실제 웹에 얹었을 때 각 컬러가 어떻게 어우러지는지 감을 잡을 수 있기 때문이다.

얹은 컬러끼리 잘 맞지 않을 경우, 무작정 색을 바꾸고 다시 적용하기를 반복하기보단 해당 요소를 오른쪽 마우스로 클릭 => 검사 버튼을 눌러 나오는 탭에서 color를 직접 조정하는 게 편했다. 컬러 팔레트를 보면서 직접 색을 고를 수 있으므로 덜 헤매게 된다.

웹페이지 폰트 고르기

적절한 폰트를 정하는 것도 난제였다. 억지로 넣어보다가 안 되겠다 싶어 지금까지 접해왔던 온갖 사이트들에 접속해 무슨 폰트를 주로 쓰는지, 어떤 크기로 글씨를 넣는지 일일이 조사하기도 했다.

폰트 종류의 경우, ‘웹 가독성 높은 한글 폰트’ 같은 걸 검색했다. 프리텐다드가 나오기 전이었기에 대부분 Noto Sans를 추천해 주곤 했다. 하지만 당시의 나는 뻔한 선택지를 고르고 싶지 않았고, 세상에 폰트가 이렇게 많은데 더 예쁘고 잘 보이는 폰트도 한둘쯤은 있을 것 아닌가. 하는 마음으로 온갖 시도를 해보았다.

그리고 한참 후 Noto Sans로 돌아왔다. 웹에서 쓰는 폰트는 일반 그래픽 디자인에서 쓰이는 것과 다르다. 몇 시간의 사투 끝에 내린 결론이었다.

(🔗 프리텐다드 폰트 다운로드 페이지)

대부분의 사이트는 가독성이 압도적으로 높은 산세리프(고딕 폰트)를 사용할 것을 권장한다. 한글이라면 그중에서도 프리텐다드가 교과서로 통한다. 다양한 웨이트(굵기)가 있어 활용성이 높고, 잘 읽히기 때문이다. 그렇기 때문에 오히려 ‘교과서다움’에서 탈피를 시도하는 사이트도 종종 보인다. 대부분의 한국 웹 환경이 프리텐다드, 혹은 프리텐다드의 본체인 본고딕으로 구현되다보니 다른 고딕 폰트를 쓰면 신선한 느낌을 받을 수 있다.

(🔗 리디 바탕 폰트 다운로드 페이지)

다시 제작 당시의 얘기로 돌아가자면, 나는 산세리프를 피해서 리디 바탕을 골랐다.

📝 스킨 출처 - 묘연 티스토리 스킨 47

내가 만들 페이지는 긴 텍스트 줄글이 주로 들어갈 예정이었고, 그중에서도 리디 바탕은 세리프(바탕 폰트) 특유의 부드러움을 살리면서 PC/MO 양쪽에서 가독성이 잘 확보되는 편이었다. 덕분에 요즘도 종종 사용한다.

맥시멀리스트 사이트 만들기

컬러, 이미지, 폰트를 모두 적용하고 나면 좀 개인 사이트 같다는 느낌이 든다. 하지만 여기서 개성을 더 살리고 싶다면, 아래의 요소를 추천한다.

로딩 이미지

말 그대로 티스토리 내에서 로딩 시 나오는 아이콘을 바꿀 수 있다.

(🔗 icons8 로딩아이콘 사이트)

준비한 로딩 아이콘이 있는 게 아니라면 위와 같이 로딩 아이콘을 제공하는 곳에서 마음에 드는 아이콘을 고르고, 컬러 커스터마이징만 해서 쓰는 것도 괜찮다. 적용 방법은 다른 사이트에서 더 잘 소개할 테니 생략한다.

마우스 커서

PC 화면 한정으로 마우스 커서를 바꾸는 것도 가능하다.

(🔗 cursors-4u 사이트)

내 경우엔 주로 위 사이트를 이용한다.

원하는 마우스 커서를 고른 후 Get HTML/CSS Code를 누르면 실제 적용 시 필요한 코드까지 제공해 준다. 저기서 좌측에 해당하는 코드를 티스토리 내 CSS에 붙여 넣으면 바로 적용할 수 있다.

---

HTML을 처음 접하면서, 개인 사이트다운 자율성을 원한다면 꼭 티스토리를 권하고 싶다. 위에서 소개한 대로 이미 다양한 스킨이 배포되고 있다 보니 다른 사람이 만든 스킨에서 컬러나 스킨만 조금 바꿔도 제법 개인 사이트 느낌이 난다. 고치는 과정에서 HTML과 소소하게 친해질 수 있는 점 또한 장점이다.

그럼에도 굳이 티스토리의 단점을 꼽자면 아래와 같다.

티스토리에서 비밀번호가 걸린 비밀글로 콘텐츠를 발행하면 썸네일이 노출되지 않는다. 즉, 비밀글이 주가 되는 티스토리라면 본인 외 유저에게는 오직 한 가지 썸네일만 보이는 것이다. HTML에서 비밀글 썸네일을 원하는 이미지로 고칠 수는 있지만, 콘텐츠별 비밀글 썸네일을 지정하는 건 불가능하기에 동일한 썸네일만 보이는 현상은 동일하다.

따라서 콘텐츠를 불특정 다수에게 공개하고 싶지는 않지만, 모처럼 예쁘게 꾸며둔 티스토리가 다른 사람 화면에서는 밋밋해 보인다는 게 묘하게 마음에 걸렸다.

그 외에도 티스토리가 제공하는 기본적인 기능을 전부 지우는 건 사실상 불가능하기에, 100% 커스터마이징하는 개인 사이트라고 보기 다소 어려운 감이 있다. 여기서부터는 또 다른 플랫폼의 힘을 빌려야 한다.

 

이 다음은 그누보드로 이어진다. 아무리 무거운 영상과 사진을 펑펑 올려대도 돈 한 푼 안 나가던 대기업의 품에서 벗어나 자립할 시간이다 😇