퍼스널 브랜딩 랜딩페이지 만들기: Cursor AI & claude 와 함께한 바이브 코딩

🎯 프로젝트 시작 배경

코딩 1도 몰라도 내 온라인 명함은 내가 만들자~(커서 웹앱 이번 강의 완성품을 만들고 싶었어요)

🧭 프로젝트 목표

  • ✅ 웨이브온의 깔끔한 UI/UX 벤치마킹

  • ✅ Cursor AI를 활용한 빠른 개발

➡️ 우선 지피티,클로드,젬민이 삼총사한테 "웨이브온" 주소를 주고 분석을 시켰습니다.

이 사이트를 준 이유는 아~~~무 것도 없습니다. 지금 오후 6시가 넘었는데 ....스터디 까지 얼마 안남았는데!!!! 그 전에 완성을 시켜야 겠다는 생각에 검색했을때 가장 먼저 있는 사이트를 줬습니다.

셋이 막~~ 분석합니다... 또 장문으로 뭐라고 떠듭니다..시간이 없습니다. 읽지도 않고 스킵합니다.

응 ~그래 고마워 그러니까 저기 참고해서 내 퍼스널브랜딩 페이지 PRD만들어줘. (전 성장피터님한테 수업받으면서 PRD라는걸 처음 알았습니다. 근데 써보니까 정말~~~너무 좋은거였어요. 검색하면 바로 나오니 궁금하신 분은 검색 ~고고~)

셋이 또 뭐라고 막~ 떠듭니다. 이번엔 "저걸 바탕으로TRD를 만들어줘" 라고 합니다.

셋이 또 막 ~~~~길게 써내려 갑니다. 대충 읽지도 않고 구조만 보고 GPT와 젬민이는 꺼버립니다.

역시 클로드양이 코딩은 선수입니다. 클로드의 PRD와 TRD를 복사해서 커서를 키고 새 프로젝트를 만들고 그 아래에 " PRD.md " 와 " TRD.md " 파일을 만듭니다. 만든 파일에 위에서 "클로드"양이 만들어준 것을 복붙 합니다.

커서한테 우선 "PRD.md" 파일을 끌어다 주고 이걸 분석하라고 합니다. 끝나면 TRD도 똑같이 시킵니다.

분석이 끝나면 두개 파일을 끌어다가 두개를 참조해서 todo를 만들어 달라고 합니다.

생성된 파일들입니다. 저기서 제가 생성한건 PRD와 TRD입니다.

PRD.pdf
237.3KB
TRD.pdf
253.86KB

계속 .md(마크다운 파일) 이 업로드가 안되서 부득이 하게 pdf 로 올립니다.

커서가 생성한 todo들을 끌어다 주고 "이걸 참조해서 순서대로 진행해줘" 라고 입력합니다.

이제 저는 7시가 다 되서 밥먹고 스터디 참여하려고 밥하러 갑니다.

일은 커서가 하거라~~~~~

밥하고 전부치는 중간 중간 와서 커서가 "run"눌러 달라고 하면 눌러 주고 다시 갑니다.(그냥 혼자 좀 하지 !!! 자꾸 오게 만듭니다. )

자꾸 누르고 가라고 기다려서 계속 와서 누르고 갑니다.

커서가 열심히 일을 하는동안 밥도 하고 밥도 다 먹고 정리 까지 다 하고 스터디를 하러 옵니다. 벌써 9시입니다...ㅠ.ㅠ 근데 아직 안끝났습니다.

수업 끝나기 전에 사례 올리는거로 계획을 수정합니다.

만드는걸 기다리면서 스터디를 참여 합니다.

현재 시간 9시 현재 진행 상황을 "커서"한테 보여 달라고 합니다.

한국 버전의 iPhone 스크린 샷

아직도 다 못했다고 합니다. 커서 사용량을 다 써서 " auto " 로만 하니 성격 급한 저는 속이 터지려고 합니다. (살면서 저보다 성격 급한사람 손에 꼽을 정도로 못봤습니다;;;)

요즘 claudecode만 쓰다가 커서 오토로 하니 더 속이 터집니다.

현재 시간이 10시가 넘었습니다. 답답해서 죽을거 같아서 클로드코드로 다른거 하던거 끄고 클로드코드로 이어서 들어 갑니다.

현재 10시 15분입니다.

텍스트가있는 검은 색 화면의 스크린 샷
몇 분 안에 개인 브랜드를 구축하십시오

홈페이지가 그래도 완성이 됐다고 클로드코드가 합니다.

전..코딩을 1도 몰라서 저게 제 홈페이지 인지 모르겠어서 이름을 바꿔 달라고 합니다.

스샷 찍어서 저 부분을 "희희락락"으로 바꿔 달라고 합니다.

한국어가있는 웹 사이트의 스크린 샷

오호~ 희희락락이라고 나오네요~

그 다음도 모르니 그냥 해달라고 합니다.

나머지는 다시 클로드코드한테 시킵니다.

후...여기 까지 쓰고 vercel에서 배보하는건 어케 했는지 모르겠습니다.

AI랑 지금까지 상의 하면서 겨우 해서...ㅠ.ㅠ 거의 2시간 걸린듯...git에 올렸다가 다시 지웠다가 vercel 에 가서 설정 바꿨다가 다시 지우고 ..

안되면 그냥 이거 다 복사해서 클로드코드한테 주고....

여튼 성공은 했습니다!!!
https://personal-brand-builder-zeta.vercel.app/

💭 마무리하며

이 프로젝트를 통해 "좋은 도구(Cursor)와 좋은 레퍼런스(웨이브온)가 만나면 놀라운 결과를 만들 수 있다"는 것을 경험했습니다.

특히 Cursor AI는 개발 생산성을 획기적으로 높여주었고, 혼자서도 복잡한 프로젝트를 완성할 수 있다는 자신감을 주었습니다.

앞으로도 이런 도구들을 활용해 더 많은 사람들이 자신만의 서비스를 만들 수 있는 세상이 오길 기대합니다.


🙏 ** 스터디장이신 "성장피터" 님과 " 현업에 계시면서 챗팅창으로 조언 해주시는 "케네시" 님 그 외에 "커서 웹앱" 방 모든 분들... 같이 한달 스터디 해서 너무 좋았습니다. 여러분들의 도움이 없었으면 이렇게 올리는거 꿈도 못꿨을거 같아요~감사합니다!!!!!! 🙏

-------------------
참고 하세요.
GitHub 토큰을 확인하고 생성하는 방법을 단계별로 안내해드리겠습니다.

GitHub Personal Access Token 생성 및 확인 방법

1. GitHub 설정 페이지 접속

  1. GitHub 로그인

  2. 프로필 아이콘 클릭 (우측 상단)

  3. Settings 클릭

2. Developer Settings로 이동

  1. 좌측 사이드바 맨 아래 Developer settings 클릭

  2. Personal access tokens 클릭

  3. 두 가지 옵션이 표시됩니다:

    • Fine-grained tokens (신규, 권장)

    • Tokens (classic) (기존 방식)

3. 새 토큰 생성

Fine-grained tokens (권장)

1. "Generate new token" 클릭
2. 토큰 이름 입력 (예: "Cursor IDE Token")
3. 만료 기간 설정 (30일, 60일, 90일, 커스텀)
4. Repository access 설정
   - Selected repositories (특정 저장소만)
   - All repositories (모든 저장소)
5. Permissions 설정
   - Repository permissions
   - Account permissions
6. "Generate token" 클릭

Classic tokens

1. "Generate new token (classic)" 클릭
2. Note 입력 (토큰 용도 설명)
3. Expiration 설정
4. Select scopes (권한 선택)
   - repo (전체 저장소 접근)
   - workflow (GitHub Actions)
   - write:packages (패키지 발행)
   - delete:packages (패키지 삭제)
   - admin:org (조직 관리)
   - 등...
5. "Generate token" 클릭

4. 토큰 저장 (중요!)

⚠️ 주의사항:

  • 생성된 토큰은 한 번만 표시됩니다

  • 페이지를 벗어나면 다시 확인 불가능

  • 반드시 안전한 곳에 복사해서 저장

5. Cursor에서 사용할 권한 설정

Cursor IDE에서 GitHub를 사용하려면 다음 권한이 필요합니다:

필수 권한:
- repo (전체 저장소 접근)
- user (사용자 정보 읽기)

선택 권한:
- workflow (GitHub Actions 사용 시)
- gist (Gist 생성/수정 시)

6. 기존 토큰 확인

기존에 생성한 토큰은 다음과 같이 확인할 수 있습니다:

  1. SettingsDeveloper settingsPersonal access tokens

  2. 토큰 목록에서 확인 가능한 정보:

    • 토큰 이름

    • 마지막 사용 시간

    • 만료일

    • 권한 범위

⚠️ 토큰 값 자체는 재확인 불가능합니다.

7. 토큰 관리 Best Practices

## 보안 권장사항

1. **최소 권한 원칙**
   - 필요한 권한만 부여
   - 프로젝트별로 다른 토큰 사용

2. **정기적인 교체**
   - 3개월마다 토큰 재생성
   - 만료일 설정 필수

3. **안전한 저장**
   - 환경 변수로 관리
   - 비밀번호 관리자 사용
   - 절대 코드에 직접 입력 금지

4. **사용하지 않는 토큰 삭제**
   - 정기적으로 토큰 목록 검토
   - 불필요한 토큰 즉시 삭제

8. Cursor에서 GitHub 토큰 설정

# 1. Cursor 설정 열기
Cmd + , (Mac) / Ctrl + , (Windows)

# 2. Git 또는 GitHub 검색

# 3. GitHub Personal Access Token 입력

# 또는 터미널에서 설정
git config --global github.token YOUR_TOKEN_HERE

9. 토큰 관련 문제 해결

## 자주 발생하는 문제

### "Bad credentials" 에러
- 토큰 만료 확인
- 토큰 권한 확인
- 새 토큰 생성

### "Permission denied" 에러
- repo 권한 확인
- 저장소 접근 권한 확인

### 토큰이 작동하지 않을 때
1. 토큰 재생성
2. 권한 재설정
3. Cursor 재시작

1
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요