소개
시도하고자 했던 것과 그 이유를 알려주세요.
커서를 이용하여 본업에 관련된 랜딩페이지를 만들려고 했습니다.
진행 방법
챗지피티 prd 문서 만들기
웹페이지를 기획할 때 PRD 를 작성해야 한다는 것을 처음 알게 됐습니다.
쉽게 작성할 수 있도록 스터디장 성장피터 님이 만들어 공유해 주신 마이지피티 prd builder 를 활용했습니다.
제가 만드는 페이지는 컨텐츠 정확성이 중요해서 챗지피티에 컨텐츠 내용을 쓴 워드 파일을 제공했습니다.
커서로 개발하기
저는 커서를 처음 써보는데요. 파일을 다루는 방식은 일러스트랑 비슷하다고 생각했어요. 프로젝트 라는 개념이 있고, 그 프로젝트 안에 하부 파일들이 들어가요. 다른 점은 커서는 생성형 프로그램이니 내가 프로젝트로 쓸 폴더만 만들어주면, 그 안에 세부 파일들을 만들어 준다는 점.
커서에서 처음 할 일은 prd.md 라는 파일을 만들고, 아까 챗지피티가 만들어 준 내용을 복사하는 것입니다.
오른쪽에 채팅창에서 이제 채팅을 하면서 개발을 할거에요.
오른쪽에 채팅창이 안 보이면 오른쪽에 까만색으로 된 버튼을 클릭하세요
채팅 아래에 있는 설정은 askl, agent, manual 3가지 중에 설정이 가능해요. ask 로 설정되었다면 agent 로 바꿉니다.
언어설정은 오토로 되어 있으면 오토를 끄고 언어를 고를 수 있습니다. 저는 클로드로 할 때는 계속 에러가 나서 제미나이 2.5 프로로 바꾸고 나서 성공했습니다. (저는 커서 유료 결제 하였습니다. )
프롬프트
@prd.md 를 바탕으로 랜딩페이지를 만드는 데 수행해야 할 일들을 차례대로 정리하여 todolist.md 를 만들어주세 요. 디자인은. " " 을 참고해주세요. (디자인을 참고할 레퍼런스 사이트 주소 입력)
@todolist.md 를 참고하여 순차적으로 랜딩페이지를 만들어주세요
중간중간에는 계속 accept, run 누르면서 진행하시면 됩니다.
저는 실패를 많이 하였는데, 레퍼런스 사이트를 주니 이번에는 실패하지 않았어요.
결과물
디자인은 커서에서 만들어준 것으로만 했습니다.
사이트 골격은 아주 마음에 듭니다.
카카오톡채널 로 상담 연결하는 것을 계속 실패했는데, 이번에는 성공적으로 되었습니다.
푸터에 사무소 정보를 여러가지 언어로 넣었습니다.
개발문서부터 여러 언어로 사무소 정보를 넣었더니 아래와 같은 디자인으로 결과물이 나왔습니다.
매우 흡족합니다.
이 틀을 토대로 디자인을 수정해나라려고 합니다.
한국어 웹 사이트의 홈페이지
한국어 웹 사이트의 스크린 샷
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
과정 중에 어떤 시행착오를 겪었나요?
도움이 필요한 부분이 있나요?
앞으로의 계획이 있다면 들려주세요.
저는 언어설정을 제미나이 2.5 프로로 바꾼 것, 레퍼런스 사이트를 준 것이 결과물에 도움을 준 것 같습니다.
평소에 레퍼런스 사이트를 잘 정리해야겠다는 생각이 듭니다.
파일 내용을 수정하고 저장하기를 누르지 않아서 자주 에러가 났습니다.
커서에서도 저장하기를 습관화 해야할 것 같습니다.
이후로는 사무소 자체의 디자인을 추가하여 실제로 활용할 수 있는 사이트로 만들고 싶습니다.
