02 · PART 2 · CLASS / UX·UI 실습 17
티스토리 자동화 앱
AI 와이어프레임에서 Figma 정교화까지
여러 블로그를 운영하는 작성자가 대상 계정을 확인하고, 원고를 생성·검수하는 두 화면을 설계했다. 실습의 가상 서비스 대신 현재 사용 중인 티스토리 블로그 자동화 앱에 적용했다.
결과물: AI 초안 2개 + Figma 정교화 화면 2개 + 프롬프트·편집 기록① 과업·필수 요소② AI 초안③ Figma 영역 분리④ 정렬·Auto Layout⑤ 두 번째 화면 확장
Figma 글쓰기 화면 열기 · Figma 검수 화면 열기
Step 1. 화면의 목적과 필수 요소
| 화면 | 사용자 과업 | 보존할 정보·행동 |
|---|---|---|
| 글쓰기·미리보기 | 대상 계정과 키워드를 확인하고 초안 생성 | 계정 정책, 키워드, 글 유형, 이미지 설정, 미리보기 |
| 검수 | 대기 원고를 읽고 승인·수정 요청 | 계정·유형·출처·품질 필터, 목록, 원고 확인, 승인, 수정 요청, 새로고침 |
현재 UI 소스의 여섯 탐색 영역(글쓰기·미리보기, 계정 관리, 검수, 임시저장, 예약, 이력)을 기준으로 했다. 이번 결과는 화면 구조 제안이며 운영 앱에 적용한 결과나 사용성 측정 결과는 아니다.
Step 2. AI 생성 프롬프트와 초안
AI가 프롬프트에 따라 SVG 초안을 생성했다. Stitch 또는 Figma Make를 사용했다고 기록하지 않는다. 최초 초안은 Figma 아래쪽에 별도 보관했다.
글쓰기·미리보기 프롬프트
최초 생성 프롬프트 보기
티스토리 블로그 자동화 앱의 글쓰기·미리보기 메인 화면을 생성해줘. 여러 블로그를 운영하는 사용자가 대상 계정과 키워드를 확인하고 글을 생성해 미리보는 화면이다. 백메가 RAG 앱이 아니다. 기존 탐색은 글쓰기·미리보기, 계정 관리, 검수, 임시저장, 예약, 이력이다. 왼쪽 미리보기, 오른쪽 작성 계정·키워드·글 유형·이미지 설정과 생성 버튼을 둔다. 현재 작업 상태와 계정 정책을 표시한다. 헤더·본문·푸터 영역을 구분하고 예시 데이터만 사용한다. 1200px 폭, 밝은 배경, 8px 기반 간격, 실제 한국어 문구를 적용한다. 생성은 공개 완료가 아니다. 실제 자동화는 실행하지 않는다.
검수 프롬프트
최초 생성 프롬프트 보기
같은 티스토리 자동화 앱의 검수 화면을 생성해줘. 목적은 대기 원고를 확인하고 선택 승인 또는 수정 요청하는 것이다. 계정·글 유형·키워드 출처·최소 품질점수 필터, 검수 대기 목록, 글 미리보기와 선택 일괄 승인·수정 요청·새로고침을 유지한다. 예시 원고의 선택 상태와 미발행 상태를 명시한다. 공개발행을 검수 승인과 같은 결과로 표시하지 않는다. 공통 헤더·탐색·푸터와 밝은 색상 규칙을 사용한다. 반복 원고 행, 필터, 버튼을 Figma에서 Auto Layout으로 정리할 수 있는 구조로 생성한다.
정교화 요청
두 초안의 기능과 여섯 탐색 영역을 유지한다. Header / Content / Footer로 나누고 관련 요소를 Auto Layout으로 묶는다. 외곽·패널 패딩 24px, 주요 패널 간격 24px, 내부 간격 16px을 사용한다. 빈 미리보기에는 시작 방법을 안내한다. 검수 목록과 선택 원고를 분리하고 승인과 공개 완료를 구별한다. 실제 한국어 문구로 잘림을 확인한다.
Step 3·4. Figma에서 구조와 간격 다듬기
| 항목 | AI 초안 | Figma 정교화 |
|---|---|---|
| 영역 구조 | 고정 좌표 중심 SVG | Header / Content / Footer Auto Layout 프레임 |
| 미리보기 | 단순 영역 표시 | 원고가 없는 이유와 다음 행동 안내 |
| 작성 설정 | 설정값을 나열 | 항목명과 값을 분리하고 생성 버튼 강조 |
| 검수 | 목록·미리보기 영역 표시 | 선택 원고, 확인 항목, 승인·수정 행동 배치 |
| 간격 | 좌표로 간격 표현 | 24px 패널 패딩·간격 / 내부 16px 간격 |
| 상태 | 미발행 안내 | 선택·검수 대기·승인·공개 완료의 의미 구분 |
밝은 배경·푸른 주요 버튼·Noto Sans KR은 이번 프로젝트의 선택값이다. 버튼 세로 패딩 12px은 작은 간격 보정값으로 사용했다. 모든 치수를 8의 배수라고 주장하지 않는다.
글쓰기·미리보기 정교화 결과
Step 5. 검수 정교화 결과
검증 기록과 다음 단계
| 확인 항목 | 결과 |
|---|---|
| 화면 수 | AI 초안 2개 / Figma 정교화 2개 |
| Auto Layout | 글쓰기 내부 11개 / 검수 내부 13개 프레임 확인 |
| 영역·글꼴 | Header·Content·Footer / Noto Sans KR 확인 |
| 1200px 화면 | 수평 영역 넘침 검사와 이미지 육안 확인 |
| 아직 검증하지 않은 항목 | 실제 운영 앱 적용, 클릭 동작, 작은 창 대응, 사용자 작업 시간 |
| 다음 단계 | 사용자가 두 화면을 검토한 뒤 실제 입력·선택 컴포넌트와 반응형을 설계하고 앱에 연결 |
이번 비교는 AI 초안 → Figma 정교화의 차이다. 기존 운영 앱과의 성과 비교가 아니다. 재사용 디자인 규칙에도 원본·제안·검증 결과를 구분하도록 반영했다.