[내일배움캠프 사전캠프] DAY.13 (5강) 피그마 화면 디자인 실습

TIL. 2025/10/29

 

1. 오늘 학습 키워드

:  화면 디자인 실습 - 목록 / 상세 / 로그인 화면

 

 

1-1. 오늘의 학습 목표

5주차 강의 : 화면 디자인과 프로토타이핑

- 강의 3개 수강하기

 

 

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

: 화면 디자인 실습을 진행하였다. 목록 / 상세 / 로그인 화면에 대한 개념과 실습을 진행하였다.

 

5-3강. 화면 디자인 실습 - 목록 화면

: 목록 > 많은 정보를 같은 구조로 컴팩트하게 만든 컴포넌트를 반복해서 보여주는 화면

 

-목록 관련 컴포넌트

리스트 컴포넌트

: 컨테이너에 포함하는 컴포넌트 / 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄때 사용

 

-구조

리스트 컴포넌트 구조

 

 

 

리스트 컴포넌트를 활용한 목록 화면을 만들었다.

리스트 컴포넌트를 활용한 목록화면

 

 

5-4강. 화면 디자인 실습 - 상세화면

: 상세화면은 일반적으로 쇼핑 앱같은 커머스 앱에서 볼 수 있음

상세화면까지 실습 완료

버튼 컴포넌트 배치할때, 오토레이아웃을 사용한 이유

; 오토레이아웃으로 감싸지 않고, 버튼만 배치했을때, 화면 하단에 고정 시, 버튼이 스크롤에 딸려 내려갈 수 있음. 또한 fill(색칠)을 하지않으면,

스크롤을 내렸을때 정보들이 가려지지 않고 버튼 주위에 보임.(시야 방해)

 

 

5-5강. 화면 디자인 실습 - 로그인화면

: 텍스트 필드와 체크박스를 활용해보기 위함.

 

- 글로벌 마진

: 디자인을 할때 필요한, 안전 여백 / 20px 정도 사용

로그인 화면 만들어 보기(맨 오른쪽)

 

 

3. 학습하며 겪은 문제/해결방법

: 강의만 수강하여 어려움은 없었다.

 

 

4. 내일 학습 할 것은 무엇인지

: 5-6강, 프로토타입과 프로토타이핑 강의 부터 계속해서 수강할 예정