리액트 쇼핑몰 만들기 - AI로 화면구성 (feat v0.dev)

프로젝트를 만들려고 다시 옛날에 만들었던 코드를 보니 디자인이나 구성요소를 가져가기에는 
맘에 들지않는 부분이많아서 디자인이나 기능 부분도 새로 만들어보기로 했다. 

 

참고로 나는 디자인에 소질이 정말 없다고 자부하는데 고르는 색깔마다 별로 좋은 반응을 받은적이없어서 AI툴을 이용해보기로 했다 

 

https://v0.dev/

v0 by Vercel

next.js 를 만들고 vercel 을 만드는 곳에서 개발한 AI툴인데 프롬프트에 필요한 디자인을 입력하면 
해당 컴포넌트와 필요한부분들이 모두 코딩되어서 코드수준으로 만들어준다. 

우선 내가 필요한 페이지를 정리해 보았다. 

가장 먼저 보여지는 index 페이지는 베스트 셀러나 추천하는 상품과 배너가들어갈수있는 페이지로 구성하고 

각각 페이지들은 상품의 카테고리로 들어갈수있는 전형적인 쇼핑몰 형태의 페이지로 구성한다

추가적으로 관리자 페이지가 필요한데 관리자의 index페이지는 세일즈코스트나 잘 팔리는 상품들을 그래프로 조회할수있는 패널형태의 페이지로 구성하고 각각 페이지에 관리자에게 필요한 기능을 넣은 페이지로구현하려고 한다.

 

관리자에게 필요한기능은 구현하면서 계속 추가될것같지만 우선적으로 필요한기능은 

1. 매출액 조회 (월단위 , 일단위 , 지정한 시작 종료일 기준)

2. 상품등록 , 삭제 , 수정 

3. 회원관리

4. 재고관리 

5. 할인또는 프로모션의 관리 

6. 공지 기능 

벌써 꽤 머리가 아플것같은 기능들이있는데 아마 진행하면서 더 늘어날수도있을것같다. 한 번에 다 구현은 할수없으니 하나씩 천천히 구현 해봐야할것같다. 현재로써는 상품에 댓글 기능은 포함하지않는 기획이라 댓글이나 답글은 없어도될듯하다. 사실 최초 기획단계에서 필요한 요소를 모두 정의하고 들어가면 좋겠지만 코딩을 공부하는 입장에서 그렇게까지하면 코드를 공부하는 시간보다 기획에 시간을 너무 쏟게 될것같아서 기능이 추가될수있다는 점만 염두에두고 확장성을 고려하여 코드작업을 해보도록 하겠다. 그쪽이 더 공부가 될것같고... 이전 기획과 새로운 기획에서 충돌이 났을떄의 해결도 좋은 경험이 될것같다.

 

나는 꼭 vite + typesciript + react  연습을하기 위해서 v0.dev로 만들고 react 만 사용하는 환경으로 옮기느라 고생을좀했지만 next.js프레임워크를 사용한다면 v0.dev가 만든 코드를 그대로 프로젝트로 생성해서 사용할수있어서 더 편하게 이용할수있다 .

 

해당 페이지는 빌드해서 호스팅사이트에 올려놓았다. 무료 호스팅이라 비용없이 간단하게 이용할수있어서 좋은것같다

corona456.dothome.co.kr

Vite + React + TS

 

v0.dev 로만든 소스코드도 깃허브에 올려놓았으니 설정에 어려움이있다면 참고하자 

https://github.com/cokeholic-kim/Univershop

GitHub - cokeholic-kim/Univershop