brunch

You can make anything
by writing

C.S.Lewis

by oksambari Jan 07. 2022

#9-0. 원페이지 웹사이트 만들기

워드프레스 사이트 따라 만들기

웹사이트를 만들 때 퍼블리싱 전에 해야 할 중요한 과정은 내 콘텐츠를 가지고 어떻게 보일지 기획하고 디자인을 하는 것입니다. 저도 이 부분은 전문이 아니기에 매번 검색 엔진을 활용해서 참고할만한 레이아웃들을 찾아보곤 하는데, 그동안 잘 찾아보지 않은 좋은 사이트를 하나 알게 됐네요. 

https://webflow.com/templates 


제 생각에는 워드프레스의 CMS로서의 장점을 활용하면서 어떤 사이트를 만들고자 할 때, 이런 템플릿 사이트에서 디자인을 참고하는 것도 좋은 방법이 될 것 같습니다. (직접 사이트를 만드는 경우를 가정. 물론 전문가가 하는 건 차이가 있겠지요) 트렌드에 맞는 디자인도 계속 업데이트될 뿐 아니라 내가 만들 사이트의 분야별로 가이드(어떤 콘텐츠들을 보강할지)를 얻을 수 있습니다. 최종적으로는 마음에 드는 레이아웃이 있다면 이걸 목표로 사이트를 제작하는 겁니다. 


최근에는 화면을 보면서 페이지를 편집하는 방식의 페이지 빌더가 인기를 끌고 있습니다. Divi, Elementor와 같은 빌더가 대표적이고 테마마다 자체 개발한 방식을 적용한 경우도 있습니다. 유튜브나 기타 워드프레스 관련 가이드를 한 번씩 검색을 하다 보면 이 빌더들을 활용해서 쉽게 사이트를 제작할 수 있다는 걸 알려 주던데, 요소 하나씩 넣어보고 구축을 바로 시작해서는 딱 내가 아는 만큼 페이지 빌더의 기본 요소들 몇 개를 넣어서 제작하는 사이트밖에 결과가 나오기 어려울 겁니다. 마치 건축을 하는데 일단 벽돌부터 쌓는 것이죠. 제 생각에는 만약 이 빌더의 특징을 어느 정도 파악을 했다면 각 빌더에서 제공하는 템플릿(미리 빌더를 활용하여 제작된 한 덩어리)을 활용하는 게 제가 보기엔 현실적으로 가장 좋은 방법 같습니다.  

https://elementor.com/library/ 

https://www.elegantthemes.com/layouts/  (※ 이 외 디비 관련 템플릿 시장이 따로 존재)




짧게 정리하면 이렇습니다. 워드프레스로 웹사이트를 만들고자 한다면, 

우선 사이트에 들어갈 충분한 콘텐츠(텍스트, 이미지 등)가 있어야 하고, 

그걸 토대로 실제 어떻게 배치를 하고 어떻게 보일지 계획이 서야 합니다. 

이때 웹 템플릿이나 테마의 데모들의 구조를 참고하면 좋습니다. 

그다음 그걸 목표로 또는 템플릿을 활용해서 사이트를 제작합니다. 




서론이 길어졌는데요, 이번에 따라 해 볼 사이트는 원페이지 형태의 레스토랑 소개용 템플릿입니다. 

https://yonk-template.webflow.io/   

이번에는 이걸 디자인이라 가정하고 워드프레스 환경에서 한 번 따라 제작을 해 봤습니다. 


 


참고로, 원페이지 사이트의 특징이라고 한다면, 메뉴를 클릭하면 페이지 이동 없이 연결된 섹션의 콘텐츠로 이동해서 볼 수 있다는 부분일 겁니다. 그러기 위해서 소소하지만 몇 가지 알아야 할 부분들도 같이 정리를 해 보겠습니다. 




계속... 



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari