클로드+힉스필드로 20분 만에 초고속 홈페이지 제작! 왕초보도 가능한 이 방법!

클로드 디자인으로 20분 만에 화장품 쇼핑몰 초안 만들기! 💄✨

오늘 보여줄 사이트는 내가 딱 20분 만에 뚝딱 만든 화장품 쇼핑몰 초안이야. 헤더에는 모델이 세럼 바르는 영상이 나오고, 제품에 마우스를 올리면 커서가 살아 움직여! 제품을 클릭하면 상세 페이지로 넘어가고, 나중에는 결제 시스템까지 붙여서 실제 쇼핑몰로 만들 수도 있지.

이게 가능한 이유는 바로 클로드 디자인이 엄청나게 업그레이드됐기 때문이야. 쉽고 빠르게 이런 멋진 사이트를 만들 수 있게 된 거지!

클로드 디자인, 뭐가 달라졌을까? 🤔

업데이트된 클로드 디자인의 핵심 3가지를 알려줄게.

1. 사용량 걱정 끝! 넉넉하게 써봐!

   • 예전에는 클로드 디자인을 쓰다 보면 제한에 걸려서 답답했잖아. 근데 이제는 네가 이미 쓰고 있는 클로드 구독량에 디자인 사용량까지 합쳐져서 나와. 월 구독 하나면 디자인이든 코드든 전부 커버 가능해! 👍

2. MCP 연결로 고퀄리티 이미지/영상 뚝딱! 📸🎬

   • 이게 진짜 대박이야! 클로드에 MCP라는 걸 연결하면 고퀄리티 이미지랑 영상을 엄청 빠르고 쉽게 만들 수 있어. 나는 힉스필드라는 사이트에 MCP를 연결해서 사용했는데, 덕분에 GPT나 제미나이 같은 다른 앱에서 이미지나 영상 만드는 일이 아예 없어졌어.

3. 편집 기능도 업그레이드! 더 스마트해졌어! ✏️

   • 이제 캔버스에서 바로바로 편집이 가능하고, 디자인 시스템도 훨씬 더 좋아졌어. 이건 뒤에서 직접 보여줄게!

흔한 실수? 방향 설정이 중요해! 🧭

많은 사람들이 클로드에 "화장품 쇼핑몰 만들어줘!"라고 바로 요청하면 실망하는 결과물을 얻곤 해. AI는 시키는 대로 실행은 잘하지만, 우리 브랜드가 어떤 느낌으로 보여야 하는지는 AI가 대신 정해주지 못하거든.

그래서 나는 레퍼런스부터 찾아봐. 전 세계에서 잘 만든 웹사이트만 모아놓은 Awwwards 같은 곳에서 '코스메틱'이나 '뷰티'로 검색하면 멋진 사이트들이 많이 나와.

마음에 드는 사이트를 찾았다면 'Visit Site'를 눌러서 어떻게 구성되어 있는지 살펴보는 거야. 내가 참고한 사이트는 헤더에 16:9 비율의 영상이 꽉 차 있고, 제품에 마우스를 올리면 다른 이미지가 나오는 방식이었어.

고퀄리티 영상, 힉스필드 MCP로 해결! 🚀

클로드는 영상을 직접 만들어주지 못하잖아? 그래서 힉스필드 사이트에 있는 MCP를 가져와서 사용하는 거야.

• Awwwards와 힉스필드 사이트 링크는 영상 설명란에 달아둘게!
• 힉스필드를 사용하려면 로그인을 하고 구독을 해야 해. '스타터' 요금제는 월 19달러로 이용 가능해.

힉스필드에서 MCP 탭에 있는 걸 복사해서 클로드에 연결해주면 돼.

1. 클로드에 들어가서 '사용자 지정' 클릭
2. '커넥터' 클릭
3. '+' 버튼 눌러서 커넥터 추가
4. 이름은 아무거나 정하고, MCP를 연결해줘.

그리고 프롬프트에 이렇게 요청하는 거야:

"한국인 모델이 화장품을 바르고 있는 영상이 헤더에 16:9 비율로 꽉 채워져서 재생되게 세팅해 줘. 실제 모델이 있는 제품 사진도 생성해 주고, 마우스를 화장품 이미지에 올리면 추가로 생동감 넘치는 이미지가 로드되게 해 줘."

디자인 시스템이나 템플릿은 선택하지 않고 바로 'Create'를 누르면 돼.

그러면 클로드가 몇 가지 방향을 제안해 줄 텐데, 마음에 드는 걸 골라서 'Continue'를 눌러주면 돼.

짠! 힉스필드 MCP를 이용해서 고퀄리티 영상이 들어간 꽤 괜찮은 화장품 사이트 초안이 완성됐어!

코드로 내보내서 더 멋지게! 💻

'제품 보기'를 누르면 제품들이 나오고, '화장품 사이트'라고 폴더 이름을 지정하면 클로드 코드로 넘어갈 수 있어. VS Code 같은 다른 툴에서 이어서 작업해도 되고, 로그인이나 결제 기능이 필요하면 내보내서 작업하면 돼.

간단하게 초안을 보여주는 게 목적이라면, 코드를 깃허브에 올리고 버셀에서 임포트해서 배포하면 끝이야!

지금 시작하는 게 중요해! 🌟

오늘 이렇게 고퀄리티 사이트를 만들 수 있었던 건 좋은 레퍼런스를 고르고, MCP를 잘 붙였기 때문이야. 여기까지 따라온 너희들은 이미 절반은 준비된 거야.

반년 뒤에는 모든 셀러와 디자이너가 이런 방식으로 웹사이트를 만들게 될 거야. 그때 시작하면 너희 쇼핑몰은 다른 사람들과 똑같아질 수 있어. 지금 시작하는 사람들이 그 반년 동안 취향과 판단력이라는 격차를 벌릴 수 있는 거지.

도구는 점점 상향 평준화되니까, 너만의 취향이라는 무기를 갖는 게 중요해.

오늘 딱 하나만 해보자. Awwwards.com에 들어가서 너희 브랜드에 맞는 레퍼런스 하나를 골라봐. 그리고 그걸 클로드 디자인에 넣어보는 것만으로도 시작이야.

오늘 영상에서 썼던 프롬프트는 설명란에 달아둘 테니 참고해서 멋진 웹사이트 초안을 만들어보길 바라!

앞으로도 클로드 디자인을 활용한 다양한 영상들을 계속 만들 테니 구독해두면 놓치지 않을 거야! 다음 영상에서 보자! 👋