왜 노션 위젯이었을까?
주로 Figma로 업무를 하다 보니, 더 효율적으로 일할 방법을 찾던 중 cursor-talk-to-figma mcp를 알게 되었다.
특히 커서 AI를 테스트해 보면서 "무언갈 스스로 만들어 볼 수 있겠다!" 라는 가능성을 느꼈다.
html과 css 지식이 있어도 복잡한 부분을 원활하게 다루지 못할때가 많았는데,
이 부분을 커서 AI나 GPT 같은 다양한 AI 툴을 활용하면 보완하고 제작할 수 있겠다는 생각이 들었던 것이다.
예를 들어,
얽히고 꼬여서 수정하지 못하던 이 티스토리 블로그의 어떤 부분을 커서 AI 도움을 통해 수정할 수 있었고,
거기에 애니메이션까지 더할 수있었달까? 사소하지만, 평소에 깊은 지식이 없어 해결하지 못했던 문제들을
AI를 통해 해결해 보고 나니
❝이걸 활용하면 뭔갈 만들 수 있겠어!❞
라는 생각이 들었다.
일상에서 아주 사소하게 불편하고, 묘하게 이런게 있었으면... 했던 부분들.
그런 부분을 채울 수 있겠구나 싶었다.
그 중 가장 단순하고 사소한 나에게 필요했던 부분. "퇴근 시간 계산기" 아이디어가 떠올랐다.
평소 업무 시간에도 할 일을 적고 체크하면소 노션을 많이 활용했기에
매일 사용하는 노션에서 퇴근 카운트다운이나 보면서 기분이라도 올리자! 하는 마음 +
이거 뭔갈 만들어 보면 재밌겠는데? 하는 마음으로 만들기 시작했다.
제작 기간 및 도구
제작 기간 : 약 4~5시간 + 아이디어 덧붙여서 또 하나 새로 제작하는 시간
제작 하며 활용한 도구 : chat GPT(제작 방법 가이드), claude AI(화면 설계), cursor AI(코드 구현 및 수정), git hub(코드 저장소), vercel(호스팅 배포)
위젯은 어떻게 제작하지?
어떤 툴로 어떤 언어로, 어떻게 제작하는지 조차도 몰랐다.
그래서 무작정 지피티에게 물었다. (무료 버전을 쓴다)
"노션 위젯 만들꺼야 어떻게 만들어야해?"
gpt의 역할은 제작방법을 가이드 해주는 것이었다. 어떤 언어로 만들고, 어디에 올려서 어떻제 작동하는 원리인지.
하나하나 알려주고, 모르는건 깊게 파고들며 물어서 답을 얻어 냈지만, 완성된 화면을 그려주는 방식이 부족했다.
페이지를 그리고 코드로 받아야 하는데, 이 부분은 클로드의 도움을 받았다.
클로드는 내 아이디어를 현실로 구현하는 역할을 했고,
이미 구상해 놓은 기능들이 있어서 구체적으로 질문 할 수 있었다
질문을 대충하는 편인데 찰떡같이 알아듣고 코드를 짜주는 클로드...
하지만 디자인이 맘에 안들고, 기능이 맘에 안들고, 폰트도 마음에 안들고...
깐깐한 클라이언트 빙의해서 무한 수정에 들어갔다.
하지만 난 클로드도 무료 모드를 쓰기에 중간에 꼭 무료는 여기까지... 이런 문구가 떴다.
하지만 굴하지 않고 제작한걸 게시 > 새창에서 수정해달라고 하기를 몇번 반복... 하다보면 결국은 막힌다 😁
그래도 계속 하고 싶다? 그럼 다음날 하면 된다 😊
클로드가 작성해준 초안을 들고 이제 커서로 파일을 불러들여서 무료 클로드에서 막혀서 수정 못했던 부분을 다듬으면
기능을 만드는 부분은 끝이 난다. 사실 커서로 가져갈 필요도 없다.
내가 만든 노션 위젯은 한장짜리 html로 구성되어 있어서 이 파일을 git hub에 올리고 vercel에서 git hub만 연결하면 끝나니까.
gpt에게 이제 이 파일을 어떻게 해야 실제 노션 위젯으로 만들 수 있는지 다시 물었다.
그땐 그저 만드는데 집중하느라 캡쳐해 둘 생각조차 못해서 지피티와의 채팅이 더이상 남아있지 않은게 좀 아쉽다.
나는 아주 개발에 무지한 디자이너고, 그래서 너가 하나하나 모두 알려줘야한다는 부분을 강조하며
아주 디테일하게 알려달라고 요청했다.
위에 기술한 바와 같이 git hub가입 방법부터 아주 초보자 대하듯이 차근차근 알려준다.
프로젝트 만들고, 프로젝트 이름은 index.html로 해야 vercel에서 찰떡같이 index파일을 가져온다는 부분까지.
git hub 회원가입 > 파일 업로드 > vercel 회원가입 > git hub 연결 > 연결된 페이지 복사 > 노션에 임베드로 붙이기
간단한 방법을 통해 쉽게 퇴근 시간 계산기를 노션에 붙일 수 있었다.
위의 이미지는 초기 완성본이고,
원래 쓰던 아날로그 시계 위젯(어느 사이트에서 만들어져있던 위젯..) 기능과 함께 깔끔하게 하나만 넣고 싶어서
아날로그 시계도 넣고, 세팅 기능도 숨기는 등, 다양한 수정은 커서로 해서 최종 완성본을 지금도 잘 쓰고 있다.
처음부터 혼자 쓸 요량으로 만들었기에 지금도 잘 쓰는 중이고, 지인들에게만 만든걸 살짝 공개했다.😁
내가 필요했던 소소하고 작은 기능을 ai와의 협업을 통해 만들고 완성해보는 경험은 생각보다 더 뿌듯하고 재밌고, 놀라웠다.
이렇게 인공지능과의 대화하며 코딩하는 경험을 "바이브 코딩"이라고 부른다는 것을 나중에서야 알게 되었다.
이 위젯을 시작으로, 완전히 뭔갈 만드는데 흥미를 느껴서 자연스럽게 다른 프로젝트에 돌입하게 되는데....
