프라치노 공간

티스토리 스킨 배포, 프라치노 공간 11.5.3

프라치노 — Wed, 5 May 2021 22:09:50 +0900

블로그의 콘텐츠를 돋보이게 하는 티스토리 반응형 스킨, 프라치노 공간을 선택해 주셔서 감사합니다. 이 스킨을 사용하여 여러분의 블로그가 방문자로부터 더 나은 모습으로 보이길 바랍니다.

프라치노 공간의 특징

이 스킨의 특징은 8가지로 요약할 수 있습니다.

정교함 그 자체
블로그의 본질을 드러내는 디자인
블로그를 위한 강력한 기능들
다양한 분위기와 모양새
마치 소통하는 듯한 말풍선형 댓글 디자인
손쉬운 글 공유하기
첫 페이지를 꾸밀 수 있는 기능 제공
지속적인 업데이트 및 지원

특징에 관한 자세한 내용을 확인하려면 아래의 ‘더보기’ 버튼을 누르세요.

프라치노 공간은 티스토리 블로그 생활을 더 재미있게 만들어주는 스킨입니다. 블로거는 특별한 설정 없이 방문자에게 세련되고 전문적인 느낌 전달이 가능하며, 방문자는 꾸밈없는 깨끗한 디자인에 글에 더 집중할 수 있습니다. 또한 어떠한 기기에서도 이질감 없는 모양으로 최상의 블로그 느낌을 유지합니다.

공간이라는 이름답게 여백을 담다

프라치노 공간은 여백을 최대한 활용한 디자인 덕분에 시원하고 간결한 느낌을 제공합니다.

정교함 그 자체

프라치노 공간의 완성도는 타 스킨들을 압도합니다. 스킨을 위해 픽셀 단위로 정교하게 디자인된 아이콘부터 군더더기 없는 일관성까지, 모든 것들이 하나하나 섬세하게 제작되었습니다.

블로그의 본질을 드러내는 디자인

불필요한 요소를 최소화한 디자인 덕분에 블로그의 본질인 콘텐츠가 잘 드러나죠.

스킨을 위해 개조된 서체

프라치노 공간은 스킨의 아름다움과 가독성을 위해 최적화된 웹 서체를 사용합니다. 또한 이모티콘, 한자나 일본어 등의 서체도 올바르게 표시합니다.

단순함에 숨겨있는 풍부하고 강력한 기능들

겉으로 보기에는 단순해 보여도 프라치노 공간에 있는 기능들은 정말 풍부합니다. 사이드바가 항상 표시되게 할 수 있는 것은 물론, 글을 얼마나 읽었는지 표시해 주는 진행 바, 글 추천 알림, 미디어 너비 확장, 코드 하이라이터 등 블로그를 위한 강력한 기능들이 포함되어 있습니다.

다양한 분위기로 블로그의 느낌을 다르게

프라치노 공간은 낮, 노을, 밤 총 세 가지 컬러의 분위기를 제공하며, 각 분위기에 따라 블로그의 느낌을 달리할 수 있습니다. 분위기는 카테고리, 시간대 또는 시스템 설정에 따라 자동으로 바뀌게 할 수도 있습니다.

다양한 모양새의 글 목록

갤러리형부터 텍스트형 글 목록까지, 프라치노 공간은 다양한 글 목록 모양새를 제공합니다. 전문적으로 다루는 글에 맞게 글 목록의 모양새를 선택하세요. 또한 모양새는 카테고리별로 다르게 설정할 수 있습니다.

블로거와 방문자가 소통하는 듯한 댓글 디자인

프라치노 공간의 정교한 말풍선형 댓글 디자인은 티스토리 스킨 중 유일합니다. 자동으로 조절되는 댓글 입력 풍선은 방문자가 글에 대한 생각을 편하게 적을 수 있고, 블로거는 마치 방문자와 직접 채팅하는 듯한 느낌을 받을 것입니다. 블로그의 재미는 댓글만 한 것이 없죠.

손쉬운 글 공유하기

프라치노 공간은 글마다 카카오톡, 페이스북, 트위터 등과 같은 소셜 미디어에 직접 공유할 수 있는 버튼들이 포함되어 있습니다. 별도의 플러그인을 사용하지 않아도 됩니다.

첫 페이지를 꾸밀 수 있는 티스토리 커버 기능 제공

프라치노 공간은 블로그의 첫 페이지를 꾸밀 수 있는 티스토리 커버를 지원합니다. 슬라이드형부터 갤러리형까지, 블로거가 원하는 대로 블로그의 첫 페이지를 꾸며보세요.

지속적인 업데이트와 문의 지원

프라치노 공간은 지속적인 업데이트와 문의 지원을 보장합니다. 티스토리 스킨을 보다 편리하게 이용해 보세요.

이 버전의 특징

이 버전의 특징은 2가지로 요약할 수 있습니다.

글의 동영상 하단에 여백이 비정상적으로 크게 있던 현상 수정
밤 모드 사용시 별도 지정된 검정 텍스트 표시에 관한 개선

버전에 관한 자세한 내용을 확인하려면 아래의 ‘더보기’ 버튼을 누르세요.

글의 동영상 하단 관련 그래픽 문제 수정

글에 동영상 콘텐츠가 포함되어 있을 경우, 동영상 하단의 여백이 비정상적으로 크게 발생할 수 있는 문제를 해결합니다.

밤 모드 사용시 별도 지정된 검정 텍스트 표시에 관한 개선

글에 별도 지정된 검정 컬러의 텍스트가 있을 때 밤 모드시 표시되지 않을 수 있는 문제를 해결합니다.

스킨 구입하기

프라치노 공간의 구입은 Paddle.com이 대행하며, 해외 승인이 가능한 카드로 구입할 수 있습니다. 구입 전에는 사용 조건을 꼭 확인하세요. 아래의 버튼을 누르면 결제가 진행됩니다.

스킨 구입하기

구입 버튼을 누르고 기다리면 구입 윈도우가 표시됩니다.

네이버 메일로 구입할 경우 딜리버리 메일이 오지 않는 문제가 발생할 수 있습니다. 가능하면 Gmail 등의 메일 서비스로 구입할 것을 권장합니다. 메일을 받지 못했다면 카카오톡으로 문의해 주세요.

스킨 사용설명서 제공

프라치노 공간은 설치와 사용자화 방법을 알려주는 설명서를 제공합니다. 웹 초보자의 눈높이로 알려주므로 누구나 손쉽게 이해할 수 있을 것입니다. 사용설명서를 둘러보려면 여기를 누르세요.

스킨 업데이트

이미 프라치노 공간을 구입한 고객이라면 Paddle 거래 내역 메일과 함께 받은 딜리버리 메일을 확인하세요. 거기서 Download 버튼을 누르면 최신 버전의 프라치노 공간이 다운로드됩니다. 만약 딜리버리 메일을 삭제했거나 받지 못했다면 카카오톡으로 구입했을 때 사용한 이메일 주소를 입력하여 문의해 주세요.

버전 11.5를 설치하지 않았다면 설명서 1의 내용대로 스킨을 업데이트하세요. 이때 모든 설정값이 초기화될 수 있으므로 사전에 스킨 설정값을 기록해 놓는 것이 좋습니다. 버전 11.5 이상을 설치했다면 재설치할 필요가 없으며 설명서 1-1의 내용을 따라 하면 편하게 업데이트할 수 있습니다.

프라치노 공간 카카오톡 채널

프라치노 공간 카카오톡 채널을 추가하세요! 스킨의 업데이트 소식이나 변경 사항 등에 관한 알림을 받을 수 있습니다. 카카오톡 채널을 방문해 보려면 여기를 누르세요.

스킨 소개하기

프라치노 공간을 여러 군데에 소개해주면 정말 감사하겠습니다. 티스토리 스킨을 찾는 지인에게 알려주거나 트위터 등 여러분의 소셜 네트워크 서비스 계정에 올리면 됩니다!

6. 관리 관점에서 글을 쓸 때 알아두면 좋은 것들

프라치노 — Tue, 3 Mar 2020 22:09:10 +0900

티스토리 블로그를 운영한다는 것은 자신의 생각을 글로 담아 자신의 가치를 드러낸다는 것을 의미하죠. 그렇지 않나요? 티스토리 반응형 스킨, 프라치노 공간을 쓰시는 분들이라면 더욱 공감할 것이라고 생각됩니다.

저는 여러분들이 즐거운 티스토리 생활을 더 깊이 누리도록 돕기 위해 글을 쓸 때 몇 가지 알아두면 좋은 것들을 설명하려고 합니다. 이때 주요 관점은 ‘글을 어떻게 써야 설득력 있고, 효과적으로 전달하는지’가 아닌 ‘글을 어떻게 써야 향후에도 쉽게 관리, 유지할 수 있는지’입니다.

이 기본적인 것들은 HTML의 구조 개선에도 도움이 되기 때문에 향후에는 스킨 관리와 검색 엔진 최적화(SEO – Search Engine Optimization)에도 긍정적인 영향을 줄 수 있습니다.

1. 텍스트 속성은 건들지 말 것

글을 작성할 때에는 강조 등의 특별한 경우가 아닌 이상 텍스트 크기, 컬러, 서체 등은 설정하지 않는 것이 좋습니다. 텍스트 속성을 설정하게 되면 티스토리 스킨의 기본 텍스트 모양새가 적용되지 않으며 향후에 스킨을 바꾸거나, 티스토리 앱 등 다른 환경에서 글을 볼 때 이질감, 글이 보이지 않는 등의 문제 등이 발생할 수 있습니다.

예를 들어, 까만 배경이 사용된 스킨을 위해 글을 작성할 때 텍스트 모두를 아주 밝은 회색으로 지정했다고 가정해 봅시다. 블로그 웹 페이지 내에서는 스킨의 배경이 어둡기 때문에 잘 보일지 몰라도, 모바일 전용 웹 페이지 또는 앱은 기본적으로 흰 배경이기 때문에 글 읽기가 힘들어질 수 있습니다.

만약 전반적인 글 텍스트의 속성을 바꾸고 싶다면 글 에디터가 아닌 스킨 편집 페이지에서 바꿀 것을 권장합니다.

2. 단락/줄 바꿈 키를 구분할 것

티스토리 블로거 대부분이 이를 잘 모른다고 생각합니다. 글을 작성할 때에 키보드의 Enter 키(Return 키와 같음)는 단락 바꿈 키입니다. 단락 바꿈 키는 말 그대로 글의 단락을 바꿀 때 사용됩니다. Enter 키를 눌렀을 때 글 사이의 간격이 크게 벌려지는 이유는 줄이 바뀐 것이 아닌 단락이 바뀐 것이기 때문입니다.

단락이 아닌 줄을 바꾸려면 키보드의 Shift + Enter 키를 눌러야 합니다. (macOS는 Option + Enter 키)

요즘은 가독성을 이유로 짧은 문장과 여러 줄을 사용하여 글을 작성하는 블로거가 많습니다. 이들 중 대부분은 티스토리의 ‘단락 앞뒤 공백 없음’ 속성을 켜서 글을 작성합니다. 그리고 Enter 키를 눌러 단락을 바꿉니다. 그러나 이 방법은 말 그대로 단락 위아래의 간격을 없애 단락을 마치 줄을 바꾼 것처럼 보여주는 것뿐이지, HTML 상으로는 여러 단락을 만든 것이나 마찬가지입니다.

이렇게 되면 방문자는 브라우저에서 제공하는 ‘읽기 도구’를 사용할 때 글이 이상하게 보일 수 있습니다. 더 나아가 SEO 면에서는 검색 엔진이 해당 글의 HTML 구조를 분석하는 데에 영향을 끼칠 수 있습니다.

되도록이면 ‘단락 위아래 여백 없음’ 속성을 켜지 말고, 줄을 바꿀 때에는 Shift + Enter 키를 누르는 습관을 들일 것을 권장합니다. 그리고 단락을 바꿀 때에만 Enter 키를 누를 것을 권장합니다.

3. 외부 앱 등에서 작성한 글을 그대로 붙이지 말 것

몇몇 블로거 분들은 워드프로세서 등 외부 앱에서 글을 작성하고 복사하거나, 웹 페이지에서 특정 부분을 복사하고 그것을 티스토리 글 에디터에 그대로 붙입니다. 이 방법은 절대로 권장하지 않습니다. 이렇게 하면 HTML이 지저분해지고, 향후 문제가 발생해도 수정이 어려워지는 등 난감한 상황이 올 수 있습니다.

가능하면 티스토리 에디터 자체에서 글을 작성하기 바라며, 외부에서 작성하는 것이 더 편하다면 티스토리 에디터의 마크다운 기능을 켜고 붙여놓을 것을 권장합니다.

4. 새로운 글 에디터를 사용할 것

티스토리가 선보인 새로운 글 에디터는 구 에디터에 비해서는 기능이 적은 것이 사실입니다. 그러나 멀티미디어나 스타일 구성이 모듈화 되어 있기 때문에 관리 측면에서는 일관성 있고 편리한 점이 있습니다. 또한 작성된 글의 HTML 구조는 최대한 웹 표준에 맞게 구성됩니다.

향후 티스토리는 구 에디터 제공을 종료할 수도 있습니다. 구 에디터에서 들인 습관을 버리고 새로운 에디터로 전환하기에는 큰 불편이 따르겠지만 익숙해지면 훨씬 편하고, 관리 측면에서도 좋을 것이라고 믿습니다.

이 내용들이 도움이 되었기를 바라며, 즐거운 티스토리 생활되기를 바랍니다.

5-1. 글에 사용된 이미지의 별도 여백 설정하기

프라치노 — Sun, 12 Jan 2020 10:09:48 +0900

티스토리 반응형 스킨, 프라치노 공간은 블로그 글에 사용된 일부 이미지의 여백을 다르게 설정할 수 있습니다. 글을 편집할 때 원하는 이미지의 치환자를 찾아 짧은 코드를 편집하면 됩니다.

별도 여백을 설정할 이미지는 그룹화되지 않고, 가운데 정렬이어야 합니다. 글을 편집할 때 HTML 모드로 전환하고, 원하는 이미지의 치환자를 찾아보세요. 치환자는 아래와 비슷합니다:

[##Image|kage@filepath/img.jpg|alignCenter|data-filename="img.jpg" data-origin-width="xxxx" data-origin-height="yyyy"|||##]

해당 치환자에서 alignCenter를 자신이 원하는 별도 여백의 코드로 대치하여 사용합니다. 대치 가능한 코드는 두 가지로, 아래부터는 대치하여 사용 가능한 코드를 설명합니다.

1. 페이지 좌우 여백에 맞는 여백 생성

이미지의 너비가 페이지의 너비보다 40픽셀 적은 값과 같아졌을 때, 이미지의 좌우 여백을 페이지의 좌우 여백만큼 생성합니다. 페이지의 좌우 여백은 각각 20픽셀입니다. 이는 스크린샷, 캡처 등 좌우 여백이 없으면 어색한 이미지에 적용할 수 있으며, 사용하려면 alignCenter를 alignCenter no-edge로 대치합니다.

2. 페이지 너비에 맞추어 꽉 차게 표시

브라우저 윈도우의 너비와 상관없이, 이미지를 페이지 너비에 맞추어 꽉 차게 표시합니다. 파노라마 또는 크게 보여주고 싶은 이미지에 적용할 수 있으며, 사용하려면 alignCenter를 alignCenter edge로 대치합니다.

이 기능이 작동되지 않을 경우 지정된 이미지의 원본 너비가 너무 작지 않은지 확인하기 바랍니다.

즐거운 2020년 되기를 바랍니다

프라치노 — Sun, 29 Dec 2019 10:09:20 +0900

프라치노 스킨을 사용하는 모든 티스토리 블로거 분들께 감사의 말씀드립니다. 티스토리 반응형 스킨, 프라치노 공간은 2014년부터 시작하여 지금까지도 많은 사랑을 받고 있습니다. 프라치노 공책 또한 아기자기한 공책 그대로를 표현한 모양새에 많은 분들이 좋아합니다. 그리고 지금, 스킨을 배포한 지 어느덧 5년이 지났습니다.

2019년은 티스토리의 해라고 할 만큼 티스토리 제작진 분들이 열심히 일했습니다. 새로운 글 에디터부터 처음부터 다시 설계된 앱까지, 수많은 변화를 위해 노력했다고 할 수 있죠. 게다가 스킨 기반이 많이 개선되었고, 제게는 표현의 한계가 하나하나씩 사라지는 것을 보면서 많은 즐거움을 느꼈습니다.

프라치노 스킨들이 지금까지 개선되고 있는 것은 티스토리 제작진 분들의 활발한 활동과 여러분의 사랑 덕분입니다. 정말 감사의 말씀 드립니다.

이제 벌써 2019년 말입니다. 저는 여러분들께 보답하고자 스킨 개선 작업을 진행하고 있으며, 프라치노 공간 먼저 나사를 꽉 조였고, 이 글을 쓴 날짜로부터 바로 어제, 버전 11.4.1을 배포했습니다.

프라치노 공간 11.4.1은 제가 여태까지 스킨을 사용해 보면서 눈에 거슬렸던 부분을 해결했습니다. 생각보다 많았는데 도대체 어떤 것들이 눈에 거슬렸을까요?

왜 텍스트가 너무 길어 생략된 링크의 …은 컬러가 변하지 않는가
왜 본문에 들어간 사진 크기는 하필 너비 1280 픽셀로 애매하게 축소되는가
왜 프라치노 공간에 사용하는 아이콘들은 찌그러져 보이는가
왜 티스토리 블로그들은 새 글 배지가 구려 보이는가
왜 나는 부분 부분 스타일 시트를 실수한 부분이 많은 것인가
왜 해도 해도 끝이 없는가

이것 말고도 눈에 거슬렸던 게 꽤 많은데, 저는 벌레를 잡고 헐거워진 부분을 메우는 데에 전력했습니다. 이렇게 해서 배포된 것이 프라치노 공간 11.4.1입니다.

이번 버전에서 해결된 것 중 하나는 미디어 확장 오작동 문제입니다.

평소에는 문제가 없는데 ‘권장 너비 제한’ 기능을 끄고 확장 미디어의 너비를 1280 픽셀 이상으로 설정했을 때 사진 확장이 작동되지 않는 문제입니다. 이것은 티스토리 자체에서 글 안의 모든 사진들을 강제로 너비 1280 픽셀로 축소하여 발생하는 문제로 확인했으며, 이번 버전에서 문제를 해결했습니다.

이제 사진을 크게 보여주려고 본문의 너비를 비정상적으로 크게 넓힐 필요가 없습니다!

그리고 확장된 사진은 가능하면 최대 너비 2560 픽셀의 고화질 사진으로 표시됩니다. 물론 확장되지 않은 사진들도 브라우저 윈도우의 너비가 1280 픽셀 이상이라면 상황에 따라 너비 1920 픽셀의 고화질 사진으로 표시됩니다.

미디어 확장 관련 기능을 수정함과 동시에 사진을 여백 없이 꽉 차게 보여줄 수 있는 기능을 추가했습니다. 이 기능은 나중에 설명서에 추가해 놓도록 하겠습니다.

그 외 기타 문제도 해결했고, 스크린 리더의 호환성 등 소소한 기능 개선도 있으니 업데이트하기 귀찮아서 이전 버전을 사용하고 있었던 분들도 꼭 꼭 업데이트를 부탁드립니다. 최신 버전을 사용하는 분들이 많아질수록 스킨 리소스를 효율적으로 사용할 수 있게 되고, 가능하다면 페이지 로드 속도 향상을 기대할 수도 있습니다.

몇 달 내에는 프라치노 공책도 헐거워진 나사를 조이는 작업이 완료될 것이니 기대해 주시면 감사하겠습니다.

2019년 즐거운 연말 보내시고 행복한 2020년 되시기를 바라며, 아프지 않고 언제나 즐겁고 풍요로운 하루 되기를 빕니다. 프라치노의 티스토리 스킨을 선택해 주셔서 감사합니다.

5. 글 별로 다른 모드 설정하기

프라치노 — Mon, 22 Jul 2019 22:42:31 +0900

티스토리 반응형 스킨, 프라치노 공간은 스킨의 전반적인 분위기나 글 목록의 모양새, 대표 커버 이미지 등을 글 별로 다르게 설정할 수 있습니다. 글을 편집할 때 원하는 기능의 코드를 추가하기만 하면 됩니다.

글을 편집할 때 HTML 모드로 전환하고, 글 맨 아래 줄에 아래의 코드를 추가하세요:

<div class="fraccino-function"></div>

fraccino-function을 자신이 원하는 기능의 코드로 대치하여 사용합니다. 대치 가능한 코드는 여러가지며, 아래부터는 대치하여 사용 가능한 코드를 설명합니다.

일반

스킨의 전반적인 분위기를 변경할 수 있습니다.

fraccino-setas-day는 스킨의 분위기를 낮으로 설정합니다.
fraccino-setas-dawn은 스킨의 분위기를 노을로 설정합니다.
fraccino-setas-night는 스킨의 분위기를 밤으로 설정합니다.

대표 커버 이미지

글 제목 영역의 배경을 대표 이미지로 표시할 것인지 설정할 수 있습니다.

fraccino-enable-pagecover는 대표 커버 이미지를 표시합니다.
fraccino-enable-fullscreenpagecover는 대표 커버 이미지를 꽉 차게 표시합니다.
fraccino-enable-pagealtcover는 대표 커버 이미지를 대체 커버 이미지로 표시합니다.
fraccino-disable-pagecover는 대표 커버 이미지를 표시하지 않습니다.

바탕체

글의 문단 요소를 바탕체로 보이게 할 것인지 설정할 수 있습니다.

fraccino-enable-serif는 문단 요소를 바탕체로 보이게 합니다.
fraccino-disable-serif는 문단 요소를 돋움체로 보이게 합니다.

간단한 예시

예를 들어 특정 글의 분위기를 밤으로 설정하고, 대표 커버 이미지를 꽉 찬 커버로 표시하고 싶다고 가정해 봅시다. 특정 글을 편집할 때 HTML 모드에서 아래의 코드를 맨 아래 줄에 추가합니다:

<div class="fraccino-setas-night fraccino-enable-fullscreenpagecover"></div>

코드를 추가하고 글을 발행하면 스킨은 입력한 코드대로 설정됩니다.

4. 블로그 첫 페이지에 커버 설정하기

프라치노 — Mon, 22 Jul 2019 22:18:56 +0900

티스토리는 블로그의 첫 페이지를 꾸밀 수 있는 커버 기능을 제공합니다. 티스토리 반응형 스킨, 프라치노 공간은 커버를 완전하게 지원하며 다양한 종류의 커버를 사용하여 첫 페이지를 꾸밀 수 있습니다.

커버는 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘홈 설정’ 항목을 ‘최신 글’에서 ‘커버’로 바꾸면 설정됩니다. 원하는 커버 아이템을 추가하거나 삭제하여 첫 페이지를 꾸밀 수 있습니다. 스킨에 지원되는 커버 아이템은 아래와 같습니다:

사용자화한 콘텐츠가 적용된 첫 페이지
슬라이드형
꽉 찬 슬라이드형
3가지 크기의 갤러리형
포스터형
카드형
텍스트형

1. 사용자화한 콘텐츠가 적용된 첫 페이지

이 커버 아이템은 ‘홈 설정’ 항목이 ‘최신 글’로 설정되었을 때 첫 페이지의 느낌에 목록 구성만 달리 설정하고 싶다면 추천합니다. 이 커버 아이템은 첫 번째 위치일 때에만 작동됩니다.

2·3. 슬라이드형 · 꽉 찬 슬라이드형

이 커버 아이템은 목록을 슬라이드 형태로 보여주며, 브라우저 윈도우의 높이만큼 꽉 차게 표시할 수도 있습니다. 미리보기 이미지로 방문자의 시선을 끌고 싶다면 추천합니다.

4. 3가지 크기의 갤러리형

이 커버 아이템은 사진이나 동영상 등의 멀티미디어 관련 콘텐츠를 표시할 것이라면 추천합니다.

5. 포스터형

이 커버 아이템은 영화나 인물사진 등의 콘텐츠를 표시할 것이라면 추천합니다.

6. 카드형

글의 대표 이미지와 본문의 내용이 적절한 비율로 표시되게 하고 싶다면 추천합니다.

7. 텍스트형

맛집이나 상품 리뷰, 책 등 글 위주의 콘텐츠를 표시할 것이라면 추천합니다.

3-16. 블로그에 사업자 정보 표시하기

프라치노 — Mon, 22 Jul 2019 22:17:42 +0900

티스토리 반응형 스킨, 프라치노 공간은 페이지의 맨 하단에 사업자 정보를 표시할 수 있습니다. 이것은 기업을 위한 블로그를 운영할 때 사용될 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘사업자 정보’ 항목을 살펴보세요.

‘사업자 정보’ 항목에는 다음과 같은 속성이 있습니다:

상호명
대표자 성명
주소
전화번호
이메일
사업자등록번호
통신판매신고번호
사이버몰 이용약관 URL

사업자 정보 표시하기

사업자 정보를 표시하려면 사업자등록번호가 입력되어 있어야 합니다. 각 속성에 발급된 사업자등록증과 통신판매업신고증의 내용을 입력하세요.

3-15-1. 스킨과 어울리는 애드센스의 스타일

프라치노 — Mon, 22 Jul 2019 22:16:32 +0900

티스토리 반응형 스킨, 프라치노 공간은 낮이나 노을, 밤의 전반적인 컬러를 바꿀 수 있습니다. 컬러를 설정했고 구글 애드센스(Google AdSense)를 사용한다면 스킨과의 조화를 위해 애드센스도 해당 컬러에 맞추어 설정해야 합니다. 각 모양새에 따른 설정값을 알아봅시다.

컬러가 낮일 때

스킨의 컬러를 낮으로 설정했다면 애드센스의 스타일은 아래와 같이 설정합니다.

테두리: #f4f4f4
텍스트: #222222
제목 / 링크: #349aff
URL: #666666
배경: #f4f4f4
글꼴: 최적화

컬러가 노을일 때

스킨의 컬러를 노을로 설정했다면 애드센스의 스타일은 아래와 같이 설정합니다.

테두리: #e3d9cc
텍스트: #22201e
제목 / 링크: #2284d9
URL: #5b5752
배경: #e3d9cc
글꼴: 최적화

컬러가 밤일 때

스킨의 컬러를 밤으로 설정했다면 애드센스의 스타일은 아래와 같이 설정합니다.

테두리: #181818
텍스트: #cccccc
제목 / 링크: #74d5ff
URL: #696969
배경: #181818
글꼴: 최적화

컬러가 시간대에 따라 바뀔 때

이 때에는 낮 컬러의 스타일을 따라가는 것이 좋습니다.

수고하셨습니다. 변경된 스타일은 바로 적용되지 않으므로 몇 시간 기다렸다가 확인해 보시기를 바랍니다. 티스토리 반응형 스킨, 프라치노 공간과 함께 즐거운 티스토리 생활 되세요!

3-15. 구글 애드센스 광고 설정하기

프라치노 — Mon, 22 Jul 2019 22:15:22 +0900

티스토리 반응형 스킨, 프라치노 공간은 구글 애드센스(Google AdSense) 광고를 간편하게 설정할 수 있는 방법을 제공합니다. 여기서는 프라치노 공간을 사용할 때 구글 에드센스 설정 방법 두 가지를 알아봅니다.

티스토리 내에서 사용할 수 있는 애드센스 광고는 ‘자동 광고’와 ‘텍스트 및 디스플레이 광고’, ‘일치하는 콘텐츠’입니다. ‘자동 광고’는 스킨 내에서 설정 가능하며, ‘텍스트 및 디스플레이 광고’와 ‘일치하는 콘텐츠’는 티스토리 플러그인을 통하여 설정 가능합니다.

1. 자동 광고 설정하기

구글 애드센스 페이지에서 ‘광고 - 자동 광고’로 이동하여 자동 광고를 설정합니다.

되도록이면 URL 그룹을 생성하여 사이트별로 광고를 설정할 것을 권장합니다. 참고로 ‘자동 광고 설정’ 링크를 클릭하면 광고 구현을 위한 코드가 표시되는데 스킨은 이것을 사용하지 않으므로 이를 무시합니다.

이제 ‘계정 - 설정 - 계정 정보’ 항목으로 이동합니다. 여기에서 필요한 것은 ‘웹게시자 ID’입니다. pub-로 시작하는 ‘웹게시자 ID’ 코드를 복사합니다.

블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘Google AdSense’ 항목을 살펴봅니다. ‘google_ad_client’ 속성과 ‘자동 광고’ 속성을 볼 수 있을 것입니다.

‘google_ad_client’ 속성값에는 방금 복사한 ‘웹게시자 ID 코드’를 넣고, ‘자동 광고’ 속성을 켭니다.

2. 그 외 광고 설정하기

‘텍스트 및 디스플레이 광고’와 ‘일치하는 콘텐츠’는 티스토리에서 제공하는 ‘구글 애드센스 (반응형)’ 플러그인을 사용하여 설치할 수 있습니다.

먼저 구글 에드센스 페이지에서 ‘광고 - 광고 단위’로 이동하여 필요한 반응형 광고 단위를 생성하세요. 예를 들어 글 상단과 하단에 애드센스 광고를 표시하고 싶다면 두 개의 반응형 광고 단위를 생성하면 됩니다. 광고 단위를 생성할 때 스타일은 프라치노 공간의 모양새에 맞추어 설정하기 바랍니다.

블로그 관리 페이지에서 ‘플러그인’으로 이동한 다음 ‘구글 애드센스 (반응형)’ 카드를 선택합니다. 원하는 광고 형태를 선택하고 각각의 코드를 입력합니다. 해당 코드는 애드센스 페이지에서 찾을 수 있습니다.

글 상단에 ‘텍스트 및 디스플레이 광고’를 놓을 때에는 해당 코드 중 일부를 수정하는 것이 좋습니다. data-ad-format="auto"를 data-ad-format="horizontal"로 변경합니다. ‘일치하는 콘텐츠’는 글 하단에만 놓을 것을 권장합니다.

모든 코드 설정이 완료되면 ‘변경사항 적용’을 눌러 플러그인을 활성화합니다. 그리고 자신의 블로그로 돌아가서 애드센스 광고가 제대로 작동되는지 확인합니다.

광고가 표시되지 않을 경우

애드센스 광고는 올바르게 설정했다 하더라도 광고가 바로 표시되지 않을 수 있습니다. 이것은 스킨의 문제가 아니기 때문에 시간이 지나면 해결될 것입니다. 오랜 시간이 지났음에도 불구하고 광고가 표시되지 않는다면 브라우저의 상태를 확인하거나 애드센스 고객센터에 문의하세요.

3-14. 네이버 이웃 버튼 설정하기

프라치노 — Mon, 22 Jul 2019 22:14:11 +0900

네이버 블로그는 티스토리의 ‘구독’과 비슷한 ‘네이버 이웃’ 기능을 제공합니다. ‘네이버 이웃’은 네이버 자사의 블로그뿐만 아니라 티스토리 등의 타사 블로그도 될 수 있으며, 이는 네이버 블로그 사용자도 티스토리 블로그의 최신 글을 확인할 수 있다는 것을 의미합니다.

티스토리 반응형 스킨, 프라치노 공간은 네이버 이웃 기능을 사용할 수 있습니다. 이 기능을 사용하면 여러분의 블로그에 네이버 이웃 맺기 버튼이 표시됩니다.

사전 작업하기

이제 여러분의 블로그에 네이버 이웃 맺기 버튼을 만들어 봅시다. 참, 시작하기 전에 준비해야 할 것이 있습니다. 네이버 블로그 설정 페이지로 이동해야 합니다. URL은 아래와 같으며 username은 여러분의 네이버 ID로 대치합니다. 네이버 계정이 없다면 먼저 계정을 생성하세요.

https://admin.blog.naver.com/username/sitemap

설정 페이지에 접속했다면 ‘이웃・그룹 관리’, 그다음 ‘이웃커넥트 관리하기’로 이동합니다.

내비게이션에 있는 ‘위젯 관리’를 선택한 다음 ‘위젯관리’ 탭을 선택하여 해당 페이지로 이동합니다. 그런 다음 ‘위젯을 추가로 설치할 내 블로그 주소 입력’ 필드에 프라치노 공간을 사용하고 있는 여러분의 티스토리 URL을 입력하고 ‘이웃커넥트 위젯추가’ 버튼을 눌러 블로그를 등록합니다. 이때 코드와 관련된 팝업이 열리는데 이것은 필요가 없으므로 ‘확인’ 버튼을 눌러 이를 무시합니다.

자, 여러분의 블로그가 네이버 이웃커넥트에 등록되었습니다! 마지막으로 여러분의 티스토리 블로그 URL 왼쪽에 있는 라디오 버튼을 눌러 대표 블로그로 설정하면 사전 작업이 모두 완료됩니다.

스킨 편집하기

사전 작업이 조금 복잡했다면 스킨 편집은 훨씬 쉽습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘네이버 이웃’ 항목을 살펴보세요. 해당 항목에는 네이버 ID 속성이 있는데 거기에 여러분의 네이버 ID를 입력하고 설정을 적용하면 모든 과정이 끝납니다.

축하합니다! 해당 버튼은 사이드바의 ‘블로그 구독하기’ 모듈과 글의 맨 아래 ‘구독하기’ 버튼 옆에 표시됩니다. 프라치노 공간과 함께 즐거운 티스토리 생활되시기를 바랍니다.

3-13. SEO의 기본, 메타 태그 설정하기

프라치노 — Mon, 22 Jul 2019 22:13:56 +0900

티스토리의 ‘메타 태그 등록’ 플러그인이 추가됨에 따라 이 기능은 제거되었습니다. 티스토리의 플러그인은 ‘블로그 설정 페이지’에서 찾을 수 있습니다. 이에 따른 설명서를 업데이트할 예정이오니 기다려 주시면 감사하겠습니다.

HTML의 요소 중 하나인 메타(meta) 태그는 사이트의 정보가 포함되어 있는 태그로, 네이버(Naver), 구글(Google), 빙(Bing) 등의 검색 엔진은 메타 태그를 통하여 사이트의 정보를 알아냅니다.

검색 엔진은 고유의 검색 로봇이 있는데 사이트 검색을 돕기 위해 네이버 서치 어드바이저(Naver Search Advisor), 구글 서치 콘솔(Google Search Console) 등 엔진별로 도구가 제공되고 있습니다. 이때에도 사이트를 식별하기 위해 메타 태그가 사용됩니다.

네이버 블로그 등의 국내 블로그 서비스와는 달리 티스토리는 스킨의 HTML을 편집할 수 있고 메타 태그를 입력할 수 있습니다. 그렇기 때문에 티스토리 블로그는 다양한 검색 엔진 도구 등록, 다시 말해 사이트를 검색 엔진에 맞추어 최적화(SEO – Search Engine Optimization)시키는 것에 유리합니다.

티스토리 블로그를 사용하는 여러분들은 SEO를 위해 여러 개의 메타 태그를 복잡한 HTML의 적절한 위치에 입력했을 것입니다. 프라치노 공간은 복잡한 HTML을 편집해야 하는 불편함을 없애기 위해 스킨의 기능 내에서 메타 태그를 편리하게 등록할 수 있는 방법을 제공합니다.

블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘meta 태그’ 항목을 살펴봅시다. 총 4개의 메타 태그 속성이 있습니다. 해당 속성에 네이버 웹마스터 도구 등 검색 엔진 도구에서 얻은 메타 태그를 첫번째 속성부터 차례대로 입력합니다. 입력이 끝났다면 오른쪽 위 적용 버튼을 누릅니다.

3-12. 블로그 정보의 배경 설정하기

프라치노 — Mon, 22 Jul 2019 22:12:45 +0900

블로그 정보의 배경은 오른쪽 사이드바(사이드바 2: 블로그 정보 메뉴)에 고정된 맨 첫 번째에 보이는 블로그 정보 영역의 배경을 의미합니다. 블로그 정보 영역은 오른쪽 사이드바에 항상 표시됩니다.

티스토리 반응형 스킨, 프라치노 공간은 이 영역의 배경을 손쉽게 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘블로그 정보의 배경 (Jacket)’ 항목을 살펴보세요.

‘블로그 정보의 배경 (Jacket)’ 항목에는 다음과 같은 속성이 있습니다:

배경 컬러
배경 이미지

1·2. 배경 컬러 & 이미지

블로그 정보의 배경 컬러와 이미지를 설정할 수 있습니다. 컬러값을 지정하면 검은색의 배경이 입력된 컬러로 변경됩니다. 이미지를 업로드하여 배경을 설정할 수도 있습니다. 이때 업로드할 이미지는 최소 너비 1280픽셀 이상, 1.34:1 비율의 JPEG 이미지를 권장합니다.

3-11. 사이드바의 일부 기능 설정하기

프라치노 — Mon, 22 Jul 2019 22:11:14 +0900

티스토리 반응형 스킨, 프라치노 공간은 사이드바의 기능을 켜거나 일부 모듈의 기능을 변경할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘사이드바’ 항목을 살펴보세요.

사이드바 모듈을 설정하는 방법을 찾는다면 ‘사이드바 모듈 설정하기’ 가이드를 참조하세요.

‘사이드바’ 항목에는 다음과 같은 속성이 있습니다:

최근/인기 글 모듈 모드
첫 페이지로 이동 버튼
하위 카테고리 접기
공지 전체 보기 버튼
태그 전체 보기 버튼

1. 최근/인기 글 모듈 모드

‘최근 글’과 ‘인기 글’ 모듈의 항목에 미리보기 이미지를 보이게 할 수 있습니다.

2. 첫 페이지로 이동 버튼

왼쪽 사이드바(사이드바 1: 일반 메뉴)의 맨 위에 집 모양의 아이콘으로 된 ’첫 페이지로 이동’ 버튼을 표시합니다.

3. 하위 카테고리 접기

‘카테고리’ 모듈의 하위 카테고리를 보이지 않게 접을 수 있습니다.

4. 공지 전체 보기 버튼

블로그에 공지 글이 많다면 ‘공지사항’ 모듈에 ‘전체 보기’ 버튼을 표시할 수 있습니다.

5. 태그 전체 보기 버튼

‘태그’ 모듈에 ‘전체 보기’ 버튼을 표시할 수 있습니다.

3-10. 고정형 사이드바의 블로그 로고 설정하기

프라치노 — Mon, 22 Jul 2019 22:10:29 +0900

프라치노 공간은 고정형 사이드바의 상단 영역 또한 자신의 로고 이미지로 표시할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘고정형 사이드바 영역의 블로그 로고’ 항목을 살펴보세요.

이 항목에는 총 3가지 모드의 로고 이미지를 업로드할 수 있습니다:

기본 블로그 로고 이미지
노을 모드일 때 블로그 로고 이미지
밤 모드일 때 블로그 로고 이미지

1. 기본 블로그 로고 이미지

블로그 제목 영역에 블로그 로고를 표시하려면 이 속성에는 무조건 이미지가 업로드되어야 합니다. 업로드할 이미지는 최소 너비 1000픽셀 이상, 정사각형 비율의 투명도 지원 PNG 이미지를 권장합니다.

2·3. 노을, 밤 모드일 때 블로그 로고 이미지

프라치노 공간은 기본 모드인 ‘낮 모드’와 함께 ‘노을 모드’, ‘밤 모드’가 있습니다. 만약 여러분이 노을, 밤 모드 중 한 가지를 사용하거나, 시간대에 따라 모드가 자동으로 변경되는 기능을 사용한다면 기본 블로그 로고 이미지와 함께 각 모드에 관한 로고 이미지를 업로드해야 합니다.

3-9. 고정형 사이드바 설정하기

프라치노 — Mon, 22 Jul 2019 22:09:54 +0900

티스토리 반응형 스킨, 프라치노 공간은 페이지의 너비가 1,420픽셀 이상일 때 사이드바를 측면에 고정시킬 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘고정형 사이드바’ 항목을 살펴보세요.

‘고정형 사이드바’ 항목에는 다음과 같은 속성이 있습니다:

사용
기본, 노을, 밤일 때 버튼, 호버, 배경 컬러
기본, 노을, 밤일 때 배경 이미지
배경 이미지 위치, 크기, 반복
사이드바 위치
사이드바 모듈 순서

1. 사용

고정형 사이드바를 사용할 것인지 설정합니다.

2. 기본, 노을, 밤일 때 버튼, 호버, 배경 컬러

고정형 사이드바의 배경 컬러 또는 모듈의 버튼, 버튼이 커서나 손가락이 링크나 버튼 위에 있을 때의 상황인 호버(hover)일 때의 컬러를 설정합니다. 스킨의 모드에 따라 컬러를 설정할 수 있습니다. 단 노을이나 밤 모드의 컬러를 설정하려면 먼저 기본 컬러가 설정되어 있어야 합니다.

3. 기본, 노을, 밤일 때 배경 이미지

사이드바의 배경을 이미지로 설정할 수 있습니다. 스킨의 모드에 따라 이미지를 설정할 수도 있습니다. 단 노을이나 밤 모드의 이미지를 설정하려면 먼저 기본 이미지가 업로드되어 있어야 합니다.

4. 배경 이미지의 위치, 크기, 반복

사이드바의 배경 이미지가 설정되어 있을 경우 이미지의 규칙을 설정합니다. 이미지를 반복하여 무늬화하거나, 배경 이미지를 꽉 차게 표시할 수도 있습니다.

5. 사이드바의 위치

사이드바를 왼쪽이나 오른쪽에 고정시킬 수 있습니다. 기본적으로 왼쪽에 고정됩니다.

6. 사이드바 모듈 순서

사이드바 모듈 그룹의 순서를 바꿀 수 있습니다. 기본적으로 ‘사이드바 1’에서 ‘사이드바 2’ 흐름으로 설정됩니다.

3-8. 카테고리별로 다른 모드 설정하기

프라치노 — Tue, 7 May 2019 22:09:02 +0900

티스토리 반응형 스킨, 프라치노 공간은 스킨의 전반적인 분위기나 글 목록의 모양새, 대표 커버 이미지 등을 카테고리별로 다르게 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘카테고리별 모드’ 항목을 살펴보세요.

‘카테고리별 모드’ 항목에는 프라치노 공간이 지원하는 모드에 관한 속성이 있습니다. 원하는 속성에 지정하고자 하는 카테고리 이름을 입력하면 됩니다. 이때 카테고리는 ,로 구분합니다.

하위 카테고리 선택하기

/, *, **를 사용하여 원하는 하위 카테고리를 선택할 수 있으며, 다음과 같이 조합할 수 있습니다:

상위 카테고리 이름/하위 카테고리 이름은 특정 상위 카테고리에 있는 특정 하위 카테고리를 선택합니다.
상위 카테고리 이름/*는 특정 상위 카테고리에 있는 하위 카테고리 전체를 선택합니다.
상위 카테고리 이름/**는 특정 상위 카테고리와 함께 해당 카테고리에 있는 하위 카테고리 전체를 선택합니다.
*/하위 카테고리 이름은 상위 카테고리 전체 중에서 특정 하위 카테고리를 선택합니다.
*/*는 하위 카테고리 전체를 선택합니다.

방명록, 인기 태그, 검색 결과 페이지 선택하기

카테고리와 함께 방명록, 인기 태그, 검색 결과 페이지를 선택할 수도 있습니다:

guestbook은 방명록 페이지를 선택합니다.
tags는 인기 태그 페이지를 선택합니다.
search는 검색 결과 페이지를 선택합니다.

예를 들어 방명록 페이지와 ‘일상이야기’, ‘유용한 정보’, ‘유용한 정보’의 하위 카테고리 전체를 선택하고 싶다면 속성 값을 guestbook, 일상이야기, 유용한 정보/**로 입력합니다.

3-7. 댓글, 공유 등의 활동 영역 설정하기

프라치노 — Mon, 6 May 2019 22:19:02 +0900

활동 영역은 ‘댓글’, ‘공유하기’, ‘다른 글’ 영역을 총칭합니다. 스킨은 글 페이지가 로드되었을 때 활동 영역에 우선으로 표시할 항목과 댓글 관련 설정을 할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘활동 영역’ 항목을 살펴보세요.

‘활동 영역’ 항목에는 다음과 같은 속성이 있습니다:

기본 모드
댓글 개수 표시
댓글 순서 반전

1. 기본 모드

글 페이지가 로드되었을 때 활동 영역에 우선으로 표시할 항목을 설정할 수 있습니다. ‘댓글’, ‘공유하기’, ‘다른 글’ 영역 중 하나를 우선으로 표시할 수 있습니다.

2. 댓글 개수 표시

활동 영역 맨 위에 있는 ‘댓글’ 버튼의 텍스트 옆에 댓글 개수를 표시합니다.

3. 댓글 순서 반전

말 그대로 댓글의 순서를 반전시킵니다. 이 속성을 켜면 댓글 입력 필드는 맨 위로 올라가며 댓글이 작성된 순서 또한 반전됩니다.

3-6. 개발 언어 하이라이트 설정하기

프라치노 — Mon, 6 May 2019 22:18:10 +0900

티스토리 반응형 스킨, 프라치노 공간은 highlight.js 플러그인 기반의 개발 언어 하이라이트를 지원합니다. 이것을 사용하면 글 내에 있는 코드 블록의 모양새를 이해하기 쉽게 바꾸어 줍니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘개발 언어 하이라이트 (highlight.js)’ 항목을 살펴보세요.

‘개발 언어 하이라이트 (highlight.js)’ 항목에는 다음과 같은 속성이 있습니다:

사용
코드 자동 감지
번호 사용
번호 사용 시 줄무늬
일부 번호에 줄 바꿈
너비 확장
탭 폭

1. 사용

highlight.js 플러그인 기반의 개발 언어 하이라이트를 사용할 것인지 설정합니다. 만약 별도의 플러그인을 사용한다면 이 속성을 끄세요.

2. 코드 자동 감지

글을 쓸 때 코드 블록의 언어를 설정한 것과 상관없이 작성된 코드의 언어를 자동으로 감지합니다. 글 에디터의 코드 블록에서 지원되지 않는 언어를 사용할 때 유용합니다.

3. 번호 사용

코드 블록 내 작성된 내용에 줄 번호를 표시합니다.

4. 번호 사용 시 줄무늬

코드 블록 내용의 줄을 구분하기 위해 줄무늬를 넣습니다. 이 속성은 ‘번호 사용’ 속성을 켰을 때에만 작동됩니다.

5. 일부 번호에 줄 바꿈

코드 블록 내용 중 한 줄이 글의 너비보다 길 경우 줄을 바꿉니다.

6. 너비 확장

이 속성을 켜면 코드 블록이 글의 너비보다 확장됩니다. 확장된 너비는 ‘확장 미디어의 너비’ 값을 따라갑니다.

7. 탭 폭

키보드의 tab 키를 눌렀을 때 입력된 여백의 크기를 설정합니다. 기본은 4칸으로 되어 있습니다.

코드 블록 사용 예시

개발 코드 하이라이트를 사용하면 코드 블록은 아래 코드의 내용처럼 표시됩니다.

#code {
    /* 코드 언어에 맞춰서 텍스트의 모양새가 변경됩니다. */
    display: flex;
    flex-flow: column-reverse;
}

코드는 각종 개발 언어에 맞게 표시되므로 방문자에게 작성된 코드의 이해를 높일 수 있습니다.

하이라이트 모양새 또는 개발 언어 사용자화하기

앞서 말했듯이 개발 언어 하이라이트는 highlight.js 플러그인으로 작동됩니다. 따라서 원한다면 플러그인 사이트를 방문하여 원하는 개발 언어가 지원되는 플러그인의 자바스크립트 파일을 다운로드하거나, 하이라이트 컬러 등의 모양새를 다르게 하기 위해 CSS 파일을 다운로드하여 대치할 수도 있습니다.

개발 언어 하이라이트 플러그인의 자바스크립트 파일은 script_highlight.js, CSS 파일은 style_highlight.css입니다. 이것들을 대치하면 됩니다.

해당 파일을 업로드하여 대치를 완료했다면 반드시 브라우저의 캐시를 초기화하세요.

3-5. 너비, 컬러 등 글 페이지의 기능 설정하기

프라치노 — Mon, 6 May 2019 22:17:39 +0900

티스토리 반응형 스킨, 프라치노 공간은 글 페이지일 때 사용되는 여러 가지의 기능을 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘글’ 항목을 살펴보세요.

‘글’ 항목에는 다음과 같은 속성이 있습니다:

진행 바 표시
글 작성자 표시
태그 표시
추천 알림 표시
미디어 확장
미디어 좌우 여백 제거
양쪽 정렬
바탕체
권장 너비 제한 · 글, 확장 미디어의 너비 (px)
낮, 노을, 밤일 때 글의 링크

1. 진행 바 표시

이것을 켜면 방문자가 긴 글을 읽을 때 어느 정도 읽었는지 알려주기 위해 진행 바가 표시됩니다. 진행 바는 글이 브라우저 윈도의 높이보다 약 2배 이상 길 때 상단 글로벌 내비게이션 영역에 표시됩니다.

2. 글 작성자 표시

글의 오른쪽 위에 글 작성자를 표시할 수 있습니다. 이것은 팀 블로그일 때 유용합니다.

3. 태그 표시

글의 맨 아래에 이 글에 사용된 태그를 표시할 수 있습니다.

4. 추천 알림 표시

글의 4분의 3을 읽으면 브라우저 윈도우의 오른쪽 아래에 다른 글을 추천하는 알림이 표시됩니다. 이것은 브라우저 윈도우의 너비가 글의 너비보다 800픽셀 더 커야 표시됩니다.

5. 미디어 확장

프라치노 공간은 글에 사용된 이미지나 동영상 등의 너비가 특정 너비보다 큰 경우 이를 글의 너비보다 크게 표시할 수 있습니다. 미디어의 너비가 확장되는 것을 원하지 않는다면 이 속성을 끄면 됩니다.

6. 미디어 좌우여백 제거

브라우저의 너비가 760픽셀 이하일 때 프라치노 공간은 글의 몰입을 돕기 위해 글에 사용된 이미지나 동영상 등의 좌우 여백을 제거합니다. 이를 원하지 않는다면 이 속성을 끄면 됩니다.

7. 양쪽 정렬

글 문단 p 태그에 한하여 글의 정렬을 양쪽 정렬(justified text)로 설정합니다.

8. 바탕체

글 문단 p 태그에 한하여 기본 서체를 바탕체로 표시할 수 있습니다. 프라치노 공간은 ‘Source Serif Pro’와 ‘나눔명조’를 바탕체로 사용하며, 주로 소설이나 수필 등의 글을 다룰 때에 좋습니다.

9. 권장 너비 제한 · 글, 확장 미디어의 너비 (px)

프라치노 공간은 글의 너비와 미디어가 확장될 때의 최대 너비를 조절할 수 있습니다. 글의 너비가 너무 넓으면 글 읽기가 힘들어지고, 이는 방문자가 도중에 글 읽기를 포기할 가능성이 높아집니다.

글의 너비는 728픽셀부터 970픽셀까지, 확장 미디어의 너비는 최대 1280픽셀까지 설정할 수 있습니다. 이보다 너비가 작거나 크면 너비는 권장 범위 내로 자동 보정됩니다. 만약 자동 보정되는 것을 원하지 않는다면 ‘권장 너비 제한’ 속성을 끄면 되나 이는 절대로 권장되지 않습니다.

10. 낮, 노을, 밤일 때 글의 링크

프라치노 공간은 일반 텍스트와 하이퍼링크 텍스트를 구별되게 표시하기 위해 하이퍼링크 텍스트에 컬러를 넣습니다. 이 항목의 속성들은 글 내 하이퍼링크 텍스트의 컬러를 설정합니다.

3-4. 대표 커버 이미지 설정하기

프라치노 — Mon, 6 May 2019 22:16:37 +0900

티스토리 반응형 스킨, 프라치노 공간은 기본적으로 글 페이지일 때 글 제목 영역의 배경을 대표 이미지로 표시하며, 이와 관련된 설정을 제공합니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘대표 커버 이미지’ 항목을 살펴보세요.

‘대표 커버 이미지’ 항목에는 다음과 같은 속성이 있습니다:

모드
대체 커버 이미지
기본 대체 커버
대체 커버 2 - 4
대체 커버 이미지만 사용

1. 모드

대표 커버 이미지를 어떻게 사용할지 설정합니다. ‘비활성화’, ‘일반’, ‘전체 화면’ 세 가지 모드가 있습니다.

‘일반’은 글 제목 영역에 대표 커버 이미지를 표시하며, ‘전체 화면’은 이를 브라우저 윈도우의 높이만큼 꽉 차게 표시합니다. 대표 커버 이미지를 표시하지 않으려면 ‘비활성화’로 설정합니다.

2. 대체 커버 이미지

읽고 있는 글에 대표 이미지가 없을 때 프라치노 공간은 대체 이미지를 대표 커버 이미지로 표시합니다. 프라치노 공간은 대체 커버 이미지를 총 4개까지 업로드할 수 있는데, 이 중 사용할 이미지 한 개를 선택합니다.

3. 기본 대체 커버

대체 커버 이미지를 사용하려면 이 속성에는 무조건 이미지가 업로드되어야 합니다. 업로드할 이미지는 최소 너비 1920픽셀 이상, 3:2 비율의 JPEG 이미지를 권장합니다.

4. 대체 커버 2 - 4

기본 대체 커버 외에 다른 대체 커버 이미지를 업로드할 수 있습니다. 여기에 업로드된 이미지는 ‘대체 커버 이미지’ 속성에서 선택할 수 있습니다.

5. 대체 커버 이미지만 사용

대표 이미지가 있는 글에서도 대표 커버 이미지를 대체 커버 이미지로 표시하고 싶을 때 이 속성을 켭니다.

3-3. 글 목록의 스타일, 기능 설정하기

프라치노 — Mon, 6 May 2019 22:15:16 +0900

티스토리 반응형 스킨, 프라치노 공간은 여러 가지 글 목록의 모양새를 설정할 수 있을 뿐만 아니라 같은 페이지에서 이전 글을 계속 불러오도록 설정할 수도 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘글 목록’ 항목을 살펴보세요.

‘글 목록’ 항목에는 다음과 같은 속성이 있습니다:

모드
목록의 글 제목 숨기기
목록 더 보기 버튼

1. 모드

글 목록의 모양새를 설정합니다. 프라치노 공간은 ‘갤러리형’과 ‘포스터형’, ‘카드형’, ‘텍스트형’ 모양새의 글 목록을 제공합니다.

‘작은, 일반, 큰 갤러리형’은 사진이나 동영상 등의 멀티미디어 관련 콘텐츠를 다룬다면 추천합니다. 너비 1140픽셀의 브라우저 윈도우를 기준으로 작은 갤러리는 4단, 일반은 3단, 큰 갤러리는 2단입니다.

‘포스터형’은 영화나 인물사진 등의 콘텐츠를 다룬다면 추천합니다. 2:3 비율은 세로형 사진을 더 돋보이게 합니다. 이것은 너비 1140픽셀의 브라우저 윈도우를 기준으로 3단으로 표시됩니다.

‘카드형’은 글의 대표 이미지와 본문의 내용이 적절한 비율로 표시되게 하고 싶다면 추천합니다. 이것은 너비 1140픽셀의 브라우저 윈도우를 기준으로 3단으로 표시됩니다.

‘텍스트형’은 맛집이나 상품 리뷰, 책 등 글 위주의 콘텐츠를 다룬다면 추천합니다.

2. 목록의 글 제목 숨기기

‘갤러리형’, ‘포스터형’ 모양새의 글 목록을 사용할 경우, 기본적으로 글의 제목을 숨기고 커서 또는 손가락을 항목 위에 올릴 때에만 표시합니다.

3. 목록 더 보기 버튼

이 속성은 같은 글 목록 페이지 내에서 ‘더 보기’ 버튼을 눌러 항목을 더 불러올 수 있게 합니다.

3-2. 블로그 로고 설정하기

프라치노 — Mon, 6 May 2019 22:14:56 +0900

티스토리 반응형 스킨, 프라치노 공간은 가운데 위 블로그 제목 영역을 자신의 로고 이미지로 표시할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘블로그 로고 (Trademark)’ 항목을 살펴보세요.

‘블로그 로고 (Trademark)’ 항목에는 총 4가지 모드의 로고 이미지를 업로드할 수 있습니다:

기본 블로그 로고 이미지
노을 모드일 때 블로그 로고 이미지
밤 모드일 때 블로그 로고 이미지
대표 커버 위에 있을 때 블로그 로고 이미지

1. 기본 블로그 로고 이미지

블로그 제목 영역에 블로그 로고를 표시하려면 이 속성에는 무조건 이미지가 업로드되어야 합니다. 업로드할 이미지는 최소 너비 1000픽셀 이상, 4.17:1 비율의 투명도 지원 PNG 이미지를 권장합니다.

2·3. 노을, 밤 모드일 때 블로그 로고 이미지

4. 대표 커버 위에 있을 때 블로그 로고 이미지

블로그가 글 페이지이고 글 제목 영역에 대표 커버 이미지가 표시될 때 이에 맞는 블로그 로고 이미지를 표시할 수 있습니다. 이 속성에 로고 이미지를 업로드하지 않을 경우 밤 모드일 때의 로고 이미지를 대신 사용합니다.

3-1. 분위기, 컬러 등의 일반 기능 설정하기

프라치노 — Mon, 6 May 2019 22:13:15 +0900

티스토리 반응형 스킨, 프라치노 공간은 스킨의 분위기나 특정 상황일 때 링크나 버튼의 컬러 등을 손쉽게 설정할 수 있습니다. 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘일반’ 항목을 살펴보세요.

‘일반’ 항목에는 다음과 같은 속성이 있습니다:

모드
CDN 사용
style.css 사용
테마 컬러
낮, 노을, 밤일 때 링크 호버

1. 모드

스킨의 전반적인 분위기를 설정합니다. ‘낮’, ‘노을’, ‘밤’ 세 가지의 분위기를 설정할 수 있으며 시간대에 따라 스킨의 분위기가 자동으로 바뀌게 하거나 시스템 모드에 따라 바뀌게 설정할 수도 있습니다.

‘낮 모드’는 프라치노 공간의 밝은 느낌으로 기본값으로 설정되어 있습니다. 이것은 하얗고 투명해서 방문자들에게 깨끗하고 신뢰 있는 느낌을 줍니다.

‘노을 모드’는 따뜻한 느낌으로 마치 새벽노을 같죠. 색온도가 낮기 때문에 가독성이 높고 눈이 편안합니다.

마지막으로 ‘밤 모드’는 어두운 느낌으로 일명 다크 모드입니다. 사진이나 동영상 등을 전문적으로 다루는 블로그에 적극 추천합니다. 왜냐하면 이러한 콘텐츠가 다른 분위기에 비해 돋보이기 때문이죠.

2. CDN 사용

CDN은 스킨 파일을 효율적으로 로드할 수 있게 합니다. 만약 skin.html과 style.css를 제외한 스킨 파일을 수정하고 싶다면 이 설정을 끄는 것이 좋습니다. 그러나 되도록이면 끄지 않을 것을 권장합니다.

3. style.css 사용

style.css는 티스토리에서 스타일 시트를 편집할 때 사용하는 파일로, ‘스킨 편집’에서 ‘html 편집’ 버튼을 누르고, ‘CSS’ 탭으로 이동하면 편집할 수 있습니다.

스킨은 조금이나마 로드 속도를 향상하기 위해 이를 사용하지 않습니다. 만약 스타일 시트를 사용자화하기 위해 style.css를 수정해야 한다면 이 속성을 켜고 스타일 시트를 편집하세요.

4. 테마 컬러

Android용 Google Chrome 브라우저에 한하여 도구 막대의 컬러를 설정할 수 있습니다.

5. 낮, 노을, 밤일 때 링크 호버

‘링크 호버(hover)’는 커서나 손가락이 링크나 버튼 위에 있을 때의 상황을 의미합니다. 스킨은 커서나 손가락이 링크나 버튼 위에 있을 때 누를 수 있다는 것을 알리기 위해 컬러가 바뀝니다.

이 항목의 속성들은 커서나 손사락이 링크나 버튼 위에 있을 때 바뀌는 컬러를 설정합니다.

3. 스킨 설정 항목 간략하게 둘러보기

프라치노 — Mon, 6 May 2019 22:12:12 +0900

프라치노 공간은 HTML 코드를 편집할 필요 없이 스킨 편집 페이지에서 설정이 가능합니다. 여기에서는 스킨이 어떠한 설정을 지원하는지 스킨 설정 항목에 관하여 간략하게 알아봅니다.

블로그 관리 페이지에서 ‘스킨 편집’으로 이동하면 아래의 스킨 설정 항목을 볼 수 있습니다.

일반

스킨 모드(전반적인 분위기)와 커서를 링크 위에 올렸을 때의 컬러 등을 설정할 수 있습니다.

블로그 로고

페이지의 가운데 위에 위치한 블로그 제목을 로고 이미지로 표시할 수 있습니다. 총 4가지 스킨 모드에 맞춰진 로고 이미지를 업로드할 수 있으며, 별도의 설정 없이 로고 이미지가 적용됩니다. 이미지는 자동으로 최적화되므로 PNG 형식의 초고화질 로고 이미지를 업로드해 주시고 4.17:1 비율의 이미지를 권장합니다.

글 목록

글 목록의 모양새를 어떻게 표시할 것인지에 관한 모드와 ‘더 보기’ 버튼 등을 설정할 수 있습니다.

대표 커버 이미지

프라치노 공간은 글의 대표 이미지를 글 페이지의 상단 제목 영역에 배경으로 표시하며 이것을 대표 커버 이미지라고 부릅니다. 대표 커버 이미지를 어떻게 표시할 것인지에 관한 모드를 설정할 수 있으며 글에 대표 이미지가 없을 경우 대표 커버 이미지는 어떻게 표시할 것인지를 설정할 수 있습니다.

글

블로그가 글 페이지일 때의 스킨의 기능을 설정합니다. 글을 얼마나 읽었는지 표시해주는 진행 바와 글 작성자, 태그 등을 표시할지를 설정할 수 있습니다. 글의 너비 또한 설정할 수 있습니다.

개발 언어 하이라이트 (highlight.js)

개발 언어 하이라이트는 글에 코드 블록이 있을 때 이를 보기 좋게 표시해주는 기능입니다. highlight.js 플러그인 기반으로 작동되며, 줄 번호를 표시할 것인지 등의 세부 설정이 가능합니다.

활동 영역

활동 영역은 댓글, 공유하기, 다른 글 영역을 총칭합니다. 글 페이지가 로드되었을 때 댓글, 공유하기, 다른 글 영역 중 어떠한 것을 우선으로 표시할 것인지와 댓글 개수를 표시할 것인지, 댓글이 작성된 순서를 반전시킬 것인지를 설정할 수 있습니다.

카테고리별 모드

각 카테고리별로 스킨 모드나 글 목록의 모양새 등을 다르게 설정할 수 있습니다. 방명록, 태그, 검색 결과 페이지도 포함됩니다.

고정형 사이드바

브라우저 윈도우의 너비가 1,420픽셀 이상일 때 왼쪽 또는 오른쪽에 사이드바를 표시할 수 있습니다.

고정형 사이드바 영역의 블로그 로고

고정형 사이드바 맨 위 영역에 있는 블로그 제목을 로고 이미지로 표시할 수 있습니다. 총 3가지 스킨 모드에 맞춰진 로고 이미지를 업로드할 수 있으며, 별도의 설정 없이 로고 이미지가 적용됩니다. 이미지는 자동으로 최적화되므로 PNG 형식의 초고화질 로고 이미지를 업로드해 주시고 1:1 비율의 이미지를 권장합니다.

사이드바 모듈

최근 글과 인기글 모듈을 어떻게 표시할 것인지에 관한 모드와 카테고리 모듈에서 하위 카테고리를 접는 등 사이드바와 관련된 여러 가지를 설정할 수 있습니다.

블로그 정보의 배경

오른쪽 사이드바의 맨 첫 번째에 표시되는 블로그 정보의 배경을 설정할 수 있습니다.

meta 태그

구글 서치 콘솔, 네이버 서치 어드바이저 등에서 발급받은 meta 태그를 입력할 수 있습니다.

네이버 이웃

네이버 열린이웃을 설정할 수 있습니다.

Google AdSense

Google AdSense 자동 광고를 설정할 수 있습니다.

사업자 정보

기업 블로그인 경우 사업자 정보를 표시할 수 있습니다.

2. 사이드바 모듈 설정하기

프라치노 — Mon, 6 May 2019 22:11:58 +0900

티스토리 반응형 스킨, 프라치노 공간은 사이드바 모듈을 지원합니다. 이에 따라 여러분은 입맛에 맞게 모듈을 추가하거나 제거할 수 있습니다. 여기에서는 이것에 대한 설정 방법을 알려 드립니다.

사이드바의 일부 기능 설정 방법을 찾는다면 ‘사이드바의 일부 기능 설정하기’ 가이드를 참조하세요.

사이드바는 총 2개로 구성되어 있으며 각자의 역할이 있습니다.

사이드바 1: 일반 메뉴

글로벌 내비게이션에서 왼쪽에 있는 버튼을 눌렀을 때 나타나는 사이드바를 의미합니다. 카테고리나 공지사항 등 블로그의 기본 역할을 하는 모듈 또는 외부에서 제공하는 플러그인 모듈을 놓을 수 있습니다.

사이드바 2: 블로그 정보 메뉴

글로벌 내비게이션에서 오른쪽에 있는 프로필 이미지 버튼을 눌렀을 때 나타나는 사이드바를 의미합니다. 간략한 블로그의 정보가 포함되어 있으며 구독 버튼, 외부 링크 등의 모듈을 놓을 수 있습니다.

사이드바 편집하기

사이드바 모듈은 블로그 관리 페이지의 ‘사이드바’ 메뉴에서 편집할 수 있습니다. 본인이 원하는 구성을 입맛에 맞게 설정하세요. 편집이 완료되면 변경사항을 저장합니다.

1-1. 스킨 업데이트하기

프라치노 — Mon, 6 May 2019 22:10:09 +0900

프라치노 공간을 업데이트할 때에도 ‘1. 티스토리 스킨 설치하기’와 동일한 방법으로 설치하면 됩니다. 그런데 이렇게 하면 컬러나 구성 등의 스킨 설정값이 완전히 초기화될 수 있습니다.

초기화되는 것을 막기 위해 다른 방법으로 스킨을 업데이트하는 법에 관하여 알아봅시다.

따라 하기 전 주의사항

이 방법은 설치된 스킨의 버전이 11.x.y일 때 x는 일치하지만 y는 수가 없거나 다른 작은 업데이트일 때에만 해당되며 x대 주요 업데이트일 경우에는 절대로 따라 하면 안 됩니다. 또한 스킨 설치와 마찬가지로 업데이트하기 전에는 사용하고 있는 스킨을 백업해야 합니다.

이 설명서를 따라 하기 전에 Brackets 등의 코드 편집 앱을 시스템에 설치하세요. 코드를 편집하지는 않지만 HTML 파일을 열어야 하기 때문에 필요합니다. 메모장이나 텍스트 편집기로도 HTML을 열 수는 있지만 인코딩 방식이 달라 파일이 손상될 수 있으므로 절대로 추천하지 않습니다.

이제 프라치노 공간 업데이트를 시작해 봅시다!

1. 스킨 파일 대치하기

스킨 다운로드 메일 또는 my.paddle.com에서 최신 버전의 스킨 파일을 다운로드합니다. 그런 다음 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고, ‘html 편집’ → ‘파일업로드’ 탭으로 이동합니다.

여기에서 ‘추가’ 버튼을 누릅니다. 그리고 다운로드한 스킨 폴더에서 index.xml, skin.html, style.css 파일을 제외한 나머지 28개의 파일을 업로드합니다. 업로드가 완료되면 ‘HTML’ 탭으로 이동합니다.

2. HTML 코드 대치하기

다운로드한 스킨 폴더에서 skin.html을 코드 편집 앱으로 열고, 키보드 Command(Ctrl) + A 키를 눌러 코드 전체를 선택합니다. 전체 선택된 코드를 복사하고, ‘html 편집’ 페이지의 ‘HTML’ 탭에 있는 코드 전체를 복사한 코드로 덮어 씌웁니다. 마지막으로 변경 사항을 적용하면 업데이트가 완료됩니다.

업데이트에 어려움을 겪고 있나요?

스킨 업데이트에 어려움을 겪고 있나요? 그렇다면 카카오톡으로 문의해 주세요. 지원 범위 내에 최대한 도와 드리도록 하겠습니다. 단 상황에 따라 도와드리지 못할 수도 있습니다.

1. 티스토리 스킨 설치하기

프라치노 — Mon, 6 May 2019 22:09:33 +0900

티스토리 반응형 스킨, 프라치노 공간을 설치하는 방법은 정말 쉽습니다. 설치를 마치고 남은 시간에는 아메리카노 한 잔의 여유는 어떨까요? 진행 방법을 요약하면 아래와 같습니다.

프라치노 공간 스킨 파일을 티스토리에 등록한다.
블로그 관리 페이지에서 최적화를 위해 몇몇 설정을 한다.
적용된 스킨을 감상한다.

정말 간단하죠? 이제 본격적으로 스킨을 설치해 보도록 하겠습니다.

1. 스킨 업로드하기

블로그 관리 페이지에서 ‘스킨 변경’, 그다음 ‘스킨 등록’으로 이동합니다. 그리고 다운로드한 스킨 폴더에 있는 모든 파일을 빠짐없이 업로드합니다. 총 31개의 파일이 업로드될 것이며 작업이 완료되었다면 스킨을 저장하고 ‘스킨 보관함’으로 이동해서 프라치노 공간을 적용합니다.

이제 ‘꾸미기’의 ‘모바일’ 메뉴로 이동합니다.

2. 모바일 웹 페이지 끄기

이 스킨은 반응형 스킨이기 때문에 모바일 웹 페이지는 필요하지 않습니다. ‘모바일 꾸미기 설정’에서 티스토리 모바일 웹 자동 연결을 ‘사용하지 않습니다’로 바꾸고 변경사항을 저장합니다.

이제 ‘꾸미기’의 ‘메뉴바/구독 설정’ 메뉴로 이동합니다.

3. 블로그 메뉴바/구독 버튼 켜기

프라치노 공간의 기능을 완전히 사용하기 위해서는 메뉴바와 구독 버튼을 켜야 합니다. 메뉴바와 구독 버튼은 ‘표시합니다’로 바꾼 다음 변경사항을 저장하면 됩니다.

변경사항을 저장하면 ‘플러그인’ 메뉴로 이동합니다.

4. 플러그인 설정하기

마지막 단계입니다! 이 스킨은 반응형 스킨이므로 제대로 사용하려면 반드시 ‘반응형 웹 스킨 이미지 최적화’ 플러그인을 켜야 합니다. 그러지 않으면 모바일에서 느려질 수 있습니다. 그리고 ‘블로그 아이콘 표시’, ‘홈페이지 아이콘 표시’, ‘무지개 링크’, ‘소셜댓글 LiveRe’, ‘SNS 글 보내기’ 플러그인은 지원하지 않으므로 해제합니다.

축하합니다! 모든 설정이 완료되었습니다. 이제 본인의 블로그로 돌아가 스킨이 올바르게 적용되었는지 확인하면 됩니다. 티스토리 반응형 스킨, 프라치노 공간과 함께 즐거운 티스토리 생활되시기를 바랍니다.

티스토리의 새 에디터를 환영합니다

프라치노 — Sun, 31 Mar 2019 16:30:26 +0900

2019년 3월 27일 수요일, 티스토리는 정말 낡아빠진 글쓰기 에디터를 바꾸었습니다.

플러그인 없는 최신 기술로 대체되었을 뿐만 아니라 이미지를 손쉽게 삽입하는 등 글을 손쉽게 작성할 수 있게 만들었습니다. 물론, 아직은 초기라 문제가 없는 것은 아닙니다만 이것은 차차 개선될 것이라고 생각됩니다. 다시 한번 티스토리의 새 에디터를 환영한다는 말씀을 드립니다.

새 에디터가 공개된 뒤 저는 프라치노 공간과 새로운 에디터와의 호환성을 높이려고 노력했습니다. 그리고 마침내 2019년 3월 31일 일요일, 새로운 에디터를 지원하는 프라치노 공간의 업데이트 버전이 배포되었습니다. 제 입으로 말하기는 그렇지만 이 버전은 엄청납니다! 새로운 에디터에서 지원되는 기능을 완전히 대응하기 때문이죠. 오픈그래프부터 다양한 서체, 표의 서식까지, 모든 기능들이 스킨의 모양새에 맞게 최적화되었습니다.

확장 이미지가 작동되는 프라치노 공간

또한 확장 이미지에 관한 기능에도 많은 변화를 줬습니다. 기존 에디터에서는 확장할 이미지를 일일이 찾아 크기를 지정해줘야 했지만 새로운 에디터는 그럴 필요가 없습니다. 이미지의 실제 너비가 확장 이미지의 너비 설정값보다 크고 가로형 이미지라면 상황에 따라 자동으로 확장되기 때문이죠. 특히 이 기능은 가로형 사진을 주로 다루는 블로거라면 정말 좋아하실 것입니다. 이미지가 글의 너비보다 크게 보이기 때문입니다.

저는 원래 글을 쓸 때 먼저 macOS의 메모 앱으로 글을 작성하고 에디터에 붙인 뒤 코드를 정리하는 방식으로 진행했는데 이제는 그럴 필요가 없어졌습니다. 프라치노 공간을 사용하는 분들이라면 스킨을 바로 업데이트하고 새로운 글쓰기 에디터를 사용해 보세요. 분명 마음에 드실 것입니다!

티스토리 반응형 스킨, 프라치노 공간을 사용해 주셔서 진심으로 감사의 말씀을 드립니다.

새 에디터에서 enter 키를 누르면 줄 간격이 넓습니다.

원래 enter(return) 키는 문단을 바꾸는 키입니다. 줄을 바꾸려면 shift + enter 키를 눌러야 합니다. 불편하신가요? 그렇다면 블로그 관리 페이지의 콘텐츠 설정에서 단락 앞뒤의 공백을 ‘사용하지 않습니다’로 설정하세요. 그러나 이것을 코드를 지저분하게 만드므로 추천해 드리지 않습니다.

새 에디터에서 작성된 글의 레이아웃에 문제가 있습니다.

그럴 경우 먼저 제게 문의를 해주세요. 댓글보다는 카카오톡 문의를 추천합니다. 문의할 때 꼭 문제 발생 페이지의 URL과 어떠한 브라우저에서 문제가 발생하는지를 알려주세요. 스킨 제작자는 천리안이 아닙니다.

프라치노 공책은 업데이트 계획이 없나요?

아니요. 프라치노 공책은 이번 공간 스킨 업데이트 이후로 개선 작업에 들어갔습니다. 많은 부분이 개선될 예정이기 때문에 시간이 걸릴 수 있습니다. 기다려 주시면 감사하겠습니다.

프라치노 스킨 커뮤니티 개설

프라치노 — Tue, 19 Mar 2019 22:09:00 +0900

안녕하세요, 운영자 프라치노입니다. 티스토리 반응형 스킨, 프라치노 공간의 사용자가 400명(Paddle 통계 약 480명)을 돌파했고 프라치노 공책 사용자 또한 많아지고 있습니다. 결코 저렴하지 않은 스킨임에도 불구하고 많은 분들이 선택해 주셨습니다. 이에 대해 진심으로 감사의 말씀드립니다.

프라치노 공간을 포함하여 스킨에 관한 문의는 조금씩 많아지고 있는 추세입니다. 일주일에 약 1-2건 정도였던 문의는 3-4건 정도로 많아지고 있습니다. 이에 따라 운영자는 프라치노 스킨 사용자의 불편한 점을 빠르게 해소하고 사용 경험을 한 층 더 향상하기 위해 각종 노하우 또는 문제 해결 방법을 공유할 수 있는 페이스북 커뮤니티(Facebook Community)를 개설했습니다.

프라치노 스킨을 사용하는 모든 여러분들은 커뮤니티에 가입하면 스킨에 관한 질의응답이 가능하며 여러분께서 한 질문은 다른 분들도 볼 수 있기 때문에 스킨 사용을 더 쉽게 만들 수 있습니다.

또한 교류가 많아질수록 운영자는 이를 보고 스킨 개선 방향을 잡는 데에 도움을 받을 수 있습니다.

커뮤니티에 접속하려면 여기를 누르세요. 프라치노 공간 사이트의 왼쪽 위 메뉴 아이콘을 누르고 ‘프라치노 스킨 커뮤니티’ 링크를 눌러도 커뮤니티에 접속할 수 있습니다.

프라치노 스킨과 함께 즐거운 티스토리 블로그 생활되시기를 바랍니다. 감사합니다.

어떤 상황에서든지 잘 보이는 프라치노 공간

프라치노 — Mon, 11 Feb 2019 22:09:00 +0900

티스토리 반응형 스킨, 프라치노 공간은 다른 스킨보다 앞선 디테일과 정교한 마감을 자랑합니다. 특히 모바일부터 데스크탑 환경까지 일관성 있고 최적화된 인터페이스를 선사하기 때문에 여러분은 어떤 상황이든지 블로그를 편리하게 사용할 수 있습니다. 방문자는 글을 어떠한 방해 없이 편안하게 읽을 수 있지요.

그뿐만이 아닙니다. 티스토리에서 제공하는 기본 스킨들이나 시중 판매 중인 티스토리 유료 스킨들을 비교해봐도 프라치노 공간은 우위에 있다고 말할 수 있습니다.

Mozilla Firefox에서 Letter 스킨이 적용된 데모 블로그를 연 모습

Google Chrome에서 Poster 스킨이 적용된 공지 블로그를 연 모습

지금까지 시중에 공개된 티스토리 스킨들은 어딘지 모르게 부자연스러운 부분이 있고, 심지어 특정 최신 웹 브라우저에서는 일부 디자인이 깨지는 현상도 발생합니다. 반면 프라치노 공간은 수많은 실험 과정을 걸쳤기 때문에 부자연스러운 부분을 최소화했고 모든 최신 웹 브라우저에서 올바르게 보입니다. 만약 부자연스러운 부분이 발견되었다면 업데이트로 문제를 해결합니다.

마지막으로 ‘카테고리 글 더 보기’, ‘이미지 크게 보기’, ‘반응형 구글 애드센스(Google AdSense)’ 등 티스토리에서 기본으로 제공하는 플러그인들도 프라치노 공간에 맞게 최적화돼서 여러분은 이 플러그인들을 이질감 없이 깔끔하게 사용할 수 있습니다.

프라치노 공간에 관한 자세한 정보를 얻거나 사용을 원하신다면 여기를 누르세요.

2월 27일 이전 구입 고객분들은 꼭 Paddle로 재구입할 것

프라치노 — Sat, 29 Dec 2018 18:04:42 +0900

2018년 한 해가 벌써 끝나고 있군요. 프라치노 공간은 스킨이 탄생한 날로부터 5년이 되어갑니다. 지금까지 스킨이 살아있던 이유는 여러분들의 많은 사랑 덕분입니다. 진심으로 감사의 말씀 드립니다. 그리고 2019년이 되기 앞서 새해 인사를 드립니다. 새해 복 많이 받으세요.

프라치노 공간은 2018년 2월 27일부터 Paddle을 통하여 스킨을 제공하는 방식으로 바뀌었습니다. 이것은 여러분의 구입 정보를 더 안전하게 보관하고 스킨을 손쉽게 전달해드릴 수 있는 최상의 솔루션이지요. 그러나 2018년 2월 27일 이전 구입 고객분들 중 아직까지도 Paddle로 재구입을 하지 않은 분들이 꽤 있습니다.

Paddle로 재구입하기 위해 제공되는 쿠폰 코드는 오는 2019년 1월 5일 오전 12시부터 제공을 중지할 예정입니다. 다시 말해 2019년 1월 4일 오후 11시 59분까지 Paddle로 재구입하지 않은 분들은 더 이상 무료 업데이트를 할 수 없게 된다는 의미입니다.

2018년 2월 27일 이전 구입 고객분들 중 스킨을 Paddle로 재구입하지 않은 분들은 2019년 1월 4일 오후 11시 59분까지 카카오톡 채널로 재구입을 위한 쿠폰 코드를 문의해 주시고 해당 쿠폰 코드를 사용하여 Paddle에서 재구입해 주시기 바랍니다.

2019년에는 즐겁고 풍요로운 하루가 가득하길 바랍니다. 감사합니다.

여러분의 티스토리 블로그에 SSL을 적용하세요

프라치노 — Thu, 29 Nov 2018 22:09:00 +0900

티스토리 블로그는 SSL을 지원합니다. SSL은 쉽게 말하면 사이트에 보안을 적용하는 것으로, 이것이 적용되면 브라우저에 자물쇠 아이콘이 표시됩니다. 또한 URL은 http:// 대신 https://를 사용합니다. 결론적으로 SSL은 여러분의 블로그를 더 안전하게 만든다는 것을 의미하죠.

사실 ‘블로그에 보안이 왜 필요한지’에 관한 의문이 들 수 있습니다. 방문자가 블로그에 개인정보를 주는 것도 아닌데 말이죠. 그러나 이것은 방문자의 관점으로 보면 중요할 수 있습니다.

웹 브라우저는 SSL이 적용된 사이트가 아니라면 안전하지 않다고 표시합니다. 이것은 방문자에게 불안감을 줄 수 있고 블로그 내 활동이 축소되는 결과로 이어질 것입니다. 또한 구글 같은 검색 엔진에도 영향을 줄 수 있는데, 날이 갈수록 대다수의 검색 엔진들은 SSL이 적용된 사이트를 우선으로 표시하는 경향이 짙어지고 있습니다.

그렇기 때문에 티스토리 블로거 분들은 여러분의 블로그에 SSL을 적용할 것을 추천합니다. 어떻게 하는지 알아볼까요? 아참, 적용하기 전에 여러분의 티스토리 블로그에 사용하는 스킨이 SSL과 호환되는지 점검해야 합니다. 참고로 프라치노 공간과 공책 스킨은 SSL을 완벽하게 지원합니다.

SSL 설정 시작하기

여러분의 블로그 관리 페이지로 접속합니다. 페이지 왼쪽에 있는 메뉴에서 맨 아래를 보면 관리 항목이 있고 거기에 ‘블로그’ 링크가 있을 것입니다. 그 링크를 눌러 블로그 설정 페이지로 이동합니다.

페이지를 밑으로 스크롤해보면 보안 접속 관련 속성이 있는데 이를 ‘사용합니다.’로 설정하고 변경 사항을 저장하면 SSL 적용이 끝납니다. 간단하죠? 모든 과정이 끝난 후에는 검색 엔진의 웹 마스터 도구에 등록되어 있는 URL을 업데이트할 것을 권장합니다.

모양새를 사용자화하여 전문성을 드러내세요

프라치노 — Wed, 21 Nov 2018 22:09:00 +0900

티스토리 반응형 스킨, 프라치노 공간은 컬러부터 레이아웃까지 다양한 모양새를 제공합니다.

스킨의 전반적인 분위기를 어둡게 하고 싶으신가요? 또는 일상다반사를 다루는 블로그여서 글 목록을 텍스트 위주로 표현하고 싶으신가요? 고민 마세요! 원하는 것은 모두 이루어질 테니까요.

블로그의 주제에 맞는 모양새를 선택하면 여러분의 블로그는 방문자에게 마치 관련 전문가가 운영하는 듯한 느낌을 더해줄 수 있습니다. 다시 말해 방문자는 여러분의 블로그에 호감이 가고 콘텐츠에 몰입하며 다시 방문할 확률을 높일 수 있다는 것이죠.

프라치노 공간에 관한 자세한 정보를 얻거나 사용을 원하신다면 여기를 누르세요.

프라치노 공간, 완전히 새로워지다

프라치노 — Tue, 20 Nov 2018 22:09:00 +0900

여러분은 티스토리 블로그를 어떻게 사용하나요? 몇몇 분들은 블로그를 자신의 노하우 또는 일상을 끄적이는 곳으로 사용하는 분들이 있는가 하면 또 다른 분들은 사진이나 미디어를 정리하는 공간으로 사용하기도 합니다. 티스토리 블로그는 정말 다양한 분야로 사용되고 있습니다.

블로그에서 가장 중요한 것은 방문자에게 내용, 즉 콘텐츠를 잘 전달시키는 것입니다. 프라치노 공간은 이러한 콘텐츠를 돋보이게 하기 위한 목적으로 만들어졌고 지금도 이 목적에 충실하고 있습니다. 이것을 다시 말하면 여러분이 블로그를 어떠한 목적으로 사용하든 스킨은 블로그의 본질인 콘텐츠를 잘 드러낸다는 것이죠.

2018년 11월 20일, 이 스킨은 스킨의 기본적인 디자인부터 기능까지 완전히 새롭게 바뀌었습니다. 전 버전보다 보기 좋아지고 생각만 해도 어려운 코드 편집으로부터 해방되었습니다. 또한 꾸밀 수 있는 옵션도 다양해졌습니다. 하나 변하지 않은 것이 있다면 그것은 바로 이 스킨의 본 목적입니다.

완전히 새로워진 티스토리 반응형 스킨, 프라치노 공간을 통하여 블로그에 새 옷을 입히고 여러분의 콘텐츠가 아름답게 보이도록 해보세요. 여기를 누르면 스킨에 대해 더 알아볼 수 있습니다.

구입해 주셔서 감사합니다!

프라치노 — Sun, 8 Jul 2018 10:09:00 +0900

프라치노 공간을 구입해 주셔서 감사합니다. 여러분이 지불한 비용은 스킨을 개발하고 유지하는 데에 사용됩니다. 앞으로도 더 나은 스킨을 제공할 수 있도록 노력하겠습니다. 본인이 입력한 이메일 주소로 다운로드 링크에 관한 메일이 도착해 있을 것입니다. 그렇지 않다면 조금 더 기다리거나 정크 메일함을 확인해 보세요. 다운로드 링크에 관한 메일은 절대로 버리지 마세요! 업데이트를 받을 때에도 해당 메일의 링크를 사용합니다.

스킨을 구입하는 순간 프라치노 공간 사용 조건의 모든 사항을 동의하는 것으로 간주합니다. 사용 조건에 관한 자세한 내용을 읽어보려면 여기를 누르세요.

스킨을 다루기 어렵나요?

프라치노 공간은 스킨 편집을 위한 설명서를 제공합니다. 설명서를 둘러보면 웬만한 것은 손쉽게 해결할 수 있답니다! 그래도 모르는 것이 있다면 카카오톡으로 문의해 주세요. 지원 범위 내에 친절하게 답변해 드리도록 하겠습니다. 스킨 커뮤니티를 이용하는 방법도 있습니다!

다운로드한 티스토리 스킨을 설치하는 방법을 알아보려면 여기를 누르세요.

스킨 업데이트 소식을 받아보세요!

블로그의 안정성과 검색 엔진 최적화, 성능 개선을 위해서는 스킨을 최신 버전으로 유지하는 것이 좋습니다. 카카오톡 채널을 추가하세요! 추가하면 스킨이 업데이트되었을 때 알림을 빠르게 받을 수 있습니다. 카카오톡 채널 추가를 원한다면 여기를 누르세요.

스킨을 소개해주는 것은 ❤️입니다!

프라치노 공간 이용자가 많아질수록 운영자는 힘이 납니다! 그리고 많은 의견을 통하여 더 나은 스킨을 만들 수도 있습니다. 스킨이 마음에 든다면 망설이지 말고 다른 분들께 소개해 주세요. 아는 지인에게 소개해도 좋고 리뷰를 작성해도 좋습니다. 트위터 등의 소셜 네트워크 서비스도 물론 좋습니다!

프라치노 공책도 사용해 보세요!

프라치노 공간에 이어 운영자가 새롭게 제작한 티스토리 스킨입니다. 시중에 있던 스킨과는 완전히 다른 느낌으로 줄공책에 반듯반듯하게 필기한 느낌을 살렸습니다. 블로그를 일기장으로 쓰거나 무언가 메모하는 용도로 쓰는 분들에게 추천합니다. 프라치노 공책을 사용해 보려면 여기를 누르세요.

공간에 다크 모드가 돌아옵니다!

프라치노 — Fri, 22 Jun 2018 10:09:00 +0900

프라치노 공간 10은 이전 버전에서 지원했던 다크 모드, 어두운 분위기가 제거되어 몇몇 분들께 실망을 안겨드린 것 같습니다. 심지어 ‘향후 업데이트에는 어두운 분위기를 지원할 의향이 있냐’는 문의도 받았죠. 저는 이 기능을 추가할지 계속 고민해 오다가 마침내 ‘다음 업데이트에는 다양한 취향을 만족시키기 위해 어두운 분위기를 다시 포함시키자’는 결론을 냈습니다.

어두운 분위기

어두운 분위기는 멀티미디어 콘텐츠를 더욱 돋보이게 만들죠. 그래서 사진이나 동영상을 주로 다루는 블로그에는 이 분위기가 어울릴 것입니다. 뿐만 아니라 대부분의 티스토리 스킨은 밝은 분위기가 많고 어두운 분위기는 드물기 때문에 이 분위기를 적용하여 블로그를 운영한다면 본인 블로그의 개성을 한 층 더 살려내는 역할을 할 것입니다. 여러분이 어둠을 사랑하는 마음 또한 표현할 수 있죠! :)

이 분위기를 만들 때 저는 가독성을 많이 생각했습니다. 어두운 배경에서 텍스트가 너무 하야면 텍스트의 흰색 빛이 퍼져 보여 본문에 집중이 안되고 눈도 쉽게 피곤해지죠. 그래서 저는 이런 현상을 최소화하기 위해 수많은 대비 조정 작업을 걸쳤습니다.

참, 가독성 하니까 하는 얘기인데 추가될 분위기가 하나 더 있습니다!

따뜻한 분위기

Reader로 글을 많이 보시는 분이라면 아마 이 분위기를 좋아할 것이라 믿습니다. 따뜻한 분위기는 전체적으로 색온도 뿐만 아니라 배경과 텍스트의 대비도 낮기 때문에 본문을 오랫동안 접해도 눈이 덜 피곤할 것입니다.

분위기와 관련된 기능 추가

전체 화면 커버 이미지나 명조체를 특정 글에만 설정이 가능한 것처럼 특정 글에서만 다른 분위기를 사용할 수 있는 기능을 제공할 예정입니다. 적절한 분위기는 본문을 아름답게 보이게 할 뿐만 아니라 방문자의 몰입도를 향상하는 데에 큰 역할을 하죠.

업데이트 배포 예상 날짜

이번 업데이트는 6월 말이나 7월 초에 배포할 예정입니다. 물론 분위기 말고도 사소한 버그도 수정되고 몇몇 기능이 개선되니까 꼭 업데이트하기를 바랍니다. 작성된 시간을 기준으로 버전 10.2 미만을 쓰시는 분들은 반드시 그 이상으로 업데이트하세요. 10.1에 있었던 수많은 버그가 수정되고 지원되지 않았던 기능들도 지원합니다.

프라치노 공간 10.2 이후 추가된 기능에 관한 가이드는 이번 업데이트 후에 작성할 예정이니 조금만 더 기다려 주세요. 이 스킨을 선택해 주셔서 진심으로 감사의 말씀 드립니다.

프라치노 공책 업데이트는요?

여러분의 블로그를 하나의 공책처럼 만들어주는 티스토리 스킨, 프라치노 공책은 이번 공간 업데이트가 배포된 후에 제공할 예정입니다. 아마 7월 중순이나 말이 될 것 같습니다. 제가 만든 스킨은 완벽에 거의 닿을 때까지 업데이트를 제공할 예정이니 걱정하지 마세요! :)

프라치노 공책을 소개합니다

프라치노 — Tue, 27 Feb 2018 10:09:00 +0900

티스토리용 스킨의 대다수는 단순하고 기본적인 형태를 띱니다. 이것이 사용하기에는 무난하고 어떠한 블로그에도 잘 어울리겠지요. 그러나 문제는 이러한 특성이 방문자들에게 강한 인상을 짧은 시간 내에 남기기에는 역부족이라는 것입니다. 블로그의 콘텐츠를 들여다보지 않는 이상 겉모습은 특색이 없기 때문이죠.

그리고 운영자는 블로그는 원래 공책의 특성에서 시작하지 않았나 생각을 하게 되었습니다. 전세계가 볼 수 있는 블로그의 특성을 제외하면 글을 적어서 기록을 하는 공책과 다를 것이 없기 때문입니다.

그래서 운영자는 프라치노 공간과는 완전히 다른 스킨을 새로 만들었습니다.

프라치노 공책. 이름에서 느껴지듯이 공책의 느낌을 살렸습니다. 이 스킨을 사용하면 여러분의 콘텐츠가 마치 줄공책에 적은 듯한 느낌을 강하게 받을 것입니다. 그리고 보호 글이나 404 오류 페이지, 댓글 등 여러 부분에 특색을 살려 방문자에게 확실히 다른 느낌을 받을 수 있도록 했습니다.

프라치노 공책에 관심이 가거나 사용을 원한다면 여기를 눌러 더 알아보세요.

프라치노 공간은 어떻게 되나요?

티스토리 반응형 스킨, 프라치노 공간은 새로운 스킨과는 별개로 지속적인 업데이트로 보답할 예정입니다. 지원이 중단될 일은 없으니 안심하기 바랍니다. 이 스킨을 선택해 주셔서 진심으로 감사드립니다.

콘텐츠 가이드 시작

프라치노 — Wed, 31 Jan 2018 22:09:00 +0900

프라치노 공간을 자신의 블로그에 적용하고 콘텐츠를 열심히 만들었는데 결과가 생각보다 별로고 이상해 보였던 적이 있지 않았나요? 이런 분들을 위해 어떻게 하면 여러분의 콘텐츠가 이 스킨과 잘 어울리고 더 눈에 띄게 할 수 있는지 알려 드립니다.

이 가이드는 프라치노 공간이 아닌 다른 티스토리 스킨을 사용한다 하더라도 해당될 수 있는 내용이기 때문에 블로그 운영에 많은 도움이 될 것이라고 믿습니다.

콘텐츠 가이드의 대부분은 아래의 3가지를 중요하게 다룰 것입니다.

가독성

블로그의 콘텐츠는 자신이 직접 작성한 글입니다. 그렇죠? 그러나 아무리 내용이 좋다 하더라도 읽기가 힘들면 방문자는 지쳐서 다 읽기도 전에 떠나기 마련이죠. 방문자를 오래 머물게 하는 좋은 방법은 글이 술술 읽히게 하는 것입니다. 여러분은 어떤 방법으로 블로그의 가독성을 높일 수 있는지 배울 것입니다.

콘텐츠 꾸미기

만약 여러분 앞에 같은 품질의 커피를 동일한 가격으로 제공하는 두 카페가 있다고 가정해 봅시다. 여러분은 그 카페를 가기 위해 바깥에서 안을 훑어보고 있습니다. 한 카페는 읽을 수 있는 책들이 가지런히 정돈되어 있고 은은한 조명과 우아한 분위기로 꾸며져 있습니다. 또 다른 카페는 책이 널부러져 있고 눈이 아픈 조명과 어수선한 분위기로 꾸며져 있습니다.

여러분은 둘 중 어디를 가겠습니까? 아마 대부분 첫 번째로 말한 카페를 갈 것입니다. 블로그도 마찬가지입니다. 겉으로도 보기 좋아야 사람들이 많이 모여듭니다. 여러분은 블로그 이름부터 본문까지 콘텐츠를 가장 좋아보이게 하는 방법에 관하여 배울 것입니다.

HTML

정보의 바다 밑에는 언제나 HTML이 있습니다. 블로그도 HTML 기반이므로 여러분은 이것에 관하여 배울 필요가 있습니다. 어려울 것 같다고요? 걱정 마세요. HTML은 프로그래밍 언어와 달리 어렵지 않답니다. 그리고 이것을 블로그에 활용할 수 있을 정도로만 배울 것이기 때문에 다른 곳보다 재미있을 것입니다.

자, 정말 유익하겠죠? 그럼 본 가이드에서 뵙겠습니다!

CSS의 컬러값 알아보기

프라치노 — Fri, 26 Jan 2018 10:09:00 +0900

CSS(연속적 스타일 시트)는 웹 디자인의 필수 요소 중 하나입니다. 블로그를 포함하여 웹 사이트를 운영하고 있는 사람이라면 HTML과 더불어 CSS를 조금이라도 알아야 할 필요가 있습니다. 여기서는 CSS에서 다루는 컬러값에 관하여 알아보도록 하겠습니다.

본론으로 들어가기에 앞서 가산 혼합에 관하여 간략하게 알아야 할 필요가 있습니다.

가산 혼합이란 다른 컬러를 섞었을 때 더 밝은 컬러가 되는 것을 의미합니다. 예를 들어 빨강과 초록을 섞었을 때 두 개의 컬러보다 밝은 노랑이 됩니다. 이것은 주로 빛을 사용하여 컬러를 표현하는 장치, 그러니까 텔레비전이나 스마트폰 같은 디스플레이에 사용됩니다.

결론적으로 이것은 빛을 위한 혼합이기 때문에 빛의 삼원색인 빨강, 초록, 파랑을 기본으로 사용합니다. 앞서 말했듯이 다른 컬러가 섞일 수록 더 밝은 컬러가 되고 세 개의 컬러가 모두 섞이면 하양이 됩니다.

웹 또는 UI(사용자 인터페이스) 디자인 작업을 할 때에는 일반적으로 이 세 개의 컬러를 각 컬러 당 256단계의 밝기 중 하나, 다시 말해 0부터 255까지의 값 중 하나를 선택하여 사용합니다. 따라서 우리는 수천만 개의 컬러를 만들고 사용할 수 있습니다.

자, 이제 본론으로 돌아가 CSS의 컬러값에 관하여 알아보도록 합시다.

대표적인 CSS의 컬러값은 16진수(hexadecimal)와 rgba()입니다. 그 외 hsla() 컬러값도 있지만 헷갈림을 줄이기 위해 여기서는 설명하지 않을 것입니다.

16진수 컬러값

16진수는 CSS의 컬러값 중 가장 많이 사용됩니다. 각 컬러를 16진수로 입력하며 00부터 ff까지의 값을 쓸 수 있습니다. 수가 적을수록 밝기는 낮습니다. 값을 입력할 때 #, 빨강, 초록, 파랑 순으로 입력합니다. 이때 각 값은 띄어쓰기 없이 연속으로 입력합니다. 예를 들어 어두운 파랑을 표현하려면 #003c99로 입력합니다.

rgba() 컬러값

rgba()는 red, green, blue, alpha의 앞 글자를 따온 컬러 값입니다. 이름에서 알 수 있듯이 이것은 괄호 안에 빨강, 초록, 파랑, 알파 순으로 입력합니다. 16진수 컬러 값은 각 컬러를 16진수로 입력했다면 rgba()는 우리가 일상생활에서 사용하는 10진수로 입력합니다. 각 컬러 당 0부터 255까지의 값을 쓸 수 있습니다. 그리고 알파는 컬러의 불투명도를 의미합니다. 0부터 1까지의 값을 쓸 수 있고 작을수록 투명해집니다. 각 값은 쉼표로 구분합니다. 예를 들어 45% 투명한 주황을 표현하려면 rgba(255, 150, 0, 0.55)로 입력합니다.

참고로 알파를 꼭 입력할 필요는 없습니다. 이때에는 rgb() 컬러값을 사용합니다.

CSS의 컬러값에 관하여 배웠음에도 불구하고 해당 컬러가 정확히 어떤 컬러인지 알기에는 쉽지 않습니다. 그렇지 않나요? 한 가지 꿀팁을 알려 드리겠습니다.

Google에 ‘컬러 피커’를 검색해 보세요. 검색 결과 상단을 보면 원하는 컬러를 선택할 수 있는 컬러 피커와 왼쪽에 해당 컬러값이 있을 것입니다. 눈으로 직접 컬러를 선택하고 해당 컬러의 컬러값을 바로 확인할 수 있으니 참으로 편할 수밖에 없겠죠?

skin.html과 style.css 알아보기

프라치노 — Wed, 24 Jan 2018 22:09:00 +0900

티스토리 반응형 스킨, 프라치노 공간의 사용설명서를 읽어보면 skin.html 또는 style.css 파일을 편집하라는 내용을 아주 가끔 볼 수 있을 것입니다. 그러나 티스토리 스킨 편집이 익숙하지 않은 분들은 이 파일이 무엇이고, 대체 어디서 편집해야 하는지 감이 잡히지 않을 것입니다.

그런 분들을 위해 여기서는 이 두 개의 파일에 관하여 간단하게 알아보도록 하겠습니다.

skin.html

이것은 티스토리 스킨의 핵심 파일입니다. HTML 문서로 되어 있으며, 전체적인 페이지의 요소를 구성하는 역할을 합니다. 대부분 사람들은 이를 편집하여 AdSense 광고, 사용자 지정 코드를 추가하거나 스킨 기능을 변경합니다.

style.css

CSS(연속적 스타일 시트)로 되어 있는 이 파일은 스킨의 전반적인 스타일을 구성합니다. 특정 HTML 요소의 서체 모양과 크기 또는 본문 너비, 배경 컬러 등을 변경할 수 있습니다. 프라치노 공간은 다른 스킨과 달리 이 파일의 의존도가 낮으므로 참고 바랍니다.

파일 편집하기

다운로드한 스킨을 티스토리 블로그에 업로드하여 사용하기 전이라면 skin.html과 style.css 파일을 Brackets 앱 등의 편집 프로그램으로 열어서 편집합니다.

반대로 이미 스킨을 사용하고 있다면 블로그 관리 페이지에서 ‘스킨 편집’으로 이동하고 ‘html 편집’을 눌러 해당 파일을 편집합니다. ‘HTML’ 탭은 skin.html, ‘CSS’는 style.css 파일입니다.

프라치노 — Fri, 19 Jan 2018 22:09:00 +0900

본문 내 이미지는 방문자의 몰입도를 향상하는 역할을 합니다. 따라서 방문자를 본문에 더 집중하게 하려면 훌륭한 사진을 사용해야 하지요. 게다가 티스토리 반응형 스킨, 프라치노 공간은 해당 글에 관한 커버 이미지를 지원하기 때문에 이를 잘 활용하려면 훌륭한 사진이 필수입니다.

Unsplash

전 세계 사진 작가들이 무료로 배포한 훌륭한 사진이 모여 있습니다. 방문해 보려면 여기를 누르세요.

Pixabay

가장 대중적인 무료 스톡 이미지 사이트입니다. 현재 프라치노 공간 사이트의 훌륭한 사진 중 대부분이 이 곳에서 다운로드한 사진들이죠. 방문해 보려면 여기를 누르세요.

Pexels

다른 사이트보다 사진이 많진 않지만 비교적 훌륭한 사진들이 모여 있습니다. 방문해 보려면 여기를 누르세요.

웹 브라우저의 캐시 초기화하기

프라치노 — Fri, 19 Jan 2018 22:09:00 +0900

웹 브라우저는 이전에 방문한 사이트를 다음에 다시 방문할 때 더 빠르게 불러오기 위해 기기의 저장 공간에 사이트의 파일을 임시로 저장합니다. 이것은 전문 용어로 캐시(cache)라고 부릅니다. 티스토리를 포함한 거의 모든 사이트가 웹 브라우저에 의해 캐시 됩니다.

티스토리 스킨 파일을 편집하고 이를 업로드한 다음 블로그의 상태를 확인해보면 변화 없이 그대로인 경우를 경험한 사람이 적지 않을 것입니다. 이것은 웹 브라우저가 사이트의 파일이 대치된 것을 눈치채지 못하고 캐시 된 파일을 보여주기 때문에 발생하는 현상입니다. 이를 해결하려면 웹 브라우저의 캐시를 초기화, 다시 말해 이를 삭제하여 웹 브라우저가 사이트에서 해당 파일을 다시 불러오게 해야 합니다.

캐시 초기화 방법은 웹 브라우저에 따라 다르지만 어렵지 않습니다. 여기서는 데스크탑용 한국어 Chrome을 기준으로 설명하겠습니다. 사용하는 웹 브라우저가 다를 경우 해당 브라우저에 관한 도움말을 참조하세요.

Chrome 메뉴에서 ‘도구 더 보기’, ‘인터넷 사용 기록 삭제…’ 순으로 이동합니다.

‘인터넷 사용 기록 삭제’ 설정 페이지가 열리면 기간은 ‘전체 기간’으로 설정하고 ‘캐시 된 이미지 또는 파일’이 선택되어 있는지 확인합니다. 그리고 ‘인터넷 사용 기록 삭제’ 버튼을 눌러 웹 브라우저의 캐시를 초기화하고 모든 과정을 마무리합니다.

프라치노 공간을 소개해 주세요

프라치노 — Wed, 17 Jan 2018 22:09:00 +0900

티스토리 반응형 스킨, 프라치노 공간은 원래 운영자의 블로그에만 사용하는 스킨이었습니다. 그러나 다른 스킨보다 높은 정밀도와 디자인에 반하여 많은 분들이 배포 가능 문의를 했고, 그때부터 지금까지 배포를 하고 있습니다. 운영자는 최신 버전의 프라치노 공간이 적용되어 있는 블로그를 보면 흐뭇하고 더 나은 스킨이 되기 위해 노력해야겠다는 생각을 하게 됩니다.

운영자는 이 스킨을 사용하는 티스토리 블로거들이 좀 더 많아졌으면 하는 바람입니다. 다시 말해 이 스킨을 널리 홍보하면 좋겠습니다. 그러나 운영자 혼자서는 시간과 능력 부족으로 한계가 있다는 것을 알고 있습니다.

그래서 여러분께 도움을 요청하려고 합니다. 프라치노 공간이 많이 퍼질 수 있게 도와주세요. 본인의 블로그에 이 스킨을 소개하거나 트위터, Facebook 등의 소셜 네트워크 서비스에 간단하게 소개해도 괜찮습니다. 아는 지인에게 소개하는 것도 가능합니다!

2018년 새해가 밝았습니다

프라치노 — Fri, 12 Jan 2018 22:09:00 +0900

새해 복 많이 받으세요! 2018년은 잘 풀리고 행복한 일만 가득하기를 바랍니다.

티스토리 반응형 스킨, 프라치노 공간은 2017년 12월에 이전과는 완전히 다른 새로운 디자인이 적용된 스킨을 선보였습니다. 새로운 기능도 포함되었죠. 그중 본문의 커버 이미지는 블로그의 콘텐츠를 더욱 돋보이게 합니다. 또한 압도적인 완성도는 블로그를 더 전문적으로 보이게 하지요.

개선 버전 배포

2018년 1월 11일, 프라치노 공간은 안정성 향상을 위해 개선판을 배포했습니다. 이전 버전에서 발생했던 다수의 문제를 해결하고, 특히 Android에서 발생하는 성능 저하 문제를 개선합니다. 오래된 브라우저를 위한 호환성도 향상한답니다. 그리고 배포 노트에는 적혀있지 않는 기능도 포함되어 있습니다.

바로 404 오류 페이지입니다. 이번 업데이트는 티스토리의 시큰둥한 404 오류 페이지를 개선합니다. 방문자는 단순히 글이 없다는 문구만 보는 것이 아니라 다른 글을 보거나 검색을 하는 등 여러 행동을 할 수 있게 합니다. 이는 아무것도 아닌 것처럼 보이지만 방문자를 떠나지 않게 하는 강력한 방법 중 하나입니다.

마무리

프라치노 공간은 방문자와 블로거 모두에게 더 나은 블로그 환경을 제공하기 위해 힘쓰고 있습니다. 여러분의 사랑에 힘입어 이 스킨은 여기까지 오게 되었습니다. 진심으로 감사드리며 앞으로도 최고의 스킨을 제공하기 위해 노력하겠습니다.

코드 편집기 앱, Brackets

프라치노 — Thu, 21 Dec 2017 10:09:00 +0900

웹 초보자이신가요? 그런데도 웹 코드를 메모장으로 편집하시나요? 가뜩이나 어려운 것을 더 어렵게 편집하고 있군요. 초보자일수록 간편하고 친절한 도구를 사용해야 합니다.

Brackets 앱으로 코드를 편집하면 정말 쉽고 재미있다고 느낄 것입니다.

간결함, 그 이상

코드 편집기 앱은 간결하고 편집에 방해되는 요소를 줄여야 합니다. Brackets 앱은 여기서 더 나아갑니다. 코드를 시각적으로 하이라이트 하여 표시하므로 각 코드가 어떤 역할을 하는지 쉽게 알아볼 수 있습니다. 게다가 괄호로 묶인 코드는 접을 수 있기 때문에 복잡한 코드에서 혼란을 줄일 수 있습니다.

편리하고 세밀한 기능

두 개의 코드 파일을 한 번에 편집할 수 있는 분할 모드부터 컬러값 등을 손쉽게 편집할 수 있는 추가 기능까지! 눈에 잘 띄지는 않지만 코드 편집을 위한 편리하고 세밀한 기능이 내장되어 있습니다. 또한 확장 기능이나 테마를 제공하므로 Brackets 앱을 입맛에 맞게 사용자화할 수 있습니다.

다중 플랫폼 지원

Brackets 앱은 macOS와 Windows, Linux를 완벽하게 지원하여 어디에서나 사용이 가능합니다. 이것은 어떠한 환경에서든 코드 편집에 집중할 수 있다는 것을 의미하죠.

Brackets 앱 다운로드

위의 버튼을 눌러 Brackets 앱을 다운로드하세요. 여러분께 도움이 되기를 바랍니다.

프라치노 공간 변화 예고

프라치노 — Thu, 21 Sep 2017 10:09:00 +0900

티스토리 반응형 스킨, 프라치노 공간은 운영자의 개인 블로그에서만 사용하다가 몇몇 분들의 요청에 의해 2014년 8월부터 전체 배포를 시작했습니다. 그리고 2015년 8월에 큰 변화를 맞이한 이후 지금까지 계속 이 형태를 유지하고 있습니다. 현재 오랜 시간이 지났고, 비용을 지불해야 하는 스킨임에도 불구하고 이 스킨은 많은 사랑을 받고 있습니다. 프라치노 공간을 선택해 주셔서 진심으로 감사의 말씀드립니다.

소수 분들은 이미 아시겠지만 프라치노 공간은 대규모 업데이트를 준비하고 있습니다. 완전히 새로운 디자인과 함께 설정 방법이 더 간결해지고, 새로운 기능이 추가됩니다. 물론 프라치노 공간의 특징인 ‘콘텐츠가 돋보이는 디자인’은 변치 않습니다. 새로운 변화 중 큰 것 몇 가지를 간략하게 소개해 드리겠습니다.

서체의 변화

프라치노 공간의 기본 서체가 Montserrat, Source Han Sans로 변경됩니다. Montserrat은 세련된 느낌을 주는 영문 서체로 National Public Radio, Monstercat 등 유명한 기업에서도 사용합니다. Source Han Sans는 Noto Sans 또는 본고딕으로 알려진 유명한 한글 서체입니다. 이 두 서체를 혼합하여 사용하기 때문에 잘 어울리고 감각적인 느낌을 제공하며, 콘텐츠를 더 돋보이게 합니다.

글 목록의 변화

너비 설정과 상관없이 넓게 보이는 글 목록을 경험할 수 있습니다. 가장 중요한 요소인 헤드라인, 메뉴, 그리고 콘텐츠만 보이기 때문에 방문자는 블로그에 더 몰입할 수 있습니다. 또한 블로그의 첫 페이지는 기본적으로 전체 글 목록 페이지가 표시되기 때문에 별도의 리디렉션 스크립트를 삽입할 필요가 없습니다.

글 읽기의 변화

글을 읽을 때에는 글에만 집중하고 싶은 생각 많이 드시죠? 위 2개의 이미지를 보면 알 수 있듯이 본문 페이지에는 본문 외에는 다른 요소가 전혀 보이지 않습니다. 다시 말해 방문자는 다른 방해 없이 본문에 집중할 수 있습니다. 그리고 새롭게 추가된 본문 커버 이미지는 정성스럽게 작성한 글을 더 돋보이게 합니다.

이처럼 프라치노 공간은 변화를 위해 열심히 제작 중입니다. 새로운 스킨은 2017년 말에 완성, 배포될 것 같습니다. 그러나 미리 사용해보고 싶은 분들을 위해 운영자는 일부 사용자에게 미완성된 테스트 버전을 배포할 계획을 하고 있습니다. 향후 일정은 별도로 공지하도록 하겠습니다. 프라치노 공간은 앞으로도 계속 발전해 나갈 것이며, 더욱 나은 스킨을 제공할 것임을 약속합니다.

스킨 사용 조건

프라치노 — Thu, 7 Sep 2017 10:09:00 +0900

이 조건은 프라치노 공간(이하 ‘스킨’) 사용자 모두에게 적용됩니다. 스킨을 구입하는 순간 사용 조건의 모든 사항을 동의하는 것으로 간주합니다. 아래의 조건 중 하나라도 어길 경우 사용을 즉시 중단해야 합니다. 운영자 프라치노(이하 ‘운영자’)가 아래의 조건 위반 사항이 크다고 판단할 경우 고소할 수 있으며, 이때 사용자의 변명과 요구 또는 합의 요청 등을 모두 무시합니다.

구입하기

스킨은 한 개의 블로그에만 사용할 수 있습니다. 여러 개의 블로그에 사용을 원하는 경우 개수에 맞게 스킨을 구입해야 합니다. 스킨은 온라인 판매처인 Paddle.com을 통하여 판매·배포되고 거래 기록을 저장합니다. 스킨은 해외 결제가 가능한 신용카드 또는 체크카드로 구입할 수 있습니다.

배포 방식

스킨을 구입한 순간 거래 내역 메일과 함께 딜리버리 메일을 받을 것입니다. 딜리버리 메일은 다운로드 링크가 포함되어 있습니다. 향후 스킨 업데이트가 배포되었을 때에도 이 다운로드 링크를 사용하므로 해당 메일을 삭제하지 않는 것이 좋습니다. 만약 메일을 삭제했거나 받지 못했다면 카카오톡으로 구입했을 때 사용한 이메일을 포함하여 문의해 주세요.

스킨의 권한

어떠한 경우에도 스킨의 모든 권한은 운영자에게 있습니다. 따라서 스킨에 사용되는 코드나 아이콘, 레이아웃 등의 상징적 요소를 알아볼 수 없을 정도로 개조하거나 이를 다른 곳에서 무단으로 사용, 복제, 판매, 2차 콘텐츠 생성, 재배포하는 행위는 허용하지 않습니다.

저작자 표시

페이지 맨 아래의 ‘Designed by Fraccino’ 링크(이하 ‘링크’)는 어떠한 경우에도 변형시킬 수 없습니다. 그리고 링크 또는 그 주변에 스킨 제작에 도움을 준 사람, 스킨을 운영자와 함께 제작했다는 등의 내용으로 오해를 받을만한 문구 또는 콘텐츠로 허위 사실을 표시하는 것 또한 엄격히 금지됩니다. 링크는 스킨 옵션에 한하여 숨길 수 있으며, 코드를 편집하여 링크를 숨기는 등 임의의 방법으로 숨기는 것은 허용되지 않습니다.

일부 저작권

문제에 관한 책임

스킨을 사용하면서 발생한 예기치 못한 문제나 스킨 설명서를 따라하면서 발생한 문제, 스킨을 사용자화하면서 발생한 문제, 플러그인을 사용하면서 발생한 문제 등 어떠한 상황에서 발생 가능한 모든 문제는 운영자가 책임지지 않습니다.

문의 범위

운영자는 스킨에 제공하는 기능에 관한 문의에 한하여 답변해 드립니다. 그 외 사용자화에 관한 문의, 외부 플러그인을 위한 코드 변경 등에 관한 문의는 답변해 드리지 않습니다.

조건 변경

스킨 사용 조건은 예고 없이 변경될 수 있습니다. 조건 중 중요한 내용이 변경되거나 전체적인 변경사항이 많을 경우 빠른 시일 내에 카카오톡 채널로 알려드립니다.

좀 더 궁금한 내용이 있다면 카카오톡으로 문의해 주세요. 지원 범위 내에 친절히 답변해 드리도록 하겠습니다. 이용해 주셔서 감사합니다.

스킨이 제공하는 기능이 어떤 것이 있는지 관하여 간략하게 확인하려면 여기를 누르세요.