피그마 기초 완전 정복 - 화면 디자인 (목록 화면, 상세화면, 로그인 화면 만들기 편)

1. 오늘 학습 키워드

- 화면 디자인

- 목록 화면 만들기

- 상세 화면 만들기

- 로그인 화면 만들기

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<목록 화면 만들기>

1. 홈 화면과 동일한 사이즈의 프레임 생성하기
- 프레임 이름을 '목록 화면'으로 변경하기

 

2. 앱 바 컴포넌트 삽입하기

- 상단 모서리에 맞춰주기

 

 

 

리스트 컴포넌트

- 컨테이너에 해당하는 컴포넌트

- 동일한 형태의 정보를 반복적으로 보여줄 때 사용하는 컴포넌트

 

 

리스트 컴포넌트의 구조

 

1. 라벨/레이블(Label)

- 리스트의 제목, 리스트의 이름

 

2. 디스크립션(Description)

- 리스트의 보조 설명을 제공하는 영역

 

3. 리딩 엘리먼트 (Leading Element)

- 리스트 앞쪽에 배치되는 엘리먼트

- 리스트 항목의 의미를 빠르게 전달하는 역할

- 아이콘, 프로필 이미지, 썸네일 등을 배치

 

4. 트레일링 엘리먼트(Trailing Element)

- 텍스트 뒤쪽에 배치되는 요소

- 추가 정보 제공이나 사용자 액션을 유도하는 역할

- 아이콘, 상태값, 버튼, 화살표 등을 배치

 

 

리스트 컴포넌트 만들기

 

 

리스트 컴포넌트 추가하기

 

 

 

<상세 화면 만들기>

1. 프레임 생성하기

- 목록 화면 동일한 사이즈의 프레임 생성하기

- 프레임 이름을 '상세 화면'으로 변경

 

2. 앱 바 컴포넌트 삽입하기

- 상단 모서리에 맞춰주기

 

3. 상세 화면 스케치하기

- 상세 화면은 일반적으로 큰 상품 이미지와 설명, 구매 등의 버튼으로 이루어짐

 

4. 버튼 컴포넌트 배치하기

 

 

 

<로그인 화면 만들기>

1. 프레임 생성하기

- 목록 화면 동일한 사이즈의 프레임 생성하기

- 프레임 이름을 '로그인 화면'으로 변경

 

2. 앱 바 컴포넌트 삽입하기

- 상단 모서리에 맞춰주기

 

3. 텍스트필드 배치하기

글로벌 마진 (Global Margin)

- 앱 전체에서 일관된 좌우 여백을 적용하기 위한 기준값

- 앱 바나 버튼 영역을 오토레이아웃으로 감쌀 때 주로 사용함

- 화면 전반의 정렬과 간격을 통일하는 역할을 함

- 일반적으로 16~24px 사이의 값을 사용함

 

 

체크박스 배치하기

 

 

버튼 배치하기

---

3. 학습하며 겪었던 문제점 & 에러

1)

 학습 과정 도중 화면을 설계할 때 지양해야 하는 요소가 무엇인지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 한 화면에 너무 많은 정보와 기능을 배치하면 사용자가 원하는 정보를 찾기 어려워질 수 있다는 점을 알게 되었다. 따라서 화면의 목적을 명확히 정하고 필요한 요소만 배치하는 것이 중요하다는 점을 이해하게 되었다.

2)

 학습 과정 도중 화면은 보통 몇 개의 영역으로 나누어 구성하는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 정해진 개수는 없지만 일반적으로 앱 바, 콘텐츠 영역, 액션 영역으로 구분하며 서비스 목적에 따라 검색 영역, 네비게이션 영역 등이 추가될 수 있다는 점을 이해하게 되었다.

3)

 학습 과정 도중 기능이 동작하지 않는다는 사용자 불만이 발생했을 때 화면 설계 단계로 다시 돌아오는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 원인에 따라 수정 단계가 달라진다는 점을 알게 되었다. 기능 자체의 오류라면 개발 단계에서 수정하지만, 사용자가 기능을 찾지 못하거나 사용 방법을 이해하지 못하는 문제라면 화면 구조나 UI를 개선하는 방식으로 해결할 수 있다는 점을 이해하게 되었다.