콘텐츠와 이미지 편집

화면 문구와 스타일 직접 편집

• 요소선택으로 정적 텍스트, alt, title과 입력 안내 문구를 원본 Cake20 View AST 위치에서 찾아 수정합니다.
• 폰트 종류·크기·굵기·기울기·장식·정렬과 정적 글자색을 Tailwind class로 저장합니다.
• 파일 hash와 원본 위치를 저장 직전에 다시 확인해 다른 사용자나 AI의 변경을 임의로 덮어쓰지 않습니다.
• 변수, 표현식, API·DB 콘텐츠와 동적 class는 직접 저장하지 않고 화면 문맥이 포함된 AI Chat 요청으로 연결합니다.
• 직접 편집은 최근 100개까지 실행 취소하며 파일이 달라졌다면 충돌을 알리고 Preview에서 다시 선택하게 합니다.

소스 이미지 교체와 편집

정적으로 연결된 public 이미지는 요소편집 안에서 새 파일을 선택하고 실제 적용 결과를 보면서 교체할 수 있습니다. Cake20 View의 src 경로와 이미지 파일 저장을 하나의 작업으로 처리합니다.

파일 탐색기에서 public 또는 app/assets의 래스터 이미지를 열었다면 가운데 이미지를 클릭해 같은 편집기를 바로 열 수 있습니다.

• JPEG, PNG와 WebP는 자유 자르기, 1:1, 4:3과 16:9 비율을 제공합니다.
• 이미지 파일 선택뿐 아니라 클립보드 이미지를 Cmd+V 또는 Ctrl+V로 붙여넣고, 저장 전에는 Cmd+Z 또는 Ctrl+Z로 원본으로 되돌립니다.
• 자르기 영역을 이동하거나 네 모서리를 드래그하고, 90도 회전과 좌우 반전을 적용합니다.
• 가로·세로 크기는 비율 잠금과 함께 최대 4096px까지 지정합니다.
• 흑백, 흐림, 밝기, 대비와 채도 효과를 Canvas 결과로 확인합니다.
• JPEG·WebP 품질을 20~100%로 조절하고 저장 전 예상 파일 용량과 출력 해상도를 표시합니다.
• PNG 품질을 바꾸면 원본 PNG를 보존한 채 hash가 포함된 새 JPEG를 만들고 Cake20 View 이미지 경로를 자동 변경합니다.
• 파일 탐색기에서 직접 연 PNG는 참조 경로를 바꾸지 않도록 PNG 형식을 유지하며 품질 변환을 제공하지 않습니다.
• GIF, AVIF, BMP와 ICO는 원본 편집 없이 같은 형식의 파일로 교체합니다.

직접 편집하지 않는 이미지

• 외부 URL, storage 사용자 파일과 API가 반환한 동적 이미지는 원본을 안전하게 특정할 수 없어 직접 덮어쓰지 않습니다.
• SVG는 가운데 코드·이미지 전환에서 수정하며 래스터 이미지 편집기를 적용하지 않습니다.
• 직접 편집할 수 없는 이미지는 현재 페이지, selector, 이미지 경로와 Cake20 View 소스 위치를 포함해 AI Chat으로 전달합니다.
• 저장 후에는 실제 파일과 Cake20 View 소스가 모두 바뀐 경우에만 Preview를 갱신합니다.