[카테고리:] IT / Tech

초심자와 전문가 모두에게 유용한 팁과 기술 관련 정보

  • 워드프레스 테마: 클래식 테마와 블록 테마 비교

    워드프레스 사이트 제작을 계획 중이라면 두 가지 중요한 선택이 필요합니다. 첫 번째는 WordPress.com셀프 호스팅 WordPress.org 중 어디에 사이트를 만들지 정하는 것이고, 두 번째는 사이트의 외형과 기능을 좌우할 테마를 선택하는 것입니다.

    WordPress 테마는 사이트 디자인의 레이아웃, 간격, 타이포그래피, 색상 및 상호 작용을 지정하는 파일 모음입니다.

    여기서 여러분이 마주하게 될 테마의 종류는 크게 두 가지로 나뉩니다: 클래식 테마블록 테마. 이 둘의 차이점과 장단점을 한눈에 정리해 보겠습니다.


    클래식 테마란 무엇인가요?

    클래식 테마는 전통적인 방식으로 제작된 워드프레스 테마로, PHPHTML 템플릿을 주로 사용합니다. 워드프레스의 초창기부터 사용되어 왔으며, 대다수의 테마가 이 구조를 기반으로 합니다.

    대부분의 클래식 테마는 블록 편집기가 도입되기 전에 개발되었습니다.
    첫 번째 클래식 테마는 (적절하게도) 클래식이라고 불렸습니다. 버전 1.2까지 표준 WordPress 테마로 사용되었습니다.

    특징

    • 커스터마이징: Appearance > Customize에서 기본적인 수정이 가능하며, 로고, 색상, 메뉴, 위젯 등을 변경할 수 있습니다.
    • 코드 수정 필요: 특정한 변경 사항은 PHP 파일 수정이 필요할 수 있습니다. 이를 위해서는 자식 테마를 생성하여 수정 내용을 저장하는 것이 추천됩니다.
    • 플러그인 호환성: 대부분의 인기 플러그인과 호환성이 높습니다.

    장점

    • 오랜 역사와 안정성: 사용자 기반이 넓고, 풍부한 문서와 지원 커뮤니티를 갖추고 있습니다.
    • 시작하기 쉬움: 오래된 방식이 익숙한 사용자나 개발자에게 적합합니다.
    • 유연한 플러그인 사용: 기존 플러그인과의 호환성이 뛰어납니다.

    단점

    • 초보자에겐 난이도 높음: 특정 기능을 구현하려면 코딩이 필요할 수 있습니다.
    • 테마 전환 어려움: 다른 클래식 테마로 변경 시 일부 디자인 요소를 다시 만들어야 합니다.

    대부분의 프리미엄 테마 공급업체는 여전히 주로 클래식 테마를 판매합니다.

    잘 알려진 클래식 테마는 무엇입니까?

    몇 가지 인기 있고 잘 알려진 클래식 테마는 다음과 같습니다.

    1. Astra(100만 + 활성 설치)
    2. Hello Elementor(100만+ 활성 설치)
    3. GeneratePress (600,000+ 활성 설치)
    4. OceanWP (600,000+ 활성 설치)
    5. Twenty Twenty-One (400,000+ 활성 설치)
    6. Kadence (300,000+ 활성 설치)
    7. Neve (300,000+ 활성 설치)
    8. Blocksy (200,000+ 활성 설치)
    9. Storefront (100,000+ 활성 설치)
    10. Sydney (100,000+ 활성 설치)

    이것들은 모두 WordPress.org 테마 디렉토리의 무료 테마입니다. 그들 중 일부는 플러그인 형태로 프리미엄 업그레이드를 받았습니다.

    몇 가지 인기 있는 프리미엄 클래식 테마는 다음과 같습니다.

    1. Divi
    2. Newspaper
    3. Avada
    4. Genesis
    5. Flatsome
    6. Enfold
    7. Salient
    8. BeTheme
    9. The7
    10. ColorMag

    이 데이터는 BuiltWith의 테마 사용 추세에서 가져온 것입니다.

    페이지 빌더는 웹사이트 레이아웃을 제작하고 커스터마이징하는 데 도움을 주는 플러그인입니다.
    원래 페이지 빌더는 워드프레스 기본 편집기가 아직 복잡한 페이지 레이아웃(e.g. with multiple columns)을 쉽게 구성할 수 없던 시절에 개발되었습니다.
    그러나 현재는 워드프레스 블록 편집기가 등장하면서 상황이 많이 달라졌습니다. 블록 편집기는 여전히 대부분의 페이지 빌더만큼 강력하지는 않지만, 기능이 점점 개선되고 있어 점차 격차를 좁혀가고 있습니다.


    블록 테마란 무엇인가요?

    블록 테마는 최신 워드프레스 블록 편집기(Gutenberg Editor)와 연계하여 풀 사이트 편집(Full Site Editing) 기능을 지원하는 테마입니다. 모든 디자인 요소를 블록 단위로 관리할 수 있어 코딩 없이도 시각적인 작업이 가능합니다.

    워드프레스에서 출시한 첫 번째 전체 사이트 편집 테마는 워드프레스 5.9와 함께 출시된 Twenty Twenty-Two였습니다.

    특징

    • 구조의 변화: 기존 PHP 중심의 파일 구조에서 벗어나 HTMLtheme.json 파일로 이루어진 간결한 구조를 가집니다.
    • 풀 사이트 편집: 헤더, 푸터, 페이지 레이아웃을 블록 에디터를 통해 쉽게 수정할 수 있습니다.
    • 스타일 변형 지원: 테마 내부에서 제공되는 스타일 변형 옵션으로 빠르게 사이트 디자인을 변경할 수 있습니다.

    장점

    • 미래 지향적: 워드프레스의 발전 방향과 맞물려 새로운 기능을 빠르게 활용 가능.
    • 코딩 필요 없음: 블록을 활용해 사이트를 시각적으로 구성할 수 있어 초보자도 접근이 쉽습니다.
    • 퍼포먼스 향상: PHP 대신 HTML 파일을 사용하여 로딩 속도가 빠릅니다.

    단점

    • 학습 곡선: 클래식 테마에 익숙한 사용자라면 블록 기반의 작업 방식에 적응하는 데 시간이 필요할 수 있습니다.
    • 문서 부족: 상대적으로 새로운 기술이라 일부 테마는 문서화가 부족합니다.
    • 호환성 문제: 기존 플러그인과의 호환성이 완벽하지 않을 수 있습니다.

    잘 알려진 블록 테마에는 어떤 것이 있습니까?

    블록 테마는 클래식 테마보다 훨씬 적은 시간 동안 사용되었기 때문에 숫자는 대부분 클래식 테마보다 훨씬 적습니다.

    1. Twenty Twenty-Four (100만+ 활성 설치)
    2. Twenty Twenty-Three (700,000+ 활성 설치)
    3. Twenty Twenty-Two (300,000+ 활성 설치)
    4. YITH Wonder (60,000+ 활성 설치)
    5. Extendable (50,000+ 활성 설치)
    6. Raft (10,000+ 활성 설치)
    7. Variations (10,000+ 활성 설치)
    8. BizBoost (9,000+ 활성 설치)
    9. Neve FSE (9,000+ 활성 설치)
    10. Spectra One (7,000+ 활성 설치)
    11. Jadro (6,000+ 활성 설치)
    12. FotaWP (2,000+ 활성 설치)
    13. Frost (2,000+ 활성 설치)
    14. Minimalistix (2,000+ 활성 설치)
    15. Ollie (2,000+ 활성 설치)
    16. Ona (2,000+ 활성 설치)
    17. Simple Nova (2,000+ 활성 설치)
    18. Blockbooster (1,000+ 활성 설치)
    19. Blockify (1,000+ 활성 설치)
    20. Blockstarter (1,000+ 활성 설치)

    사이트 편집자

    블록 테마는 클래식 테마와 매우 다른 시스템을 사용합니다. 모든 사용자 정의는 Appearance > Editor를 통해 액세스할 수 있는 Site Editor에서 수행됩니다.


    클래식 테마 vs 블록 테마: 장단점

    클래식 테마의 장점

    인기, 오래된 역사 및 지원

    익숙함

    • 클래식 테마는 오랜 시간 동안 워드프레스 사이트의 외형을 결정하는 유일한 방법이었으므로, 대부분의 기존 WordPress 사용자와 개발자에게 더 친숙합니다.
    • 블록 테마를 사용하거나 제작하려면 새로운 패러다임에 적응해야 합니다.

    플러그인 호환성

    • 클래식 테마는 인기 있는 플러그인과 호환될 가능성이 더 높습니다. 블록 테마는 상대적으로 미지의 영역에 가깝습니다.

    클래식 테마의 단점

    개발자가 아니면 사용자 정의하기 어렵다

    • 클래식 테마 사용자 정의는 워드프레스 커스터마이저에 의존합니다.
    • 커스터마이저에서 원하는 기능이 없다면, CSS 추가나 테마의 PHP 템플릿을 편집해야 할 수 있습니다.

    테마 전환이 어렵다

    • 클래식 테마는 사용자 정의 방법이 다르기 때문에, 테마를 전환할 경우 새 테마에서 사이트의 요소를 다시 만들어야 할 수 있으므로 더 고통스러운 과정이 될 수 있습니다.

    블록 테마의 장점

    미래 지향적

    • 블록 편집기가 계속 발전함에 따라, 블록 테마 사용자를 지원하기 위해 더 많은 기능이 추가될 것이 확실해 보입니다.
    • 클래식 테마가 금방 사라지지는 않겠지만, 워드프레스의 미래를 최대한 활용하려면 블록 테마 사용이 권장됩니다.

    디자이너도 제작 가능

    • 블록 테마는 블록으로 구성되어 있어 시각적으로 사이트를 생성하고 편집할 수 있습니다.
    • 코드에 대한 지식은 도움이 되기는 하지만 반드시 필요한 것은 아닙니다.
    • Create Block Theme 플러그인을 사용해 템플릿과 패턴을 추가하고 스타일을 사용자 지정할 수 있는 새로운 테마를 만들 수도 있습니다.

    페이지 빌더 플러그인이 필요하지 않습니다.

    • 블록 테마는 사이트의 모든 부분을 블록으로 편집하도록 설계되어 페이지 빌더가 필요 없습니다.
    • 페이지 빌더는 필요한 것보다 더 많은 코드를 만드는 경우가 많으므로 코드를 사용하지 않으면 사이트 성능이 향상됩니다.

    빠른 로딩 속도

    • HTML 파일을 사용하는 블록 테마는 PHP 파일을 사용하는 클래식 테마보다 로딩 속도가 빠릅니다.
    • 블록 테마는 페이지에서 사용되는 블록 스타일만 로드하므로, 성능이 최적화됩니다.
    • 개발자이자 핵심 커미터인 Felix Arntz는 클래식 테마에서 블록 테마로 바꾼 경험과 그로 인한 성능 향상에 대해 썼습니다.
    • 또한 개발자 엘리엇 리치몬드(Elliott Richmond)는 클래식 테마를 블록 테마로 변환하고 로드 시간을 테스트했습니다. 그는 블록 테마가 클래식 테마보다 4초 더 빨리 로드된다는 것을 발견했습니다.

    접근성 향상

    • 블록 편집기에 포함된 접근성 기능(예: 키보드 접근 가능한 드롭다운 메뉴, 스킵 투 컨텐츠 링크)이 기본 제공됩니다.

    블록 테마의 단점

    더 높은 학습 곡선

    클래식 테마에 익숙한 경우, 블록 테마의 사이트 편집 기능(스타일, 템플릿, 패턴 등)에 적응하는 데 시간이 필요합니다.

    • 스타일: 스타일 변형, 팔레트, 타이포그래피, 색상, 그림자, 레이아웃 및 블록 스타일 편집
    • 템플릿: 사용 시기, 추가, 교체, 편집 및 재설정 방법
    • 템플릿 파트: 대체 디자인으로 교체하는 방법과 편집 및 재설정하는 방법
    • 블록 패턴: 삽입, 이동 및 편집 방법

    문서화 부족

    • 블록 테마는 상대적으로 최신 방식이기 때문에 문서화가 충분하지 않을 수 있습니다.
    • 예: Variations 테마는 10,000명 이상의 사용자를 보유하고 있지만 문서가 부족합니다.

    사용자 경험의 일관성 부족

    • 블록 테마마다 템플릿 편집 방식이 달라 사용자가 혼란을 겪을 수 있습니다.

    사용자 정의 블록 제작에는 코딩 지식 필요

    • 사이트에 대한 사용자 정의 블록이 필요하고, 요구사항에 맞는 플러그인이 없으면, JavaScript나 PHP를 사용해 직접 맞춤 블록을 코딩해야 합니다.

    어떤 테마를 선택해야 할까요?

    선택 기준

    • 블록 테마: 미래 지향적인 기술을 활용하고, 사이트 디자인을 자유롭게 수정하고자 한다면 적합합니다.
      • 디자인에 대한 완전한 통제와 새로운 학습에 대한 의지가 있다면 블록 테마를 선택하세요.
    • 클래식 테마: 기존 방식에 익숙하거나, 안정성과 넓은 커뮤니티를 중시한다면 추천합니다.
      • 전통적인 방식과 대규모 사용자 기반, 풍부한 지원을 선호한다면 클래식 테마를 선택하세요.

    양쪽 테마 모두 각각의 장단점이 뚜렷하기 때문에, 자신의 필요와 경험 수준에 따라 선택하는 것이 중요합니다.

    요약: 블록 테마는 워드프레스의 미래를 선도할 가능성이 높지만, 클래식 테마는 여전히 강력한 지원과 안정성을 제공합니다.


    여러분은 어떤 테마를 선호하시나요? 아래 댓글로 공유해 주세요!

  • 워드프레스 PHP 버전 업데이트 방법 (카페24 호스팅, 구글 사이트킷 알림 해결)

    @cafe24korea 어느 날 워드프레스 대시보드에 접속하니, 구글 사이트킷(Google Site Kit) 위젯에 이전에는 못 보던 알림이 떠 있었습니다.

    Get a faster, more secure website: update PHP today
    (더 빠르고 안전한 웹사이트를 위해 지금 PHP를 업데이트하세요)

    알림 내용은 제 사이트가 오래된 PHP 버전(8.2.7p1)에서 실행되고 있어 보안 업데이트를 받지 못하며, 곧 사이트킷 지원도 중단될 것이라는 경고였습니다.

    PHP는 워드프레스를 구성하는 핵심 프로그래밍 언어입니다. 자동차로 비유하자면 엔진과도 같죠. 이 ‘엔진’을 최신 버전으로 유지하는 것은 사이트의 속도와 보안에 매우 중요합니다.

    오늘은 저처럼 카페24(Cafe24) 호스팅을 사용하시는 분들을 위해, 이 알림을 해결하고 안전하게 워드프레스 PHP 버전을 업데이트하는 전체 과정을 단계별로 공유해 드리겠습니다.


    PHP, 꼭 업데이트해야 할까요?

    네, 반드시 해야 합니다. 워드프레스 공식 사이트에서도 강조하는 PHP 업데이트의 이점은 명확합니다.

    • 🚀 속도 향상: PHP는 새로운 버전이 나올수록 효율성이 개선됩니다. 최신 권장 버전(현재 8.3 이상)으로 업데이트하면 방문자가 체감할 수 있을 정도로 사이트 로딩 속도가 빨라집니다. 사이트 속도는 구글 검색 순위에도 긍정적인 영향을 줍니다.
    • 🛡️ 보안 강화: PHP는 매우 대중적인 언어이기에 해커의 공격 목표가 되기 쉽습니다. 최신 버전은 최신 보안 기능을 포함하고 있지만, 구버전(8.3 미만)은 더 이상 보안 업데이트를 받지 못해 취약점에 노출될 수 있습니다.

    내 사이트의 성능과 보안, 두 마리 토끼를 모두 잡기 위해서라도 PHP 업데이트는 선택이 아닌 필수입니다.


    내 사이트의 PHP 버전 확인하는 법

    업데이트에 앞서 현재 내 사이트의 상태를 확인해야 합니다. 확인 방법은 매우 간단합니다.

    1. 워드프레스 관리자 페이지에서 [도구] > [사이트 건강] 메뉴로 이동합니다.
    2. [정보] 탭을 클릭합니다.
    3. [서버] 섹션을 찾아 펼칩니다.
    4. 목록에서 PHP 버전 항목을 확인합니다.

    제 경우, 사이트킷 알림대로 8.2.7p1 버전이 설치되어 있었고, 권장 버전은 8.3 이상이라는 메시지가 표시되었습니다. 이제 안전하게 업데이트를 진행할 차례입니다.


    업데이트 전 황금률: 3단계 안전점검

    엔진을 교체하기 전에 차량 점검을 하듯, PHP 버전을 변경하기 전에도 몇 가지 중요한 안전 조치가 필요합니다.

    1. 백업, 백업, 또 백업

    가장 중요한 단계입니다. 만에 하나 문제가 발생했을 때 사이트를 원래 상태로 되돌릴 수 있는 유일한 보험입니다. 사용하고 있는 백업 플러그인이 없다면, ‘UpdraftPlus’와 같은 무료 플러그인을 설치하여 사이트 전체를 반드시 백업해두세요.

    2. 워드프레스 최신 버전 유지

    [대시보드] > [업데이트] 메뉴에서 워드프레스 코어, 테마, 플러그인을 모두 최신 버전으로 업데이트합니다. 이는 PHP 호환성 문제를 최소화하는 데 도움이 됩니다.

    3. PHP 호환성 확인

    PHP Compatibility Checker‘와 같은 플러그인을 설치하여 사용 중인 테마와 플러그인이 업데이트하려는 PHP 버전과 호환되는지 미리 확인해 볼 수 있습니다. 완벽하지는 않지만, 잠재적인 문제를 파악하는 데 큰 도움이 됩니다.


    카페24에서 PHP 버전 변경하기 (실전!)

    안전점검을 모두 마쳤다면, 이제 카페24에서 직접 PHP 버전을 변경해 보겠습니다.

    1. 카페24 홈페이지에 로그인한 뒤, [나의 서비스 관리]로 들어갑니다.
    2. 좌측 메뉴에서 [호스팅 관리]를 클릭합니다.
    3. 계정 목록 하단의 [신청 및 변경] 탭 그룹에서 [변경 신청]을 클릭합니다.
    4. 다양한 메뉴 중 [서버 환경 변경]을 찾아서 클릭합니다.
    5. PHP 버전 변경 섹션에서 원하는 버전을 선택합니다. 현재 카페24에서는 PHP 8.4까지 선택이 가능하므로, 가장 최신 버전인 8.4를 선택하고 하단의 [신청하기] 버튼을 누릅니다.

    신청 후 잠시 기다리면 PHP 버전 변경이 완료됩니다. 이제 다시 워드프레스 사이트 건강 페이지로 돌아가 보면, PHP 버전이 성공적으로 업데이트된 것을 확인할 수 있습니다.


    참고: 최신 PHP, 뭐가 더 좋을까?

    단순히 버전 숫자만 올라가는 것이 아닙니다. 최신 PHP 버전에는 실질적인 성능 및 기능 개선이 포함되어 있습니다.

    • PHP 8.3 (2023년 11월 출시): JSON 형식 검증 함수 추가, 특정 함수들의 성능 향상, 읽기 전용 클래스 기능 개선 등 안정성과 편의성이 향상되었습니다.
    • PHP 8.4 (2024년 11월 출시): 내장된 DOM 라이브러리가 최신 HTML5 표준을 준수하게 되었고, 배열을 더 쉽게 다룰 수 있는 새로운 함수들이 추가되었습니다.

    최신 버전을 사용하는 것만으로도 보이지 않는 곳에서 사이트의 효율과 안정성이 크게 개선되는 셈입니다.

    사이트 대시보드에 나타난 경고 알림은 귀찮은 존재가 아니라, 내 사이트를 더 건강하게 만들 기회입니다. 10분만 투자하여 여러분의 소중한 워드프레스 사이트에 최신 엔진을 달아주세요!

    @cafe24korea@threads.net @kowporg@threads.net

  • 워드프레스 관련 유용한 링크 모음

    한국 워드프레스 사용자 및 기여자를 위한 주요 공식 채널, 커뮤니티, 학습 자료, 개발 도구 등 다양한 정보를 한 곳에 모았습니다.


    🇰🇷 한국 워드프레스 공식 채널

    🤝 워드프레스 기여하기 (Contributing to WordPress)

    📢 워드프레스 소셜 미디어 및 마케팅

    🎉 워드프레스 이벤트 (Events)

    📰 워드프레스 소식 및 정보

    🌐 WordPress.com 관련

    📱 워드프레스 앱 및 도구 (Apps & Tools)

    💻 개발자 리소스 (Developer Resources)


    이 페이지는 필요에 따라 계속 업데이트하고, 새로운 유용한 링크가 생기면 추가해나가시면 됩니다. 각 링크에 대한 설명은 사용자들이 어떤 정보인지 쉽게 파악할 수 있도록 간결하게 작성하는 것이 좋습니다.

  • 워드프레스 개발환경 무작정 따라하기: wp-env

    워드프레스 개발환경 무작정 따라하기: wp-env 활용 가이드

    워드프레스 플러그인/테마 개발을 위한 로컬 개발환경 구축은 복잡해 보일 수 있지만, wp-env를 사용하면 매우 간단하게 시작할 수 있습니다. 아래는 완전 초보자를 위한 단계별 따라하기입니다.

    wp-env는 플러그인과 테마를 구축하고 테스트하기 위한 로컬 WordPress 환경을 쉽게 설정할 수 있게 해줍니다. 설치가 간단하고 구성이 필요하지 않습니다.

    @wordpress/env – Block Editor Handbook | Developer.WordPress.org

    1. 필수 구성 요소

    wp-env는 일반적으로 사용되는 몇 가지 개발자 도구에 의존합니다:

    • Docker: wp-env는 Docker로 구동됩니다. Windows에서 Docker를 설치하는 데 사용할 수 있는 지침이 있습니다(WSL2 백엔드를 권장합니다), macOS 및 Linux에서 사용할 수 있습니다.
    • Node.js: wp-env는 노드 스크립트로 작성되었습니다. 최신 LTS 버전을 설치하려면 nvm 같은 버전 관리 도구 사용 권장.
      • npm (Node.js 설치하면 같이 설치됨)
    • Git: Git은 워드프레스, 플러그인, 테마와 같은 소스 컨트롤에서 소프트웨어를 다운로드하는 데 사용됩니다.
    • (옵션) VS Code 같은 코드 에디터
    • Git, GitHub Desktop, Node.js 전부 dev home에서 설치하면 편리함.

    2. 설치

    1️⃣ 전역 패키지로 설치 (권장 사항)

    필수 구성 요소가 설치된 것을 확인한 후, 다음과 같이 wp-env를 글로벌로 설치할 수 있습니다:

    터미널(명령 프롬프트)에서 아래 명령어로 wp-env를 전역 설치합니다.

    npm -g i @wordpress/env

    설명

    • -g: 전역(global) 설치 옵션
    • i: install (줄임말)
    • @wordpress/env: 워드프레스 dev용 Docker 환경 툴

    전역 설치하면 어디서든 wp-env 명령어 쓸 수 있어.
    → 이건 개별 프로젝트 npm install 말고 전역 설치니까 명확하게 구분해두자.

    이러면 어떤 디렉토리에서도

    wp-env start

    바로 가능.

    혹시 wp-env 명령어 전역으로 설치했는지 확인해보려면

    wp-env --version

    치면 버전 나옴.
    이러면 정상 설치된 거야.

    설치된 전역 패키지 목록 확인

    npm -g list –depth=0 해서
    전역 패키지 뭐 설치돼 있는지도 확인 가능해.
    만약 워드프레스 dev 패키지 충돌이나 버전 꼬임 있을 때 유용해.

    전역 설치 경로 확인

    npm root -g

    2️⃣로컬 패키지로 설치

    프로젝트에 이미 package.json 있는 경우 로컬 패키지로 wp-env를 사용할 수도 있습니다. 먼저 개발(dev) 종속성으로 wp-env를 로컬에 설치하세요:

    npm i @wordpress/env --save-dev

    wp-env를 전역적으로 설치한 경우에도 이를 실행하면 로컬, 프로젝트 수준의 패키지가 자동으로 실행됩니다. 또는 npm.npx와 함께 자동으로 설치되는 유틸리티가 노드 모듈을 통해 설치된 wp-env와 같은 바이너리를 찾아서 실행하는 npx를 통해 wp-env를 실행할 수도 있습니다. 예를 들어, npx wp-env start --update


    3. 사용법

    환경 시작하기

    먼저 Docker가 실행 중인지 확인합니다. 시스템 트레이 또는 메뉴 표시줄에서 Docker 아이콘을 클릭하여 이 작업을 수행할 수 있습니다.

    그런 다음 WordPress 플러그인 또는 테마가 포함된 디렉토리로 변경합니다.

    개발할 플러그인/테마 폴더로 이동

    예시: 깃허브 Gutenberg 저장소(리포지토리)

    GitHub Desktop – Current repository – Add – Clone repository – Your repositories – Local Path (onedrive에 문서 폴더 동기화 되어 있을 경우 새 경로 설정)
    This repository if a folk. How do you plan to use it? – To contribute to the parent project (Pull request, Issues등 때문에 헷갈릴 수 있는데, 이거 아님)
    For my own purposes (git workflow에서 브랜치가 your folk에 based on 해야해서 이거로 해야함)

    bashcd ~/path/to/a/wordpress/plugin$ cd ~/gutenberg
    
    cd C:\Users\thaum\dev
    git clone https://github.com/Jiwoon-Kim/gutenberg.git 
    cd C:\Users\thaum\dev\gutenberg
    git switch -c update/my-branch
    git remote add upstream https://github.com/WordPress/gutenberg.git

    워드프레스 개발환경 시작

    아래 명령어로 로컬 워드프레스 환경을 실행합니다.

    $ wp-env start

    마지막으로 웹 브라우저에서 http://localhost:8888 로 이동하여 WordPress가 로컬 WordPress 플러그인 또는 테마가 실행 및 활성화된 상태로 실행되는 것을 확인하세요.
    기본 로그인 자격 증명은 username: admin password: password 입니다.

    • 브라우저에서 http://localhost:8888 접속
    • 기본 로그인:
      • 아이디: admin
      • 비밀번호: password

    자주 사용하는 명령어

    명령어설명
    wp-env start개발환경 시작
    wp-env stop개발환경 중지
    wp-env clean all데이터베이스 초기화(모든 데이터 삭제)
    wp-env destroy모든 환경 완전 삭제
    완전 초기화(모든 컨테이너, 볼륨 삭제)
    wp-env run cli wp plugin install 플러그인명플러그인 설치
    wp-env run cli bashCLI 컨테이너에서 bash 쉘 실행

    요약

    • Docker, Node.js, Git 설치
    • npm -g i @wordpress/env로 wp-env 설치
    • 플러그인/테마 폴더에서 wp-env start 실행
    • 브라우저에서 http://localhost:8888로 접속해 개발 시작

    wp-env를 활용하면 복잡한 환경설정 없이 워드프레스 개발을 바로 시작할 수 있습니다.

    Citations:

    1. 시작하기 – 블록 편집기 핸드북 | Developer.WordPress.org
    2. chore: 보안 취약점 해결을 위한 npm audit fix 실행 by 김지운 · 풀 리퀘스트 #70016 · 워드프레스/구텐베르크
    3. 코드로 기여 – WordPress 코어 만들기
    4. 기계 설정 – Make WordPress.org
    5. WordPress/meta-environment: 공식 WordPress.org 웹사이트를 Varying Vagrant 설치 파일로 프로비저닝하는 스크립트 모음입니다.
    6. global.wordpress.org – WordPress.org 만들기
    7. WordPress.org – WordPress.org 만들기

    wp-env 개념 정리

    • wp-env는 Docker 기반의 로컬 워드프레스 개발 툴.
    • 기본적으로 Docker 컨테이너 안에 워드프레스 환경을 자동으로 띄워줘.
    • wp-env start 하면 Docker가 컨테이너 생성 & 실행.
    • 이때 Docker 컨테이너 목록 보려면:
    docker ps

    하면 현재 실행 중인 컨테이너 목록이 테이블 형식으로 쭈욱 보여.

    📌 **전역 설치(Global installation)**의 정확한 의미

    명령어에서 말하는 **전역(global)**이란,

    • 특정 디렉토리 내부에서만 쓰이는 게 아니라,
    • 컴퓨터 전체의 환경 어디서든 쓸 수 있도록 설치하는 걸 뜻해.

    예를 들면,

    • npm install -g 패키지 → Node.js의 패키지를 모든 프로젝트 어디서든 명령어로 사용 가능하게 설치
    • composer global require → PHP의 composer로 컴퓨터 전체 scope에서 쓰이는 composer package 설치
    • wp-env 같은 경우도 마찬가지. npm install -g @wordpress/env로 전역 설치하면 어떤 프로젝트 디렉토리에서든 wp-env 명령어를 호출 가능

    📌 그런데, 이 **전역(global)**의 실제 경로는?

    그렇다고 이게 시스템 전체 /usr/bin이나 C:\Windows\System32 같은 OS 핵심 디렉토리에 박히는 건 아님.

    • Node.js 예)
      윈도우라면 C:\Users\{사용자}\AppData\Roaming\npm
      맥/리눅스라면 ~/.npm-global 또는 /usr/local/bin
    • Composer 예)
      윈도우: C:\Users\{사용자}\AppData\Roaming\Composer\vendor\bin
      맥/리눅스: ~/.composer/vendor/bin

    이 경로가 OS PATH에 등록돼 있어서 명령어를 어디서든 호출할 수 있는 것.

    📌 wp-env start를 실행한 지금 상황은?

    지금은 C:\Users\thaum\dev\gutenberg 디렉토리 안에서 wp-env start를 실행했으니까,

    • 해당 디렉토리 안에 있는 .wp-env.json 파일을 기준으로
    • 도커 컨테이너를 띄우는 것

    전역 설치 여부와는 별개로,

    • wp-env 명령어가 전역으로 설치돼 있어야 해당 명령어를 어디서든 쓸 수 있고,
    • 프로젝트 단위로 실행할 땐 **해당 디렉토리의 설정파일(.wp-env.json)**을 읽는 거지.

    📌 Git & GitHub 개념 정리

    이거 Git & GitHub 용어들 헷갈리기 딱 좋은 거라 정리해볼게. 지금 워드프레스 코어 기여하려면 꼭 알고 넘어가야 하는 개념이기도 하고.

    용어설명
    fork다른 사람(혹은 공식) 저장소를 내 깃허브 계정으로 복사해오는 것. 원본은 그대로 있고, 내 계정에 복사본이 생김. 기여하려면 보통 fork해서 작업함.
    repository (repo)깃허브에서 하나의 코드 프로젝트를 담고 있는 공간. 워드프레스 gutenberg도 하나의 repository.
    trunk워드프레스에서는 보통 main 브랜치 대신 trunk라는 이름의 메인 브랜치를 씀. 최신 개발 내용이 모이는 메인 가지.
    branch원래 코드를 건드리지 않고, 새로운 기능이나 수정을 작업할 수 있는 가지(branch). 보통 feature/my-feature 같은 이름으로 만듦.
    pull originorigin내 깃허브 repo를 의미. git pull origin trunk 하면 내 깃허브의 trunk에서 최신 코드를 가져옴.
    upstream보통 원본 repo를 upstream으로 지정함. 예) 워드프레스 공식 gutenberg repo. git remote add upstream https://github.com/WordPress/gutenberg.git 이렇게 연결 가능.
    fetch origin / fetch upstream원격 저장소(origin 또는 upstream)의 최신 이력을 가져오기만 함. 아직 병합은 안 됨.
    sync fork내 포크된 저장소를 원본(official repo)과 동기화하는 것. 워드프레스 코어 같은 경우 upstream에서 최신 커밋을 가져와서 내 포크에 반영하는 거.
    pull request (PR)내가 작업한 브랜치의 변경사항을 원본 repo(혹은 메인 브랜치)에 반영해달라고 요청하는 것. 워드프레스 기여는 이걸 통해 이뤄짐.

    📖 예제 시나리오

    1. 워드프레스 gutenberg repo를 fork → 내 계정에 복사본 생김
    2. 내 로컬에 내 fork repo를 clone
    3. upstream remote 등록 → 원본 공식 repo 연결
    4. 최신 trunk로 내 fork를 sync
    5. 내 fork에서 작업용 branch 생성
    6. 작업 후 커밋, 푸시
    7. 내 fork → WordPress/gutenberg trunk로 PR 보냄

    📌 명령어 요약

    # upstream 등록 (한번만)
    git remote add upstream https://github.com/WordPress/gutenberg.git
    
    # 원본 최신 trunk 가져오기
    git fetch upstream
    git checkout trunk
    git merge upstream/trunk
    
    # 내 fork에 반영
    git push origin trunk
    
    # 새 브랜치 생성
    git checkout -b update/my-feature
    
    # 작업하고 커밋 푸시
    git add .
    git commit -m "update: added feature"
    git push origin update/my-feature
    
    # 깃허브에서 PR 보내기
    

    GitHub에서는 Pull Request(PR) 가 사실상 두 브랜치 간의 비교(diff)와 merge 제안을 의미해.
    그리고 PR은 아래 요소로 구성돼:


    📌 Pull Request 구조

    요소설명
    베이스 브랜치 (base branch)PR로 머지하려는 대상 브랜치 (보통 trunk, main 등)
    헤드 브랜치 (head branch)변경사항을 담은 작업 브랜치 (포크의 my-feature-branch 같은 거)
    커밋 히스토리PR 열 당시 헤드 브랜치에 있는 커밋 목록
    상호 연결 상태PR은 헤드 브랜치가 업데이트되면 자동으로 PR 화면에도 반영됨

    즉, PR은 브랜치에 귀속돼 있어.


    📌 중요한 특징

    • PR 올리고 나서 헤드 브랜치에서 커밋을 추가하거나 수정하면 → PR 화면에도 실시간으로 반영됨.
    • 만약 헤드 브랜치를 삭제하면 → 해당 PR은 Closed 처리되고 더 이상 사용할 수 없음.
    • 같은 이름으로 브랜치를 다시 만들어도 → 그 PR과는 연결 안 됨. 새 PR을 만들어야 해.

    📌 예시

    베이스: WordPress/gutenberg trunk
    헤드: Jiwoon-Kim/gutenberg update/my-branch

    이 상태에서 PR 만들었으면
    update/my-branch 브랜치에 커밋 추가하면 PR에 실시간으로 반영
    update/my-branch 삭제하면 PR도 Closed
    → 같은 이름으로 브랜치 다시 만들어도 기존 PR과 무관


    📌 정리

    상황PR 영향
    브랜치 커밋 추가PR에 실시간 반영
    브랜치 삭제PR 자동 Close
    같은 이름 브랜치 새로 만듦PR과 무관. 새 PR 필요

    LF → CRLF 경고는 윈도우 개발환경에서 자주 뜨는 거라서 설명 잠깐 해줄게.


    📌 왜 뜨는 거냐?

    • LF (Line Feed) : 유닉스/리눅스/macOS에서 사용하는 줄바꿈
    • CRLF (Carriage Return + Line Feed) : 윈도우에서 사용하는 줄바꿈

    지금 네 깃 설정이
    core.autocrlf=true
    로 되어 있어서, 체크아웃할 때 LF → CRLF 바꾸고, 커밋할 땐 다시 CRLF → LF로 돌리는 설정인데
    현재 워킹카피에서 LF였던 파일이 CRLF로 바뀌는 걸 감지해서 저 경고를 띄워준 거야.

    참고: 설정 확인하려면

    git config --get core.autocrlf

    📌 해결법

    만약 네 개발환경 줄바꿈 강제를 LF로 통일하고 싶으면
    전역 설정 변경 가능:

    git config --global core.autocrlf input
    • true : 체크아웃할 때 LF→CRLF, 커밋할 때 다시 CRLF→LF
    • input : 체크아웃할 땐 냅두고, 커밋할 때 CRLF→LF
    • false : 아무것도 안 건드림

    대부분 OSS 개발자들은 input
    네가 OSS PR 많이 할 거면 input 추천.


    wporg-main-2022 설치 방법

    이건 워드프레스.org 공식 사이트 테마 개발용 레포지토리
    👉 https://wordpress.org 사이트에 쓰이는 그 테마.

    구조가 조금 달라. 근데 원리와 세팅법은 비슷해서 같이 비교해볼 수 있어.

    Development

    필수 구성 요소

    Yarn

    • npm의 대체 패키지 매니저
    • npm install 대신 yarn install
    • 같은 package.json 파일을 기반으로 JS 라이브러리, 개발 툴 설치/관리
    • 차이점 :
      • 캐시 빠름
      • yarn.lock으로 정확한 버전 고정
      • 워드프레스 Gutenberg 프로젝트에도 npm 대신 yarn 쓰는 플러그인/테마 꽤 있음

    Composer

    • PHP용 의존성 관리 도구
    • package.json이 JS용이면, composer.json은 PHP용
    • 플러그인이나 테마에서 PHP 라이브러리(예: Monolog, Guzzle) 설치할 때 사용

    PHP는 Composer와 같은 PHP 기반 도구를 실행하는 데 필요한 언어이기 때문에, Composer를 설치하기 전에 PHP가 시스템에 올바르게 설치되어 있어야 해. PHP는 주로 웹 서버나 CLI 환경에서 사용되며, 설치 위치는 운영체제에 따라 다를 수 있어. 아래는 각 운영체제에 맞는 PHP 설치 방법과 경로 설정에 대한 안내야.

    1. Windows에서 PHP 설치 방법

    (1) PHP 다운로드

    1. PHP 공식 웹사이트로 가서 Non Thread Safe (NTS) 버전을 다운로드해. (보통 x64버전으로 다운로드하면 돼.)
    2. 다운로드한 ZIP 파일을 적당한 폴더에 압축을 풀어.

    추천 경로

    SVN (Subversion)

    • 깃 이전 세대의 버전 관리 시스템
    • 워드프레스 공식 플러그인 디렉토리 배포할 때 필수
      (지금도 워드프레스.org 플러그인 등록하면 SVN 저장소 배정해줌)

    Subversion (SVN) 설치: SVN을 시스템에 설치하면 이 문제를 해결할 수 있습니다.

    • Windows에서는 TortoiseSVN을 다운로드하여 설치할 수 있습니다.
    • 설치할 때 PATH에 SVN을 추가하는 옵션을 선택하세요.

    TortoiseSVN을 설치하면서 PATH에 SVN을 추가하는 방법을 아래에 설명드립니다.

    1. TortoiseSVN 다운로드 및 설치

    2. TortoiseSVN 설치 과정

    설치 중에 PATH에 SVN을 추가하는 옵션을 선택해야 합니다.

    1. 설치 시작:
      • 다운로드한 설치 파일을 실행합니다. 설치 마법사가 시작됩니다.
    2. 설치 옵션 선택:
      • “Next” 버튼을 클릭하여 설치 단계로 진행합니다.
    3. ‘Optional Components’ 설정:
      • 설치 옵션 화면에서 Optional Components 항목을 볼 수 있습니다. 여기에서 “Command Line Client Tools” 옵션을 선택하세요.이 옵션을 선택하면 TortoiseSVN의 명령줄 도구(svn)가 PATH에 자동으로 추가됩니다.
      중요: “Command Line Client Tools”를 선택하지 않으면 svn 명령어를 사용할 수 없습니다. 반드시 이 항목을 선택해야 합니다.
    4. 설치 완료:
      • 나머지 설정을 완료하고 설치를 진행합니다.
      • 설치가 완료되면, 시스템에 svn 명령어가 PATH에 추가되어 명령줄에서 사용할 수 있습니다.

    3. 설치 후 svn 명령어 확인

    TortoiseSVN을 설치한 후 svn 명령어가 제대로 작동하는지 확인하려면 명령 프롬프트(cmd)나 PowerShell을 열고 다음 명령어를 입력해 보세요:

    svn --version

    정상적으로 설치되었다면 SVN 버전 정보가 출력될 것입니다.

    4. TortoiseSVN 사용

    • 이제 svn 명령어를 명령줄에서 사용할 수 있으므로, Composer에서 요구하는 SVN을 사용할 수 있습니다.
    • 또한 TortoiseSVN은 Windows에서 파일 탐색기와 통합되어 SVN 리포지토리를 관리하는 GUI 도구로도 사용할 수 있습니다.

    이 방법으로 TortoiseSVN을 설치하고, svn 명령어를 PATH에 추가하여 문제를 해결할 수 있습니다.


    Setup

    repo 종속성을 설정합니다.

    yarn
    composer install
    yarn setup:tools

    로컬 환경을 시작합니다.

    yarn wp-env start

    설치 스크립트를 실행합니다.

    yarn setup:wp

    테마를 구축합니다.

    yarn workspaces run build

    C:\Users\thaum\dev\wporg-main-2022>yarn setup:tools yarn run v1.22.22 $ TEXTDOMAIN=wporg composer exec update-configs ‘TEXTDOMAIN’은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

    이는 Windows 환경에서 TEXTDOMAIN을 환경 변수로 설정하는 방식이 Unix/Linux 환경과 다르기 때문입니다.
    문제 핵심은 Windows CMD/PowerShell에서는 리눅스/유닉스 방식의 TEXTDOMAIN=wporg 같은 환경변수 선언+명령 실행이 안 돼서 발생하는 현상이야.

    This seems to be an issue with using Windows, it thinks TEXTDOMAIN is a command rather than setting the variable. Maybe try set TEXTDOMAIN=”wporg” then composer exec update-configs ?

    맞아, 슬랙에서 지적한 내용 정확해.
    **Windows 명령 프롬프트(cmd.exe)**에서는 리눅스/유닉스처럼 TEXTDOMAIN=wporg command 식으로 명령어 앞에서 환경변수를 설정하는 방식이 안 먹혀.
    그 대신 set TEXTDOMAIN=wporg 하고 나서 그 다음 줄에 명령어를 실행해야 돼.

    하지만 지금 문제는 yarn을 통해 실행하면 내부에서 다시 TEXTDOMAIN=wporg composer exec ... 식으로 실행하면서, 윈도우가 그걸 “TEXTDOMAIN이라는 명령어”로 오해한다는 데 있어.

    the dependencies seem to have installed correctly, the first error in red in your screenshot is expected sometimes, and running composer update fixes that.
    종속성이 올바르게 설치된 것 같습니다. 스크린샷에서 빨간색 첫 번째 오류가 발생할 수 있으며, composer update를 실행하면 이 문제가 해결됩니다.

    컴포저 업데이트는 할 필요가 있었는데 그래도 yarn setup:tools는 그대로임.

    잠깐 정리

    • 지금 에러는 Yarn이나 Composer 문제가 아님
    • Windows의 TEXTDOMAIN=wporg composer exec update-configs 구문 처리 문제

    방법 3: WSL 쓰기

    가장 깔끔하게 해결하려면 WSL(Windows Subsystem for Linux)로 넘어가는 것도 방법임.
    지금 워드프레스 공식 개발환경도 사실 유닉스 계열 기준으로 설계돼 있어서, wp-env나 Docker 연동도 WSL이 훨씬 깔끔하게 작동함.

    WSL2 설치하고 우분투 설치해서 dev 폴더 복사해오고, 거기서

    yarn setup:tools

    치면 100% 깔끔하게 될 거임.

    PS C:\Users\thaum\dev\wporg-main-2022> wsl --list --verbose
      NAME              STATE           VERSION
    * docker-desktop    Running         2

    현재 WSL에는 docker-desktop만 실행 중인 상태이고, Ubuntu나 다른 리눅스 배포판은 설치되지 않은 것 같습니다.
    > dev home에서 Ubuntu 24.04 LTS 설치

    WSL로 실행하더라도 윈도우 파일 시스템을 마운트해서 접근할 수는 있는데, 문제는
    스크립트가 기대하는 실행 환경경로 해석 방식 때문이에요.

    📌 정리하자면:

    • 현재 프로젝트 경로C:\Users\thaum\dev\wporg-main-2022인데,
      WSL에서는 이걸 /mnt/c/Users/thaum/dev/wporg-main-2022로 접근할 수 있어요.
    • 그러면 WSL 내 bash 환경에서 해당 디렉토리로 이동해서 composer, yarn, docker 같은 걸 실행하면
      Linux 기반 CLI 툴과 경로 규칙이 적용되기 때문에, 텍스트 도메인 설정 같은 것도 자연스럽게 먹힐 가능성이 높아짐.
    • 게다가 워드프레스 wp-env 설정이나 composer.json 안에서도 bash나 /bin/sh 전제가 걸려있는 경우가 많아서
      윈도우 PowerShell이나 CMD에서는 에러나는 게 WSL에서는 정상 동작하는 경우가 꽤 있음.

    윈도우에 설치된 php / node / yarn은 WSL에서 직접 쓸 수 없고,
    WSL 안에 별도로 설치해줘야 해.

    📦 WSL 안에 개발 툴 설치하기

    📌 php 설치

    sudo apt update
    sudo apt install php-cli
    

    📌 node & yarn 설치

    Node 버전 매니저인 nvm 쓰는 게 좋아.

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
    source ~/.bashrc
    nvm install --lts
    nvm use --lts
    npm install --global yarn

    설치 확인

    php -v
    node -v
    yarn -v
    composer -V

    composer도 없으면

    sudo apt install composer

    📌 그 다음에 다시 실행

    설치 끝나면 아까 했던 것처럼

    cd /mnt/c/Users/thaum/dev/wporg-main-2022
    composer install
    yarn
    yarn setup:tools

    이제 TEXTDOMAIN 에러 없이 정상 작동할 가능성이 높음.


    📌 정리

    지금까지 상황은

    • 윈도우 → WSL로 옮긴 건 잘했음
    • 근데 WSL 안에는 개발툴이 비어있어서 안 됐던 거
    • 위 방법으로 설치하면 끝
    • WSL 안에 설치한 php, node, yarn으로 /mnt/c/ 경로 파일 작업하는 거 가능함
    • 단, 윈도우 쪽 프로그램이랑 환경이 달라서 버전 차이, 설정 차이 있을 수 있음
    • 그리고 윈도우에서 돌리는 docker-desktop은 WSL에 docker 엔진 연결되므로, WSL 쪽 개발 환경은 docker 쓸 땐 편함

    📌 정리

    지금 상태는 yarn 실행은 됐는데 composer install이 덜 되어서 실행파일이 없어서 생긴 문제.
    composer install을 WSL 안에서 다시 돌리고 yarn setup:tools 다시 실행하면 해결.


    오케이! 아주 잘했어.
    결정적 단서가 나왔네.

    Bourne-Again shell script, ASCII text executable, with CRLF line terminators

    이게 문제야.
    CRLF 👉 윈도우 줄바꿈 방식이고, WSL (리눅스)은 LF 줄바꿈을 기대해.
    지금 WSL에서 저 쉘 스크립트 읽다가 CRLF 때문에 실행 못 하는 상황.


    🔧 해결법 ① — 줄바꿈 변환

    이 명령으로 LF로 변환해주자:

    dos2unix /mnt/c/Users/thaum/dev/wporg-main-2022/vendor/wporg/wporg-repo-tools/bin/update-configs

    만약 dos2unix가 없다면 먼저 설치:

    sudo apt update && sudo apt install dos2unix

    그리고 다시 실행해봐.


    🔧 해결법 ② — 프로젝트 전체 CRLF → LF 변환 (추천)

    사실 이 문제, wporg-main-2022 프로젝트를 git clone할 때 Windows용 줄바꿈(CRLF)으로 들어와서 그래.
    아예 프로젝트 전체를 한 번에 변환하는 것도 가능:

    find /mnt/c/Users/thaum/dev/wporg-main-2022 -type f -exec dos2unix {} +

    한 번만 해두면 앞으로 이런 문제 안 생김.


    📌 요약

    • 지금 CRLF 줄바꿈 때문에 WSL에서 실행 불가
    • dos2unix로 LF로 변환해주면 해결
    • 가능하면 프로젝트 전체 변환해두는 게 나음

    여기까지 하고 cmd랑 wsl ubuntu 번갈아가면서 작업해서 실행 성공했음.


    yarn wp-env start랑 wp-env start — 이 차이를 확실하게 짚고 넘어가자!

    📌 yarn wp-env start

    yarn 명령어로 package.json 안에 정의된 스크립트를 실행하는 것.

    예를 들어, package.json 안에 이렇게 돼 있다고 해보자:

    "scripts": {
      "wp-env": "wp-env",
      "start": "wp-env start"
    }
    

    이 경우

    yarn wp-env start
    

    1. wp-env 명령어를 실행하는 게 아니라
    2. yarn run wp-env를 실행해서 node_modules/.bin 경로에 있는 wp-env (혹은 글로벌 설치된 wp-env)를 찾아서
    3. start 명령을 전달하는 것.

    장점:

    • 로컬 프로젝트마다 설치된 wp-env 버전을 사용할 수 있어. (node_modules/.bin)
    • 전역 설치 안 해도 됨.

    📌 wp-env start

    직접 wp-env 명령어 실행
    이건 네 시스템에 글로벌로 설치된 wp-env를 의미함.

    npm install -g @wordpress/env
    

    이렇게 설치했을 때 가능하고,
    이때는 OS의 PATH에 등록된 전역 위치에서 wp-env를 실행해.

    단점:

    • 프로젝트마다 버전이 달라도 무조건 전역 설치된 걸 씀.
    • 의존성 충돌 가능성 있음.

    📌 결론

    yarn wp-env startwp-env start
    프로젝트 로컬에 설치된 wp-env 사용글로벌 설치된 wp-env 사용
    package.json 스크립트에 정의 가능전역으로만 실행 가능
    프로젝트마다 버전 관리 가능시스템 하나로 통일

    개발에서는 보통 yarn wp-env start 같은 방식으로
    프로젝트 로컬 버전으로 통제하는 게 안전하고 권장돼.


    현재 Composer에서 GitHub API 요청 횟수 제한이 초과되었기 때문에 패키지 정보를 가져오는 데 실패한 상태입니다. GitHub API의 요청 제한은 시간당 60회로 제한되며, 이 제한을 초과하면 일정 시간이 지나야 다시 요청할 수 있습니다. 그러나 이를 해결하려면 GitHub OAuth 토큰을 생성하여 API 요청을 인증된 상태로 보내는 방법이 있습니다.

    해결 방법:

    1. GitHub OAuth 토큰 생성: 먼저 GitHub에서 OAuth 토큰을 생성해야 합니다. 다음 링크로 가셔서 토큰을 생성할 수 있습니다: GitHub OAuth Token 생성 페이지
      • Token Description: Composer를 사용하는 날짜나 프로젝트와 관련된 설명을 입력할 수 있습니다.
      • Scopes: 공개 저장소만 접근하려면 아무 권한도 설정하지 않아도 되며, 비공개 저장소에 접근하려면 repo 권한을 선택해야 합니다.
    2. 토큰 입력: 생성한 토큰을 복사한 후, Composer에서 요청이 있을 때 토큰을 입력합니다. 해당 요청이 나타날 때, “Token (hidden)” 부분에 복사한 토큰을 붙여넣고 엔터를 누릅니다.
    3. OAuth 토큰 저장: 토큰은 C:/Users/thaum/AppData/Roaming/Composer/auth.json 파일에 저장되어, 이후 요청에 자동으로 사용됩니다. 따라서, 추가적인 인증 없이도 토큰을 사용할 수 있습니다.
    4. 기타 방법:
      • 대기: GitHub API의 요청 제한이 초기화될 때까지 기다리는 방법도 있습니다. 1시간마다 제한이 리셋되므로, 해당 시간이 지나면 다시 시도할 수 있습니다.

    요약:

    1. GitHub OAuth 토큰을 생성하고,
    2. Composer에서 요청 시 해당 토큰을 입력하면 API 요청 제한을 우회할 수 있습니다.
    3. 또는 제한 시간이 지나길 기다린 후 다시 시도할 수도 있습니다.

    New personal access token (classic)을 생성할 때 필요한 권한은 공개 저장소에 대한 접근 권한만 필요합니다. 따라서, 아래와 같은 권한만 선택하면 됩니다:

    1. public_repo: 공개 저장소에 접근할 수 있는 권한을 제공합니다. 이 권한은 GitHub에서 공개 저장소를 사용할 때 필요한 최소 권한입니다.

    이 외의 권한은 필요하지 않으므로, 기본적으로 public_repo만 선택하면 됩니다.

    단계별 선택 방법:

    1. Token description: 예를 들어, “Composer on Desktop-Jiwoon 2025-04-30 1803” 처럼 토큰의 용도를 설명하는 이름을 입력합니다.
    2. Expiration: 토큰의 만료 날짜를 설정합니다. 일반적으로 “No expiration”을 선택할 수 있습니다.
    3. Scopes 선택:
      • public_repo 선택
    4. Generate token: 토큰을 생성한 후, 제공된 Token을 복사하여 Composer에서 입력하면 됩니다.

    이렇게 선택 후, 생성된 토큰을 사용하여 Composer에서 인증을 진행하면 GitHub API 제한을 우회할 수 있습니다.

  • WordPress 블로그 개선: 사용자 정의 작성자 페이지 만들기

    WordPress 블로그 개선: 사용자 정의 작성자 페이지 만들기 – Gravatar 블로그의 번역입니다.

    작성자 페이지에는 게시물을 작성, 편집 또는 기여한 사람에 대한 정보가 포함되어 있습니다. 여기에는 일반적으로 이름, 사진, 짧은 약력, 소셜 미디어 링크 및 동일한 도메인에 게시된 모든 게시물 목록과 같은 항목이 포함됩니다.

    블로그가 있는 경우 일반적으로 항상 전담 작성자와 함께 할 페이지를 두는 것이 좋습니다. 이것은 여러 가지 이유로 중요하지만 주요 이유 중 하나는 콘텐츠의 신뢰성을 즉시 향상시킨다는 점입니다. 이름이 없는 익명의 사용자보다 신뢰할 수 있는 소프트웨어 엔지니어가 작성한 기술 문서를 읽는 것이 더 낫습니다!

    작성 페이지는 사용자가 콘텐츠를 읽고 상호 작용하도록 장려할 뿐만 아니라(콘텐츠 뒤에 실제 사람이 있다는 것을 알기 때문에) E-E-A-T(Expertise/전문지식, Experience/경험, Authoritativeness/권위, Trustworthiness/신뢰성)와 함께 검색 엔진 순위를 향상시키는 데에도 큰 도움이 됩니다.

    이제 작성자 페이지가 얼마나 중요한지 확신하게 되었으니 궁금한 점이 있을 것입니다: “작성자 페이지를 더 보기 좋고 매력적으로 보이게 하기 위해 사용자 정의할 수 있는 방법이 있을까요?”

    물론이죠!

    이를 돕기 위해 WordPress에서 작성자 템플릿을 사용자 정의하는 다양한 방법을 살펴보고, 사용자 정의 페이지를 만들고, 템플릿 태그를 사용하며, Gravatar와 같은 도구를 활용하여 작성자 페이지를 한 단계 끌어올리는 방법을 보여주는 이 유용한 가이드를 만들었습니다.

    기본 작성자 템플릿 사용자 지정 vs. 사용자 지정 페이지 만들기

    작성자 페이지를 개선하는 방법에는 두 가지 주요 접근 방식이 있습니다: 기본 작성자 페이지 템플릿을 사용자 정의하는 것과 사용자 정의 작성자 페이지를 처음부터 만드는 것입니다.

    두 가지 방법을 모두 살펴보겠습니다.

    기본 작성자 템플릿 사용자 정의

    이에 대해 자세히 알아보기 전에 게시물 작성자와 WordPress에 존재하는 ‘작성자’ 사용자 역할 사이에는 차이가 있다는 점을 언급하는 것이 중요합니다. 엄밀히 말하면, 블로그 게시물의 작성자는 관리자, 편집자, 기여자 및 작성자가 될 수도 있습니다. 따라서 우리가 작성자를 언급할 때는 특정 콘텐츠를 작성한 모든 사람을 의미한다는 점을 고려하세요.

    이제 기본 작성자 페이지로 들어가 보겠습니다. 여기에 포함된 정보는 특정 사용자 프로필의 데이터로, 다음과 같습니다:

    워드프레스의 사용자 정보 설정

    이름, 웹사이트, 자기소개(약력, 바이오)와 같은 정보를 추가할 수 있으며, 특정 Gravatar 프로필에 연결된 프로필 사진도 추가할 수 있습니다. Gravatar 프로필이 없는 경우 프로필 사진은 미스터리 인물로 표시됩니다.

    프론트 엔드(앞면)에서 작성자 페이지는 당신이 선택한 테마에 따라 다르게 표시됩니다. 예를 들어, Bloghash WordPress 테마를 사용하면 이렇게 표시됩니다:

    Bloghash 테마가 있는 WordPress의 기본 작성자 페이지의 예

    기본 작성자 템플릿을 사용자 정의하는 것은 사소한 변경사항에 적합하며 WordPress 사이트 전체에서 일관된 디자인을 유지하는 데 적합합니다. 템플릿 태그를 활용하면 추가 플러그인이나 커스텀 코드 없이도 사용 중인 테마와 관계없이 기본 템플릿을 수정할 수 있습니다.

    기본 템플릿을 사용자 정의하면 다음과 같은 이점이 있습니다.

    • 구현의 용이성: 기존 템플릿을 변경하는 것은 비교적 간단하며 광범위한 기술 지식이 필요하지 않습니다.
    • 통일된 디자인 유지: 기본 템플릿으로 작업하면 작성자 페이지가 사이트 디자인의 나머지 부분과 매끄럽게 조화를 이루도록 할 수 있습니다.

    그러나 이 접근방식에는 몇 가지 제한 사항이 있습니다:

    • 유연성이 떨어집니다: 기본 템플릿을 사용자 정의하는 것은 사용자 정의 작성자 페이지를 처음부터 만드는 것만큼 유연하지 않을 수 있습니다. 템플릿에 이미 있는 구조와 요소로 제한됩니다.
    • 테마 업데이트와 충돌할 가능성이 있습니다: 테마가 작성자 템플릿을 수정하는 업데이트를 받으면 사용자 정의 내용을 덮어쓰게 되어 다시 적용해야 할 수 있습니다.

    이러한 제한 사항에도 불구하고 기본 작성자 템플릿을 사용자 정의하는 것은 WordPress 사이트 전체에서 일관된 디자인을 유지하면서 그들의 작성자 페이지를 약간 개선하려는 사용자에게 빠르고 효과적인 솔루션이 될 수 있습니다.

    사용자 정의 작성자 페이지 만들기

    사용자 정의 작성자 페이지를 사용하면 디자인, 정보의 양 및 표시 방법을 완전히 제어할 수 있으며 사용자 참여를 위한 추가 기회도 제공됩니다. 이 페이지에는 특정 사용자에게 연결되는 별도의 페이지가 생성되며 해당 사용자의 이름을 클릭하면 해당 페이지가 표시됩니다. 

    기본 작성자 페이지와 달리 백엔드의 정보 필드에 제한을 받지 않고 거의 모든 것을 추가할 수 있습니다. 예를 들어 게스트 글 기여, 고객 추천글, 서비스에 대한 추가 정보, 기부 블록, 공유 버튼 등에 대한 사용자 정의 링크를 포함할 수 있습니다. 

    이러한 페이지의 유일한 단점은 설정 및 유지 관리에 더 많은 노력이 필요하며, 목표에 따라 기술 지식이나 외부 도구 및 플러그인이 필요할 수 있다는 것입니다. 하지만 그만한 가치가 있습니다.

    템플릿 태그를 사용하여 작성자 템플릿을 사용자 정의하는 방법

    WordPress 블로그의 디자인은 사용 중인 테마에 의해 정의되며, 테마는 다양한 템플릿으로 구성됩니다. 동적 콘텐츠를 가져오고 표시하기 위해 WordPress에 내장된 템플릿 태그 PHP 함수(기능)를 사용하여 블로그를 사용자 정의하고 페이지를 원하는 대로 정확하게 표시할 수 있습니다.

    다음 섹션에서는 코드 스니펫(조각)을 포함하여 작성자 페이지 사용자 정의를 위해 템플릿 태그를 사용하는 프로세스를 안내합니다.

    author.php 파일 만들기

    첫 번째 단계는 테마 디렉토리에 author.php 파일이 있는지 확인하고 그렇지 않은 경우 파일을 만드는 것입니다. 이 파일은 작성자 페이지의 레이아웃과 내용을 사용자 지정하는 데 사용할 파일입니다.

    작성자 정보에 대한 기본 템플릿 태그

    작성자 정보에 액세스하는 데 사용할 수 있는 몇 가지 태그는 다음과 같습니다.

    • the_author_meta(): 작성자 정보를 간단히 표시하려면 이 함수를 사용합니다.
    • get_the_author_meta(): 값을 반환하고 변수에 저장하려는 경우 사용합니다. 요청할 수 있는 값에는 admin_color, first_name, last_name, user_url, 그리고 nickname이 포함됩니.
    • get_the_author_posts(): 현재 작성자의 총 게시물 수를 검색하려면 이 함수를 사용합니다.

    템플릿 태그를 HTML 및 CSS와 결합

    아래 예시와 같이 echo 명령을 사용하여 웹사이트의 프론트엔드에 이 데이터를 표시할 수 있습니다.

    <div class="author-info">
    	<h2>About the Author</h2>
    	<p><strong>Name:</strong> <?php echo get_the_author_meta ('display_name'); ?></p>
    	<p><strong>Email:</strong> <?php echo get_the_author_meta ('user_email'); ?></p>
    	<p><strong>Bio:</strong> <?php echo get_the_author_meta ('description'); ?></p>
    </div>

    조건문 사용

    is_author 함수는 조건부 논리를 도입하여 페이지에 작성자가 있는지 확인하고 작성자가 있는 경우 해당 정보를 표시할 수 있습니다. 다음 형식을 사용합니다:

    <?php if ( is_author() ) : ?>
    // Your code here if it returns true
    <?php endif; ?>

    이 방법은 랜딩 페이지와 블로그 게시물이 동일한 구조를 갖는 매우 간단한 URL 구조를 가진 사이트에 이상적입니다.

    이를 get_the_author_meta() 명령과 함께 페어링하여 사용하면 위와 같이 작성자의 ID를 검색하여 프론트엔드에 해당 정보를 표시할 수 있습니다.

    Gravatar 통합을 통해 WordPress에서 사용자 정의 작성자 페이지 구축하기

    Gravatar 홈페이지

    Automattic에서 구축한 서비스인 Gravatar는 최소한의 노력으로 웹사이트에서 기능이 풍부하고 동적인 작성자 페이지를 만들 수 있는 강력한 솔루션을 제공합니다. WordPress는 이미 동일한 이메일로 로그인한 사용자의 Gravatar 프로필 사진을 사용하고 있지만 Gravatar의 Profiles-As-a-Service REST API를 활용하여 전체 사용자 프로필을 가져오고 완전히 사용자 정의된 작성자 페이지를 생성함으로써 이러 통합을 한 단계 더 발전시킬 수 있습니다.

    예를 들어, 저(로니)가 작성한 모든 블로그 게시물에는 제 Gravatar 페이지로 연결되는 링크가 있습니다.

    Gravatar 블로그 게시물의 작성자 링크 예

    이것은 사람들이 내 이름을 클릭하면 나에 대한 모든 중요한 정보를 입력한 내 그라바타 프로필로 리디렉션 되도록 하기 위한 것입니다.

    로니 버트 그라바타의 프로필

    그러나 Gravatar 통합의 이점은 단순히 작성자의 Gravatar 페이지에 링크하는 것 이상의 의미가 있습니다. Profiles-As-A-Service REST API를 활용하면 웹사이트에 Gravatar에서 직접 가져온 정보를 표시하는 사용자 지정 작성자 페이지를 만들 수 있습니다. 여기에는 몇 가지 장점이 있습니다:

    • 자동으로 동기화된 작성자 데이터: 새로운 작성자 또는 기여자가 Gravatar 프로필로 사이트에 가입하면 모든 데이터를 자동으로 가져옵니다. 여기에는 이름, 위치, 직책, 대명사, 약력, 다른 작업에 대한 중요한 링크, 검증된 소셜 미디어 계정 및 연락처 정보가 포함됩니다. 이렇게 하면 모든 사람, 특히 작성자가 전체 정보를 처음부터 입력할 필요가 없기 때문에 프로세스를 간소화할 수 있습니다.
    • 간소화된 작성자 페이지 생성: Gravatar의 API를 사용하면 미리 채워진 데이터에 액세스할 수 있으므로 수동으로 정보를 수집할 필요 없이 사용자 정의 작성자 페이지를 빠르게 구축할 수 있습니다. 모든 것이 원활하게 진행됩니다.
    • 데이터 일관성: 사용자 정의 작성자 페이지는 Gravatar 프로필에 연결되어 있으므로 Gravatar에서 작성자 정보를 변경하면 웹사이트에 자동으로 반영됩니다. 따라서 관리자와 IT 지원팀이 작성자 정보를 지속적으로 수동으로 업데이트할 필요가 없습니다.
    • 사전 검증된 작성자 정보: Gravatar는 연결된 소셜 미디어 계정 및 결제 링크와 같은 특정 사용자 데이터를 검증하고 심사합니다. 이렇게 하면 작성자가 자신이 주장하는 사람임을 보장할 수 있으므로 독자가 작성자와 더 쉽게 연결할 수 있고 기사의 신뢰성과 정확성이 향상됩니다.

    따라서 Gravatar를 활용하여 사용자 정의 작성자 페이지를 구축하려면 개발자용 설명서를 확인하세요.

    Jetpack 및 Gravatar로 WordPress Author Box 사용자 정의

    작성자 프로필의 가장 중요한 부분 중 하나는 bio(약력)입니다 – 이는 기사에 신뢰성을 부여하고 독자가 더 많은 게시물을 확인하거나 저자와 연결되도록 유도하는 것입니다. 잘 작성되었는지 확인하는 것 외에도 Jetpack 플러그인과 Gravatar 호버카드 통합을 통해 바이오의 디자인을 더욱 향상시킬 수 있습니다.

    Jetpack으로 작성자 정보 사용자 정의하기

    Jetpack 홈페이지

    Jetpack에는 작성자 페이지에 새로운 기능을 사용자 정의하고 추가할 수 있는 많은 추가 기능이 포함되어 있습니다.

    먼저, Gravatar와 완전히 통합되어 작성자 정보를 가져와 자동으로 업데이트합니다. 또한, WordPress 프로필에서 직접 가져온 모든 정보와 함께 단일 게시물 페이지에 작성자의 이름과 약력 또는 Gravatar 프로필을 표시할 수 있습니다.

    이 예에서는 블로그 게시물 옆의 사이드바에 Gravatar 프로필 위젯을 추가했습니다.

    Jetpack의 Gravatar 위젯

    Gravatar 호버 카드를 활성화하면 사람들이 마우스로 프로필을 가리키면 프로필의 미니 버전이 호버 카드로 표시됩니다.

    이 예에서는 다음과 같이 표시됩니다.

    Gravatar 호버 카드의 예

    Jetpack > 설정 > 토론으로 이동한 다음 “댓글 작성자의 Gravatars를 통해 팝업 명함 사용“이라는 옵션을 활성화하여 쉽게 활성화할 수 있습니다.

    Jetpack 설정에서 Hovercards 활성화

    특히 Jetpack 위젯과 함께 다른 많은 사용자 지정 옵션이 있습니다. 그래도 독자에게 부담을 줄 수 있으므로 단순하게 유지하고 너무 많은 요소로 페이지를 어지럽히지 않는 것이 좋습니다. 언제나 그렇듯이 균형이 핵심입니다.

    멋진 사용자 정의 작성자 페이지로 WordPress 사이트를 변환하십시오.

    사용자 정의 작성자 페이지는 작성자의 전문성을 보여주고, 독자와의 연결을 촉진하며, 사용자 경험을 향상시키는 데 필수적입니다. WordPress에서 사용자 정의 작성자 페이지를 만드는 방법에는 다양한 접근 방식이 있지만, Gravatar의 Profiles-As-a-Service REST API와 통합하는 것이 가장 효율적이고 효과적인 솔루션입니다.

    Gravatar의 API를 활용하면 시간과 노력을 절약하고, 데이터 정확성과 일관성을 보장하며, 원활한 사용자 경험을 제공하고, 블로그의 SEO 및 E-E-A-T를 향상시킬 수 있습니다. Gravatar를 WordPress 웹사이트와 통합하여 보다 연결되고 개인화된 사용자 경험을 향한 여정을 시작하는 방법에 대해 자세히 알아보세요.

  • 한국 워드프레스 커뮤니티에 합류하기

    한국 워드프레스 커뮤니티에 합류하는 완벽 가이드

    오늘 워드프레스 한국 커뮤니티에 참여하려는 분들을 위한 가이드를 정리해보려고 합니다.
    워드프레스를 사용하면서 궁금한 점을 나누거나 도움을 받을 수 있는 곳이 필요하지만, 정보가 산발적으로 흩어져 있어서 처음 접하는 분들은 어려움을 겪을 수 있죠.
    이 포스트에서는 공식적인 채널부터 비공식적인 모임까지 다양한 커뮤니티 참여 방법을 소개합니다. 특히 Slack과 페이스북 그룹, 카카오톡 오픈채팅 등 주요 플랫폼별로 안내드리겠습니다. 워드프레스 사용자라면 꼭 알아두면 좋을 정보들만 모았으니 끝까지 확인해보세요!

    워드프레스를 사용하다 보면 궁금증이 생기거나 도움이 필요할 때가 있죠. 하지만 국내 자료만으로는 체계적이거나 깊이 있는 정보를 찾기 쉽지 않은 것이 현실입니다.
    다행히 한국 워드프레스 사용자 모임이 존재하며, 다양한 커뮤니티에서 정보를 공유하고 있습니다.

    이제 한국 워드프레스 사용자 모임에 합류할 시간입니다! 이번 포스팅에서는 WordPress Korea Slack 및 한국 워드프레스 관련 커뮤니티에 참여하는 방법을 단계별로 정리해드립니다. 공식 채널부터 비공식 모임까지, 관련 커뮤니티에 가입하는 방법과 주의사항을 자세히 안내해 드리겠습니다.


    🔗 공식 커뮤니티

    WordPress 프로젝트의 공식 커뮤니케이션 플랫폼: Slack

    WordPress 프로젝트는 기존의 IRC(Internet Relay Chat) 대신 Slack을 주요 실시간 커뮤니케이션 플랫폼으로 채택하고 있습니다.

    Slack 커뮤니케이션은 코드, 디자인, 문서 등 WordPress 프로젝트에 기여하는 데 사용됩니다.

    한국 워드프레스 공식 커뮤니티


    Slack을 통한 WordPress 커뮤니티 가입 방법

    WordPress 프로젝트는 Slack을 통해 전 세계 워드프레스 사용자들과 소통합니다. 아래 가입 순서를 참고하세요:

    1. wordpress.org 로그인
      먼저 wordpress.org에 본인의 계정으로 로그인합니다.
    2. Making WordPress Slack 가입
      https://make.wordpress.org/chat/ 페이지를 방문하여, WordPress 팀의 Slack 워크스페이스 채널에 합류합니다.
    3. 계정 생성 확인
      가입 후 Slack 프로필을 확인하면, yourname@chat.wordpress.org 형태의 이메일 주소가 자동 생성된 것을 확인할 수 있습니다.
      • Gravatar에 특별한 이메일을 추가할 수 있습니다. @chat.wordpress.org
    4. WordPress Korea Slack 접속
      wordpress.org에 로그인 한 상태로 https://wpkr.slack.com/ 페이지에 접속하면 이미 로그인 된 상태로 나타납니다. 이때 우측 상단의 “계정 생성” 버튼을 클릭하여 가입 절차를 완료합니다.
      • WordPress Korea Slack 가입 조건: WordPress.org 계정이 필요합니다.
      • Slack 환경설정에서 언어를 한국어로 변경하면 UI 인터페이스가 한글로 표시됩니다.

    참고:
    기본적으로 @chat.wordpress.org로 발송되는 인증 메일은 wordpress.org에 연동된 (예: Gmail, 네이버 등) 계정의 inbox에서 확인할 수 있습니다. Slack이나 wordpress.org 내 별도의 메일 수신함이 없으니 혼란스러워하지 않으셔도 됩니다.


    📢 추가 정보 및 기타 커뮤니티

    페이스북 그룹 & 페이지

    💬 비공식 채널: 카카오톡 & 디시인사이드

    1. 카카오톡 오픈채팅
    2. 디시인사이드 워드프레스 갤러리

    마무리

    한국 워드프레스 커뮤니티는 단순한 정보 공유를 넘어, 함께 성장하고 배울 수 있는 소중한 공간입니다. 각종 채널과 커뮤니티에 참여하여 당신만의 워드프레스 경험과 지식을 쌓아가시길 바랍니다.

    혹시 가입 과정에서 혼란스러운 부분이 있더라도, 다른 커뮤니티 회원들과 함께 해결해 나갈 수 있으니 부담 없이 문의해 보세요!

    자, 이제 한국 워드프레스 사용자 모임에 멋지게 합류하시길 바랍니다. 워드프레스의 세계는 여러분의 참여를 기다리고 있습니다!

    워드프레스는 혼자서 모든 문제를 해결하기 어려운 플랫폼입니다. 커뮤니티에 참여해 지식을 나누고, 더 많은 사람들과 연결해보세요. 이 포스팅이 여러분의 워드프레스 여정에 도움이 되길 바랍니다! 🚀


    함께 읽으면 좋은 글:

    • [워드프레스 초보자를 위한 플러그인 추천 TOP 5]()
    • [내 사이트 속도 올리는 워드프레스 최적화 팁]()

    지금 한국 워드프레스 커뮤니티에 대한 깊이 있는 대화가 오가고 있는데, 몇 가지 중요한 포인트가 보이네.

    1. Kopress.kr의 역할
      • 현재 한국에서 워드프레스 사용자 커뮤니티의 중심 역할을 할 수 있는 사이트는 kopress.kr가 유력하지만, 실제로 활발한 활동이 페이스북 그룹으로 이동한 상태.
      • 예전에 블로그 모아보기 기능을 계획했지만, 구현되지 않은 상태.
      • 액티비티펍이나 프렌즈 플러그인을 이용해 페디버스 스타일로 접근하는 것도 하나의 방법. 하지만, 실제 참여자가 얼마나 될지는 미지수.
    2. 운영상의 어려움
      • Kopress는 초기에 운영진과 몇몇 지인들이 만든 커뮤니티로, 당시 bbPress를 활용해 포럼 형태로 운영했지만, 지원하는 테마가 부족해 디자인/퍼블리싱 문제가 있었음.
      • 현재는 개인 서버에서 유지 중이며, 장기적인 호스팅 및 관리 지원이 부족한 상황.
    3. 커뮤니티 확장 가능성
      • 한국 워드프레스 커뮤니티를 더 활성화하려면, 기존의 Slack, 페이스북 그룹, 카카오톡 오픈채팅 외에도 페디버스 기반의 분산형 네트워크 모델을 시도해볼 가치가 있음.
      • 워드프레스의 블록 기반 생태계를 활용해, 워드프레스 관련 블로그 및 콘텐츠를 자동으로 수집·공유하는 구조도 가능함.
      • 문제는 유지보수와 운영 리소스, 즉 꾸준히 관리할 사람이 있어야 한다는 점.

    🔥 대안적 접근법

    • Kopress가 기존의 포럼 모델을 유지하는 대신, 플러그인을 활용한 자동화 콘텐츠 큐레이션 방식으로 전환하면 어떨까?
    • ActivityPub, Friends, 또는 IndieWeb 기반의 블로그 연동을 활용하면, 중앙 서버 부담 없이 커뮤니티 네트워크를 형성할 수도 있음.
    • 다만, 이런 시도를 하려면 현재 운영진의 동의와 추가적인 개발 리소스가 필요함.

    이런 방향성이라면 “워드프레스 한국 커뮤니티의 미래” 같은 주제로 좀 더 논의를 확장해볼 수도 있겠는데? 😃
    혹시 생각해둔 추가적인 아이디어가 있으면 공유해줘!


    커뮤니티 참여하기

    만약 워드프레스 밋업(Meetup)이나 워드캠프(WordCamp)를 직접 조직하거나 참여하고 싶다면, 커뮤니티 블로그에서 관련 정보를 확인하는 것이 좋습니다. 여러 그룹이 이벤트 지원, 교육 프로그램 개발 및 커뮤니티 활성화를 위해 노력하고 있습니다.

    Meetup (밋업)

    워드프레스와 관련된 공식적인 지역/국가별 모임 중 워드캠프가 아닌 모임은 대부분 Meetup.com을 통해 운영됩니다.

    밋업은 지역 워드프레스 사용자들이 서로 모여 아이디어를 공유하고, 질문을 나누며 도움을 주고받는 기회를 제공합니다.

    ‘WordPress’라는 키워드로 Meetup.com에서 검색하면 가까운 지역의 관련 모임을 찾을 수 있습니다.

    WordCamp (워드캠프)

    워드캠프는 워드프레스와 관련된 모든 주제를 다루는 캐주얼한 지역 중심의 컨퍼런스입니다. 워드프레스 커뮤니티가 한자리에 모여 한 해 동안 배운 내용을 공유하고, 경험을 나누는 자리입니다.

    워드프레스 이벤트와 워드캠프에 대하여

    워드캠프와 워드프레스 관련 이벤트는 단순한 기술 컨퍼런스를 넘어, 창의성, 학습, 네트워킹의 중심지 역할을 합니다. 사용자, 온라인 전문가, 창업가들이 한자리에 모여 지식을 교환하고, 혁신적인 아이디어를 공유하며, 워드프레스를 기반으로 한 다양한 비즈니스 기회를 창출합니다.

    워드프레스는 전 세계 웹사이트의 43% 이상을 구동하는 무료 오픈소스 소프트웨어이며, 이러한 이벤트는 사용자들에게 새로운 기술과 정보를 습득할 수 있는 기회를 제공합니다.

    참가 대상

    워드프레스 이벤트는 다음과 같은 다양한 분야의 사람들에게 유익합니다.

    • 워드프레스 사용자
    • 학생
    • 디자이너
    • 마케터
    • SEO 전문가
    • 카피라이터
    • 커뮤니티 관리자
    • 개발자
    • 비즈니스 소유자

    이벤트는 급변하는 기술 환경에서 최신 트렌드를 익히고, 전문성을 향상시키며, 비즈니스 성장을 지원하는 데 중점을 둡니다.

    주요 주제

    워드프레스 관련 이벤트에서는 다양한 주제를 다룹니다. 대표적인 주제는 다음과 같습니다.

    • 콘텐츠 제작
    • SEO (검색 엔진 최적화)
    • 디지털 마케팅
    • 웹 디자인
    • 고급 개발 기술
    • 프로젝트 사례 공유
    • 온라인 비즈니스 솔루션
    • 에이전시 및 엔터프라이즈 솔루션
    • 전자상거래 (e-commerce)
    • 커뮤니티 구축
    • 인공지능 (AI) 활용

    경험 수준에 관계없이 워드캠프 및 기타 워드프레스 이벤트는 워드프레스를 효과적으로 활용하고, 유사한 관심사를 가진 사람들과 연결되며, 경력을 향상시키는 데 큰 도움이 될 것입니다.

  • What is “rel=me”?

    It sounds like you’re interested in setting up a “rel=me” link for your profile on the Fediverse. This is a great way to verify your identity across different platforms. Here’s a simple guide to help you:

    What is “rel=me”?

    The rel="me" attribute is used in HTML links to indicate that the linked URL is another profile or identity of the same person. This is commonly used for identity verification in decentralized social networks like the Fediverse.

    How to Add “rel=me” to Your Profile

    1. Edit Your Profile HTML:
      • Locate the section of your profile where you can add custom HTML or links.
      • Insert the following code, replacing https://your-other-profile-url.com with the URL of your other profile: Copy the code<a href="https://your-other-profile-url.com" rel="me">My Other Profile</a>
    2. Verify the Link:
      • Ensure that the linked profile also has a link back to your original profile with the rel="me" attribute. This creates a bidirectional link, which is often required for verification. Copy the code<a href="https://your-original-profile-url.com" rel="me">Back to Original Profile</a>

    Example

    If you have a profile on Mastodon and another on a personal website, your Mastodon profile might include:

    Copy the code<a href="https://yourwebsite.com" rel="me">My Website</a>
    

    And your website might include:

    Copy the code<a href="https://mastodon.social/@yourusername" rel="me">My Mastodon Profile</a>
    

    Benefits

    • Identity Verification: Helps verify your identity across different platforms.
    • Trust Building: Builds trust with your followers by showing interconnected profiles.

    Feel free to reach out if you need more detailed instructions or have any questions about setting this up!

    프로필 설정 – Mastodon 문서

  • GPTBot 크롤링 차단하기: 소규모 웹사이트를 보호하는 방법

    최근 몇 차례 사이트가 다운되는 일이 있었습니다. 처음에는 단순히 사용자 유입 증가 때문이라고 생각했지만, 트래픽 리셋을 반복하면서 상세 통계를 확인할 필요성을 느꼈습니다. 분석 결과, 특정 IP와 User-Agent를 가진 봇이 비정상적으로 높은 전송량을 발생시키고 있었으며, 그 주범이 OpenAI의 웹 크롤러 GPTBot이라는 것을 발견했습니다.

    GPTBot은 OpenAI에서 운영하는 웹 크롤러로, 웹페이지를 수집하여 AI 모델 학습에 활용합니다. 그러나 소규모 웹사이트의 경우, 이런 크롤링이 DDoS 공격처럼 작용하여 서버에 과부하를 유발하고, 트래픽 비용 부담을 운영자에게 전가시키는 문제를 일으킬 수 있습니다.


    1. GPTBot이란?

    GPTBot은 OpenAI가 AI 모델 학습을 위해 만든 웹 크롤러입니다. OpenAI에 따르면, GPTBot은 개인정보 및 기타 정책을 위반하는 데이터를 걸러내며, 웹사이트 소유자는 robots.txt 파일을 통해 GPTBot의 접근을 차단할 수 있습니다.

    GPTBot User-Agent 정보

    GPTBot의 User-Agent는 다음과 같은 형태를 가집니다:

    Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.0; +https://openai.com/gptbot)
    

    이 외에도 OpenAI에서 운영하는 다양한 크롤러 및 제휴 크롤러가 있을 수 있으므로, 로그 분석을 통해 정확한 User-Agent를 확인하는 것이 중요합니다.

    GPTBot 공식 문서: OpenAI 크롤러 개요 – OpenAI API


    2. 모질라(Mozilla)와 User-Agent 구조

    웹 브라우저와 봇들은 특정한 User-Agent 문자열을 사용하여 자신을 식별합니다. GPTBot도 일반적인 브라우저와 유사한 User-Agent 형식을 따르지만, “GPTBot/1.0” 과 같은 키워드로 구별할 수 있습니다.

    User-Agent 예시:

    • 일반 사용자 브라우저:
      • Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
    • GPTBot:
      • Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.0; +https://openai.com/gptbot)

    3. robots.txt로 웹 크롤러 차단하기

    robots.txt는 검색 엔진 및 크롤러가 웹사이트를 크롤링할 때 따르는 규칙을 정의하는 파일입니다. 이를 활용하여 GPTBot을 차단할 수 있습니다.

    robots.txt 설정 방법

    1. 워드프레스 관리자 페이지 접속
    2. Yoast SEO 플러그인 사용 시:
      • “도구” → “파일 편집기” → robots.txt 수정
      • 또는 “설정” → “고급” → “크롤링 최적화” → “OpenAI GPTBot 차단” (Premium 버전 필요)
    3. FTP 또는 파일 관리자에서 robots.txt 파일 직접 수정

    아래 내용을 robots.txt 파일에 추가하면 GPTBot을 차단할 수 있습니다:

    User-agent: *
    Allow: /
    Sitemap: https://travel-in-busan.com/sitemap_index.xml
    
    User-agent: GPTBot
    Disallow: /
    

    이렇게 설정하면 OpenAI의 GPTBot이 사이트를 크롤링하지 못하도록 차단됩니다.

    주의: robots.txt는 모든 봇이 반드시 따라야 하는 강제적인 규칙이 아닙니다. OpenAI는 이를 준수하지만, 다른 AI 크롤러(예: Perplexity AI)는 이를 무시하는 경우가 있습니다.


    4. 기타 대응 조치

    1) 웹 서버 보안 설정 강화

    • Café24 호스팅을 사용하는 경우, 보안 관리 > 봇 트래픽 차단 기능 활용
    • 방화벽(WAF)에서 특정 User-Agent 차단

    2) 로그 모니터링

    AI 크롤러의 크롤링 여부를 확인하려면 서버 로그를 정기적으로 점검해야 합니다.

    • access.log 또는 error.log에서 GPTBot의 User-Agent를 검색
    • 비정상적인 요청이 많다면 추가적인 방어 조치 필요

    3) Cloudflare 및 방화벽(Firewall) 활용

    • Cloudflare의 “봇 관리” 기능을 활용하면 AI 크롤러를 차단할 수 있음
    • 특정 User-Agent 및 IP 대역을 차단하는 규칙을 설정

    5. 결론

    소규모 웹사이트 운영자에게 AI 크롤러는 예상치 못한 트래픽 부담을 유발할 수 있습니다. 특히 GPTBot과 같은 AI 크롤러가 웹사이트를 무자비하게 크롤링할 경우, 서버 과부하 및 트래픽 비용 문제가 발생할 수 있습니다.

    이를 방지하기 위해서는 robots.txt 설정, 로그 모니터링, 방화벽 규칙 적용 등 적극적인 보안 조치가 필요합니다.

    AI 기업들이 데이터 수집을 위해 웹사이트에 접속할 때, 사이트 운영자의 허락을 받는 것이 더욱 중요해지고 있습니다. 웹사이트를 보호하기 위해 지속적인 모니터링과 차단 조치를 수행하는 것이 필요합니다.


    6. 참고 링크

    GPTBot 크롤링으로 인해 사이트 운영에 부담을 느끼고 있다면, 위의 방법들을 활용하여 사이트를 보호하세요!

  • 서브컬처 페디버스 소개: Misskey와 Pawoo

    서브컬처 페디버스 소개: Misskey와 Pawoo

    페디버스(Fediverse)는 탈중앙형 소셜 네트워크 플랫폼들의 집합체로, 서로 다른 서버 간의 상호작용이 가능하도록 설계되었습니다. 특히, 일본 서브컬처와 밀접한 관계를 가진 플랫폼인 MisskeyPawoo는 서브컬처 팬들 사이에서 주목받고 있습니다.

    misskey.io 가입 디시


    Misskey.io: 탈중앙형 소셜 네트워크의 매력

    Misskey는 2014년 일본의 소프트웨어 엔지니어 Shinoda “syuilo1” Eiji가 만든 오픈 소스 기반의 소셜 네트워크 플랫폼입니다. Misskey는 ActivityPub 프로토콜을 활용하여 다양한 서버 간 상호작용을 지원하며, 분산형 플랫폼으로서의 장점을 제공합니다.2

    • 주요 기능:
      • 노트(Note): 유저의 글을 “노트”라 부르며, 최대 3,000자까지 작성 가능하며 이미지, 동영상 등 다양한 미디어 파일을 첨부할 수 있습니다.
      • 테마: 사용자 지정 테마로 인터페이스를 커스터마이징 가능하며, 다크 모드도 지원.
      • 드라이브: 업로드한 파일을 관리할 수 있는 저장 공간 제공.
      • 리액션: 다양한 감정을 표현할 수 있는 리액션 기능.
    • 장점:
      • 서브컬처 친화성: 일본 오타쿠 문화 기반으로 다양한 창작자가 Misskey를 사용.
      • 주 개발자부터 일본인 오타쿠이고, 대형 서버인 Misskey.io가 일본에 법인을 둔 덕에 탈중앙형 SNS 서버 중에서 일러스트 검열이 느슨하고 서브컬처 친화적이다. 때문에 2023년 7월 트위터 API 사용 제한 사태 이후 X의 대체재를 찾는 과정에서 동인 만화가나 일러스트레이터는 대다수가 미스키 이주용 계정을 만들어 둔 상태이다.
      • NSFW 플래그(민감한 플래그)가 필요한 기준 – Misskey.io 지원
      • 현대적인 웹 UI: 마스토돈에 비해 직관적이고 현대적인 인터페이스 제공.
    • 단점:

    일본에서 Misskey가 떠오른 배경

    Misskey는 일반적으로 Fediverse의 일부로 간주됩니다.3 플래그십 Misskey 서버인 Misskey.io는 2019년 4월 15일에 시작되었습니다. Misskey는 2022년 일론 머스크가 트위터를 인수한 이후, 마스토돈과 블루스카이와 함께 트위터의 잠재적 대체품으로 주목받고 있습니다.

    2023년 7월 트위터 API 사용 제한 사태4

    일본은 한국과는 비교가 안 될 정도로 상황이 심각했습니다. 한국은 다양한 인터넷 커뮤니티로 분화되어 트위터 사용자가 많지 않았던 반면, 일본에서는 트위터가 국민 SNS로 자리 잡고 있었습니다. 개인뿐만 아니라 정치인, 사기업, 공기업, 학교 등도 트위터를 공지용으로 사용했으며, 유튜버나 버튜버도 트위터를 주요 소통 창구로 활용했습니다. 이 때문에 트위터 마비로 국가적 혼란이 발생했습니다.

    이 사태 이후 Misskey와 같은 탈중앙형 플랫폼으로 이동하려는 움직임이 나타났습니다. 특히, 머스크의 트위터 인수 직후부터 대체제로 거론되던 Misskey는 일본 서브컬처 팬들과 창작자들 사이에서 인기를 끌기 시작했습니다. 유튜브 커뮤니티를 사용하는 버튜버들도 이 플랫폼을 통해 공지사항을 갱신하는 방향으로 나아갔습니다.

    주요 Misskey 인스턴스 소개5

    • misskey.io: Misskey의 메인 개발자6가 운영하는 중심 인스턴스. 노트 수와 유저 수에서 1위를 기록하며, 일본어 외의 언어를 쓰는 유저도 활동 중입니다. 2023년 7월 트위터 사태로 접속자가 폭주하며 일본 국외에서 신규 가입이 제한되었으나 기존 계정 활동은 가능합니다.
    • 한국어 인스턴스:
      • stella.place: 유저 4,439명, 노트 1,228,415개로 한국어 Misskey 서버 중 가장 활성화된 인스턴스.
      • daepi.so: 소스 코드 수정 없이 순정 Misskey 서버로 운영 중.
      • hoto.moe: 미국에 법인을 두고 일본에 서버를 둔 한국어 인스턴스. 인스턴스 하나에 3개국이 엮여있다. 폐업한 아케이즘의 당시 대표자가 운영에 참여하고 있고, 그래서 그런지 리듬게임을 좋아하는 사람이 많이 있는 듯하다. 모든 사용자가 커스텀 이모지 등의 관리 권한을 가지고, 드라이브 1TB를 제공하는게 다른 인스턴스와 구별되는 특징이다. 시간대에 따라 로컬 타임라인에 일본어 사용자가 많이 보이는 편이다. 공지도 연관된 3개국의 언어로 올리는 편.
    • 서버 목록 | Misskey Hub

    Pawoo: Pixiv 기반의 서브컬처 플랫폼

    Pawoo는 Pixiv7에서 만든 마스토돈 기반의 인스턴스로, 서브컬처 콘텐츠와 성인물 창작자들에게 친화적인 환경을 제공합니다. 2017년에 설립된 이후 빠르게 사용자 기반을 확장하며 마스토돈 생태계에서 중요한 위치를 차지하고 있습니다.

    정보 – Pawoo – 創作活動や自由なコミュニケーションを楽しめる場

    • 주요 특징:
      • Pixiv 계정 연동: Pixiv 사용자들에게 친숙한 환경 제공.
      • NSFW 콘텐츠 관리: 성인물 및 창작물에 대해 자유로운 게시 환경 제공.
      • 미디어 타임라인: 사용자들에게 시각적인 콘텐츠를 편리하게 보여주는 기능.
    • 장점:
      • 서브컬처 친화성: 일본 서브컬처 중심의 콘텐츠 허브 역할 수행.
      • 대규모 사용자 기반: 약 78만 명의 활성 사용자.
    • Pawoo의 성장 배경:
      • Pawoo는 2017년 4월 14일 Pixiv 사에 의해 설립되었습니다. 설립 직후 3일 만에 사용자 40만 명을 기록하며 마스토돈 인스턴스 중 사용자 랭킹 1위를 달성했습니다. Pawoo의 성공은 Pixiv의 홍보 효과 덕분에 가능했으며, 마스토돈 자체의 인지도를 높이는 데 기여했습니다.
      • Pawoo는 특히 성인물 창작자들의 이주로 유명합니다. 2019년 UN의 가상 미성년 캐릭터 콘텐츠 규제 강화와 트위터 및 텀블러의 검열 강화로 인해 일본 및 영미권의 성인 콘텐츠 창작자들이 Pawoo로 이주하였습니다.8 Pawoo는 Pixiv와 마찬가지로 이러한 콘텐츠에 대해 느슨한 검열 정책을 유지하고 있습니다.9
    • 단점:
      • 커스터마이징 문제: 자체 기능이 많아 최신 마스토돈 버전 업데이트가 느림.
      • 서버 간 연결 문제: 일부 다른 서버와의 상호작용에서 제한이 있을 수 있음.
      • 법적 문제: Pawoo의 미디어가 다른 서버에 저장될 경우 법적 문제가 발생할 가능성이 있습니다. 이에 따라 많은 서버가 Pawoo의 미디어를 거부하거나 침묵 처리하고 있습니다.
      • 특히 성인물 업로드 규제가 없는 특성과 타 서버 그림을 캐시해 저장하는 마스토돈의 특성이 만나 Pawoo의 미디어를 거부처리하지 않으면 음란물이 서버에 저장되어 추후 법적인 문제가 생길 수 있어 대다수의 서버에서 Pawoo는 미디어 거부나 심한 경우 침묵 처리되어 있어 교류시 심각한 문제점이 된다. 또한 Misskey 계열 인스턴스는 Pawoo의 커스터마이즈 관련해서 문제가 있는지 제대로 툿이 수신이 안 되는 경우가 있는 것 같다.
    • 커스텀 기능:
      • Pixiv 계정 연계.
      • 미디어 타임라인 제공.
      • 단일 칼럼 모드.
      • 계정 추천 기능.

    Misskey와 Pawoo, 어떤 플랫폼을 선택할까?

    • Misskey 추천 대상: 다양한 기능과 현대적인 UI를 선호하며, 다양한 서버 간 상호작용을 중요하게 생각하는 사용자.
    • Pawoo 추천 대상: Pixiv와의 연동이 필요하며, 서브컬처 중심의 커뮤니티에 관심이 있는 창작자.

    서브컬처 페디버스는 중앙화된 SNS와는 다른 자유로운 환경을 제공합니다. Misskey와 Pawoo 모두 서브컬처 팬들에게 매력적인 플랫폼으로 자리 잡고 있으며, 각자의 필요에 맞는 플랫폼을 선택하는 것이 중요합니다. 당신은 어떤 플랫폼을 선택하시겠습니까?

    1. syuilo (syuilo) ↩︎
    2. Misskey Hub – Misskey 프로젝트 공식 홈페이지 ↩︎
    3. Misskey – 위키백과, 우리 모두의 백과사전 ↩︎
    4. 2023년 7월 트위터 API 사용 제한 사태 – 나무위키 ↩︎
    5. Misskey – 나무위키 ↩︎
    6. [2025 년 令和 최신판 방수 태양계 만성 기침]:syuilo: (@syuilo) | Misskey.io ↩︎
    7. #pixiv 今話題のマストドンはじめたよ!pixivがPawooをリリース! – pixiv事務局의 일러스트 – pixiv ↩︎
    8. 마스토돈(SNS) – 나무위키 ↩︎
    9. Pawoo – 나무위키 ↩︎