워드프레스 | 구텐베르크 패턴(pattern) 사용법
개요
구텐베르크 에디터에 아주 재밌는 기능이 생겼습니다. 패턴이라는 이 기능은 블록을 직접 복사하여 페이지를 만들 수 있는 기술인데요. 단지 코드로 이루어진 이 자료 중 마음에 드는 것을 다운받으면 자신의 사이트에 바로 적용할 수 있습니다.
워드프레스 개발진들이 생각했던 큰 그림이 이것인 것 같다는 생각이 들 정도로 재밌고 실용성이 돋보이는 기능입니다. 물론 비주얼 에디터만큼의 활용성을 가지고 있지는 않지만 속도면에서는 확실히 이점이 있어보입니다.
이 사이트는 워드프레스 공식 홈페이지이며, [여기] 에서 마음에 드는 블록을 찾아 무료로 활용할 수 있습니다. 사용방법은 마우스를 올려두면 Copy가 뜨는데, 이것을 클릭하여 자신의 사이트 페이지에 Ctrl + V 만 누르면 끝이납니다.
위와같이 바로 적용이 되는 모습인데요, 어떠한 플러그인 없이 아주 간단한 소개 페이지를 만드는 것은 이제 어려운 일이 아니게 된 것 같아서 신기할 따름입니다.
다양한 디자인 레이아웃
놀랍게도 이 모든 것이 리액트로 구성되어있다보니 무게가 가벼운 모습을 보이고 있습니다. 속도면에서도 이점이 있지만 저는 깔끔한 디자인을 좋아하는 만큼 세련된 레이아웃 디자인이 마음에 들었습니다.
반응형은 어디까지 지원할까
사이트를 만드는데 가장 어려운 점은 반응형 사이트까지도 고려해야 된다는 점입니다. 이 경우는 사이트를 만들 때 굉장히 중요한 부분이기도 하지만 HTML 과 CSS 를 배워야 하기에 활용이 어려울 수도 있는데요
이러한 기능을 무료로 간단하게 복사하여 이용할 수 있다는 점은 그만큼 유저들에게 진입장벽을 낮추어 주는 결과로써 다가오게 됩니다.
블록 활용방법은?
패턴은 사이트에 들어가지 않더라도 활용할 수 있습니다. 에디터에서 좌측 상단의 + 버튼을 클릭하면 패턴과 여러 파일들이 뜨게 되는데요,
이것을 클릭하여 활용할 수 있는 패턴을 파악하며 끌어오면 패턴 가져오는 작업이 끝나게 됩니다. 물론 이 모든 자료는 직접 만들 수 있다는 점이 매력적인 요소로 다가올 수 있을 것 같습니다.
직접 패턴을 만들고 공유하려면
구텐베르크 에디터는 블록 에디터를 복사하기만 하면 다른 블록에 그대로 사용할 수 있습니다. 이미지 링크는 해당 사이트의 링크 그대로 복사되기 때문에 공유할 때 참고해야 합니다.
<!-- wp:image {"id":3274,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/a005-scottw-137.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=a8ca348edad491a5481dfe1b5e81ebdf" alt="" class="wp-image-3274"/></figure>
<!-- /wp:image -->직접 위의 코드를 복사하여 구텐베르크 에디터에 붙여넣기 하면 적용이 됩니다. 이러한 방식으로 서로 자료를 공유하는 방법을 만들 수 있습니다.