소개
이번에는 저희 서비스의 성공사례 아카이빙 페이지를 만들어 매출에 이바지를 해보고자 합니다🔥
실제로 상용화를 해야 하는 사이트이기에
Figma Make로 UI/UX 구축
Figma Make에 React 프로젝트 전체 코드로 내보내달라고 요청
export 한 파일을 cafe24 실서버에 배포
크게 3개 단계를 거쳤습니다.
진행 방법
Figma Make 프롬프트
에듀플렉스의 후기를 아카이빙하는 사이트를 만들려고 합니다. 페이지 명칭은 '에듀플렉스 체인지 로그'입니다. 아래 조건들을 참고해서 PC, 모바일 모든 환경에서 사용 가능한 반응형 웹사이트를 제작해주세요. 조건1. 키 컬러와 톤앤매너는 공식 홈페이지 성공후기를 참고해주세요 (https://www.eduplex.net/cases#student) 조건2. 이 웹사이트의 목적은 에듀플렉스 구매를 고민하는 학부모 고객이 후기를 읽고 최종 구매를 결정하도록 만들기 위함입니다. 이를 고려해 후기를 필터링해 볼 수 있는 기능이 필요합니다. 필터는 학생 성별, 학생 학교급(중등/고등), 지역 3가지로 해야합니다. 조건3. 후기 상세 페이지의 구조는 '에듀플렉스 - 상세 페이지'를 참고해주세요. 이 때 상세 페이지에는 게시판 글쓰기 기능을 탑재해야 합니다. 관리자가 후기를 작성할 때 사진, 영상을 첨부할 수 있고, 본문에서는 소제목을 추가하거나 서체를 변경(Bold, underline, font)할 수 있어야 합니다.tip) 키 컬러와 톤앤매너를 참고하고픈 사이트를 넣으면 훨씬 통일감 있는 웹페이지를 구축하실 수 있을 거예요.
tip2) pc에서 작업하다보니 모바일 환경을 고려하지 못했었는데 이번에는 반응형으로 제작해달라고 조건을 추가했습니다.
tip3) 상세 페이지 구조는 figma로 작업해서 ctrl+c, figma make에 ctrl+v 했습니다.
필요/불필요 기능 분류해 디벨롭
만들어진 결과에서 필요한 기능과 불필요한 기능을 구분해가면서 디벨롭했습니다.
만약 figma make 에서 계속 해결하지 못하는 오류가 있다면 코드를 복사해서 gpt에 붙여 넣어보세요! gpt가 더 명확한 해결법을 알려줄 수도 있습니다. gpt가 수정해서 제안해준 코드를 make에 그대로 넣고 반영해달라고 하면 반영해주거든요 👍
Figma Make에 React 프로젝트 전체 코드로 내보내달라고 요청
일단 저희 회사는 cafe24 호스팅을 사용하고 있어, figma make로 만든 것들을 실제 상용화하기 위해서는 해당 호스팅에 배포해야만 했습니다.
그래서 gpt에게 방법을 물어봤고, make에게는 다음과 같이 요청했습니다.
Node.js와 VS Code 준비
이제 Figma Make로 만든 것들을 진짜 웹사이트처럼 동작할 수 있게 만들어주는 작업이 필요합니다 ㅎㅎ
그걸 개발자 용어로는 "build 한다"라고 하는 듯해요
개발자님 없이 직접 작업해야 했기에 쉽게 설명해달라고 했습니다 ㅋㅋ
gpt의 안내에 따라 차근차근 진행하다 보면 수십가지 오류 ⚠️ 를 만날 수 있는데요. 그 중 저를 가장 힘들게 했던 2가지 오류에 대한 팁을 공유해보려고 합니다.
tip1) VS Code 에서 프로젝트 폴더 열 때 폴더명을 영문으로 설정하기
VS code는 build를 위해 꼭 필요한 툴인데요. 코드를 직접 수정해서 저장하는 툴인데 오류를 바로 알려주기 때문에 편하더라고요. (물론 오류를 어떻게 수정해야 하는지는 gpt에게 물어봄ㅋㅋ)
figma make에서 export 한 코드 들을 VS Code에서 열어야 하는데
export를 하면 zip 파일로 자동 다운로드가 됩니다. 압축 해제할 때 생긴 폴더명을 영어로 해두시는 게 좋아요.
tip2) 외부 패키지 import 경로 오류 해결하기
🔍 문제 설명
Figma Make에서 export된 코드에는
@1.0.5처럼 버전이 경로에 포함되어 있음하지만 실제 npm은
@패키지명@버전형식을 경로로 인식하지 않음 → 오류 발생
💡 해결 방법
모든 import 문에서
@버전을 제거❌ import from "@radix-ui/[email protected]" ✅ import from "@radix-ui/react-sheet"
🔒 사전 방지 팁
Figma Make로 export 받은 후 VS Code에서 전체 검색(ctrl+shift+f) 하여
@숫자포함된 경로 일괄 수정또는 아래 정규식 사용해서 수정 가능:
검색: (@[\w-\/]+)@[\d\.]+ 바꾸기: $1
결과와 배운 점
https://msd.eduplex.net/changelog/
(URL은 이번주 스터디 이 후 삭제하도록 하겠습니다 혹시 몰라서 ㅎㅎ)
"개발자 없이 실서버 배포하는 과정은 멀고도 험했다...."
그래도 3일만에 기획-제작-배포까지 완료했네요.
앞으로 유지보수 하는 과정만 남아있습니다 하하하하
중간중간 채팅방에 질문 드렸을 때 친절히 대답해주신 스터디원분들,
특히 여진 님께 감사드리면서 이번 사례글은 마무리하도록 하겠습니다!!
여러분도 하실 수 있읍니다.. 파이팅!!