워드프레스, 유료 테마 적용, Be테마 사용후기-2편
웹코딩이라는 1도 모르는 디자이너가 워드프레스로 홈페이지 만드는 이야기!
이 글은 필자가 HTML과 CSS에 대한 공부를 하기 이전에 경험했던 내용을 정리한 글입니다. 워드프레스를 기반으로 - 테마를 적용하고 그걸 커스터마이징해서 원하는 웹사이트를 만들어나갔던 경험이었죠. 그 과정에서 정리된 내용들에 대해 이야기해보도록 하겠습니다. 과거에 썼던 글이고 예전에 기본적인 웹 공부를 하기 전에 썼던 글이라, 부족한 부분이 많습니다. 추후 워드프레스에 대한 공부가 끝나면 새로운 글을 추가할 예정입니다.
1편 링크
https://brunch.co.kr/@clay1987/84
저번 작업에 이은 워드프레스 + Betheme 기반 홈페이지 제작기입니다. 사실 첫 작업에는 뭐가 뭔질 모르니까. 하나하나 써보고, 튜토리얼 찾아보고, 정리하는게 대부분의 업무였지만. 이후로는 그냥 노가다의 연속에 가까웠습니다. 그만큼 개념적으로 많이 익숙해지기도 했다는 거고. 일주일 정도 공부한것만으로도 충분한 기능을 만들어낼 만큼 - 난이도가 높지 않다는 얘기겠죠.
1. 워드프레스 기본 구조에 대한 이해
워드프레스 기반 홈페이지 제작은 기본적으로 - html을 다룰줄 모르는 사람이라면. 유료테마를 구매하고서, 그 테마의 기능을 배워보면서 실제 사이트를 하나 만들어보는게 가장 빠를겁니다. 저도 아주 기본적인 태그나, html 문서구조 정도의 지식만 갖고있었으니 - 다른 디자이너분들도 마찬가지일겁니다. 한글 기반 워드프레스 튜토리얼 부터 찾아나가면서 맨땅에 헤딩. 처음엔 좀 힘겨워도 며칠정도면 다 배웁니다. (추후에 제가 좀더 배우게 되면 워드프레스 관련 정리본도 올려봐야겠네요)
워드 프레스 관련 튜토리얼 영상
https://www.youtube.com/watch?v=Fj6UeRjS4D4
저는 맨땅에 헤딩하는 느낌으로 워드프레스 기능을 하나하나 검색해봤지만. 나중에 찾아보니 이런 '잘 정리된' 튜토리얼 영상들이 있더군요. 추후에 워드프레스를 배우려고 하신다면 미리 참고해보시는것도 좋을것 같습니다.
제임스 K 님의 워드프레스 기초제작 강의
https://www.youtube.com/watch?v=cCMnkr6cTeU
저는 제임스 K 라는 웹디자이너 프리랜서분의 영상을 기반으로 입문을 시작했습니다. 빠르고 간결하게 내용을 잘 알려주셔서, 기본 설치와 편집까지 기본적인 개념을 익힐 수 있었네요. 다만 이분의 튜토리얼은 무료테마를 기반으로 진행되었기 때문에. 실제 제가 만들려는 홈페이지의 구조에는 맞지 않아서 - 한계에 봉착할 수 밖에 없었습니다. 그래서 외국 어셋 사이트에서 유료테마를 검색했죠.
2. 테마구입 & 테스트
https://themeforest.net
워드프레스 테마는 영어가 기본적으로 좀 되신다면 - 구글링을 통해 유료테마들 중에 튜토리얼이나, 관련자료가 많은 테마들 중에 하나를 선택하는게 제일 좋습니다. 비자카드나, 마스터카드가 지원되는 신용 / 체크카드로 - 달러기반 구매를하면 됩니다. 저는 판매율에 5위권 내에 있는 most popular - 같은 테마들을 검색해서. 그들중 가장 다양한 편집도구 / 튜토리얼을 제공하는 것으로 추정되는테마를 골랐습니다. (Be Theme)
Be theme 는 페이지 하나당 라이센스가 약 60달러정도 합니다. 개발자용 라이센스는 더욱더 가격대가 많이 올라가니까. 제 경우에는 연습 / 실전 납품용으로 한개만 구매했습니다. 대부분의 워드프레스 테마들은 영어기반이고. 외국인들이 포럼에서 원어기반으로 질답을 주고받고있기 때문에. 기본적인 영어가 좀 되어야 질문도 찾아보고, 문제해결에 도움이 될 수 있습니다 ㅠ...
https://www.youtube.com/watch?v=F_7CJSssE7k
혹시라도 워드프레스를 배우시려는 분이 계시다면 - 테마구입에 너무 많은 환상을 갖지는 마세요. 기본적으로 유료 테마는 에디터를 제공하긴 하지만 - 그 에디터에 대해서 다시한번 배워야만 제대로 사용을 할 수 있습니다. 기본적인 설치 및 세팅 튜토리얼은 자체 영상으로 제공이되지만. 그마저도 충분한건 아닙니다. 결국엔 내가원하는 그 구조를 - 이 테마와 워드프레스의 조합으론 어떻게 만들어야하는가를 알아내야하거든요.
워드프레스에서는 페이지와 메뉴, 위젯과 플러그인 등. 우리가 네이버블로그나, 다른 웹 서비스등에서 자주 접했던 용어들이 등장합니다. 그러나 이 툴은 개발자를 위한 툴이라 메뉴가 엄청나게 복잡합니다. 게다가 추가 유료테마의 에디터가 추가되고나면 - 수없이 많은 옵션들을 하나하나 조합해봐야 원하는 결과를 낼 수 있죠. 말 그대로 노가다와 실험의 시간이 꼭 필요합니다.
특히나 워드프레스는 원하는 기능을 내기위해 - 개별 모듈을 따로 받는 '플러그인' 이라는 개념을 갖고있습니다. 그런 플러그인들조차 개별 개발자가 만들어놓은것이다보니, 기본 워드프레스가아닌 - 유료 테마와 합성해 사용할 때에는 어떻게 써야하는지를 또다시 두번 세번씩 확인해봐야하죠. 직관성이 더럽게 떨어지는데다, 수정할때마다 - 적용 후 페이지를 새로고침해줘야하니. 짜증에 혈압이 솟는 시간을 3~4일정도는 경험하시게 될겁니다.
3. 실제 디자인 작업물
위의 시안들이 실제 외주작업을 위해서 만들어낸 시안입니다.Be theme의 그리드를 다루는 방법을 어느정도 깨닫고나니 기존 시안에 비해서 완성도가 많이 높아졌죠. 10여페이지 남짓한 페이지들을 만들기위해. 얼마나 많은 옵션과 외부 플러그인을 깔고 삭제하고를 반복했는지 모르겠습니다(...) 왜 내가 원하는 기능은 졸라 단순한데. 개발자들이 만들어둔 모듈들은 X같이 복잡한건데!! 하다보면 열라빡침
척 보기엔 굉장히 단순해보이죠? 저걸 툴 기반으로 만들려면 얼마나 많은 뻘짓을 해야하는지, 제 스스로도 놀랐습니다. 상단의 메뉴와 - 좌측의 사이드바 위젯은 또 별개의 카테고리를 갖고있어서. 상단메뉴는 메뉴 세팅에서 설정을 해줘야하고. 위젯은 메뉴별로 생성해서 - 개별 페이지별로 레이아웃 세팅을 해줘야합니다. 정보구조를 묶어서 페이지를 다시 정리를 하고. 원하는 결과값을 내기위해서 무수한 삽질을 해야하죠.
K board 게시판의 경우도 외국에선 잘 안쓰이는 한국식 게시판 형태로 따로 플러그인을 받아서. 세팅하고 - 해당 세팅법을 따로 검색해 확인해야했습니다. 그나마 K board는 포럼이 한국어인데다, 정리가 잘되있어서 설치에는 별 어려움이 없었네요.
https://www.cosmosfarm.com/products/kboard/install
다만, 설치 후에 세팅은 잘 했다해도. HTML이나 CSS를 다루지 못하면 - 간격조절이나 타이틀 세팅 등의 영역에서 매우 골치가 아파지죠. 지금 저역시도 이번 작업물에 약 네개의 게시판이 들어가야하는 상황인데. 웹 개발자가 이렇게 해야하는 일이 많은지는 이번에 처음 알았습니다. 모듈 하나 추가하고, 권한 설정하고, 기존 테마와 연동하는거만 해도 일이 장난이 아니더군요. 며칠동안 빡세게 작업해서 배운게 많아지긴했지만. 디자인 툴 밖에 모르는 찐따가 개발툴 만지려니 스트레스 팍팍 받더라고요.
워드프레스에서 제공하는 포트폴리오와, 블로그 개념으로 갤러리를 만드는데. 이 역시도 게시글 만드는 곳과, 보여주는 곳이 따로 나뉘어져있어서. 직관성이 굉장히 떨어지더군요. 개념 자체를 이해하는것도 좀 복잡했고. 실제 원하는 레이아웃의 시안을 만드는데에도꽤 오랜 시간이 걸렸습니다. 게다가 Be theme 자체의 갤러리 특성상 - 자꾸 마우스 오버시에 이상한 애니메이션이 추가되어서. 그걸 제거하는 과정에도 여러 포럼을 돌아다녀야했습니다.
-
결국은 하단 링크에서 찾은 - 추가 CSS로 정리를 봤지만... 무얼 어디에 어떻게 넣으라는건지. 당장 떠오르는 곳만 네군데가 넘어서 수정하고 확인하고. 안되면 다른 포럼 찾아봐서 따라해보고의 연속이었습니다. 진짜 웹개발자들 개노가다 인정합니다 (ㅅㅂ 아오 빡쳐!! )
https://forum.muffingroup.com/betheme/discussion/7454/is-it-possible-to-remove-hover-effect-on-images
그래도이제 왠만한 어려운 기능들은 다 정리가 됐고. 추가적으로 개별 페이지들에 대한 내용만 시각화하면되는 상황입니다. 이제 진짜 한시름 놨네요... 아오...
4. 후기 총평
사실 웹디자인과 코딩을 제대로 배우면 이런 개고생은 덜했겠죠. 그렇지만 이 글을 쓸 당시에는 제게 그런 시간이 없었답니다. 실제로 이미 웹 쪽 시장은 워드프레스 기반 - 프레임워크로 많이 돌아서고있는 실정입니다. 그러나돈을 들이고 시간을 들여서 정석적으로 공부하기엔 너무 오랜 시간이 걸리니, 제 스스로 기피했던 모양입니다. 회사 입장에서도 당장 워드프레스 기반으로 홈페이지를 만들어낼 수 있느냐 없느냐가 - 연봉협상에 있어서도 꽤나 좋은 기준점이 되다보니 말도안되는 시도를 했떤 것 같네요. 물론 워드프레스와, 테마 기반작업은 - 정석적인 코딩 제작에 비해서는 많이 부족한게 사실입니다. 세세한 커스터마이징이 불가능하고. 제한점도 많죠.
하지만 그 무엇보다 속도와. 웹개발자가 다뤄야하는 수많은 기능들을 플러그인과 외부 모듈로 퉁칠수 있고. 가격대도 매우 저렴한 편이에요. 저같은 무지랭이 디자이너도 당장 배워서, 3~4일이면 원하는 결과를 충분히 내놓을 수 있는 수준의 난이도입니다. 그렇다보니 자연히 웹개발자의 몸값도 많이 낮아지는 원인이 됐고. 동시에 간단한 모듈형 홈페이지 제작자들의 몰락도 자연스럽게 이어졌죠. 디자이너의 입장에서도 - 시안은 만들줄 아는데, 개발을 못해서 - 반쪽짜리 웹디자이너이던 자신을 벗어나는 좋은 방법입니다. PC웹과 모바일 웹 모두를 지원하는 반응형 웹사이트를 - 아무것도 모르던 디자이너가 일주일 정도면 만들어낼 수 있다는건. 실제로 굉장한 무기가 됩니다.
-
내가 영어가 좀 된다 / 논리적인 정보정리에 능숙한 편이다 / 새로운 기술을 잘 익히는 편이다 / 디자이너지만 웹디자인도 해보고싶다 - 하시는 분들은 워드프레스와 유료테마로 웹디자인에 빠른 도전을 해보시는것도 좋습니다. 사실 제 경우에는 적합하진 않았지만, 유료테마들은 수많은 탬플릿들을 제공하기때문에. 그걸 편집해서 원하는 결과를 만들어보는것도 꽤 좋은 연습이 되실거에요. 물론 실제 클라이언트나, 원하는 결과치가 있는 상태에서 연습을 해보는게. 더 좋은 경험이 되시겠죠?
물론 그 과정은 X같이 힘들겠지만요
-
이 당시에는 제가 제대로된 코딩 / HTML 공부를 하지않은 상태였기 때문에. 많은 무리가 따랐던 것으로 기억합니다. 현재에는 제대로 웹 공부를 하고있기 때문에, 추후 워드프레스의 코어를 건드린다거나. 워드프레스를 CMS로서만 사용하는 형태에 대한 튜토리얼을 따로 제작해볼 생각입니다. 부디 이 글이 초보 디자이너분들께 도움이 되셨길 바랍니다!
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
