너무나 무지했고 나름 진지했던 사이트 만들기 첫 실패.

소개

전혀 지식 없이 바이브 코딩이라는게 그냥 제미나이 canvas에서 내가 원하는 기능을 입력하고 사이트 만들어줘 하면 사이트가 만들어지는 줄 알았습니다.

시연만 되는 데모버전을 만들어주는 건데, 신나서 채팅을 치다가 한참 헤맸네요.

책 기획을 위한 유사도서 탐색기를 만들려고 했습니다. 한국 책 링크를 하나 넣으면 외국 서점 사이트에서 유사도서들을 찾아주는 것이죠!

진행 방법

gemini canvas 활용

  • 사용자가 한국 온라인 서점에서 책 링크를 올리면 그 상세페이지 내용과 책 정보를 파악해서, 미국 아마존 서점 사이트에서 유사 주제의 도서 3권, 일본 서점 사이트 혼토에서 유사 주제의 도서 3권을 각각 찾아서 표로 정리해주는 웹서비스. 아마존에서 찾은 도서 3권과 혼토에서 찾은 도서 3권 각각 누르면 실제 아마존, 혼토 해당 도서 링크로 넘어가도록 만들어줘. 표에는 원어와 한국어 모두 표기해줘.

  • 검색하면 나오는 표에 더 자세한 정보를 추가하고 싶어. 리스트를 미국 일본 각각 5개로 늘리고, 각각 어떤 점이 유사하다고 판단해서인지 판단 근거를 써줘.참고로 이것은 출판 기획자를 위해 쓸 프로그렘이니까 참고해줘.

  • 다음 정보로 열 2개 추가해줘. 1. 해당 책에 대한 대표적인 독자 반응을 구어체로! 2. 해당 나라에서의 성적(예를들어 몇주간 어느 분야 랭킹 몇위에 들었달지)

    그리고 2개의 표 아래에 전체 바탕으로 관련 주제에서 새로운 책을 기획하기 위한 도서의 컨셉을 기획서에서 '기획 의도' 쓰는 형식으로 제안해줘. 그 기획된 책을 독자들이 읽어야 하는 이유를 바탕으로 상사를 설득할 수 있도록.

이렇게 제미나이 canvas에 세번 물었고 옆에 사이트 이미지가 뜨길래 사이트가 만들어지는 건 줄 알고 신났습니다.

한국어 웹 사이트의 스크린 샷

https://g.co/gemini/share/4a1e112cf9a3

어? 왜 데모버전만 되지?

나름의 해결책으로 코멧 브라우저!를 다운받았습니다. 오늘 알게된 녀석이었죠. 화면을 같이 봐주니까. 물어보면서 하면 되겠구나 했어요. (이떄부터 작은 지옥이 펼쳐졌습니다)

브라우저 옆에 에이전트와 채팅하니 구글 앱스 스크립트를 활용하면 만들 수 있다길래, 앱스 스크립트를 켰고 거기에 위에서 물어봤던 데모버전 html(?)주소를 넣었죠. 코멧 형님과 여섯번 정도의 오류 끝에.. 배포!하니 사이트가 떴습니다!! 똑같은 데모버전으로요.

데모버전을 긁어서 다른 툴로 어렵데 다시 데모버전을 만든셈이랄까요. (짝짝짝)

여기서 다시 제대로 사용하려면 어떻게 해야하는지 코멧 형님과 후토크를 했는데 api이니 (api가 정확히 무슨 뜻인지 아직도 모르겠습니다.. ) 서점 사이트를 크롤링하고 어쩌고.. 저의 인식 범위를 넘거나는 혜성급 정보에 성공 사례 대신 실패 사례를 쓰자고 마음을 접었습니다. 몇시간 사이에 설렘에서 절망까지 다양한 감정을 느낄 수 있는 밤이었습니다.

결과와 배운 점

  • 기본 개념이 너무 없어서 기본 개념 정리부터 다시할 필요가 있습니다.

  • 그래도 사용해봤던 툴을 이리저리 만져봐서 조금 친해진 느낌인데요. 이참에 각 툴별로 다른 분들은 어떻게 사용하는지 사례와 유튜브 하나씩 살펴봐야겠네요.

  • 토요일 모임.. 30분 정도 늦었는데 앞부분 설명은 못듣고 자료만 보고 아 이렇게 쉽게 되는 거구나! 하는 오해에서 모든 것이 비롯된 것 같아요. 늦지 맙시다!

4개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요