한 줄의 코드로 휴일 카드 콜라주 만들기
Source: Dev.to
이 글에서는 Cloudinary의 변환 마법을 사용해 한 줄의 코드만으로 리본 푸터, 배경, 그리고 다섯 장의 스타일이 적용된 사진(둥근 모양, 색상 테두리)으로 구성된 휴일 카드 콜라주를 만드는 방법을 보여드립니다.
실시간 데모를 체험해 보세요 — 다음과 같은 카드가 생성됩니다:
앱 만들기, 어떤 앱이든
저는 Astro 앱을 만드는 것을 즐기고 있으며 Cursor를 사용하면 스캐폴딩이 아주 쉬워집니다. AI(예: ChatGPT)에 상세 프롬프트 작성을 요청하고, Cursor가 견고한 스타터 프로젝트를 생성하도록 할 수 있습니다. 제가 사용한 프롬프트는 전체가 여기서 확인할 수 있습니다 — gist를 보세요.
생성된 앱은 다음을 할 수 있게 해줍니다:
- Cloudinary에 사진 다섯 장 업로드
- 원하는 순서대로 사진 재배열
- 전체 휴일 카드를 렌더링하는 단일 URL 생성
추가 기능을 넣고 업로드 준비하기
앱의 색상을 겨울 느낌으로 조정하고, 눈이 내리는 효과, 메시지가 바뀌는 팝업 요정, 빛나는 조명, 그리고 사탕‑막대 테두리(실험에서 차용)를 추가했습니다.
Cloudinary 자격 증명 설정
-
Cloudinary 계정 만들기(무료 티어 제공) – .
-
Cloudinary 콘솔에서 API 키를 가져옵니다(톱니바퀴 아이콘 → API Keys).
-
키를 로컬
.env파일에 추가하고(또는 Netlify와 같은 호스팅 제공자의 환경 변수에) 넣습니다:PUBLIC_CLOUDINARY_CLOUD_NAME= PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage -
unsigned upload preset
christmas-collage(또는 원하는 이름)를 Cloudinary 대시보드의 Uploads 섹션에서 생성합니다.
-
Cloudinary에 폴더를 설정합니다:
collages– 생성된 카드가 저장될 위치holiday-assets– 콜라주 배경 및 리본 배경 이미지가 들어있는 폴더
사용된 배경 이미지 예시:
사진 제공: JESHOOTS.COM (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 변환 코드만으로 여러분만의 축제 콜라주를 만들어 보세요!