AI 활용! 30분 만에 만드는 나만의 회사 홈페이지, 초간단 비법 공개!

내 회사 홈페이지 만들기, AI랑 같이 해보자!

이번 파트에서는 AI를 이용해서 우리 회사 홈페이지를 만들어 볼 거야. AI를 얼마나 활용하느냐에 따라 간단하게 뚝딱 만들 수도 있고, 좀 더 세부적인 기능까지 넣어서 만들 수도 있어. 두 가지 방법 다 보여줄 테니 잘 따라와 봐!

1. AI로 계획서 짜고 만들기 (기능이 많을 때 추천!)

• AI에게 계획서 써달라고 하기: "이런 웹사이트 만들 건데, 계획서 좀 짜줘!" 라고 하면 AI가 알아서 꼼꼼하게 계획서를 다 짜줘. 마치 우리가 뭘 만들어야 할지 정리하는 것처럼 말이지.
• 계획서대로 만들기: 이렇게 AI가 짜준 계획서를 AI에게 보여주면서 "이 계획서대로 웹사이트 만들어줘!" 라고 하면, AI가 그대로 만들어줘.
• 언제 사용하면 좋을까? 우리 웹사이트에 버튼을 눌렀을 때 뭔가 작동하는 기능 같은 게 많이 필요하다면, 이렇게 계획서를 먼저 짜고 만드는 게 훨씬 체계적이고 나중에 실수할 확률도 적어.

2. AI로 디자인만 뚝딱 만들기 (간단하게 보여주기만 할 때 추천!)

• 한 줄로 디자인 요청: "온라인 강의 상품 랜딩 페이지 만들어줘. 신청 폼도 넣어줘." 이렇게 딱 한 마디만 해도 AI가 알아서 멋진 디자인의 웹사이트를 뚝딱 만들어줘.
• 언제 사용하면 좋을까? 그냥 우리 웹사이트가 어떻게 생겼는지 보여주는 게 목적이라면, 굳이 계획서까지 만들 필요 없어. 이렇게 간단하게 디자인만 요청해서 만들어도 충분해.

웹사이트 만드는 순서 (기본 틀)

어떤 방식으로 만들든, 웹사이트는 보통 이런 순서로 만들어져.

1. 디자인 (프론트엔드): 눈에 보이는 버튼, 이미지, 글씨 같은 것들을 예쁘게 만드는 단계야. 이걸 '프론트엔드'라고 불러.
2. 기능 구현 (백엔드): 버튼을 눌렀을 때 실제로 작동하게 만드는 것들을 만드는 단계야. 이걸 '백엔드'라고 해.
3. 배포: 이렇게 만든 웹사이트를 인터넷에 올려서 다른 사람들도 볼 수 있게 하는 거야.

물론 이 사이에 더 복잡한 과정들이 있지만, 큰 틀만 이해해도 괜찮아. AI가 계획서를 잘 짜주면, 우리는 그냥 AI가 시키는 대로 질문하면서 수정만 하면 되니까 어렵지 않을 거야.

실습: 간단한 버전으로 디자인 먼저 해보기

이제 실제로 간단한 버전으로 디자인부터 만들어 볼 거야.

1. V0 켜기: 먼저 V0라는 프로그램을 켜.
2. 웹사이트 주제 입력: "온라인 강의 사업 강의 페이지 만들어줘" 처럼 네가 만들고 싶은 웹사이트의 주제를 입력해. (다른 AI 도구를 써도 되지만, V0랑 커서 조합이 잘 맞아서 추천해!)
3. 다운로드 및 압축 해제: AI가 만들어준 파일을 다운로드해서 압축을 풀어줘.
4. 커서로 실행 요청: 압축 푼 파일들을 가지고 커서에 "이 코드로 웹사이트 실행해줘" 라고 요청해.
5. 디자인 수정: 만약 디자인이 마음에 안 들면, 스크린샷을 찍어서 커서에 "디자인은 좋은데, 모든 요소가 왼쪽으로 치우쳐 있어. 중앙 정렬 다시 해줘." 라고 요청하면 AI가 알아서 수정해 줄 거야.
6. 모바일 버전 확인: 수정된 웹사이트가 모바일에서도 예쁘게 보이는지 확인해 봐.

실습: 웹사이트 배포하기 (다른 사람들도 볼 수 있게!)

이제 우리가 만든 웹사이트를 인터넷에 올려서 누구나 볼 수 있게 만들어 볼 거야. 이걸 '배포'라고 해.

배포를 위한 준비물:

1. 소스 코드 폴더: 우리가 만든 웹사이트 파일들이 들어있는 폴더.
2. 깃허브 계정: 우리가 만든 코드들을 인터넷에 올려놓는 저장소 같은 거야. 구글 드라이브랑 비슷하지만, 코드를 더 전문적으로 관리할 수 있어.
3. 버클 계정: 실제 웹사이트를 올려서 배포해주는 사이트야.

배포 과정:

1. 깃허브에 레포지토리 만들기: 깃허브에 들어가서 '새로운 레포지토리'를 만들어. 이건 우리가 만든 코드를 담을 폴더라고 생각하면 돼. (이름은 'online' 같은 걸로 지어주고, 다른 사람이 쉽게 볼 수 없도록 'private'으로 설정하는 게 좋아.)
2. 커서에게 코드 올리기 요청: 깃허브 레포지토리 링크를 복사해서 커서에 "이 코드를 깃허브 레포지토리에 올려줘" 라고 요청해. 만약 깃허브 로그인이 안 되어 있으면, AI가 로그인하는 방법도 알려줄 거야.
   • 주의: 만약 AI가 한국어로 된 요청을 이해하지 못하면, 영어로 다시 요청해 봐.
3. 깃허브에 코드 업로드 확인: AI가 코드를 올리면, 깃허브에 들어가서 파일들이 제대로 올라갔는지 확인해 봐.
4. 버클에 프로젝트 추가: 버클 사이트에 들어가서 '새 프로젝트 추가'를 누르고, 깃허브에 올렸던 코드를 연결해.
5. 배포 완료! 이제 배포가 완료되면, 너만의 웹사이트 링크가 생겨! 이 링크를 클릭하면 누구나 네 웹사이트를 볼 수 있어.

참고: 지금은 간단하게 만든 버전이라 버튼을 눌러도 실제 작동하지 않을 수 있어. 다음 강의에서는 이런 기능들을 어떻게 구현하는지 더 자세히 배울 테니 걱정하지 마!