Flora Bota 🌸 보태니컬 아티스트의 브랜딩 사이트: Cursor로 개발하고 Vercel로 배포하기

"Flora Bota" 사이트 보기: https://flora-bota.vercel.app/

ALT

플라워 샵 워드 프레스 테마

소개

작년부터 취미로 보태니컬 아트를 하고 있어요. 점점 더 재미있어져서 진지하게 보태니컬 아티스트가 되고 싶다는 꿈을 꾸게 되었어요. (은퇴 후에? 😁)
Flora Kim이라는 보태니컬 아티스트 페르소나를 설정하고 퍼스널 브랜딩 사이트 "Flora Bota"를 개발 및 배포해보았습니다.

사용도구 및 워크플로우

1. Claude : 사이트 기획(목표, 구조, 디자인 등)을 위한 브레인 스토밍, 정리

2. PRD Builder GPTs : 스터디장님의 PRD Builder에 브레인 스토밍 자료를 넣고 PRD 작성

3. Cursor : PRD에 맞추어 Todo List를 작성하고, 순차적으로 코드 개발

4. OpenAI API : API Key를 환경 변수에 저장하고, AI 챗봇 기능 개발

5. EmailJS : 클라이언트 사이드 이메일 발송, 문의하기 기능 구현

6. Midjourney : 사이트에 포함된 전체 보태니컬 아트 이미지 생성

7. Github : Cursor와 연동하여 사이트 파일 관리

8. Vercel : Github와 연동하여 사이트 배포

9. Perplexcity : Github와 Vercel의 사용을 위한 질의응답

사이트 개발 과정

1. 개발 목표

• 아티스트의 예술적 정체성과 철학을 잘 반영하는 브랜딩

• 작품을 효과적으로 전시할 수 있는 포트폴리오 구축

• 워크숍 및 강의 정보를 명확하게 제공하여 등록 유도

• 사용자와의 소통 채널 다양화

2. 주요 기능 (PRD에 명시)

• 메인 페이지: 아티스트 소개 및 작품 하이라이트

• 포트폴리오 갤러리: 카테고리별 작품 분류 및 상세 보기

• 워크숍/강의: 일정, 내용, 가격 정보 제공

• 전시회 정보: 과거와 예정된 전시회 정보 타임라인

• 연락처 및 문의: 연락처 안내와 협업 및 작품 의뢰를 위한 메시지를 이메일로 보내기

• AI 챗봇: 사이트 방문자의 질문에 즉시 응답 가능한 대화형 인터페이스

• 반응형 디자인: 모든 디바이스에 최적화

• 페이지 전환 및 스크롤 애니메이션

3. PRD와 Todo 작성 (Cursor로 개발)

• PRD Builder GPTs에서 작성하고 프로젝트 폴더에 prd.md로 저장

  

  ALT

  한국어의 스크린 샷

• PRD를 참조해서 Todo 생성

  사본

  @prd.md를 참조해서 Todo.md 파일을 생성해주세요. 
  Todo의 task들은 최대한 작은 단위로 생성해주세요.

  

  ALT

  한국어 메뉴의 스크린 샷

• Todo에 맞추어 순차적으로 개발하기

  사본

  @Todo.md를 참고해서 순차적으로 개발을 진행해주세요.

4. 기술 스택 (Todo에 따라 Cursor가 설치 및 진행)

• 개발 도구

  • Vite: 빠른 프로젝트 개발 및 빌드, React 등 다양한 프레임워크 지원

  • npm: 프로젝트의 의존성 관리

• 프론트엔드 기술

  • React: 복잡한 UI 관리

  • Tailwind CSS: 일관된 디자인 시스템 구현

  • Framer Motion: 페이지 전환과 스크롤 애니메이션 구현

• 외부 서비스

  • OpenAI API: 사이트의 AI 챗봇 기능 구현

  • EmailJS: 클라이언트 사이드 이메일 발송, 문의하기와 연동

5. 디자인 시스템 (PRD에 명시)

• 색상 팔레트: 자연과 보태니컬 아트라는 주제에 맞춤, Colorhunt 사이트 참조

• 타이포그래피: 세리프체와 산세리프체의 조화

• 애니메이션: 페이지 전환, 스크롤 기반, 버튼과 카드 인터랙션, 그라데이션 및 배경 효과

• 보태니컬 아트 이미지: Midjourney로 주제에 맞게 생성

6. 사이트 구조 (Cursor로 개발)

flora-bota/
├── public/                   # 정적 자산 (이미지, 아이콘 등)
│   ├── assets/               # 이미지 및 미디어 파일
├── src/                      # 소스 코드
│   ├── components/           # 재사용 가능한 UI 컴포넌트
│   │   ├── Chatbot.jsx      # AI 챗봇 컴포넌트
│   │   ├── Footer.jsx       # 푸터 컴포넌트
│   │   ├── HeroSection.jsx  # 히어로 섹션 컴포넌트
│   │   ├── Layout.jsx       # 레이아웃 래퍼 컴포넌트
│   │   └── Navbar.jsx       # 네비게이션 바 컴포넌트
│   ├── pages/               # 페이지 컴포넌트
│   │   ├── About.jsx        # 아티스트 소개 페이지
│   │   ├── Collaboration.jsx # 협업 페이지
│   │   ├── Contact.jsx      # 연락처 문의 EmailJS 연동 페이지 
│   │   ├── Exhibitions.jsx  # 전시회 페이지
│   │   ├── Home.jsx         # 홈페이지
│   │   ├── NotFound.jsx     # 404 페이지
│   │   ├── Portfolio.jsx    # 포트폴리오 페이지
│   │   └── Workshops.jsx    # 워크숍 페이지
│   ├── styles/              # 스타일 관련 파일
│   │   ├── index.css        # 전역 CSS 및 Tailwind 지시어
│   │   └── tailwind.css     # Tailwind CSS 추가 스타일
│   ├── App.jsx              # 메인 앱 컴포넌트 및 라우팅
│   └── main.jsx             # 앱 엔트리 포인트
├── dist/                    # 빌드 결과물 (자동 생성)
├── node_modules/            # 의존성 패키지 (자동 생성)
├── .env.local              # 로컬 환경 변수 (API Key, EmailJS 설정)
├── .gitignore              # Git 제외 파일 목록
├── LICENSE                 # 라이선스 파일
├── index.html              # HTML 템플릿
├── package.json            # 의존성 및 스크립트
├── package-lock.json       # 의존성 잠금 파일
├── postcss.config.js       # PostCSS 설정
├── tailwind.config.js      # Tailwind CSS 설정
├── vercel.json             # Vercel 배포 설정
└── vite.config.js          # Vite 설정

7. AI 챗봇 (API 연동, Cursor로 개발)

• OpenAI API 연동: API Key 생성

• API Key의 안전한 관리를 위해 환경 변수 사용: 로컬 프로젝트 루트에 .env.local 파일 생성

• 보안 강화를 위해 Git 관리에서 제외: .gitignore에 .env.local 파일 추가

• 챗봇 응답 최적화

  • 응답 길이 조정, 시스템 프롬프트 최적화, 도메인 지식 강화, 키워드 기반 응답 보완

8. 클라이언트 사이드 이메일 발송 (EmailJS 연동, Cursor로 개발)

• EmailJS 가입 후 실제로 사용할 이메일 서비스 연결(Gmail 등), 이메일 템플릿 생성
  (무료 플랜으로 월 200회 이메일 전송 가능)

• 서비스 ID, 템플릿 ID, Public Key 확인

• .env.local 파일에 환경 변수를 추가

  사본

  # .env.local 파일
  VITE_OPENAI_API_KEY=your-api-key
  VITE_EMAILJS_SERVICE_ID=service-id
  VITE_EMAILJS_TEMPLATE_ID=template-id
  VITE_EMAILJS_PUBLIC_KEY=your-public-key

9. 사이트 버전 관리 (Github)

• Github에 새로운 Repository "flora-bota" 생성

• Cursor의 터미널에서 Github와 연동 및 업로드

  사본

  # 첫 연결 시 
  git init # Git초기화
  git remote add origin https://github.com/AeonKim/flora-bota.git # 레포지토리와 연결
  
  # 변경 사항을 업로드할 때
  git add . # 현재 폴더 내 모든 변경 파일을 스테이징
  git commit -m "update changes" # 변경 사항을 레포지토리에 기록
  git push origin main # 커밋된 변경 사항을 레포지토리에 업로드

  

  ALT

  거래 계좌 설정을 보여주는 검은 색 화면

10. 사이트 배포 (Vercel)

• Vercel에 가입시 "Continue with GitHub"을 선택하여 GitHub 계정과 연동

• 대시보드에서 프로젝트를 만들며 Github의 "flora-bota" Repository를 Import

• 프레임워크 및 빌드 설정(기본적으로 자동 설정)

• 환경변수는 직접 등록

  

  ALT

  YouTube에서 비디오 설정을 보여주는 검은 색 화면

  • 프로젝트 - Settings - Environment Variables 메뉴

  • Key에 키의 명칭, Value에 키 값을 입력 후 저장

  • 환경변수를 추가하거나 수정한 경우 반드시 재배포해야 변경사항 적용

• 프로젝트 설정을 마친 후 "Deploy"하면 자동 배포

• GitHub Repository의 코드가 변경되면 Vercel이 자동으로 재배포

  

  ALT

  생산 개발 페이지의 스크린 샷

• 404: NOT_FOUND 오류 주의

  • 배포가 성공적으로 완료되어도, 요청한 경로나 리소스를 찾지 못하는 오류

  • 메인 페이지 flora-bota.vercel.app은 잘 보이지만, 개별 페이지인 flora-bota.vercel.app/exhibitions 등으로 직접 접근하면 404 오류 발생 가능

  • React, Vite 등 프론트엔드 프레임워크 기반의 SPA(Single Page Application)에서 자주 나타나는 라우팅 문제

  • 프로젝트 루트 디렉토리에 vercel.json 파일을 추가하여 해결

    사본

    {
      "rewrites": [
        { "source": "/(.*)", "destination": "/" }
      ]
    }

  • 모든 경로 요청을 루트(/)로 리다이렉트해, 클라이언트 라우터가 정상적으로 라우팅을 하도록 처리

11. 완성 사이트 보기: https://flora-bota.vercel.app/

결과와 배운 점

• 스터디장님이 알려주신 PRD와 Todo 리스트 생성 그리고 순차적으로 개발하라는 프롬프트가 정말 유용했습니다. 👍 시작 방법을 이해하니 이후 과정이 쉬워졌어요.

• React와 npm이 무엇인지 몰라도 Cursor가 알아서 설치하고, 실패하면 기특하게도 😍 새로운 방법을 찾아 계속 다시 설치해주어 사이트 개발이 가능했습니다.

• 처음엔 파일을 찾아 소스를 보는 것이 복잡해서 Cursor의 오퍼레이션을 낭비하며 요청을 했었습니다. 점차 익숙해지니 콘텐츠나 이미지 파일명 수정 등은 소스를 보고 직접 수정할 수 있었어요.

  

  ALT

  한국 텍스트 편집기의 스크린 샷

• Github는 여전히 어렵고, Vercel도 낯설었지만 Perplexcity와 Claude의 도움으로 배포에 성공했습니다.

• 비개발자가 짧은 기간 안에 처음 계획했던 사이트를 개발하고, AI 챗봇을 구현한 것에 만족합니다. 아직 너무 부족하지만, Cursor를 왜 어떻게 사용하는지 많이 배웠어요!

• 사이트 기능 확장으로 회원 시스템, 워크숍 예약 시스템, 온라인 결제 시스템 연동을 생각해보았습니다. Supabase 등 데이터베이스를 연결하는 것부터 해보려고요~ 🍀