한상문

한상문님의 아티클

한상문

한상문

AI가 알아서 하는데, 워프 굳이 배울 필요가 있을까?

챗GPT의 발달로 우리의 삶은 혁신에 혁신을 거듭하고 있습니다. 데이터 분석, 자동화, 심지어 창작이나 예술까지 AI는 여러 분야에서 사람의 역할을 대체하고 보완하고 있습니다. 이러한 상황 속에서 워드프레스 같은 홈페이지 제작 도구를 굳이 배울 필요가 있을까 하는 질문을 한 번쯤 해볼 수 있습니다. AI를 통해 디자인, 문구, 개발을 쉽게 할 수 있고, 갈수록 더 좋은 노코딩 툴이 나오고 있으니 말입니다.

브런치 글 이미지 1

하지만 저는 단도직입적으로 말씀드리면, 워드프레스는 이 시대에 꼭 배워두어야 할 기술이라고 생각합니다. 그 이유는 비즈니스를 성장시키고 구현하는 과정에서 필요한 홈페이지가 단순한 랜딩 페이지나 회사 소개 홈페이지로 끝나지 않기 때문입니다. 이럴때 AI가 알려주는 코딩이나 더는 확장이 불가능한 노코딩툴로는 웹사이트 제작이 불가능에 가깝습니다.

그래서 저는 가성비 있게 원하는 비즈니스 홈페이지를 보다 쉽고 편리하게 제작할 수 있으며, 콘텐츠 관리도 용이한 워드프레스를 꼭 배워야 한다고 강조합니다.

AI = 시키는 일만 하는 신입사원 

브런치 글 이미지 2

AI는 회사에서 내가 시키는 일을 알아서 찾아서 정리하는 신입 사원과 같습니다. 직장 상사가 후배에게 업무를 지시하면 후배는 알아서 결과물을 가져옵니다. 마찬가지로 AI는 우리가 특정 주제에 대해 조사하라고 하면 그에 맞는 정보를 제공합니다.

그렇지만 지식을 조사하는 것과 활용하는 것은 전혀 다른 영역입니다. AI가 가져온 지식이 100% 사실에 부합하는지, 내가 생각하는 관점과 맞는지를 판단하는 것은 전적으로 나의 몫입니다. 그래서 저는 앞으로의 일은 쉽고 간단해 보이지만, 실제로는 더 복잡해질 것이라고 생각합니다.

쉬워보이지만 더 어려워졌다.

앞으로 일은 점점 더 쉬워지기보다는 오히려 어려워질 것입니다. 왜냐하면 AI가 제공하는 정보를 제대로 활용하기 위해서는 더 많은 분석 능력과 비판적 사고가 필요하기 때문입니다. 즉, AI가 제공하는 정보를 바탕으로 내가 원하는 방향과 일치하는지를 확인하는 작업이 필요합니다. 

이는 개발 분야에서도 마찬가지입니다. AI가 코드 작성을 도와주더라도, 그 코드를 내 상황에 맞게 활용하는 것은 나의 몫입니다. 이를 위해서는 관련 도메인 지식이 필요합니다.

워드프레스는 왜 중요할까?

브런치 글 이미지 3

그렇다면 단순한 홈페이지 제작 도구인 워드프레스는 AI가 판치는 이 시대에 왜 중요할까요? 워드프레스는 노션과 비슷한 구조를 가지고 있어 개발 지식이 없어도 콘텐츠 등록과 관리가 용이합니다. 이를 통해 쇼핑몰, 강의 플랫폼, 웹진, 예약 사이트 등을 만들 수 있습니다.

하지만 많은 사람들이 워드프레스의 테마나 플러그인을 이용해 사이트를 만들 때, 나중에 유지보수가 어려워지는 경우가 많습니다. 따라서 워드프레스의 데이터베이스 구조를 이해하고, 커스텀 포스트 타입, 커스텀 필드, 택소노미를 활용할 수 있다면, 비즈니스에 필요한 웹사이트 제작의 기초를 다질 수 있습니다.

또한 워드프레스는 최근에 페이지 빌더를 벗어나서 블록 기반으로 제작하는 구텐베르크 에디터로 전환하면서 홈페이지 속도가 많이 빨라졌습니다. 수정할 때나 아니면 사용할 때마다 답답하고 느린게 아니라 금방 반응을 하기 때문에 속도라는 점에서는 절대 무시할 수 없다고 봅니다. 게다가 코드나 이미지 최적화를 통해서 홈페이지 최적화를 비개발자여도 개발자만큼 올릴 수 있습니다.

결론적으로, 워드프레스는 단순히 필요해서 사용하는 홈페이지 제작 도구가 아니라 비즈니스의 성장과 발전을 위한 도구입니다. 이 시대에 워드프레스를 배우는 것은 더 나은 미래를 위한 투자라고 할 수 있습니다.

1
0
한상문

한상문

[노션처럼 체계적으로 배우는 워드프레스] 4W 분석

오늘 포스팅은 지금까지 발행했던 워드프레스 관련된 내용이 아닙니다. 평소에 저처럼 콘텐츠를 작성할 때 기획하느라 머리를 많이 쓰고 고민을 많이 했던 분들에게 도움이 되고자 이 포스팅을 작성합니다.

아마 지금까지 제가 발행한 글을 보면서 이런 생각이 들었을 것이라고 생각합니다.

이 독특하고 신선한 글은 왜 작성했을까?

어떻게 매주마다 지치지 않고 꾸준히 발행할까?

조회수에 상관없이 계속 발행하는 원동력은 무엇일까?

하고 말입니다. 즉 제가 정기적으로 어떤 특정한 주제를 가지고 발행하는 글에 대해서 왜 그렇게 작성했는지 궁금하실 것이라고 생각합니다. 

즉, 제가 정기적으로 특정 주제를 가지고 발행하는 글에 대해 왜 그렇게 작성했는지 궁금하실 것이라고 생각합니다.

그래서 제가 기획하는 방법인 4W 프레임워크에 대해 소개하려고 합니다. 제가 전달하는 방식을 바탕으로 워드프레스뿐만 아니라 다양한 분야에 적용하셨으면 좋겠습니다. 그럼 시작하겠습니다. 

참고로 해당 포스팅은 배작가 무기가 되는 글쓰기 4W 부분을 참고했습니다.

4W 프레임워크란 무엇인가?

브런치 글 이미지 1

4W란 서비스나 메시지를 팔기 전에 해당 메시지를 뾰족하게 기획하는 방법을 말합니다. 보고서나 글을 작성할 때 육하원칙에 의거해서 작성해야 보고서가 짜임새가 있듯이 4W라는 구조를 잡고 나면 콘텐츠를 만들든 홈페이지를 제작하든 강의를 만들든, 전자책을 쓰든 간에 짜임새 있는 구조를 기반으로 콘텐츠를 작성할 수 있습니다.

4W 구성요소는 다음과 같이 4가지로 나눌 수 있습니다. 각각의 요소를 한 번 샅샅이 살펴보겠습니다.

1. WHY

 WHY는 가장 중요합니다. 오늘날 경쟁이 치열하고 공급이 많아지는 상황에서 내가 어떤 제안을 한다면, 반드시 그 제안에 대해 상대방이 납득할 수 있는 이유를 주어야 합니다. 즉, 이유가 확실해야 상대방이 선택하는 근거가 되기 때문입니다.

 특히, 와디즈 펀딩을 하는 경우 잘 펀딩되는 제품들은 저마다 저자의 감동적인 스토리를 가지고 있습니다. 애플의 경우, '다르게 생각하라'는 WHY를 드러냈습니다. 그렇기에 애플이라는 브랜드는 당시에 잘 나가지 못하는 반항아, 사고 뭉치, 사회 부적응자들이 세상을 바꿀 수 있다고 믿었습니다. 그들이 결국 세상을 다르게 바라보는 시각을 가지고 있으며, 그것이 결국 세상을 변화시키기 때문입니다. 그래서 애플이 그렇게 유명한 기업이 되었습니다.

2. WHO

WHO는 내가 발행하는 콘텐츠나 판매하는 제품의 대상이 누구인지를 고민하는 영역입니다. 타깃을 제대로 정하지 않으면 잘못된 메시지만 뿌릴 가능성이 높기 때문입니다.  

특히, 마케팅의 핵심은 타깃을 좁게 잡으라고 하는데, 이 말이 일리 있는 이유는 타겟을 넓게 잡을수록 메시지가 더욱 모호해지고, 이도 저도 아니게 되기 때문입니다. 따라서 WHO로 글을 읽을 타겟을 잡는 것이 중요합니다.

3. WHAT

WHAT은 내가 판매하는 것을 지칭합니다. 하지만 여기서 한 발짝 나아가야 하는 것은 내가 판매하는 서비스나 제품을 단순히 지칭하는 것이 아닙니다. 그 제품과 서비스가 담고 있는 속뜻이나 의미가 무엇인지 파악하고, 그것에 대해 이야기할 줄 알아야 합니다.  

'THIS IS MARKETING'의 저자 세스 고딘은 사람들이 드릴을 사는 이유가 드릴이 아니라 드릴로 뚫는 구멍 때문이라고 말합니다. 구멍을 뚫어서 벽시계를 달면 아이에게 나의 자상함을 보여줄 수 있고, 아내에게는 듬직한 남편이라는 칭찬을 받을 수 있습니다. 즉, 여러분이 작성하는 콘텐츠가 있다면, 해당 콘텐츠를 읽는 사람이 단지 글을 소비하는 것을 넘어서 어떤 의미를 얻는지를 보여주는 것이 관건이라고 봅니다.

4. HOW

HOW는 WHAT, WHO, WHY에서 정리한 내용을 바탕으로 콘텐츠를 독자에게 어떻게 보여줘야 하는지를 어필하는 영역을 말합니다. 여기서 더 나아가야 하는 점은 내가 발행하는 주제와 관련된 경쟁사가 있다면 내가 어떻게 하면 경쟁사랑 얼마나 다르게 글을 작성하는지에 대해서 생각하는 영역이기도 합니다.

WHY - 워드프레스를 배우는 새로운 접근 필요

워드프레스를 알려주는 사람들은 많지만, 다들 결국 홈페이지 제작에만 국한됩니다. 부업을 벌거나, 애드센스 수익을 얻거나, 아니면 노코딩 툴을 사용하는 것에 초점을 맞추고 있습니다. 하지만 워드프레스의 진가는 거기에 있지 않다고 생각합니다.

워드프레스는 플러그인과 커스터마이징을 통해 비즈니스가 원하는 웹사이트를 무궁무진하게 만들 수 있기 때문입니다. 그래서 이 워드프레스의 진가를 제대로 알려주는 것이 필요했습니다. 그리고 저는 지금 워드프레스 강의를 하는 생태계를 비판하고 싶지도 않고, 옹호하고 싶지도 않습니다.

어떤 방법으로 알려줄지 고민하다가 우연히 사이트 사용법 안내를 할 때 콘텐츠 등록을 노션에 빗대서 설명한 적이 있었습니다. 설명을 들었던 클라이언트가 알아서 바로 콘텐츠를 업로드 하셔서, 그때부터 워드프레스를 노션에 빗대서 설명하면 어떨까 하는 생각을 가지게 되었습니다.

WHO - 노션에 친숙한 사람들

노션을 다룰 줄 아는 사업가나 IT 종사자들은 이미 노션을 잘 다루고 있습니다. 특히 데이터베이스를 만들어봤거나, 아니면 일반 페이지에서 여러 개의 페이지를 만드는 것도 해본 경험이 있습니다. 즉, 이들은 데이터베이스와 블록에 익숙합니다. 그렇기에 이들은 워드프레스를 피부로 와닿을 수밖에 없습니다.

특히 이들에게 워드프레스를 잘 활용하면 진짜 전문적인 백엔드 개발자처럼 사이트를 구성하고 운영할 수 있습니다.

WHAT - 개발 리소스에 대한 고민을 덜다

제가 포스팅을 하면서 가장 고민했던 부분은 독자에게 제3의 선택안을 주는 것입니다. 저는 홈페이지만 제작하는 워드프레스 강의가 얼마나 잘못되었는지 알고 있으며, 그런 강의를 하는 분들을 옹호하고 싶지도, 비판하고 싶지도 않았습니다.

저는 워드프레스를 좀 더 직관적으로 편하게 익히는 새로운 방식을 도입했습니다. 그 실마리는 바로 노션이었고, 노션을 통해 워드프레스에 익숙해지면 단순 웹사이트 제작을 넘어설 수 있습니다. 즉, 워드프레스 홈페이지 예시에 나오는 다양한 사이트를 원하는 대로 만들 수 있다는 것입니다.

"내가 정말 개발하고 싶은 게 있는데, 그게 정말 될까? 이런 방식으로 구현하고 싶은데, 정말 가능할까? 내가 이런 저런 아이디어가 있는데, 당연히 개발 비용은 훌쩍 1,000을 넘겠지?" 아닙니다. 워드프레스라는 좀 더 현명하고 가성비 있는 옵션이 있어서 개발 리소스에 대한 고민을 덜 수 있습니다. 개발 리소스에 대한 고민을 덜어 사람들이 더 기능이나 개발에 대한 지식 없이도 마음만 먹으면 개발할 수 있다는 믿음을 심고 싶습니다.

HOW - 개념은 최대한 쉽게, 케이스 스터디로 인사이트 창출

어려운 개념과 기술을 노션에 빗대서 설명

워드프레스로 진행한 프로젝트 케이스 스터디

워드프레스를 노션에 빗대서 설명합니다. 워드프레스 자체가 매우 어려운 것이 아니라 사실 노션만 알면 그 원리를 제대로 이해할 수 있습니다. 이미 IT나 사업을 하신다면 노션이라는 도구에 굉장히 친숙할 것입니다. 그래서 일단 노션에 대해서 빗대서 설명합니다.

워드프레스 사용할 때 꼭 알아야 하는 개념인 포스트 타입, 커스텀 필드, 택소노미 등의 어려운 용어를 노션의 데이터베이스와 속성을 가지고 설명합니다. 그러면 개발을 하는 데 있어서 워드프레스라는 도구는 낯선 친구가 아니라 편안한 친구로 인식될 것입니다.

또한 워드프레스로 제작한 사이트 스토리를 들려줄 것입니다. 제가 그동안 제작한 사이트는 단순히 회사 소개 홈페이지만 있는 것이 아닙니다. 저 그동안 워드프레스 기반으로 커뮤니티 사이트, 블로그 사이트, 강의 플랫폼을 만들었습니다. 예약 기능이 탑재된 예약 사이트 제작은 물론, 예약 쇼핑몰도 만들어봤습니다.

처음 워드프레스에 접할 당시에는 저도 워린이처럼 플러그인이나 테마만 가지고 만들어야 한다고 생각했지만, 지금 와서 생각해보니 너무 달랐습니다. 워드프레스의 핵심 개념인 포스트 타입과 커스텀 필드, 텍소노미라는 개념을 가지고 콘텐츠 모델링과 데이터베이스 설계를 하고, 부족한 부분만 워드프레스 PHP 코딩으로 채우면 되었기 때문입니다.

무작정 쓰기 전에, 4W 프레임워크를 먼저 써보세요.

브런치 글 이미지 2

오늘날은 수요보다 공급이 많은 상황입니다. 경제적으로도 고성장은 거의 끝났고, 저성장의 시대에 접어들었습니다. 게다가 내 콘텐츠를 읽을 독자를 모집할 채널은 너무 많습니다. 그래서 먼저 생각과 고민을 하는 것이 좋다고 봐요. 저는 그래서 콘텐츠 작성만큼은 현대 정주영 회장처럼 "임자 해봤어?"라는 마인드로 무작정 작성하기보다는, 그 전에 4W 프레임워크를 활용하여 정기적으로 발행할 글에 대해서 기획하는 습관을 키우는 것이 중요하다고 생각합니다.

방향 잡기가 처음에는 어려울 수 있지만, 일단 방향만 제대로 설정하면 그에 맞춰 글을 작성하는 데 큰 도움이 됩니다. 따라서 무작정 쓰기보다는 차분히 고민하고 분석하여 4W 프레임워크를 만들어 보는 것을 추천합니다. 


2
0
한상문

한상문

왜 워드프레스를 배우면, 홈페이지 제작 밖에 못할까?

현재 워드프레스라는 툴을 보면서 가장 아쉬웠던 점은 많은 사람들이 홈페이지 제작에만 집중하고 있다는 것입니다. 워드프레스는 비즈니스나 사업을 운영하는 데 필요한 IT 비즈니스 모델을 보다 쉽고 효율적으로 만드는 장점이 있습니다. 하지만 많은 사람들이 아임웹이나 프레이머와 같은 홈페이지 제작 도구에만 국한되고 있습니다. 즉, 사업에 정말 유용한 무기가 있음에도 불구하고 이를 제대로 활용하지 못하는 느낌을 받았습니다.

워드프레스 분야에서 일하는 제 입장에서는 이 점이 정말 안타깝습니다. 분명히 플러그인과 커스터마이징을 활용하면 비즈니스에 필요한 웹사이트를 무궁무진하게 만들 수 있는 잠재력을 가지고 있습니다. 그러나 현실은 그렇지 않더라고요. 그래서 저는 왜 그런지 궁금했습니다.

자세한 내용은
https://brunch.co.kr/@giri2342/22
여기서 확인해주세요.

7
4
한상문

한상문

나만의 홈페이지 만들기 - 블록 에디터 활용법


블록 에디터는 노션의 블록 쌓기처럼 사용자가 콘텐츠를 블록 단위로 구성하고 편집할 수 있는 접근 방식을 말합니다. 이러한 편집기를 이용해서 텍스트, 이미지, 영상, 숏코드 등을 자유자재로 삽입할 수 있으며, 복잡한 코딩 작업 없이도 직관적인 웹사이트를 만들 수 있게 합니다.

이번 포스팅에서는 블록 에디터의 기본 개념과 활용법을 소개하며, 향후 여러분이 홈페이지든 콘텐츠를 만들어야 할 때 워드프레스를 가지고 쉽게 할 수 있는 방법을 안내하고자 합니다. 

블록 에디터란 무엇일까?

워드프레스 블록 에디터는 2018년 12월 워드프레스 5.0 버전에서부터 도입된 새로운 콘텐츠 편집 도구라고 할 수 있습니다. 기존에 클래식 에디터가 하던 역할인 콘텐츠 편집을 전적으로 대체하면서, 워드프레스 기본 에디터로 설정되었습니다.

블록 에디터는 워드프레스 페이지나 글 편집창에 들어온 상태에서 /만 누르면 다양한 블록이 제공되며, 그 종류는 크게 6가지로 나뉩니다.

- 텍스트 블록 : 문단, 제목, 인용구

- 미디어 블록 : 이미지, 갤러리, 비디오, 오디오

- 디자인 블록 : 버튼, 칼럼, 구분선

- 위젯 블록 : 최신 글, 카테고리 목록, 검색창

- 테마 블록 : 사이트 로고, 제목, 내비게이션

- 임베디드 블록 : 유튜브, 숏코드, 트위터등

이런 다양한 종류의 블록을 활용해서 홈페이지 디자인을 할 수 있게 됩니다.  

블록 에디터 활용법

블록 에디터는 기본적으로 하나의 블록을 계속 쌓아가는 것이라고 말했습니다. 그건 노션이랑 전혀 다르지 않습니다. 

1. 사용하는 블록 확인하기

먼저 블록 에디터를 사용하기 전에 왼쪽의 계단 모양을 클릭해서 현재 내가 사용하는 블록이 어떤 것인지 확인하는 습관을 가지는 것이 좋습니다. 이는 포토샵이나 피그마를 사용할 때 현재 내가 쌓아가는 블록의 레이어가 무엇인지 확인하는 것과 비슷합니다.

2. 블록은 항상 2방향으로 쌓는다.

블록은 크게 2가지 방식으로 쌓을 수 있습니다. 하나는 내부적으로 쌓고요. 다른 하나는 외부적으로 쌓을 수 있습니다. 홈페이지를 보다 보면 스크롤을 내릴 때마다 색상이나 이미지를 달리해서 섹션이 구분되어지는 것을 볼 수 있습니다. 이는 홈페이지라는 전체적인 레이아웃을 구성할 때 섹션을 통해서 이를 구분 짓는다고 볼 수 있어요.

여기서 이 섹션을 만다는 것이 바로 내부적으로 콘텐츠를 쌓는다고 볼 수 있어요. 이럴 때는 주로 칼럼을 이용하는 편입니다. 칼럼 같은 경우는 내부에다가 글이나 콘텐츠를 구분 지을 수 있습니다. 일반적으로 흔히들 봤을 카드 레이아웃이 바로 칼럼에 따라서 해당한다고 볼 수 있어요. 

칼럼 안에는 안에 넣어야 할 콘텐츠를 넣고, 칼럼 밖에는 다시 경계를 나누는 칼럼을 만드는 것을 확인할 수 있어요.

3. 구텐베르크 에드온을 활용하자

워드프레스의 가장 큰 장점은 확장성이라고 봅니다. 이 말은 워드프레스 자체적으로 부족한 기능이나 커스터마이징을 플러그인이나 커스터 마이징을 통해서 개선시킬 수 있습니다. 특히 구텐베르크 에디터는 있을 블록은 다 있지만, 디테일하게 설정하기에는 까다로운 점이 많습니다. 홈페이지에 넣었던 블록들을 내 입맛대로 커스터마이징 하기에는 여간 까다롭기 때문입니다.

이럴 때 구텐베르크 에드온 블록인 케이던스, 제너레이트프레스, 스펙트라의 도움을 받습니다. 특히 워드프레스로 홈페이지를 전문적으로 해보고 싶다면 애드온 블록을 쓰는 것을 강력하게 권해드리는 바입니다. 기능은 많지만, 사용하는데 손이 가지 않는 구텐베르크를 능숙하게 사용할 수 있습니다.

그러면 왜 블록 에디터를 쓸까?

워드프레스 홈페이지 제작 하다 보면 제일 많이 듣는 용어는 바로 엘리멘터입니다. 엘리멘터는 아시는 분은 아시겠지만, 가장 강력한 페이지 빌더 플러그인입니다. 이 플러그인을 설치하면, 쉽게 드래그 앤 드롭방식처럼 원하는 블록을 자유자재로 가져다가 쓸 수 있습니다. 하지만 이 플러그인을 쓰면 문제가 있습니다. 홈페이지 제작 및 관리 경험이 일관적이지 않습니다.

왜냐하면 엘리멘터는 워드프레스 자체에 내장된 것이 아니라 별도의 페이지 빌더이기 때문에 별도로 로딩을 해야 합니다. 특히 글 같은 경우는 블로그 포스팅 영역이다 보니 구텐베르크 에디터로 한다고 해도, 반복되지 않는 html을 제작하는 페이지 같은 경우는 엘리멘터로 수시로 작업해야 합니다. 이거 할 때, 이거하고 저거 할 때는 저거 하는 것은 초보자 입장에서는 굉장히 까다롭고 성가실 수밖에 없습니다.

게다가 페이지 편집창을 번거롭지만 수시로 열어야 하고, 별도로 편집창을 점유하는 만큼 많은 코드를 잡아먹습니다. 그래서 홈페이지 제작 및 편집을 일관적으로 할 수 있는 블록 에디터를 추천하는 바입니다.

홈페이지 제작은 원하는 목적의 사이트 제작도 중요하지만, 향후 관리자가 문제없이 홈페이지 내부의 콘텐츠를 잘 수정하고 관리하는 것에 있다고 합니다. 자체 개발이 아니라 워드프레스 활용한다면,  블록 방식으로 직관적으로 콘텐츠를 업로드할 수 있고, 페이지도 스스로 수정 및 관리할 수 있는 블록 에디터 방식은 절대적으로 고려해야 한다고 봅니다.

3
0
한상문

한상문

워드프레스 홈페이지 제작, 노션처럼 쉽게 블록 쌓듯이

워드프레스를 막상 하려고 하면 생각보다 어렵습니다. 알아야 할 게 너무 많기 때문입니다. 플러그인, 테마, 관리, 콘텐츠, seo 등으로 분야도 다양합니다. 플러그인은 어떤걸 써야하고, 전부다 영어인데, 어떻게 사용해야 하는지 말이죠. 그런데 걱정하지 마세요. 간단한 워드프레스 홈페이지 제작 정도는 쉽게 할 수 있어요. 영어 위주이고 낯설어서 복잡하고 어려울 뿐이지, 사실 노션처럼 차곡차곡 블록 쌓듯이 쉽게 만들 수 있습니다. 거짓말 같다고요? 진짜입니다.

이번 포스팅에서는 워드프레스 홈페이지 제작하기에 앞서서 블록 기반의 직관적인 편집 방식에 대해서 한 번 알아보려고 합니다.  

노션의 블록 방식

브런치 글 이미지 1

노션은 사용자에게 직관적인 블록 기반의 편집 환경을 제공합니다. 각 블록은 텍스트, 이미지, 표 등 다양한 형태로 구성되어, 사용자가 원하는 대로 자유롭게 블록을 배치할 수 있습니다. 이러한 방식을 통해 굳이 레이아웃을 고민하지 않고도 필요한 콘텐츠를 쉽게 채워 넣을 수 있습니다. 대표적인 예로는 노션 템플릿을 들 수 있습니다.

게다가 사용자는 /나 검색을 통해 원하는 블록을 바로 불러올 수 있고, 불러온 블록을 드래그 앤 드롭 방식으로 이동하거나 삭제할 수 있습니다. 그래서 원하는 결과물을 빠르게 만들 수 있습니다. 이렇게 직관적으로 블록을 쌓는 방식이 바로 워드프레스에서도 동일하게 적용된다는 점을 강조하고 싶습니다. 

워드프레스의 블록 에디터란?

워드프레스 홈페이지 제작을 할 때는 두 가지 모드가 병행되었습니다. 정적인 HTML 기반의 웹페이지를 제작할 때는 엘리멘터나 디비 같은 페이지 빌더를 사용했으며, 반면 콘텐츠를 발행할 때는 워드프레스가 제공하는 기본 편집기를 사용했습니다.

브런치 글 이미지 2

하지만 워드프레스 버전이 5.0 이상으로 넘어가면서 최근에는 구텐베르크 기반의 블록 에디터를 사용하고 있습니다. 게다가 엘리멘터 점유율도 점점 떨어지고 있습니다.사용자는 콘텐츠든 페이지든 상관없이 블록 단위로 편리하게 편집할 수 있게 된 것이죠. 기존의 고전 편집기는 답답한 화면에 네이버 카페처럼 정해진 위젯들만 골라서 사용했다면, 구텐베르크 에디터는 콘텐츠를 자유롭게 조합하여 넣을 수 있습니다.

문서 작성뿐만 아니라 웹사이트 디자인 관련 블록도 있으며, 게다가 설치한 플러그인에서 가져오는 블록도 모두 불러올 수 있습니다. (워드프레스 자체가 구텐베르크 기반이기 때문입니다.) 또한, 내가 만든 숏코드도 쉽게 불러올 수 있습니다.

물론 처음에는 노션처럼 학습 곡선이 있어서 자유자재로 다루기는 어렵지만, 익숙해지면 더욱 효율적으로 콘텐츠를 만들고 관리할 수 있습니다. 기술적인 지식이나 코딩에 대한 지식 없이도 누구나 개인 웹사이트를 쉽게 만드는 시대가 도래한 것입니다.

블록 에디터의 주요 기능

브런치 글 이미지 3

블록 에디터가 제공하는 다양한 기능에 대해 말씀드리겠습니다.

1. 드래그앤 드롭 방식

블록 에디터의 가장 큰 장점 중 하나는 드래그앤 드롭 방식입니다. 사용자는 블록을 원하는 위치로 손쉽게 이동할 수 있어 레이아웃 조정이 직관적입니다. 예를 들어, 1로우에서 2컬럼을 사용하거나, 1컬럼을 선택한 후 그 아래에 이미지나 텍스트 블록을 자유롭게 추가할 수 있습니다.

2. 다양한 블록 옵션 제공

블록 에디터는 노션이 제공하는 블록처럼, 기본적으로 텍스트, 이미지, 비디오, 버튼 등 다양한 형태의 블록을 제공합니다. 이러한 다양한 옵션 덕분에 콘텐츠를 구성하는 데 있어 더 많은 선택의 자유를 누릴 수 있습니다.

3. 스타일링 옵션 제공

각 블록에 대해 스타일을 쉽게 조정할 수 있어 디자인을 개선할 수 있습니다. 예를 들어, 버튼의 색상 변경, 크기 조절, 썸네일에 그림자 효과를 추가하는 등의 작업이 가능합니다. 이를 통해 보다 매력적이고 시각적으로 돋보이는 콘텐츠를 만들 수 있습니다.

워드프레스 홈페이지 제작 = 블록 쌓기

홈페이지 제작은 결국 노션처럼 블록을 쌓는 작업이라고 볼 수 있습니다. 노션은 텍스트, 테이블, 파일, 링크 등을 이용해 나만의 빈 공간을 개인의 관점으로 채울 수 있습니다. 마찬가지로, 워드프레스에서도 제공하는 블록을 활용하여 차곡차곡 쌓아 섹션과 레이아웃을 구성할 수 있습니다. 여기에 스토리보드와 카피라이팅을 추가하면 멋진 랜딩 페이지나 홈페이지가 완성됩니다.

모든 작업은 단순하게 진행해야 한다고 생각합니다. 컨셉이나 기획에 따라 세부적인 수정이나 커스터마이징이 필요할 뿐, 본질을 구성하는 토대는 동일하기 때문입니다. 너무 깊게 하나씩 파고들기보다는, 워드프레스라는 도구에 친숙해지는 것이 더 중요하다고 봅니다. 그래서 아직 답답함을 느끼실 수도 있지만, 저는 최대한 천천히 시리즈를 연재하며 함께 나아가려고 합니다.

1
0
한상문

한상문

지루하고 따분한 웹사이트에 생명을 불어넣다.

오늘날 많은 웹사이트들이 정적이고 죽어있는 느낌을 주고 있습니다. 단순히 텍스트와 이미지만 가득한 웹페이지로는 사용자들의 관심을 끌기 어렵습니다. 이에 대한 대안으로 사용자에게 역동적이고 생동감 넘치는 경험을 줄 수 있는 동적 웹사이트가 있는데요.

갓 잡은 활어처럼 싱싱한 웹사이트란?

브런치 글 이미지 1

낚시를하다보면 갓잡은 활어가 가장 회치기도 좋고, 매운탕 끓이기도 좋습니다. 생동감이 있고, 활력이 느껴지기 때문입니다. 웹사이트도 마찬가지라고 봅니다. 그냥 정보전달만 하면서 지루하고 따분한 웹사이트가 아니라요. 괸라자가 실시간으로 콘텐츠를 수정하고 관리하고, 발행한 콘텐츠를 가지고 사용자에게 보여주는 살아있는 웹사이트를 말합니다. 

동적 웹사이트가 주는 장점 2가지

그러면 이런 동적인 웹사이트를 만들면서 주는 이점에는 뭐가 있을까요? 한 번 유저 별로 알아보겠습니다.

사용자

사용자의 행동이나 액션에 따라서 맞춤화된 데이터나 콘텐츠를 제공할 수 있습니다. 사용자가 클릭, 신청, 필터를 걸었을 때 그에 맞는 콘텐츠 제공은 사용자 입장에서 충분히 소통을 하고 상호작용을 하는 것처럼 느끼게 만듭니다. 

관리자

관리자 입장에서는 효율적으로 홈페이지 콘텐츠를 관리할 수 있습니다. 또한 매거진일 경우 여러 팀원이 동시에 작업하고 권한 설정을 통해서 콘텐츠를 더욱더 효율적으로 관리할 수 있고요. 콘텐츠를 구조화하고 분류하기 때문에 콘텐츠 인덱싱 및 검색도 가능합니다.

웹사이트에 활력을 넣는 4가지 요인

 1. 커스텀 포스트 타입 

<노션의 데이터 베이스: 기능 라이브러리>

브런치 글 이미지 2

워드프레스에서 기본 제공하는 게시물 외에도 커스텀 포스트 타입을 만들어 다양한 콘텐츠를 관리할 수 있습니다. 이를 통해 블로그, 포트폴리오, 제품 리뷰 등 다양한 유형의 콘텐츠를 동적으로 표시할 수 있습니다

커스텀 포스트 타입은 제가 일전에도 말했지만, 노션으로 따지면 하나의 데이터 베이스라고 할 수 있습니다. 그 데이터 베이스에는 스케줄도 될 수 있고, 템플릿도 될 수 있고, 캘린더도 될 수 있습니다. 또한 노션의 Aa 이름 속성 처럼 클릭하면 개별 콘텐츠를 작성 및 편집할 수 있습니다. 어쨌든 그 데이터가 묶여 있는 집합인 커스텀 포스트 타입을 만드는 것이 워드프레스로 하는 동적 웹사이트 제작의 첫 번째 스텝입니다.

노션에서는 노션이 제공하는 데이터 베이스를 말합니다. 데이터 베이스를 통해서 내가 원하는 키워드나 주제에 관련된 데이터를 리스트화 시키면서 관리를 할 수 있습니다. 게다가 Aa 이름을 클릭하면 각 주제별로 별도의 메모 사항이나 콘텐츠를 기록할 수 있고요.

2. 커스텀 필드

브런치 글 이미지 3

<노션에서 제공하는 속성 값 나열>

고급 커스텀 필드를 사용하면 각 포스트 타입에 맞춤형 필드를 추가하여 더 복잡한 데이터를 관리할 수 있습니다. 예를 들어, 제품 페이지에 가격, 재고 상태, 사용자 리뷰 등을 추가할 수 있습니다

커스텀 필드는 노션에서 말하는 속성이라고 보시면 됩니다. 노션을 보면 알겠지만, 각 속성에 따라서 넣어야 하는 필드가 고정되어 있는 걸 볼 수 있습니다. 그래서 데이터 유효성 검사가 좋고, 원하는 데이터를 깔끔하게 정리할 수 있습니다. 워드프레스에서 커스텀 필드를 만들려면 ACF나 METABOX, CROCOBLOCK 등의 플러그인을 꼭 활용해 보시는 걸 권해드립니다.

3. 쿼리 설정

브런치 글 이미지 4

<노션의 속성 필터 설정 화면> 

쿼리는 뭐냐면 일종의 데이터를 배열하는 것을 말합니다. 이게 왜 중요하냐면? 데이터가 한 껏 모아져 있는 꾸러미가 있는데요. 그 꾸러미에서 데이터의 유무와 크기 순서에 따라서 콘텐츠를 보여주고 싶기 때문입니다. 

노션 쓰다 보면 이런 적 종종 있잖아요. 그 많은 데이터베이스에 나열된 모든 데이터 중에서 내가 원하는 속성만 선택해서 보여주고 싶거나 아니면 날짜별로 테이블을 정렬해야 할 때 있잖아요. 그럴 때 가장 쓰는 게 바로 쿼리입니다.

워드프레스는 자체적으로 쿼리를 제공하고요. 함수를 통해서 설정할 수 있습니다. 이 부분을 직접 학습하기보다는 노션을 통해서 데이터 쿼리를 짤 수 있다는 개념을 아는 게 중요하다고 봐요. 그 개념만 알면, 나머지는 그 부분만 코딩하면 되거든요.

4. 그리드(루프) 만들기

브런치 글 이미지 5

<노션의 레이아웃 설정 화면>

그리드는 뭐냐면 데이터를 보여주는 형식이나 구성인 레이아웃을 말합니다. 그리고 그 레이아웃이 앞전에 설정한 쿼리에 따라서 반복되는 것을 말합니다.

종종 웹진이나 플랫폼 보다 보면 반복되는 요소를 본 적 있지 않나요? 웹진이면 제목, 작성자,  썸네일이 하나의 카드처럼 동일한 형태로 반복될 것이고, 플랫폼이라면 개인이 발행하는 게시판이 일렬로 쭈욱 나열됩니다. 이렇게 데이터를 묶어서 보여주는 영역을 설정하는 것을 루프나 그리드라고 합니다. 

워드프레스는 커스첨 포스트 타입과 커스텀 필드를 세팅하고 나면 이 데이터를 보여주는 하나의 꾸러미인 그리드를 플러그인이나 코딩을 통해서 만듭니다. 그리고 그 그리드를 내가 원하는 페이지마다 가져와서 보여주면 되죠.

너무 어렵다면? 노션을 한 번 생각해 보세요. 노션 처음 배울 때 신기했던 게 뭐냐면요. 데이터 베이스 하나 진짜 잘 만들어 놓으면 그걸 가지고 타임보드 / 캘린더 / 갤러리 등의 내가 필요한 레이아웃으로 바꿀 수 있다는 겁니다. 그렇게 햇빛에 따라서 색상이 변하는 카멜레온처럼 데이터를 입맛대로 바꾸시면 됩니다.

동적 웹사이트의 전망

브런치 글 이미지 6

앞으로 동적방식의 워드프레스 홈페이지 제작의 전망은 점점 커질 것으로 보입니다. 왜냐하면 AI의 발달과 검색엔진의 둔화로 인해서 자기의 취향과 콘셉트를 가지는 콘텐츠 제작의 수요가 더 많아질 것이기 때문입니다. 10년 전만 해도 유튜브는 그냥 하는 사람만 했다면, 이제 유튜브는 사업을 하거나 혹여 하지 않더라도 나를 알리기 위해서는 필수적으로 거쳐야 하는 채널입니다.

따라서 이런 추세에서 나만의 독특한 콘텐츠를 정리해서 보여주고, 그것을 통해서 방문자 입장에서 꼭 보고 싶거나 필요한 콘텐츠를 보여줍니다. 단지 딱딱하게 회사에 있는 정보들만 보여주는 것이 아니라, 그 사람만 가질 수 있는 고유의 영역인 콘텐츠를 계속 보고 싶은 욕구는 점점 커질 것입니다.

6
0
한상문

한상문

동적 웹사이트도 쉽게 만드는 워드프레스의 매직

종종 놀라운 웹사이트를 마주하게 됩니다. 물론 디자인도 아름답고, 사용자 경험도 좋지만 진짜 눈이 반짝반짝 빛나는 경우는 바로 동적인 기능이 탑재된 웹사이트라고 할 수 있습니다. 플랫폼, 강의 사이트, 매거진,  디렉토리 사이트, 커뮤니티 등등의 다양한 콘텐츠 기반 사이트 말입니다. 

이런 사이트를 막상 제작하려고 하면 무조건 당연히 비용이랑 시간은 많이 드는 거 아니야? 이렇게 생각할 수 있습니다.

하지만 아닙니다. 워드프레스를 이용해서 기능 설계 및 적당한 커스터마이징을 잘 하면, 충분히 잘 만들 수 있어요. 플러그인이나 테마만 덕지덕지 붙이면 되는 것 아닌가요? 그것도 아닙니다. 그냥 익숙하게 노션 쓰듯이 사이트에 필요한 데이터 베이스 설계를 먼저 하고요. 그다음에 비즈니스 기능에 맞게 개발을 들어가면 됩니다. 

동적 웹사이트란?

브런치 글 이미지 1

동적 웹사이트는 사용자와의 실시간 상호작용을 통해서 콘텐츠가 변경되는 사이트를 말합니다. Maria DB나 Mong go DB에서 저장된 데이터를 사용자의 입력이나 요청에 따라서 불러와서 다이나믹하게 콘텐츠를 보여주는 것을 말합니다.

- 동적 웹사이트의 특징

워드프레스를 통해서 사이트를 잘 설계를 하면, 워드프레스 관리자에서 원하는 콘텐츠를 업로드하면, 해당 콘텐츠를 구조적으로 잘 보여줄 수 있어요. 게다가 사용자 상호작용에 따라서 콘텐츠를 보여주게 할 수도 있고, 안 보이게 할 수 있습니다.

- 동적 웹사이트작동 예시

예를 들어서 고객이 상품을 찜하기 할 경우, 찜한 상품 리스트를 내 개인 계정 페이지에서 볼 수 있고요. 블로그에서 개재된 매거진 리스트에서 내가 필요한 카테고리 별로 매거진을 조회할 수 있습니다. 

또한 고객이 원하는 키워드를 검색할 경우, 검색결과 리스트가 나오게 할 수 있어요. 즉 사이트 방문자와 계속 호흡을 하는 사이트라고 보면 됩니다. 즉 비즈니스에 필요한 모든 기능이 결국은 다이나믹하게 콘텐츠를 제공한다고 볼 수 있습니다.

정적 웹사이트 VS 동적 웹사이트

브런치 글 이미지 2

그러면 흔히 접하는 정적 웹사이트와의 비교를 통해서 동적 웹사이트를 더 자세히 알아보겠습니다. 웹사이트는 크게 정적 웹사이트와 동적 웹사이트로 나눌 수 있는데요.

먼저 정적 웹사이트는 움직이지 않는 상태를 말합니다. 즉 고정된 콘텐츠를 제공하며, HTML 파일로 구성되어 있습니다. 그래서 모든 사용자에게 차별 없이 동등한 내용을 제공합니다. 운영 중에 내용을 변경할 사항이 생긴다면 일일이 찾아서 내용 변경 및 디자인도 반영을 해줘야 합니다. 일반적으로 보이는 회사소개 홈페이지나 랜딩페이지가 대표적인 예시라고 볼 수 있습니다.

반면에 동적 웹사이트는 저장된 데이터베이스를 불러오는 방식으로 작동합니다. 그래서 사용자와 상호작용을 통해서 실시간으로 콘텐츠가 사라지거나 업데이트되는 방식입니다. 동적 웹사이트는 데이터 베이스와 서버 사이의 데이터를 활용하는 특징을 가지고 있습니다. 그래서 내용을 수정하거나 업데이트만 관리자에서 하면 되고, 그 내용은 바로 프론트 엔드에서 반영됩니다.

동적 웹사이트 제작 사례

그러면 본격적으로 현재 오늘날 한국에서 동적으로 잘 구현된 사이트가 어떤 것들이 있는지 한 번 종류별로 살펴보겠습니다.

(참고로 워드프레스 홈페이지 예시 위주로 살펴보겠습니다.)

전자 상거래 사이트

브런치 글 이미지 3

잘 알고 있는 아마존이나 이베이 같은 전자 상거래 사이트가 동적으로 만든 웹사이트의 대표 사례입니다. 동적으로 적용된 기능으로는 제품 나열 및 제품 검색 기능도 있지만, 사용자마다 리뷰나 댓글을 남길 수 있고요. 또한 가입한 회원의 등급에 따라서 상품을 보이게 하거나 안 보이게 할 수 있습니다. 여기다가 필요한 기능을 더 추가할 수 있습니다. 

<전자상거래 사이트 대표 사례>

- 클린베딩

커뮤니티 사이트

브런치 글 이미지 4

커뮤니티 사이트는 주로 아이보스나 이오플래닛 같이 사람들이 모여서 행동하는 플랫폼이라고 할 수 있습니다. 자기가 주로 관심이 있을 법한 주제를 가지고 소통하는 형식입니다. 주된 기능에는 당연히 댓글, 게시판, 회원관리가 있습니다. 그래도 주목해야 할 점이 하나 있는데요. 그건 바로 네이버 블로그처럼 자기가 직접 포스팅을 하는 방식입니다. 

<커뮤니티 사이트 대표 사례>

- 미라클 클럽 

- 모두의 연구소 

온라인 강의 사이트

브런치 글 이미지 5

다음은 클래스 101이나 패스트 캠퍼스 같은 강의 사이트입니다. 요즘 들어서 온라인 강의의 수요가 점점 오르고 있는 만큼, 강의 사이트 제작은 점점 많아질 것으로 보입니다. 강의 사이트 같은 경우는 들어가야 하는 기능이 생각보다 많은데요. 먼저 앞서 살펴본 전자 상거래 사이트에 있는 기능은 전부다 들어가야 합니다. 회원 가입, 회원 관리, 결제 연동 등이 있고요. 그러면서 원활한 강의 플랫폼 운영을 위해서 수강생 관리, 강의 영상 등록, 수료증 발급 등의 기능이 있어야 합니다.

<온라인 강의 사이트 대표 사례>

- 디자인 나침반

- 리베하얀 

웹진

브런치 글 이미지 6

마지막으로는 웹진을 이야기할 수 있습니다. 웹진은 개인이 아니라 편집자들이 함께 모여서 특정 주제의 기사를 주기적으로 발행하는 사이트라고 보면 됩니다. 그렇기에 블로그랑 다르게 몇 가지 기능이 추가가 되는데요.

대표적으로 구독자나 편집자 관리가 있고요. 또한 각 편집자가 발행한 글을 볼 수 있는 편집자 전용 페이지도 있어야 합니다. 게다가 광고주가 올릴 수 있는 광고 배너도 있어야 하고요.

<웹진 대표 사례>

- 바이라인 네트워크 

- 슬로우 뉴스 

동적 웹사이트를 쉽게 만들고 싶다면, 워드프레스 고려해보자

끝으로 동적 웹사이트는 콘텐츠 관리를 체계적으로 관리하기 때문에 관리자 입장에서 편하게 관리할 수 있어요. 사용자의 상호작용에 따라서 알 맞는 콘텐츠를 제공하기 때문에 더 나은 사용자 경험을 제공할 수 있습니다. 그렇다면 동적 웹사이트를 만들 수 있는 가장 효율적인 방법은 무엇일까요?

저는 단언컨대 워드프레스라고 이야기를 드리고 싶습니다. 일단 여러분이 익히 잘 알고 있는 노션이랑 구조가 유사합니디. 노션에 데이터베이스와 속성이 있다면, 워드프레스는 커스텀 포스트 타입과커스텀 필드가 있습니다. 이것을 통해서 데이터 베이스를 누구나 쉽게 구축을 할 수 있습니다. 즉 관리자 입장에서 콘텐츠 관리는 용이합니다.

다음에는 방문하는 사용자의 입장이나 비즈니스 종류에 따라서 콘텐츠를 보여주면 됩니다. 그때 이제 관련된 플러그인의 도움을 받거나 아니면 커스터마이징을 통해서 구현해야 합니다. 그렇지만 그전에 먼저 정확하고 치밀한 데이터 베이스 설계가 먼저입니다. 여러분이 익히 잘 쓰고 있는 노션처럼 말입니다. 

3
0
한상문

한상문

워드프레스 초보에서 전문가로 가는 비밀

오늘날 워드프레스는 전 세계에서 만든 사이트에서 점유율이 무려 40% 정도나 차지할 정도로 인기 있는 웹 빌더입니다. 그만큼 강의도 많고, 책도 많아서 누구나 선호하는 웹 사이트 구축 플랫폼으로 자리 잡았습니다.

하지만 초보자들 입장에서 이 워드프레스를 제대로 쓰기에는 쉽지 않습니다. 물론 영어 기반이다 보니 영어 울렁증 때문에 막상 하려고 하면 거부감이 들기도 하고요. 그래서 더 손에 안 잡히면서 어렵게 느껴지는 상황입니다. 게다가 유튜브나 강의를 보면 그냥 플러그인 설치해서 홈페이지 만드세요. 식으로 마치 아임웹처럼 워드프레스 홈페이지 제작만 알려주는 경우가 부득이하게 많은 상황입니다.

사실 워드프레스의 진가는 바로 콘텐츠를 제작하고 관리하고 공유하는 건데 말입니다.. 혹시 평소에 이런 거 궁금하지 않았나요? 왜 워드프레스로 만든 사이트는 홈페이지 말고도 블로그 / 웹진 / 플랫폼 / 쇼핑몰 / 강의 사이트 등으로 제작 종류가 다양할까요? 그것도 거의 20종류로 될 정도로 말이죠. 그래서 왜 워드프레스가 자체 개발 수준만큼 엔터프라이즈급 웹서비스를 보다 쉽고 효율적으로 만들 수 있는지 말입니다.

이제 그 비밀을 한 번 파헤치려고 합니다. 여러분이 익히 잘 알고 있는 노션 가지고 말입니다.

노션 데이터베이스란?

브런치 글 이미지 1

노션 데이터베이스란 노션의 핵심 기능 중의 하나라고 볼 수 있어요. 원래 엑셀에 있는 테이블에서 데이터베이스로 바뀌었지요. 외관상 데이터를 보여주는 테이블만 좀 이쁘게 꾸며진 것 같은데, 실상은 그렇지 않습니다. 데이터 관리가 더욱 편해졌거든요.

데이터베이스를 하나 만들고 나면, 그 데이터를 가지고 보드, 타임라인, 캘린더, 리스트, 갤러리 등으로 6개의 레이아웃을 만들 수 있어요. 게다가 그뿐인가요? 속성 값을 넣어서 내가 원하는 종류의 데이터만 잘 구분지어서 입력할 수 있지요. 게다가 표 내부에서 검색도 되고요. 내가 원하는 속성만 보여줄 수도 있고, 아니면 속성값 대로 필터링을 할 수 있어요.

그래서 노션의 가장 큰 장점은 확장성이라고 볼 수 있어요. 단순한 데이터 저장소를 넘어서, 프로젝트 관리, 고객 관리, 콘텐츠 관리가 모두 가능한 이유가 바로 이 데이터 베이스 하나에서 차곡차곡 쌓인 데이터에서 시작했을 뿐이에요.

포스트타입이란?

브런치 글 이미지 2

포스트 타입은 워드프레스가 기본적으로 제공하는 게시물의 유형을 말합니다. 말이 어렵죠? 어떤 특정 카테고리에 해당하는 데이터를 담는 그릇이라고 생각하면 돼요. 이게 바로 노션의 데이터베이스라고 보시면 돼요. 하나의 포스트 타입당 하나의 데이터베이스처럼 말이죠. 워드프레스는 이 포스트 타입을 이용해서 내가 원하는 다양한 사이트를 만들 수 있어요. 그런 사이트를 바로 동적 웹사이트라고 합니다.

포스트 타입은 워드프레스가 기본적으로 글 / 페이지만 이렇게 제공해 주는데요. 포스트타입 생성 플러그인을 사용하면 그때부터 내가 원하는 주제 가지고 포스트를 여러 개 만들 수 있어요. 그건 바로 내가 제작하는 사이트에 따라서 다르고요.

만약에 내가 강의 플랫폼을 만들면, 당연히 강의라는 포스트 타입을 만들어야겠고요. 쇼핑몰을 운영한다면, 등록하는 상품이랑 상품 주문을 관리하는 주문이라는 포스트 타입을 만들어야 할 겁니다. 

즉 워드프레스의 유연성의 비밀은 바로 이 포스트 타입에서 나옵니다. 즉 포스트 타입을 잘 설계할수록 웹사이트 구축이 빨라지고, 그만큼 홈페이지 관리도 쉬워지는 거예요.

데이터베이스와 포스트타입의 공통점

그러면 이제 데이터베이스랑 포스트 타입이랑 어떤 점이 서로 공통점이 있는지 한 번 더 깊게 알아가 볼까요? 다음의 4가지 공통점이 있습니다.

1. 구조화된 데이터 관리 : 두 시스템 모두 정보를 체계적으로 구성하고 관리하게 해 줍니다.

2. 커스터 마이징 기능 : 모두 사용자의 필요에 맞게 필드나 속성을 추가할 수 있습니다. 

3. 정보 분류 및 조직화 : 두 시스템 모두 콘텐츠를 체계적으로 분류하고 조직화하는 데 사용됩니다.

4. 데이터 입력 및 관리 : 모두 정보를 쉽게 입력하고 관리할 수 있는 인터페이스를 지정합니다.

브런치 글 이미지 3

<노션 데이터 베이스의 테이블>

일단 데이터 베이스를 한 번 뜯어보겠습니다. 데이터베이스를 들여다보면 각 데이터를 저장하는 특성을 저장하는 속성 값이 있습니다. 속성 값은 일종의 집어넣어야 하는 데이터의 성격을 표현합니다. url / 전화번호 / 다중 선택 / 선택 등의 성격을 먼저 지정해서 그것과 연관된 데이터를 저장하는 것이죠. 그러니 체계적이면서 이쁘게 데이터를 관리할 수 있는 데이터 베이스를 만들 수 있기 때문입니다.

브런치 글 이미지 4

<프로젝트 포스트 타입의 커스텀 필드 설정 화면>

그러면 워드프레스의 포스트타입을 살펴볼까요? 포스트타입은 앞서 살펴봤듯이 주기적으로 관리하는 한 콘텐츠의 카테고리에 해당하고요. 포스트 타입에서 더 나아가 커스텀 필드라는 영역이 있습니다. 이게 바로 노션의 속성값이랑 거의 소름 돋을 정도로 비슷합니다.

커스텀 필드는 워드프레스 자체 혹은 ACF라는 플러그인을 통해서 만들 수 있습니다.  이 필드가 바로 여러분이 잘 썼던 그 노션의 속성값과 일치합니다. 즉 이 필드를 통해서 텍스트, 숫자, 날짜 등의 다양한 데이터 유형을 업로드할 수 있습니다.

즉 노션은 데이터 베이스와 속성을 통해서 구조화된 데이터 관리를 하고요. 워드프레스는 포스트 타입과 커스텀 필드를 이용해서 보다 유연한 콘텐츠 조직화를 할 수 있습니다.

여러분은 이제 워드프레스 베테랑입니다.

여러분은 이미 알게 모르게 노션을 통해서 직접 데이터 베이스를 만들고, 그것을 통해서 나만의 스케줄을 관리해 봤던 경험이 다들 있을 겁니다. 그렇다면 축하합니다. 여러분은 이미 잠재적으로 백엔드 개발의 영역에 들어선 겁니다. 사실 백엔드의 핵심은 데이터를 주고받는 것이거든요. 

물론 Java Script / Php / Python 등의 개발 프로그래밍 언어를 배우지도 않았기에 코드를 사용해서 자유자재로 원하는 사이트를 지금 당장 개발을 하지 못합니다. 하지만 개발을 하는 데 있어서 코드로 커스터 마이징 해야 하는지 아니면 플러그인을 써야 하는지 이를 구분하는 눈은 키울 수 있습니다. 왜냐고요? 여러분은 이미 그 메커니즘을 간접적으로 노션을 통해서 간접적으로 이미 체득했기 때문입니다. 직접 코딩을 써야 돼서 복잡하기는 하지만, 결국 근본은 CRUD 방식을 통한 데이터 처리입니다. 

CRUD란 데이터를 만들고, 읽고, 수정해서 업데이트하고, 삭제하는 작업을 말합니다. 이미 여러분은 노션을 통해서 속성을 만들기도 하고, 지우기도 해봤을 겁니다. 이미 노션을 통해서 많이 해봤던 작업일 겁니다. 그러니 이미 워드프레스에서 베테랑입니다. 스스로 다만 몰랐을 뿐이죠.

2
0
한상문

한상문

노션과 워드프레스의 소름 돋는 공통점 - 나도 모르고 있었던 3가지

혹시 노션이랑 워드프레스가 그렇게 서로 소름 돋을 정도로 닮았다는 사실을 아시나요? 물론 겉모습으로 보기에는요. 노션은 협업과 생산성을 위한 강력한 도구이고, 워드프레스는 플러그인 기반으로 블로그나 홈페이지 제작을 하다 보니 당연히 결은 다르다고 느낄껍니다.

그럼에도 불구하고 제가 볼 때는 노션이나 워드프레스 둘 다 데이터베이스를 사용하고, 콘텐츠를 편집하고 제작합니다. 그래서 이 부분을 크게 보자면 서로 유사하게 닮아 있어요. 흠 뭐랄까? 각 툴마다 다루는 용어는 각 서비스에 맞게 다른데, 그 용어가 정의하는 뜻과 의미는 거의 소름 돋을 정도로 똑같습니다. 그렇다면 과연 노션이랑 워드프레스가 얼마나 그렇게 서로 똑 닮았는지 한 번 알아보겠습니다.

1. 블록 방식

첫 째는 바로 블록 방식이라고 보면 돼요. 쉽게 말해서 레고처럼 그냥 블록을 쌓으면 되는데요. 제가 노션을 처음 접할 때는 페이지에서 흰 화면만 있기에, 여기서 뭐 부터 해야 할지 몰랐는데요. 이때 /를 누르는 순간 블록을 여러 개 가져올 수 있습니다.

특히 헤딩이나 본문 같은 워드 형식의 블록도 있고요. 또한 데이터 베이스 기반인 셀 형식의 블록도 있습니다. 그래서 /하나만 누르면서 내가 어떤 블록을 넣는지에 따라서 노션이 데이터베이스 구조가 가득한 테이블로 만들어지거나 아니면 내 개인의 인적 사항을 기록하는 포트폴리오 홈페이지를 만들 수 있습니다. 아니면 템플릿을 가져다가 써서 수시로 내용을 기록하는 알림장으로 쓸 수 있죠.

워드프레스도 마찬가지에요. 워드프레스는 구텐베르크 에디터를 탑재하면서 부터 블록 방식으로 제작하는 방식으로 바뀌고 있어요. 과거에는 엘리멘터나 디비 등의 페이지 빌더 방식으로 제작했는데, 요즘에는 구텐베르크 에디터 가지고 만들어요. 에디터가 제공하는 블록을 가져다가 쓰면서 페이지도 만들고, 콘텐츠도 만들죠.

한 번 편집창을 살펴볼게요. 여기 편집창에서 /를 클릭하면 워드프레스 자체가 제공하는 블록이 주르륵 나옵니다. 여기서 필요한 블록을 가져다가 쓰고, 업데이트 하면 금방 홈페이지를 만들 수 있는 겁니다.

그래서 저는 워드프레스와 노션은 블록 방식인 블록을 여러 개 만들고, 쌓아가는 방식으로 산출물을 만들기 때문에 굉장히 비슷하면서 신기하다고 생각합니다.

2. 데이터 베이스 구조

다음은 데이터 베이스입니다. 데이터베이스는 쉽게 말해서 마치 여러 권의 책이 각 카테고리에 맞게 잘 꽂아진 도서관이라고 보면 됩니다. 여기서 데이터들이 행과 열로 구성되는 테이블 형태로 저장되죠.

노션의 핵심 기능이 바로 이 데이터 베이스 구조라고 봅니다. 이게 기존의 엑셀이 가지고 있는 불편함을 해결해서 더 가치가 있는거 같더라고요. 특히 속성 값이랑 필터를 통해서 테이블을 가지고 원하는 데이터를 쉽게 조회할 수 있어요.

기업이나 개인이 생산성이나 프로세스 관리를 하는 데 있어서 가장 중요한 것은 바로 인사이트 도출이라고 생각하거든요. 그렇게 하기 위해서는 데이터를 내가 원하는 조건에 맞게 가공해서 보는 게 필요하다고 생각해요.

여기서 노션 같은 경우는 기존에 만든 데이터 베이스를 원본으로 저장한 다음에 그 데이터베이스를 내가 원하는 곳에 링크드인 데이터베이스로 뿌리면, 원본을 훼손시키지 않는 상태에서 내가 원하는 관점대로 데이터를 무한하게 볼 수 있어요. 게다가 데이터 베이스를 보는 방식이 기존의 테이블 말고도 달력, 간반 차트, 갤러리 형식으로 정말 다채로우면서도 섹시합니다.

워드프레스도 마찬가지입니다. 사실 워드프레스의 꽃은 바로 콘텐츠를 저장하고 관리하는 데 있다고 생각해요. 신기한게 뭐나면 워드프레스 관리자 페이지에서 하나의 포스트 타입을 만들고요. 거기서 쌓아야 하는 데이터 타입을 저장하고 나면, 그것을 프론트 영역에다가 보여주면 되거든요.

정말 놀라운 보여줄 조건과 패턴을 구성한다음에 프론트 엔드 에다가 보여줄 영역만 한 번만 설정하면 되고요. 나머지는 그냥 백엔드에서 만든 커스텀 포스트에다가 콘텐츠 제목이랑 필드 값만 입력하면 되는 겁니다. 그러면 그 입력한 데이터가 프론트엔드에 그대로 구현되요.

3. 유연한 데이터 연결

마지막의 공통점은 바로 자동화 마케팅을 통한 유연한 데이터 연결에 있습니다. 특히 오늘 같이 급하게 변하는 비즈니스 세계에서는 데이터 연동은 엄청난 장점을 가져옵니다.

잘 알고 있 제이피어나 메이크를 통해서 고객의 설문폼을 노션을 통해서 받을 수 있고요. 또한 워드프레스를 통해서 고객이 전달한 문의사항을 노션으로 받을 수 있습니다.

또한 노션으로 작성하는 콘텐츠를 워드프레스에다가 옮길 수도 있어요. 여기다가 API 지원을 통해서 데이터 연동이 더욱 자유로워질수록 이 힘은 더욱 막강해집니다.

그래서 사용 시간을 많이 절약하고, 더욱 전략적으로 마케팅 캠페인을 설계할 수 있어요.

노션을 알면 워드프레스는 쉽고, 재밌어진다.

노션은 이미 콘텐츠 관리랑 협업과 확장성에 각광을 받는 생산성 도구입니다. 이 도구를 잘 다룰수록 워드프레스는 더욱 쉬워질 수 밖에 없습니다. 단순히 홈페이지 제작을 하는 것이 아니라 커스텀 포스트 타입을 통해서 다양한 콘텐츠 그릇을 만드는 작업은 노션의 데이터베이스를 구축하는 작업이랑 직관적으로 소름 돋을 정도로 똑같기 때문입니다.

그러니 노션에서 만드는 데이터 베이스 하나가 워드프레스에서 흔히 부르는 하나의 포스트 타입이라고 이해를 하는 순간부터 워드프레스를 통해서 앤터프라이즈급의 사이트 제작이 가능하다는 것을 눈으로 실감할 것입니다.

게다가 노션을 통해서 데이터베이스를 구축하고, 어떤 데이터 속성이나 값을 넣는지가 익숙해지는 순간부터 개발을 할 때 커스터마이징을 해야 하는지 아니면 플러그인을 통해서 해야 하는지 이를 구분하는 제3의 눈이 생깁니다. 그때부터는 워드프레스 자체로 사이트를 만들 때 흥미를 가질 수 밖에 없다고 봅니다.

1
0
한상문

한상문

워드프레스 숨겨진 민낯 드러내다 - 3가지 잘못된 인식 고발과 해소

분명 워드프레스는 나만의 사업 아이템을 만들 수 있는 좋은 도구입니다. 플러그인, 테마, 커스터마이징을 통해서 비싸게 자체 개발하지 않고도 쇼핑몰, 강의 사이트, 블로그, 웹진까지 굉장히 쉽게 만들 수 있습니다. 정말 경이롭다고 볼 수 있어요.

그런데 말입니다. 워드프레스 전문가인 제 입장에서 볼 때는 이 매력적인 도구를 더 잘 쓸 수 있는데, 잘못된 인식이 있어서 도구를 제대로 못쓰는 현실이 안타깝더라고요.

그래서 왜 저는 정상적으로 생각하는 이 현상을 잘못됬다고 생각하는지 저의 의견을 통해서 명백하게 밝히고, 왜 그렇게 인식할 수 밖에 없는지 알려드립니다. 그 이후에는 더 쉽고 직관적으로 워드프레스를 이해하는 접근 방법에 대해서 안내해드립니다.

잘못 쌓인 인식 3가지

  • 돈 벌기 좋은 부업 수단

  • 애드센스로 패시브 인컴 벌기 좋은 도구

  • 코딩이 필요 없는 노코딩툴

1번째 돈 벌기 좋은 부업 수단

물론 워드프레스는 기본 홈페이지랑 세부 페이지 몇개만 만들면 사이트 한 개당 200 이상 벌정도로 단가는 쌘 편입니다.

게다가 쇼핑몰이나 강의 플랫폼 까지 만들줄 알면 네이버 블로그 대행보다는 단가로 비교가 안됩니다.

그래서 많은 강사들이 홈페이지 2~3개 정도 만들어서, 부업 이상으로 돈 벌라고 합니다. 하지만 사실 그 이야기는 몇 년전에는 통하는 이야기였습니다.

2~3년 전에는 그랬습니다. 요즘 들어서는 워드프레스 강의가 많아지면서 보다 많은 분이 시장에 진출하게됬습니다. 그래서 블루오션 보다는 레드오션에 가깝습니다. 강사가 알려준대로 하면 다 될것 같습니다. 하지만 생각보다 그렇지 않습니다.

플러그인도 지속적으로 공부해야 하며, 코드도 알아야 하고, 워드프레스 자체에 대해서 구조적으로 알아야 합니다. 그래서 고객이 던지는 빈약한 기획서에 대해서 이리저리 질문을 던지면서 완벽한 사이트를 만들게 노력해야 합니다. 따라서 부업으로 누구나 쉽게 고액 벌기에 좋은 도구로 저는 워드프레스를 절대 추천드리지 않습니다. 제 친구가 그냥 좋아보여서 한다고 하면 뜯어 말리고 싶을 정도입니다.

2번째 애드센스로 패시브 인컴 벌기 좋은 도구

워드프레스는 대표적으로 블로그 하기 최고의 플랫폼입니다. 검색엔진 최적화 즉 SEO에 대한 디테일한 설정을 SEO 관련 플러그인을 통해서 쉽게 할 수 있기에 애드센스로 수익 벌기 좋다고 소개하는 분이 몇 분 있습니다.

잠깐 매일 매일 고생해서 글만 쌓아두면, 내가 쉬거나 잠을 잘 때 돈이 자동으로 들어오기 때문에 되게 매력적입니다. 하지만 생각보다 디지털 노가다에 가깝습니다. 게다가 서로 자기 글을 공유하지 않습니다.

네이버 카페 가보면 알겠지만, 매일 1포 했다고 성과 자랑만 하지, 구체적으로 자기 글의 링크를 공유하지 않습니다. 서로의 글을 공유하는 순간, 남이 내 것을 따라하거나 공격을 당하기 때문입니다.

성장은 서로 간에 대화나 의견을 주고 받는 피드백을 통해서 일어납니다. 하지만 자기 글을 절대 공유하지 않는 쉬쉬 하는 문화는 결코 성장하는데 바람직하지 않습니다.

게다가 애드센스로 수익 버는 행위는 구글이 추구하는 가치관을 벗어납니다. 구글 입장에서는 독자가 읽기 좋은 콘텐츠를 작성하고, 공유하는 가치를 추구합니다. 그게 바로 검색엔진의 본질이니까요. 따라서 진짜 SEO는 양질의 콘텐츠를 작성하고, 그 글을 널리 알리면서, 나라는 존재를 알리는겁니다.

워드프레스 블로그 만들어서 자동으로 돈 들어오는 애드센스 수익 벌자는 것은 왠만하면 추천드리지 않습니다.

3번째 코딩이 필요 없는 노코딩툴

마지막으로 일부 몇 몇 분은 워드프레스 자체가 노코딩툴이라고 합니다. 사실 이는 절반은 맞고, 절반은 틀렸습니다. 제작 범위에 따라서 그렇습니다.

단순하게 랜딩 페이지나 회사 홈페이지를 제작할 경우에는 아임웹, 프라이머, 웹플로우 정도 수준의 웹 빌더를 통해서 제작하기 때문에 노코딩툴은 맞습니다. 이럴때 주로 사용하는 빌더가 바로 디비나 엘리멘터입니다. 그래서 홈페이지 제작 툴로 인식하는 것이죠.

하지만 워드프레스는 홈페이지 제작 툴이 아니라 콘텐츠를 관리하고 발행하는 콘텐츠 관리 시스템입니다. 게다가 워드프레스가 가지는 진정한 강점은 바로 플러그인과 커스터마이징을 통한 무궁무진한 확장과 자유도에 있습니다. 예를 들어서 이 기능 가능할까? 하는 의문을 실제로 만들어주기 때문입니다.

그렇게 하기 위해서는 플러그인에 대한 이해는 물론 어느정도 코드를 만지면서 커스터마이징을 할 줄 알아야 합니다. 따라서 비즈니스에 필요한 강의 사이트나 플랫폼 같은 경우 일부 인플루언서들이 잘된 테마나 플러그인을 통해서 개발할 수 있다고 하지만, 실상은 그렇지 않습니다. 뭔가 겉으로는 그럴 듯해보이지만, 실제로는 느리거나 운영하기 어렵습니다.

즉 워드프레스를 그냥 노코딩툴로 인식해서 제작할 경우 향후 커스터마이징도 어려울 뿐더러 유지보수도 점점 어려워집니다. 게다가 우커머스 같은 경우는 해외 기반이기보다는 우리나라 정서랑 맞지 않는 편입니다. 그래서 코드 스니펫이나 다른 플러그인의 도움을 받아서 우리나라 정서에 맞춰야 할 필요도 있죠.

하다 못해 최소한 CSS도 만질 줄은 알아야 하는데요. 기본적으로 플러그인을 통해서 삽입한 게시판이나 모바일 같은 경우 디자인을 수정해야할 필요가 종종 생기는데요. 이럴때는 반드시 CSS 코드를 이용해서 수정해야 합니다.

그렇기에 저는 워드프레스는 CSS 코드 수정이랑 커스터마이징을 하기 때문에 코딩이 필요 없다는 것은 거짓이고, 부분적으로 코딩이 필요하다고 생각합니다.

원리를 모르고 방법만 생각했다.

그렇다면 왜 이렇게 워드프레스에 대해서 잘못된 인식이 눈덩이처럼 불어났을까요? 다들 HOW TO 만드는 방법에 대해서 생각해서 그렇습니다. 유튜브에서는 다들 워드프레스 1시간 짜리 영상을 만드면서 이렇게 따라서 만들면 누구나 홈페이지는 쉽게 만듭니다. 그리고 그런 강의가 지금 계속 쏟아지고 있습니다. 막상 들어보면 다 별거 없습니다.

비즈니스 구현에 필요한 사이트를 개발 할 때 그냥 플러그인 몇 개 설치하거나 기능이 들어간 테마를 사용하면 된다고 말합니다. 그러면 쉽게 해결된다고 말이죠. 이는 전적으로 워드프레스 가지고 하는 방법에만 초점을 맞춰서 그렇습니다. 원리를 알면 절대 그렇게 쉽게 말할 수 없습니다.

전적으로 워드프레스를 그냥 도구로 인식해서 그럽니다. 그러니 홈페이지 제작해서 부업으로 돈 벌기 좋은 도구로 말하는 거고, 애드센스 수익 버는 용도의 도구로 말하고, 플러그인만 설치해서 사회가 원하는 사이트를 금방 만드니 코딩이 전혀 없는 노코딩툴이라는 인식이 강하게 박히는 겁니다. 하지만 실상은 그렇지 않습니다. 그래서 저는 워드프레스를 다루는데 있어서 사이트를 제작하는 방법보다 워드프레스가 가지는 원리가 더 중요하다고 생각합니다.

반도체의 전설인 짐 켈러가 오늘날 반도체 마이스터가 된 이유가 무엇일까요? 방법만 생각해서 아닙니다. 반도체를 제조하는 8대 공정 말고도, 반도체 자체에 대한 원리와 본질에 집중을 했기 때문입니다.

워드프레스를 노션에 빗댄다면 어떨까?

저는 워드프레스가 주는 자유도와 확장에 깊은 감동을 하였고, 제가 깨달았던 것들을 더 많은 사람들에게 나눠주고 싶었습니다. 특히 워드프레스가 주는 기능을 최대한 직관적으로 이해시키고 싶었습니다. 제가 처음 워드프레스 접할 때 플랫폼까지 개발한다는 것을 느끼고, 홀로 소름이 돋았거든요. 그때부터 워드프레스는 저에게 홈페이지 그 이상의 의미로 다가왔습니다.

그래서 어떻게 하면 워드프레스를 가장 직관적으로 이해시킬 수 있을까? 하는 고민을 했습니다. 그 해결책은 너무 간단했습니다. 바로 노션이었습니다. 노션은 비즈니스를 하는 사람이면 누구나 한 번쯤 써봤을법한 스케줄 관리 도구입니다. 그리고 점점 그 자유도 덕분에 인기도 많아지고 있죠.

저는 그 노션의 편리함과 체계적인 면이 워드프레스랑 완전 거의 소름돋을 정도로 똑같다고 생각합니다. 실제로 제가 홈페이지 제작할 때 노션에 빗대서 워드프레스를 설명하니까, 고객들이 바로 워드프레스의 원리를 직관적으로 이해합니다. 그래서 알아서 스스로 콘텐츠를 업로드 하고, 부족한 점을 저에게 바로 이야기 합니다. 저는 제가 고객을 통해서 느꼈던 이 신비하고 기이한 경험을 기꺼이 나누고 싶습니다.

저는 이제 오늘 글을 끝으로 더는 워드프레스 업계에 대해서 비판적인 메시지를 던지지 않으려고 합니다. 또한 워드프레스에 대해서 여러분이 잘못 생각했던 부분이 잘못되었다고 비판하고 싶지도 않습니다.

대신 제가 익혔던 경험과 관점을 소개하고 싶어요. 그렇게 해서 우리나라에서 워드프레스가 진짜 주는 그 무궁무진한 자유도와 확장성을 이 글을 읽는 모든 분이 이루었으면 좋겠습니다.

2
0