의류 쇼핑몰 만들기 1
ChatGPT로 쇼핑몰 기획 & 페이지 만들기
나는 어릴적 부터 체격이 좋았다.
그래서 일반적인 의류 매장을 가면 내가 입을 수 있는 옷을 찾기 어려웠다.
여러 매장을 몇바퀴를 돌아다닌 끝에 계절에 맞게 입을 옷 한두벌을 사곤 했다.
사실 지금도 다르진 않다.
다만 한가지 다른점이 있다면 요즘은 나처럼 체격이 곱배기 이상인 사람들을 위한 인터넷 쇼핑몰이 많다는것이다.
빅사이즈 옷을 입는 사람들은 공통점이 있다.
어릴적부터 옷을 고르는데 선택권이 없어서 디자인 상관없이 사이즈만 맞으면 잘 입는다.
탑텐, ABC마트 등 의류전문 매장이나 신발 전문매장에 가서 물건의 라벨을 유심히 본 적이 있는가?
모델명, 컬러, 사이즈 등 상품 하나를 이루는 정보가 많다.
이 물건이 있는지 물어봐도 점원이 잘 모르는 이유는 상품 종류가 너무 많고 재고를 얼마 가져다 놓지 못해서다.
전산 시스템이 있어서 조회해본다고 해도 원하는 물건이 없을수도 있다.
그런점에서 최소한 사이즈가 몇가지로 추려진다는건 최고의 장점이다.
앞에서 이야기했듯이 디자인이나 컬러도 별로 신경쓰지 않아도 된다.
이런점에서 착안해서 의류 쇼핑몰 사업을 하기로 했다고 가정해보자.
오픈마켓에서 시작해볼수도 있지만 스스로 브랜드를 만들기로 결심한것이다.
앱이나 서비스를 만드는데 있어 가장 먼저 해야할 일은 요구사항을 정의하는것이다.
원하는 소프트웨어의 전체 기능을 포괄하되, 애매한 표현이 없도록 상세하게 정리하는게 중요하지만 지금은 간략하게 정의해보자.
의류 쇼핑몰 요구사항
- 회원가입 없이 쇼핑몰 이용 가능
- 상품은 2XL, 3XL, 4XL 사이즈가 있다
- 상품마다 재고를 확인 할 수 있을것
- 장바구니에 담았다가 주문
- 주문시에 입금할때 넣을 예금자명 발급
- 주문 목록에서 주문 상태 관리
보통 이런 서비스를 만들때는 개인정보, 회원관리 등 여러가지 이유로 회원가입 등 기능을 넣지만 제외하겠다.
주문결제도 원래는 더 복잡하지만 복잡해서 시도조차 못하는것보다 간단하게라도 운용이 가능하도록 해보자.
실제 서비스를 만들 생각이라면 조금 더 보완해야할것이다.
위 요구사항을 ChatGPT에 넣고 요청사항을 덧붙였다.
'웹서비스 개발을 위한 페이지 목록을 정리해줘'
이렇게 ai에 명령을 내리는것을 '프롬프트'라고 하는데, 데이터와 함께 구체적으로 원하는 바를 적어주는게 좋다.
프롬프트를 어떻게 만드느냐에 따라 ai가 주는 결과물이 목표에 가까워질것이다.
의류 쇼핑몰 요구사항
- 회원가입 없이 쇼핑몰 이용 가능
- 상품은 2XL, 3XL, 4XL 사이즈가 있다
- 상품마다 재고를 확인 할 수 있을것
- 장바구니에 담았다가 주문
- 주문시에 입금할때 넣을 예금자명 발급
- 주문 목록에서 주문 상태 관리
웹서비스 개발을 위한 페이지 목록을 정리해줘
그러자 아래와 같이 답변이 왔다.
의류 쇼핑몰의 요구사항을 바탕으로 웹서비스 개발을 위한 페이지 목록을 아래와 같이 정리할 수 있습니다:
1. 홈페이지 (메인 페이지)
- 쇼핑몰의 대표 이미지 및 프로모션 배너
- 상품 목록 또는 추천 상품 미리보기
- 카테고리 및 검색 기능 제공
2. 상품 목록 페이지
- 상품을 카테고리별로 나눠서 보여줌
- 사이즈(2XL, 3XL, 4XL) 필터 기능
- 정렬 기능 (인기순, 최신순, 가격순 등)
3. 상품 상세 페이지
- 상품 이미지, 상세 설명, 가격 정보
- 재고 확인 (사이즈별 재고 표시)
- 장바구니에 담기 버튼
4. 장바구니 페이지
- 선택한 상품들의 목록
- 각 상품의 개수 및 사이즈 확인/수정
- 총 주문 금액 계산
- 주문 버튼 제공
5. 주문 페이지
- 주문 정보 입력 (배송지 정보, 연락처 등)
- 입금할 예금자명 자동 생성 및 표시
- 결제 완료 버튼
6. 주문 확인 및 상태 관리 페이지
- 사용자별 주문 목록 표시
- 각 주문의 상태 (입금 대기, 배송 준비 중, 배송 중, 배송 완료 등) 표시
- 주문 상세 정보 확인 가능
7. 관리자 페이지
(관리자 전용 기능으로 별도 구현 필요)
- 상품 등록/수정/삭제
- 재고 관리
- 주문 상태 변경 및 관리
- 주문 내역 확인
이 구조를 기본으로 HTML/CSS 디자인 및 백엔드 로직을 연결하면 요구사항에 맞는 의류 쇼핑몰을 개발할 수 있습니다.
놀랍게도 생각하는바를 몇자 적었을 뿐인데 구조적인 기능 요구사항으로 정리해서 답변을 줬다.
이와 같이 무언가를 만들기 위해서는 구체적인 목표 정의가 필요하다.
웹서비스를 만들기 위해서는 페이지 단위로 어떤 역할을 하는 페이지가 필요하고 상세기능이 무엇인지 정의한다.
위 문답 결과에서 페이지 단위로 어떤 페이지가 필요한지 정의된것은 아래와 같다.
사용자 페이지
- 메인 페이지
- 상품 목록 페이지
- 상품 상세 페이지
- 장바구니 페이지
- 주문 페이지
관리자 페이지
- 상품 등록/수정/삭제
- 재고 관리
- 주문 상태 변경 및 관리 (목록)
- 주문 내역 확인 (상세)
이와 같이 사용자 페이지, 관리자 페이지로 나눠서 개발되어야 할것으로 보인다.
제대로 만들기 위해서는 이 단계에서 더 상세하게 들어가야하겠지만 지금은 이대로 가보자.
이제 위와 같은 페이지를 만들어야 하는데, 코딩 못지않게 웹디자인도 많은 연습이 필요한 분야다.
가장 만족스러운 결과를 얻는 방법은 필요한 페이지 제작을 의뢰하거나 웹디자인을 배워 원하는대로 만드는것이다.
하지만 이것은 지금 진행중인 주제와 벗어나기 때문에 몇가지 옵션이 있다.
1. 이미 퍼블리싱까지 완료된 결과물을 변형해서 작업하기
2. ai 웹디자인 도구를 사용하기
3. 디자인 관계없이 페이지 만들기
여기서는 디자인 관계없이 페이지를 만들기로 한다.
사실 ChatGPT 같은 언어모델에게 사람이 만족할만한 웹디자인은 아직 어려운 분야다.
그럼에도 가볍게 페이지를 만드는 목적으로는 빠르게 사용해볼 수 있다.
사용중인 GPT모델에 따라서도 결과가 차이가 나는데, 가능하면 GPT-4o 이상의 모델을 사용할 수 있도록 Plus요금제를 사용하는것이 좋다.
지금부터 html 페이지를 만들것이다.
그러기 위해서는 ai가 생성해준 소스코드를 받아적을 에디터가 필요하다.
우리는 Visual Studio Code를 사용할것이다. 통칭 vscode라고 한다.
아래 URL로 접속해서 OS 환경에 맞는 프로그램을 설치하도록 한다.
https://code.visualstudio.com/Download
우선 프로젝트 폴더명을 big-size라고 만들고, vscode로 폴더를 연다.
아래와 같은 프롬프트를 한번씩 입력해서 html, css결과를 얻어서 파일을 만들면 된다.
응답 내용을 보면 같은 파일명에 내용을 이어서 합쳐야 하는 파일도 있을수 있다는점을 주의하자.
아래 프롬프트는 한줄에 한번씩 끊어서 요청하는것을 권장한다.
메인 페이지 CSS를 포함한 HTML 페이지 만들어줘
상품 목록 페이지
상품 상세 페이지
장바구니 페이지
주문 페이지
상품 등록/수정/삭제
주문 상태 변경 및 관리 (목록)
주문 내역 확인 (상세)
여기서 놀라운점은 대화의 맥락에 따라 처음 요청이외에는 페이지명만으로 요청했는데도 같은 목적으로 결과를 준다는것이다.
이것은 채팅방의 채팅 이력을 기억한 채로 응답을 주기 때문이다.
현재 논의되고 있는 주제를 파악하고 그에 맞는 응답을 주는것이다.
이러한 특성이 있기 때문에 반복적으로 같은 동작을 하기를 원한다면 하나의 채팅방에서는 하나의 주제만 다뤄야한다.
소프트웨어 개발에 생성형 ai를 이용하다보면 다양한 이슈가 섞이게 되는데 이때 원하는 결과가 나오지 않을 수 있다.
물론 채팅마다 충분한 데이터와 요청사항을 명확하게 주면 원하는 답을 얻을 수 있을것이다.
하지만 한번에 입력 가능한 프롬프트 글자수는 무한하지 않다.
사용료가 비싼 모델일수록 수용하는 글자수는 커지면서 품질좋은 대답을 해줄것이다.
합리적으로 생성형 ai와 함께 일하기 위해서는 전략적으로 사용하는 방법을 익힐 필요가 있다.
위의 문답으로 만든 페이지는 아래와 같다.
현재까지 vscode 파일 구조는 아래와 같다
이번 시간에는 ChatGPT를 활용해서 웹서비스를 간단하게 기획하고 html 페이지를 만들어봤다.
지금은 pc에 있는 html을 브라우저로 띄울 뿐이지만, 다음 시간에는 인터넷으로 접속할 수 있게 해보자.
이번화 ChatGPT 대화 공유
https://chatgpt.com/share/67383a24-20d4-800e-9686-a4a03cdd5263
