기초기능학습
1-개요
스타일가이드는 디자인, 문서 작성, 코딩 등에서 사용되는 일관된 가이드라인을 의미합니다.
이는 일관성 있는 결과물을 만들기 위해 필요하며, 브랜드 이미지를 유지하는 데 중요한 역할을 합니다.
스타일가이드는 일반적으로 로고, 색상, 폰트, 이미지, 문구 등에 대한 규칙을 제공합니다.
▪ 로고
로고는 회사나 브랜드를 대표하는 중요한 요소입니다.
스타일가이드에서 로고의 크기, 색상, 배치 등을 규정합니다.
또한 로고의 사용 방법에 대한 지침도 포함됩니다.
▪ 색상
색상은 브랜드 이미지를 대표하는 중요한 요소입니다.
스타일가이드에서는 사용 가능한 색상과 그 색상들이 어떤 상황에서 사용 가능한지를 지정합니다.
▪ 폰트
폰트는 브랜드의 정체성을 대표하는 중요한 요소입니다.
스타일가이드에서는 사용 가능한 폰트와 해당 폰트의 크기, 색상 등을 규정합니다.
▪ 이미지
이미지는 브랜드 이미지를 대표하는 중요한 요소입니다.
스타일가이드에서는 이미지의 사용 방법과 크기, 해상도 등을 규정합니다.
▪ 문구
문구는 브랜드 이미지를 대표하는 중요한 요소입니다.
스타일가이드에서는 사용 가능한 문구와 문구의 표현 방법을 규정합니다.
스타일가이드는 브랜드 이미지를 유지하고 일관성 있는 결과물을 만들기 위해 필요합니다.
2-color
https://color.adobe.com/ko/create/color-wheel
https://color.adobe.com/ko/trends/Ui/ux
컬러 팔레트 검색후 스타일가이드 작성한다
- 프레임 : ppt 용으로 제작해보자
- 사각형 50x50
- text : 색상의 용도, 색상값
- 사각형레이어, 텍스트 레이어 2개를 오토레이아웃으로 묶는다
- 컴포넌트로 변경후 인스턴스로 적용
- 아래처럼 완성한다
- 스타일 개별등록-텍스트를 복사해놓을 것. 이름을 저장할때 Color/Brand/ 로 저장하면 하위카테고리로 저장된다 레이어 개별선택후 순서대로 클릭한다
- Styler 플러그인을 설치한다
- Styler 사용법
- ① 현재문서에 저장된 스타일을 레이어로 추출
- ② 선택된 레이어에서 스타일 저장
- ③ 스타일 적용
- ④ 스타일 연결해제
- ⑤ 스타일 삭제
- ⑥ 플러그인 편집
- 색상이 적용된 레이어만 드래그 하여 선택한다
- 복사이동한다
10. 스타일 생성 클릭→ 레이어는 삭제
3-Elevation
구글 머티리얼 디자인에서 surface(서피스)란 ui를 감싸는 카드 같은것을 의미한다.
엘리베이션(Elevation)이란 서피스의 계층구조를 시각적으로 표현하는 것을 의미하고 이때 그림자를 활용한다
스타일가이드에 엘리베이션을 정의해보자
- color에 사용한 인스턴스를 복사하여 수정한다
- 2/4/8/16/24 단계로 그림자를 넣는다
- 레이어의 이름을 일괄변경한다 shadow2~24
- 플러그인→ styler → general style
- 등록한 스타일의 삭제 수정은 우클릭한다
4-타이포그래피
4-1
타이포그래피는 총 5개의 항목으로 구성한다
타입스케일은 1.25 를 사용한다
타입스케일 관련설명 (1)Headline 1,2,3
Title 1,2,3
Body 1,2,3
Label(button)1,2
Caption- 완료본의 프레임을 참조하여 작업한다
- 16px 기본형을 먼저 작성한후 연산자를 사용하여 스케일을 제작한다
5-레이아웃그리드
완성화면을 참조하여 구현할것
6-스타일가이드 적용하기
03-기능이해/활용 시간에 제작한 카드UI에 스타일가이드를 적용해보자
6-1-레이아웃그리드 적용
- 프레임 크기 조정하기: 360x640
- 레이아웃그리드 켜기
- 그리드에 맞게 수정
- 스타일적용완료
- 와이어프레임에 쇼핑몰 스타일가이드를 적용해보기
