02 · PART 2 · CLASS / FIGMA UX·UI

실습 19
Figma Make 클릭 흐름

완성한 디자인을 바탕으로 요금제 비교→상담 신청의 클릭 흐름을 검증한다.

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

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

훈련 초점프로토타입

완료 산출물클릭 가능한 2~3개 화면, 공개 링크, 관찰 기록

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

클론 학습 흐름

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

수행 단계

단계	Figma에서 직접 할 일
디자인 연결	Figma에서 정제한 2~3개 화면을 Make 입력으로 연결한다.
핵심 흐름	요금제 선택→상세 확인→상담 신청→완료를 구현한다.
예외 상태	필수값 누락과 네트워크 오류 메시지를 추가한다.
사용성 확인	공개 링크를 다른 사람이 사용하고 막힌 지점을 관찰해 기록한다.

편집 속성과 판단 기준

속성	판단 기준	기록
`Start`	인터넷 메인	□ 확인 전
`Decision`	요금제 선택	□ 확인 전
`Action`	상담 정보 입력	□ 확인 전
`Exception`	누락·오류	□ 확인 전
`End`	접수 완료	□ 확인 전

품질 점검 그래프

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

구조 충실도

4/5

편집 가능성

5/5

반응형

4/5

일관성

4/5

접근성

4/5

Figma Make 입력 프롬프트

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

첨부한 나정당 디자인을 이용해 클릭 가능한 상담 퍼널을 만들어줘.
흐름: 인터넷 메인→통신사와 요금제 선택→상세 조건 확인→상담 정보 입력→동의 확인→접수 완료.
각 단계에 이전/다음 이동을 제공하고 선택 전에는 다음 버튼을 비활성화해.
필수값 누락, 개인정보 동의 누락, 네트워크 오류 상태와 복구 행동을 구현해.
모바일 390px을 우선하고 PC에서도 카드와 폼이 읽기 쉽게 확장되게 해.
사용자가 선택한 통신사·요금제·월 예상 비용을 마지막 화면에서 다시 확인할 수 있게 해.

결과물 기록란

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

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

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

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

완료 기준

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

참고

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