프로젝트 고도화 및 개발 협업(30)

 

보상제도.. 영원히 고민해... 기획자분들.. 존경해......

좀 더 포인트 제도 구체화 시켜보다가 당근 모임을 확인해봤다

당근은 좀 주기적인 모임? 그런 느낌이었는데 제공하는 정보가 매칭장에 대한 정보를 알려주는게 참고하기 좋아보여서 일단 코멘트..ㅋㅋ

혼자 이것 저것 알아보고 검색하고 기본적인 제도로.. 구상 끝... 

이제 총괄님.. 오셔서 확인해보시고 사업 가져오신거랑 조율해주셔야함.....

 

+ 당근 보다보니까 ,,, 매칭 신청 전에 문의할 수 없나? 수락 받고 매칭에 들어가서 채팅에서 물어볼 수 있는 상황이니까 우리 커피챗처럼 중간에 오픈채팅처럼 매칭장과 1:1 채팅먼저 하고 들어오게 하는.. 그런 방향이 생각나긴 했는데

나중에 UT 해보고 문의하는 기능 있으면 좋겠다 하면 그 때 추가하는거 어떨지..? 

 

 

 

기획 내용에 대한 사용자들 의사가 궁금해져서 혼자 스리슬쩍 설문조사 해보려고 했는데 

총괄님이 같이 뿌려주신다고 하셔서 나는 구글폼 만들어서 질문 어떤지.. 피드백 받고 개인적으로 인스타 스토리로 지인들한테 설문 부탁하고 총괄님은 모두의 설문 이라는 곳에 올려주심

 

4일동안 해서 나온 결과를 정리해뒀는데..

포인트 제도에 대해서는 흥미를 느끼는 사람들이 꽤 있긴 했고, 프리미엄 요금제가 있다면? 해서 나왔던 아이디어가 있었으니까 

질문에 넣어뒀었는데 요금제는 결제할 사람이 별로 없을듯..하여... 

 

간단히 읽어보니 레벨테스트에 대한 기대가 은근 높네..??

근데 기존에 레벨테스트 문항을 총괄님이 기획해서 주셨는데 너무 구체적이진 않아서,, 

확실히 레벨테스트라는 기능을 할 수 있는 정도로 문항을 구체화시켜야되겠다는 생각이 들었다

 

 

그래서 AI들을 총동원해서 GPT, Gemini, Claude 세가지로 다 뽑아봤는데 Gemini로 뽑아서 그걸 GPT로 정리하고 Claude로 말 정리하면 괜찮은 것 같았다 

우선 나름대로 정리해서 두가지 버전을 보여주고 실제로 지인중에 대학 야구로 활동하는 친구와 배드민턴 배워서 하는 친구에게 난이도에 대해 물어봤다

두명이 비슷한 답을 주긴 함.. 하나는 초보자용 하나는 너무 구체적이라 초보자 입장에서는 어려울거같은데 좀 해본 사람은 좋다 ..

 

그래서 중간 난이도로 수정...해서 

기본기 / 경기 이해 / 활동성 / 경험도 네가지로 카테고리 나누고 종목별로 표 정리..완료..

 

가장 중요한건 레벨테스트가 할때마다 같은 문항이면 테스트의 의미가 없지 않나..? 하는 생각이 들어서 

종목별 테스트 문항은 8개로 하고, 각 카테고리별로 두문항씩 출제되는 형식

그리고 카테고리별로 문항을 4개정도씩 해둬서 랜덤으로 카테고리마다 두문제씩 랜덤추출해서 8문항 만들면?

레벨테스트가 매번 같은 문항으로 나오는 문제를 없앨 수 있겠다..!! 해서 정리하느라 죽을뻔,,,, 

그래도 오케이 받았다.. 

 

중간중간 프론트분의 디자인 피드백 요청이 있어서 디자인 구현된거 봐주다가 발견한 플로우 문제점 ㅋㅋㅋ

 

기존에 리디자인하면서 내가 기획 맡기 전에는 매칭 신청할 때, 해당 종목 레벨테스트 결과가 없으면 테스트 화면으로 전환되는 플로우였다

근데 내가 기획 맡고 홈화면에 사용자가 뭘 할 수 있을지 보기 쉽게 버튼을 만들면서 홈화면에서도 레벨테스트로 가는 버튼이 생겼다

 

여기서 문제!

만들어뒀던 레벨테스트 플로우를 그대로 버튼에 연결해뒀었는데 이제 보니 홈에서 들어가는건 종목 선택 없이 뭘 테스트 한다는겨..? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래서 어떻게 바꾸지.. 하다가 최대한 통일감 있게 하고 개발도 재사용하기 쉽게 매칭 만들 때 종목 선택하는 화면을 넣고 

진입화면 타이틀만 살짝 바꿨다 ㅎㅎ

 

---

멘탈 나갈 것 같았던 점...

 

일단.. 프론트 개발자분이 바꼈다... 그래서 이전 개발자분들과 전달방식 정했을 때는 백엔드 작업이 필요한 UI / 프론트 작업만 필요한 UI 로 나눠서 정리해달라고 했었는데 

이번에 들어오신 프론트분이 엄청 빠르게 구현 다 했다고,, 하셔서 TestFlight 배포해서 확인해봤는데... 

처참,,, 했다.. 보자마자 너무 다른데.. 싶었다.. 

 

원래는 피드백 드릴 때 노션에 어떤 부분 수정 필요한지 정리해서 드리기로 했는데 

너무 많아서 정리.. 가 안될정도였다 

그래서 일단 훑어보면서 바로 보이는 것들만 정리해서 드렸움..

이정도면 업데이트 목표로 한 날짜에 맞게 개발이 완료되지 않을 것 같아서 총괄님께.. 상황 전달해서 프론트분과 회의를 잡았다

 

회의를 하면서 기존 개발자분들과 했던 전달방식보다 전체 플로우를 한 번에 주는게 편하다고 하셔서 

기본적으로 전달방식부터 맞춰가고 

디자인.. 수정 필요한 부분을 말로 한 번 더 설명 드리면서 '통일, 색상 일치, 마진' 을 우선으로 해달라고 부탁드림

 

버그 수정을 우선으로 해서 디자인에 신경 못썼다고 하시니 납득하고 이제 디자인 완료 되면 피드백 요청하기로 정했다 

 

근데.. 디자인 완료된 UI는 데브표시 하기로 해서 이번 피드백에는 데브표시 된 화면들 확인했는데.. 어머머..

수정 요청한 부분이 수정되지 않았고,, 여전히 너무 달랐다.. 

어쨰서..? 왜..??

 

라이팅도 여기저기 마음대로 수정하시고,,아이콘도.. 아무거나 쓰시고,, 

난 분명 아이콘도 전달 드렸는데..? 같은 칩 요소인데 사이즈 radius 다 다르고.. 폰트 사이즈..다르고.. 

이미지로 저장해서 사용하시면 된다고 이미지도 드렸는데..? 왜..? 어쨰서..? 

 

그래서 급하게.. 수정 요청이 의미가 없는 것 같다.. 요청한 것도 수정 안되고 지금 상황이 이렇다... 하고 총괄에게 2차 긴급 SOS.. 🚨

 

결론?

일단 디자인 피드백하는 건 멈추고 대기.. 

주말에 연락와서 이전에 분류했던 내용 다시 끌고와서 백엔드분 전달드리고... 총괄님이 열심히 내 sos를 해결해주시려고 해주심 ㅜㅜ

---

할 일이 사라진 김에.. 나도 한 번 구현해볼까..? 싶어서 framer / cursor 사용법을 찾아보고 

framer 에 AI 달려있길래 한 번 시켜봤다 

이렇게 하는게 맞는진 모르겠다만..? ㅎㅎ

 

흠.. 모르겠어서 일단 검색해봄 ㅋㅋㅋㅋㅋ

 

1) 프레이머에서 기초 디자인 및 반응형 레이아웃을 잡고,

2) 커서로 코드 컴포넌트(React) 및 고급 로직을 작성하여 연결하는 방식

1단계: 프레이머(Framer)에서 기본 UI 및 레이아웃 설계

먼저 프레이머의 직관적인 에디터를 사용해 UI의 뼈대와 반응형 디자인을 완성합니다.

• 디자인 작성: 텍스트, 이미지, 버튼 등 UI 요소를 블록 쌓기 방식으로 배치합니다.
• 반응형(Responsive) 설정: 캔버스 우측 상단에서 Desktop, Tablet, Mobile 등 각 화면 크기에 맞게 레이아웃(Stack 및 Grid)을 구성합니다.
• 컴포넌트화: 재사용할 UI(예: 네비게이션 바, 카드 등)는 [Create Component]를 통해 분리해 둡니다. [1, 2]

2단계: 프레이머 코드 컴포넌트(Code Component) 생성

일반적인 노코드 방식(디자인 툴)만으로는 구현하기 어려운 동적 인터렉션이나 복잡한 데이터 바인딩을 위해 커서를 도입합니다.

• 프레이머 좌측 패널의 [Assets] -> [Code] -> [New Component]를 클릭해 React 기반의 코드 컴포넌트 파일을 생성합니다.

3단계: 커서(Cursor)에서 UI 코드 작성 및 수정

생성된 코드 파일이나 프레이머 프로젝트의 폴더를 커서 에디터로 엽니다.

• AI 프롬프트 작성: Cmd + K 또는 Cmd + L을 눌러 AI 채팅창을 엽니다. 프레이머에서 구현하고자 하는 복잡한 UI 인터렉션이나 API 연동 로직을 자연어로 요청합니다.
• 코드 수정 반영: 커서가 제안한 React 코드를 확인하고 Accept(수락)하여 파일에 적용합니다. [1, 2, 3, 4]

4단계: 프레이머와 커서 연동 테스트 및 디자인 완성

커서에서 수정한 코드는 프레이머 캔버스에 실시간으로 반영되거나 컴포넌트 형태로 불러와집니다.

• 프레이머 캔버스에서 해당 코드 컴포넌트를 UI 화면의 원하는 위치에 배치합니다.
• 프레이머 상단의 Play(재생) 버튼을 눌러 디자인, 인터렉션(호버, 클릭 등), 반응형 레이아웃이 의도대로 동작하는지 확인합니다.

5단계: 웹 배포

모든 UI 화면이 만족스럽게 구현되었다면, 프레이머 우측 상단의 [Publish] 버튼을 눌러 완성된 UI를 웹상에 즉시 배포합니다.

프레이머 에디터의 시각적 편의성과 커서의 강력한 코딩 능력을 함께 사용하면 일반적인 노코드 툴의 한계를 뛰어넘는 고도화된 UI 화면을 완성할 수 있습니다

 

---

 

 

vercel, supabase 활용하는 방식

 

1단계: 피그마 디자인을 코드로 변환하기 (UI 구현)

디자인을 코드로 옮길 때 가장 추천하는 AI 도구는 Lovable.dev 또는 Cursor입니다.

• Lovable을 사용하는 경우 (초보자 추천):
  1. 피그마에서 완성된 디자인 화면들을 이미지(PNG/JPEG)로 내보내기(Export) 합니다.
  2. Lovable에 접속하여 새 프로젝트를 생성합니다.
  3. 이미지들을 업로드하며 "이 피그마 디자인과 똑같이 UI를 구현해 줘. Tailwind CSS와 React(Vite)를 사용해 줘" 라고 프롬프트를 입력합니다. [1]
• Cursor 에디터를 사용하는 경우 (개발 환경 구축):
  1. 프로젝트 폴더를 만들고 Cursor로 엽니다.
  2. AI 챗창(Ctrl+K 또는 Ctrl+L)에 피그마 스크린샷 이미지를 첨부합니다.
  3. "이 디자인대로 메인 페이지 UI 컴포넌트를 작성해 줘" 라고 요청하여 코드를 생성합니다.

2단계: Supabase 데이터베이스 및 인증 연동

UI 구조가 잡히면 데이터를 주고받을 백엔드를 연결합니다.

1. Supabase 프로젝트 생성: ⁠Supabase에 가입하고 새 프로젝트를 만듭니다.
2. 테이블 생성 (DB): 피그마 디자인에 필요한 데이터(예: 유저 프로필, 게시글, 상품 목록 등)를 고려하여 Supabase 대시보드의 'Table Editor'에서 테이블을 생성합니다. (AI에게 구조를 짜달라고 해도 됩니다.)
3. 환경 변수(환경 변수 설정) 저장: 프로젝트 설정에서 SUPABASE_URL과 SUPABASE_ANON_KEY를 복사합니다.
4. AI에게 연동 요청: Lovable이나 Cursor에 복사한 키를 제공하며 다음과 같이 명령합니다.
   • "이 Supabase 정보를 연동하고, 피그마 디자인에 있는 로그인 버튼과 데이터 입력 폼이 실제로 작동하도록 백엔드 로직을 구현해 줘."

3단계: 깃허브(GitHub)에 코드 올리기

배포를 자동화하기 위해 코드를 버전 관리 시스템에 업로드해야 합니다.

1. ⁠GitHub에 로그인하여 새로운 저장소(New Repository)를 생성합니다.
2. Lovable을 사용 중이라면 대시보드 내 'Connect to GitHub' 버튼을 눌러 클릭 몇 번으로 연동할 수 있습니다.
3. Cursor를 사용 중이라면 터미널을 열고 코드를 커밋한 뒤 GitHub에 푸시(Push)합니다.

4단계: 버셀(Vercel)을 통한 최종 배포

마지막으로 전 세계 사용자가 접속할 수 있도록 웹사이트를 라이브 상태로 만듭니다.

1. ⁠Vercel에 가입하고 1단계에서 연동한 GitHub 계정으로 로그인합니다.
2. 'Add New' -> 'Project'를 클릭한 뒤, 방금 만든 GitHub 저장소를 가져옵니다(Import).
3. Environment Variables(환경 변수) 설정:
   • 배포 직전 화면에 있는 'Environment Variables' 메뉴를 펼칩니다.
   • 2단계에서 확인한 SUPABASE_URL과 SUPABASE_ANON_KEY를 키와 값으로 각각 입력합니다. (이 작업을 해야 배포된 사이트에서도 DB가 작동합니다.)
4. 'Deploy' 버튼 클릭: 약 1~2분 뒤 배포가 완료되며 https://vercel.app 형태의 고유 주소가 생성됩니다. [1]

---

 

클로드코드 활용하는 방식

1단계: Claude로 피그마 디자인 UI 구현하기

1. 디자인 캡처: 피그마에서 구현할 화면들을 스크린샷으로 캡처하거나 이미지로 내보냅니다.
2. Claude 대화방 열기: Claude.ai에 접속하여 새 대화방을 만듭니다. (화면 우측 하단 설정에서 Artifacts 기능이 켜져 있는지 확인하세요.)
3. 첫 프롬프트 작성: 캡처한 피그마 이미지들을 첨부하고 아래와 같이 프롬프트를 입력합니다."첨부한 피그마 디자인 스크린샷과 똑같이 웹 UI를 구현해 줘. React(Vite)와 Tailwind CSS를 사용하고, 컴포넌트를 깔끔하게 분리해 줘. 대화형 요소(버튼 클릭, 모달 등)도 작동하게 해줘."
4. 디자인 수정 및 피드백: 우측 Artifacts 창에 실시간으로 구현된 화면이 나타납니다. 화면을 보며 "로고 크기를 키워줘", "정렬이 안 맞아" 등 피그마 디자인과 다르게 나온 부분을 말로 수정 요청합니다. [1]

2단계: Supabase 데이터베이스 구축 및 Claude에게 코드 연동 요청하기

1. Supabase 프로젝트 생성: ⁠Supabase에 로그인하고 새 프로젝트를 생성합니다.
2. Claude에게 DB 구조(Schema) 요청: Claude에게 내가 만드는 서비스의 기능을 설명하고 테이블 구조를 짜달라고 합니다."내가 만드는 서비스에 필요한 Supabase 테이블 생성용 SQL 쿼리를 짜줘."
3. SQL 실행: Claude가 만들어준 SQL 쿼리를 복사하여, Supabase 대시보드의 SQL Editor에 붙여넣고 실행(Run)하면 테이블이 자동으로 만들어집니다.
4. API 키 복사: Supabase의 Project Settings ➡️ API 메뉴에서 Project URL과 anon public key를 복사합니다.
5. Claude에게 연동 코드 요청: Claude에게 키를 전달하며 코드 연동을 요청합니다."이 Supabase URL과 Anon Key를 연동해서, 피그마 디자인에 있던 로그인 폼과 데이터 입력 폼이 실제로 이 Supabase DB와 연동되어 작동하도록 React 코드를 완성해 줘."

 

3단계: 로컬 PC 환경에 코드 옮기고 GitHub에 올리기

Claude가 최종적으로 완성해 준 전체 코드를 내 컴퓨터로 옮겨 실행하고 GitHub에 올려야 합니다. [1, 2]

1. 터미널 열기: 맥(Terminal) 또는 윈도우(PowerShell)를 엽니다.
2. Vite 프로젝트 생성: 아래 명령어를 입력하여 프로젝트 폴더를 만듭니다.
   bash

   npm create vite@latest my-project -- --template react
   cd my-project
   npm install
   

   코드를 사용할 때는 주의가 필요합니다.

    
3. Tailwind 및 Supabase 라이브러리 설치:
   bash

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   npm install @supabase/supabase-js
   

   코드를 사용할 때는 주의가 필요합니다.

    
4. 코드 붙여넣기: Claude가 가이드해 준 대로 src/App.jsx와 컴포넌트 파일들에 Claude의 코드를 그대로 복사+붙여넣기 합니다.
5. GitHub 저장소 연동: ⁠GitHub에 새 저장소를 만들고, 내 PC 터미널에서 코드를 푸시(Push)합니다.
   bash

   git init
   git add .
   git commit -m "feat: 피그마 디자인 구현 및 Supabase 연동"
   git remote add origin <내_깃허브_주소>
   git branch -M main
   git push -u origin main
   

   코드를 사용할 때는 주의가 필요합니다.

    
   [1, 2]

4단계: Vercel을 통한 최종 배포

1. ⁠Vercel에 가입하고 GitHub 계정으로 로그인합니다. [1, 2]
2. 'Add New' ➡️ 'Project'를 클릭한 후, 방금 올린 GitHub 저장소를 찾아 Import 합니다. [1]
3. 환경 변수(Environment Variables) 입력 (가장 중요):
   • 배포 화면 중간의 Environment Variables 메뉴를 펼칩니다.
   • VITE_SUPABASE_URL과 VITE_SUPABASE_ANON_KEY라는 이름으로 Supabase 키들을 각각 입력해 줍니다. (Claude가 코드 내에서 사용한 환경변수 이름과 똑같이 맞춰야 합니다.)
4. Deploy 클릭: 1~2분 뒤 배포가 완료되며, 전 세계 누구나 접속할 수 있는 라이브 사이트 링크 주소가 발급됩니다. [1]

---

 

워후.. 많다.. 앞으로 더 공부해봐야겟어...ㅎ