1. 화면 디자인 실습 (로컬 디자인)
- 홈 화면 만들기:
- 디자인 기준이 되는 1배수 사이즈의 프레임을 생성함. 휴대폰 기종 선택 가능.
- 제품의 가장 상단에서 중요한 메시지를 전달하는 '히어로 섹션(Hero Section)'을 추가하고 화면 크기에 맞게 조정함.
- 목록 화면 만들기:
- 많은 정보를 동일한 구조의 반복적인 패턴으로 보여주는 화면을 구성함.
- 리스트 컴포넌트는 라벨(제목), 설명, Leading Element(앞쪽 요소), Trailing Element(뒤쪽 요소) 등으로 구성됨.
- 상세 및 로그인 화면 만들기:
- 상세 화면은 상품 이미지 영역, 설명, 구매 버튼 등으로 스케치하여 구성함.
- 로그인 화면은 텍스트필드(아이디/비밀번호)와 체크박스(자동 로그인) 컴포넌트 인스턴스를 활용해 배치함.
2. 프로토타입 및 인터랙션 구현
- 프로토타입의 개념:
- 실제 제품을 만들기 전 아이디어를 테스트하기 위한 '시제품' 개념임.
- 흐름을 빠르게 맞추는 낮은 단계(Lo-fi)와 실제 제품과 유사한 높은 단계(Hi-fi)로 구분됨.
- 오버플로우와 스크롤:
- 콘텐츠가 기기 화면(프레임) 밖으로 넘어가는 현상을 '오버플로우(Overflow)'라고 함.
- 스크롤 기능이 작동하기 위해서는 반드시 콘텐츠가 프레임보다 길어 넘쳐야 함.
- 방향성 제어: 프로토타입 패널을 통해 스크롤하지 않음(No scrolling), 가로 스크롤(Horizontal), 세로 스크롤(Vertical), 양방향 스크롤(Both directions) 중 속성을 선택하여 부여함.
- 트리거와 액션 (화면 연결):
- 프로토타입의 흐름: '트리거→ 애니메이션 → 액션' 구조로 설계됨.
- 트리거(Trigger): 액션을 시작하는 조건 (On click, On drag, While hovering 등).
- 액션(Action): 트리거로 인해 나타나는 결과 (Navigate to, Change to, Open overlay 등).
- 스마트 애니메이트: 움직일 요소의 이름이 같고, 레이어가 같을 때 사용 가능.
3. 디자인 핸드오프 및 공유
- 디자인 핸드오프(Hand-off):
- 개발자에게 디자인 의도, 사양, 구체적인 규격을 전달하기 위해 정리한 문서임.
- 작성 시 '통일된 구성', '최대한 자세하게', '쉬운 언어 사용'의 원칙을 지켜야 함.
- 규격 정보를 자동으로 추출해 주는 DesignDoc [Spectral] 플러그인을 활용 추천
- 디자인 정리 및 공유하기:
- 협업 효율을 높이기 위해 페이지 이름을 목적에 맞게 변경(디자인, 키트, 표지 등)하고 컴포넌트를 가지런히 정리함.
- 표지 프레임을 추가하여 디자인 파일의 썸네일(Set as thumbnail)로 지정할 수 있음.
- Share 메뉴를 통해 파일 전체 링크 또는 특정 페이지/프레임의 링크를 복사하여 공유할 수 있음.
피그마를 활용한 디자인 순서를 복기해보자!
[프레임]
↓
[파운데이션] (스타일 정의)
↓
[컴포넌트] ── (오토 레이아웃, 배리언츠/프로퍼티 설정) → [마스터 컴포넌트]
↓
[컴파운드 컴포넌트] ── (마스터들을 오토 레이아웃으로 결합)
↓
[화면] ── (컴포넌트의 [인스턴스]들을 복사해와서 로컬 화면 배치)
↓
[프로토타입] (트리거와 액션으로 화면 및 스크롤 연결)
↓
[애니메이트]