사진 한 장 없이
시작했습니다
사진을 기다리느라 작업을 멈추지 않는다. 자리를 먼저 잡고, 이름으로 채운다.
샘플 15개를 만들 때 사진은 한 장도 없었어요. 보통이라면 “사진 나오면 그때 넣자”인데 — 그럼 작업이 멈추죠. 그래서 순서를 뒤집었습니다. ① 슬롯에 ‘들어갈 사진의 파일명’을 먼저 박고, ② 그라데이션을 폴백으로 깔아 지금도 완성형으로 보이게 하고, ③ 코덱스(AI)가 그 파일명 그대로 사진을 생성합니다. 갈아끼우는 수고 없이, 이름만 맞으면 그 자리에 사진이 ‘현상’돼요.
name-first: 디자인할 때 `assets/img/cafe-hero.webp`처럼 경로를 먼저 넣는다. 그라데이션이 폴백이라 사진이 없어도 완성형. 코덱스가 그 이름으로 생성하면 끝 — 2차 작업 0. 아래에서 직접 ‘채워’ 보세요.
01문제 — 사진이 없으면 시작도 못 한다
사진이 없으면 시작조차 못 하고, 나중에 일일이 갈아끼우는 수고가 컸어요. 예전 방식은 3단계였거든요 — placeholder로 짓기 → 사진 생성 → 갈아끼우기. 마지막 단계에서 늘 사고가 났습니다(사진이 엉뚱한 자리에, 가리고, 안 맞고). “사진 나오면 그때 넣자”는 곧 ‘작업 멈춤’이고요. 그래서 순서를 뒤집었습니다 — 이름을 먼저 정하면 그 3단계가 통째로 사라져요. 디자이너는 ‘여기 들어갈 사진’의 경로만 적으면 되고, 생성기는 그 이름에 맞춰 만들면 됩니다.
“갈아끼우지 않는다. 자리에 이름을 주면, 사진이 그 이름으로 온다.”
02빈 슬롯을 채워보세요
아래는 실제 샘플의 슬롯이에요. 처음엔 그라데이션 폴백(사진 없어도 완성형). 버튼을 누르면 같은 자리에 실제 생성 사진이 들어옵니다 — 파일명이 같으니까.
cafe-hero.webp
realestate-hero-street.webp
gym-hero.webp
pension-hero.webp버튼을 눌러 ‘채우기 ↔ 비우기’. 폴백 덕분에 어느 상태든 깨지지 않아요.
</>코드 엿보기 — 매니페스트 한 줄 + 코덱스 호출
# 1) 매니페스트: 파일명 | 치수 | 내용(프롬프트) cafe-hero | 1600x900 | warm specialty cafe interior at night, no people, no text # 2) 코덱스가 그 이름 그대로 생성 (얼굴·텍스트·로고 금지) codex exec -s workspace-write "매니페스트의 파일명대로 assets/img/에 사진풍 webp 생성, 치수에 ImageOps.fit으로 정확히 맞춰 저장" /* 3) HTML은 처음부터 실제 경로 — 폴백 그라데이션 위에 사진이 덮인다 */ .slot{ background:radial-gradient(...); } // 폴백 .slot img{ object-fit:cover } // 생기면 덮음
03그래서 110장
이 방식으로 14개 업종 + 브랜드 콘셉트의 슬롯을 코덱스가 한 번에 채웠어요. 메뉴 컷, 시설, 매물, 객실, 컬러 조명까지.
04채우지 않은 자리도 있다 (정직)
AI 사진의 선
① 사람 얼굴·텍스트·로고·워터마크는 생성 금지(공간·제품·무드 위주) · ② 지도는 일부러 비워뒀어요 — AI가 그린 가짜 지도 대신, 실제 런칭 때 네이버/카카오 지도를 임베드할 ‘실데이터 자리’ · ③ 의료·동물병원 사진은 효과·전후 표현 배제. 채우는 것만큼 안 채우는 판단도 디자인입니다.
그리고 빈 슬롯이 남아도 사이트는 멀쩡해요 — 폴백 그라데이션이 늘 받쳐주니까. ‘사진 대기 중’이 ‘미완성’이 되지 않게 한 게 이 워크플로의 핵심이에요.