Cusor는 디자인을 못한다?! 천상 개발자 감성 Cursor로 랜딩페이지 만들기!

소개

AI스터디 핵심강의에서 Cursor를 배우게 되면서, 마침 정리해둔 브랜드 맵을 실험 삼아 랜딩페이지 제작에 도전해보았습니다.
Cursor의 바이브 코딩 스타일이 어떻게 흘러가는지 직접 경험해보고 싶었어요.

진행 방법

  • 도구 구성

    • Gpts로 PRD 문서 작성

    • Cursor에서 Markdown 문서로 가져오기

    • @ 기능으로 관련 문서들 서로 참조 연결

    • PRD를 기반으로 Cursor에게 To-do 생성 지시

    • 생성된 To-do 기반으로 작업 진행

    • 브랜드 맵 내용을 반영하여 랜딩페이지 흐름 설계

  • 작업 흐름 예시

    @prd 브리핑
    @브랜드맵 연결
    → make todo
    → generate component
    → export markdown
    
  • 커서가 PRD 내용을 기준으로 알아서 뚝딱뚝딱 작업을 진행하는 모습이 정말 신기했어요!

결과와 배운 점

  • 커서는… 디자인을 정말 못합니다!

    • 처음엔 "굳이 러버블 같은 도구를 왜 쓰지?" 했지만,

    • 써보니까 이유가 확실해졌어요.

      정말 천상 개발자 같은 툴이더라고요!^^

  • 코딩은 훌륭하지만, 디자인 쪽은 거리가 멀어요.

    • MIT 출신 개발자들이 만든 툴이라더니 정말 '공대 감성'이 살아 있어요

    • 문서-기반 설계 → 자동화된 흐름은 속도감 있고 시원시원했지만,

    • 와이어프레임이나 비주얼 UI 설계는 딱딱하고 불편했어요

  • 프로그램마다 성격과 특장점이 있다는 점을 새삼 느꼈고,

    • 이게 마치 실제 개발자/디자이너의 사회적 통념처럼 닮아 있어서 웃겼어요!

  • 무엇보다 PRD 문서의 힘을 체감했어요

    • 프로덕트의 방향성과 정의가 명확할수록 Cursor는 일사천리로 움직여요

    • 그래서 문서 작성에 더 공을 들이게 되더라고요

도움 받은 글

  • AI스터디 핵심강의: Cursor 실습 세션

  • GPTs를 활용한 PRD 작성 예시 문서


한 줄 메시지:
바이브 코딩, 생각보다 (시작은) 쉬워요. 척척 만들어주는 그 느낌, 한번 꼭 경험해보세요!

마지막으로 못생긴 랜딩페이지 스샷한컷ㅎㅎ

한국어 웹 사이트의 홈페이지

저런 폰트는 대체 어디서 구했니...ㅎㅎㅎㅎ

4
3개의 답글

👉 이 게시글도 읽어보세요