소개
안녕하세요! 지난 사례 게시글에서는 단일 이미지 랜딩 페이지를 반응형으로 제작하는 작업을 시도해보았습니다. 해당 프로젝트는 오토 레이아웃을 좀 더 공부해서 figma make를 적용해야 할 것 같아, 이번엔 새로운 프로젝트를 시도해보았습니다.
아마 올해 중으로 회사 공식 굿즈를 제작하게 될 것 같은데, 이걸 내부 구성원에게 판매하기 위한 사이트를 제작해보려고 합니다! 😃
사실 페이지 기획 자체가 처음이라, 여진 님 사례 게시글을 많이 참고했어요 ㅎㅎ
진행 방법
먼저 워크 플로우를 작성해보았습니다.
1주차 과제는 키 스크린 설계였는데, '키 스크린'이 뭔지부터 GPT에게 물어봐야 하는 상황이었어요 ㅋㅋㅋ
그랬더니 답변 중 워크 플로우가 있어서 이것부터 만들면서 고객 여정을 나름대로 정리해보았습니다.
이걸 단톡에 공유했는데 감사하게도 많은 분들이 조언을 주셨어요!
일단 결제 부분이 사업자 발급이나 PG사 연결 등 쉽지 않을 거라고 하셔서 구글폼 작성으로 빼고, 계좌이체로 받는 것을 생각하고 있었습니다.
그런데 저희가 프랜차이즈 지점에서 본사에 발주 넣는 시스템이 있어, 다행스럽게도 인트라넷에 이미 주문/결제 시스템이 탑재되어 있더라고요 ㅎㅎ
그래서 제 프로젝트는 상품 리스트와 디테일을 보여주는 것이 주 용도가 될 것 같습니다.
FIGMA MAKE에게 워크 플로우대로 사이트 만들어달라고 요청하기.
에듀플렉스 공식 굿즈 자사몰을 운영하려고 합니다. 아래 워크플로우를 참고해서 프로토 타이핑을 진행해주세요. ``` 메인 화면→굿즈 목록→상품 상세 페이지→구매→YES→장바구니 담기→구매 확정→YES→주문서 작성 (구글폼 링크 첨부) 구매에서 NO인 경우 이탈 구매 확정에서 NO인 경우 이탈 주문서 작성은 구매 확정 버튼을 누르면 첨부해둔 구글폼으로 새 창이 열려 이동하게 됩니다. ``` 키 컬러는 에듀플렉스 공식 홈페이지(https://www.eduplex.net/)를 참고해주세요.
이미지로 만든 워크 플로우를 텍스트로 정리해 프롬프트에 입력해주었습니다.
에듀플렉스 공식 굿즈 자사몰을 다음과 같이 구현하겠습니다:
메인 화면 - 헤더와 굿즈 목록 표시
상품 상세 페이지 - 상품 정보 및 구매 버튼
장바구니 기능 - 상품 담기 및 수량 조절
주문 확정 - 구글폼 연결을 통한 주문서 작성
반응형 디자인 및 에듀플렉스 브랜드 컬러 적용
워크플로우에 따라 구매/구매 확정 단계에서 이탈 가능하도록 구현하겠습니다.
에듀플렉스 공식 굿즈 자사몰을 성공적으로 구현했습니다. 메인 화면에서 굿즈 목록 을 확인하고, 상품 상세 페이지에서 구매 의사를 결정한 후, 장바구니에 담아 최종 주문 확정까지 진행할 수 있습니다. 주문 확정 시 구글폼으로 이동하여 배송 정보를 입력할 수 있도록 구현했습니다.
Supabase를 연결하면 다음과 같은 기능을 추가할 수 있습니다:
• 사용자 인증 및 주문 내역 관리
• 실시간 재고 관리 및 상품 정보 업데이트
• 주문 상태 추적 및 배송 알림 기능그랬더니 주요 화면 및 기능을 구분해서 구현해주더라고요!
쇼핑몰 레퍼런스가 많아서 그런지 처음부터 높은 퀄리티로 사이트가 구현되었습니다.
상세 페이지와 관리자 페이지 추가하기
위 화면에서 '자세히 보기'를 클릭하면 상품명, 상품 대표이미지, 상품 설명만 보이는 상태였는데요.
상품 상세 이미지를 추가로 첨부하면 좋을 것 같아서 해당 구조를 구현해달라고 했습니다.
그리고 운영하다 보면 새로운 굿즈가 추가될 수도 있고, 상품을 수정해야 할 수도 있으니 관리자 페이지가 필요하겠더라구요!
이제 2개의 화면을 더 추가해야 합니다.
1. ProductDetail : Product 화면에서 '자세히 보기'를 눌러 상품 상세 페이지로 이동했을 때 제품의 디테일을 보여주는 긴 이미지가 div 밑으로 추가되어야 합니다.
2. 관리자 화면 : 제품을 등록, 수정, 관리할 수 있는 관리자 화면이 필요합니다. 관리자 전용 ID와 비밀번호를 생성해서 로그인해 잔여 수량, 제품 설명과 이미지를 수정할 수 있어야 하고 새로운 제품인 경우 처음부터 등록을 할 수 있어야 합니다.위와 같이 프롬프트를 입력해주었습니다.
짜잔~ 테스트용 계정을 통해 로그인하면
이렇게 수정할 수 있는 페이지로 진입하게 됩니다.
상품 이미지, 상품 상세 이미지 디테일 수정
여기서 한 가지 더 수정! 상품 이미지와 상세 이미지를 URL로 업로드하는 방식으로 구현되었는데, 복수의 파일을 업로드할 수 있도록 구현 요청했습니다.
좋습니다! 다만 관리자 페이지에서 한 가지 수정사항이 있습니다. product-image 와 product-detail-image 를 URL 입력이 아닌 FILE 업로드 방식으로 바꾸어야 합니다. FILE은 복수 업로드가 가능해야 합니다.프롬프트를 입력해주니
센스있게 드래그 앤 드롭 방식까지 추가해준 FIGMA MAKE에게 박수~
테스트 상품을 등록했는데 Publish URL에 반영되지 않는 이유
엄청 흥분한 상태로 테스트 상품을 등록해 퍼블리시 했는데, 제가 등록한 상품이 보이지 않더라구요 ㅠㅠ
관리자 페이지에서 새 상품을 등록해도 publish URL (https://radial-resin-11403212.figma.site/)에는 여전히 반영되지 않습니다.이렇게 물어보니,
문제를 분석한 결과, 현재 상품 데이터가 브라우저 메모리(React state)에만 저장되어 있어서 페이지 새로고침 시 초기 데이터로 리셋되는 것이 원인입니다.
해결방안:
localStorage를 사용하여 상품 데이터를 브라우저에 영구 저장
앱 시작 시 localStorage에서 데이터를 로드
상품 추가/수정/삭제 시 localStorage에 자동 저장
이렇게 하면 같은 브라우저에서는 데이터가 유지됩니다
완전한 다중 사용자 지원을 위해서는 Supabase 같은 백엔드가 필요하지만, 현재 데모 목적으로는 localStorage가 적절합니다.원인을 잘 알려주네요 😄
백엔드를 붙여줘야 데이터가 저장된다는 걸 알게 됐습니다.
결과와 배운 점
⭐ 이번 프로젝트에서 나름의 꿀팁이 있었다면..
make를 통해 제가 해결하고 싶은 오류를 정확히 정의하기 위해 코드를 조금 살펴봤어요 ㅎㅎ ㅠ
개발은 전혀 모르지만... 초등학생이 아는 영단어로 고등학교 모의고사 지문 읽듯이 해봤답니다 ㅋㅋ
좋습니다! 다만 관리자 페이지에서 한 가지 수정사항이 있습니다. product-image 와 product-detail-image 를 URL 입력이 아닌 FILE 업로드 방식으로 바꾸어야 합니다. FILE은 복수 업로드가 가능해야 합니다.원래는 이런 프롬프트가 아닌 '상품 썸네일이랑 상세 이미지 업로드 방식을 파일 업로드로 바꿔주세요'라고 하려 했는데, 왠지 정확하게 명시해주는 게 좋을 것 같더라고요. (다수의 GPT 조련으로 얻어진 직감이랄까..)
우선 point and edit 기능을 활용해 수정하고 싶은 요소를 선택한 다음, go to source 를 클릭해줍니다.
그러면 그 부분에 해당하는 Code를 볼 수 있는데요!
대강 읽어보니 제가 원하는 부분은 productimage 라고 명시되어 있네요. 상품 썸네일이라고 했어도 잘 알아들었을 수도 있겠지만.. 확실히 해주면 결과물이 더 좋을 테니까요!ㅎㅎ
https://radial-resin-11403212.figma.site
들어가서 한 번 구경해보세요~ㅎㅎ
이상 굿즈 자사몰 만들기였습니다.
댓글로 디벨롭할 부분이나 추가하면 좋을 법한 기능들 남겨주시면 반영해볼게요!
