와이어프레임 / 35-화면설계 / wireframes / 화면-00 공통(이메일 템플릿)

화면 00 · 공통 이메일 템플릿 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page "00. 공통" (node 3567:3464) · 허브 노트: 화면-00-공통.md
구현 근거: arwen_api/core/.../templates/mail/(ko·en) · 발송 작업 EmailJobService.kt
5개 메일 종류 · 14개 카드 · 폰이 아니라 이메일 본문 카드로 표현(메일함에서 보는 안내문) · 메일 간 이동이 없어 클릭 연결은 최소

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 요소·동작·데이터·규칙·상태 유형 태그

00_01 · 이메일 인증

가입 직후, 이메일 주소가 본인 것인지 확인을 요청한다. 본문 아래 "이메일 인증하기" 버튼을 누르면 인증이 완료된다. ko·en 두 화면을 따로 그린다.

이메일 인증 · 한국어(ko)

이메일 인증 2

3
4
이메일 인증하기 5

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved. 6

  • 주석 · 이메일 인증 (한국어)
  • 1요소상단 logo 인스턴스로 "ORULI.ai" 브랜드 로고. 근거: [[컴포넌트-아이콘로고]].
  • 2요소제목 텍스트. 가입한 이메일 주소가 본인 것인지 확인 요청.
  • 3요소graphic 영역의 2D 그림 = 메일 봉투 아이콘(인증·비밀번호 찾기 공통).
  • 4요소본문 안내 문구(contents). 버튼을 누르면 인증이 완료된다는 설명.
  • 5동작"이메일 인증하기" 버튼(button/contents-btn). 누르면 인증 처리 → 가입 완료(앱, 이 화면군 밖). 근거: [[컴포넌트-버튼]].
  • 6요소하단 저작권: "Oruli · Copyright © 2026, Oruli.ai All Rights Reserved." (모든 메일 공통).
  • ·규칙[[회원가입-여정]]의 인증 단계에서 발송. 사용자는 앱이 아니라 메일함에서 본다.
  • ·데이터발송 작업 [[EmailJob]] → 대기열 [[email-queue]] → 전송 [[SMTP-메일-연동]]. 발송 서비스 [[AuthEmailService]]. 템플릿 templates/mail/ko/oruli-email-verification-ko.html.
이메일 인증 · 영어(en)

Verify your email

Verify email

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태같은 메일의 영어(en) 화면. 문구가 영어로 바뀌고 그에 맞춰 박스 높이가 달라진다. 템플릿 templates/mail/en/.
  • ·규칙한 메일당 ko·en 화면을 따로 그린다(다국어). 근거: 노트 "다국어 처리 방식".

00_02 · 비밀번호 찾기

비밀번호를 잊은 사용자에게 재설정을 위한 이메일 인증을 요청한다. 버튼을 눌러 인증한 뒤 새 비밀번호를 설정한다.

비밀번호 찾기 · 한국어(ko)

비밀번호 찾기 2

3
4
5

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved. 6

  • 주석 · 비밀번호 찾기 (한국어)
  • 1요소상단 logo 인스턴스로 "ORULI.ai" 브랜드 로고.
  • 2요소제목 텍스트. 재설정을 위한 이메일 인증 요청.
  • 3요소graphic 영역 = 메일 봉투 아이콘(이메일 인증과 동일 그래픽).
  • 4요소본문 안내 문구. 버튼을 눌러 인증한 뒤 새 비밀번호를 설정한다는 설명.
  • 5동작인증 버튼(button/contents-btn). 누르면 이메일 인증 → 새 비밀번호 설정 화면(앱, 이 화면군 밖). 버튼 문구는 KB에 명시 없음 → needs-verification(코드 템플릿 확인 필요).
  • 6요소하단 저작권(공통).
  • ·규칙비밀번호를 잊은 사용자에게 발송. [[회원가입-여정]]에 속한다.
  • ·데이터발송 서비스 [[AuthEmailService]]. [[EmailJob]] → [[email-queue]] → [[SMTP-메일-연동]]. 템플릿 templates/mail/ko/.
비밀번호 찾기 · 영어(en)

Reset your password

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태같은 메일의 영어(en) 화면. 문구·박스 높이가 달라진다. 템플릿 templates/mail/en/.

00_03 · 결제 완료

결제가 정상 처리되었음을 알린다. 본문 아래 결제 내역 표가 들어간다. 멤버십은 플랜·결제 금액·결제일, 크레딧은 충전 크레딧·결제 금액·결제일을 보여준다. 두 메일 모두 "서비스 바로 이용하기" 버튼을 둔다.

결제 완료 · 멤버십 · 한국어(ko)

결제 완료 2

3
4
플랜 5
결제 금액
결제일
서비스 바로 이용하기 6

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • 주석 · 결제 완료 · 멤버십 (한국어)
  • 1요소상단 logo 인스턴스.
  • 2요소제목 텍스트. 결제가 정상 처리되었음을 알린다.
  • 3요소graphic 영역 = 카드 위 체크 그림(결제 완료).
  • 4요소본문 안내 문구.
  • 5요소결제 내역 표(row 안 여러 col). 멤버십은 플랜·결제 금액·결제일을 두 열로 보여준다. 상품 개념: [[멤버십]].
  • 6동작"서비스 바로 이용하기" 버튼(button/contents-btn) → 앱(이 화면군 밖).
  • ·규칙[[결제-구독-여정]]의 결제 직후 단계에서 발송. 결제 자체는 [[PortOne-연동]]이 처리한다.
  • ·데이터발송 작업 [[EmailJob]] → [[email-queue]] → [[SMTP-메일-연동]].
결제 완료 · 멤버십 · 영어(en)

Payment complete

Plan
Amount
Date
Go to Oruli

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태멤버십 결제 완료의 영어(en) 화면. 표 구성은 동일, 문구만 영어. 템플릿 templates/mail/en/.
결제 완료 · 크레딧 · 한국어(ko)

충전 완료

충전 크레딧
결제 금액
결제일
서비스 바로 이용하기

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태크레딧 충전 완료 화면. 멤버십과 달리 표 첫 행이 충전 크레딧(플랜 대신), 이어 결제 금액·결제일. 상품 개념: [[크레딧]].
결제 완료 · 크레딧 · 영어(en)

Credits added

Credits
Amount
Date
Go to Oruli

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태크레딧 충전 완료의 영어(en) 화면.

00_04 · 결제 실패

결제가 처리되지 않았음을 알린다. 결제 수단을 확인해 다시 시도하라고 안내하고, 그래도 안 되면 고객센터로 문의하라고 덧붙인다. 본문 아래 결제 내역 표를 두고 "다시 결제하기" 버튼으로 재시도를 유도한다.

결제 실패 · 멤버십 · 한국어(ko)

결제 실패 2

3
4
플랜 5
결제 금액
결제일
다시 결제하기 6

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • 주석 · 결제 실패 · 멤버십 (한국어)
  • 1요소상단 logo 인스턴스.
  • 2요소제목 텍스트. 결제가 처리되지 않았음을 알린다.
  • 3요소graphic 영역 = 카드 위 X 그림(결제 실패).
  • 4요소본문 안내. 결제 수단 확인 후 재시도, 그래도 안 되면 고객센터 문의 안내.
  • 5요소결제 내역 표(row/col). 멤버십은 플랜·결제 금액·결제일.
  • 6동작"다시 결제하기" 버튼(button/contents-btn) → 재시도(앱, 이 화면군 밖). 결제 처리 [[PortOne-연동]].
  • ·규칙[[결제-구독-여정]]의 결제 실패 시 발송.
  • ·데이터발송 작업 [[EmailJob]] → [[email-queue]] → [[SMTP-메일-연동]].
결제 실패 · 멤버십 · 영어(en)

Payment failed

Plan
Amount
Date
Retry payment

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태멤버십 결제 실패의 영어(en) 화면.
결제 실패 · 크레딧 · 한국어(ko)

충전 실패

충전 크레딧
결제 금액
결제일
다시 결제하기

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태크레딧 충전 실패 화면. 표 첫 행이 충전 크레딧으로 바뀐다. 상품 개념: [[크레딧]].
결제 실패 · 크레딧 · 영어(en)

Charge failed

Credits
Amount
Date
Retry payment

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태크레딧 충전 실패의 영어(en) 화면.

00_05 · 멤버십 정기 결제 3일 전 안내

정기 결제일이 3일 남았음을 미리 알린다. 등록된 결제 수단으로 자동 청구되니 잔액과 카드 정보를 확인하라고 안내한다. 플랜·결제 예정일·갱신 금액을 표로 보여준다. 이 메일에는 행동 버튼이 없다.

정기 결제 3일 전 · 한국어(ko)

정기 결제 안내 2

3
4
플랜 5
결제 예정일
갱신 금액

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved. 6

  • 주석 · 정기 결제 3일 전 안내 (한국어)
  • 1요소상단 logo 인스턴스.
  • 2요소제목 텍스트. 정기 결제일이 3일 남았음을 미리 알린다.
  • 3요소graphic 영역 = 체크 그림(정기 결제 안내).
  • 4요소본문 안내. 등록된 결제 수단으로 자동 청구되니 잔액·카드 정보를 확인하라는 설명.
  • 5요소결제 예정 정보 표(row/col). 플랜·결제 예정일·갱신 금액을 보여준다. 상품 개념: [[멤버십]].
  • 6요소하단 저작권(공통).
  • ·규칙이 메일에는 행동 버튼이 없다(안내 전용).
  • ·데이터발송 작업 [[MembershipExpireNotifyJob]]. 정기결제 자체는 [[SubscriptionRenewJob]]이 처리한다. [[결제-구독-여정]] 소속.
정기 결제 3일 전 · 영어(en)

Renewal reminder

Plan
Renewal date
Amount

Oruli
Copyright © 2026, Oruli.ai All Rights Reserved.

  • ·상태정기 결제 3일 전 안내의 영어(en) 화면. 표 구성 동일, 버튼 없음. 템플릿 templates/mail/en/.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 단, 이 화면군은 앱 화면이 아니라 이메일 본문이라 메일끼리 이동이 없다(각 카드 독립). 메일의 행동 버튼은 앱으로 들어가는 이동이라 이 화면군 밖으로 두었다. 번호 주석은 곧 ②화면설계 단계의 실질(요소·발송 계기·발송 작업·정책)이다. 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-00-공통.md의 wireframe: 필드가 이 파일을 가리킨다.