[내일배움캠프 사전캠프] DAY.12 디자인 피드백 세션 / 5주차 강의 학습

TIL. 2025/10/28

 

1. 오늘 학습 키워드

홈 화면 만들기 > 앱 바 컴포넌트 실습해보기

 

1-1. 오늘의 학습 목표

- 브랜드 콘텐츠 디자인 피드백 세션 (이동규 튜터님) - [피그마] 배너 디자인 피드백

- 피그마 5주차 강의 3개 수강하기

 

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

: 색의 대비가 시각적으로 매우 중요한 역할을 함! > 색 대비 많이 익힐 수 있도록 많은 예시 이미지 공부하자

앱바 컴포넌트를 학습하고 실제로 배우니 이해가 빨리 됨.

 

 

- 브랜드 콘텐츠 디자인 피드백 세션 (이동규 튜터님)

* 피드백 내용

이미지에 적어놓은 숫자 참고

①수정사항

1. 흰색과 민트 컬러가 밝은 유사 컬러여서, 무진장 글자가 그림자 있음에도 조금 아쉬움. 색대비!!!

2. 빛을 쏘는 모양이 삼각형 형태 모양도 좋음 , 중앙에서부터 태양이 퍼지는 듯한 형태도 좋을 듯 보임.

3.글자 배치는 나쁘지 않음.

②수정사항

1. 색대비가 명확함.

2.무진장이 프로모션 이벤트 이름이라면 흰색이 아닌 민트 컬러색으로 강조를 해주는 것이 좋음.

  상단 서브 텍스트가 먼저 눈에 들어옴. 

  수능 축하 혜택이 중요한 이벤트 정보면, 조금 더 사이즈를 키우고, 무진장 글자를 줄이도록 하자.

3. 글자 두께 설정은 괜찮음. 중앙에 시선이 몰리도록 잘 해줌.

③ 수정사항

1.가운데 쿠폰이 쿠폰 형태 같아 보이지 않아서 수정이 필요해 보임, 쿠폰 아이콘 모양 찾아보기

2. '???' 의 의도를 잘 모르겠음. 쿠폰같이 않아보임

3. 배경에 들어간 부분은 어중간함. 텍스트 삭제해주세요. 

 

> 피드백 받은 부분으로 수정해봐야겠다. 

 

 

 

5-1강. 이번에 배울 것

- 프로토타입의 개념 이해, 피그마에서 프로토 타이핑 사용방법 학습 예정

❖ 화면 단위의 디자인(로컬 디자인)과 핸드오프 > 실제 사용하는 앱 화면 처럼 만들어 볼 것임.

❖ 프로토타이핑과 피그마 프로토타입 > 화면들을 연결하여 실제 작동하듯이 만들어 볼 것임. /프로토타입 기능/ 스마트 애니메이트

 

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

- 홈화면 만들기

: 피그마에서 디자인을 하기 위한 기준 사이즈 (375*812/360*800)

 

새로운 페이지 추가 > 프레임 생성 후, 히어로 섹션 추가(메인 광고 베너 부분)

 

- 앱 바 컴포넌트 만들기

- 정의 : 네비게이션에 해당하는 컴포넌트 , 현재 화면에서 할 수 있는 보조 기능을 제공

= 명칭은 여러가지 ; 머티리얼 디자인에선 앱 바(App Bar) / iOS에서는 네비게이션 바(Navigation Bar) 등등

 

- 구조 : 

앱바 컴포넌트 구조

 

 

- 앱 바 컴포넌트 실습

> 앱 바 컴포넌트를 만든 후, 홈 화면에 컴포넌트 삽입까지 하였다.

 

 

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

: 걱정인 부분은 피그마를 배울때마다 내가 혼자 만들 수 있을까 걱정 된다.

 

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

: 5-3강 부터 5-7강까지 수강 완료