이번 스터디 주제는 토이 프로젝트로, 내가 스피커였다.
그동안 만들고 싶었지만 계속 뒤로 미루던 것들을 다같이 해보면 어떨까 싶어서 주제로 선정하게 되었다.
4주차 동안 진행하는 건데, 1주차는 기획안 작성이라 사실상 3주만에 프로젝트를 완성해야 했다.
목표는 "실제로 운영 가능한 프로젝트"를 만드는 것이였다.
💡 토이 프로젝트 주제
내가 정한 주제는 사이트 프로젝트 주제는 "뽀모도로 웹사이트"로 이전부터 생각해오던 것이었다.
원래 집중을 정말 못하다가 이대론 안되겠다 싶어서 시작한게 뽀모도로였는데,
생각보다 나한테 잘맞아서 취준시절부터 꾸준히 사용하는 방법이다.
집에서는 뽀모도로 전용 시계를 사서 잘 애용하고 있는데,
막상 회사에서 사용하려니 소리가 너무 크게 날 것 같아서 웹 사이트가 있으면 좋겠다는 생각을 했다.
실제 뽀모도로를 운영하는 사이트들도 있었지만, 나만의 뽀모도로 사이트를 만들고 싶었다.
그리고 만드는 김에 앱으로도 사용하고, SEO도 연습하고 싶었다.
늘 그렇듯 시작은 거창하다^^
🏃🏻♀️➡️ 구현 과정
① 기획안 작성
맨 처음에는 내가 넣어야 할 기능들을 정리했다.
그리고 이를 구체화하여 기획안을 작성했다.
사실 3주안에 끝내야 된다는 생각에 처음에는 큰 기능을 넣지 않았다.
진짜 기본적인 것들 위주로 생각했다.
그 외에 추가하고 싶은 기능들을 "나중에 추가할 것" 리스트를 따로 만들어 거기에 넣어놨다.
그리고 이를 바탕으로 1주, 2주, 3주차 계획을 세웠다.
계획을 안세우면 시작을 못하는데 막상 계획대로 된 적은 거의 없는 것 같다ㅎ
기술스택은 next.js + Tailwind 조합으로 정했다.
무슨 의미가 있었다기보다 나중에 SEO 해보고 싶어서 next.js로 정했다.
로그인의 경우 가장 보편적인 구글, 카카오 로그인을 넣기로했다.
제일 고민인건 서버였다.
원래 예전에 사용한적 있었던 firebase를 사용하려 했는데, 팀원들 모두 supabase 써본다고 해서 나도 모르게 혹했다.
그래서 서버는 supabase 배포는 vercel로 정했다.
② 구현
본격적으로 구현을 하려는데, 소연님께서 엄청난 정보를 알려주셨다.
바로 'V0 dev'. 엄청난 정보였다.
V0 dev는 인공지능으로 프론트엔드 개발을 도와주는 서비스이다.
디자인까지 알아서 만들어줘서 개인 프로젝트 할 때 특히 좋다.
나는 이걸 디자인까지 진행하고 나서 알았지만..
요즘은 Ai 시대가 아닌가.
이럴때 새 기술을 써봐야지 하는 생각에 바로 사용해봤다.
V0 dev에 들어가면 이런 화면이 보이는데, 저기에 만들고싶은 프로젝트를 넣어주면 된다.
나는 디자인까지 완성한 상태라 첨부파일로 디자인도 넣어줬다.
저런 하잖은 프롬프트로 이런 결과물을 만들어냈다.
이게 1-2분이면 뚝딱하고 만들어진다.
여기에서 대화하면서 기능을 좀 더 업그레이드하고 수정할 수 있다.
직접 화면을 테스트하면서 수정할 수 있어서 너무 좋았다.
기존에 클로드, 챗 지피티한테 물어보던 수준을 넘어섰다.
물론 완벽하게 만들어주진 못한다.
내 프롬프트가 별로여서 그런걸수도 있는데 최종적으로 여러 가지 수정을 해야 했다.
하지만 그래도 이게 어딘가.
진짜 시간이 엄청나게 절약됐다.
다른 분께서는 유지보수가 어려운 코드로 나온다고 했는데
사실상 이렇게 간단한 프로젝트에서는 크게 중요하지 않다고 생각한다.
유지보수 = 개발자에게 중요
빠르게 끝내는 것 = 사용자에게 중요
이렇기 때문에..
토이 프로젝트나 광고용 웹사이트 만들기 이 정도 수준에서 사용하기엔 나쁘지 않다고 생각했다.
더 대박인건 이런식으로 supabase에 사용할 sql도 다 짜준다.
어떤식으로 연결해야 하는지 설명도 하나하나 나 적어놨다.
물론 영어로..
암튼 이야기가 딴길로 샜는데, V0 로 어느정도 구현한 뒤 코드 수정을 반복했다.
이런식으로 진행했고, 시간 안에 최종 배포도 완료했다.
기능이 워낙 간단해서 중간에 애먹는게 많이 없었다.
배포도 vercel로 간단하게해서 무난하게 진행했다.
헷갈리는건 보통 supabase, PWA 문제였다.
이건 나중에 블로그에 포스팅 할 예정..
🙌🏻 완성된 뽀모도로
이렇게 완성된 뽀모도로 사이트이다.
사진 누르면 해당 페이지로 이동한다.
주소창에서 앱에서 열기 누르면 앱처럼 다운도 받을 수 있다 vV
다 만들고 나니 굉장히 뿌듯했지만 아직 갈길이 멀다.
스터디는 끝났지만 SEO 구현이 안되서 좀 더 수정할 예정이다.
그리고 추가하고 싶은 기능도 계속 추가하고 버전을 업그레이드 할 예정이다.
하면서 git도 좀 깔끔하게 버전 넣어가면서 하고 해봐야지!
모자이크 때문에 잘 안보이는데 아직 추가할 기능이 이렇게나 많다^
계속 일을 벌리는 느낌인데 그래도 최종 목표까지는 이루고 싶다.
"최종 목표 : 구글에 검색했을 때 나오기"
+광고 붙여보기..
요새 집와서 하는게 많아서 시간을 많이 쓰진 못하겠지만 꾸준히 하려고 한다.
원래 느리게 꾸준히 하는게 특기라ㅎ
맞다 깃 리드미도 수정해야지..
👍 다른 팀원들의 토이 프로젝트
마지막으로 다른 팀원분들의 토이 프로젝트도 소개한다.
4주차에 링크 올린 분들만.. 다들 너무 대단하다!!
① 상봉님 - 웹페이지 Markdown 변환기
https://github.com/In-Self-Improvement/chrome-extension-summary
현재 웹 페이지의 내용을 Markdown으로 변환해주는 크롬 익스텐션이다.
② 승우님 - Korean Variable Translator
https://github.com/kyh196201/vscode-korean-variable-translator
https://marketplace.visualstudio.com/items?itemName=SEUNGWOOKIM.korean-variable-translator
진짜 신박하다고 생각했던 건데, 한글 입력 변수명을 영문으로 변환해주는 VsCode 확장 프로그램이다.
이런 생각 대체 어떻게 하나요..
나도 만들어보고 싶다.
③ 소현님 - 유튜브 썸네일 생성기
https://github.com/osohyun0224/vling-ThumnailMaker
https://vling-thumnail-maker.vercel.app/
유튜브 썸네일을 간편하게 만들어주는 웹 사이트이다.
다음 포스팅엔 supabase, pwa 올려봐야지..
'front' 카테고리의 다른 글
| [스터디] 내가 선호하는 CSS 전략과 클래스 네이밍 방식 (0) | 2025.04.08 |
|---|
