브리의 성장기

😀 TIL #221110 - 피그마 인프런 강의 수강 오늘은 컬러팔레트를 만들고 타이포를 정의했다. 텍스트 스타일도 등록해보았다. 브랜드 색상에 일관성을 주고 작업의 효율을 높이기 위해 컬러팔레트를 미리 지정했다. 컬러를 미리 지정하면 우측 패널에서 클릭 한번으로 활용 가능하다. 타이포 정의에 앞서 구글의 Materal Design 과 애플의 Human Interface Guideline 을 확인할 필요가 있다. 각각은 애플과 구글에서 일반 사용자도 알아보기 쉽도록 디자인 가이드 라인을 제공하는 사이트이다. 애플의 가이드라인의 경우 인터페이스 디자인을 설명하면서 그렇게 디자인한 이유도 간략하게 설명하고 있다. 작은 테마나 기능까지도 세세하게 설명하고, UX나 인터렉션까지 디자인한 이유와 근거가 작성되어 ..

피그마에는 Outline Stroke 이라는 기능이 있다. Outline Stroke 은 언제 사용하는걸까? 이해가 쉽도록 아래 예제를 만들어보았다. 왼쪽은 Outline Stroke 이 적용되지 않은 도형의 크기를 키웠을때의 모습이고, 오른쪽은 Outline Stroke 이 적용된 도형의 크기를 키웠을때의 모습이다. 차이가 보이나요? Stroke 속성을 그대로 살려둔 왼쪽 도형은 크기가 줄어들어도 선 굵기가 일정하게 유지된다. Outline Stroke 하여 면속성으로 만들어준 오른쪽 도형은 줄어든 크기에 따라 선 굵기의 비율도 함께 줄어든다. Outline Stroke 는 도형의 선속성을 면속성으로 바꿔주는 기능이다! 아래에서 보다시피 좌측 도형을 클릭하면 Fill 이 하얀색으로 되어 있는 반면 우측..

컴포넌트(Component) 피그마의 모든 요소는 재사용 가능한 컴포넌트로 만들 수 있고 변형이 가능하다. 버튼이나 필드 같은 간단한 요소부터 컴포넌트를 중첩해서 만든 카드나 메뉴도 만들 수 있다. 아래 여섯개의 개별 컴포넌트가 있다. 체크박스, 라디오박스, 토글 세가지의 셀렉트 타입이 있고 활성화, 비활성화 두가지 상태로 나뉜다. 즉, 여섯개의 개별 컴포넌트를 아래 기준으로 그룹화 할 수 있다. - property 1. 타입 - property 2. 상태 이번에 새로 릴리즈 된 기능 Varients 를 사용하여 컴포넌트를 그룹핑 해보겠다. 우선 활성화된 체크박스, 라디오박스, 토글을 한번에 선택하고 combine as varients 버튼을 클릭하자. 세개의 컴포넌트가 property(type) 으로 ..

회사에서 사이트 리뉴얼 업무를 맡게 되었다. 크몽으로 웹디자이너를 선정하여 외주 디자이너와 첫 협업을 했다. 파일 내엔 여러 웹 관련 용어가 가득 들어있었다. 😅 앞으로 기획 업무에 참고할겸 네이게이션 클래스 명에 대해 정리해봤다. (얼마전 정보처리기사 강의를 수강한 N잡 홈페이지를 참고했다.) 1. GNB (Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 공통 네비게이션 메인메뉴, 대분류메뉴 등 전체 사이트에서 사용되는 공통 메뉴바를 뜻한다. 2. LNB (Local Navigation Bar) GNB 메뉴의 서브 메뉴형식으로 나오는 네비게이션. 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 페이지로 가는 네비게이션 바를 뜻한다. 3. SNB (Side Navi..