[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 5일차 "아이콘 그리기”
안녕하세요. 오늘은 벌써 2주차의 마지막 날입니다.
팀 프로젝트 웹/앱을 정하고 구체화하는 단계를 가졌습니다.
오늘 배운 내용 시작합니다!
아이콘 제작 전 준비사항
탭에 들어가는 아이콘의 크기가 모두 같아야 함.
아이콘을 감싸는 24x24 크기로 모든 아이콘의 크기를 동일하게 만든다.
Figma → View → Pixel grid, Snap to pixel grid 체크하고 만드세요.
모바일에서는 터치 영역이 중요하다. 사용자의 손가락 크기를 고려해서 아이콘을 만든다.
사이즈 예시: 20x20, 24x24, 40x40, 48x48
주로 하단 탭에 있는 아이콘의 경우 24 사이즈,
홈화면에 있다면 조금 큰 32 사이즈 정도라고 말씀해주셨습니다.
아이콘 내보내기 주의사항
아이콘은 SVG 형식으로 내보내기.
Scalable Vector Graphics - 크기를 늘려도 깨지지 않습니다.
두께를 일정하게 유지하기 위해서 라인으로 된 아이콘은 Outline Stroke → Ctrl + Shift + E 로 면 변경
Flatten해서 내보내기.
이름 정하기 - 아이콘 모양으로 한다.
SVG 파일이 깨지지 않고 GOOD! 👀
그리고, 아이콘 이름들도 Ctrl + R 을 통해 이름 통일화 시키면 관리하기 좋다는 꿀팁도 말씀해주셨습니다.
펜툴
포인트 추가: 더블클릭
포인트 제거: Option 키 선택
일러스트, 포토샵에도 있는 펜툴을 잠깐 연습해보았습니다.
조금 더 정교한 작업들은 일러스트를 하는게 더 편하다고 하니 참고해주세요!
만든 아이콘 소개
작지만 5개의 아이콘을 만들어보았습니다. 직접 실습을 해보니, 재밌기도 하고
막상 저희 웹/앱에 들어갈 아이콘을 그려보니 생각보다 어렵더라구요.
많이 연습해야겠습니다 !!
그리드
- 레이아웃
Layout은 배치라는 뜻으로 다양한 분야에서 사용.
Grid System은 화면 안의 다양한 오브젝트를 도와주는 디자인의 기본.
- 그리드 종류
- 베이스라인 그리드
텍스트가 놓일 위치를 결정하는 균일한 수평선 격자이다. 행간이 기준선 사이의 간격을 나타낸다.
- 원고 그리드
원고 그리드는 단순히 페이지 위에 텍스트가 놓인 1단 그리드이다.
- 모듈 그리드
교차하는 열과 행으로 레이아웃을 만드는 그리드이다. 웹사이트웨 많이 활용.
- 그리드 용어
컨테이너: 사진, 이미지, 텍스트 등 디자인 요소가 들어가는 부분. Container, max width, content area 같은 의미
컬럼: 열, 단
거터: 컬럼과 컬럼 사이의 간격
마진: 좌우 여백
- 레이아웃 그리드
프레임에 레이아웃 그리드 설정하기. 디자인 패널 Layout grid, 만든 후 ✅ 그리드 보기: Shift + G
- Material Design의 권장 가이드 라인
모바일 360dp: 4 columns
600dp: 8 columns
* 추가적인 가이드라인을 더 참고하고 싶다면, https://uiux.egovframe.go.kr/guide/style/style_05.html 여기를 참고하면 좋다.
여러 개의 width 넓이, 디바이스 별로 각기 다른 그리드 칼럼을 적용시켜보았어요
기준 안들이 있는게 신기했어요.
기기별 권장 가이드라인 사진도 첨부합니다!
- 데스크탑
- 태블릿
- 모바일
- 마진 크기 계산법
프레임 크기: 1440
컨테이너: 1280
마진: (프레임크기 - 컨테이너) / 2(양 옆)
- 브레이크 포인트
반응형 웹사이트의 중단점을 브레이크 포인트라고 부른다.
최소 2개 이상 하는 추세 (PC/모바일)
LNB(Local Navigation Bar) 및 SNB(Side Navigation Bar)는 IA 구성이 많고 Depth가 깊은 화면에 적합한 형태의 레이아웃으로, 정보탐색이 용이할 수 있도록 일관성 있는 형태를 유지!
전체적인 레이아웃 배치와 구성을 배울 수 있었습니다.
본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.