THINK-PRO BLOG

티스토리 블로그를 운영하면 한 가지 장점이 있는데요.

바로 HTML / CSS를 제가 직접 콘트롤할 수 있다는 것입니다.

이 방법을 이용해서 개인 웹 사이트를 프로그래밍하는 수준의 커스터마이징이 어느 정도 가능합니다.

오늘 포스팅에서 다룰 내용은

나의 티스토리 블로그 전체의 포스팅 폰트를 일괄적으로 변경하는 방법을 알려드릴 것입니다.

만약에 특정 포스팅의 특정 영역에 대해서는 폰트가 달라야 한다고 하면 이 방법을 쓰기 어렵습니다.

저는 블로그 전체의 통일성을 유지하고,

대부분의 포스팅에서 폰트가 달라질 필요는 없었기에 이 방법을 쓰고 있습니다.

여러분이 어떤 스킨을 사용하고 있는지에 따라 다르지만,

제가 사용하고 있는 "Book Club" 스킨의 경우에는 Notosans 폰트를 기본적으로 사용하고 있습니다. 

일반적으로 폰트는 sans-serif 폰트와 serif 폰트로 나눠지는데요. 보통 모바일/PC 화면에서는 sans-serif 폰트가, 실제 인쇄된 종이 위에서는 serif 폰트가 좀 더 선호됩니다. (정말 쉽게 생각하면 돋움, 고딕 같은 폰트는 전자기기 모니터에서 잘 보이고, 궁서, 명조 같은 폰트는 인쇄된 종이에서 더 잘보인다고 보시면 됩니다.)

저는 나눔 명조 (Nanum Myeongjo) 폰트를 선호합니다. 나눔 명조는 serif 느낌의 폰트이지만, 생각보다 전자기기 모니터에서도 꽤 이쁘게 잘 보이고, 약간의 블러리함을 추가하면 얄쌍한 폰트가 좀 더 굵어지는 효과가 생기면서 가독성도 좋아집니다. 저는 오늘 나눔 명조 + 약간의 블러리한 느낌을 추가해줄 생각입니다. 그래서 아래가 바로 저의 목표입니다.

물론 둘 중에 뭐가 더 좋은지는 개인 취향이 갈릴 것이고요.

당연히 여러분이 원하는 다른 폰트로 변경하셔도 상관없습니다.

우선 여러분이 소유하고 있는 블로그에 가셔서 관리 페이지로 갑시다. (키보드에서 q를 눌러 이동도 가능합니다)

그리고 관리 페이지의 왼쪽 메뉴창에서 "스킨 편집"을 클릭해주세요.

그 후에 나오는 화면에서 우측에서 "HTML 편집"을 클릭해주세요.

그리고 나오는 화면에서 "CSS"를 클릭해주세요.

이제 이 코드 안에서 아래의 코드를 입력해주세요. 

아무데나 입력하셔도 됩니다만, 기존의 코드 줄 중간에 넣으시면 안됩니다.

가장 쉬운거는 위 사진처럼 /* Web Font Load */ 아랫줄에 넣어주시면 편합니다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo');

이 코드를 이용하면 나눔 명조 폰트를 블로그에 가져왔다는 뜻이 됩니다.

이제는 그 밑에 코드들에서 나눔 명조 폰트를 자유롭게 사용이 가능한데요.

body { } 안에 다음과 같이 코드를 씁니다. (기존 body { } 를 드래그해주시고 아래것으로 수정해주세요.)

body {
	-webkit-text-size-adjust: 100%;
	font-weight: 300;
	/* font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; */
	font-family: 'Nanum Myeongjo', serif;
	text-shadow: 0 0 1px rgba(0,0,0,0.5);
	font-size: 1em;
	line-height: 1.25;
	color: #555;
}

보시면 기존에 font-family: "AppleSDGothicNeo", "Noto Sans KR", sans-serif 가 있었는데요. 

이 값을 Nanum Myeongjo, serif로 변경해준 것입니다. /* */ 안에 있는 글자는 무시된다는 뜻이에요. (주석)

그리고 "text-shadow"가 제가 말한 블러리한 효과를 주는 코드입니다.

만약에 블러리 효과를 엄청 많이 주고 싶다면

	text-shadow: 0 0 5px rgba(0,0,0,0.5);

와 같이 0 0 다음의 1px의 값을 변경해주시면 됩니다. 블러리한 느낌의 색상을 바꾸고 싶을 때에는 뒤에 있는 rgba값을 바꾸실 수 있는데요. 4번째 값인 0.5가 alpha값 (진한 정도) 을 의미한다고 보시면 됩니다. 앞에 3가지 색상은 RGB (빨강, 초록, 블루) 값을 표현하므로 이 값을 변경하면 블러리함에 색상이 추가가 되겠죠?

여기 까지 하면 최근에 올린 티스토리 글들은 거의 반영이 될겁니다. 그런데 문제가 있습니다. 옛날 티스토리 에디터를 사용하셨던 블로그의 경우에는 글 폰트가 적용 안되었을 수 있습니다. 그 경우에는 아래의 코드를 한 번 더 입력해주시면 됩니다.

이 코드는 그냥 아무데나 입력하시기 보다는 Ctrl +F 를 하시고 "entry-content"를 검색해주시고, .entry-content h1 위에 추가 입력해주시기 바랍니다.

/* Entry Content */
.entry-content span {
	font-weight: 300;
	font-family: 'Nanum Myeongjo', serif !important;
	text-shadow: 0 0 1px rgba(0,0,0,0.5);
}

이렇게 하고 나면 제가 처음 말씀드린 것처럼 티스토리 블로그 전체 폰트 느낌이 많이 바뀌었을 것입니다 :)

만약에 나눔 명조가 별로다? 다른 걸 쓰고 싶으시다 하면 아래와 같이 하시면 됩니다.

구글 폰트에 접속해주세요: https://fonts.google.com/

그리고 여기서 "Search"를 통해 여러분이 원하는 폰트를 찾아주세요. 저는 나눔고딕 폰트를 찾아보겠습니다.

영어로 검색해주셔야 합니다. 나눔 고딕 -> Nanum Gothic 과 같이요.

그리고 "Nanum Gothic" 을 클릭합니다. 여기서 "Select this style"을 여러분이 원하는 폰트 크기에 대해서 전부 선택해줍니다. 

사실 아무거나 하나만 선택하셔도 됩니다. 그리고 나면 오른쪽에 창이 뜰텐데요.

여기서 "Embed"를 클릭하시고 @import를 클릭해주세요.

그리고 나오는 아래의 회색창 코드에서 Nanum+Gothic까지만 긁어서 복사해주세요. (뒤에 '); 는 넣어주셔야 합니다.)

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic');

이제 앞서 했던 코드에서 Nanum+Myeongjo 대신 이 코드를 다 넣으시면 됩니다.

@import는 사실 굳이 지울 필요는 없어서 그냥 그 비슷한 위치에 추가해주시면 되구요.

밑에서 썼던 font-family에다가 'Nanum Myeongjo' 대신 'Nanum Gothic'을 쓰시면 되는 거죠.

어렵지 않았죠? 쉽게 잘 따라오셨을거라 생각합니다.

제가 썼던 내용에서 어렵거나 이해가 안가시는게 있다면 언제든지 댓글 달아주세요.

읽어주셔서 감사합니다 :)

좋은 하루되시고 도움이 되었다면 ❤ 를 눌러주세요 😍

~/.bash_profile을 다음과 같이.

export PS1="\[\033[36m\]\u\[\033[m\]@\[\033[32m\]\h:\[\033[33m\]\w\[\033[m\]\$ "

export CLICOLOR=1

export LSCOLORS=ExFxBxDxCxegedabagacad

alias ls='ls -GFh'

export TERM=xterm-color

Safari를 열고 싶으면 하단의 독바에 있는 사파리를 클릭하면 되고,

메모장을 열고 싶으면 메모장을 클릭하면 된다. 

하지만 터미널에서 작업을 하고 있는 개발자라면 마우스를 따로 사용하기가 귀찮을수 있는데,

리눅스 우분투와는 달리 맥 터미널에서는 응용 프로그램을 실행하려면 다음과 같이 복잡한 과정을 거쳐야 한다.

리눅스 우분투에서는 safari라고 하는 응용 프로그램이 있으면 단순히 쉘 커맨드에 'safari'라고 입력해주면 된다.

리눅스 우분투에서 손쉽게 하던 응용프로그램 실행을 맥에서도 하고 싶다면? 어떻게 해야 할까?

리눅스 우분투에서는 어떻게 저렇게 간단하게 프로그램 실행이 가능했는지부터 생각해보아야 할 것이다.

기본적으로 우분투에서의 터미널은 bash 쉘을 사용하는데, bash쉘이 기본적으로 사용하는 명령어들이

/usr/bin/ 폴더에 존재하게 된다. 즉, /usr/bin 폴더 아래에 있는 모든 실행 파일들 (혹은 쉘 스크립트)은

어느 경로에서든지 바로 사용이 가능한 것이다.

이 원리를 알았으니 어떻게 하면 될까? 

맥에서는 응용 프로그램이 ~~~.app 과 같은 확장자를 가지고 있고, /Applications/ 폴더 아래에 있는데, 이들을 함부로 

위에 있는 경로로 옮기면 될까? 이후 앱 실행에 있어서 문제가 발생할 여지도 있고, 

spotlight 서비스에서 응용 프로그램을 찾는 등의 과정을 굳이 방해하고 싶지 않을 것이다.

그렇다면 해결책은 무엇인가?

shell script를 만들어 위에 있는 명령어를 손쉽게 해결해주도록 만들 것이다.

shell script를 다음과 같이 작성해보자. 파일 이름은 'safari'라고 작성하자.

만든 쉘 스크립트 파일을 '실행'하려면 실행권한을 주어야 한다. 

아래와 같은 명령어를 통해 실행권한을 주도록 한다.

그 후에 만들어진 쉘 스크립트 파일을 /usr/bin폴더로 옮기도록 하자.

이로써 작업은 끝났다! 앞으로 여러분은 어디서든지 'safari'라고 명령어를 치기만 하면 바로 safari앱을 실행할 수 있다.

  이베이, 아마존과 같은 해외 사이트에서 물건을 구입하려고 할 때, 우리나라 돈이 아니라 엔화/미화 등으로 표기가 되어 있어서 정확하게 한국 가격이 어느 정도 되는지 궁금했던 경우가 많을 겁니다. 물론, 아래와 같이 네이버/구글에 들어가서 그 가격을 검색창에 치기만 해도 되고, 아니면 간단하게 암산을 통해서(미화 환율은 1달러/1000원, 엔화 환율은 1엔/10원 정도) 간략한 추정도 할 수 있을 것입니다. 

하지만, 강력한 기능의 오토메이터를 이용해 정확한 환율 계산 결과를 바로 확인할 수 있다면 어떨까요? 

이번 포스팅에서는 '엔화/미화 환율 계산하기'에 대한 서비스를 만드는 오토메이터 도큐멘트를 만들어볼까 합니다.

| 엔화(미화) 환율 계산하기 서비스

  오토메이터로 간단한 '네이버 영어사전 찾기' 서비스를 만들어본 분들이라면 이번 내용도 그리 어렵지 않을 것입니다. (솔직하게 말해서, 한 80퍼센트는 내용이 동일합니다.) 이번 오토메이터 도큐멘트의 개요는 다음과 같습니다. 

AppleScript -> 웹 사이트 팝업

1) AppleScript 처리: 입력받은 텍스트(브라우저에서 드래그한 숫자)를 네이버 검색 주소에 집어넣고 주소값을 반환한다.

2) 웹 사이트 팝업 모듈이 AppleScript단계에서 반환된 주소값으로 주소를 이동, 그 결과를 보여준다.

1. 도큐멘트 유형을 '서비스'로 선택한다.

2. 서비스가 받는 선택 항목은 '텍스트'로, 선택 항목 위치는 'Safari.app'으로 한다. (다른 브라우저에서도 적용시키려면 선택 항목 위치를 변경하면 된다.)

3. 작업공간에 'AppleScript 실행' 과 '웹 사이트 팝업' 모듈을 놓는다.

4. AppleScript 실행 모듈에 다음과 같은 AppleScript를 입력합니다.

5. '웹 사이트 팝업 모듈'에서 사이트 크기는 '사용자화'(여러분 원하는 크기대로), '사용자 에이전트'는 'iPhone', 출력은 '입력 URL'로 한다.

※ 웹 사이트 팝업 모듈에서 항목들을 여러분이 원하시는대로 바꾸셔도 됩니다. 하지만, 사용자 에이전트는 iPhone으로 할 것을 추천드립니다. 사이트 크기가 제한적일 경우, 사용자 에이전트를 Safari로 하게 되면, 한눈에 결과 값이 안 보일 수 있습니다. (스크롤 해야 합니다.)

▼ AppleScript로 workflow를 다 작성한 후, 

사파리에서 오른쪽 클릭 > 서비스 탭에서 다음과 같이 '엔화 환율 계산하기' 탭을 확인할 수 있습니다.

▼ 이렇게 한눈에 팝업창으로 환율 계산 결과를 확인할 수 있어요 :)

※ 미화 환율 계산하기는 안 가르쳐주냐구요? 여러분이 눈썰미가 조금만 있다면, 

어떻게 해야 할지 답은 여러분 머릿속에 바로 있을 것입니다. 

정말 모르시겠습니까?... 흠... 위 AppleScript에서 '엔'을 'USD'로 바꾸시기만 하면 됩니다.