Home 게시판 커뮤니티 Q&A 디자이너로서의 한계, 워드프레스 고수님들 조언을 듣고싶습니다.

Tagged
3개 답변, 3 voices Last updated by Avatar of Matthew Park Matthew Park 2 월 전
  • Avatar of JeilJeil
    Participant
    @rulrulra
    #54426

    안녕하세요.

    저는 1인 디자인 스튜디오를 운영하며
    개발 베이스가 아닌 디자인 베이스로
    워드프레스를 이용해서 기업 홈페이지와 쇼핑몰을 만들고 있습니다.

    아무래도 개발 베이스가 아닌지라
    막히는 부분이 있을 시 플러그인의 힘과 구글링을 통해
    겨우겨우 해결해가고 있습니다.

    다행히 일은 끊키지 않고 들어오고 웹쪽일이 너무 재미있지만,
    부족한 개발(코딩)능력으로 일을 할때마다 부족한 실력으로 스트레스가 너무 심합니다.

    css은 어느정도 수정은 가능하지만
    새로운 것을 만들어내는 능력이 매우 부족합니다.

    그 중 가장 힘든 점이
    예를들어 구글 개발자도구를 통해 찾은
    클래스를 어디서 추가하고 수정해야 할지 모른다는 점입니다.

    분명 코드 하나 바꾸면 해결될 것 같은 부분들이 어디서 어떤걸 수정해야 하는지
    모를때 너무 답답합니다.

    html 하나, css 하나 이렇게 있으면 너무 편하게 수정을 하겠지만
    여러기능이 들어가 있는 테마일 경우
    어디서 어떻게 수정해야 할지를 모르겠습니다.

    워드프레스 기반으로
    이런 부족한 부분을 배울 수 있는 곳이나 방법이 있을까요?

    (혹시나… 어느정도 실력자가 계신다면 과외도 받고 싶습니다…홍대쪽 살아요…메시지 주세요…)

  • Avatar of Matthew ParkMatthew Park
    Moderator
    @hackya
    #54427

    아, 웹디자이너가 아니시라 그래픽 디자이너 셔서, 웹개발 입문을 하셔야 하나보네요.

    “클래스를 어디서 추가하고 수정해야 할지 모른다는 점입니다.”

    워드프레스 개발보다는 FE (front-end) 기법을 배우셔야 하는 것 같은데, 웹디자인의 가장 기본중 기본을 배우셔야 하시는 입장이시니….

    한국에 웹디자인 학원같은데 수강하시면 첫날정도 가르쳐 주지 않을까 싶습니다.

    css 의 class 개념자체는

    class 는 한 반이라고 생각하시면 됩니다. 이 반의 이름은 yellow 반 입니다. (.yellow)

    .class {color:yellow}

    ID 는 그 반에 각 아이들 이름 이라고 생각하시면 됩니다. (#mary, #jane, #joe)

    그럼 그 반에 속한 애들은 모든 노란색 바지를 입게 됩니다.

    .yellow #mary
    .yellow #jane
    .yellow #joe

    이 세 아이는 동일한 색상을 부여 받게 되는거죠.

    일단 이 개념을 이해하신다면 class 와 ID 로 css 를 먹이실 수 있게 되지만, 워드프레스 같은 CMS 들은 css 먹일때 advanced selector 와 pseudo selectors (가상객체) 들이 필수라서,”

    예를 들자면 a[href^=”tel:”], :focus, :not(.row):not(.boxes–alternating):not(.boxes–pair) 이런식의 selector 들

    css 개념을 이해하는 거는 1-2분이면 되지만 css 를 자유자재로 다루기 위해서는 몇년의 시간이 필요 합니다.

    FE 는 인내심을 갖고 차근차근 하나씩 헤쳐나가는 수 밖에 없습니다.

    플러그인 사용은, 급한불은 끌 수 있지만, 훔… 고객의 사이트에 해를 끼치는 거라서요…..

    그런데 한국의 단가낮은 작업들은 플러그인들이 달아주는 수 밖에 없어서…

    어려운 문제 입니다.

    Avatar of Matthew Park
    Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

    Lives in Colorado.

  • Avatar of JinnJinn
    Participant
    @veteran
    #54430

    메튜님이 CSS 관하여 좋은 의견 남겨주셨는데 아래 문장을 보고 제 생각남깁니다.

    클래스를 어디서 추가하고 수정해야 할지 모른다는 점입니다.

    질문자의 핵심 애로 사항은 사이트에서 테마와 플러그인이 정의한 스타일을 변경하기 위해 어떤 방법이 있느냐는 것으로 생각합니다. 간단하게 어디에 추가해야 하는가 라는 것.

    이 문제는 많은 워프 입문자의 애로점으로 볼 수도 있겠습니다. 또, 이런 어려움이 생기는 것은 오랜시간 익숙하게 여기며 행했던 우리나라 게시판 중심의 웹사이트 구성에 원인이 있다고 생각할 수도 있어요. 다음처럼.

    어떤 파일 몇 번 줄을 이렇게 수정하세요.

    또, html 및 CSS 기본 지식이 있는 사람이 워프를 시작할 때 ‘사용’을 먼저 하는 게 아니기에 발생하는 것도 원인이라 할 수 있습니다. 워프 설치하고 이미지와 각종 요소가 함께 있는 포스트를 몇 개나 충실하게 작성했는지 돌이켜보면.

    질문자의 애로점은 다음의 워프 기본 사항을 선행(이해)하면 발생하지 않을 수도 있었다 생각합니다.

    • Child Themes ( style.css & functions.php)
    • 워드프레스 템플릿 계층
    • 플러그인 정의를 저장소 플러그인이나 유료플러그인에 한정하지 않는 것
    • 찾을 때까지 찾기

     

    그리고, 위의 목록보다 더 기본인 다음 항목을 들여다보지 않아서 어려움을 겪는 것으로 생각할 수 있습니다.

    • 워드프레스 기본으로 존재하는 기본, 기본, 기본의 모든 요소와 제공 항목

     

     

     

    의견 작성 시점에서, 그리고 제 생각과 지식 범위에서 현재의 워드프레스 웹사이트 하나를 구성하는 데에 통계, 샵(shop) 등 규모의 플러그인(기능)을 제외하면 저장소 플러그인이 필요 없을 정도라고 생각합니다. 공통적으로 많이 도입하는 항목과 보안은 젯팩 하나면 충분합니다.

    • 워프 with 구텐베르크, 젯팩

     

    이 조합이면 특별한 기능이 없는 웹사이트는 쉽게 제작할 수 있습니다. 물론, 스타일 작업과 기본 제공 기능의 응용은 필요합니다. 제 기준임을 다시 알립니다.

    구텐베르크 에디터를 거부하는 분들이 있지만, 언젠가 결국 쓰게 될 것이므로 어차피 기본으로 도입된 것이라면 받아들이는 게 현명합니다. 쓰다보면 적응되고, 적응하면 불평은 사라집니다.

    그리고, 저는 워드프레스든 아니든 특히 워드프레스에서 가장 힘든 작업이 쉽게 말해서 CSS입니다. 기술 난이도 때문에 힘이 든 게 아니라 늘 해야 하니 그게 힘든 것이죠. 그리고 정말 귀찮습니다. 개인 사이트나 블로그라면 내 마음대로, 때로 존재하는 그대로 사용하지만 다른 사람의 것은 다른 사람이 시각 요소를 중시하니 역시 늘 해야 합니다. 시각 요소가 아니라해도 정렬이나 데이터를 올바르게 표현하기 위해서도 필요하니까요. 어쨌든 가장 하기 싫고 귀찮고 힘든 작업이 스타일입니다.

    처음 요점으로 다시 돌아와 조금 실질적 내용인, 워드프레스에서 테마와 플러그인의 스타일을 수정하여 적용하는 방법은 너무 간단합니다.

    질문자가 크롬 개발자도구에서 찾은 클래스를 어디에 추가하여 변경 적용해야 하는가에 관하여 답답함을 토로하였는데, 우선 기존에는 어떻게 진행하였는지 모르겠네요.

    어쨌든, 하나의 워드프레스 사이트에서 테마와 플러그인이 정의한 스타일을 최종적으로 변경하는 방법(위치)은 다음으로 말할 수 있습니다.

    • 테마나 플러그인 스타일보다 늦게 로드하기

     

    테마의 스타일보다 늦게 로드하려면 child theme의 style.css 파일에 스타일을 정의하면 됩니다. 그러나, 플러그인에서 정의한 스타일을 변경하려면 child theme의 style.css 파일에 정의하면 적용되지 않을 가능성이 큽니다. 대부분 테마 스타일 다음에 플러그인이 로드되니까요. 이 부분은 사이트 소스를 확인하면 금방 알 수 있습니다.

    child theme의 style.css 파일이 아닌 언제부턴가 대부분 제공하는 테마 옵션을 사용해도 됩니다. 워드프레스 기본 테마나 유료테마는 대부분 옵션을 제공할 것입니다. 그것은 Custom CSS 필드인데, 로그인 후 사이트 위에 나오는 어드민바의 ‘사용자 정의(한글버전 기준)’에서 찾을 수 있을 겁니다.

    그러나, 몇 가지 존재하는 가정을 모두 제외하고, 그냥 최종적으로 워드프레스 사이트가 있고 테마와 플러그인이 있는데 테마와 플러그인이 정의한 스타일을 변경하는 가장 불가역적 방법은 플러그인 방식의 스타일 추가입니다.

    플러그인 방식을 사용할 때도 2~3가지 방식이 있습니다. MU(must-use), 대기열 추가 훅 또는 wp_head 훅 정도. 생각하면 더 있을 수 있습니다. 공통점은 플러그인 방식이며 로드 순서를 조정하는, 할 수 있다는 것입니다. 스타일 정의에서 MU 방식은 사실 필요 없으므로 생각하지 않아도 됩니다.

    대기열 추가 방식은 스타일 파일을 별도로 만들어 처리해야 할 수 있으므로 제외하면, 결국 가장 간단한 것은 wp_head 훅으로 순서를 조절하여 스타일을 추가하는 것이죠.

    앞에서 말했는데, 플러그인을 저장소 플러그인이나 판매 플러그인 같은 종류로만 한정해서 생각하지 않아야 합니다. 간단한 형식만으로 직접 만들 수 있다는 것과 개념적으로 저장소 플러그인 형식을 말하는 게 아니다라는 것 기억하시면 됩니다.

    다음 코드가 있는 php 파일(파일 이름은 아무것이나 정하면 됩니다.)을 만들어 wp-content/plugins 폴더에 올리고, 관리자 페이지에서 활성화한 후 아래 코드에서 한글로 아래 위 사이에 크롬 개발자도구에서 찾은 클래스 기준으로 스타일을 변경 정의하거나 추가하면 됩니다.

    이런 방식으로 스타일 추가하면 인라인 스타일이 되는데, 가장 쉬운 방법이며 많이 사용하는 형태입니다. 많은 워드프레스 사이트, 수많은 유료테마의 사이트 소스를 보세요. 인라인 스타일 없는 사이트 드뭅니다.

    위에서 숫자 99를 입력하여 상대적으로 늦게 로드한 것이므로 대부분 사이트에서 모든 스타일을 제어할 수 있습니다. 스타일을 정의한 후 사이트 소스를 보세요. 어디에 출력되는지. 99 숫자 자체에 의미를 두지 마세요.

    위의 코드가 있는 파일만 만들어 놓고 사이트 제작할 때 플러그인으로 사용하면 되는데, 이것도 귀찮다면 저장소 플러그이 중에 ‘head & footer’ 키워드로 검색하여 가장 간단한(다른 유틸리티 기능이 없는) 플러그인 하나 설치하여 head 옵션 필드 영역에 스타일 입력하면됩니다. style 태그는 입력하시구요.

    2016년에 적은 글인데, 다음 글 참고도 해보세요.

    https://hddv.space/7545

    이미 존재하는 테마와 플러그인의 스타일을 최종적으로 변경하는 방법을 말했지만, 만약 유료나 기본 테마를 사용하지 않고 언더스코어 등의 베이스 테마로 시작하여 직접 테마를 구성한다면 꼭 사용하지 않아도 됩니다. 상황마다 다르나 핵심은 ‘로드 순서’입니다.

    워드프레스에서 어떤 요소를 불러오는 것을 알아본 것으로 생각하면 됩니다. 스타일만이 아니라 스크립트도 함께 추가하여 구글 통계 등의 스크립트 코드를 넣어도 됩니다.

    마지막으로, 실제 도메인과 저렴한 공유 웹호스팅에서 워드프레스 기본 테마와 젯팩을 설치한 워드프레스 블로그를 설치하여 최소 한 달에 1개만이라도 이미지와 텍스트가 풍성한, 일부 필드를 제외한 모든 필드에 데이터를 입력하여 포스트를 작성하면서 워드프레스를 경험하시기 바랍니다. 가장 기본이자 최고의 워드프레스 학습 방법입니다. 포스트 작성은 워프 강의나 그 어떤 도서보다 훌륭한 선생님입니다.

    그리고, 제작을 하신다면 (단가가 안 나올 수도 있겠지만) 가능하다면 언더스코어 테마로 직접 테마를 구성해보시는 게 좋겠습니다. 언더스코어 테마를 사용할 때 가장 귀찮은 게 스타일 작업인데, 그 부분이면 잘 하실 거 같네요. 레이아웃 정도의 스타일만 정의해놓은 템플릿 테마를 만들어 놓으세요. 그리고 사이트 제작할 때마다 제작 방향에 맞게 추가하면 될 거 같아요.

     

    • Avatar of Matthew ParkMatthew Park
      Moderator
      @hackya
      #54432

      @Jinn 님, 정말 좋은 글을 남겨주셔서 감사합니다. 정독했습니다.

      Jinn 님의 글을 읽고 나니 일단 제가 질문자 분의 문의내용을 상당히 잘못 이해한 것 이 분명해 보입니다.

      그리고 Jinn 님의 글을 읽으며 저도 분명 저런 고민을 했던 때가 있었을텐데, 너무 오래전 일들이라 다 망각하고 있었구나 하고 느꼈습니다.

      워드프레스라는 CMS 에 너무 익숙해져버린 나머지 입문자들이/혹은 FE 개발자들이 워드프레스를 처음 접하고 생소하게 느낄거라는 생각은 하지도 못한거죠.

      제가 더하고 싶은 얘기가 있다면 워드프레스 개발은 어떤 하나의 방식이나 왕도가 없다는 것 입니다.

      언더스코어 테마를 이용해 나만의 테마를 만들기도 하지만, 요즘 워드프레스 개발 추세는 FE 를 react 이나 vue.js 로 덮는 경우도 많아서 이런 경우 언더스코어 테마 사용이 매우 부적절하거나 사용하는 것 자체가 불가능하다는…

      “워프 with 구텐베르크, 젯팩” – 이 조합을 말씀하셨는데, 이 역시 개인적인 견해일 뿐 입니다. 참고삼아, 구텐베르크 와 젯팩을 극혐이라고 여기며 구텐베르크를 절대로 사용을 하지 않는 웹사이트만 3백만개가 넘는다는 사실을 알고 계시는지요?

      여기 Kopress 에 survey 기능이 있으면 설문조사라도 한번 해보았으면 합니다.

      구텐베르크 사용 중 : 1

      구텐베르크 사용하지 않음 : 9

      대략 1:9 정도의 비율이 나올거라 저는 예상합니다.

2 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.