워드프레스의 새로운 편집기로 개발되고 있는 구텐베르크에 대해서 알아봅니다. 이 편집기로 무엇을 할 수 있을까요?

구텐베르크 편집기를 설치하면 처음 만나는 문서가 있죠. “Welcome to the Gutenberg Editor” 여기서 소개하는 내용은 구텐베르크 편집기로 무엇을 할 수 있는지를 잘 보여줍니다.

구텐베르크는 편집기 내에서 상당히 몇가지 자유롭게 표현하려고 시도 하고 있습니다. 특히 이미지 표현에서 상당히 신경을 쓴 느낌입니다. 이미 글보다는  이미지와 영상에 익숙한 시대가 되었기 때문에 이를 어떻게 잘 표현할 수 있을까 아주 중요한 요소이긴 합니다.

커버이미지(Cover image)

맨 처음 설명하고 있는 것이 커버이미지입니다. 커버이미지는 이미지 위에 텍스트를 넣어서 이미지의 강력한 전달력에 텍스트의 명료한 메세지를 더하는 표현 방법이라고 할 수 있습니다.

구텐베르크 편집기에서는 아무 Featured Image 대신 사용하려는 것이 아닐까 싶기도 합니다. 글 도입부에 사용한다면 이미지 + 타이틀로 표현되는 일부 테마의 모습과 닮아 있습니다.

물론 이런 Featured 이미지외도 이미지와 텍스트를 사용해서 명료한 메세지를 전달하고자 하는 경우 유용할 듯 합니다.

이미지 표현 방법

커버 이미지외 일반 이미지를 어떻게 활용할 수 있는지 보시죠.

위에서 설명하지만 이미지는 위치를 지정함에 따라서 좌측,우측 그리고 전체를 이미지로 채울 수 있습니다.

구텐베르트 편집기에서는 이미지 배치가 쉽고 단순해 졌다고나할까요? 메뉴에서 간단히 위치만 지정해 주면 자동으로 배치가 됩니다.

옆의 이미지를 조측 정렬시키고 이미지 원래 폭이 600mm였으므로  왼쪽 정렬의 효과를 보기 위해서는 폭을  50% 로 줄였습니다. 

폭은 25%, 50%, 75%, 100%로 조정할 수 있는데요. 조금 더 자세하게 조절할 수 있었으면 좋겠다는 생각입니다.

아래는 일반적으로 적용하는 이미지 폭 1024mm를 가로 전체에 표현해 봤습니다. 이미지 아래에 캡션 지정도 직관적으로 넣을 수 있습니다.  예전처럼 갤러리에서 캠션을 입력하고 삽입 시 자동으로 캡션 문구가 들어 옵니다.

갤러리로 보다 풍성하게 이미지를 표현

이미지를 보다 여러개로 풍부하게 표현하는 방법입니다.  여러장의 이미지를 표현하기위해서 임지 편집기에서 여러 이미지를 합쳐서 하나로 만드는 경우가 있는데요.

구템베르크 편집기에서는 여러 개의 임지를 센련되게 표현할 수 있는 방법을 제안합니다.  뭐 기존 편집기나 다른 유료 테마에서 이러한 기능들을 제공하기도 하지만 여기에서는 기능이 비교적 단순한 대신 쉽게 이를 적용할 수 있습니다.

아래는 5개의 이미지를 갤러리에서 2칼럼을 지정해 표현한 것입니다. 복잡한 모양을 지정할 수는 없지만 매우 쉽게 이미지만 삽입해 구현할 수 있다는점은 강점으로 보입니다.

이 또한 갤러리를 가로 전체를 사용해 표현할 수 도 있고, 아니면 좌측 또는 우측 정열을 할 수 있습니다. 표현하고 싶은 이야기가 많다면 좌측 또는 우측 정렬로

와이드 이미지

글 중간에 와이드 이미지를 넣어서 이미지가 주는 메세지를 극도로 강조할 수 있습니다. 쿼츠나 뉴옥타임즈나 블러그 포맷으로 널리 알려진 미디엄도 이렇게 글 중간에 풀 이미지를 넣어서 이밎가 주는 메세지를 강조합니다.

이 기능은 테마에서 지원해야 합니다. 그렇지않으면 위에서 소개한 이미지와 같이 폭 100%로 줄여 평범한 이미지로 집니다.

이렇게 와이드 이미지를 지원하는 것은 아래와같은 블럭에서 지원한다고 합니다.  테마에서 지원한다면 이미지 위치 지정 메뉴에서 Full width를 지정하는 메뉴가 생깁니다. 제가 쓰는 테마에서는 이를 지원하지 않는군요.

Gutenberg Blocks – Wide Alignment and Full-width

• Cover Image Block
• Image Block
• Gallery Block
• Pullquote Block
• Video Block
• Table Block
• Columns Block
  
• Categories Block (fullwidth only)
• Embed Block

동영상 및 소셜 미디어 포스팅 삽입

구텐베르크 편집기에서 유튜브 동영상 및 인스타그램등을 쉽게 삽입할 수 있도록 블록을 제공합니다.

예전에는 인스타그램 퍼가기 코드를 전부 복사해와 HTML레 붚여 넣었는데 이제는 블락에서 주소만 입력하면 자동으로 가져옵니다.

동영상의 경우 폭에 자동으로 맞추엇으면하는데 이는 별도 조작이 필요할 듯 싶습니다.

텍스트 입력 – 보다 가능 강화가 필요할 듯

구텐베르크 편집기에서 텍스트 입력은 기존 편집기에 비해서 기능은 줄었다는 생각입니다.

하지만 아래에서 보는 것처럼 드롭캡 기능 등을 아주 쉽게 구현할 수 있어 단점을 조금 커버한다는 생갑입니다.  뭐 이 기능은 새삼스러운 것은 아니죠. 기존 편집기엔 이보다 더 다양한 방법으로 드롭캡을 구현할 수 있습니다.

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

구템베르크 편집기는 블럭 단위로 작업하는 컨셉이다보니 글자 하나하니 개별로 컬러를 변경하고, 글자 크기를 키우는 등증 개별적 제어하는 방법이 많지는 않습니다.

아래 보는 것처럼 개별 글자별로 데코는 굵게하거나, 아태릴체 ㅗ는 사선정도의 효과를 주는 정도입니다.  그리고 물론 좌우 정열같은 아주 기본적인 기능을 제공합니다.

What you are reading now is a text block the most basic block of all. The text block has its own controls to be moved freely around the post…

… like this one, which is right aligned.

구텐베르크 편집기는 블럭 단위로 편집하므로 블럭단위로 컬러 표현은 비교적 쉽습니다. Color setting에서 배경 색상과 텍스트 색상을 쉽게지정할 수 있습니다.

마찬가지로 여기에서도 컬러 세팅 값이 아주 제한되어 있습니다. 딱  12개컬러를 사용할 수 있습니다. 컬러 고민을 하지 않게 해주니 빨리 글을 쓸 수 있겠다는 생각도 해봅니다. 가능하는 한 군더더기를 없앤갠 것이 특징 같다는 생각을 합니다.

블럭 배경 및 켁스트 멀러를 지정하면 이게 가독성이 좋지 않은 경우 가독성에 문제가 있다고 알려주더군요.  이는 좋은 시도라고 여겨졌습니다.

아래는 파란색 배경헤 희색 글자색으로 표현한 것입니다.  하나의 실예로 만들어 봤습니다.

Headings are separate blocks as well, which helps with the outline and organization of your content.

마치며

이상으로 간단히 구템베르크 편집기로 무엇을 할 수 있는지 살펴보았습니다.

어찌보면 평범한 편집기일수도 있지만 잘 발전시키면 상당히 좋은 편집기가 될 수 있을 것 같다는 생각을 해봅니다.

마크다운 문법을 적용할 수 있으면 좀 더 쉽게 문서를 작성할 수 있겠는데 아쉽게 적용하고 있지는 않습니다.

속도가 느린것도 개선이 필요하죠. 테블릿으로 구텐베르크 편집기를 이용해 봤는데 쉽게 이용할 수 없을 정도로 느리더군요.  그게 테블릿 성능의 문제였는지, 모바일 속도의 문제였는지는 모르겠습니다. 집에서 반기가 인터넷으로는 아무런 문제를 느끼지 못할 정도였는데.. 모바일에서는 확실하게 지연됨을 느낍니다.

구템베르크 편집기를 좀 더 잘 사용하려면 단축키를 적극활용하는 것이 좋은데요.  구텐베르크 편집기의 단축키에 대해서는 아래 그을 참조하세요.