에이전트 활용 사례
Views —

에이전트 활용 사례

오늘 등록된 사례

112전체 145건

145개 중 1–20개

마케팅·디자인

말로 설명해서 초대장 웹페이지 만들기

Cursor에 원하는 모습을 설명해 초대장 페이지와 애니메이션을 만들었대요. 마지막 문구와 여백은 직접 코드를 고쳤어요.

Cursor

사용법

  1. 첫 요청에 프런트엔드만으로 만드는 초대장이라는 목적을 적었어요. 애니메이션, 이미지와 문구, 화면 사이를 이동하는 버튼까지 원하는 구성을 설명했대요.
  2. 봉투가 열리는 애니메이션에서 막혔어요. 말로 수정 요청을 반복해도 나아지지 않아 HTML·JavaScript 예제를 직접 찾고, 색상을 바꾼 코드를 프롬프트에 붙여 기반으로 쓰게 했대요.
  3. 애니메이션이 동작한 뒤 버튼, 글꼴, 화면 구성을 추가했어요. 다른 화면을 만들 때는 앞서 쓴 요청을 재사용했대요. 공통 스타일이라고 명시하지 않으면 현재 화면에만 반영되는 문제가 있었어요.
  4. 페이지가 90~95% 정도 완성됐을 때부터는 직접 코드를 수정했어요. 문구, 안쪽 여백, 바깥 여백처럼 작은 조정은 손으로 마무리하는 편이 빨랐대요.

결과

작성자는 2~3시간에 초대장 사이트를 완성했대요. 평소 방식으로 직접 만들었다면 4~8시간쯤 걸렸을 거라는 본인의 추정도 덧붙였어요.

참고사항

막연하게 고쳐 달라고 할 때보다 참고 예제를 보여주는 편이 도움이 됐대요. 마지막 세부 조정에는 수작업이 필요했어요.

출처

DEV Community 원문 ↗

예시 프롬프트 · Cursor

휴대폰과 PC에서 볼 수 있는 행사 초대장 웹페이지를 구현해 주세요.

입력: 행사명 [이름], 일시 [날짜·시간], 장소 [주소], 안내 문구 [내용], 사용할 이미지 [파일], 참고 화면 [자료]. 빠진 정보부터 확인하고 프런트엔드만으로 구현할 수 있는 범위를 정하세요.

첫 화면의 초대장과 본문, 행사 정보, 위치·연락 링크를 구성하세요. 봉투 열기 같은 애니메이션은 제공한 참고 동작을 기준으로 만들고, 모션 감소 설정에서는 내용을 바로 읽을 수 있게 해주세요. 여러 화면에서 글꼴·색·버튼·여백을 공통 스타일로 관리하세요.

원하는 동작이 잘 나오지 않으면 막연하게 반복 수정하지 말고 현재 결과와 참고 예제의 차이를 설명한 뒤 해당 부분을 바꾸세요. 예제 코드를 받으면 기존 화면과 맞도록 필요한 부분만 사용하세요.

결과물: 실행 가능한 페이지와 미리보기, 문구·이미지 교체 안내. 휴대폰에서 가로 스크롤이 생기지 않는지, 날짜와 주소가 정확한지, 버튼·링크·키보드 조작이 작동하는지 확인하세요.