앱을 Logo.dev에 연결하여 domain, stock ticker, crypto symbol로 회사 로고를 브라우저에서 바로 표시합니다.
Logo.dev에 앱 연결하기
앱을 Logo.dev에 연결하여 domain, stock ticker, crypto symbol로 회사 로고를 Lovable 앱의 브라우저에서 바로 표시하세요.
Logo.dev는 Lovable 앱이 domain, stock ticker, crypto symbol로 회사 로고를 표시할 수 있게 해주는 로고·브랜드 이미지 API입니다. directory, dashboard, CRM, 포트폴리오 추적기처럼 회사 브랜딩을 보여주는 앱을 위해 설계되었습니다.
Logo.dev를 사용하면 앱에서 다음과 같은 작업이 가능합니다:
- domain으로 회사 로고를 브라우저에 표시
- stock ticker, ISIN, crypto symbol에 대한 로고 렌더링
- dashboard, directory, 프로필 카드에 브랜드 로고 추가
- 크기·포맷·테마 옵션과 함께
img.logo.devURL 사용
Logo.dev 커넥터는 프론트엔드 전용입니다. publishable key를 img.logo.dev 이미지 CDN과 함께 사용하므로 로고가 브라우저에서 바로 로드됩니다. 이미지 자산을 직접 관리하지 않고 회사 브랜딩을 보여줘야 하는 앱에 적합합니다.
이 커넥터는 img.logo.dev 이미지 CDN 전용 publishable key만 제공합니다. Logo.dev의 서버사이드 REST API와 Search API는 이 커넥터가 제공하지 않는 별도의 secret key가 필요합니다.
주요 활용 사례 및 예시 앱
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 회사 디렉토리 | Logo.dev를 사용해서 각 회사 이름 옆에 로고가 표시되는 회사 디렉토리를 만들어줘. | 회사 목록에 알아보기 쉬운 브랜딩을 표시합니다. 앱이 각 회사의 domain으로부터 img.logo.dev를 통해 로고를 렌더링합니다. |
| CRM 또는 고객 대시보드 | Logo.dev를 사용해서 웹사이트 domain을 기준으로 고객 목록에 회사 로고를 추가해줘. | 로고로 고객 레코드를 더 쉽게 훑어보게 합니다. 앱이 각 고객의 domain을 조회하여 일치하는 브랜드 로고를 표시합니다. |
| 주식 또는 포트폴리오 추적기 | Logo.dev를 사용해서 각 stock ticker 옆에 로고가 표시되는 관심 종목 목록을 만들어줘. | 금융 데이터에 회사 브랜딩을 추가합니다. 앱이 가격·통계와 함께 img.logo.dev/ticker/<symbol>로 ticker 로고를 렌더링합니다. |
| 크립토 추적기 | Logo.dev를 사용해서 각 코인마다 로고가 있는 크립토 대시보드를 만들어줘. | 시장 데이터를 알아보기 쉬운 코인 로고와 짝지웁니다. 앱이 각 자산 옆에 img.logo.dev/crypto/<symbol>로 크립토 로고를 렌더링합니다. |
| 투자자 또는 스타트업 데이터베이스 | Logo.dev를 사용해서 각 회사 카드에 로고가 표시되는 스타트업 데이터베이스를 만들어줘. | domain 목록을 브랜딩된 회사 카드로 전환합니다. 앱이 domain으로 로고를 가져와 프로필·상세 카드에 표시합니다. |
| 벤더 또는 통합 페이지 | Logo.dev를 사용해서 각 벤더의 로고를 그리드로 보여주는 파트너 페이지를 만들어줘. | domain 목록으로 깔끔한 로고 월을 렌더링합니다. 앱이 일관된 크기로 img.logo.dev에서 각 벤더의 로고를 로드합니다. |
Logo.dev 연결 방법
워크스페이스 admin과 owner가 Logo.dev를 연결할 수 있습니다.
다른 publishable key를 사용하여 여러 Logo.dev 연결을 만들 수 있습니다. 이는 환경 분리(예: 개발과 프로덕션)나 domain 제한이 다른 key를 사용하는 데 유용합니다.
연결이 만들어지면 Logo.dev가 워크스페이스의 모든 프로젝트에서 사용 가능해집니다. 프로젝트에서 빌드하는 누구나 채팅에서 Lovable에게 프로젝트를 연결하도록 요청할 수 있습니다.
사전 요구사항
Logo.dev를 연결하기 전에 다음을 준비하세요:
- Logo.dev 계정
- Logo.dev publishable key(
pk_로 시작) - Lovable 워크스페이스 owner 또는 admin 역할
이 커넥터를 통한 로고 요청은 Logo.dev 플랜에 포함됩니다. 청구와 할당량은 Lovable이 아닌 Logo.dev에서 직접 처리합니다.
1단계: Logo.dev publishable key 발급
publishable key는 Lovable 앱이 브라우저에서 img.logo.dev 이미지 CDN으로부터 로고를 로드할 수 있게 해줍니다. 프론트엔드 코드에 사용되므로 비밀로 유지하는 대신 domain 제한으로 보호합니다.
Logo.dev publishable key를 만들려면:
Logo.dev 계정 열기
Logo.dev에 로그인합니다.
API keys 열기
dashboard에서 API keys 페이지로 이동합니다.
publishable key 복사
publishable key(pk_로 시작)를 복사합니다. 아직 없다면 새로 만듭니다.
domain 제한 설정
앱이 실행되는 domain으로 key를 제한합니다. 이렇게 하면 key가 프론트엔드 코드에 들어간 후 사용될 수 있는 위치가 제한됩니다.
publishable key는 앱의 프론트엔드 코드에 노출되므로 Logo.dev에서 domain 제한을 설정하여 사용될 수 있는 위치를 제어하세요. secret key가 아닌 publishable key(pk_)를 사용하세요. 다음 단계에서 필요합니다.
자세한 내용은 Logo.dev 문서를 참고하세요: Logo.dev API keys.
2단계: Logo.dev를 Lovable에 연결
다른 publishable key를 사용하여 여러 연결을 만들 수 있습니다.
Connectors에서 Logo.dev 열기
Connectors → App connectors로 이동하여 Logo.dev를 선택합니다.
연결 추가
Add connection을 클릭합니다.
연결 구성
- Display name: 연결의 이름을 지정합니다(예:
Logo.dev Prod). 이 이름은 연결을 식별하기 위해 Lovable 내부에서만 사용됩니다. - Publishable key: Logo.dev publishable key(
pk_로 시작)를 붙여넣습니다.
이 연결에 접근할 수 있는 사람 선택
Who can access this connection에서 워크스페이스의 누가 연결을 사용할 수 있는지 결정합니다:
- Only you(기본값): 연결을 만든 사람만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite specific people: 본인과 명시적으로 추가된 워크스페이스 멤버만 연결과 관련 데이터를 사용할 수 있습니다.
- Invite entire workspace: Invite entire workspace를 클릭하여 Lovable 워크스페이스의 모든 사람이 연결을 사용할 수 있게 합니다.
자세한 내용은 연결 수준 접근을 참고하세요.
연결
Connect를 클릭합니다.
연결되면 프로젝트에서 빌드하는 누구나 채팅에서 Lovable에게 프로젝트를 Logo.dev에 연결하도록 요청할 수 있습니다(구성된 연결 수준 접근에 따라). 그러면 Lovable 앱이 img.logo.dev를 통해 브라우저에서 바로 회사 로고를 로드할 수 있습니다.
제한 사항
Logo.dev 커넥터는 프론트엔드 전용이며 다음을 할 수 없습니다:
- Logo.dev의 서버사이드 REST API나 Search API 호출(이는 이 커넥터가 제공하지 않는 별도의 secret key가 필요함)
- Lovable 게이트웨이를 통한 로고 요청 프록시(로고는
img.logo.dev에서 브라우저로 바로 로드됨) - key 자동 갱신 또는 회전. 회전하려면 Logo.dev에서 새 publishable key를 만들고 Lovable 연결을 업데이트해야 함
- 최종 사용자별 Logo.dev 로그인 지원. 각 연결은 그에 연결된 모든 프로젝트에서 공유되는 단일 Logo.dev 계정을 나타냄
Logo.dev 연결에서 프로젝트 연결 해제하는 방법
Editor 이상은 연결을 완전히 삭제하지 않고 특정 프로젝트를 연결에서 제거할 수 있습니다. 연결은 다른 프로젝트에서 계속 사용 가능합니다.
프로젝트 연결을 해제하려면:
Connectors 열기
Connectors를 열고 App connectors로 이동한 다음 **Logo.dev**을 선택합니다.
연결 열기
관리하려는 연결을 엽니다.
프로젝트 선택
Linked projects에서 연결 해제하려는 프로젝트를 체크합니다.
확인
Unlink projects를 클릭하고 확인합니다.
연결이 해제되면 해당 프로젝트는 이 연결을 통해 더 이상 Logo.dev에 접근할 수 없습니다. 프로젝트가 다시 Logo.dev이 필요하면 사용 가능한 연결에 연결할 수 있습니다.
Logo.dev 연결 삭제 방법
워크스페이스 admin과 owner는 Logo.dev 연결을 삭제할 수 있습니다. 다른 멤버는 자신이 만든 연결이거나 명시적으로 접근 권한을 부여받은 경우 연결을 삭제할 수 있습니다.
연결 삭제는 영구적이며 취소할 수 없습니다. 연결된 모든 프로젝트에서 자격증명이 제거되며 이 연결을 사용하는 앱은 새 연결이 추가될 때까지 작동을 멈춥니다.
삭제하기 전에 Linked projects 섹션을 검토하여 현재 어떤 프로젝트가 연결을 사용하고 있는지 확인하세요.
연결을 삭제하려면:
Connectors 열기
Connectors를 열고 App connectors로 이동한 다음 **Logo.dev**을 선택합니다.
연결 열기
제거할 연결을 엽니다.
연결된 프로젝트 검토
Linked projects 섹션을 검토합니다.
삭제
Delete this connection에서 Delete를 클릭하고 확인합니다.