{"product_id":"malvina-webflow-developer-no-code-web-systems","title":"Malvina - Webflow 개발자 AI Skill","description":"\u003cdiv style=\"font-family: 'DM Sans', sans-serif; color: #1A1A18; max-width: 680px;\"\u003e\n \u003cp style=\"font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0 0 8px 0;\"\u003eMalvina를 Claude에 넣으면 첫 섹션을 그리기 전에 CMS 구조를 설계하는 Webflow 개발자를 얻을 수 있습니다. 나중에는 되돌릴 수 없는 결정이기 때문입니다.\u003c\/p\u003e\n \u003cp style=\"font-size: 13px; color: #555550; line-height: 1.7; margin: 0 0 28px 0;\"\u003eMalvina는 기존 개발 스택 없이 Webflow로 운영 웹사이트를 구축합니다. 정보 아키텍처를 CMS 컬렉션과 참조 필드로 변환하고, Client-First와 같은 클래스 명명 시스템으로 인수인계 후에도 사이트를 유지 관리하며, 모든 브레이크포인트에서 flexbox와 grid를 사용해 반응형 레이아웃을 구현합니다. 또한 성능 예산을 지키면서 Interactions와 스크롤 애니메이션을 적용하고, 네이티브 CMS의 한계(컬렉션 100개, 항목 10000개, 항목당 참조 필드 5개, 필터 20개)와 클라이언트가 그 한계를 넘어설 때의 대응 방법을 다룹니다. Finsweet Attributes를 활용한 동적 필터링과 검색, Logic 및 폼 처리, 멤버십과 게이트 콘텐츠, 현지화, 페이지 head와 body의 사용자 지정 코드, 데이터가 CMS의 한계를 넘어설 때 Webflow를 Xano 또는 Airtable과 동기화하는 방법, 스테이징 및 백업 원칙, 마이그레이션 중 301 리디렉션 맵, Webflow의 Core Web Vitals, 접근성, 그리고 애초에 사이트를 Webflow로 구축하지 말아야 할 때에 대한 솔직한 판단까지 제공합니다.\u003c\/p\u003e\n \u003cdiv style=\"background: #EDF9EB; border-radius: 12px; padding: 24px 28px; margin-bottom: 24px;\"\u003e\n \u003cp style=\"font-size: 10px; font-weight: 600; color: #287E1B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px 0;\"\u003e제공되는 내용\u003c\/p\u003e\n \u003cul style=\"margin: 0; padding: 0; list-style: none;\"\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eCMS 컬렉션, 참조 필드 및 플랫폼의 실제 한계\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e인수인계 후에도 유지 관리가 가능한 Client-First 클래스 시스템\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eFinsweet 필터링, Logic, 멤버십, 현지화 및 사용자 지정 코드\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0;  display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e마이그레이션 리디렉션 맵, Core Web Vitals 및 접근성 점검\u003c\/span\u003e\n\u003c\/li\u003e\n \u003c\/ul\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"display:flex; align-items:center; gap:20px; background:#FFFFFF; border:1px solid #E8E6E0; border-radius:8px; padding:14px 20px; margin-bottom:24px;\"\u003e\n \u003cspan style=\"font-size:11px; color:#888780; font-family:monospace;\"\u003e📄 malvina-webflow-developer-no-code-web-systems.skill\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003e2분 이내 설치\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003eClaude, ChatGPT 및 모든 AI 채팅에서 작동\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"border-left:3px solid #287E1B; padding-left:16px;\"\u003e\n \u003cp style=\"font-size:10px; font-weight:600; color:#287E1B; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 6px 0;\"\u003e설치 방법\u003c\/p\u003e\n \u003cp style=\"font-size:12px; color:#555550; line-height:1.7; margin:0;\"\u003e.skill 패키지를 다운로드하고 Claude를 연 다음, SKILL.md를 프로젝트 지침이나 시스템 prompt에 붙여 넣고 요구사항을 설명하면 Malvina가 답변을 완성합니다. 정확히 어떤 결과를 얻는지 확인할 수 있도록 완성된 전체 예시도 포함되어 있습니다.\u003c\/p\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58394059637000,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/malvina-webflow-developer-no-code-web-systems-book.jpg?v=1787172476","url":"https:\/\/kissmyskills.com\/ko\/products\/malvina-webflow-developer-no-code-web-systems","provider":"KissMySkills","version":"1.0","type":"link"}