코딩 한 줄 없이 랜딩페이지 만들기! (김경빈 튜터 12/19)

<aside>

🔒 모든 자료는 내부 학습 목적에 한해 사용해 주세요.

무단 사용 및 외부 유출 시 법적 제재 및 불이익이 발생할 수 있습니다.

본 페이지의 모든 콘텐츠는 저작권 및 개인정보 보호 대상입니다.

다음 항목의 외부 공개·복제·배포·캡처·가공은 금지됩니다.

강의 교안, 슬라이드, 수업 화면 및 영상 일부
과제·실습 문제, 예제 및 풀이
강의 커리큘럼, 진행 방식 등 세부 내용
내부 공유 링크(Google Drive, Notion 등) 및 공지
튜터/멘토 얼굴이 포함된 이미지나 영상 </aside>

https://zoom.us/rec/play/dXjuo_wGDw79o795DiCygJrwmXqyeWVMfq583RRpIw6KqhKMs2ZQv2Y0SQccg5yMkEZTWgQI5jUxGj3j.j0sawH60TsiPQEVN?autoplay=true&startTime=1766121066000

<aside> ⭐

[수업 목표]

바이브코딩을 활요해 간단한 포트폴리오 웹사이트를 만들 수 있다.
랜딩페이지 기획서를 작성할 수 있다.
바이브코딩과 bolt를 활용해 웹사이트를 구축 및 퍼블리싱할 수 있다. </aside>

<aside> 📂

[프로그램]

Chat GPT
bolt.new </aside>

<aside> 🚩 모든 토글을 열고 닫는 단축키 Windows : Ctrl + alt + t Mac : ⌘ + ⌥ + t

</aside>

<aside>

[학습 목차]

</aside>

01. Intro - 여러분의 새해 플레이리스트는?

<aside>

여러분, 1월 1일 0시에 들을 플레이리스트 정하셨나요?

저의 플레이리스트를 사알짝 공개해봅니다! 힌트만 보고 정답 맞추시면? 💵

<aside>

첫번째 - 명불허전 🌟 </aside>

<aside>

전국민의 소원… 올해엔 제발 💸 </aside>

<aside>

새로운 강자 등장! ♥️ </aside>

<aside>

(심화) 신입의 마인드셋 🥷 </aside>

<aside>

올해 마음이 안정이 필요하다면? 🧎‍♀️ </aside>

</aside>

02. 바이브 코딩이란?

<aside>

여러분은 바이브 코딩에 대해서 얼마나 알고 계신가요?

개발자가 없는 미래? 바이브코딩이 바꾸는 개발 패러다임입니다! (출처: 넥스트 유니콘)

<aside>

💡 바이브코딩이란?

바이브코딩(Vibecoding)은 최근 AI 개발 트렌드에서 등장한 신조어로, "코드를 직접 한 줄 한 줄 작성하는 것이 아니라, AI에게 자연어로 '의도(Vibe)'와 '방향'을 설명하며 코딩을 맡기는 방식"을 의미합니다.

<aside>

핵심 개념:

복잡한 프로그래밍 문법(Syntax)을 외울 필요 없이, 마치 사람에게 설명하듯 "이런 기능을 만들어줘", "이 부분은 좀 더 부드럽게 바꿔줘"라고 말하면 AI가 실제 코드를 작성합니다.
인간은 코드를 직접 타이핑하는 '작성자(Writer)'의 역할에서, AI가 짠 코드를 검토하고 지시하는 '관리자(Manager)' 혹은 '감독(Director)'의 역할로 변합니다. </aside>

<aside>

주요 툴:

Cursor: VS Code(가장 대중적인 코드 에디터)를 기반으로 만든 AI 에디터입니다. 현재 바이브코딩의 대명사처럼 쓰입니다.
Bolt.new: 설치 없이 인터넷 창에서 바로 만드는 툴입니다. 코드를 몰라도 아이디어만 있으면 앱을 만들 수 있습니다.
Claude : 코드를 직접 짜주는 에디터는 아니지만, 코딩 실력이 가장 뛰어난 AI 모델입니다. 위에서 소개한 툴들의 '두뇌' 역할을 주로 담당합니다. </aside>

</aside>

<aside>

💡 마케터는 실무에서 이렇게 이용합니다!

데이터 크롤링:
1. 제미나이를 활용해 웹 크롤링할 수 있는 파이썬 코드를 짜달라고 요청합니다. 00웹사이트 또는 00사이트에 있는 리뷰 데이터를 긁어올 수 있습니다. > 자사 분석, 경쟁사 분석, 타겟 활용
데이터 시각화:
1. 챗지피티를 활용하여 데이터를 시각화할 수 있는 파이썬 코드를 짜달라고 할 수 있습니다. 복잡한 데이터를 시각화하여 볼 수 있어 데이터 분석이 용이합니다.
웹사이트 빌딩:
1. 챗지피티를 활용해 웹사이트를 기획, 리액트(React) 기반의 웹사이트를 위한 코드를 짤 수 있습니다.
2. bolt.new에서 구현하여 웹사이트를 퍼블리싱 할 수 있습니다.
  1. React 기반 웹사이트란?: Meta가 만든 기술로, 지금 전세계에서 가장 인기 있는 웹사이트 제작방식입니다. 레고 블록처럼 조립해서 만든 웹사이트로 이해해주시면 됩니다. </aside>

</aside>

03. 우피와 볼트의 차이

<aside>

📗 우피(Oopy)와 볼트(Bolt) 비교

구분	우피	볼트
제작 방식	노션에 글 쓰기	AI에게 채팅으로 지시
핵심 기술	노션페이지 → 웹사이트 변환	대화형 AI → 코드 생성 및 실행
필요 역량	노션 사용법	프롬포팅
디자인	노션 스타일	자유로움
주요 용도	블로그, 포트폴리오, 회사 소개 등	앱, 게임, 웹사이트 등
수정 방법	노션 내용만 수정하면 자동 반영	AI 활용해서 다시 수정

<aside>

</aside>

<aside>

</aside>

04. Bolt(볼트)는?

<aside>

</aside>

05. 앗! 이력서 한장으로 만드는 포트폴리오 페이지?

<aside>

</aside>

06. 랜딩 페이지 기획

<aside>

</aside>