02 · PART 2 · CLASS / FIGMA UX·UI

실습 17
프롬프트 비교와 반복 개선

모호한 지시와 구조화된 지시의 결과 차이를 비교하고 2~3회 개선 루프를 기록한다.

진행 중 · 실습지와 검수 기준 준비

대상나정당 인터넷 비교 화면

훈련 초점프롬프트

완료 산출물프롬프트 v0~v3, 결과 비교표, 최종 정제 화면

최종 목표는 화면 이미지를 베끼는 것이 아니라, 위계·여백·반응형·컴포넌트 규칙을 이해하고 편집 가능한 화면으로 직접 재구성하는 것이다.

클론 학습 흐름

참고 화면 고정요소 측정수동 재구성반응형 검사차이와 근거 기록

수행 단계

단계	Figma에서 직접 할 일
나쁜 프롬프트	목적·대상·제약 없이 짧게 요청해 결과의 문제를 찾는다.
좋은 프롬프트	사용자·목표·화면·컴포넌트·반응형·금지 조건을 명시한다.
반복 개선	각 버전에서 한 가지 문제만 고쳐 2~3회 생성한다.
Figma 검수	최종 결과를 레이어·Auto Layout·토큰 기준으로 직접 고친다.

편집 속성과 판단 기준

속성	판단 기준	기록
`Context`	서비스와 대상	□ 확인 전
`Goal`	사용자 행동	□ 확인 전
`Scope`	2~3개 화면	□ 확인 전
`Constraints`	그리드·토큰·접근성	□ 확인 전
`Iteration`	한 번에 한 문제	□ 확인 전

품질 점검 그래프

작업 후 각 항목을 5점으로 자기 평가한다. 현재 막대는 목표 기준이며 실제 점수는 결과물 검수 후 기록한다.

구조 충실도

4/5

편집 가능성

5/5

반응형

4/5

일관성

4/5

접근성

4/5

Figma Make 입력 프롬프트

아래 프롬프트로 동작 초안을 만든 뒤, 시각 규칙과 레이어 구조는 Figma에서 직접 검수한다.

나정당 UX/UI 개선 시안을 3개 화면으로 만들어줘: 인터넷 메인, 요금제 상세, 상담 신청.
대상은 통신 상품을 잘 모르는 사용자다. 목표는 조건을 이해하고 상담 신청을 끝내는 것이다.
정보 순서는 문제 인지→통신사/상품 비교→혜택과 조건 확인→신뢰 근거→상담 행동으로 구성해.
1440px 12열과 390px 4열, 8px spacing, 명확한 H1/H2/Body, 텍스트 대비 4.5:1 이상을 적용해.
버튼·입력·카드·배지는 재사용 가능한 패턴으로 만들고 기본·오류·빈 상태를 포함해.
허위 할인, 자동 선택, 클릭을 강요하는 문구는 사용하지 마.

결과물 기록란

① Figma 결과 링크작업 완료 후 보기 링크와 프레임 이름을 기록한다.

② 전후 비교원본·수정본 이미지와 바꾼 이유를 기록한다.

③ 수치 검증폭, padding, gap, 대비, 컴포넌트 속성을 적는다.

④ 회고재사용할 규칙과 다음에 고칠 한 가지를 적는다.

완료 기준

참고 화면과 수동 편집 결과가 나란히 비교된다.
텍스트·도형·이미지가 편집 가능한 레이어로 정리된다.
Auto Layout과 컴포넌트 사용 이유를 설명할 수 있다.
PC·390px·320px에서 가로 넘침과 읽기 순서를 확인한다.
실제 결과 링크·수치·회고를 채운 뒤 상태를 완료로 바꾼다.

참고

참고 수업 · 실습 안내 또는 참고 화면 · 나정당