AI로 비즈니스 아이디어 조언 웹사이트 제작 방법: No-code 웹앱 개발 사례

AI 기반 웹사이트는 비즈니스 아이디어를 입력하여 전문가의 조언을 쉽게 생성할 수 있습니다.

### 30분 만에 AI로 웹 서비스 만들기: 자동화된 비즈니스 조언 웹사이트 제작
* 👨‍💻 **AI를 활용하여 비즈니스 아이디어를 입력하면 전문가 3명의 조언을 자동으로 제공하는 웹사이트** 제작 과정을 소개합니다.
* 💡 코딩이나 디자인 없이 **AI 시대의 편리성**을 활용하여 웹 서비스를 구축했습니다.
* 💻 **"김미더서"라는 웹사이트**를 통해 비즈니스 아이디어(예: AI 오토메이션 에이전시)를 입력하면 전문가의 조언을 받아볼 수 있습니다.
* 🤔 AI 자동화를 세일즈에 접목하면 **개인화된 맞춤형 답변** 제공이 가능하며, 고객에게 **스마트한 인상**을 심어줄 수 있습니다.
* 🤝 AI 크리에이터 랩 커뮤니티(현재 100명 정원, 20만원 평생 멤버십)를 통해 **더 자세한 정보와 프롬프트**를 제공합니다.
* 🛠️ **프레이머와 클로드, Make, 그리고 OpenAI API**를 활용하여 웹사이트를 구축했습니다.  클로드를 통해 HTML 코드 생성 및 수정을 진행했습니다.
* ⚙️ **Make를 이용하여 웹훅 URL을 생성하고, JSON 모듈을 통해 데이터를 파싱**하여 전문가 3명의 답변을 각각 처리합니다.
* 🚀 **저렴해진 OpenAI API(미니 모델)**를 활용하여 고품질의 AI 챗봇 서비스를 만들 수 있는 시대가 도래할 것으로 예상합니다.

### 30분만에 AI로 웹서비스 구축: 자동화된 브랜드 전략 생성기 제작
* 👨‍💻 **비즈니스 전략 전문가 어드바이스 생성기를** 목표로,  데이터를 배열하여 전문가 역할(브랜드 전략 컨설턴트 등)과 전문 분야를 설정했습니다.
* 💡  사용자의 비즈니스 과제에 대한 조언을 제공하는 프롬프트를  **Claude.ai,  GPT 등 여러 AI 모델**에 입력했습니다.
* ⚙️  **Make.com을 활용하여 API를 연결**,  각 AI 모델(Claude, GPT, FlexCity)에서 답변을 가져오는 자동화 시스템을 구축했습니다.  API 키 발급 및 관리 방법도 설명했습니다.
* 👨‍💼  각 AI 모델에 전문가 역할(1, 2, 3번)과 전문 분야를 지정하여 **다양한 관점의 답변**을 얻었습니다.  4096 토큰 제한을 고려하여 프롬프트를 구성했습니다.
* 🌐  **웹 프론트엔드는 HTML 코드**를 사용하여 결과를 보기 좋게 정리했으며,  클로드에게 HTML 코드 생성을 요청하는 방법을 보여주었습니다.
* 🔄  **자동화 시스템 테스트** 과정에서 오류 발생 시,  스크린샷과 오류 메시지를 클로드에 입력하여 해결책을 찾는 과정을 보여주었습니다.
* 📝  **최종 결과물**은 카메라 렌즈 회사를 예시로, 브랜드 전략 컨설턴트, 디지털 마케팅 전문가, 비즈니스 개발 이사의 조언을 보여주었습니다.  GPT 모델의 추가적인 설명 제거 과정도 포함했습니다.
* 🚀  **향후 개선 방향**으로 이메일 전송 기능 추가, 게이미피케이션 요소 도입 등을 제시하며,  **AI 활용 웹 서비스 제작의 가능성**을 강조했습니다.

네, 반갑습니다. 김시현입니다. 오늘은 비즈니스 아이디어를 입력하면 세

명의 전문가의 조언이 자동으로 나오게 하는 그런 웹사이트를 만드는 방법을

말씀드리려고 합니다. 사실 이번 걸 만들어 보면서는 이렇게 웹앱 만드는 게

쉬워졌다는 것을 정말 아주 크게

느꼈던 그런 사례였던 것 같습니다.

예전 같았으면 홈페이지를 만들려면 코딩도 해야 되고 디자인도 해야 되고

그렇잖아요? 근데 지금은 제가 실제로

코딩한 것은 단 한 줄도 없고, 제가 실제로 디자인한 것도 단 하나도 없는

그런 상태에서도 이만큼 꽤 괜찮은 웹서비스를 만들 수 있다는

것이 정말 AI 시대에 살고 있지 않나, 그런 생각을 하게끔 만드는 것

같습니다. 일단 제가 만든 서비스는 비즈니스 아이디어를 입력하면 세

명의 전문가를 불러내서 그 사람들의 조언을 이제 받아보는 그런 서비스라고

보시면 될 것 같습니다. 일단 먼저 보여 드릴게요. 제가 만든 사이트이고,

이 사이트 이름은 '김미더서'라는 사이트입니다. 지금 공개가 되어 있지

않아요. 여기다가 비즈니스 아이디어를 입력을

해 볼게요. 제가 요즘에 관심 있는 것은 AI 오토메이션 에이전시 때문에

보겠습니다. 자, 한 걸로 써 볼게요. 이렇게 쓰면 일단 조금만 기다려 주세요라는

돌아가는 게 있죠. 그리고 AI 오토메이션

에이전시, 제가 입력한 그런 창이 뜹니다. 개인적으로는 AI 자동화를

가장 강력하게 사용할 수 있는 방법은 세일즈에 접목하는 거라고 생각을

해요. 왜냐하면 제가 이렇게 간단하게

그러니까 어떤 고객이 나한테 문의를

하고 싶다고 했을 때, 그냥 문의를 남기게 하는 방식이 있고, 두 번째는

어떤 문의를 남겼는지에 따라 개인화된

맞춤형 답변을 줄 수 있는지, 이것은 꽤 굉장히 큰 차이라고 볼 수 있다고 생각을

합니다. 정보만 입력했는데 이만한 것들을 나한테 준다고 하는 그런 이미지

같은 것도 줄 수 있고요. 어, 벌써 이런 AI 기술을 잘 사용하고

있구나 하는 그런 스마트한 느낌도

전달할 수 있다고 생각을 합니다. 이렇게 답변이 나왔는데요, 한번

간단하게 읽어 볼게요. 어, 제가 AI 오토메이션 에이전시라고 입력을 했더니

첫 번째로 브랜드 전략 컨설턴트가

소환이 됐습니다. 이렇게 소개를 하라고 했어요. 소개를 하고, 그다음에 초기

관점은 뭐냐, 그리고 이 비즈니스의 핵심

포인트는 뭐냐, 이런 것들을 불러

내게끔 했습니다. 재밌죠? 키워드 하나만

입력을 하면 이렇게 꽤 긴, 그리고 괜찮은 답변을 받을 수 있다라는

점에서 저는 이번 사례가 굉장히 많은

분들에게 좀 도움이 되실 거라고 생각합니다. 네, 어떻게 돌아가는지

보여 드리기 이전에 커뮤니티 소개를

간단하게 드리도록 하겠습니다. 저는 AI 크리에이터 랩이라는 커뮤니티를

만들고 운영을 하고 있고요. 여기서는 제가 유튜브에서 말씀드린 그런 영상에

조금 더 디테일한 정보, 그리고 프롬프트 같은 것들, 그리고 이 메이크

어, 저장을 하고 다시 불러올 수가 있어요. 그럼 불러올 수 있는

블루프린트 파일 같은 것들을 커뮤니티

내에서 제공을 하고 있습니다. 그래서 만약에 저랑 조금 더 밀도 있게 소통

하면서 AI 공부를 하시고 싶으시다면 저희 크리에이터 랩에 방문해 주시기

바랍니다. 어, 제가 사실 저번 달에 50명으로 마감을 했거든요. 근데 제가

마감하는 것을 깜빡해 가지고 열어뒀더니 조금씩 사람이 늘어서

그리고 개인적으로 문의 주시는 분들을 열어 드리다 보니까 80명이

됐더라고요. 그래서 아, 제가 마감됐다고

못 받은 분들이 꽤 있는데, 그분들한테도 혹시나 어 기회가 될 수

있을 것 같아서 일단 정원을 100명으로 늘려 놨고요. 어, 지금 한

열몇 명 정도의 슬롯이 남아 있는 것 같아요. 20만 원이고 평생

멤버십입니다. 혹시나 관심 있으시다면 지금 아마 가입을 하시는 게 제

생각에는 정말로 가장 저렴하고 꽤

높은 가치를 가져가실 수 있을 거라고 생각을 합니다. 네, 그러면 커뮤니티

소개는 여기까지 하고요. 어떻게 돌아가는지를 처음부터 하나하나

말씀드리도록 하겠습니다. 일단 먼저

프레임워크 아는 툴에서 저는 이 홈페이지를 만들었습니다. 홈페이지

만드는 툴 중에 여러 가지 툴이 있는데, 저는 프레이머를 가장 활발하게 사용하는 것 같아요. 그냥 제일 쉽기도 하고, 제일 예뻐서 이렇게 쓰고 있는데요.

보통 프레이머는 정해져 있는 인풋 박스 같은 것만 넣을 수 있게 되어 있거든요. 근데 그렇지 않고, 이번에는 제가 직접 코딩을 해서 웹페이지 자체를 그냥 박아 넣었습니다. 이 임베딩을 할 수 있어요.

보시면 임베드를 하면 특정 코드를 넣으면 여기에 들어가게 되어 있거든요. 근데 저는 사실 코드를 짤 줄을 몰라요. 근데 어떻게 짰냐 하면, 클로드랑 같이 짰습니다.

지금 바로 클로드랑 짜는 것부터 먼저 보여 드리면서 아예 처음부터 다시 자세하게 보여 드릴게요. 저는 이거 처음에 뭘로 하려고 했냐면, 인스타그램 형태의 디자인을 만들고 싶었거든요.

그래서 클로드한테 인스타그램 형태, 혹은 책갈피 형태의 HTML을 만들어 달라고 요청했습니다. 근데 제가 처음부터

다시 만들어 볼게요. 음음, 클로드한테 이렇게 요청을

하면 코딩을 이렇게 해 주거든요. 애초에 이거 혹시 안 해 보신 분도

있을 것 같기는 한데, 어, 클로드랑 채팅 GPT-4 온니랑 섞어 가면서

코딩에 대한 질문을 하면 정말 빠르게

답을 얻을 수 있습니다. 저는 코드를 뭐 한 줄 정도까지밖에 쓸 줄

모른다, 그 정도인데요. 그냥 그 정도만 할 줄 알아도 이 정도, 이거는 어

클로드랑 소통을 하면서 만들어 낼 수

있다는 게 진짜 엄청 신기하고 대단합니다. 지금 일단 제가 어 요청한

거는 HTML 체크박스, HTML 만들어 달라고 했죠. 그래서 지금 오른쪽과

같이 이렇게 나왔는데요. 저는 체크박스 어

여기서 조금 수정을 몇 가지를 해야 될 것 같아요.

어, 말고 상단 그리드 다크모드 디자인으로 변경, 이렇게 말로 코딩을 할 수 있는

시대가 왔습니다. 마음에 들지 않는다 그러면 조금 조금씩 이렇게 말로 바꿔

달라고 하면 되고요. 적당한 답이 나왔을 때 이제 한번 붙여 놓고

그다음에 조금씩 만들면서 수정을 해보도록 할게요. 네, 다크모드 적용됐죠.

케 전송도 나왔고요. 일단 요걸로 적당히 해서

하겠습니다. 이거 어떻게 하냐면, 코드를 누르면 코드가 나오거든요. 이거를

복사를 하고, 아까 전에 우리가 아까 전에 만들고 있었던

여기다가 넣겠습니다. HTML 놓으면 이렇게 떴습니다. 원래

있던 거니까 신기하죠. 이렇게 떴습니다. 이것을 가지고 여기서

입력되는 값을 메이크로 받아올 겁니다. 메이크가 어떻게 돼 있느냐, 다시 한번만

처음부터 만들어 볼게요. 메이크는 이제 웹을 만드는

거예요. 웹이 뭐냐면, 어, 택배를 받을

주소를 만든다고 보시면 됩니다. 그 메이크 라인 신호가 있어야지 이게

트리거를 삼아서 시작이 되는 거잖아요. 그런 것처럼 이 주소로 뭐 어떤 정보가

들어오면 이 메이크 시나리오가 시작이 된다라는 그런 신호를 준다라고

봐주시면 될 것 같습니다. 여기 외국에 새로운 외국이니까 애드를 누르고요. 어,

엔터 쳐서 이렇게 일단 아무 이름이나 넣겠습니다.

그리고 이 웹 주소가 나왔죠. 이 주소를

복사를 할게요. 복사를 했습니다. 그러면, 근데 우리가 이 HTML 코드가

여기 메시지 입력한 것이 Make에서 생성된 웹훅 URL로 들어가라고 안 돼요.

있잖아요. 그래서 로드한 추가를 해달라고 할 겁니다.

어, 아, 추가해… 이렇게 하면 알아서 또 짜줄

겁니다. 너무 신기하죠. 사실 저는 이

코드를 천천히 읽으면 읽을 줄은 알지만

읽어본 적이 별로 없는 거 같아요. 그래서 해주는 것을 기다려

[풀버전] 30분 만에 AI로 웹서비스 만드는 방법 (Make 자동화)

이 채널에서는 1인 기업의 생산성을 높이고 우리가 원하는 삶을 구축하는 데 도움이 되는 전략과 도구를 제공합니다.
최신 비즈니스 정보와 실용적인 마케팅 지식을 만나보세요.



시현의 모험 Sihyun Adventure

AI 기반 웹 서비스 제작 소개 및 데모

비즈니스 아이디어 입력 시 전문가 조언을 자동으로 제공하는 웹사이트 제작 방법 설명

웹앱 제작의 용이성 강조, 코딩 및 디자인 없이 웹 서비스 구축 가능성 제시

비즈니스 아이디어 입력 시 세 명의 전문가 조언 제공 서비스 소개

'김미더서' 웹사이트 데모 시연, AI 오토메이션 에이전시 아이디어 입력

AI 오토메이션 에이전시에 대한 세 명의 전문가 조언 결과 확인 및 분석

AI 크리에이터 랩 커뮤니티 소개

AI 크리에이터 랩 커뮤니티 운영 및 제공 정보 소개

커뮤니티를 통한 AI 학습 및 밀도 있는 소통 기회 제공

커뮤니티 정원 확장 및 멤버십 정보 공유 (100명, 20만원, 평생 멤버십)

웹 서비스 구축 과정 상세 설명 (프레임워크, 클로드 활용)

프레임워크 및 웹페이지 제작 툴(프레이머) 사용 경험 공유

클로드 활용한 웹페이지 코딩 과정 설명,  HTML 체크박스 생성 요청 및 수정 과정

생성된 코드 복사 및 프레임워크에 적용, 웹훅 URL 설정 및 메이크(Make) 활용

메이크(Make)를 이용한 웹훅 설정 및 웹 연결 과정 설명

전문가 생성을 위한 GPT 및 클로드 활용,  JSON 데이터 활용 및 파싱 과정

OpenAI 및 Claude API 연동 및 최종 서비스 구현

OpenAI API를 이용한 전문가별 답변 생성 및 프레임워크에 적용

Claude API 연동 과정 설명 및 API 키 발급 및 사용 방법 안내

다양한 AI 모델(Llama 3 70B) 활용 및 최종 결과물 확인

클로드를 이용한 최종 결과물 HTML 코드 생성 및 수정

최종 서비스 테스트 및 오류 해결 과정,  오류 발생 시 클로드 활용한 문제 해결

최종 결과물 분석 및 개선점 제시 (프롬프트 개선, 게이미피케이션 요소 추가 등)

향후 서비스 개선 방향 제시 (디자인 개선, 기능 추가 등)

개발 및 디자인 지식 없이도 서비스 제작 가능성 강조