이미지 & 아이콘 활용 | 클로드로 디자인하기

이번 강에서 배울 것

Unsplash 이미지를 브랜드에 맞게 선택하는 프롬프트
SVG 아이콘을 Claude로 직접 생성하기
이미지 생성 AI용 고품질 프롬프트 작성법
이미지 최적화 & 레이지 로딩
그라디언트와 패턴으로 이미지 대체하기

이미지 전략 — 3가지 방법

방법	도구	장점	단점
스톡 이미지	Unsplash, Pexels	무료, 고품질	중복 사용, 브랜드 차별화 어려움
AI 생성 이미지	Midjourney, DALL-E	맞춤 제작 가능	프롬프트 학습 필요, 유료
CSS 그라디언트/패턴	순수 CSS	용량 0, 반응형 완벽	사실적 이미지 불가

Unsplash 이미지 선택 프롬프트

실습 프롬프트 1

FRESH:ON 랜딩 페이지에 필요한 이미지들의 Unsplash 검색 키워드를 추천해줘.

필요한 이미지:
1. Hero 배경 (직장인 + 에너지 + 건강)
2. 제품 컨셉 (음료, 건강, 자연 성분)
3. 리뷰어 프로필 사진 (직장인 얼굴, 다양한 연령대)
4. 오피스 환경 (책상, 컴퓨터, 도시)

각 이미지별:
- Unsplash 검색 키워드 3가지
- 피해야 할 키워드 (브랜드 분위기에 안 맞는)
- 이상적인 이미지 구도/색감 설명

/* Unsplash 이미지를 코드에서 사용하는 방법 */
/* 기본 URL 형식 */
https://images.unsplash.com/photo-{PHOTO_ID}?auto=format&fit=crop&w=1200&q=80

/* 사이즈별 최적화 */
?w=400&h=300&fit=crop  /* 썸네일 */
?w=800&h=600&fit=crop  /* 중간 */
?w=1920&q=75           /* 풀 배경 */

/* CSS 배경으로 사용 */
.hero {
  background-image: url("https://images.unsplash.com/photo-ID?auto=format&fit=crop&w=1920&q=80");
  background-size: cover;
  background-position: center;
}

SVG 아이콘 생성

실습 프롬프트 2

FRESH:ON 브랜드용 SVG 아이콘 4개를 만들어줘.

아이콘:
1. 에너지 번개 (Energy bolt)
2. 잎사귀 (Natural leaf)
3. 시계 (Fast effect - clock)
4. 하트 + 체크 (Health verified)

공통 스펙:
- viewBox="0 0 24 24"
- stroke-based (filled 아님, stroke-width: 2)
- currentColor 사용 (CSS로 색상 변경 가능)
- 둥근 라인캡 (stroke-linecap: round)

CSS 클래스로 크기와 색상 제어할 수 있도록 width/height는 클래스로 처리

이미지 생성 AI 프롬프트 작성

실습 프롬프트 3

FRESH:ON 제품 히어로 이미지용 Midjourney 프롬프트를 작성해줘.

이미지 콘셉트: 도시 직장인이 오후에 FRESH:ON 음료를 마시며 활기를 되찾는 장면
분위기: 밝고 에너제틱, 자연광, 도시 배경, 초록 강조색

Midjourney 프롬프트 형식으로:
- 메인 묘사
- 스타일 (사진 vs 일러스트)
- 카메라/조명 설정
- 색감 지시
- 네거티브 프롬프트 (--no ...)
- 비율 (--ar 16:9)

총 3가지 다른 컨셉으로 제안해줘.

CSS 그라디언트로 이미지 대체

/* 메쉬 그라디언트 (배경 대용) */
.hero-bg {
  background:
    radial-gradient(at 40% 20%, #bbf7d0 0px, transparent 50%),
    radial-gradient(at 80% 0%, #dcfce7 0px, transparent 50%),
    radial-gradient(at 0% 50%, #f0fdf4 0px, transparent 50%),
    radial-gradient(at 80% 50%, #d1fae5 0px, transparent 50%),
    radial-gradient(at 0% 100%, #ecfdf5 0px, transparent 50%);
  background-color: #ffffff;
}

/* 기하학 패턴 (SVG + CSS) */
.pattern-bg {
  background-image: url("data:image/svg+xml,%3Csvg...");
  background-size: 20px 20px;
}

실습 프롬프트 4

FRESH:ON 브랜드 색상 (초록 계열)을 사용한 CSS 배경 패턴 3가지를 만들어줘.

1. 메쉬 그라디언트 (radial-gradient 혼합)
2. 도트 패턴 (SVG 배경 이미지 방식)
3. 대각선 줄무늬 패턴

각각 Hero 섹션에 바로 적용할 수 있는 완전한 CSS 코드로 작성해줘.

이미지 없이도 CSS 그라디언트와 패턴만으로 충분히 브랜드 아이덴티티를 표현할 수 있습니다. 오히려 로딩이 빠르고 모든 해상도에서 선명하게 보입니다.

강의 핵심 요약

이미지 3원칙: 스톡(빠름) / AI생성(맞춤) / CSS(용량0)
SVG 아이콘은 currentColor로 CSS 색상 제어 가능
이미지 생성 AI 프롬프트도 Claude가 대신 써줌
다음 강: 1~10강 전체를 활용한 포트폴리오 사이트 실전 제작

관련 검색어 · Unsplash 이미지 사용법, SVG 아이콘 생성, Midjourney 프롬프트, CSS 그라디언트 배경, 이미지 생성 AI 프롬프트, currentColor SVG