오피데브

구글 블로그 최고의 테마, OP 블로거 테마 설치 방법



본 포스트의 모든 내용은 구 버젼을 토대로 작성되었습니다. 새로운 버젼은 깃헙 저장소에 설치 방법이 적혀있으니 그걸 따라 설치하면 됩니다.



OP 블로거 테마는 구글 블로그 테마 개발을 위해 개발되었습니다. 이 프로젝트의 주 목적은 구글 블로그 테마 개발을 쉽게 하기 위한 깔끔한 베이스 테마를 개발하는 것 입니다. OP 블로거 테마의 주 기능은 반응형 웹 디자인, 유연한 마이너 테마 디자인 컨트롤, 오픈 그래프 메타 태그, iframe 미디어(유튜브) 리사이징, 더 나은 카테고리 기술 등등이 있습니다. OP 구글 블로그 테마는 추가적인 테마 개발 없이 바로 블로그에 사용할 수 있기때문에 개발자가 아닌 일반인도 약간의 설치 및 설정만으로 이용이 가능합니다.

깃헙 저장소: https://github.com/opdev1004/op-blogger-themes-ko

우선 블로거 필수 설정을 한 뒤에, 테마의 HTML 편집에 깃헙 저장소에 있는 테마를 복사해 붙여넣은 뒤 저장을 합니다. 제가 추천드리는 테마는 제가 현 블로그에 사용하고 있는  New Day와 The beginning 테마 입니다.

Ctrl +F를 이용해 "property='og:image'/>"를 찾습니다

<meta content='' property='og:image'/>

위와 같은 코드를 주석 해제하고 "content=''"의 작은 따옴표 사이에 블로그 로고 이미지의 주소를 넣어야합니다.

블로그 로고 이미지는 페이지에 올린 뒤에 주소를 HTML에디터에서 가져다 사용하면 됩니다. 자세한 건 구글 블로그 템플릿에 쓰일 이미지를 저장할 장소를 확인해주세요.

오픈 그래프 locale 메타 태그도 주석 해제하고 지역과 언어에 맞추어 작성합니다. 한국의 경우에는 밑의 코드와 같이 됩니다.

<meta content='ko_KR' property='og:locale'/>

OP 블로거 테마는 썸네일을 사용하는 버젼과 사용하지 않는 버젼이 있는데, 썸네일을 사용하는 경우에는 오픈 그래프 이미지 메타 태그와 같은 방식으로 페이지에 이미지를 올린 뒤에 이미지의 주소를 이용해서 넣어주면 됩니다.

Ctrl + F를 이용해 "<img alt='Post Image'"를 찾으면 "src=''"의 작은 따옴표 사이가 비어있거나 이미지 주소가 아닌 다른 걸로 채워져 있는 것을 발견할 수 있습니다. 그 작은 따옴표 사이를 사용할 블로그 로고 이미지로 변경하면 됩니다.

설치가 완료된 뒤에는 기본 설정을 이용해도 되고 테마의 맞춤설정에서 고급을 클릭한 뒤에 이것저것 자신의 입맛에 맞게 색, 폰트, 크기 등등을 변경할 수 있습니다. 카테고리 같은 경우에는 레이아웃에서 이용이 가능합니다.

필수!: 반응형이기 때문에 테마에서 모바일 버젼을 꺼주셔야합니다.


댓글

인기 게시물

일렉트론(Electron)의 아키텍쳐

일렉트론으로 데스크탑 앱을 개발하기 전에 일렉트론의 아키텍쳐에 대해 확실하게 알고 개발해야합니다. 만약 잘 모르는 상태에서 개발을 한다면 보안 문제와 여러 심각한 문제들이 발생할 수 있습니다. 지금부터 제가 일렉트론으로 개발을 해보면서 깨우친 일렉트론의 아키텍쳐에 대해 이야기하도록 하겠습니다.

일렉트론의 기본 아키텍쳐
일렉트론의 기본 아키텍쳐는 공식 웹사이트에서도 찾을 수 있듯이 메인 프로세스와 렌더러 프로세스로 나누어 집니다.
메인 프로세스렌더러 프로세스와 시스템의 통신을 담당하는 프로세스입니다. 시스템 기능과 관련된 자바스크립트 모듈을 여기에 두어야 합니다.
렌더러 프로세스실제로 사용자에게 보여지는 부분을 담당하는 프로세스입니다. GUI와 웹 앱이 이쪽에 포함되어야 합니다.

이는 매우 크게 보았을때 이야기이고 더 복잡한 시스템의 어플리케이션을 개발 할 수록 추가적인 프로세스가 존재한다고 생각하면 될 것 같습니다.

실제 개발에서 사용되는 일렉트론의 아키텍쳐위에서 이야기하는 일렉트론 기본 아키텍쳐는 이미 존재하는 웹앱을 데스크탑앱으로 그대로 옮길때나 사용합니다. 만약 시스템과 여러 작업을 해야하는 데스크탑 앱을 개발하게 된다면 위의 아키텍쳐가 아닌 아래의 아키텍쳐로 일렉트론을 이해하고 개발해야합니다.


*위 이미지의 window는 웹 브라우저의 window 객체입니다.
위의 이미지를 보면 알 수 있듯이 렌더러 프로세스 내부에 더 이해해야하는 것들이 존재합니다.
preload.jspreload.js는 보안을 위해 메인 프로세스의 일렉트론 모듈로부터 ipcRenderer모듈을 미리 가져오는 것을 담당합니다. 이는 보안을 위해 반드시 사용되는 방식이며, preload.js 없이 개발을 한 앱들은 렌더러 프로세스에서 컴퓨터 시스템에 접근이 가능해집니다. 예를 들어서 네트워크 통신이 가능한 일렉트론 앱이 존재한다고 했을때, 해커가 렌더러 프로세스로 스크립트를 보내 시스템 해킹을 할 수가 있습니다. 이런 문제를 막기위해 일렉트론은 기본적으로 nodeIntegration: false;로 …

일렉트론(Electron)이란, 일렉트론의 장점과 단점

일렉트론은 웹 어플리케이션을 데스크탑 어플리케이션으로 이용할 수 있게 만들어주는 자바스크립트 프레임워크입니다.

일렉트론 내부에는 구글 크롬 웹브라우저의 기반이 되는 크로미움이라는 웹 브라우저가 탑제되어있습니다. 그 크로미움을 이용해 웹어플리케이션을 띄우고 API를 이용하여 GUI 개발을 손쉽게 할 수 있습니다.

일렉트론으로 개발된 대표적인 데스크탑 어플리케이션은 디스코드슬랙이 있으며 여러 장소에서 일렉트론을 이용해 앱을 개발해보려는 시도를 하고 있습니다.

많은 분들이 일렉트론의 장점과 단점에 대해 궁금할 것이라 생각합니다. 제가 직접 사용해본 경험과 다른 일렉트론 개발자들의 이야기를 토대로 장점과 단점을 적어보도록 하겠습니다.

장점

1. 빠른 앱 개발, 유지 및 보수
2. 이미 디자인된 GUI 재사용 가능
3. 웹 앱 개발자 (코드) 재사용
4. 웹과 데스크탑의 사용자 경험 유지 및 향상
5. 수 많은 오픈소스 Node.js 패키지를 이용해 무의미하고 위험할 수 있는 개발을 회피
6. 여러 기업들에 의해 검증된 프레임워크
7. 자바스크립트로 개발이 가능
8. 크로스 플랫폼 개발이 가능
9. 웹 브라우저의 모든 장점들
등등

단점

1. 네이티브 앱에 비해 메모리를 더 요구
2. 자바스크립트로만 개발시 개발 할 수 있는 앱의 기능에 제한이 있음
3. 네이티브 앱과 웹 앱에 대한 지식을 가진 노련한 개발자가 개발해야 함
4. 웹 개발자가 네이티브적인 부분까지 개발하면 문제가 발생 할 수 있음
5. 일렉트론 프레임워크에 의한 버그 존재
6. 보안 문제
7. 용량이 큼 (무거움)
8. 네이티브 크로스 플랫폼 개발 환경의 존재
9. 웹 브라우저의 모든 단점들
등등

마지막으로 제가 일렉트론으로 개발한 데스크탑 앱의 이미지를 보여드리겠습니다.






초콜레티(Chocolatey)란? 초콜레티 설치 방법

초콜레티는 윈도우OS에서 프로그램이나 패키지를 쉽게 다운로드 받고 관리를 할 수 있는 패키지 매니저 입니다. 초콜레티의 이점은 손쉽게 여러 패키지들을 업데이트 가능하다는 점인데, 특히 오픈소스 프로그램들 같은 경우에는 업데이트 시스템이 없는 경우가 많기 때문에 매우 유용합니다.

자세한 내용은 영상을 보면 되고 이상으로 글을 마치도록 하겠습니다!

초콜레티 웹사이트 - https://chocolatey.org/

구글 블로그 시스템 구조에 대한 이해

글의 제목을 보고 "왜 구글 블로그 시스템을 이해해야되지?" 이렇게 생각하실 수 있습니다. 하지만 저는 구글 블로그로 블로깅을 한다면 반드시 이해해야할 필요가 있다고 봅니다. 그리고 그 후에 구글 블로그가 블로그 서비스로서 어떠한지 이야기를 할 수 있다고 생각합니다.



1. 구글 블로그의 철학은 한 블로그에 하나의 주제

많은 분들이 타 블로그 서비스를 이용하다가 구글 블로그를 하면 카테고리 시스템에 대해 많이들 놀랍니다. 구글 블로그는 라벨이라는 것을 이용해서 카테고리를 구성하는데 우리가 흔히 국산 블로그에서 사용하는 카테고리 시스템과는 거리가 멀기 때문입니다. 이 카테고리 시스템은 사실 태그와 비슷한데, 딱히 다른 대응책이 없기때문에 카테고리로 이용됩니다.

구글 블로그의 카테고리 시스템은 구글 블로그의 철학에서 나온 디자인입니다. 원래 블로그라는 것은 하나의 큰 테마를 바탕으로 그것에 대한 부주제들로 채우는게 정상입니다. 워낙 많은 이들이 블로그를 자신의 웹페이지로 이용하다보니 여러가지 테마를 한 블로그에 담는 것이 정상이라는 착각을 하게 되고 구글 블로그가 이상한게 되어버린거죠.

여러 테마를 담은 블로그를 만들겠다면 말리지는 않겠지만, 적어도 구글 블로그의 철학을 잘 알고 접근하시길 바랍니다.

구글 블로그는 블로그를 테마 별로 만들 수 있도록 최대 100개까지 블로그를 만들 수 있습니다.

+ 구글 블로그에서 쉽게 여러 카테고리 목록을 티스토리로 이용하는 방법이 있습니다. 구글 블로그에서 티스토리처럼 폴더형 카테고리 만들기를 확인해주세요.


2. 구글 블로그는 특정 페이지에서 특정 내용들을 특정한 방법으로 보여야한다

제가 구글 블로그를 시작하고 나서 잘 몰랐기 때문에 시간을 가장 많이 허비 한 부분입니다.

구글 블로그의 대쉬보드를 보면 글, 댓글, 페이지 관리 메뉴만 있기 때문에 보통 홈, 글, 페이지, 댓글 그리고 목록 페이지만 디자인하면 자신의 블로그를 꾸밀 수 있다고 착각하게 만듭니다. 하지만 구글 블로그는 위에 나열된 것들보다 더 많은 종류의 …

윈도우 시작시 실행되는 프로그램 설정하기

윈도우 시작시 실행되는 프로그램들을 설정하는 방법에 대하여 설명하도록 하겠습니다.

일단 차후에 OS가 크게 바뀌지 않을꺼라 예상되기도 하고 과거 버젼들도 비슷하기때문에 윈도우 10을 기준으로 하겠습니다.

2 가지 방법을 이용해서 설정하는 프로그램을 사용할 수 있습니다.

첫 번째는 하단의 검색에서 "서비스"를 검색한 뒤, 서비스를 여는 것입니다.

두 번째는 제어판 -> 시스템 및 보안 -> 관리 도구 -> 서비스, 이런식으로 찾아갑니다.







이제 서비스에서 설정하고 싶은 프로그램에 우클릭을 한 후, 속성을 누릅니다.





여기서 원하시는 대로 설정하면 되는데, 보통 시작 유형을 자동, 수동, 사용안함만 설정하면 됩니다.

참고로 어떤 프로그램들은 시작유형을 변경 못하도록 설정되어있으므로 포기하시는게 좋습니다.

구글 블로그 템플릿에 쓰일 이미지를 저장할 장소

서론

처음 구글 블로그 스킨 제작을 하려고 했을때, 가장 큰 문제 중 하나가 '스킨에 사용될 이미지를 어디에 저장해야하는가' 였습니다.




티스토리 같은 경우에는 위와 같이 스킨 전용 파일(이미지가 아닌 파일;) 시스템이 있어서 사용하기 편하게 되어있고 워드프레스도 테마가 담긴 폴더안에 이미지를 같이 담아서 사용하기 때문에 구글 블로그는 어떻게 이용해야할지 감이 오지 않았습니다.




어째서 구글 블로그는 파일 시스템을 지원하지 않을까?

아마 가장 큰 이유는 보안상의 이유와 파일 시스템의 악용이지 않을까 싶습니다.

게다가 애초에 블로그라는게 글을 작성하는게 주 목적인지라 파일 시스템이 없다고 생각합니다.



그러면 무엇을 사용해야할까?

제가 찾은 방법은 크게 2가지이고 작게는 무수히 많습니다.

크게 2가지로 보자면 외부의 파일 시스템을 이용하는 것이고 나머지 하나는 구글 블로그 내부의 이미지 시스템을 이용하는 것입니다.

외부의 파일 시스템의 경우에는 유료, 무료가 있고 구글 드라이브를 사용할 수도 있습니다.

내부 이미지 시스템은 당연히 블로거를 이용하는 것이기 때문에 무료입니다.



구글 드라이브 사용하기

(이거 2016 말에 막혀서 이제 사용 못합니다... )
예전에 사용한 적이 있는데 저는 개인적으로 추천하지 않습니다.

업로드 과정과 파일 링크를 얻는 과정이 귀찮을뿐만 아니라 이미지 로딩에 시간이 오래걸립니다.



다른 종류의 외부 파일 시스템

어디의 파일 시스템을 사용하느냐에 따라 다르고 제가 사용을 안해봐서 확실하게 어디가 좋다고 말할 수 없습니다.

내부 이미지 시스템보다는 아마 조금 느리지 않을까 싶습니다.




결론은 내부 이미지 시스템

※ 구글이 이미지를 자동 압축해서 고해상도는 '1600x높이'의 이미지로 변환된다는 점 유의해주세요.

외부의 파일 시스템을 사용하는 사람들도 있지만 제 생각에는 내부 이미지 시스템을 사용하는 사람들이 제일 많지 않을까 싶습니다.

일단 같은 장소에 있기때문에 이미지 작업하기가 수월하고 궁극(?)의 구글 이미지 시스템을 사용한다는 것에 메리트(?)가…

윈도우 갑작스런 용량부족 현상 원인과 해결 CBS log

최신 업데이트: 2018년 1월 5일



최근에 윈도우를 초기화했는데 불과 몇초만에 갑작스럽게 디스크의 공간이 전부 사라졌습니다.

남은 공간이 순식간에 숫자가 작아지면서 바뀌니 무섭기까지 했습니다.

보통 이런 경우는 시스템 내부에 문제가 있거나 바이러스로 인해서 디스크 공간이 사라지는 상황인데요.

저의 경우에는 CBS.log파일이 급속도로 커지면서 일어나는 현상이었습니다.

이 글을 업데이트하면서 예전 해결 방법과 제대로 된 해결 방법을 모두 다 담았습니다.



예전 해결 방법:

우선 서비스에서 Windows Modules Installer의 시작유형을 사용안함으로 고쳐주어야합니다.

어떻게 해야하는지 모르는 분들은 윈도우 시작시 실행되는 프로그램 설정하기를 확인해주시길 바랍니다.

Windows Modules Installer를 사용안함으로 해놔야 또 이런 현상이 안일어납니다.
※ 사실 다시 수동으로 고쳐도 상관없지만, 저한테는 두 번 일어났기 때문에 그냥 사용안함으로 하시는 것을 추천합니다.

그 후 컴퓨터를 다시 시작하고, C:\Windows\Logs\CBS 내부를 삭제해주시면 됩니다.

만약 안의 파일들이 어떤 프로그램에 의해 사용되고 있으므로 삭제가 안된다고 한다면,

Ctrl + Alt + Del로 작업 관리자를 불러온 뒤 Windows Modules Installer.exe와 윈도우 모듈 설치자.exe를 강제 종료 시켜준 뒤에 삭제하면 됩니다.

만약 이것과 전혀 다른 현상으로 인해 하드디스크가 가득 찬다면 윈도우 초기화 혹은 포맷을 해서 윈도우를 다시 설치하는 것을 추천합니다.

정말로 간편한 윈도우10의 초기화 기능과 주의할 점

현재 이 현상은 로그의 크기가 커지면 자동으로 정리해야하는데 자동으로 정리가 안되고, 또 갑자기 많은 로그가 기록되서 그런 것 같습니다.



제대로 된 해결 방법:

우선 위의 예전 해결 방법을 이용해 CBS 폴더의 내부를 비워서 용량 확보를 합니다.

윈도우 시스템의 에러로 인해 로그가 엄청나게 쌓이는 것이기 때문에, 윈도우 업데이트를 통해서 자동으로 문제점을 해결하게 만들면 …