파일 이름 일괄 변경을 아주 편리하게 해주는 프로그램이 있습니다. 이 프로그램은 네이버 블로그에서 Darkwalker 닉네임을 사용하시는 분이 제작한 프로그램인데요. 설치도 없이, 실행 파일 하나로 많은 기능을 제공합니다. 다운로드는 Darkwalker 님 블로그에서 가능합니다. 무려 2008년에 만들어서 배포하셨는데요. 이후 업데이트는 없지만, 큰 문제없이 아주 잘 사용하고 있습니다. 이렇게 좋은 프로그램을 무료로 배포해 주신 Darkwalker 님께 감사의 말씀을 올립니다.
프로그램을 실행해 보면, 간단한 창 하나가 뜹니다. 여러가지 기능이 있는데, 제가 자주 사용하는 기능만 나열해 보겠습니다.
블로그를 하면서 자주 쓰는 기능들입니다. 기존에 캡쳐한 파일명은 ‘날짜 + 시간’으로 되어 있는데요. 포스팅하는 키워드의 파일명으로 변경할 때 주로 사용합니다.
하드 디스크 용량을 시각적으로 잘 보여주는 스페이스 스니퍼(Space Sniffer)는 아주 오래 전부터 제가 사용하던 프로그램입니다. 요즘은 대용량 하드 디스크나 SSD가 흔해져서 용량 관리에 대한 필요성이 많이 없을지도 모릅니다. 하지만 예전에는 1MB 라도 줄여보려고 용을 쓰던 시절이 있었습니다.
스페이스 스니퍼는 윈도우에서만 실행됩니다. 윈도우10까지 왔지만 호환이 잘되고, 용량을 파악하고 사각 영역으로 보여주는 속도가 엄청나게 빠릅니다. 가끔 스페이스 스니퍼를 실행하여 내가 모르는 용량이 낭비되고 있지 않은지 확인하해 볼 필요가 있는 것 같습니다.
스페이스 스니퍼 공식 홈페이지에 접속합니다. 몇 년이 지났지만 홈페이지는 거의 변한 게 없습니다. 윈도우 2000, 윈도우 XP, 윈도우 7, 윈도우 8, 윈도우 10까지 모두 사용 가능합니다. 메뉴에서 Download를 클릭하세요.
스페이스 스니퍼 다운로드 페이지입니다. Download from official mirror FossHub를 클릭합니다.
FossHub 사이트의 스페이스 스니퍼 다운로드 페이지입니다. 아래에 DOWNLOAD 부분을 클릭해주세요. 바로 다운로드 받으시려면 FossHub 사이트로 바로 갈 수 있습니다.
처음 실행하면 드라이브를 선택하는 화면이 나옵니다. 원하는 드라이브를 선택하고, Start 버튼 클릭합니다.
선택한 드라이브의 용량이 사각 영역으로 나옵니다. 사이즈가 큰 것이 용량을 크게 차지하고 있는 항목입니다.
예전에는 없었는데, 로그 콘솔(Log Console) 창도 함께 실행되네요.
까마득하게 잊고 있었던 잉여 파일을 발견했습니다. 버츄얼 머신(Virtual Machines)에서 사용하던 윈도우 이미지입니다. 버츄얼 머신은 이미 삭제했는데, 윈도우 이미지는 미처 삭제를 못했네요.
버츄얼 머신에서 사용했던 윈도우 이미지를 모두 삭제하여 용량을 확보한 모습입니다. 스페이스 스니퍼의 가장 큰 장점은 어떤 파일이 큰 용량을 차지하고 있는지 시각적으로 쉽게 확인할 수 있다는데 있습니다. 가끔 실행하여 불필요한 파일을 정리하면 좋을 것 같습니다.
이전에 Adobe XD에 대해서 포스팅한 적이 있습니다. XD도 디자인 툴에 가깝지만, 본업이 기획이라서 기획적인 관점에서 사용해봤었는데요. XD와 비슷하지만 협업과 공유에서 좀 더 자유로운 툴인 피그마(Figma)를 접하게 되었습니다. 피그마 역시 저는 기획적인 관점에서 보고 있으며, 여태 만나봤던 툴 중에 최고의 툴인 것 같습니다.
피그마는 XD와 비슷한 UI를 가지고 있습니다. 왼쪽에 생성한 레이어가 보이고, 오른쪽은 작업 영역입니다. 위 사진은 피그마를 처음 실행하면 만날 수 있는 ‘Figma Basics’ 화면입니다. 화면에 보이는 것이 하나의 프로젝트입니다. 프로젝트 내에서 여러 개의 페이지를 생성할 수 있습니다. 페이지 아래에 레이어가 존재합니다. 자유롭게 레이어를 생성하고, 화면 구성을 할 수 있습니다.
피그마의 최고 장점은 웹 브라우저에서도 거의 모든 기능을 사용할 수 있다는 것입니다. 간단하게 사용하신다면 웹 브라우저로만 사용하셔도 충분할 것 같습니다. 웹에서 문서를 만들고, 그 주소를 바로 공유하면 URL을 받은 사람도 별 다른 프로그램 설치 없이 바로 확인 가능합니다. 이게 XD에서는 못 느꼈던 피그마의 가장 큰 장점입니다.
피그마는 여러 디바이스의 프로그램을 제공합니다. 피그마 다운로드 페이지로 들어가면 윈도우용, 맥용 데스크탑 앱을 비롯하여, AOS와 IOS까지 모바일 앱도 다운로드 받을 수 있습니다. 피그마에서 사용가능한 폰트까지 다운로드 받을 수 있습니다.
XD와 마찬가지로 피그마에서도 각종 플러그인을 제공합니다. 설계나 디자인 할 때 유용한 플러그인을 찾아서 쉽게 설치 후 사용하시면 됩니다. 플러그인은 프로그램 설치 시에만 적용 가능합니다.
이 끝내주는 협업 디자인 도구는 2명의 에디터와 3개의 프로젝트까지는 무료입니다. 가격 정책은 홈페이지의 Pricing 페이지에 자세히 안내 되어 있습니다. 전문가는 에디터 당 월 12달러의 금액이 부과됩니다. 전문가 금액에 한해서 학생일 경우 무료로 사용 가능합니다. 단체 요금제는 에디터당 월 45달러의 금액이 부과됩니다. 조직 전체의 디자인 시스템, 개인 플러그인, 폰트 공유, SSO 보안까지 지원되는 부가 서비스가 많아 집니다.
곧 스타트업 프로젝트를 본격 시작할 참인데, 피그마를 적극 활용해 보려고 합니다. 5인 이하의 스타트업일 경우 프리 요금제로도 충분히 사용 가능할 것 같습니다.
워드프레스에서 폰트 어썸 (Font Awesome)을 적용하고, 인포그래픽 아이콘을 배치할 수 있습니다. Font Awesome는 아이콘으로 이루어진 폰트라고 생각하면 됩니다. 이 아이콘은 모든 브라우저에서 호환이 되며, 그림처럼 보이지만 속도가 빠르다는 장점이 있습니다. 그리고 벡터방식이라 크게 확대해도 깨지지 않습니다. 현재 제 블로그의 스크롤 업 아이콘이 Awesome 폰트를 적용한 것입니다.
사용중인 테마의 header.php 내 <head>와 </head> 사이에 아래 소스를 넣어주세요. Font Awesome 공식 사이트를 참고했습니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css" />
Font Awesome 사이트의 아이콘 메뉴에서 사용할 아이콘을 찾을 수 있습니다. 링크는 무료 카테고리로 되어 있습니다. 아이콘 중에 회색으로 보이는 아이콘은 유료 아이콘이니 주의하시기 바랍니다.
원하는 아이콘을 클릭해서 들어가면 코드가 보이는데, 클릭하면 바로 클립보드로 복사가 됩니다.
혹은 Font Awesome의 다른 페이지를 보시면 위 그림과 같이 전체 리스트 형태로 보이는 페이지가 있습니다.
원하는 곳에 소스를 붙여 넣거나, 아이콘 클래스명을 확인 후에 아래 소스에 아이콘 클래스명을 넣어 줍니다.
<i class="fa fa-아이콘 클래스명"></i>
제가 적용한 위로 올라가는 화살표는 아래와 같이 적용했습니다.
<i class="fa fa-angle-up fa-2x"></i>
아이콘의 크기는 속성을 아래와 같이 추가해주면 됩니다. 속성을 추가하지 않으면 원래 크기로 나옵니다.
회전하는 아이콘을 적용하려면, 클래스명 뒤에 아래 속성을 추가하면 됩니다.
페이지에 직접 적용하지 않고, CSS로도 처리 할 수 있습니다.
현재 블로그에 적용되어 있는 리스트 이전 버튼의 CSS를 보겠습니다.
.prev.page-numbers:before {
content: '\f053';
font-family: "Font Awesome 5 Free";
margin-left: 0;
margin-right: 5px;
}content: \f053은 아이콘 코드명입니다. 역슬래쉬 뒤에 코드명을 넣어 주시면 됩니다. 그리고 폰트 어썸 5버전에서 유의하실 점은 font-family에 “Font Awesome 5 Free“를 넣어 주셔야 합니다. 기존 4버전은 “Awesome”만 넣었던 것과는 차이가 있습니다.
워드프레스의 장점 중에 하나는 숏코드를 이용해서 긴 내용도 짧게 넣을 수 있다는 것입니다. 워드프레스는 이용하는 이유 중에 하나가 구글 애드센스일텐데요. 애드센스 코드를 플러그인 없이 숏코드로 만들어서 사용할 수 있습니다.
우선 애드센스 광고 코드에서 공통적으로 사용되는 스크립트를 본인이 사용하는 테마의 header.php에 추가합니다. 파일 수정은 워드프레스 관리자 내 ‘테마디자인 > 테마 편집기‘를 통해서 해도 되고, 따로 에디터 프로그램을 사용해도 됩니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>위 코드를 header.php 내 <head>와 </head> 사이에 넣어 줍니다.
본인이 사용하는 테마의 functions.php 파일 내 아래와 같은 코드를 추가합니다.
function display() {
return '<ins class="adsbygoogle"
style="display: block;"
data-ad-client="ca-pub-pub code"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
}
add_shortcode('adsense', 'display');여기서 function 뒤에 있는 display() 는 다른 함수와 겹치면 안됩니다. 마지막 줄에서 ‘adsense’가 숏코드, ‘display’는 위에서 선언한 함수와 동일한 단어가 들어가 있어야 합니다.
[adsense]이제 위의 숏코드를 넣어주면, 그 위치에 구글 애드센스 광고가 노출됩니다.