영상 부터 보실게요 ⬇️

• "Figma에 디자인 시안은 기가 막히게 뽑았는데... 개발은 누가 해주나?"

• "코딩 몰라서 내 디자인 아이디어가 그냥 묻히는 게 너무 아까워."

• "퍼블리싱 외주? 너무 비싸고 시간도 오래 걸려..."

이 강의에서 뭘 배우냐면:

• Figma 디자인 (또는 이미지)을 Cursor AI에게 '제대로' 설명하는 법: 그냥 던져주는 게 아니라, AI가 알아듣게 디자인 컨셉과 구조를 전달하는 노하우.

• 디자인 요소(레이아웃, 버튼, 카드, 스타일 가이드 등)를 코드로 바꾸는 핵심 프롬프트: 어떤 식으로 질문하고 명령해야 원하는 코드 결과물을 얻는지.

• AI 코드 바로 확인 + '말로' 디자인 다듬기: Cursor가 생성한 코드를 실시간으로 확인하고, "이 부분 여백 좀 더 줘", "폰트 이거 말고 저걸로 바꿔줘" 처럼 AI와 대화하며 디자인 완성도 높이는 실전 워크플로우.

• 결과물: Figma 시안과 거의 유사하게 구현된 웹페이지

누가 들으면 딱 좋냐면:

• 디자인 시안은 있는데 코딩 때문에 결과물을 못 만드는 디자이너/기획자.

• 코딩 1도 모르지만 내 디자인으로 웹사이트 만들어보고 싶은 사람.

• AI로 퍼블리싱 작업 속도를 미친 듯이 올리고 싶은 프론트엔드 개발자 (주니어 환영!).

• 노코드 툴의 한계를 느끼고 좀 더 자유로운 디자인 구현을 원하는 사람.

이걸 배우면 뭐가 좋은데?

• 디자인 → 코드 변환 시간? 말도 안 되게 줄어듦. (최소 5배 이상)

• 코딩 스트레스 해방: 어려운 CSS 씨름 대신 AI와 대화하며 디자인 구현.

• 아이디어의 빠른 현실화: 머릿속/Figma 속 디자인이 바로 웹페이지로!

• '감'으로 코딩하는 신세계: 코딩 문법이 아니라 디자인 '바이브'로 결과 만들기 경험.

강사 소개

• 김보부상

• 스레드에서 봤지? 뜬구름 잡는 소리 안 해.

• AI로 안 되는 거 빼고 다 만들어서 결과로 보여주는 현실주의자.

• 내가 쓰는 실전 '바이브 코딩' 방법 그대로 알려줄게.

강의 안내 및 신청

• 강의 형식: 온라인 Google Meet 에서 진행해. 실시간이야.

• 코멘트: Figma 사용 경험이 있으면 좋지만, 없어도 괜찮아. 참고할 만한 웹 디자인 이미지나 스케치만 있어도 참여 가능.

자주 묻는 질문 (FAQ)

• Q: Figma 꼭 다룰 줄 알아야 하나요?
• A: 아니. Figma 파일이 없어도 괜찮아. 웹사이트 디자인 시안 이미지나, 참고할 만한 다른 웹사이트 스크린샷만 있어도 충분히 실습 가능해. (물론 Figma 할 줄 알면 더 좋고)

• Q: 코딩 진짜 하나도 몰라도 괜찮나요?
• A: ㅇㅇ. 괜찮아. 이 강의는 AI한테 코딩을 '시키는' 방법을 배우는 거야. 당신이 직접 코딩할 필요는 거의 없어.