피그마로 유튜브 뮤직 앱 UI 디자인 따라 만들기 – 피그마 강좌 1-6

저번 강의에서 배운 도형과 텍스트 스타일링을 활용해 이번에는 실제 디자인 실습을 해보겠습니다. 목표는 유튜브 뮤직 스타일의 UI를 재현하며, 피그마 기능에 익숙해지는 것입니다. 완벽한 복제를 목표로 하기보다는 기능을 활용하며 디자인 프로세스를 체험해보세요.

작업 순서

1. 그리드 설정

• Columns: 반응형 그리드 설정으로 시작합니다.
  • 설정 값: 12단 / 마진 24px / 거터 16px
  • 단축키: Ctrl + G로 그리드를 On/Off.

2. 텍스트 및 도형 활용

• 텍스트 추가: UI의 제목, 버튼, 설명 텍스트를 배치합니다.
  • 폰트: Google Fonts에서 제공하는 간단한 Sans-serif 폰트를 선택.
  • 스타일: 텍스트 크기와 두께를 조정해 계층 구조를 만듭니다.
• 도형 추가:
  • 버튼, 썸네일 영역, 탭 배경 등 각 요소의 베이스를 만듭니다.
  • Fill과 Stroke를 활용하여 배경색과 외곽선을 설정합니다.

3. 그룹 및 레이어 정리

레이어 이름을 직관적으로 정리해 작업 흐름을 개선합니다.

그룹화: 관련된 텍스트와 도형을 그룹으로 묶어 관리.

단축키: Cmd + G

레이어 네이밍: 레이어 이름을 직관적으로 정리해 작업 흐름을 개선합니다.