화면 디자인 실습
앱 바 컴포넌트 만들기
홈 화면 만들기
리스트 컴포넌트 만들기
목록 화면 만들기
상세 화면 만들기
버튼 컴포넌트는 아래에 고정할 수 있게 오토레이아웃 - 컨테이너로 감싸 주기
로그인 화면 만들기
프로토타입
프로토타입이란?
실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 시제품
왜 만드는가?
‣ 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
‣ 팀원들과 시각적 결과물로 논의할 수 있음
‣ 부족하거나 놓친 부분을 확인할 수 있음
피그마 프로토타입의 구성
프로토타입 패널
프리뷰 모드
단축키 Shift + Space 혹은 재생 버튼 클릭
오버플로우 (Overflow)
프레임 밖으로 컨텐츠가 넘어가는 것
스크롤이 생기게 하려면 컨텐츠가 프레임보다 길어야 함 → 오버플로우가 되어야 함
스크롤 컨테이너
오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능
메인(프레임) - 바디(컨텐츠)이 있으면 메인에 스크롤을 걸어주면 됨
스크롤 방식
‣ No scrolling : 스크롤하지 않음, 기본 값
‣ Horizontal : 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤할 수 있음
‣ Vertical : 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤할 수 있음
‣ Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있음
트리거와 액션
피그마 프로토타입 트리거의 종류
‣ On click: 클릭 또는 탭/터치했을 때 액션을 실행
‣ On drag: 드래그했을 때 액션을 실행
‣ While hovering: 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행, Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과
‣ While pressing: 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행, Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과
‣ Key/Gamepad: 특정 키를 눌렀을 때 액션을 실행
‣ Mouse enter: 커서/마우스가 영역 위에 올라가면 액션을 실행
‣ Mouse leave: 커서/마우스가 영역을 벗어나면 액션을 실행
‣ Mouse down: 커서/마우스가 영역을 누르면 액션을 실행
‣ Mouse up: 커서/마우스가 영역을 눌렀다 떼면 액션을 실행
‣ After delay: 일정 시간이 지난 후에 액션을 실행
피그마 프로토타입 액션의 종류
‣ Navigate to: 페이지(프레임)를 이동하는 액션
‣ Change to: 컴포넌트의 다른 배리언츠로 변경하는 액션, 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있음
‣ Back: 직전 화면으로 이동하는 액션, 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있음
‣ Set variable(유료): 변수를 특정 값으로 설정하는 액션, 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있음
‣ Set variable mode(유료): 변수를 특정 모드로 설정하는 액션, 트리거를 실행하면 변수를 원하는 모드로 설정할 수 있음
‣ Conditional(유료): 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션
‣ Scroll to: 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션
‣ Open link: 특정 URL을 여는 액션, 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있음
‣ Open overlay: 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션, 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용
‣ Swap overlay: 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션
‣ Close overlay: 라이트박스를 닫는 액션
애니메이션
액션을 어떻게 실행할지를 결정, 화면 전환을 어떻게 할 것인지
스마트 애니메이트
피그마 애니메이션에서 중요한 기능
※ 움직일 요소의 이름이 같은지 / 레이어 구조가 동일한지 반드시 확인해야 함
핸드오프
개발자에게 전달하기 위해 디자인 사양을 정리한 문서
일관성 있는 구성, 자세한 설명, 쉬운 언어로 작성
피그마 - DesignDoc 플러그인을 사용해서 쉽게 작성 가능
핸드오프의 구성
‣ 디자인의 전체적인 구조
‣ 각 프레임의 크기 및 길이
‣ 각 프레임의 여백 및 간격
‣ 사용된 폰트 및 컬러 스타일 등
디자인 정리하기
페이지 정리 및 표지 생성
'notes' 카테고리의 다른 글
| [내배캠] 프로덕트 매니지먼트 개론 | ② 프로덕트 개발 (0) | 2026.05.04 |
|---|---|
| [내배캠] 프로덕트 매니지먼트 개론 | ① PM 직무의 이해 (0) | 2026.05.04 |
| [내배캠 베이스캠프] 피그마 기초 완전 정복 | 4주차 (0) | 2026.04.29 |
| [내배캠 베이스캠프] AI Literacy | 생성형 AI와 LLM의 원리 (0) | 2026.04.28 |
| [내배캠 베이스캠프] AI Literacy | AI의 기본 개념 이해 (0) | 2026.04.28 |
