워드프레스 4가지요소가 지루하고 따분함을 벗어 나게 합니다.

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

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

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

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

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

사용자

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

관리자

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

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

 1. 커스텀 포스트 타입 

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

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

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

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

2. 커스텀 필드

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

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

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

3. 쿼리 설정

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

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

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

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

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

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

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

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

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

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

동적 웹사이트의 전망

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

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