피그마 기초 완전 정복 - 화면 디자인 (홈 화면 만들기 편)

1. 오늘 학습 키워드

- 화면 디자인
- 홈 화면 만들기

---

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

 

<홈 화면 만들기>

1배수 화면
- 1배수 사이즈는 우리가 피그마에서 디자인을 하기 위한 기준 사이즈

- 일반적으로 375 X 812  또는 360 X 800 으로 만듦

 

- 프레임 생성하기

 

 

 

히어로 섹션

- 메인 화면의 가장 상단 영역을 뜻하는 표현

- 앱을 열자마자 사용자가 가장 먼저 보는 영역임

- 영웅처럼 제품을 가장 맨 앞에서 이끌면서 가장 중요한 메시지를 전달하는 영역

→ 중요한 이벤트, 공지사항 등

 

 

히어로 섹션 추가하기

 

 

 

앱 바 컴포넌트

- 컴포넌트 종류 중 네비게이션에 해당하는 컴포넌트

- 앱 화면 상단에 고정되어 현재 화면의 이름을 보여주고, 이전 화면으로 이동할 수 있도록 도와줌

- 현재 화면에서 사용할 수 있는 보조 기능을 제공하기도 함

- 머티리얼 디자인에서는 앱 바(App Bar), iOS에서는 네비게이션 바(Navigation Bar) 라고 부름

- 디자인 시스템마다 명칭은 다를 수 있지만 기능과 목적은 유사함

 

 

앱 바 컴포넌트 구조

 

1. 타이틀(Title)

- 현재 화면의 제목을 보여주는 텍스트 부분

 

2. 힌트 텍스트(Hint Text) Optional

- 현재 화면에서 보조적으로 필요한 정보를 표시하는 용도

 

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

- 일반적으로 뒤로가기 또는 닫기 아이콘을 배치하는 영역

 

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

- 설정, 더보기 등 현재 화면과 관련된 보조 기능을 제공하는 영역

 

 

앱 바 컴포넌트 만들기

 

 

앱 바 배리언츠 만들기 

 

 

홈 화면에 컴포넌트 삽입하기

에셋 패널
- 현재 파일 안에 있는 컴포넌트와 연결된 컴포넌트를 모아 볼 수 있는 패널임
- 컴포넌트를 드래그해서 디자인 영역에 넣으면 인스턴스가 생성됨

---

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

1)

 학습 과정 도중 실무에서도 피그마만으로 홈 화면을 제작하는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 대부분의 화면 설계와 UI 작업은 피그마에서 진행하지만, 반복 작업이나 아이콘 관리, 더미 데이터 생성 등의 경우에는 플러그인을 함께 활용한다는 점을 알게 되었다. 즉, 실무에서는 피그마를 중심으로 작업하되 필요에 따라 다양한 플러그인을 병행해 사용한다는 점을 이해하게 되었다.

2)

 학습 과정 도중 홈 화면을 만들 때 흔히 발생하는 실수가 무엇인지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 오토레이아웃을 적용하지 않거나 컴포넌트화를 하지 않아 수정 범위가 커지는 경우가 많다는 점을 알게 되었다. 또한 간격과 정렬 기준이 일관되지 않으면 화면의 완성도가 떨어질 수 있어 초기에 구조를 체계적으로 설계하는 것이 중요하다는 점을 이해하게 되었다.

3)

 학습 과정 도중 탭 바의 아이콘을 변경했는데 적용되지 않아 원인이 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 아이콘 컴포넌트 자체에는 문제가 없었지만 레이어 패널에서 해당 요소가 다른 레이아웃에 포함되어 있었다는 점을 확인했다. 이후 아이콘을 올바른 Home 레이아웃으로 이동하자 정상적으로 적용되었다. 이를 통해 컴포넌트 설정뿐만 아니라 요소가 어떤 프레임이나 레이아웃에 속해 있는지도 함께 확인해야 한다는 점을 이해하게 되었다.