한 줄 코드로 휴일 카드 콜라주 만들기

Source: Dev.to

이 기사에서는 리본 푸터와 배경, 그리고 다섯 개의 스타일링된 사진(둥근 모양, 색상 테두리)을 한 줄의 Cloudinary 변환 마법으로 만드는 방법을 보여드립니다.

실제 데모를 시도해 보세요 — 다음과 같은 카드가 생성됩니다:

Source: …

앱을 만들자, 어떤 앱이든

저는 Astro 앱을 만드는 것을 즐기고 있으며, Cursor를 사용하면 스캐폴딩이 아주 쉬워집니다. AI(예: ChatGPT)에게 상세한 프롬프트를 만들도록 요청하고, 그 다음 Cursor가 견고한 시작 프로젝트를 생성하도록 할 수 있습니다. 제가 사용한 프롬프트는 전체가 여기에서 확인할 수 있습니다 — gist를 보세요.

생성된 앱은 다음을 할 수 있습니다:

• Cloudinary에 사진 다섯 장 업로드
• 원하는 순서대로 사진을 재배열
• 전체 휴일 카드를 렌더링하는 단일 URL 생성

추가 요소를 넣고 업로드 준비하기

앱의 색상을 겨울 느낌으로 조정하고, 내리는 눈, 휴일 메시지가 바뀌는 팝업 요정, 빛나는 조명, 그리고 사탕‑막대 테두리(실험에서 차용)를 추가했습니다.

Cloudinary 자격 증명 설정

1. Cloudinary 계정 만들기 (무료 티어 제공).

2. Cloudinary 콘솔에서 API 키를 가져오기 (톱니바퀴 아이콘 → API Keys).

   

3. 키를 로컬 .env 파일에 추가하고 (Netlify 등) 호스팅 제공자의 환경 변수에도 추가합니다:

   PUBLIC_CLOUDINARY_CLOUD_NAME=
   PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage

4. 서명되지 않은 업로드 프리셋을 christmas-collage(또는 원하는 이름)으로 Cloudinary 대시보드의 Uploads 섹션에서 생성합니다.

   

5. Cloudinary에 폴더를 설정합니다:

   • collages – 생성된 카드가 저장되는 곳
   • holiday-assets – 콜라주 배경 및 리본 배경 이미지를 포함

   사용된 예시 배경 이미지:

   

   사진 제공: JESHOOTS.COM on Unsplash.

URL 빌더 작동 보기

다섯 장의 가족 사진을 업로드하고 배치를 마치면, 앱이 변환이 모두 포함된 단일 Cloudinary URL을 생성합니다. URL은 대략 다음과 같습니다:

https://res.cloudinary.com/jen-demos/image/upload/w_1600,h_900,c_fill,q_auto,f_auto
/l_holiday-assets:jhi9cpio4ahxomhagwvs/c_fill,w_473,h_680,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50
/l_holiday-assets:d9njoekpa1zzzepy2y5d/c_fill,w_473,h_426,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_50
/l_holiday-assets:nm9i3sjh6c3mkfj0ari1/c_fill,w_473,h_214,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_516
/l_holiday-assets:rg0c1ul...

URL은 다음을 인코딩합니다:

• 기본 캔버스 크기 (w_1600,h_900)
• 배경 이미지 (holiday-assets:jhi9cpio4ahxomhagwvs)
• 각 업로드된 사진이 둥근 모서리, 금색 테두리 및 정확한 오프셋으로 배치 및 스타일링됨

그 결과는 디지털로 공유하거나 인쇄소에 보낼 수 있는 인쇄 준비가 된 사진 품질의 휴일 카드이며, 전통적인 사진 카드 서비스에 비해 비용을 절감할 수 있습니다.

단 한 줄의 Cloudinary 변환 코드만으로 나만의 축제 콜라주를 만들어 보세요!