오늘은 그간 홈페이지 작업 진행하면서, 무던히도 애먹었던 테마 커스터마이징 하는 내용과 관련해..
느꼈던 간략한 소회 풀어보려 합니다.
저희는… 개발자가 아닌 디자이너만 모여있는 디자인 스튜디오입니다.
전문 프로그래머가 없다보니 커스터마이징 하는 부분이 아직도 어렵고..
계속 맨땅에 헤딩하며 조금씩 배워가는 중이랍니다…
워드프레스… 기존에 홈페이지를 만들었던 방식과 비교하면 아주 획기적인 프로그램인거는 확실합니다.
전문 개발자 / 디자이너가 아니여도 어느 정도 구색을 갖춘 홈페이지를 만들수 있게 해주니까요..
그런데 홈페이지를 만들다 보면 욕심이 생기잖아요..
테마에서 이것저것 수정을 해서 조금 더 내 입맛에 맞게 만들고 싶은 욕심..
더군다나 개인 취미로 만드는 홈페이지가 아니고,
클라이언트께 의뢰를 받고 만들어야 되는 상업적인 홈페이지라면..,
테마를 커스터마이징 하는 부분은 선택이 아니라 필수라 하겠습니다.
이번에 예제로 볼 테마는 ENFOLD 테마 입니다.
홈페이지 제작 의뢰를 받으면 구축하고자 하는 홈페이지 컨셉과 가장 적합하다 싶은 테마를
선택하는게 제일 먼저 할 일이죠…
생각컨데 적합한 테마를 선택하는 일이 전체 일의 70% 이상 비중을 차지하는 것 같습니다.
ENFOLD 테마를 선택하고 홈페이지 작업을 실제 진행한.. 그리고 지금은 최종 완료된
홈페이지 제작 사례를 두고 몇몇가지 중요한 커스터마이징 예를 소개하겠습니다.
TV CF 포스터프로덕션 업체인데요..
구성원 대부분이 뛰어난 안목과 실력을 가진 디자이너다 보니..
지금껏 저희가 진행했던 홈페이지 작업중에서 제일 까다롭고 어려웠던 프로젝트 였습니다.
그럼 ENFOLD 테마에서 어떤 어떤 부분을 수정하고 커스터마이징 했는지..
비교하면서 커스터마이징 사례 2가지 정도만 간략하게 소개해 보겠습니다.
포트폴리오 컴포넌트 수정 사례입니다.
ENFOLD 테마의 포트폴리오 디폴트 값은 아래의 이미지와 같습니다.
클라이언트께서 요구하신 수정사항은
1. 붉은 원과 화살표 삭제
2. 하단 삼각형의 포인트 요소 삭제
3. 롤오버시 화이트 컬러를 -> 블랙 으로 수정해 달라고 하셨습니다.
그럼.. 먼저 해당 요소가 수정이 가능한지를 먼저 살펴봐야겠죠?
개인적으로 크롬의 개발자 도구를 사용해 보실것을 추천합니다.
실제 수정이나 삭제가 가능한지 바로 바로 확인이 가능하답니다.
크롬 브라우저에서 F12 버튼을 누르면 하단에 개발자 도구가 생기는 것을 확인할 수 있습니다.
요소 선택 툴을 이용해 수정하고자 하는 컴포넌트를 클릭하면
위 화면 처럼 php 소스는 물론 css 까지 왼쪽에 나오게 됩니다.
클라이언트 수정사항 다시 살펴보면..
테마에 디폴트로 적용된 컴포넌트 일부를 안보이게 하려면 해당 구문의 php를 삭제 또는 주석처리를 하고,
디자인 또는 스타일을 변경하려면 해당 style의 css 를 수정해야 됩니다.
1. 붉은 원과 화살표 삭제 -> 해당 php 구문 삭제 또는 주석처리
2. 하단 삼각형의 포인트 요소 삭제 -> 해당 php 구문 삭제 또는 주석처리
3. 롤오버시 화이트 컬러를 -> 블랙 으로 수정 -> 해당 style.css를 수정
이번에 진행하면서.. 요소선택 툴을 이용해 해당 구문의 경로가 표시되는 경우는
비교적 손쉽게 수정을 했는데요.. 구문 경로가 온전하게 나오지 않는 경우는
일일히 여러 파일을 열어보면서 하나하나 체크를 해나가는 과정이 너무 어려웠습니다.
전문 개발자 분들이나, 이쪽으로 내공이 있으신 디자이너분들은.. 너무 쉬운 부분일텐데..
저희는 여전히…. 아직도 계속 맨땅에 이마빡 깨지도록 헤딩하면서 배우고 있답니다..
뭔가 방법이 있을 것 같은데… 에효.. 쉽지가 않네요..
여러모로 어렵긴 했지만 그래도 프로젝트 무사히 완료할 수 있어서 정말 다행이였습니다.
여러모로… 마음고생 많이 했던 프로젝트였는데.. 어렵사리 프로젝트 마무리를 했답니다.
저희도 많이 배우면서 조금은 더 성숙해진 계기가 된 프로젝트가 아니였나 싶습니다…
다시 또 이런 의뢰가 온다면….??
아마도.. 주저주저 하면서 여러가지 고민에 빠지지 않을까 합니다만…
이런 어려움에 계신분들이 이글 보신다면.. 서로 도움 주고 받으면서 같이 내공 쌓아갈 수 있기를 기대해 봅니다.^^”
