대량 메일 발송 전 사이드바에서 본문과 첨부파일을 미리 확인하는 기능을 프롬프트 5개로 구현했다. 자동화의 편안함과 실수의 리스크 사이에서 안전장치를 만든 것이다.
자동화는 편하지만 물을 엎지르면 주워 담을 수 없듯이, 한 번의 실수로 인해 대량의 메일이 실수로 발송이 되면 수습하기가 너무 힘들어진다.
편안함과 리스크가 공존하는(?) 영역이라 많은 테스트가 필요하다.
지금까지 워크플로가 자동화 영역에 집중했다면, 그래도 눈으로 확인하고 보내는 것이 좋지 않을까라는 생각이 들어서 갑자기 진행하게 되었다. 바이브 코딩으로 실전 메일 보내기를 하면서 느낀 불안감이 이 기능을 만들게 된 계기였다.
내가 보낼 메일 내용과 첨부파일을 미리 볼 수 없을까? 확인하고 발송 버튼을 누르자
이 하나의 문장으로 시작을 했다.
우선 바이브 코딩을 할 수 있는 환경이니 바로~ 시작한다.
프롬프트 #1
현재 선택된 행(Row)의 데이터를 기반으로,
이메일 본문이 어떻게 보일지 HTML로 렌더링해서 우측 사이드바에 보여주는 스크립트를 짜줘.
사이드바 아래에는 '발송' 버튼을 넣어줘
1차 결과 확인했을 때, 이메일 본문 내용은 바로 확인이 가능했지만 첨부파일은 볼 수 없었다.
프롬프트 #2
첨부파일은 미리보기 기능을 추가해줘
2차 결과를 확인했는데, 미리 보기가 아니라 링크를 추가해 주고 눌렀더니, 생성된 PDF 파일이 새 탭에서 열리는 방식으로 구현해 줬다. 사용성이 별로인데?
프롬프트 #3
PDF 링크 방식이 아니라 PDF 미리보기 방식으로 변경해줘
실패 : Chrome에서 차단한 페이지입니다라는 메시지가 뜬다. 이를 그대로 다시 전달했더니 기존 Base64 방식 대신 Google Drive의 '미리 보기' URL을 iframe에 직접 연결하는 방식으로 변경했다면서, 알려준다. 하지만 난 자세한 내용은 궁금하지 않지만...
우선 **메일 내용 + 첨부파일도 미리 보기 성공. **
그런데 사용성이 너무 구렸다. 하나의 행을 누르고 미리 보기를 하고, 다시 다른 행을 누르고 새로고침을 눌러야 하는 아~주 번거로운 방식이었다.
프롬프트 #4
샐울 변경하면 사이드바 내용이 자동으로 업데이트 되도록 해줘.
1초마다 새로고침을 하는데, 느린 것 같지만 우선 데이터 확인 가능해서 좋은데, 사이드 바가 좁아서 데이터 확인이 조금 어렵다고 생각했다.
프롬프트 #5
사이드 바 너비를 2배 정도 크게해줘
조금 확인을 해보니, 구글 스프레드시트의 기본 사이드바는 너비가 300px로 고정되어 있어 확장이 불가능하다고 했다. 사용자가 시트 작업을 계속하면서도 창을 마음대로 움직일 수 있는 팝업 형태로 변경해 줬다.
우선 여기까지 만족
/image_001.png)
마지막으로 프롬프트 개선하기
현재까지 대화를 기준으로 어떻게 프롬프트를 하면 이런 반복적인 작업 없이 진행할 수 있을까?
비개발자가 작성할 수 있도록 가이드를 주면 좋을 것 같아.
두두두두두두~ 답변은 다음과 같다
비개발자도 좋은 프롬프트를 작성할 수 있을까?
아래 답변을 보면 결국은 육하원칙에 따라서 얼마나 구체적으로 맥락 또는 의도를 전달할 것인지에 대해서 잘 고민해서 전달하는 단순함이 답이라는 것을 깨닫는다.
이 양식을 복사하여 빈칸을 채워주시면, 개발 지식이 없어도 완벽한 프롬프트를 만들 수 있습니다.
1. 🎯 무엇을 하고 싶으신가요? (목표)
무슨 기능을추가하고 싶으신가요? 왜 그 기능이 필요한가요?
기능 설명: (작성 예: 선택한 고객의 이메일과 첨부파일을 미리 확인하는 창을 띄우고 싶어요.)
목적: (작성 예: 이메일을 보내기 전에 내용이 맞는지 검토해서 실수를 줄이고 싶어요.)
2. 🖼️ 화면은 어떻게 생겼으면 좋겠나요? (디자인 & 크기)
화면의어디에,얼마나 크게나타나야 하나요?
형태, 크기, 필수 요소
3. 👆 어떻게 작동하면 편할까요? (사용성 & 자동화)
사용자가무엇을 눌렀을 때, 어떻게 반응해야 하나요?
자동 갱신 여부, 동작 방식
4. ⚠️ 꼭 지켜야 할 조건이 있나요? (제약사항)
기술적으로안 되는 것이나꼭 사용해야 하는 방식이 있나요? (모르면 비워두셔도 됩니다.)
**보안/호환성, 기존 데이터 사용여부 **
불러오는 중...