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

Web, 인터넷 2023년 8월 24일

고스트의 에디터

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

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

고스트 에디터 모드

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

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

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

기본 모드의 텍스트 형식

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

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

고스트 에디터 카드 종류

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

PRIMARY 카드

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

EMBED 카드

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

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

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

이미지 카드(Image Card)

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

마크다운 카드(Markdown Card)

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

HTML 카드(HTML Card)

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

갤러리 카드(Gallery Card)

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

구분선 카드(Divider Card)

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

북마크 카드(Bookmark Card)

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

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

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

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

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

공개 미리보기(Public Preview Card)

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

버튼 카드(Button Card)

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

디미니쉬드7 방문 버튼

콜아웃 카드(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파일도 되면 좋을텐데 안되는군요.