프로젝트 시작 : 마스코트 소개 웹페이지 MVP

목차

1. 시작 계기

2. 스펙 문서 작성

3. 디자인

4. 00

 

---

1. 시작 계기

광운대학교의 새로운 마스코트가 태어난건 2021년 4월. 벌써 5년이 다되어간다.

학교를 다니던 당시에는 연락도 많이오고 정말 미친듯이 마스코트를 뽑아냈었는데,

4학년 1학기 끝나고 2년을 휴학하고 돌아오니 이제는 좀 놓을 수 있게 되었다.

 

 그런데 문제는 내가 학교 근처에 살다보니 도서관 간다고 학교에 종종 가게 되고, 친구집 간다고 학교를 종종 지나가게 되고 하면서

뭔가 내가 그린 것과 다르게 생긴 마스코트를 자꾸 마주치게 되는 것이다.

 

물론 이제 다양하게 활용되고 자연스럽게 마스코트로 받아들여지는 상황인 것은 좋지만

나한테만 보이는 그런 것들이 자꾸 신경쓰이게 된다. 

 

그래서 학교 다니는 내내 하자하자 하고 과제만 하다가 졸업해버렸지만 지금 포폴 만들 겸 마스코트 소개 페이지를 만들어보자!

하게 된 것임..

---

2.  프로젝트 문서 작성

문서 작성은 간단하게 해봤다. 스피디스피디

원래라면 노션 페이지를 새로 생성할텐데 지금 내가 만든 페이지가 많아서 슬슬 걱정되기 시작했다.

그래서 이런 간단한 프로젝트는 일단 토글로 해결해보려고 한다.

 

이 중에서 기술 스택만 봐보면,

Next.js를 사용한다. 검색에 잘걸리면 좋겠기도 하고, 이미지를 불러올 때 장애없이 불러오기 위해 SSR을 사용할 것이기 때문이다.

 

클라이언트 상태관리 도구로 zustand를 일단 써두긴 했지만 사실 아직 React Context랑 고민이 된다. 부트캠프 팀원에게서 three.js 얘기를 들으며 나중에 이 사이트에 그래픽 요소를 더 추가해볼까 하는 생각을 했는데 이걸 어디에 어떻게 추가할 지 상세하게 생각하지 않았기 때문이다. 이 부분은 간단하게만 더 찾아보고 확장성을 고려해서 확정을 지어봐야겠다.

 

Tanstack Query 역시 당장은 필요성을 못느낄 것 같지만 확장성을 고려하여 넣었다.

 

백엔드 부분은 supabase를 사용할거다. 백엔드를 공부하며 하기에는 당장 내 분야 공부해야할 것도 많아서 이부분은 기초만 살짝 찾아보고 ai한테 (아니면 사람을 찾아보던가) 대부분 맡기게 될 것 같다. 사실 로그인을 넣기 전까지는 유저 입장에서 가장 큰 기능은 원하는 파일을 다운로드 하는 정도일 것이다. 파일 업로드는 내가 백에 직접 하면 되니까.. 백/배포 구성에 시간을 크게 쏟지 않을 계획이기 때문에 일단 빠르게 만들 수 있는 것으로 선택했다.

 

배포는 Vercel로 작성했지만 완성한 이후에는 aws도 고려하고 있다. 개발하면서 확인용으로는 vercel을 두고, 최종 MVP 완성 이후에는 github도 현재 main에 바로  feature를 푸시하도록 했는데, main - dev - ... 로 브랜치를 구분하면 어떨까 하기 때문에 aws를 사용한다면 그 때 main의 배포에 사용하게 될 것 같다. 요금 관련 글들을 보면 막 시도해보기가 좀 무섭다.

 

디자인 시스템 역시 간결하게 정의했다. typo, padding같은 경우 내가 직접 만들면서 만지는 것이 빠를 것이기 때문에 정의하지 않았다.

컴포넌트 설계의 경우 기존 다른 프로젝트에서 제작한 컴포넌트들이 여러 개 있고, 그걸 가져와서 수정하면서 진행할 수 있기 때문에 최소 디자인만 그리고 사이즈나 패딩, 마진 등에 대한 디자인문서를 따로 만들지는 않았다.

 

---

3. 디자인

디자인 엄청 열심히 하지는 않고 그냥 피그마로 대충 만들어봤다.

일단 지금 시작했으니 목표를 3월 전으로 생각하고 있기 때문이다.

 

지금 보면 그림이 막 비어있는데, 내가 대학생 내내 사용하던 노트북이 죽어서 지금 마스코트 파일들도 다 갇혀있는 상태이다ㅎ

나는 왜 미리미리 클라우드에 올려두지 않은걸까? 

하지만 검색해봤을 때 노트북 살릴 수는 있을 것 같아서.. 예.. 그렇습니다..

 

저기 들어간 이미지들은 전에 포폴 만들기 수업을 WIX로 진행했어서 그 wix에 업로드한 png 파일이다. 교수님 감사합니다!!!!

 

 

 

 

 

참고

https://velog.io/@ojj1123/zustand-and-react-context

[번역] Zustand와 React Context

https://velog.io/@greencloud/%EC%9A%B0%EB%A6%AC-%ED%8C%80%EC%9D%B4-Zustand%EB%A5%BC-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0

우리 팀이 Zustand를 쓰는 이유

https://55wldms.tistory.com/91

Vercel로 배포할까 AWS로 배포할까?

https://www.threads.com/@dalgom.bami/post/DOYjgEGEvOA/%EB%B0%B1%EC%97%94%EB%93%9C-%EC%A7%80%EC%8B%9D%EC%9D%B4-%EC%95%84%EC%98%88-%EC%97%86%EB%8B%A4%EB%A9%B4-supabase%EB%8A%94-%EC%8B%9C%ED%95%9C%ED%8F%AD%ED%83%84-%EA%B7%B8-%EC%9E%90%EC%B2%B4%EC%9E%84-%ED%8A%B9%ED%9E%88-%EB%B0%94%EC%9D%B4%EB%B8%8C%EC%BD%94%EB%8D%94%EB%9D%BC%EB%A9%B4supabase%EB%8A%94-1%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%97%90-%EB%82%98%EB%8F%84-%EB%A7%8E%EC%9D%B4-%EC%93%B0%EA%B3%A0-%EC%9E%88%EA%B3%A0-%EB%A7%8E%EC%9D%B4-%EC%B6%94%EC%B2%9C%ED%95%98?hl=ko

 

https://www.reddit.com/r/Supabase/comments/1qfoxmt/state_of_supabase_exposure_across_vibecoding_apps/?tl=ko

Reddit의 Supabase 커뮤니티: Vibe-코딩 앱에서 Supabase 노출 상태: 20,000개의 인디 앱을 스캔했는데, 9개