AI가 어제 밤 애플이 발표한 액체 유리 효과를 복원해 보았습니다. ​부수적으로 이 스타일의 웹페이지를 AI로 생성하는 데 도움이 되는 프롬프트를 정리했습니다. 다음은 몇 가지 모델의 사용 효과와 프롬프트입니다👇

## 마스터 장(Master Zang)의 Apple 리퀴드 글래스 스타일 웹 페이지 프롬프트, 링크의 공백을 주의해서 복사하세요 아래 Apple WWDC2025 컨퍼런스의 주요 정보를 바탕으로 Apple 컨퍼런스 PPT와 유사한 Bento 그리드 스타일 비주얼 디자인을 사용하여 중국어 동적 웹 페이지 디스플레이를 생성하고 배경 이미지를 온라인에 인용하는 데 도움을 주세요. 배경 이미지는 i.ibb.co/xtN61cRf/Comfy-UI-Out... 입니다. ## 웹 페이지의 구체적인 요구 사항은 다음과 같습니다. 1. Bento 그리드 스타일 비주얼 디자인을 사용하고, 텍스트 색상은 흰색, 강조 텍스트 색상은 Apple의 상징적인 그라데이션을 사용하며, 카드는 유리 질감을 사용합니다. 카드 배경은 어두운 색상으로 할 필요가 없습니다. 2. 핵심 내용을 강조하기 위해 큰 글꼴이나 숫자를 강조합니다. 그림에는 핵심 포인트를 강조하기 위해 큰 시각적 요소가 포함되어 있으며, 이는 작은 요소의 비율과 대조됩니다. 3. 웹 페이지는 반응형이어야 하며 1920px 이상과 같은 더 큰 디스플레이 너비에도 호환되어야 합니다. 4. 중국어와 영어, 큰 중국어 글꼴과 굵은 글꼴, 작은 영어 문자를 장식으로 혼합하여 사용하십시오. 5. 데이터 시각화 또는 일러스트레이션 요소로 간단한 선 그래픽을 사용하십시오. 6. 강조 색상을 사용하여 기술적인 느낌을 주되, 다른 강조 색상이 희미해지지 않도록 하십시오. 7. 데이터는 온라인 차트 구성 요소인 Apache ECharts 5(cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js)를 참조할 수 있습니다. 스타일은 테마와 일관성을 유지해야 합니다. 8. HTML5, TailwindCSS 3.0+(CDN을 통해 도입) 및 필요한 JavaScript를 사용하십시오. 9. 글꼴은 Google Font 글꼴을 참조하십시오. 10. 아이콘은 Font Awesome을 참조하십시오. (use.fontawesome.com/releases/v... 이모지를 기본 아이콘으로 사용하지 마세요. 11. 콘텐츠 포인트를 생략하지 마세요. ## 카드 스타일은 다음 구현 방식을 엄격하게 따릅니다. CSS 스타일: /* 컨테이너 */.liquidGlass-wrapper { position: relative; display: flex; overflow: hidden; padding: 0.6rem; border-radius: 2rem; cursor: pointer; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); 전환: 모두 0.4초 cubic-bezier(0.175, 0.885, 0.32, 2.2);}/* 호버 효과 */.liquidGlass-wrapper:hover { 패딩: 0.8rem; 테두리 반경: 2.5rem;}/* 왜곡 레이어 */.liquidGlass-effect { position: absolute; z-index: 0; 인셋: 0; 배경 필터: blur(3px); 필터: url(# glass-distortion); }/* 색조 레이어 */.liquidGlass-tint { position: absolute; z-index: 1; 인셋: 0; 배경: rgba(255, 255, 255, 0.25);}/* 광택 레이어 */.liquidGlass-shine { position: absolute; z-index: 2; inset: 0; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);}/* 콘텐츠 레이어 */.liquidGlass-text { position: relative; z-index: 3; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);} .liquidGlass-wrapper:hover .liquidGlass-text { transform: scale(0.95);}/* 하위 항목 스타일 */.menu-item { padding: 0.4rem 0.6rem; border-radius: 0.8rem; 전환: 전체 0.1초 간격 이지인;} .menu-item:hover { 배경색: rgba(255, 255, 255, 0.5); 상자 그림자: 삽입 -2px -2px 2px rgba(0, 0, 0, 0.1); 배경 필터: 흐림(2px);}

⚠️ 프롬프트 워드 사용 시 참고 사항: 한 이미지로 구성된 흐름을 원하지 않으시면 프롬프트 워드에서 "모든 콘텐츠를 한 페이지에 표시하세요"라는 부분을 삭제하세요. 이 스타일에는 배경 이미지가 있어야 합니다. 그렇지 않으면 인식률이 크게 저하될 수 있습니다. 어두운 배경 이미지를 추가하는 것이 좋습니다. Gemini 2.5 Pro를 먼저 사용하는 것이 좋습니다. DeepSeek R1 0528을 사용할 수는 있지만, 뒷면 이미지 왜곡을 처리할 수 없습니다.