가볍게 Bolt로 간단한 서비스를 만들어보면서 최신 AI 개발툴을 찍먹해보도록 해요. 설명없이 바로 튜토리얼 들어갑니다.
프로젝트 소개
같이 만들어볼 초간단 서비스는 크롬 익스텐션.
내가 만든 크롬 익스텐션을 설치하면 웹 페이지의 이미지를 페페 그림으로 바꿔버리는 서비스(?) 입니다. 뭐 서비스라고 말하기도 민망할 정도로 정말 쉬워요.
회원가입
일단 Bolt에서 접속하여 회원가입을 합니다.
굳이굳이 이 얘기를 하는 이유는, 회원가입 이후 플로우가 약간 헷갈릴 수 있어서 (내가 헷갈렸기 때문에) 입니다.
가입하기 누르면 자동으로 계정은 개발사 사이트 https://stackblitz.com/ 로 이동해서 만들어주는데 (이상한 작은 팝업창 안에서 가입해야함. 왜? 🤔) 가입신청 후 이메일 확인까지 하고 나면, 다시 Bolt.new로 돌아가서 로그인해야 합니다.
Bolt는 직접 코딩할 수 있는 편집기와 AI가 알아서 해주는 프롬프트 둘로 나뉘는 것 같아요. 이 튜토리얼에서는 AI 프롬프트만 사용합니다.
페페 이미지 준비하기
이미지 가리개(?)로 사용할 페페 이미지를 준비해보아요. 구글에서 맘에 드는 거 아무거나 하나 다운받으시구요. 편의상 파일명은 pepe.jpeg로 바꿔놓으면 좋을 것 같아요.
저는 제가 그린 이미지로 해보았습니다. 어제 인스타툰 작업하면서 그렸던 그림이에요. 귀찮으시면 요거 다운받아서 쓰십쇼 💁♀️
프롬프트 입력
프롬프트는 복잡할 것 없이 원하는 내용만 간결하게 입력하면 되더라구요. 저는 이렇게 써보았어요.
화면에 나오는 모든 이미지를 첨부파일된 pepe.jpeg로 바꾸는 크롬 익스텐션
Bolt가 바쁘게 조잘조잘 코딩을 해주네요. 이제 개발은 끝!
브라우저에 설치하기
크롬 익스텐션은 브라우저에 파일을 업로드해서 실행해야 하기 때문에 파일을 다운로드 받아보겠습니다.
프로젝트 파일을 다운받기 위해 오른쪽 상단의 Open in Stackblitz 버튼을 클릭합니다. Stackblitz 편집기 왼쪽 상단의 Download Project 버튼 (구름 모양)을 누르면 다운로드 됩니다. 다운로드 받은 파일은 압축해제 해둡니다.
크롬 브라우저를 열고, 확장 프로그램 관리 메뉴에 들어갑니다.
오른쪽 상단의 개발자 모드를 체크해주면 파일을 올릴 수 있는 메뉴가 나와요. 크롬 웹 스토어에 출시하기 전에 테스트해볼 수 있는 기능입니다.
압축해제된 확장 프로그램을 로드합니다 버튼을 누르고, 좀전에 압축해제한 파일을 업로드 합니다.
확장 프로그램을 핀으로 고정하고 어서 써보러 갑시다 🏃🏽♀️🏃♂️🏃♀️➡️
안되는데요?
상황마다 다르겠지만, 저같은 경우 파일이 이상하게 저장되서 안되더라구요.
당황하지 말고, 프롬프트에게 물어보면 되는데요. 사실 저는 물어봤을 때 제대로된 솔루션을 받지는 못했어요. 간단한 문제라서 그냥 셀프로 해결했습니다.
보니까 pepe.jpeg 파일이 프로젝트 폴더 안에 포함되지 않은 것 같더라구요. 다시 포함해달라고 부탁했습니다.
이렇게 코드를 변경하고 나면 다시 프로젝트 파일을 다운받아서 다시 업로드해야 합니다. 귀찮죠? ㅎㅎㅎ
근데 여전히 안되더라구요? 뭐가 문제야 하고 jpeg 파일을 눌러봤더니 빈 이미지더라구요. 얘가 pepe.jpeg이라는 빈 파일 껍데기만 만들고, 내가 올린 파일을 적용한 것 같지 않더라구요. 그래서 그냥 제 이미지 파일을 프로젝트 폴더에 드래그 앤 드롭해서 갈아줬습니다.
다시 프로젝트 파일을 다운받아서 다시 업로드하니까 잘 되네요. 예-이!
기타 에러 대처하기
버튼을 누르면 프로그램이 실행되도록 하고 싶다면, 확장 프로그램 설정을 바꿔줘야해요.
내가 만든 확장 프로그램 설정에 들어가서 확장 프로그램을 클릭할 경우를 선택해줍니다.
일반적으로 웹 개발의 경우, 에러 메세지를 웹 브라우저에서 확인할 수 있어요. 좀더 복잡한 프로그램을 다루실 경우 (그런 경우 이미 알고 계시겠지만 ㅋㅋ) 콘솔에 나오는 에러 메세지 그대로 프롬프트 창에 복붙하면 해결해줍니다.
콘솔 보는 방법은 작업 중 화면에서 마우스 우클릭 > 검사 선택하시고, 오른쪽 위에 화살표 메뉴에서 Console 선택하시면 됩니다.
끝입니다 🎉🎉
의견을 남겨주세요