UX/UI 실습 16 · 상담 RAG 티스토리 화면 생성과 개선

02 · PART 2 · CLASS / UX·UI DESIGN

상담 경험 RAG 티스토리
프롬프트로 화면 생성·개선

근거를 찾고, 원고를 검토하고,
발행 상태를 분명하게.

실습 16 · 주요 화면 3개 · 반복 개선 2회

운영 중인 백메가·상담 경험 RAG 티스토리 작성 도구를 대상으로 한 디자인 제안이다. 앱의 기능과 문구를 확인해 제작했으며 앱 코드나 운영 원고는 변경하지 않았다. 아래 화면은 AI가 생성한 HTML/CSS 결과로, 현재 앱의 스크린샷이나 Figma Make 실행 결과가 아니다.

Step 1. 서비스와 플로우 정의

화면	사용자 과제	현재 프로젝트에서 확인한 기능
A · 주제·근거 검색	통신 콘텐츠 주제를 정하고 사용할 전문 사실과 상담 경험을 확인	주제 입력·근거 먼저 검색·경험 콘텐츠 작성
B · 원고 검수	원고·대표이미지·근거·검수 결과를 대조	미리보기·사용 근거·검수 승인·입력 테스트
C · 발행 확인	대상 블로그와 상태를 확인하고 공개 결과를 구분	계정·세션 확인·공개발행·작업 보존

사용자 가정: 여러 티스토리 원고를 운영하면서 근거의 역할, 검수 필요 항목, 발행 여부를 빠르게 구별해야 하는 작성자. 기존 청록색 계열과 카드 방식은 유지하고, 작업 단계와 다음 행동의 위계를 보완한다.

Step 2–3. 모호한 요청과 구체적인 요청 비교

동일한 주제 입력 화면을 A0·A1 두 요청으로 생성했다. A0는 의도적으로 맥락을 생략한 비교용 결과이며 현재 앱의 원본 디자인이 아니다.

A0 · 모호한 요청 결과

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

글쓰기

새로운 콘텐츠를 만들어 보세요.

주제를 입력하세요

생성

생성 결과가 여기에 표시됩니다.

A1 · 구체적인 요청 결과

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

근거를 확인하고 초안을 만드세요

전문 자료와 상담 경험을 구분해 확인합니다.

작성 주제

주제 또는 궁금한 내용

인터넷 재약정과 신규 가입 비교 시 확인할 조건

작성 계정

예시 블로그 A　⌄

근거 먼저 검색경험 콘텐츠 작성

사용할 근거

전문 사실 · 백메가 자료

약정·결합·설치 조건을 비교하는 설명

예시 요약 · 원문 내용 및 최신성 확인 필요

경험·판단 · 비식별 상담

고객 상황에 따라 확인할 항목을 정리한 기록

예시 요약 · 개인식별정보 표시 안 함

프롬프트 원칙	A0에서 부족한 점	A1에 반영한 내용
맥락	일반적인 글 생성만 보임	전문 사실과 상담 경험을 분리
구체성	작성 계정과 검색 과정 누락	계정·주제·검색·초안 생성 기능
시각적 디테일	범용 버튼과 결과 상자	청록·흰색 카드·2패널·글자 규칙

Step 4. 두 번의 반복 개선

버전	검토한 문제	요청한 변경	반영 결과
A1 → A2	32px 버튼과 14px 카드 여백, 다음 행동 문구가 포괄적	44px 버튼·24px 여백·근거 확인 후 생성 문구	조작 영역과 정보 사이 여백 확대
A2 → A3	계정·자료·로그인 상태를 함께 확인하기 어려움	상단 상태 요약·최신성 주의 안내	대상과 준비 상태를 구분하는 정보 추가

A2 · 첫 번째 개선 결과 펼치기

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

근거를 확인하고 초안을 만드세요

전문 자료와 상담 경험을 구분해 확인합니다.

작성 주제

주제 또는 궁금한 내용

인터넷 재약정과 신규 가입 비교 시 확인할 조건

작성 계정

예시 블로그 A　⌄

근거 먼저 검색확인한 근거로 초안 만들기

근거가 없으면 주제를 구체화하거나 자료 연결 상태를 확인하세요.

사용할 근거

전문 사실 · 백메가 자료

약정·결합·설치 조건을 비교하는 설명

예시 요약 · 원문 내용 및 최신성 확인 필요

경험·판단 · 비식별 상담

고객 상황에 따라 확인할 항목을 정리한 기록

예시 요약 · 개인식별정보 표시 안 함

A3 · 최종 주제·근거 검색 화면

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

근거를 확인하고 초안을 만드세요

전문 자료와 상담 경험을 구분해 확인합니다.

작성 대상: 예시 블로그 A
자료 연결: 준비됨 · 로그인: 확인 필요
자료 연결과 티스토리 로그인은 별도 상태입니다.

작성 주제

주제 또는 궁금한 내용

인터넷 재약정과 신규 가입 비교 시 확인할 조건

작성 계정

예시 블로그 A　⌄

근거 먼저 검색확인한 근거로 초안 만들기

근거가 없으면 주제를 구체화하거나 자료 연결 상태를 확인하세요.

사용할 근거

전문 사실 · 백메가 자료

약정·결합·설치 조건을 비교하는 설명

예시 요약 · 원문 내용 및 최신성 확인 필요

경험·판단 · 비식별 상담

고객 상황에 따라 확인할 항목을 정리한 기록

예시 요약 · 개인식별정보 표시 안 함

요금·혜택 등 변동 정보는 최신 공식 안내 확인이 필요합니다.

구현한 수치 변화

아래는 설계 규격 비교이며 사용자 테스트 점수가 아니다.

항목	A1	A2·A3
버튼 최소 높이	32px	44px
카드 내부 여백	14px	24px
모바일 패널	1열	1열 유지, 버튼은 가로폭 확보

Step 5. 나머지 화면 생성

B · 원고 검수

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

원고와 근거를 함께 검토하세요

생성 완료는 공개 발행 완료가 아닙니다.

예시 블로그 A · 예시 원고 · 미발행 / 검수 대기

독자에게 보일 원고

대표이미지 미리보기 영역

재약정과 신규 가입, 무엇을 확인할까?

현재 약정, 결합 조건, 설치 가능 여부를 차례로 비교하는 원고 예시입니다.

본문 구조 보기

도입 → 비교 기준 → 상담에서 확인한 판단 → FAQ → 정리

원고 수정

검수 결과

대표이미지확인 필요

전문 사실·경험 근거대조 필요

변동 요금·개인정보확인 필요

확인할 항목을 검토한 뒤 승인하세요. 이 화면의 상태는 실습 예시입니다.

내부 근거 확인 위치

문장별 근거 요약과 확인 항목을 검토합니다. 실제 상담 원문·식별자는 실습에 포함하지 않았습니다.

검수 승인 · 확인 후 가능

C · 발행 확인

상담 경험 RAG · 티스토리디자인 예시 · 실제 작업 아님

01 주제·근거02 원고 검수03 발행 확인

대상과 원고를 확인한 뒤 발행하세요

공개 전 확인 화면 · 실제 발행 요청은 전송하지 않습니다.

공개할 내용

블로그예시 블로그 A

원고재약정과 신규 가입 비교

검수승인됨 · 예시 상태

로그인확인 필요

로그인을 확인한 뒤 같은 원고로 이어서 진행합니다.

로그인 상태 확인공개 발행 · 현재 불가

발행 상태를 구분합니다

미발행 · 아직 공개 URL이 없습니다.

확인 필요 · 발행 결과가 불확실하면 기존 글부터 확인합니다.

공개 완료 · 저장된 공개 URL과 결과를 확인합니다.

발행 취소·실패 시

취소는 미발행으로 유지합니다. 원고를 보존하고, 기존 공개 URL이 있으면 중복으로 새 글을 만들지 않습니다.

화면별 프롬프트 버전 기록

A는 모호한 요청부터 두 번 개선했다. B·C는 원문의 Step 5에 따라 좋은 요청으로 시작해 각 1회 보완했다. 복사해서 후속 디자인 생성에 사용할 수 있다.

A0 · 모호한 요청

글쓰기 화면을 만들어줘.

A1 · 구체적인 요청

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. 화면 목적은 주제를 입력하고 전문 사실과 상담 경험 근거를 확인하는 것. 왼쪽 주제·작성 계정·근거 먼저 검색·경험 콘텐츠 작성, 오른쪽 두 종류의 근거 카드. 카드 여백 14px, 버튼 높이 32px.

A2 · 개선 1

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. A1의 업무 구조와 두 패널은 유지. 버튼 높이를 44px 이상으로, 카드 여백과 패널 간격을 24px로 늘려줘. 경험 콘텐츠 작성을 확인한 근거로 초안 만들기로 바꾸고, 근거 없음의 해결 안내를 추가해줘.

A3 · 개선 2

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. A2를 유지하고 상단에 선택 블로그·자료 연결·로그인 상태 요약을 추가해줘. 자료 연결과 로그인 상태를 구분하고 변동 요금은 최신 안내 확인 필요로 표시. 근거 검색과 원고 생성 순서가 명확해야 한다.

B1 · 원고 검수

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. 화면 목적: 원고와 근거를 대조해 승인 여부 결정. 왼쪽 미리보기·대표이미지·원고 수정, 오른쪽 검수 항목·내부 근거·승인. 검수 대기와 미발행 표시. 모든 성공 상태를 임의로 표시하지 말 것.

B2 · 검수 보완

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. B1에 검수 결과별 다음 행동을 가까이 배치. 미확인 항목이 있으면 승인 불가 상태로 표현. 생성 완료와 공개 완료를 구분. 검수 항목은 실습용 확인 필요 상태로 표시.

C1 · 발행 확인

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. 목적: 대상 블로그와 승인 원고를 확인한 뒤 공개. 블로그·원고·검수·로그인 표와 공개 발행 버튼, 발행 상태 영역을 구성.

C2 · 발행 보완

서비스 맥락: 전문 자료와 비식별 상담 경험으로 티스토리 원고를 작성하는 운영자용 앱. 색상은 배경 #F4F8F7, 본문 #183B38, 주 버튼 #155F5A, 카드 #FFFFFF. 시스템 한글 글꼴, 제목 24px·본문 15px·보조 13px. PC는 두 패널, 700px 이하에서는 한 열. 실제 상담·계정 데이터 대신 예시만 사용. 문구와 상태를 읽을 수 있는 HTML/CSS 화면으로 생성. 로그인 미확인 예시를 적용하고 로그인 상태 확인이 우선 행동, 공개 발행은 불가 상태로 표현. 취소는 미발행, 결과 불확실은 확인 필요, 공개 URL 확인 후 완료로 구분. 새 원고를 만들지 않고 기존 작업을 보존하는 안내 포함.

재사용 프롬프트 템플릿

[서비스 맥락] 사용자는 {구체적 상황}에서 {업무}를 수행한다. 기존 서비스의 {유지할 특징}을 보존한다. [화면 목적] 핵심 행동은 {하나의 행동}. 필수 정보는 {정보 목록}, 다음 화면은 {목적지}. [레이아웃 & 디자인] PC {패널 구조}, 모바일 {전환 규칙}. 색 {HEX}, 제목/본문/보조 {px}, 여백 {px}, 버튼 최소 높이 {px}. [컴포넌트와 상태] {정상·빈 상태·진행·실패·불가}에서 문구와 다음 행동을 정의한다. [수정 요청] 이전 결과의 {구체적 문제}만 {수치·규칙}로 바꾸고 {유지할 요소}는 유지한다. [검증] 필수 요소 누락·가로 넘침·상태 혼동을 확인한다. 실제 데이터 대신 명시한 예시를 사용한다.

회고와 적용 범위

배운 점	이번 결과	운영 반영 전 확인
맥락이 화면 내용을 결정	근거 역할과 검수·발행 단계가 드러남	운영자가 실제 순서로 이해하는지
수치가 재현성을 높임	버튼·여백·글자 규칙을 공통 적용	설치 앱 해상도와 긴 문구 대응
좋은 프롬프트도 수정이 필요	A1에 빠진 상태를 A3에서 보완	실제 로그인·검수 판정과 연결
디자인 개선과 성과 구분	3개 화면과 버전별 변경 기록 완성	작업 시간·오발행·혼동 감소는 미측정

실습 화면의 버튼은 디자인 표시이며 실제 검색·승인·발행을 실행하지 않는다. 펼침 항목은 설명과 근거 확인 위치를 시험할 수 있다. 현재 화면 변경의 효과는 제안 단계이며 사용자 검증 후 앱에 적용한다.

실습 16 요구사항 원문 · 교육과정으로 돌아가기