Hun's DEV

AI한테 아웃룩 같은 메일 뷰어 만들라고 시켰더니 — 진짜 만들어졌다

이런 것도 됩니다··12분 읽기·
AI 코딩메일 뷰어웹메일 만들기바이브 코딩AI 자동화비개발자 앱 개발TipTap 에디터
AI로 만든 아웃룩 스타일 메일 뷰어 — 메일 목록, 검색, TipTap 에디터

결과부터 — 이게 AI가 만든 거라고?

메일 목록이 왼쪽에 쭉 뜨고, 클릭하면 오른쪽에 본문이 열리고, 검색하면 제목·보낸 사람·본문까지 걸리고, 첨부파일 클릭하면 바로 다운로드되고, 답장 버튼 누르면 에디터가 열리면서 표도 넣을 수 있는 메일 뷰어.

아웃룩이나 지메일에서 보던 그 화면이 나왔습니다. 비개발자인 제가 직접 코드를 짠 게 아니라, AI한테 시켜서요.

다만 "메일함 만들어줘" 한 마디로 된 건 아니었어요.

"메일함 만들어줘" — 이 한 마디의 결과

처음에 진짜 이렇게 시켰습니다:

메일함 만들어줘. 메일 목록이랑 본문 볼 수 있게.

결과: 기존 데이터베이스를 무시하고 새 테이블을 만들려 했고, 검색 기능은 빠졌고, 읽음/안읽음 표시도 없었습니다. "만들긴 만들었는데 쓸 수 없는" 결과물이었어요.

프롬프트를 바꿨더니 495줄짜리 계획서가 나왔다

핵심은 "지금 뭐가 있는지"를 알려주는 것이었습니다:

당신은 이메일 클라이언트 UI/UX 전문가입니다.

[현재 상태]
- Next.js + Supabase 프로젝트
- EmailLog 테이블에 이미 sender, subject, receivedAt 필드가 있음
- 새로 추가할 필드: body, bodyHtml, attachments, isRead, folder

[요구사항]
- Phase 1: 기본 메일 조회 (목록 + 본문 + 읽음 표시)
- Phase 2: 발주 메일 특화 기능 (발주서 파싱 결과 연결)
- Phase 3: 고급 기능 (검색, 첨부파일, 메일 작성)

[제약조건]
- 기존 EmailLog 테이블 활용 (새 테이블 최소화)
- 모바일 반응형 대응
- 요금제별 접근 제한: 스타터는 발주메일만, 프로페셔널 이상은 전체 메일함
비교 "만들어줘" 프롬프트 바꾼 프롬프트
역할 부여 없음 "이메일 클라이언트 UI/UX 전문가"
기존 DB 알려줌 없음 EmailLog 테이블 구조 + 추가 필드
단계 구분 없음 Phase 1→2→3
제약조건 없음 기존 테이블 활용, 요금제별 제한
AI가 만든 결과 쓸 수 없는 코드 495줄 구현 계획서
AI가 계획서를 먼저 만든 게 신기했어요. "바로 코드 만들어"가 아니라 "계획부터 세워"라고 한 건 아닌데, Phase를 나눠주니까 자연스럽게 계획서부터 나왔습니다.

피드백 한 마디로 검색이 확 바뀐 순간

1차 결과에서 검색이 메일 제목만 됐어요. 발주 메일은 보낸 사람 이름으로 찾는 경우가 더 많은데.

검색이 제목만 됩니다.
보낸 사람과 본문 텍스트도 검색되게 해주세요.
본문 검색은 성능을 고려해서 방법을 제안해주세요.

이 피드백 한 번으로:

  • 제목 + 보낸 사람 + 본문 3개 필드 동시 검색

  • 날짜 범위 필터

  • 읽음/안읽음 필터

  • 발주 메일만 보기 필터


전부 추가됐습니다. "성능을 고려해서 방법을 제안해주세요"라고 한 마디 넣었을 뿐인데, AI가 알아서 데이터베이스 인덱스 방안까지 제시했어요.

이게 "이런 것도 됩니다"의 핵심이에요. AI한테 "이것도 해줘"가 아니라 "이게 안 되는데, 너는 어떻게 하겠어?"라고 물으면 내가 생각 못 한 방법까지 나옵니다.

첨부파일 — "느려요"라는 피드백이 구조를 바꿨다

첨부파일이 느렸어요. 메일을 열 때 첨부파일까지 한꺼번에 불러오니까, 파일이 큰 메일은 화면 로딩이 몇 초씩 걸렸습니다.

첨부파일 로딩이 느립니다.
메일 열 때는 파일 이름과 크기만 보여주고,
실제 다운로드는 사용자가 클릭할 때만 해주세요.

이 피드백으로 구조가 바뀌었습니다:

[전] 메일 열기 → 본문 + 첨부파일 한꺼번에 로딩 (느림)
                    ↓
[후] 메일 열기 → 본문만 로딩 (빠름)
     첨부파일 클릭 → 그때 다운로드 (필요할 때만)

비개발자인 저는 "느려요"라고만 말했을 뿐인데, AI가 "온디맨드 다운로드"라는 구조 변경을 해줬어요. 이런 건 제가 스스로 설계할 수 없는 영역이었습니다.

메일 작성까지 — 표 넣기, 서명, 예약 발송

메일 읽기만 되면 불완전하잖아요. 답장도 할 수 있어야 하니까 메일 작성 기능도 시켰습니다:

당신은 리치 텍스트 에디터 전문가입니다.

메일 작성 기능을 만들어주세요.
- 기본 포맷팅 (볼드, 색상, 하이라이트)
- 표 편집 (셀 병합/분할)
- 이미지 삽입 + 크기 조절
- 주소록에서 받는 사람 검색
- 서명 선택

결과로 나온 기능들:

  • 글자 꾸미기, 표 만들기, 이미지 넣기가 되는 에디터

  • 받는 사람 입력하면 주소록에서 자동완성

  • 미리 만든 서명 선택

  • 예약 발송 (날짜/시간 지정)


솔직한 한계점

완벽하진 않았습니다:

  • 표 편집이 까다로웠어요. 셀 병합이나 행 높이 조절 같은 건 AI가 만든 코드가 한 번에 안 됐고, 여러 번 피드백을 주고받았습니다
  • 대용량 메일함에서 성능 테스트를 아직 못 했어요. 메일이 몇천 건 쌓이면 느려질 수 있습니다
  • 결과물이 아웃룩 "수준"이지 아웃룩은 아닙니다. 세세한 UX에서 차이가 있어요

"만들어줘" vs "이 조건에서 만들어줘"

이 경험에서 가장 크게 배운 건:

AI한테 "뭘 만들지"보다 "지금 뭐가 있는지"를 알려주는 게 더 중요하다는 거예요.

"메일함 만들어줘"로는 쓸 수 없는 결과가 나왔는데, "EmailLog 테이블이 이미 있고, 이 필드들이 있고, Phase별로 나눠서 해줘"라고 하니까 495줄짜리 계획서가 나왔거든요.

그리고 피드백도 "안 돼요"보다 "이게 느린데 너는 어떻게 하겠어?"라고 물으면 더 좋은 답이 나왔습니다. 검색 확장도, 첨부파일 구조 변경도 전부 이런 식의 피드백에서 나온 결과였어요.

공유

댓글