[피그마 강의] 5주차: 홈 화면 만들기

 

5-2) 화면 디자인 실습 - 홈 화면 만들기

• 화면 단위 디자인을 수행하며 필요한 UI 설계하기
• 프로토타입의 개념을 이해하고 피그마에서 프로토타이핑 사용하기

 

홈 화면 만들기

• 1배수 화면이 뭐였지?
  
  • 디자인하기 위한 기준 사이즈로 일반적으로 375*812(아이폰) 또는 360*800(안드로이드)으로 만든다. 
• 프레임 생성하기
• 히어로 섹션 추가하기
  • 메인의 가장 상단 영역을 뜻한다. 

앱 바 컴포넌트 추가하기

• 네비게이션에 해당하는 컴포넌트로, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서 이전 화면으로 돌아갈 수 있도록 해준다. 
• 앱 바 컴포넌트의 구조 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (5)

• 타이틀: 현재 화면의 제목
• 힌트 텍스트: 부가적인 정보
• 리딩 엘리먼트:  뒤로 가기 또는 닫기 아이콘 사용하는 영역
• 트레일링 엘리먼트: 설정이나 더보기 등 현재 화면과 관련된 보조 기능 제공하는 영역

 

• 타이틀이 어색해 보이기 때문에 타이틀 선택하고 -> Resizing 값을 fill로 수정 -> 텍스트 정렬 가운데로

 

• 속성 추가 -> 타이틀에 추가

• 속성 추가 -> 배리언츠 만들고 style 이라는 이름으로 변경
• 추가하여 home이라는 이름 붙여주기 -> 아이콘 삭제 및 변경 + 타이틀 글씨 키우기

 

• 페이지 다시 이동 -> file 옆에 assets 누르기 -> app bar 가져와 상단에 붙여주기 
• app bar의 style은 home 선택 -> home section은 app bar 바로 아래에 붙여주기

 

 

5-3) 화면 디자인 실습 - 목록 화면 만들기

• 프레임 추가 -> 목록 화면 으로 이름 변경 -> 에셋에서 abb bar 추가

 

리스트 컴포넌트 

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트로, 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용한다. 
• 리스트 컴포넌트의 구조에는 라벨/레이블, 디스크립션, 리딩 엘리먼트, 트레일링 엘리먼트 가 있다. 
  • 라벨/테이블: 리스트 제목이자 리스트 이름
  • 디스크립션: 리스트의 보조 설명을 적을 수 있음
  • 리딩 엘리먼트: 리스트 앞쪽에 있는 엘리먼트이며, 아이콘이나 프로필 이미지 등을 넣을 수 있음
  • 트레일링 엘리먼트: 텍스트보다 더 뒤쪽에 있는 엘리먼트

출처: 체계적으로 배우는 피그마 기초 완전 정복 (5)

리스트 컴포넌트 만들기

• 컴포넌트 페이지 -> 텍스트 레이어 만들기 -> '리스트 제목'으로 이름 변경 -> body 16px 변경
• 오토레이아웃 적용 -> List 로 이름 변경 -> 뒤쪽에 아이콘 추가 -> 상하 12, 좌우 20 수정, 안쪽 간격 16 -> 배경색 흰색
• 리스트 제목의 외형(리사이징) 값 fill container 로 변경, 왼쪽 정렬해두기

 

• 보통 썸네일 들어가는 경우가 있기 때문에 40*40 프레임 하나 생성 -> 채우기 회색 100, radius 8 변경
• 리스트 제목 앞에 추가
• 컴포넌트로 만들기

리스트 제목에 텍스트 프로퍼티 적용

• 속성추가 -> 텍스트 -> Title로 이름 변경 -> 텍스트에 프로퍼티 적용하기

 

리스트 컴포넌트 추가하기

• 페이지를 옮겨가서 에셋에 리스트 컴포넌트 꺼내기
• 10개 정도 복사 -> 전부 오토레이아웃으로 감싸기 -> 'List Container'로 이름 변경
• 홈 화면에 5개 정도만 노출되게 복사하기 -> 텍스트 추가 -> '많이 본 상품'으로 변경
• 목록 화면에도 옮겨주기

 

 

5-4) 화면 디자인 실습 - 상세 화면 만들기

• 일반적으로 쇼핑 앱에서 볼 수 있는 화면
• 에셋에 탭도 추가 -> 너비 늘리기 -> 하나씩 선택해서 오토레이아웃의 너비를 fill로 변경
• 목록 화면에도 추가

 

상세 화면 만들기

• 프레임 생성하기 -> '상세 화면'으로 이름 변경
• 앱바 컴포넌트 추가

상세 화면은 일반적으로 큰 제품 썸네일, 정보, 장바구니·구매 버튼이 존재한다. 

• 텍스트 레이아웃 두 개 추가 -> '상품 이름', '상품 상세 설명입니다'로 이름 변경
• 에셋에서 버튼 컴포넌트 하나 추가 -> 아이콘 Off -> 버튼 컴포넌트 오토 레이아웃으로 한 번 더 감싸기 -> 그러면 패딩 값을 입력할 수 있는 데 상하.좌우에 패딩 값 20으로 변경 -> 배경색 흰색으로 -> 프레임 이름은 'Action'으로 변경
• 상세 화면 하단에 좌우 늘려서 버튼 추가

💡오토 레이아웃으로 한 번 더 감싸는 이유는? : 실제 버튼은 화면 하단에 붙어 있다. 이때 패딩 값이 없다면 스크롤 했을 때 뒤에 뭔가 보일 수도 있고, 딸려갈 수 있기도 해서 ++ 고정되어 있는 버튼을 만들기 위해서!

 

 

5-4) 화면 디자인 실습 - 로그인 화면 만들기

• 로그인 화면을 만들어 보면서 텍스트 필드, 체크 박스 활용해보기

 

• 상세 화면 프레임 복사 -> '로그인 화면'으로 이름 변경 -> 앱 바 제외하고 다 지우기
• 에셋에서 텍스트 필드 컴포넌트 가져오기 -> *2 -> 적당히 너비 늘리기
• 앞서 패딩 값이 20인데, 이는 글로벌 마진(안전 여백)임.
• 텍스트 필드 컴포넌트 둘 다 좌우 20 남겨두고 채우기
• 에셋에서 체크 박스 가져오기 -> 텍스트 추가 -> '자동 로그인' 으로 이름 변경 -> body 16
• 체크박스랑 자동로그인 둘이 오토레이아웃으로 묶기 -> 'Auto Login'으로 이름변경 -> 간격은 12로 변경(4배수)

• 에셋에서 버튼 가져오기
• 마찬가지로 늘려줘서 간격 좌우에 20씩으로 맞추기

 

• 완성된 실습