블로그에 붙일 뉴스레터 구독 위젯을 설계해 줘

## 역할과 목표

너는 Figma에서 바로 구현할 수 있는 블로그용 뉴스레터 구독 위젯을 설계하는 UI 디자이너다. 블로그 방문자가 뉴스레터 구독 의사를 입력하고 제출하는 흐름을 한눈에 이해하도록, 데스크톱과 모바일에서 사용할 수 있는 위젯 구조를 만들어라.

산출물은 위젯의 프레임 계층, 오토레이아웃 설정, 구성요소, 상태별 동작, 디자인 토큰을 포함한 설계안이어야 한다. 완료 기준은 구현자가 각 프레임의 방향·정렬·간격·리사이즈 규칙과 입력·성공·오류 상태를 추가 해석 없이 확인할 수 있는 것이다.

## 범위와 전제

다루는 범위는 블로그 본문 또는 블로그 레이아웃에 삽입되는 뉴스레터 구독 위젯의 구조와 UI 상태다. 위젯에는 제목, 설명, 이메일 입력, 구독 CTA, 개인정보 또는 수신 동의 안내가 필요한지 판단할 영역을 포함하라.

다음 값은 제공되지 않았으므로 임의로 정하지 마라.

- 위젯이 삽입될 데스크톱·모바일 콘텐츠 폭: `[입력 필요: 블로그 콘텐츠 폭]`
- 브랜드 색상·서체·로고: `[입력 필요: 브랜드 디자인 정보]`
- 뉴스레터 구독 처리 방식: `[입력 필요: 구독 연동 방식]`
- 성공·실패 메시지: `[입력 필요: 상태별 문구]`
- 개인정보 처리방침 링크: `[입력 필요: 링크 또는 미제공 여부]`

위 슬롯은 블로그의 실제 콘텐츠 폭, 브랜드 가이드, 구독 서비스 또는 API의 처리 결과, 운영자가 확정한 문구와 링크로 채워라. 특히 이메일 수집 여부, 동의 문구, 개인정보 처리방침 링크를 디자인 편의를 위해 지어내지 마라.

위젯 내부의 실제 구독 데이터 처리, 메일 발송 시스템, 서버 연동 코드는 설계 범위에 포함하지 않는다. 다만 디자인에서 필요한 상태와 연동 결과 표시는 지정하라.

## 작업 규칙

1. 먼저 블로그의 일반 콘텐츠 흐름을 방해하지 않으면서 구독 위젯이 독립된 정보 블록으로 인식되도록 설계하라. 위젯이 본문 중간에 삽입되는 경우와 사이드바에 배치되는 경우의 차이가 확인되지 않으면, 두 배치 중 어느 쪽을 전제로 했는지 `[입력 필요: 위젯 배치 위치]`로 남겨라.
2. 브랜드 정보가 제공되면 해당 색상·서체·로고를 사용하라. 제공되지 않으면 특정 브랜드 색상이나 서체명을 발명하지 말고 디자인 토큰을 `[입력 필요: 색상]`, `[입력 필요: 서체]`처럼 남겨라.
3. 구독 행동의 우선순위를 분명히 하되, 실제 혜택·발송 빈도·콘텐츠 종류를 입력받지 않았다면 문구에 추가하지 마라. 해당 정보가 필요하면 `[입력 필요: 구독 가치 제안]`으로 표시하라.
4. 이메일 입력이 필수인지 여부는 연동 요구사항으로 확인하라. 필수 여부가 확정되지 않은 상태에서는 필수라고 단정하지 말고 `[입력 필요: 필수 입력 여부]`로 남겨라.
5. 상태를 다음처럼 분기하라.
   - 초기 상태: 제목, 설명, 이메일 입력, CTA를 표시한다.
   - 입력 오류 상태: 이메일 형식이 유효하지 않을 때 오류 메시지와 오류 시각 표현을 표시한다. 실제 오류 문구는 `[입력 필요: 입력 오류 문구]`로 남긴다.
   - 제출 중 상태: 중복 제출을 막고 로딩 표시를 제공한다. 로딩 방식이 확정되지 않으면 `[입력 필요: 로딩 표현]`으로 표시한다.
   - 성공 상태: 구독 처리 완료를 알리고 후속 안내가 있으면 표시한다. 성공 여부와 문구는 `[입력 필요: 성공 처리 결과]`로 남긴다.
   - 서버 또는 연동 실패 상태: 재시도 방법을 안내하되, 재시도 가능 여부는 `[입력 필요: 실패 시 재시도 정책]`으로 남긴다.
6. 키보드만으로 입력 필드와 CTA에 접근하고, 포커스 순서가 제목·설명·입력·CTA의 시각적 흐름과 어긋나지 않게 하라. 스크린리더용 라벨, 오류 연결 방식, 버튼의 동작 설명을 설계 항목으로 포함하라.
7. 한국어 텍스트를 기준으로 줄바꿈을 설계하라. 어절이 부자연스럽게 끊기지 않도록 `word-break`와 `line-break` 처리 요구를 적고, 본문 행간은 라틴 문자 기본값보다 넉넉하게 설정하라.
8. 위젯의 모든 상태에서 입력 필드와 CTA의 식별 가능성, 충분한 색 대비, 터치 가능한 영역을 유지하라. 실제 색상 대비값은 색상 토큰이 확정된 뒤 검증하도록 `[입력 필요: 접근성 검증 기준값]`으로 남겨라.

## 산출물 구조

다음 순서로 설계안을 작성하라.

1. **화면 목록**
   - 데스크톱 본문 삽입형
   - 모바일 본문 삽입형
   - 배치가 확정되지 않았으면 사이드바형을 별도 변형으로 제시
   - 각 화면의 사용 맥락과 기준 콘텐츠 폭을 적고, 미확정 값은 슬롯으로 남긴다.

2. **화면별 구성요소**
   각 화면에 대해 다음 프레임 계층을 명시하라.
   - 최상위 `NewsletterWidget` 프레임
   - 콘텐츠 래퍼
   - 제목 및 설명 텍스트 그룹
   - 이메일 입력 그룹
   - CTA 버튼
   - 동의·개인정보 안내 영역
   - 상태 메시지 영역

   각 프레임마다 오토레이아웃 방향, 정렬, 내부 패딩, 요소 간 간격, 고정·가변 너비, 높이 조정 방식, 텍스트 줄바꿈과 리사이즈 규칙을 서술하라. 값이 제공되지 않은 간격·크기·색상은 임의의 수치로 채우지 말고 `[입력 필요: 디자인 토큰]`으로 남겨라.

3. **상태별 동작**
   초기, 입력 오류, 제출 중, 성공, 연동 실패 상태를 표로 정리하라. 표의 열은 상태명, 화면 변화, 사용자 행동, 접근성 안내, 필요한 연동 정보로 구성한다.

4. **디자인 토큰**
   색, 타이포그래피, 간격, 모서리, 테두리, 포커스 표시, 버튼 높이와 터치 영역을 표로 제시하라. 각 토큰에는 값, 적용 위치, 확정 상태를 적고, 확정되지 않은 값은 `[입력 필요: 토큰 값]`으로 표시하라.

5. **구현 메모**
   Figma 컴포넌트와 변형 이름, 반응형 리사이즈 규칙, 개발 전달 시 확인할 연동·접근성 항목을 짧게 정리하라.

## 문체 규칙

전체 산출물은 hybrid 문체로 작성하라. 프레임 계층, 토큰, 상태, 치수, 오토레이아웃 설정은 표와 번호 목록 중심의 개조식으로 제시하라. 위젯의 사용 맥락, 화면 배치 의도, 상태 전환 설명은 짧은 서술형 문단으로 작성하라. 문체는 명확하고 친근하게 유지하되, “간단하고 세련된”, “사용자 경험을 극대화하는”처럼 구체적 기준이 없는 홍보성 클리셰는 사용하지 마라.

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

1. 산출물이 블로그용 뉴스레터 구독 위젯 설계에 집중되어 있으며, 메일 발송 코드나 서버 구현으로 범위를 벗어나지 않았는지 확인하라.
2. 최상위 프레임부터 입력 필드와 CTA까지 프레임 계층이 빠짐없이 연결되어 있는지 확인하라.
3. 각 화면에 오토레이아웃 방향·정렬·간격·리사이즈 규칙이 모두 적혀 있는지 확인하라.
4. 데스크톱과 모바일 화면의 차이와 반응형 처리 방식이 구분되어 있는지 확인하라.
5. 초기·입력 오류·제출 중·성공·연동 실패 상태가 모두 포함되어 있는지 확인하라.
6. 키보드 조작, 스크린리더 라벨, 포커스, 한국어 줄바꿈 처리 요구가 빠지지 않았는지 확인하라.
7. 브랜드 색상, 서체, 콘텐츠 폭, 성공 문구처럼 입력에 없던 사실을 추가하지 않았는지 확인하라.
8. `[입력 필요: 브랜드 디자인 정보]`, `[입력 필요: 구독 연동 방식]` 등 슬롯을 임의의 값으로 채우지 않았는지 확인하라.
9. 이메일 수집, 동의 문구, 개인정보 처리방침 링크를 실제 요구사항 없이 확정하지 않았는지 확인하라.
10. 표·목록은 개조식으로, 배치 의도와 상태 전환 설명은 서술형으로 작성해 hybrid 경계를 지켰는지 확인하라.