Photo by Ilya Pavlov / Unsplash

고스트(Ghost) 블로그의 글쓰기 에디터 기능 정리 - Primary 카드

Web, 인터넷 2023년 8월 24일

고스트의 에디터

티스토리에서 고스트로 갈아탄 후에 글을 여러개 올리면서 고스트 에디터를 조금씩 익혔는데 지원하는 기능이 많고 생소한 것도 있어서 아무래도 글로 한 번 정리하는게 좋을 것 같다는 생각이 들었습니다. 고스트 쓰는 분도 거의 없고 그 중에서 상당수의 유저는 저보다 컴퓨터를 잘하기 때문에 별 쓰잘데기 없는 글이지만 딱히 쓸 것도 없고 해서요.

고스트의 새 에디터(베타) 활성화

제가 현재 사용중인 에디터는 새 에티터(베타)입니다.

고스트 에디터 모드

고스트 에디터에서 내용을 작성하게 기본모드 상태에서 작성하는 방법과 카드 삽입 방법이 있습니다.

기본 모드 상태에서는 마크다운 기능의 일부와 카드 기능의 일부가 자동으로 적용됩니다. 마크다운으로 입력하는 표나 하이라이트 기능(==하이라이트==)은 기본 모드 상태에서는 적용이 안됩니다.

기본 모드에서 그림파일을 드래그하거나 그림을 붙여넣기 하면 자동으로 이미지 카드가 적용되고, 웹주소를 입력하면 자동으로 Bookmark카드가 적용됩니다.

기본 모드의 텍스트 형식

기본 모드에서 지원하는 텍스트 포맷

위와 같이 굵게(Bold), 이텔릭, 헤딩1(H1), 헤딩2(H2), 인용, 링크, 스니펫을 지원합니다.

고스트 에디터 카드 종류

에디터 기본 모드 상태에서 좌측의 +를 누르면 입력가능한 카드 목록이 나옵니다. 카드의 종류는 크게 PRIMARYEMBED로 나뉩니다.

PRIMARY 카드

Primary 카드의 기능은 다음과 같습니다. 이미지, 마크다운, HTML, 이메일, 고스트 구독 관련 기능, 미디어 삽입, 디자인 관련 기능 등을 다룹니다.

고스트 에디터의 카드 삽입 기능 - Primary

EMBED 카드

Embed 카드의 기능은 다음과 같습니다. 외부 서비스 코드를 불러와서 포스트에 삽입할 수 있습니다.

고스트 에디터의 카드 삽입 기능 - Embed

고스트 에디터 카드 기능 목록 - Primary

고스트 에디터의 카드 중 PRIMARY에 있는 카드들을 설명합니다.

이미지 카드(Image Card)

이미지 파일이나 이미지 데이터를 붙여넣기해서 삽입할 수 있습니다.

고스트의 이미지 카드 활용

마크다운 카드(Markdown Card)

기본 에디터 상태에서도 대부분의 마크다운이 입력되지만 고스트가 지원하는 모든 마크다운 코드 입력을 위해서는 마크다운 카드를 삽입해야 합니다.

고스트의 마크다운 카드 활용

HTML 카드(HTML Card)

HTML카드를 이용해서 HTML 코드를 삽입할 수 있습니다.

고스트의 HTML 카드 활용

갤러리 카드(Gallery Card)

최대 9개의 이미지를 갤러리 형식으로 삽입할 수 있습니다.

구분선 카드(Divider Card)

Divider구분선을 넣는 카드입니다. 그냥 ---로 넣으면 되기 때문에 딱히 쓸 일은 없을 것 같습니다.

북마크 카드(Bookmark Card)

북마크 카드는 링크를 첨부하는 용도로 사용됩니다. 북마크 카드에 URL을 넣으면 Title과 Description을 읽어서 표시해줍니다.

디미니쉬드7 - 음악 공동작업 커뮤니티
디미니쉬드7은 음악인들을 위한 커뮤니티 사이트입니다. 작곡가, 작사가, 보컬, 래퍼, 연주자, 엔지니어, DJ 등으로 활동할 수 있습니다.

고스트 북마크 카드 활용

이메일 콘텐츠 카드(Email Content Card)

구독자 메일 보내는 기능을 안쓰고 있어서 확실하지는 않지만 고스트의 콘텐츠로 이메일을 보낼 때 표시되는 내용인 것 같습니다. 구독자마다 이름이 다른데 변수로 처리할 수 있나봅니다.

이메일 콜 투 액션 카드(Email Call to Action Card)

마찬가지로 무료 또는 유료 구독자에 메일을 보낼 때 보이는 내용인 것 같습니다. 이메일에서 특정 클릭을 유도하는 문구를 넣을 수 있습니다.

공개 미리보기(Public Preview Card)

유료 구독자용 콘텐츠의 미리보기를 넣을 수 있습니다. 일반 사이트 방문자와 무료 회원에게 보입니다.

버튼 카드(Button Card)

글에 버튼을 넣고 버튼에 URL을 부여할 수 있습니다. 구독 버튼, 후원 버튼, 카카오톡 오픈 채팅 버튼 같은 걸 만들 수도 있겠네요.

콜아웃 카드(Callout Card)

안써봤는데 좋은 기능이네요. Call out을 우리말로 번역하자면 '부르기', '외침', '호출' 등이 될 수 있지만 뉴스 등의 미디어 나올 때는 부연설명 등의 목적으로 나옵니다. '추가 내용'이나 '한 마디'정도의 용도로 이해하면 될 것 같습니다.

💡
Callout 1
💡
Callout 2
💡
Callout 3

콜라웃의 배경 색상은 CSS를 작성해서 변경할 수 있습니다.

레퍼런스 : https://github.com/TryGhost/Ghost/blob/c667620d8f2e32c96fe376ad0f3dabc79488532a/ghost/core/core/frontend/src/cards/css/callout.css

토글 카드(Toggle Card)

토클 카드를 이용해서 콘텐츠를 접기, 펼치기 할 수 있습니다. HTML의 <detail><summary>를 이용하는 것과 같습니다.

어떤 새끼가 재수없게 울고 지랄이야?

나다. 이 X새끼야!

-영화 <해바라기> 오태식-

비디오 카드(Video Card)

비디오 파일을 업로드하고 재생할 수 있는 카드입니다. 지원되는 확장자는 .mp4, .m4a, .m4b, .webm, .ogv, .ogg입니다. 동영상 너비, Loop 여부, 커스텀 섬네일을 지정할 수 있습니다.

0:00
/0:19

드럼 VST XO 사용법

오디오 카드(Audio Card)

오디오 파일을 업로드하고 재생할 수 있는 카드입니다. 지원되는 확장자는 .mp3, .mpega, .mp2, .ogg, .oga, .wav, .m4a, .m4b입니다. 파일명에 한글이 있으면 제목 인식을 못해서 다시 적어줘야 하는군요. MIDI파일도 되면 좋을텐데 안되는군요.

audio-thumbnail
일반인노래방-UV-조개구이
0:00
/129.247199

파일 카드(File Card)

다운로드 가능한 첨부파일을 넣을 수 있는 카드입니다. 기능 자체는 깔끔하고 좋은데 고스트에서 파일을 첨부하면 <title></title>태그가 생겨서 2중 타이틀로 SEO경고가 뜨는 건 좀 불만입니다.

상품 카드(Product Card)

제품, 상품을 보기 좋게 소개할 수 있는 카드입니다. 별점과 버튼을 첨부할 수 있습니다. 굉장히 좋은 기능이라 앞으로 자주 사용할 것 같습니다. 다만 한글 입력시 자소 분리가 되어서 붙여넣기로 넣어야 하는 점은 불편하네요.

악보집 : BoniK - Nights Better Than Days

교보문고 ₩3,400

헤더 카드(Header Card)

헤더를 넣을 수 있는 카드입니다. 화려한 디자인 좋아하시는 분들께는 좋은 기능인 것 같습니다. 일반 포스트보다 렌딩페이지에서 활용도가 더 큰 기능 같습니다.

고스트 헤더 카드 설정

4종류의 레이아웃을 지원하고 텍스트 정렬을 좌측, 중앙으로 선택할 수 있습니다. 배경은 색상이나 이미지로 넣을 수 있습니다. URL과 연결가능한 버튼을 넣을 수 있습니다. 배경을 색상코드로 넣을 때 텍스트의 색상은 흰색과 검정색 중 하나로 자동 설정됩니다.

헤더 레이아웃2에서 제목 텍스트가 안보이는 오류가 있는 것 같은데 테마 문제인지 에디터 문제인지 모르겠네요.(4개가 다른 레이아웃이어야 하는데 똑같이 보이는 걸 보니 테마 문제인 것 같습니다.)

헤더 레이아웃 1

헤더 카드 Layout 1 입니다.

헤더 레이아웃 2

헤더 카드 Layout 2입니다.

헤더 레이아웃 3

헤더 카드 Layout 3입니다.

헤더 레이아웃 4

헤더 카드 Layout 4입니다.

사인업 카드(Signup Card)

구독을 안내하는 카드입니다. 구독자에게는 보이지 않습니다. 지금은 이메일 구독기능은 사용하지 않고 있는데 나중에 쓰더라도 테마에 어차피 구독 안내가 나오기 때문에 굳이 이 카드가 필요하진 않을 것 같습니다.

사인업 카드의 레이아웃 설정은 헤더 카드와 유사합니다.

고스트 사인업 카드 설정

마치며...

고스트 에디터의 기능 중 PRIMARY 부분에 있는 카드들을 알아봤습니다. 이전에는 쓰지 않던 콜아웃 카드, 토글카드, 상품 카드는 글 작성시에 유용하게 사용할 수 있을 것 같습니다.

다음은 Embed 카드에 대해 정리하겠습니다.

태그

BoniK

협업, 의뢰, 레슨 등 문의 : mail@bonik.me, open.kakao.com/me/bonik