Figma로 그리는 감성 프로토타입
세션 소개
서비스 아이디어를 화면 구조와 인터랙션으로 설명하는 4주 기획·디자인 입문 세션입니다. 사용자 흐름과 와이어프레임에서 시작해 Auto Layout, 컴포넌트와 Variants, 인터랙티브 프로토타입을 순서대로 적용합니다.
마지막 주에는 핵심 사용자 흐름을 시연하고 개발자가 확인해야 할 간격, 상태, 에셋과 주석을 정리합니다.
이런 분께 추천합니다
- 디자인 경험은 없지만 아이디어를 화면으로 설명하고 싶은 분
- Auto Layout과 컴포넌트를 기준 있게 사용하는 방법이 궁금한 분
- 클릭 가능한 프로토타입으로 사용자 흐름을 검증하고 싶은 분
- 개발자와 화면 상태와 규칙을 명확하게 공유하고 싶은 분
커리큘럼
| 주차 | 주제 | 내용 |
|---|---|---|
| 1주차 | 사용자 흐름과 Auto Layout | 하나의 핵심 과업을 사용자 흐름으로 정리하고 저충실도 와이어프레임을 만듭니다. Frame과 Auto Layout의 방향, 간격, 패딩, 크기 동작을 적용합니다. |
| 2주차 | 컴포넌트와 Variants | 버튼, 입력, 카드의 반복 요소를 컴포넌트로 만들고 상태와 크기를 Variant 속성으로 나눕니다. 인스턴스를 교체해도 일관성이 유지되는지 확인합니다. |
| 3주차 | 프로토타입과 사용성 확인 | 화면 전환과 오버레이를 연결하고 hover, pressed 같은 상태를 인터랙티브 컴포넌트로 표현합니다. 다른 참여자가 과업을 수행하는 모습을 관찰해 막히는 지점을 기록합니다. |
| 4주차 | 하이파이 화면과 핸드오프 | 테스트 결과를 반영해 핵심 화면을 정리합니다. 상태별 화면, 간격, 타이포그래피, 에셋과 구현 주석을 준비하고 개발자 관점에서 파일을 점검합니다. |
진행 방식
- 하나의 서비스 아이디어와 핵심 사용자 흐름을 4주 동안 이어서 발전시킵니다.
- 세션에서는 기능 설명 뒤 각자 파일에 바로 적용하고 서로의 구조를 검토합니다.
- 결정한 컴포넌트 이름과 화면 상태는 Figma 파일 안에 주석으로 남깁니다.
- 마지막 주에는 프로토타입 시연과 개발 핸드오프 점검을 진행합니다.
준비 사항
- 노트북과 Figma 계정
- 화면으로 설명해 보고 싶은 서비스 아이디어 한 가지
- 참고할 앱 또는 웹 서비스 화면 2\~3개