02 · PART 2 · CLASS / UX·UI 실습 19
티스토리 자동화
화면을 연결해 실제로 눌러보는 유저 플로우
실습 17의 디자인을 바탕으로 작성·검수·이력 화면을 Figma Make에서 연결했다. 클릭 검증에서 발견한 오류를 수정하고, Design에서 편집한 여백을 다시 Make에 반영했다.
공개 프로토타입 실행예시 데이터로 작동하는 실습용 앱이다. 실제 티스토리 공개발행과 API 연동은 포함하지 않는다.
① 글쓰기
계정·키워드 → 초안② 검수
원고 확인 → 승인·수정③ 작업 이력
승인 상태 → 다시 보기
계정·키워드 → 초안② 검수
원고 확인 → 승인·수정③ 작업 이력
승인 상태 → 다시 보기
수정 요청 시 원고와 입력값을 보존해 글쓰기로 돌아간다. 검수 승인은 공개 완료와 별도 상태로 표시한다.
Step 1. 플로우의 뼈대 생성
| 화면 | 핵심 행동 | 이어지는 결과 |
|---|---|---|
| 글쓰기·미리보기 | 계정·키워드·유형·이미지 설정, 초안 만들기 | 키워드가 반영된 예시 원고 → 검수 |
| 검수 | 필터·원고 선택·승인·수정 요청 | 승인 → 이력 / 수정 → 글쓰기 |
| 작업 이력 | 승인·미발행 확인, 원고 다시 보기 | 승인 원고 상세 표시, 새 초안 시작 |
첫 요청에는 화면 목록, 이동 규칙, 데이터와 예외 상태를 함께 명시했다. 사용자가 Figma 디자인을 첨부하고 Make에서 최초 생성했다. 첨부 에셋과 실제 요청 기록을 확인했다.
생성 요청 명세 보기
티스토리 블로그 자동화 앱의 클릭 가능한 실습 프로토타입을 만들어줘. 여러 블로그의 원고를 작성·검수하는 운영자가 사용자다. 백메가 상담 RAG 앱이 아니다. 실제 티스토리 연결·로그인·AI API·공개발행은 실행하지 않고 예시 데이터로 동작한다. 화면 위에 ‘실습 프로토타입’을 표시한다. 3개 화면과 연결: 1. 글쓰기·미리보기: 계정(예시 블로그 A/B), 검수 전용 정책, 키워드 입력, 글 유형, 이미지 옵션. ‘초안 만들기’를 누르면 로딩 후 입력 키워드를 반영한 예시 원고를 미리보기로 표시한다. 키워드 공백이면 해당 필드에 오류와 해결 방법을 표시한다. ‘검수로 이동’으로 2번 화면으로 이동한다. 2. 검수: 계정·글 유형·키워드 출처·최소 품질점수 필터, 대기 원고 목록, 선택한 원고의 제목·본문·이미지 확인 영역. ‘수정 요청’은 필수 사유를 입력하고 원고와 계정·키워드를 보존한 채 글쓰기로 돌아간다. ‘선택한 글 승인하기’는 승인 확인 후 3번으로 이동한다. 미선택 시 승인하지 않는다. 3. 작업 이력: 원고 제목·계정·현재 상태·수정 사유·다음 행동. 승인 완료와 공개 완료는 다르며 여기서는 ‘검수 승인 · 미발행’으로 표시한다. ‘원고 다시 보기’와 ‘새 초안 만들기’를 제공한다. 이전 이동 시 작성 내용을 잃지 않는다. 예외: 빈 목록, 키워드 누락, 원고 미선택, 수정 사유 누락, 생성 실패·재시도. 생성 실패는 ‘실습용 실패 재현’ 컨트롤로만 발생시킨다. 재시도 시 입력값을 보존한다. 로딩 중 중복 생성을 막는다. 외부 저장 없이 세션 내 예시 상태만 유지한다. 작업 이력에 실제 발행 URL이나 실제 성과를 만들어 넣지 않는다. 밝은 배경 #F7FAFF, 카드 #FFFFFF, 본문 #172B4D, 주요 버튼 #2563EB, Noto Sans KR. 기본 간격 8/16/24/32px. 헤더·본문·푸터, 명확한 레이블, 키보드 포커스. PC 1200px과 모바일 390px에서 겹침 없이 사용하도록 한다. 기존 탐색 영역 글쓰기·미리보기 / 계정 관리 / 검수 / 임시저장 / 예약 / 이력을 유지하되 이번 범위 밖 메뉴는 ‘실습 범위 밖’ 안내를 표시한다. 빈 버튼이나 가짜 성공을 만들지 않는다. 첨부할 기준은 실습17 Figma 글쓰기 프레임과 검수 프레임이다. 첨부 프레임이 없으면 링크를 읽었다고 주장하지 말고 위 명세로 생성한다. Figma 기준: https://www.figma.com/design/K8ShPnKqxUjI3dE3CDwjkR/?node-id=3-2 및 node-id=3-3.
Step 2. 디자인 첨부 결과 비교
| 기준 | 반영 결과 | 판단 |
|---|---|---|
| 밝은 배경·푸른 주요 버튼 | 동일한 색상 방향으로 생성 | 기존 실습17 디자인과 연결 |
| 작성·검수 중심 구성 | 작성 설정·미리보기·검수 목록·상세 제공 | 정적인 영역을 입력·버튼으로 전환 |
| 여섯 탐색 영역 | 글쓰기·계정 관리·검수·임시저장·예약·이력 유지 | 범위 밖 메뉴는 안내 화면 제공 |
| 디자인 일치 정도 | 주요 정보와 색상은 유지, 레이아웃은 화면 폭에 따라 재배치 | 픽셀 단위 일치율은 측정하지 않음 |
Step 3. Make → Design → Make 왕복 편집
디자인 복사Design 여백 수정프레임 재첨부Make 버전4 반영
| 실제 작업 | 변경 내용 |
|---|---|
| Design 별도 페이지 | 실습 19 · Make 왕복 편집 |
| 외곽 패딩 | 가로·세로 0 → 24px |
| 복사 프레임 크기 보정 | 897×811 → 945×859, 여백을 수용하도록 조정 |
| Make 재반영 | 검수 화면 PC24px / 모바일16px 외곽 패딩 |
| 유지 조건 | 고정 캔버스 크기를 웹 크기로 강제하지 않고, 수정한 조회·필터 기능 보존 |
실제 Design 편집 프레임 · Make 버전·프롬프트 기록
왕복 편집은 외곽 여백을 대상으로 한 제한된 수정이다. 전면적인 시각 디자인 개선이나 전체 컴포넌트 정비를 수행했다고 해석하지 않는다.
Step 4. 상태와 데이터 보완
| 발견한 문제 | 수정 요청 | 확인 결과 |
|---|---|---|
| 승인 원고 다시 보기에서 상세 누락 | 대기 목록 밖 승인 원고도 ID로 조회 | 제목·본문·승인 상태 표시, 중복 승인 버튼 제거 |
| 키워드 출처 필터 누락 | 직접 입력·추천 키워드 필터 추가 | 공개본에 필터·출처 표시 확인 |
| 입력 부족 | 키워드·수정 사유별 인라인 안내 | 공백 입력 오류 메시지 직접 확인 |
| 수정 후 데이터 손실 위험 | 계정·키워드·원고·사유 보존 | 수정 요청 후 글쓰기 화면에서 유지 확인 |
Step 5. 클릭 검증과 공개
| 항목 | 검증 결과 |
|---|---|
| 생성 → 검수 → 승인 → 이력 | Make 미리보기에서 정상 이동 확인 |
| 키워드 누락·생성 중 중복 클릭 | 오류 안내와 생성 버튼 비활성 확인 |
| 수정 사유 누락·수정 요청 복귀 | 오류 표시, 사유 입력 후 기존 데이터 보존 확인 |
| 공개 링크 접근 | Figma 비로그인 브라우저에서 열림 확인 |
| 공개본 승인 → 원고 다시 보기 | 승인 원고 제목·본문·미발행 상태 표시 재확인 |
| 모바일390px·PC1200px 크기별 검사 | 생성 요청에 포함. 이번 기록에서는 실제 크기별 검증 미완료 |
| 실패 재시도·필터 조합 전체 검사 | 구현 요청에 포함. 전체 조합의 실제 검증은 미완료 |
| 다른 사용자 관찰 | 미수행. 강사·동료가 설명 없이 완료 가능한지 후속 확인 |
직접 눌러보는 순서
공개 프로토타입에서 키워드를 입력해 초안을 만든 뒤 검수로 이동한다. 선택한 글을 승인하고 이력에서 다시 열어본다. 다른 예시 원고에는 수정 사유를 입력해 글쓰기로 돌아가며 내용이 유지되는지 확인한다.
이번 산출물은 동작하는 프로토타입과 Design 왕복 편집 기록이다. 실제 운영 앱 코드·계정·발행 작업은 변경하지 않았다.