스킨을 바꾸게 된 계기
티스토리에 처음 가입하고 프라치노 공간 스킨으로 7년 이상 사용했었습니다. 예쁘고 기능이 많은 스킨이지만 포스팅을 할 때 원하는 아웃풋을 내려면 글을 쓰고 미리 보기로 확인하는 작업을 자주 반복해 주어야 했습니다.
에디터와 실제 퍼블리싱된 페이지의 스타일이 미묘하게 달랐는데요. (사실 Odyssey도 마찬가지긴 합니다.) 스킨을 구입해서 사용한 초기에는 별 문제없었지만 티스토리도 여러 번 개편이 되었다 보니 제대로 쓰려면 소소하게 계속해서 관리를 해주어야 하는 부분이 생겨났습니다. 그냥 써도 되지만 가끔 글 양식이나 여백이 깨져서 눈에 밟히는 구간들을 그냥 둘 수가 없었네요.
그래서 관리를 최소화하기 위해 프라치노에서 맘에 들었던 몇가지 디자인 요소는 포기하기로 합니다. 티스토리에서 자체 제공하는 비교적 최근에 나온 스킨으로 갈아탄 후, 어느 정도의 HTML, CSS 수정은 자신이 붙었으니 직접 DIY 하기로 결정합니다.
티스토리 Odyssey 스킨 적용
티스토리 스킨 페이지 상단에서 바로 찾아볼 수 있는 스킨이며 이미지의 비중보다는 글과 이미지의 비율이 7:3 정도일 때 적당해 보이는 스킨으로 보였습니다.
메인 페이지 옵션은 썸네일과 글이 같이 나오는 기본형과 포스터 형태의 레이아웃을 선택할 수 있었고 우측 사이드바를 사용할지 Header에 햄버거 메뉴를 두고 메뉴를 숨길 지 고를 수 있었습니다.
저는 포스터 레이아웃에 2단으로 사이드바가 노출되는 옵션을 골랐고 보통 웹디자인을 할 때 기본으로 넣었던 값들을 하나씩 넣어주었습니다.
티스토리의 스킨 편집 시작하기
티스토리 메뉴 → 꾸미기 → 스킨 편집 → HTML 편집 으로 이동합니다.
커스텀 폰트 적용: Pretendard
Pretendard
Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는
cactus.tistory.com
작년에 Pretendard 폰트를 발견하여 업무에서나 개인적으로나 요긴하게 쓰고 있습니다.
Pretendard를 알기 전에는 Noto Sans KR을 쓰거나 Spoqa Sans를 사용했는데요. Noto Sans KR은 특히 숫자와 영어가 어눌한 느낌이 강해서 영문 폰트는 Roboto를 쓰기도 했습니다.
Spoqa Sans는 2016년~2017년 즈음에 사용했었는데 웹 적용 시 맥은 잘 적용되었으나 윈도에서 먹히지 않는 등 웹 개발 실무에 쓰기에는 무리가 있어서 Noto Sans KR로 교체했었습니다.
Odyssey의 기본 폰트는 Noto Sans KR입니다. 이 것을 Pretendard로 교체해 줍니다. 폰트 제작자님의 깃허브에 가이드가 잘 되어 있어서 편리하게 적용했습니다.
https://github.com/orioncactus/pretendard
티스토리의 CSS 편집에서 상단에 아래 문구를 추가한 뒤,
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");
Noto Sans KR을 검색해 보니 body에 폰트가 적용되어 있어서 맨 앞순서에 Pretenard를 추가하여 적용시킵니다.
body {
font-family: 'Pretendard', 'Noto Sans KR', Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
줄 바꿈 적용: word-break와 word-wrap
편집 디자인을 배운 분들이라면 줄 바꿈에 대해서 민감하신 분들이 있을 거라 생각합니다. 보통 웹페이지의 기본 설정으로는 글줄이 화면의 width 값을 넘어가는 경우 단어의 중간, 음절 단위로 줄 바꿈이 되는데요. 화면 공간을 최대한 활용할 수 있지만 단어가 한 번에 보이지 않고 다음 줄로 넘어가면 어색한 경우가 있습니다.
책과 같이 장문의 글이라면 음절 단위로 끊어 줄 바꿈을 하고 정렬도 좌측 정렬보다는 양끝 정렬을 사용하는 경우가 많습니다. 단문의 글이라면 줄 바꿈에 의해 읽는 느낌이 많이 달라져 다양한 형태를 사용합니다. 줄 바꿈 및 정렬은 정답이 없고 취향 차이가 있다고 생각합니다.
저는 단어 중간에 줄바꿈이 되는 것보다 우측에 공간이 많이 남더라도 어절 단위로 줄 바꿈이 되는 것을 좋아합니다. 그래서 아래와 같이 CSS 코드를 넣어주었습니다.
* {
word-break: keep-all;
word-wrap: break-word;
}*표 선택자는 특정 선택자가 아닌 전체 적용을 하겠다는 전체 선택자를 의미하구요. word-break: keep-all이 어절 단위로 끊겠다는 의미입니다.
하지만 단어가 너무 긴 경우, 또는 화면이 좁아 단어 하나를 한 줄에 표기할 수 없는 경우에는 글이 화면 밖으로 뚫려 나가게 됩니다. 이런 경우에는 줄 바꿈으로 처리한다는 의미로 word-wrap: break-word를 추가합니다.
* 티스토리 앱 내에서는 적용되지 않습니다.
마우스 드래그했을 때 포인트 컬러 적용: ::selection
오른쪽 클릭을 막아버린 블로그는 상관없지만 오른쪽 클릭 및 드래그를 허용되는 보통의 웹사이트의 경우, 옅은 파란색으로 텍스트가 선택되는 것을 보실 수 있습니다.
이 부분도 브랜딩의 영역으로 활용할 수 있습니다. 제 블로그의 포인트 컬러는 티스토리의 브랜드 컬러와 비슷한 자몽색을 골랐기에 CSS 편집에서 아래 코드를 추가했습니다.
::selection {
background-color: #FB5E54;
color: white;
}위 코드가 추가되면 드래그 시 자몽색으로 문구가 선택이 됩니다.
원하는 부분 간단한 커스터마이징 하기
전체 적용을 할 수 있는 부분이 아닌 일부 부분을 수정하려면 CSS 코드에서 어디를 고쳐야 하는지 웹 페이지 내에서 찾을 수 있습니다.
수정해야 하는 부분의 Class 찾기
오른쪽 클릭 → 검사, 또는 F12, 또는 크롬 더 보기 → 도구 더 보기 → 개발자 도구 선택으로 개발자 도구를 꺼내 줍니다.
개발자 도구 창의 좌측 상단 아이콘을 클릭하면 원하는 요소를 선택할 수 있고 원하는 부분을 선택하면 스타일 탭에 그 부분의 선택자를 알 수 있습니다.
대괄호 {} 앞에 있는 문구가 선택자이며 티스토리 HTML 편집화면의 CSS 탭에서 선택자 단어를 검색하여 해당 부분을 찾습니다.
CSS 선택자 참고: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
CSS 선택자 - CSS: Cascading Style Sheets | MDN
CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
developer.mozilla.org
모든 부분이 원하는 데로 찾아서 수정되지는 않았는데요. 계속해서 테스트해보거나 구글링을 해서 정답을 찾아 나갔습니다.
폰트 사이즈 및 컬러 조정
포스팅 본문 폰트가 작다고 느껴져서 16px→17px로 키웠습니다.
모바일 환경을 수정하려면 @media 쿼리를 확인해서 찾아 수정하면 됩니다.
.article-view p {
margin-bottom: 8px;
font-size: 17px;
line-height: 27px;
color: #2E3338;
}
@media screen and (max-width: 1060px) {
.article-view p {
font-size: 16px;
line-height: 27px;
}
}
원하지 않는 단락은 숨기기: html 수정
Odyssey 스킨의 사이드바에는 다양한 기능을 제공하는데요. 그중 원하지 않는 기능은 HTML 편집으로 숨길 수 있습니다.
<!-- 공지사항 -->
<s_rct_notice>
<div class="box-notice">
<h3 class="title-sidebar">공지사항</h3>
<ul class="list-sidebar">
<s_rct_notice_rep>
<li><a href="" class="link-sidebar"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>HTML 편집화면에서 공지사항을 검색하면 이와 같은 코드를 볼 수 있는데요.
첫 줄의 공지사항은 주석 표시이며 <!— —> 안에 내용은 무엇을 적어도 기능하지 않습니다.
<!-- 공지사항
<s_rct_notice>
<div class="box-notice">
<h3 class="title-sidebar">공지사항</h3>
<ul class="list-sidebar">
<s_rct_notice_rep>
<li><a href="" class="link-sidebar"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
-->불필요한 코드는 주석 안에 넣어서 비활성화 처리해서 쓰고 있습니다.
해당 단락은 삭제해도 상관없지만 혹시 다시 이 기능을 사용할 수 있으니 이렇게 남겨놓습니다.
→ 이 부분은 블로그 관리 > 꾸미기 > 사이드바에서 커스터마이징이 가능한 것으로 확인했습니다. 사이드바는 HTML 편집으로 건드릴 필요가 없었네요.
블로그 메인의 썸네일 이미지에 둥근 모서리 넣기: border-radius
블로그 메인의 썸네일 부분 모서리는 원래 각져 있지만 애플 웹이나 여러 서비스에서 쓰는 것처럼 둥근 모서리를 추가하고 싶어서 추가했습니다.
메인 썸네일 외에도 인기글, 최신글, 관련글 등 클래스를 찾아서 border-radius를 추가해 주었습니다.
2024-01-24 정정사항
댓글을 보고 다시 찾아보니 제가 적은 내용으로는 썸네일 이미지에 둥근 모서리가 표현되지 않는 것을 확인하여 수정하였습니다. 아래의 셀렉터 부분을 찾아서 border-radius: 8px;를 추가하시면 됩니다.
.article-type-common .thumbnail {
margin-bottom: 16px;
background-image: url(./images/no-image.jpg);
background-size: cover;
background-position: 50% 50%;
border-radius: 8px;
}기존에 알려드렸던 부분인 .article-type-poster .thumbnail:befored의 border-radius: 8px;는 그대로 살려 둡니다. 썸네일이 없어 NO IMAGE인 경우의 둥근 모서리에 영향을 주고 있어서 그대로 두었습니다.
.article-type-poster .thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
}
.article-type-common .thumbnail, .article-type-poster .thumbnail:before 모두 border-radius를 적용해야 둥근 모서리가 제대로 적용이 되었네요. 한 번에 여러 곳을 적용하다보니 정확히 어느 부분에 해당하는지 제가 파악을 못했네요.
라인 컬러 바꾸기
.util .search input {
width: 100%;
padding-bottom: 7px;
background: url(./images/icon-search.svg) no-repeat 98% 0;
border: none;
border-bottom: 2px solid #FB5E54;
font-size: 14px;
color: #999;
}Header에 있는 검색창의 라인 컬러는 여기서 바꾸었습니다.
Bullet, Number list 등의 행간 조정
.article-view ul {
margin-top: 8px;
margin-bottom: 8px;
}Bullet list를 쓰면 행간이 좁아서 맘에 안 들었는데 여기서 마진을 추가해 주었습니다.
하이퍼링크는 포인트 컬러로 변경: a 태그 고치기
.article-view a {
display: inline-block;
color: #FB5E54;
}하이퍼링크는 따로 건드리지 않으면 울트라마린 계열의 컬러로 표기가 되는데요. 여기도 정해놓았던 포인트 컬러로 바꾸어 줍니다.
하이퍼링크는 눈에 잘 띄어야 웹 표준에 적합하기 때문에 건드리지 않거나 가독성이 높은 컬러를 쓰는 게 좋습니다.
.article-view a:hover {
color: #EA271A;
}마우스 호버시 좀 더 진한 자몽색으로 표현되었으면 해서 Hover 시 컬러도 추가합니다.
제가 커스터마이징 한 부분들은 눈에 확 띄는 부분은 아니지만 디자인 디테일을 잡을 때 많이 보던 여백이나 행간, 자간 부분들을 적용했습니다.
코멘트로 의견 교류는 환영합니다. 다만 의무적인 코멘트 작성은 지양해 주세요. 🥹