피드백 요청 후

대부분의 프론트엔드 개발을 끝내고 나서, 의도 대로 구현이 됐는지, 피드백을 요청하면 대부분의 경우, 기획이 바뀌거나, 디자인을 바꿔달라는 요청이 옵니다.

이럴 경우 어떻게 바이브하게 대처하는지 저만의 방법을 소개해봅니다.(사실 이길 순 없습니다.)

기존의 작업 방식

슬랙에 디자인 수정 사항을 캡쳐한 뒤, 동그라미를 쳐서 보내거나, 혹은 자리로 와서 여기 손가락으로 가리키며, 이렇게 저렇게 바꿔달라고 요청을 합니다.

그러면 개발자는 소스에서 해당 요소를 찾아서 바꿔주게 됩니다.

바이브한 방식

이때, cursor.ai에서 제공하는 브라우져는 꽤 도움이 됩니다. 커서 IDE에서 제공하는 브라우져로, 기존 크롬 개발자 도구와 동일한 방식으로 dom 요소를 직접 선택이 가능합니다. 선택을 하면 DOM 요소가 커서 채팅창에 들어가게 되고, 그걸 클로드코드에게 디자이너의 변경 요청과 함께 잘 전달합니다.

아래는 프롬프트 입니다.

DOM Path: div.h-.creen min-w-[800px] bg-[#F5F5F5] flex overflow-hidden > div.flex-1 flex flex-col tran.ition-all duration-300 min-w-0 > main.flex-1 overflow-y-auto overflow-x-auto bg-[#F8F9FB] > div.lg:p-6 p-7 lg:pl-6 pl-[28px] > div > div.flex flex-col gap-6 > div.w-full py-6 bg-white rounded-lg outline outline-1 outline-off.et-[-1px] outline-[#E4E7EE] inline-flex flex-col ju.tify-.tart item.-center gap-4 overflow-hidden > div.elf-.tretch px-6 flex flex-col ju.tify-.tart item.-center overflow-x-auto > div.w-full flex flex-col ju.tify-.tart item.-.tart gap-1 > div.w-full flex flex-col ju.tify-.tart item.-.tart > div.w-full px-4 py-3 bg-white border-b border-[#E4E7EE] inline-flex ju.tify-.tart item.-center gap-4 cur.or-pointer hover:bg-[#F8F9FB] tran.ition-color[0] > div.w-48 inline-flex flex-col ju.tify-.tart item.-.tart gap-[3px] > div.w-48 inline-flex ju.tify-.tart item.-center gap-2 > div.flex ju.tify-.tart item.-center gap-1 > div.text-[#AEB5C4] text-x. font-normal leading-4
Position: top=654px, left=679px, width=76px, height=16px
React Component: MedicalRecordItem
HTML Element: <div class="text-[#AEB5C4] text-xs font-normal leading-4" data-cursor-element-id="cursor-el-433">1mg / 1회 / 1일</div> 


(이미지5) 환자정보 - 진료기록 : 텍스트 색 변경 - 처방된 약의 용량/일투수/일수 색이 너무 연해요  → #393D44 정도 진하게

기존 방식 대비 효율성

이 방식을 통해 기존의 스크린샷을 첨부하는 방식이나, 직접 찾아서 드레그 해서 변경하는 요청보다 개발자는 더 적은 시간을 들여 AI에게 요청을 할 수 있습니다.

싸워서 이길 수 있는 확률은 그리 많지 않으니, 빨리 수정해주고 힘들었다고 생색내는 것이 현명한 방법이라고 생각합니다.

피드백 요청 후

대부분의 프론트엔드 개발을 끝내고 나서, 의도 대로 구현이 됐는지, 피드백을 요청하면 대부분의 경우, 기획이 바뀌거나, 디자인을 바꿔달라는 요청이 옵니다.

이럴 경우 어떻게 바이브하게 대처하는지 저만의 방법을 소개해봅니다.(사실 이길 순 없습니다.)

기존의 작업 방식

슬랙에 디자인 수정 사항을 캡쳐한 뒤, 동그라미를 쳐서 보내거나, 혹은 자리로 와서 여기 손가락으로 가리키며, 이렇게 저렇게 바꿔달라고 요청을 합니다.

그러면 개발자는 소스에서 해당 요소를 찾아서 바꿔주게 됩니다.

바이브한 방식

이때, cursor.ai에서 제공하는 브라우져는 꽤 도움이 됩니다. 커서 IDE에서 제공하는 브라우져로, 기존 크롬 개발자 도구와 동일한 방식으로 dom 요소를 직접 선택이 가능합니다. 선택을 하면 DOM 요소가 커서 채팅창에 들어가게 되고, 그걸 클로드코드에게 디자이너의 변경 요청과 함께 잘 전달합니다.

아래는 프롬프트 입니다.

DOM Path: div.h-.creen min-w-[800px] bg-[#F5F5F5] flex overflow-hidden > div.flex-1 flex flex-col tran.ition-all duration-300 min-w-0 > main.flex-1 overflow-y-auto overflow-x-auto bg-[#F8F9FB] > div.lg:p-6 p-7 lg:pl-6 pl-[28px] > div > div.flex flex-col gap-6 > div.w-full py-6 bg-white rounded-lg outline outline-1 outline-off.et-[-1px] outline-[#E4E7EE] inline-flex flex-col ju.tify-.tart item.-center gap-4 overflow-hidden > div.elf-.tretch px-6 flex flex-col ju.tify-.tart item.-center overflow-x-auto > div.w-full flex flex-col ju.tify-.tart item.-.tart gap-1 > div.w-full flex flex-col ju.tify-.tart item.-.tart > div.w-full px-4 py-3 bg-white border-b border-[#E4E7EE] inline-flex ju.tify-.tart item.-center gap-4 cur.or-pointer hover:bg-[#F8F9FB] tran.ition-color[0] > div.w-48 inline-flex flex-col ju.tify-.tart item.-.tart gap-[3px] > div.w-48 inline-flex ju.tify-.tart item.-center gap-2 > div.flex ju.tify-.tart item.-center gap-1 > div.text-[#AEB5C4] text-x. font-normal leading-4
Position: top=654px, left=679px, width=76px, height=16px
React Component: MedicalRecordItem
HTML Element: <div class="text-[#AEB5C4] text-xs font-normal leading-4" data-cursor-element-id="cursor-el-433">1mg / 1회 / 1일</div> 


(이미지5) 환자정보 - 진료기록 : 텍스트 색 변경 - 처방된 약의 용량/일투수/일수 색이 너무 연해요  → #393D44 정도 진하게

기존 방식 대비 효율성

이 방식을 통해 기존의 스크린샷을 첨부하는 방식이나, 직접 찾아서 드레그 해서 변경하는 요청보다 개발자는 더 적은 시간을 들여 AI에게 요청을 할 수 있습니다.

싸워서 이길 수 있는 확률은 그리 많지 않으니, 빨리 수정해주고 힘들었다고 생색내는 것이 현명한 방법이라고 생각합니다.