사용자 정의 CSS에 대한 고민

워드프레스에 새로운 CSS 를 입히는 방법 중 사용자 정의 CSS 를 주로 사용했습니다.
그런데 이 사용자 정의 CSS 는 내 워드프레스 전체에 적용이 되다보니 내가 원하지 않는 곳에서도 CSS 가 입혀지는 단점이 있네요.

워드프레스 꾸미기 툴을 처음 만들었을 때에는 이 사용자 정의 CSS 를 활용해서 사용하는걸 컨셉으로 설계를 하다 그런 방식이 비 효율적임을 느껴서 가급적 사용자 정의 CSS 를 사용하지 않고 디자인을 입히는 방법으로 구현방향을 잡았습니다.

사용자 정의 CSS 설정 메뉴
사용자 정의 CSS 설정이 만능은 아닙니다.
각 객체마다 CSS 를 설정하는 방법도 좋은것 같습니다.

사용자 정의 CSS 사용시 단점

워드프레스는 사용자 정의 CSS를 사용함으로서 페이지 디자인을 손쉽게 수정하고 꾸밀 수 있도록 설계 되어 있습니다. 다만 사용시 몇가지 단점이 있어서 가급적 사용하지 않는편이 좋다고 느껴졌습니다.

코드 편집창이 불편하다.

저는 코드를 IDE 에서 편집하다 보니 워드프레스의 코드 편집창 사용이 매우 불편 했습니다.
한글 입력 시 오류 문제와 가로로 긴 내용이 줄바꿈 되어서 보기 불편하더라구요.

사용자 정의 CSS 편집 화면

그래서 꼭 CSS 를 편집해야 할 경우가 있으면 IDE 를 이용해서 편집을 하고 있습니다.

정의한 ID, Class 명을 기억해야 한다.

디자인 요소를 ID, Class 명에 따라 CSS 를 작성해 놓으면 한참후에 사용하기 위해서 그 ID, Class 이름을 기억해야 하는데 기억이 나질 않습니다. 그럼 그때마다 사용자 정의 CSS 화면에 가서 찾아서 사용하는데 이게 불편하더라구요.

CSS 로딩 속도 문제

지금까지는 큰 문제는 없었지만 시간이 지날수록 CSS 가 쌓여가면 사용하지 않는 클래스에 대한 CSS 까지 로딩하는데 시간이 소요될 것으로 생각 됩니다. 차라리 사용할 요소들에 대한 CSS 를 사용할 페이지에서만 로딩하는게 더 효율적이라는 생각이 들었습니다.

초보자에게 CSS 는 어려운 일이다.

가장 중요한 이유 입니다.
글쓰기에 전념해야할 블로거에게 CSS 까지 신경쓰는건 시간의 낭비라는 생각이 들었습니다.
그래서 모든 꾸미기 도구들에 CSS 를 포함 시켜서 생성하게 되면 별도의 사용자 정의 CSS 설정 없이 사용이 가능하도록 바꾸었습니다.

사용자 정의 CSS 장점

사이트 전체에 적용되는 CSS

그럼에도 불구하고 사용자 정의 CSS 를 사용해야 하는 경우는 있습니다.
전체 워드프레스 사이트에서 고정적으로 자주 사용되어지는 CSS 는 사용자 정의 CSS 에 등록하는게 더 효율적입니다. 대표적인 CSS 가 H tag CSS 입니다.
사이트 전체에 일관성을 보여주고 거의 모든 포스팅에 사용되는 테그이기 때문에 모든 글에 CSS 을 사용하는 것보다 한번 등록해 놓고 계속 사용하는게 효율적 입니다.

동일한 요소를 반복적으로 사용될 때

동일한 요소가 반복적으로 사용될 때 생성기에서 생성한 코드를 그대로 입력하면 CSS 가 서로 충돌을 일으켜서 내가 원하는 디자인이 안나올 수 있습니다.
그럴때에는 수동으로 Class 명을 바꾸어 줘야 하는데 이럴때에는 아예 각 디자인마다 CSS 를 미리 등록 시켜놓고 사용하는게 좋을 수도 있습니다. 그럼에도 불구하고 저는 Class 명을 바꾸어 가며 사용하는걸 추천 합니다.

마무리

이번 글에서는 제가 워드프레스 꾸미기 도구를 개발하면서 느낀 사용자 정의 CSS 관련 내용에 대해서 설명 드렸습니다. 개발하면서 생각이 바뀔 수도 있지만 현재 개발 컨셉은 사용자 정의 CSS 를 사용하지 않는 방향으로 잡았습니다.
워드프레스에 좋은 테마, 좋은 플러그인들이 많지만 내 의도가 반영되지 않은 툴을 마구잡이로 사용하다보면 속도문제, 충돌문제, 보안문제가 발생 했을 때 대처가 어려운것 같습니다. 그래서 가급적 플러그인도 사용하지 않고 필요하면 직접 개발하는 방향으로 생각하고 있습니다.
감사합니다.

댓글 남기기