종종 놀라운 웹사이트를 마주하게 됩니다. 물론 디자인도 아름답고, 사용자 경험도 좋지만 진짜 눈이 반짝반짝 빛나는 경우는 바로 동적인 기능이 탑재된 웹사이트라고 할 수 있습니다. 플랫폼, 강의 사이트, 매거진, 디렉토리 사이트, 커뮤니티 등등의 다양한 콘텐츠 기반 사이트 말입니다.
이런 사이트를 막상 제작하려고 하면 무조건 당연히 비용이랑 시간은 많이 드는 거 아니야? 이렇게 생각할 수 있습니다.
하지만 아닙니다. 워드프레스를 이용해서 기능 설계 및 적당한 커스터마이징을 잘 하면, 충분히 잘 만들 수 있어요. 플러그인이나 테마만 덕지덕지 붙이면 되는 것 아닌가요? 그것도 아닙니다. 그냥 익숙하게 노션 쓰듯이 사이트에 필요한 데이터 베이스 설계를 먼저 하고요. 그다음에 비즈니스 기능에 맞게 개발을 들어가면 됩니다.
동적 웹사이트란?
동적 웹사이트는 사용자와의 실시간 상호작용을 통해서 콘텐츠가 변경되는 사이트를 말합니다. Maria DB나 Mong go DB에서 저장된 데이터를 사용자의 입력이나 요청에 따라서 불러와서 다이나믹하게 콘텐츠를 보여주는 것을 말합니다.
- 동적 웹사이트의 특징
워드프레스를 통해서 사이트를 잘 설계를 하면, 워드프레스 관리자에서 원하는 콘텐츠를 업로드하면, 해당 콘텐츠를 구조적으로 잘 보여줄 수 있어요. 게다가 사용자 상호작용에 따라서 콘텐츠를 보여주게 할 수도 있고, 안 보이게 할 수 있습니다.
- 동적 웹사이트작동 예시
예를 들어서 고객이 상품을 찜하기 할 경우, 찜한 상품 리스트를 내 개인 계정 페이지에서 볼 수 있고요. 블로그에서 개재된 매거진 리스트에서 내가 필요한 카테고리 별로 매거진을 조회할 수 있습니다.
또한 고객이 원하는 키워드를 검색할 경우, 검색결과 리스트가 나오게 할 수 있어요. 즉 사이트 방문자와 계속 호흡을 하는 사이트라고 보면 됩니다. 즉 비즈니스에 필요한 모든 기능이 결국은 다이나믹하게 콘텐츠를 제공한다고 볼 수 있습니다.
정적 웹사이트 VS 동적 웹사이트
그러면 흔히 접하는 정적 웹사이트와의 비교를 통해서 동적 웹사이트를 더 자세히 알아보겠습니다. 웹사이트는 크게 정적 웹사이트와 동적 웹사이트로 나눌 수 있는데요.
먼저 정적 웹사이트는 움직이지 않는 상태를 말합니다. 즉 고정된 콘텐츠를 제공하며, HTML 파일로 구성되어 있습니다. 그래서 모든 사용자에게 차별 없이 동등한 내용을 제공합니다. 운영 중에 내용을 변경할 사항이 생긴다면 일일이 찾아서 내용 변경 및 디자인도 반영을 해줘야 합니다. 일반적으로 보이는 회사소개 홈페이지나 랜딩페이지가 대표적인 예시라고 볼 수 있습니다.
반면에 동적 웹사이트는 저장된 데이터베이스를 불러오는 방식으로 작동합니다. 그래서 사용자와 상호작용을 통해서 실시간으로 콘텐츠가 사라지거나 업데이트되는 방식입니다. 동적 웹사이트는 데이터 베이스와 서버 사이의 데이터를 활용하는 특징을 가지고 있습니다. 그래서 내용을 수정하거나 업데이트만 관리자에서 하면 되고, 그 내용은 바로 프론트 엔드에서 반영됩니다.
동적 웹사이트 제작 사례
그러면 본격적으로 현재 오늘날 한국에서 동적으로 잘 구현된 사이트가 어떤 것들이 있는지 한 번 종류별로 살펴보겠습니다.
(참고로 워드프레스 홈페이지 예시 위주로 살펴보겠습니다.)
전자 상거래 사이트
잘 알고 있는 아마존이나 이베이 같은 전자 상거래 사이트가 동적으로 만든 웹사이트의 대표 사례입니다. 동적으로 적용된 기능으로는 제품 나열 및 제품 검색 기능도 있지만, 사용자마다 리뷰나 댓글을 남길 수 있고요. 또한 가입한 회원의 등급에 따라서 상품을 보이게 하거나 안 보이게 할 수 있습니다. 여기다가 필요한 기능을 더 추가할 수 있습니다.
<전자상거래 사이트 대표 사례>
- 클린베딩
커뮤니티 사이트
커뮤니티 사이트는 주로 아이보스나 이오플래닛 같이 사람들이 모여서 행동하는 플랫폼이라고 할 수 있습니다. 자기가 주로 관심이 있을 법한 주제를 가지고 소통하는 형식입니다. 주된 기능에는 당연히 댓글, 게시판, 회원관리가 있습니다. 그래도 주목해야 할 점이 하나 있는데요. 그건 바로 네이버 블로그처럼 자기가 직접 포스팅을 하는 방식입니다.
<커뮤니티 사이트 대표 사례>
- 미라클 클럽
- 모두의 연구소
온라인 강의 사이트
다음은 클래스 101이나 패스트 캠퍼스 같은 강의 사이트입니다. 요즘 들어서 온라인 강의의 수요가 점점 오르고 있는 만큼, 강의 사이트 제작은 점점 많아질 것으로 보입니다. 강의 사이트 같은 경우는 들어가야 하는 기능이 생각보다 많은데요. 먼저 앞서 살펴본 전자 상거래 사이트에 있는 기능은 전부다 들어가야 합니다. 회원 가입, 회원 관리, 결제 연동 등이 있고요. 그러면서 원활한 강의 플랫폼 운영을 위해서 수강생 관리, 강의 영상 등록, 수료증 발급 등의 기능이 있어야 합니다.
<온라인 강의 사이트 대표 사례>
- 디자인 나침반
- 리베하얀
웹진
마지막으로는 웹진을 이야기할 수 있습니다. 웹진은 개인이 아니라 편집자들이 함께 모여서 특정 주제의 기사를 주기적으로 발행하는 사이트라고 보면 됩니다. 그렇기에 블로그랑 다르게 몇 가지 기능이 추가가 되는데요.
대표적으로 구독자나 편집자 관리가 있고요. 또한 각 편집자가 발행한 글을 볼 수 있는 편집자 전용 페이지도 있어야 합니다. 게다가 광고주가 올릴 수 있는 광고 배너도 있어야 하고요.
<웹진 대표 사례>
- 슬로우 뉴스
동적 웹사이트를 쉽게 만들고 싶다면, 워드프레스 고려해보자
끝으로 동적 웹사이트는 콘텐츠 관리를 체계적으로 관리하기 때문에 관리자 입장에서 편하게 관리할 수 있어요. 사용자의 상호작용에 따라서 알 맞는 콘텐츠를 제공하기 때문에 더 나은 사용자 경험을 제공할 수 있습니다. 그렇다면 동적 웹사이트를 만들 수 있는 가장 효율적인 방법은 무엇일까요?
저는 단언컨대 워드프레스라고 이야기를 드리고 싶습니다. 일단 여러분이 익히 잘 알고 있는 노션이랑 구조가 유사합니디. 노션에 데이터베이스와 속성이 있다면, 워드프레스는 커스텀 포스트 타입과커스텀 필드가 있습니다. 이것을 통해서 데이터 베이스를 누구나 쉽게 구축을 할 수 있습니다. 즉 관리자 입장에서 콘텐츠 관리는 용이합니다.
다음에는 방문하는 사용자의 입장이나 비즈니스 종류에 따라서 콘텐츠를 보여주면 됩니다. 그때 이제 관련된 플러그인의 도움을 받거나 아니면 커스터마이징을 통해서 구현해야 합니다. 그렇지만 그전에 먼저 정확하고 치밀한 데이터 베이스 설계가 먼저입니다. 여러분이 익히 잘 쓰고 있는 노션처럼 말입니다.
