이번엔 진짜 다르게 해보려고 한다….고
매해 초마다 생각했다.
운동, 독서, 글쓰기, 블로그, 유튜브는
새해마다, 월 초마다 잘하겠다고 다짐하지만,
실행하는 건 너무 적다.
하지만! 이번엔 다르다 기필코 잘 해낼 것이다!


옷 사고 싶어

어릴 적 수학여행 갈 때 꼭 새 옷을 입고 싶었다.
소개팅하러 갈 때도 옷 신경을 많이 쓰는 것처럼
블로그를 새로 하기 위해 테마부터 바꿨다.
사람도 첫인상이 중요하듯,
‘블로그도 첫 화면이 중요한 거 아닐까?’ 라고
합리화를 해봤다.
사실 그냥, 기존 테마보다
새로 고른 테마가 더 좋았던 것뿐이다.


OnFlow 테마를 선택한 이유

테마를 시간 날 때마다 구경했던 것 같다.
대부분 거창해 보이는 테마가 많았는데
그중에서 OnFlow가 가장 심플한 디자인이라
마음에 들었다.
https://onflow.priority.vision/

선택한 이유로는

  1. 게시글 영역이 좁아 글줄 길이가 짧아짐
  2. 레이아웃이 가장 심플함
  3. 목차 기능이 있음
  4. 간단한 글을 쓰기 적합함

이런 것들이 있었다.


구조 문제

이번에 고른 Onflow 테마는
일반적인 블로그 테마가 아니었다.
자유롭게 글을 쌓는 구조라기보다는
**“하나의 프로젝트로 콘텐츠를 묶는 구조”**였다.
처음에는 심플한 디자인이 마음에 들었다.
하지만 막상 글을 쓰고 보니 불편한 지점을 찾게 됐다.
블로그, 인테리어, 유튜브 등,
다양한 프로젝트를 개별로 구분할 수 없었다.
이대로 그냥 쓸 수 없었다.
일단 테스트로 글을 써보면서
수정할 것들을 찾기로 했다.


썸네일 문제

첫 번째로 마주한 문제는 단순했다.
썸네일 이미지가 본문에도 그대로 나오는 것.

수정 전 / 수정 후

전에 사용했던 테마는 썸네일에 사용한 이미지를
본문에 넣을지, 말지를 선택할 수 있었는데
아쉽게도 OnFlow는 이런 옵션이 없었다.

그래서 결국 CSS로 해결했다.
Settings > Code injection > Site header에 추가.

<style>
.post-media {
  display: none !important;
}
</style>

이 코드는 모든 게시글에 적용되는데
영역을 따로 지정해서 관리할 수도 있긴 하다.
이런 기능은 고스트에서 기본으로 제공되면
좋을 것 같다는 생각도 들었다.


타이포그래피 문제

테마는 영어를 기준으로
만들어지다 보니 한글을 그대로 썼을 때
타이포그래피가 조금은 답답하다.
그리고 줄 바꿈이 단어 기준으로 됐으면 좋겠는데
글자 기준으로 줄 바꿈이 된다.

  1. 단어를 강제로 쪼개지 않게 만들기
  2. 줄 간격을 한글에 맞게 조정하기

Settings > Code injection > Site header에
코드를 추가하면 간단히 끝.

<style>
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.post-content {
  line-height: 1.8;
}
</style>

줄 간격, 수정 전 / 수정 후

줄 바꿈 단어 기준, 수정 전 / 수정 후

이렇게 하면 줄 간격을 게시글 본문에만 적용하고
영역을 넘어갈 때 발생하는 줄 바꿈 규칙은
사이트 전체에 적용된다.
변경해 놓고 보니 답답했던 게 내려간 느낌이 들었다.
이런 사소한 수정만으로도 훨씬 읽기 편해진다.


목차 기능 활성화

긴 글은 목차가 없으면 읽기가 피곤하다.
OnFlow 테마를 선택한 이유 중에
목차 기능이 기본으로 있다는 점이다.

Settings > Code injection > Site footer에 추가.

<script>
window.pvs?.initTOC?.({
  headingsSelector: '.post-content > :where(h1, h2, h3)',
});
</script>

프로젝트 문제

프로젝트를 여러 개로 나누고 싶었다.
하지만, 이 문제는 쉽지 않았다.
OnFlow는 내부 태그로 프로젝트냐 아니냐로 구분하게 되어 있다.

collections:

  /writings/:
    permalink: /{slug}/
    filter: 'tag:-hash-project'           	
    template: writings
    data: page.writings

  /projects/:                             	
    permalink: /projects/{slug}/
    filter: 'tag:hash-project'
    template: projects
    data: page.projects

routes.yaml 중에서

이걸 이해하는 데만 하루가 날아갔다.
왜 이렇게 복잡한 걸까 싶었다.

writings 게시글 / projects 게시글

writings, projects의 차이는
writings는 홈이나 메뉴의 리스트에서 썸네일이 작게 나오고
projects는 썸네일이 크게 나온다는 것이다.
테마 파일은 수정하기 싫었는데 어쩔 수 없이
건드리기 시작했다.



컬렉션 구조의 함정

테마 제작회사에 문의했었는데 이런 답변을 받았다.

이메일 답변

Hi ian,

What you want to do is possible, but it will require customizing the theme structure.

For separate project sections like Interior, Blog, and YouTube, the recommended approach is to create separate collections in your routes.yaml file, then manually add matching sections in home.hbs using the existing Projects section as the pattern. You can also look at partials/section/projects.hbs and reuse that structure for your custom collections.

If you want standalone pages for those custom collections, you can create them the same way the default Projects page works. In the theme root, projects.hbs is used as the template for /projects/, as defined in routes.yaml, so you can follow that same setup for your additional collection pages.

That’s essentially the intended approach here. OnFlow uses Ghost’s standard collection output pattern for custom collections rather than anything proprietary or unusual.

For reference, Ghost’s collection guide is here if you’d like to compare the structure:
https://ghost.org/tutorials/content-collections/

routes.yaml, home.hbs, partials/section/projects.hbs
이메일 내용을 요약하면
이 세 가지 파일을 보면서 알아서 해보라는 것.

https://ghost.org/tutorials/content-collections/
그리고 메일로 알려준 URL을 보니까 컬렉션에 관한 내용이
정리가 잘 되어 있었다.
그 내용을 참고해서 여러 번 시도 끝에 알게 된 사실은
Ghost는 기본적으로
컬렉션이 겹치면 한쪽만 출력이 된다.

내가 하려는 구조는 이러했다.

Projects
├─ Interior
├─ Blog
├─ Youtube

Projects (프로젝트 전체 모음)
Interior (개별 프로젝트)
Blog (개별 프로젝트)
Youtube (개별 프로젝트)

Projects 하위 메뉴로 개별 프로젝트를 넣으려고 했다.
Projects 메뉴를 클릭하면 모든 프로젝트가 나오고
하위 메뉴에 있는 다른 프로젝트를 클릭하면
해당 프로젝트만 나오게 하고 싶었다.
즉, 모든 개별 프로젝트는 상위 프로젝트와 겹치게 된다.
이렇게 하는 이유는
내가 하는 모든 것들을 기록으로 남기고 싶다 보니 메뉴가 많은데
프로젝트 안에 개별 프로젝트를 넣지 않으면
메뉴가 복잡해지기 때문이다.


결국 내가 만든 방식

만들려고 하는 것은 두 가지를 충족해야 한다.

  1. 모든 프로젝트는 썸네일이 크게 출력될 것.
  2. Projects 메뉴에 출력되면서 동시에 하위 메뉴에도 출력될 것.

이틀 정도 AI와 씨름을 하며 헤맸다.
결론은 의외로 간단했다.
컬렉션을 늘리는 게 아니라,
페이지를 따로 만드는 방식이었다.

{{!< default}}

{{#> "layout"}}

{{#page}}
	{{> "section/hero" match_title_image=@page.show_title_and_feature_image}}
{{else}}
	{{> "section/hero" title="Interior" match_title_image=true}}
{{/page}}

<section class="section section-projects container">
	<div class="section-list section-list-has-badge project-posts-list">
		{{#get "posts" filter="tag:hash-project+tag:interior" limit="all" include="tags,authors"}}
			{{#foreach posts}}
				{{> "component/card-project"}}
			{{/foreach}}
		{{/get}}
	</div>
</section>

{{/"layout"}}

루트에 page-interior.hbs 파일 만들기

이렇게 만든 파일로 원하던 두 가지가 동시에 됐다.
파일을 추가 했기 때문에
테마를 업그레이드할 때 파일만 복사해서 넣으면 된다.
그런데 점점 개발자가 되어 가는 느낌이 든다.
오버하면 안 되는데 또 깊이 후벼파는 자신을 발견했다.


마치며

Ghost 같은 CMS 형태의 서비스는
웹에 대한 기본 지식이 없다면
쉽게 사용하기 어려울 것 같다.
아무리 AI의 도움을 받는다 해도
문제 발생이 많고 한 번에 해결되진 않는다.
그래도 네이버 블로그에 비해 어려운 것이지
하다 보면 금방 익숙해지고
배우는 것도 많아 블로그 생활이 더 즐거워지는 건
사실이다.
이제 앞으로 할 일은 내가 만든 구조 위에
콘텐츠를 쌓는 것.
기존에 여러 활동을 해왔는데
블로그에 모두 남기고 싶다.
이 글도 2,000자 정도로 작성하려고 했는데
벌써 5,000자가 넘었다.
또 너무 깊이 팠다……….