← Back

Collage

Layered chaos creating artistic harmony.

Explore

Creative Chaos

Layering

Multiple elements overlap to create depth.

Mixed Media

Photos, text, shapes blend together.

Asymmetry

Breaking grids creates organic flow.

Artistic Freedom

Collage embraces imperfection and spontaneity in digital design.

Create Collage

Start

AI 프롬프트 예제

Claude/Cursor를 사용하여 Collage 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • 이미지, 텍스트, 도형 레이어링
  • 비정형 레이아웃
  • 겹침과 투명도 활용
  • 다양한 요소 혼합
  • 자유로운 배치
  • 예술적이고 창의적인 구성

제약조건

  • z-index 적절히 관리
  • 반응형 디자인 필수
  • 성능 최적화

예상 결과

  • 레이어드 구성
  • 예술적이고 창의적인 레이아웃
  • 비정형적이지만 조화로운 디자인
  • 시각적으로 흥미로운 UI
  • 자유로운 표현
  • 독특하고 개성 있는 느낌

프롬프트 템플릿

Collage 스타일의 갤러리 섹션을 만들어줘.

요구사항:
- 이미지, 텍스트, 도형을 레이어링
- 비정형 레이아웃 (불규칙한 배치)
- 겹침 효과 (z-index, transform)
- 다양한 회전 각도
- 투명도와 blend mode 활용
- 자유로운 위치 배치

스타일 가이드:
- position: absolute로 자유 배치
- transform: rotate(), translate()
- z-index: 레이어 순서
- opacity: 0.7-1.0
- mix-blend-mode: multiply, screen 등
- box-shadow: 깊이감

디자인:
- 갤러리 또는 포트폴리오 섹션
- 이미지 카드들이 겹쳐진 배치
- 다양한 크기와 회전 각도
- 텍스트와 도형 레이어
- 자유로운 구성

레이아웃:
- CSS Grid를 기본으로
- position: absolute로 세부 조정
- 불규칙하지만 균형잡힌 배치
- 호버 시 확대 또는 전면 이동

성능 최적화, 반응형 디자인 필수해줘.