[클라우딩 어플리케이션 엔지니어링 TIL] 240211 - Figma를 활용한 UI 제작하기

Intro

---

드디어 피그마 강의를 다 끝냈다!!

이전에 기록하지 못한 내용까지 한꺼번에 정리해보았다.

 

 

 

오늘 학습한 내용

---

프로토타입 제작하기

Design Guidelines

앱에서 사용하는 용어가 헷갈릴 때 참고하기 좋은 사이트며 iOS와 안드로이드 별로 확인할 수 있다.

내용이 많아서 따로 검색해서 요약본을 찾아 보는 것도 도움이 된다.

• iOS Guidelines

Human Interface Guidelines | Apple Developer Documentation

• Android Guidelines

Components – Material Design 3

 

 

Design Resource

• Apple Design Resources

Apple Design Resources – iOS 17 and iPadOS 17 | Figma Community

애플의 애플리케이션 컴포넌트들이 있다.

사이드바나 바텀바, 시스템, 키보드 화면 등을 가져와 사용할 수 있다.

 

 

레퍼런스 찾는 데에 도움되는 사이트

• Pinterest

Pinterest

• WWIT

Lifeplus

 

unsplash

: 무료 이미지 및 사진 공유 사이트

아름다운 무료 이미지 및 사진 | Unsplash

• unsplash 플러그인

Figma Community: Explore templates, plugins, and widgets published by the community

 

기타

• 컬러 제너레이터: 색상을 선택하면 어울리는 색상들을 조합해주는 사이트

ColorSpace - Color Palettes Generator and Color Gradient Tool

• 눈누: 무료 폰트 사이트

눈누

• 추천 폰트 (디자이너분들이 현업에서 많이 사용하는 폰트)

Pretendard

• 추천 아이콘 - Material Design Icons

Material Design Icons | Figma Community

 

 

 

 

---

피그마 실습

사이드바 가져오기

1. Apple Design Resources - iOS 17에서 Status Bars 컴포넌트 복사/붙여넣기
2. 크기 맞추고 상단/하단 맞추기
3. constraints 설정하기 (left and right, top/bottom)
4. Home Indicators 가져오기

2. 크기 상단/하단 맞추기

 

⚠️ constraints 설정에서 left and right 적용 안될 경우!! ➡️ Prototype에서 fixed를 Scroll with parent로 변경

3. 참고

 

 

 

 

디자인 작업 순서

시스템 바 ➡️ 사이드(top, bottom) 바 ➡️ 콘텐츠 영역

 

 

Button

애플리케이션 UI를 구현할 경우에 버튼 설정 시 touch area를 꼭 확인해야 한다.

touch area란, 사용자가 손가락으로 터치했을 때 눌리는 범위를 말한다. 보통 엄지 손가락으로 누르기 때문에 넓은 영역을 잡아줘야 한다.

 

모바일 디자인

• 모바일에서 UI를 디자인할 땐 4의 배수 또는 8의 배수로 디자인 하면 정돈된 레이어를 만들 수 있다.
• 모바일에선 텍스트 폰트 12px 이하는 비추천!
• 제목이나 텍스트 넣을 때 #000 색상보다는 #111 ~ #333 사이의 색상을 사용하는 것을 권장
  • 가장 진한 #000을 사용하면 강조가 필요할 때 강조가 어려워지고 좀 더 부드러운 느낌을 내기 위해 #111 ~ #333 사이의 색상을 사용한다.

 

 

 

 

마무리

---

 

 

실습 내용을 직접 따라하면서 강의를 들었는데 생각보다 어려웠다.

오토레이아웃 적용과 간격 설정 등 생각보다 내가 원하는 대로 작동하지 않은 경우도 많았다.

아직도 헷갈리는 부분이 많다. 실제 크기도 강의와 다른 부분들도 많았다.

아직 피그마가 익숙하지 않아서 그런 것 같다.

조금 더 사용해보면서 단축키도 익히고 피그마에 익숙해져야겠다.

 

그리고 이번 피그마 강의를 통해 다양한 디자인 팁들을 알아간 것 같아서 너무 만족스러웠다.