워드프레스, 유료 테마 적용, Be테마 사용후기-1편
웹코딩이라는 1도 모르는 디자이너가 워드프레스로 홈페이지 만드는 이야기!
이 글은 필자가 HTML과 CSS에 대한 공부를 하기 이전에 경험했던 내용을 정리한 글입니다. 워드프레스를 기반으로 - 테마를 적용하고 그걸 커스터마이징해서 원하는 웹사이트를 만들어나갔던 경험이었죠. 그 과정에서 정리된 내용들에 대해 이야기해보도록 하겠습니다. 과거에 썼던 글이고 예전에 기본적인 웹 공부를 하기 전에 썼던 글이라, 부족한 부분이 많습니다. 추후 워드프레스에 대한 공부가 끝나면 새로운 글을 추가할 예정입니다.
워드프레스는 기본적으로 개발자들이 쓸만한 기능들을 많이 담고있는 시각화된 웹 구축 플랫폼입니다. 여러 기능들을 소스형태로 그대로보여주는게 아니라, 시각화된 형태로 보여준다는 점. 그리고 개별기능들을 구독하는 플러그인형태로 만들어 배포 / 연결할 수 있다는 점에서. 게임 모딩을 하는것과 비슷한 개념으로 생각을 하시면 좋을것같습니다. 여러개의 모드를 받아서, 기존의 게임 내에서 구현할 수 없었던 기능을 구현하는것과 비슷한 거라고 볼 수 있죠
위의 시안들은 블로그용으로 쓰이는 무료 테마로 만들어본 시안들입니다. 기본적으로 매우 제한된 규격을 갖고있기 때문에 원하는 모양을 내기도 힘들고, 그 편집 과정조차 굉장히 불친절한 구조를 갖고있는 경우가 대부분이죠. 워드프레스 유저들이 결국에는 유료스킨으로 향하게된다는게 괜한 이야기는 아닌 것 같습니다.
-
기본적으로 워드프레스는 여러 무료 스킨 테마들을 제공하지만. 그런 테마들이 가지는 단점도 명확합니다.
1) 무료 테마들은 우리가 일반적으로 원하는 디자인을 만들어내기엔, 너무 단순하거나 퀄리티가 떨어진다.
2) 무료 테마는 개별 페이지를 내가 원하는대로 편집할 수 없고, 페이지별 편집기능이 매우 불친절하다.
3) 기본적으로 개발툴이다보니, HTML과 CSS, 웹개발에 대한 개념이 없는 사람은 거의 사용이 불가능하다.
https://www.youtube.com/watch?v=8kAGSKVM3eo
제가 결국 Muffin 사의 Betheme라는 워드프레스 테마 + 에디터를 구매하게된것도 그런 이유에서입니다. 레이아웃에대한 편집을 그나마 시각적으로 보여주는데다. 다양한 웹사이트 예제들. 튜토리얼들이 남아있으니 그걸 기반으로 편집하는게 훨씬 더 빠르더군요. HTML을 지금와서 하나하나 배우기엔 너무 어려운데다. 실용성도 떨어지기때문에. 일단 제작할 수 있는 형태를 추구해본거죠. 물론 이런 워드프레스 기반 추가 플러그인을 구매한다해서. 문제가 바로해결되는 것도 아닙니다. 하나하나. 이걸 어떻게 응용해서 - 원하는 구조를 만들어낼 수 있는지. 개별 기능을 파고들어가보고, 편집해봐야하거든요.
이게 워드프레스의 관리자 화면입니다. 개별 페이지를 만들고, 개별 페이지의 정보를 정리하고, 그걸 다시 메뉴로 연결해야합니다. 물론 개별 페이지들에대한 레이아웃도 하나씩 다 수정해줘야하죠. 추가적인 에디터나 테마를 깔지 않는다면 - HTML 코딩을 통해 페이지에 들어갈 오브젝트를 하나하나 추가해야합니다. 일반인 기준에선 한번 해보면 바로 멘붕에 빠지실겁니다. 욕나와요.
Betheme를 설치한 이후에 나오는 레이아웃 규격들. 물론 저게 나온다고해서 바로 문제가해결되는건 아닙니다. 자체규격. 이란 말이 있잖아요. 워드프레스가 자체적으로 제공하는 방법과는 별개로. 얘가 컨트롤할 수 있는 영역이 다르고. 실제로 그게 어떻게 화면으로 나올지는 까고 들어가봐야 안다는 이야기입니다 (...)
-
그렇게 공부하고, 시행착오 겪어가면서 나온게 아래의 시안들입니다... 후
실제로 사용해본 결과. 실제 사용에 필요한 구조나, 결과치를 내기까지는 하루정도의 시간이 걸리더군요. 그 과정에서 여러 시행착오를 겪긴 했지만. 워드프레스의 설치나 세팅 / 에러해결 / 관리자모드에 대한 확인부터 시작해서. 무료 스킨을 통해서 맨땅에 헤딩하고. 유료스킨을 찾아보다가, 한가지 테마에 대해서 공부하고. 실제 사용을 하게되기까지. 약 이틀정도의 시간이 걸렸으니, 그리 느린것만은 아니었습니다. 다만 이런 공부의 영역 자체가 디자이너의 영역이라기보다는, 개발자에 가까운 기능들이 많고. 익숙치않은 개념과, 각기 다른 플러그인들의 사용법 / 혼용법을 공부하느라 쓸데없는 고생을 더 많이하게되었던 것 같네요.
기능 하나가 늘어갈때마다 그걸 구현하기위해 정말 온갖 애를 쓰는데. 테마 자체가 그런 기능을 지원하는지부터 찾아야하더군요 그게 테마 내에선 안된다면 - 타 플러그인을 찾아서 해봐야하고. 그 기능이 기존에 쓰는 테마와 호환성을 가질 수 있는지를 알아야하구요. 대부분 개발자들이 만든 플러그인이 대부분이라 - 직관성도 엄청 떨어지는 UI를 가진 플러그인들에서. 내가 원하는건 엄청 단순한 기능인데 그걸 이렇게 복잡하게 풀어놓았나하는 빡침과 스트레스가 연속으로 다가왔습니다(...)
작업하는 내내 마주한 솔직한 심정웹코딩이나 웹개발을 제대로 알지 못한 상태에서는정말 할만한 짓이 못되더라고요. 수많은 정보를 새로 만들어서. 하나하나 연결하는것만 해도 정신이 없는데. 그런 진행이 직관성이 많이 떨어지는 형식이다보니. 기능을 찾아서 적용하더라도. 그게 원하는대로 나왔는지를 보려면 또다시 개별 페이지를 새로고침해야하는. 불편함과 답답함의 연속이었습니다.
이번에 진행한 공부 / 시행착오를 통해서 느꼈던것들은 다음과 같습니다.
1) 기획자로서의 사고와 개발적인 전반적 이해가 없다면, 웹사이트 구축은 포기하는게 낫다.
2) 유료테마던 뭐든, 결국에는 HTML과 CSS에 대한 이해를 하고있어야 원하는 결과를 낼 수 있다.
3) 한국에서만 통용되는 - 한국적인 디자인이란게 있고. 그 대표적 사례중 하나가 '게시판'이다.
-
게시판의 경우 Kboard라는 플러그인을 통해 구현을 했는데. 원하는 정보 테이블이 나오지않거나, 내용을 편집하는게 불가능해서. 이 부분만 개발자의 도움을 받거나, 아예 다른 게시판 플러그인을 고민해보아야할것같다는 생각을 하고있습니다. 새벽 여섯시까지 밤을 몇번 새긴 했지만, 그래도 원하는 결과가 얼추 나온것 같아 다행입니다.
2편에서 계속
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
