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

고스트 에디터의 카드

고스트 에디터를 다양한 기능을 가진 카드를 삽입할 수 있습니다. 카드는 고스트 자체 기능에 관한 Primary 카드와 외부 서비스에 관한 Embed 카드로 나뉩니다.

Primary 카드는 이전 포스트를 참고하세요.

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

고스트 블로그의 에디터는 기능이 많습니다. 별로 읽은 사람은 없겠지만 개인적인 이유로 고스트 에디터의 기능을 하나씩 정리해 봤습니다. 고스트의 에디터 카드는 Primary와 Embed 두 종류가 있습니다. Primary 카드에 대한 설명입니다.

🏖️ 그늘진 낙원BoniK

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

Embed 카드는 유튜브, 스포티파이, 사운드클라우드 등의 외부 서비스 코드를 고스트의 글 내에 삽입할 수 있는 카드입니다.

유튜브 카드(YouTube Card)

유튜브 카드를 선택하고 유튜브 URL을 적으면 글에 유튜브 영상을 넣을 수 있습니다. 예전에 유튜브에 올렸던 재즈화성학 강의 첫번째 영상입니다.

트위터 카드(Twitter Card)

트위터의 게시물링크를 넣으면 트위터의 내용이 보이는 카드입니다. 요새 머스크 놈이 트위터 이름을 X로 바꿔서 여기저기 수정할 게 많군요.

Unsplash 카드(Unsplash Card)

무료 저작권 프리 이미지 사이트인 Unsplash의 이미지를 검색하고 삽입할 수 있는 카드입니다. 키워드로 이미지 검색하고 클릭 한 번이면 이미지를 넣을 수 있습니다. 저작권 걱정 안해도 되고 고품질 이미지도 많습니다. 고스트의 기능 중에서 가장 많이 사용하고 마음에 드는 기능입니다.

Vimeo 카드(Vimeo Card)

Vimeo 영상을 넣을 수 있는 카드입니다. 서울에 관한 영상인데 잘 만들었네요.

Codepen 카드(Codepen 카드)

Codepen은 온라인 상에서 HTML, CSS, JS 코드를 실행하고 공유하는 사이트입니다. 고스트 에디터에서 코드펜 카드를 선택하고 코드펜의 URL을 넣으면 아래 처럼 해당 코드의 실행 모습과 해당 코드를 볼 수 있습니다. 프론트엔드 개발자들에게 유용한 기능이네요.

스포티파이 카드(Spotify Card)

스포티파이의 음악을 링크할 수 있는 카드입니다. 곡, 앨범, 플레이리스트 URL을 넣으면 해당 음악이 나옵니다. DEEZ음악 넣고 싶었는데 스포티파이에 음악이 없네요.

아주 예전에 GrooveShark라는 서비스로 음악 노가다 해서 블로그에 넣은 적 있는데 그루브샤크가 사라져서 글도 전부 지웠습니다. 스포티파이는 없어질 염려가 별로 없으니 앞으로 이 기능을 잘 이용해 봐야겠네요.

근데 제 아이피로 스포티파이 로그인을 해서 그런가 미리듣기가 아니고 전체가 재생이 되네요. 다른 분들은 아마 1분 미리듣기만 될 것 같기도 합니다.

사운드클라우드 카드(SoundCloud Card)

사운드클라우드 음악을 삽입할 수 있는 카드입니다. 블루아이드 소울계의 잘 나가는 형님 메이어 호손입니다.

Others... 카드(Others... Card)

embed 태그의 내용을 직접 입력할 수 있는 카드입니다. 다음 영화 , 네이버 지도, 다음 지도 등 여러가지 서비스를 살펴봤는데 붙여넣기 코드를 제공하지 않는 서비스가 많네요.

Others 카드는 노션처럼 URL에서 바로 embed 코드를 생성하는 기능이 강력하지는 않아서 활용도는 많이 떨어집니다. 대부분 그냥 iframe이나 js등이 포함된 HTML카드로 삽입하는 쪽이 더 일반적일 것 같습니다.

테스트 삼아 넣어볼까 했는데 유튜브, 사운드클라우드 같은 것 빼고는 딱히 넣을만한 것도 없네요.

마치며...

Embed 카드는 대부분 HTML로도 대체 가능하지만 카드를 이용하는 쪽이 디자인도 좋고 사용법도 간단합니다. 카드에서 지원하지 않는 지도나 서적 등은 HTML 카드를 이용해서 넣거나 상품 카드를 이용하는 쪽이 더 좋을 것 같습니다. /embed는 쓰잘데기가 없습니다.

이제 에디터 기능도 거의 익혔으니 콘텐츠를 작성해야겠네요.