WordPress용 이커머스 플러그인 WooCommerce에 앱을 연결하여 스토어 상품, 주문, 고객, 쿠폰, 리포트를 읽고 관리합니다.
앱을 WooCommerce에 연결하기
WordPress용 이커머스 플러그인인 WooCommerce에 앱을 연결하여 스토어 상품, 주문, 고객, 쿠폰, 리포트를 읽고 관리하세요.
WooCommerce는 직접 제어하는 인프라에서 온라인 스토어를 운영할 수 있는 오픈 소스 WordPress 이커머스 플러그인입니다. WooCommerce connector를 사용하면 Lovable 앱이 WooCommerce REST API를 통해 스토어 데이터를 읽고 관리할 수 있습니다. WooCommerce 스토어 기반의 스토어프런트 대시보드, 내부 운영 도구, 상품 관리 앱, 고객 서비스 워크플로에 적합합니다.
WooCommerce를 연결하면 앱은 다음 작업이 가능합니다:
- 상품, 변형 상품, 카테고리, 재고 목록 조회 및 관리
- 주문, 환불, 쿠폰, 고객 레코드 읽기 및 업데이트
- 매출, 주문 처리, 상품, 고객 기반의 대시보드 구축
- WooCommerce REST API로 구동되는 내부 스토어 admin 도구 생성
- WooCommerce 데이터를 활용한 스토어 워크플로 자동화
WooCommerce connector는 WooCommerce 스토어의 REST API consumer key와 secret을 사용합니다. 스토어가 WooCommerce에서 운영되고 Lovable 앱이 스토어 운영에 안전한 서버 사이드 접근이 필요할 때 적합합니다.
주요 활용 사례 및 예시 앱
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 스토어 운영 대시보드 | Use WooCommerce and build a dashboard that shows today's orders, revenue, low-stock products, and fulfillment status. | 운영자가 스토어 상태를 한 곳에서 모니터링합니다. 주문, 상품, 리포트를 읽어 팀이 일별 성과를 추적하고 문제에 신속히 대응할 수 있게 합니다. |
| 재고 관리 앱 | Use WooCommerce and build an inventory app that lists products, filters by stock status, and updates stock quantities. | 맞춤 인터페이스에서 상품 재고를 최신 상태로 유지합니다. 상품과 변형 상품을 가져와 재고 부족 항목을 강조하고 WooCommerce를 통해 재고를 업데이트합니다. |
| 고객 서비스 콘솔 | Use WooCommerce and build a support console where agents can search customers, view orders, and issue refunds. | 지원팀이 스토어 문의에 더 빠르게 응답합니다. 고객 및 주문 레코드를 검색하고 구매 내역을 표시하며 주문 지원을 위한 WooCommerce 작업을 수행합니다. |
| 쿠폰 캠페인 관리자 | Use WooCommerce and build a coupon manager for creating, listing, and tracking discount codes. | WordPress admin을 열지 않고 프로모션을 관리합니다. 쿠폰을 읽고 업데이트하여 활성 캠페인을 표시하고 운영자가 사용 현황을 검토할 수 있게 합니다. |
| 상품 카탈로그 편집기 | Use WooCommerce and build a product catalog editor for updating product descriptions, prices, categories, and images. | 팀이 맞춤 워크플로에서 카탈로그 세부 정보를 관리합니다. 상품을 읽고 API 키의 권한 범위 내에서 WooCommerce를 통해 업데이트를 전송합니다. |
| 주문 처리 추적기 | Use WooCommerce and build a fulfillment tracker that groups open orders by status and flags delayed shipments. | 주문 데이터를 주문 처리 큐로 전환합니다. 주문 상태를 읽어 우선순위별로 업무를 분류하고 처리가 필요한 주문에 집중된 화면을 제공합니다. |
| 매출 리포트 앱 | Use WooCommerce and build a sales report that compares products, customers, and coupon performance over time. | WooCommerce 데이터로 스토어 분석을 생성합니다. 리포트, 주문, 쿠폰을 읽어 추세와 내보낼 수 있는 요약본을 표시합니다. |
WooCommerce 연결하기
workspace admin 및 owner가 WooCommerce를 연결할 수 있습니다.
서로 다른 REST API 키로 여러 WooCommerce 연결을 만들 수 있습니다. 환경 분리(예: 개발 환경과 운영 환경), 여러 스토어 연결, 권한이 다른 키 사용이 필요할 때 유용합니다.
연결이 생성되면 workspace의 모든 프로젝트에서 WooCommerce를 사용할 수 있습니다. 프로젝트를 빌드하는 누구든 Lovable 채팅에서 자신의 프로젝트를 연결하도록 요청할 수 있습니다.
사전 요건
WooCommerce를 연결하기 전에 다음을 준비하세요:
- HTTPS가 활성화된 WooCommerce 스토어
- WooCommerce 설정을 관리할 수 있는 WordPress admin 계정
- REST API 라우트를 위한 WordPress 퍼머링크 설정 (Plain 아닌 형식)
- WooCommerce REST API consumer key 및 consumer secret
- Lovable workspace owner 또는 admin 역할
이 connector를 통한 모든 API 요청은 WooCommerce 스토어에서 실행됩니다. 호스팅, 플러그인, WooCommerce 관련 비용은 Lovable 외부에서 처리됩니다.
1단계: WooCommerce REST API 키 발급
WooCommerce REST API 키로 Lovable 앱이 스토어에 인증합니다. WooCommerce에서 선택한 키 권한이 연결에서 수행할 수 있는 작업을 제어합니다.
WooCommerce REST API 키를 생성하려면 다음을 따르세요.
WooCommerce 설정 열기
연결할 스토어의 WordPress admin 대시보드에 로그인하세요.
REST API 키 열기
WooCommerce → Settings → Advanced → REST API로 이동하세요.
키 추가
Add key를 클릭하세요. 예를 들어 Lovable integration과 같이 설명을 입력하고 키를 소유할 WordPress 사용자를 선택하세요.
권한 선택
앱에 필요한 권한을 선택하세요:
- Read: 대시보드, 리포트, 검색 등 읽기 전용 앱에 사용하세요.
- Read/Write: 상품, 주문, 쿠폰, 고객, 환불, 재고를 생성하거나 업데이트해야 할 때 사용하세요.
자격 증명 생성 및 복사
Generate API key를 클릭한 뒤 Consumer key와 Consumer secret을 복사하세요. WooCommerce는 consumer secret을 한 번만 표시합니다.
Consumer key와 consumer secret은 비밀번호와 같습니다. 안전하게 보관하고 절대 공개하지 마세요. 다음 단계에서 필요합니다.
자세한 지침은 WooCommerce 문서를 참고하세요: WooCommerce REST API key setup.
2단계: WooCommerce를 Lovable에 연결하기
서로 다른 WooCommerce REST API 키로 여러 연결을 만들 수 있습니다.
Connectors에서 WooCommerce 열기
Connectors → App connectors로 이동하여 WooCommerce를 선택하세요.
연결 추가
Add connection을 클릭하세요.
연결 설정
- Display name: 예를 들어
WooCommerce Prod와 같이 연결 이름을 지정하세요. - Store URL: WooCommerce 스토어의 HTTPS URL을 입력하세요. 예:
https://store.example.com. - Consumer key: WooCommerce REST API consumer key를 붙여넣으세요.
ck_로 시작합니다. - Consumer secret: WooCommerce REST API consumer secret을 붙여넣으세요.
cs_로 시작합니다.
접근 권한 설정
Who can access this connection에서 workspace 내 연결 사용 권한을 결정하세요:
- Only you (기본값): 연결을 만든 사람만 해당 연결과 관련 데이터를 사용할 수 있습니다.
- Invite specific people: 본인과 명시적으로 추가된 workspace 멤버만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite entire workspace: Invite entire workspace를 클릭하면 Lovable workspace의 모든 멤버가 연결을 사용할 수 있습니다.
자세한 내용은 Connection-level access를 참고하세요.
연결
Connect를 클릭하세요.
연결이 완료되면 프로젝트를 빌드하는 누구든 Lovable 채팅에서 자신의 프로젝트를 WooCommerce에 연결하도록 요청할 수 있습니다(설정된 connection-level access 기준). 이후 Lovable 앱은 REST API 키 권한에 따라 WooCommerce 데이터를 읽고 관리할 수 있습니다.
WooCommerce REST API 권한 활용
WooCommerce는 생성한 REST API 키의 권한을 통해 접근을 제어합니다. 앱에 대시보드, 리포트, 상품 목록, 고객 조회만 필요하다면 Read 키를 사용하세요. 스토어 데이터를 생성하거나 업데이트해야 한다면 Read/Write 키를 사용하세요.
connector는 스토어의 상품을 나열하여 자격 증명을 확인합니다. 라우트 오류로 확인이 실패하면 스토어에서 WooCommerce REST API 라우트가 작동하는지, WordPress 퍼머링크가 Plain으로 설정되어 있지 않은지 확인하세요.
제한 사항
WooCommerce connector는 다음을 지원하지 않습니다:
- WooCommerce REST API 키 생성 또는 권한 변경. WordPress admin에서 먼저 키를 설정하세요.
- 연결된 REST API 키의 권한 우회.
- WordPress 퍼머링크, 호스팅, SSL, 플러그인, WooCommerce 설정 구성.
- 연결된 스토어의
/wp-json/wc/v3REST API 경로 외부의 일반 WordPress API 또는 WooCommerce 엔드포인트 호출. - Consumer key 자동 교체. 자격 증명을 교체하려면 WooCommerce에서 새 키를 생성하고 Lovable 연결을 업데이트하세요.
- 최종 사용자별 WooCommerce 로그인. 각 연결은 연결된 모든 프로젝트가 공유하는 단일 WooCommerce 스토어 계정을 나타냅니다.
WooCommerce 연결에서 프로젝트 연결 해제하기
Editor 이상 역할을 가진 멤버는 연결 자체를 삭제하지 않고 특정 프로젝트만 연결에서 제거할 수 있습니다. 연결은 다른 프로젝트에서 계속 사용 가능합니다.
프로젝트를 연결 해제하려면 다음을 따르세요.
Connectors 열기
Connectors를 열고 App connectors로 이동한 뒤 **WooCommerce**를 선택하세요.
연결 열기
관리할 연결을 여세요.
프로젝트 선택
Linked projects에서 연결 해제할 프로젝트를 선택하세요.
확인
Unlink projects를 클릭하고 확인하세요.
연결 해제된 프로젝트는 이 연결을 통해 WooCommerce에 더 이상 접근할 수 없습니다. 프로젝트에서 WooCommerce가 다시 필요하면 사용 가능한 연결에 다시 연결하세요.
WooCommerce 연결 삭제하기
workspace admin 및 owner는 WooCommerce 연결을 삭제할 수 있습니다. 다른 멤버는 자신이 만든 연결이거나 명시적으로 접근 권한을 부여받은 연결을 삭제할 수 있습니다.
연결 삭제는 되돌릴 수 없습니다. 연결된 모든 프로젝트에서 자격 증명이 제거되며, 이 연결을 사용하는 앱은 새 연결이 추가될 때까지 작동을 멈춥니다.
삭제하기 전에 Linked projects 섹션에서 현재 연결을 사용 중인 프로젝트를 확인하세요.
연결을 삭제하려면 다음을 따르세요.
Connectors 열기
Connectors를 열고 App connectors로 이동한 뒤 **WooCommerce**를 선택하세요.
연결 열기
제거할 연결을 여세요.
연결된 프로젝트 확인
Linked projects 섹션을 검토하세요.
삭제
Delete this connection 아래에서 Delete를 클릭하고 확인하세요.