앱빌더 3d 리소스 제작시 워터마크

개발
1

앱빌더에서 3D 리소스 제작시 제작 완료후 워터마크가 생겨납니다. AITS 202509291610

image
image768×768 93.5 KB

주소가 /api/v1/app-builder/resource-center/preview-image/ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt.png 이렇게 나왔는데.

ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt
ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt768×768 125 KB

<ListRow.Icon
          source={{
            uri: "/api/v1/app-builder/resource-center/preview-image/ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt.png"
          }}
          aria-hidden={true}
        />

이런식으로 사용해도 안되고 워터마크 제거 방법을 알려주세요.

        <Asset.Image
            source={{
              uri: "/api/v1/app-builder/resource-center/preview-image/ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt.png"
            }}
          />

이렇게 하면 되긴 하는데 2d 이미지로 보입니다.

토스 앱에 띄웠을때 워터마크가 제거되도록 보인 다는데, 혹시 앱 출시를 하면 워터마크가 없어지나요?

앱빌더에서도 그냥 워터마크 없에면 안될까요?

감사합니다.

image
image783×520 13.2 KB

image
image870×571 65.2 KB

2

안녕하세요

현재 3D 리소스의 경우 우선 리소스 승인 / 반려 여부와 관계 없이 워터마크가 함께 보여지게 되고 (코드젠에서도 동일),
앱 개발 후 토스 앱 상에서는 승인된 리소스에 한하여 워터마크가 노출되지 않도록 되어 있습니다! @Line1

1개의 좋아요
3

지금 앱빌더에서 “생성된 3d 그래픽”에서 보니까. http로 시작하는 주소로 뜨고 워터마크는 앱빌더에서도 안보이네요.

image
image1291×527 99 KB

역시나 앞서 작성했던 RN 코드와 함께 /api/v1로 시작하는 주소를 사용하면 제대로 작동하지 않아 보입니다.

나중에 제대로 된 RN 컴포넌트 작성 방법을 알려 주실수 있을까요?

앱빌더에서는 // 코드를 불러오는데 실패했어요. 이게 나와서 제대로 사용하고 있는지도 모르겠습니다.

넘 어려워서 워터마크가 없는 3d 이미지를 다운로드 받아서 리소스에 올려 쓰기로 하였습니다.

감사합니다.

5

네, 이용하시는 데에 불편을 드려 죄송합니다.

번거로우시겠지만, 상세사항 확인이 필요하여 아래 내용으로 문의 주신 점이 맞을지 여쭤보아도 될까요?

  1. 생성된 3D 그래픽을 인서트 하셨을 때 앱빌더 캔버스 내에서 워터마크가 보이지 않음
  2. 작성하신 RN 코드와 함께 /api/v1로 시작하는 주소를 사용하면 제대로 작동하지 않음 → 3D 리소스가 아닌 2D 리소스로 보이시는 상황이 맞으실지 여쭤봅니다!

@Line1

6

1번 맞습니다. 다시 시도해 보니 왜 url 이 제대로 나온지 모르겠습니다. 그냥 이걸 사용중에 있습니다.

2번은 여러 시도가 있어서 좀 이야기가 꼬였습니다.

  • 아마 /api/v1 로 시작하는 주소는 처음부터 사용이 안되었음. (3d 이미지 안나옴)
  • 3D가 2D로 보이는줄 착각했던 이유는 2d 이미지 로딩 후 이미지를 바꿔 3d 이미지 로딩을 시도 했을때 /api/v1 주소로 부터 이미지 로딩이 제대로 안되서 그랬던 것으로 보임. (3D 리소스가 아닌 2D 리소스로 보이는게 아니라 그냥 로딩이 안되었던 것) (넘 오래되어서 (1주전 확인) 잘못 기억하고, 지금은 이런 상황일지도 모름)
  • /api/v1로 시작하는 url의 RN 컴포넌트 사용 방법이 어디에도 나와있지 않아서. 제가 제대로 적용한 것인지도 확인 어려움.
<Asset.Image
          frameShape={Asset.frameShape.CleanW200}
          source={{
            uri: "https://static.toss.im/ml-product/tosst-inapp_nw198eq7os6d8oj9nyarebvt.png"
          }}
        />

지금 이런 방식을 쓰고 있는데. 이걸 아래와 같이 바꾸면 제대로 나와야 하는게 맞나요?

<Asset.Image
          frameShape={Asset.frameShape.CleanW200}
          source={{
            uri: "/api/v1/app-builder/resource-center/preview-image/ml-product%2Ftosst-inapp_nw198eq7os6d8oj9nyarebvt.png"
          }}
        />

이름: tosst-inapp_nw198eq7os6d8oj9nyarebvt

한번 static.toss.im 주소가 뜨니까 다시 /api/v1로 시작하는 주소를 어떻게 얻어야 하는지도 모르겠습니다.

image
image1365×743 98.1 KB

7

번거로우셨을텐데, 상세하게 확인하여 주셔서 감사합니다.

확인 후 말씀 드리겠습니다!

8

기다려 주셔서 감사합니다.

상세사항 확인 시, 승인 / 반려 여부 무관하게 현재 앱 빌더 내에서 워터마크가 노출되지 않는 상황으로 확인하였습니다.
이용하시는 데에 혼선 드려 죄송합니다.

번거로우시겠지만, 우선 개발하시는 과정에서는 개발자모드에서 보여 드리고 있는 워터마크 없는 이미지로 개발을 하여 주실 수 있으실까요?

말씀 주셨던 아래 코드를 통해 개발하여 주실 경우 앱빌더 내에서 워터마크가 보이지 않더라도 차후 앱 개발 하셨을 때에도 워터마크 없이 정상적으로 리소스가 노출이 되는 상황으로 확인하였습니다.

<Asset.Image
frameShape={Asset.frameShape.CleanW200}
source={{
uri: “``https://static.toss.im/ml-product/tosst-inapp_nw198eq7os6d8oj9nyarebvt.png”
}}
/>

현재 앱빌더 내에서 워터마크가 표기되는 부분이 원활하지 않았던 상황이 있어,
차후에는 앞서 안내 드린 코드를 활용하실 경우 앱빌더 내에서는 워터마크가 표기되고 실제 개발된 앱에서는 워터마크가 표기되지 않는 방향으로 수정될 예정입니다.

다시 한번 이용하시는 데에 불편 드려 죄송합니다.

@Line1

9

넵. 문제 없습니다.

정비 완료되면 한번 기능 홍보해 주세요!

감사합니다.

10

네, 양해하여 주셔서 감사 드립니다!

1개의 좋아요