네...어제는 컬러 편이었고 오늘은 타이포그래피 편입니다. 여기서부터는 기초 상식으로서 알아야 할 것들이 좀 있기 때문에 부득이하게 개념부터 좀 짚는 시간을 가져보았습니다. 디자인 시스템에서 타이포그래피는 무슨 역할을 하고, 어떻게 지정해야 할까요? 역할과 분류, 지정을 위해서 어떤 고민을 해야 할 필요가 있는지 준비해보았습니다. 1. 타이포그래피를 다루는 4가지 요소 : 크기, 무게, 자간, 행간 타이포그래피는 Type(서체) + Graphy (그림,도표,그래프 등)의 활자체를 가지고 그려내는 총체적인 활동을 의미합니다. 서체를 그림처럼 다루면서 효과적으로 활용하는 법을 익혀 나가는 게 매우 중요합니다. 기본적으로 웹이나 앱에서는 크기, 무게, 자간, 행간을 기초로 타이포그래피를 조정하곤 합니다. - ..
디자인을 하기 전에, 컬러를 어떻게 고르고 사용할지에 대해서 고민하시는 분들을 위해서 준비해봤습니다. 컬러.. 어렵습니다. 접근 방식도 이해하는 것도 쉽지 않은데요. 제 나름대로 컬러를 접근할 때 사용하는 방법론을 몇 가지 들고와 보았습니다. 도움이 되셨으면 좋겠습니다. 0. 🎨컬러의 이해 : 색상의 기준 3가지 색상(Hue) , 채도(Saturation), 명도(Brightness) 컬러는 기본적으로 색상, 명도, 채도로 분류됩니다. 색상은 말 그대로 "색의 종류"를 나타내고, 명도는 "색상의 밝기" 채도는 "색상의 순도"를 나타냅니다. 이 세 가지 요소를 조절해서 색을 만들 수 있는데요. 이렇게 조절해서 만든 색상을 "톤(Tone)"이라고 합니다. 톤의 분류 톤은 일반적으로 12개의 톤으로 구성됩니다..
지난 시간에 배웠던 오토레이아웃 써 보니 어떠셨나요? 분명히 쓰기 힘들고, 불편한 지점이 많다고 생각하시는 분들도 많을 겁니다. 특히 자동 배치 규칙을 적용하지 말아야 할 순간도 있죠. 그래서 오늘은 오토 레이아웃을 벗어난 요소를 지정하는 독립 포지셔닝 기능에 대해서 알아보겠습니다. 1. 독립 포지셔닝(Absolute Positioning) 원래 오토레이아웃을 상위 프레임 요소에 사용하게 되면, 하위 요소들의 위치는 무조건 규칙에 따라 배열됩니다. 예전에는 이 부분을 새 프레임을 적용해서 씌운 채로 만드는 경우가 많아 레이어 수 때문에 과한 디자인 형식이 될 때가 많았습니다. 수정하기도 어려웠구요. 그러나 독립 포지셔닝 기능을 사용하면 오토 레이아웃에 적용되지 않는 요소를 만들 수 있기 때문에, 원하는 ..
불리언 요소를 딱 고정시켜서 변동되지 않도록 만들고 싶거나, 텍스트를 깨트리고 선 효과 위에 계속해서 선 효과를 덧대보고 싶은 경우에 사용할 수 있는 팁을 조금 가져왔습니다. 별거 아니기는 하지만, 아트웤에 있어서는 중요한 점인데요. 지금부터 압축하기(Flatten) & 윤곽선 만들기(Outline Stroke), 시작해보겠습니다~ 1. 압축하기(Flatten)의 사용 Flatten은 납작하게 또는 평평하게 하기 라는 뜻으로, 사용하면 1개의 벡터 레이어로 바뀌는 기능입니다. 일러스트레이터에선 확장(Expand)기능과 매우 유사한데요. 다만 현재 보이는 대로만 만들어주고, 선은 확장시키지 않습니다. 획(stroke) 기능은 여전히 동작합니다. 2. 압축하기(Flatten)의 응용 저는 대체로 아래의 요소..
지난 시간에는 오토 레이아웃을 어떻게 설정해야 하는지에 대해서 알아봤습니다. 오늘은 조금 더 실전에서 오토 레이아웃을 다루어 보는 시간을 준비했습니다. 자동으로 간격과 여백을 설정하는 기능에 대해서 알아보고 고급 레이아웃 설정 패널에서 오토 레이아웃의 여러 설정도 바꿔 보면서 차근차근 기능을 이해해 보시길 바랍니다. 그럼 출발하겠습니다 ㅎㅎ 1. 패딩과 간격 설정하기 1-1) 패딩(Padding) 오토 레이아웃에서는 패딩과 간격을 간단하게 설정해 줄 수 있다. 여기서 패딩은 오토 레이아웃이 적용된 프레임이 감싸고 있는 영역 안쪽에 "내부 여백(Padding)"을 추가하는 기능이다. 이는 웹에서의 "박스모델"과 같은 형태이기 때문에 개발과정에서 조금 더 이해하기 쉬운 방식으로 제작할 수 있다고 할 수 있다..
지난 시간에 배운 피그마의 주요 요소인 프레임(Frame)에서 가장 자주 쓰이고 가장 중요한 기능! "오토 레이아웃(Auto layout)"에 대해서 다루어 보겠습니다. 그럼 지금부터 배우러 출발! ㅎㅎ 1. 오토 레이아웃(Auto layout) 기능 소개와 사용법 1-1) 프레임(Frame) 요소로부터 선택하기 우측 디자인 패널에서 오토 레이아웃 패널을 찾는다. + 버튼을 눌러 규칙을 추가할 수 있다. 프레임이 아닌 다른 개체를 선택하면 오토 레이아웃 패널은 출력되지 않으므로 주의하자. 1-2) 단축키로 오토 레이아웃 설정하기 단축키 Shift + A로 오토 레이아웃을 쉽게 지정할 수 있다. 프레임을 만들지 않아도 곧바로 적용되는 장점이 있다. 2. 배치 규칙 설정하기 2-1) 방향(Direction)..
리사이징을 위해서 더 배울 것이 남아서 간단하게 넘어가는 내용입니다. 바로 그리드 그리기인데요. 그리드는 디자인에서 상당히 중요한 역할을 하는 기능으로 해당 레이아웃의 배치 등을 어긋나지 않고 균일하게 맞춰주는 역할을 합니다. 이번 시간에는 그리드를 만들어 보는 시간을 가져 보겠습니다. 1. 그리드 사용하기 그리드는 프레임에서만 사용할 수 있다. 프레임 선택 후 우측에 Layout Grid 기능을 킨다. + 버튼을 누르면 원하는 만큼 추가할 수 있다. 2. 그리드의 종류 레이아웃 배치의 기본이 되는 그리드 형식을 만들 때 쓴다. 그리드는 원하는대로 추가할 수 있다. 기본적으로 픽셀, 행, 열 3가지 종류가 있다. 각각 색상도 자유롭게 설정 가능하다. 1) 픽셀 그리드 가장 기본적인 픽셀 그리드. 보통 8..
※ 본 문서의 주의사항 영어 단어 Constraint의 뜻은 구속, 제약, 제한조건이란 뜻으로 주로 쓰이는데, 이렇게 이해하면 너무 어렵기 때문에 본 문서에서는 이를 '고정점'으로 번역하였습니다. 아래 설명에도 나타나듯, X,Y 좌표의 기준 값을 '고정'시켜 사용하는 기능이기 때문입니다. 이 부분에 대한 지적도 환영하며, 의견 주실 분들께서는 많은 피드백 부탁 드립니다. 1. 프레임과 X,Y위치 좌표 : 고정점(Constraints)는 프레임 하위 요소에만 쓸 수 있다. 그룹은 독자적인 X,Y 좌표 값을 가지지 않는데 반해 프레임 내에 배치된 모든 하위 요소는 프레임을 기준으로 X,Y 좌표값을 가진다. 즉, 정리하면 '프레임은 하위 요소들의 독자적인 위치 값을 지정한다.'고 볼 수 있을 것이다. 그리고 ..
피그마에는 하위 요소를 묶어주는 요소가 대표적으로 5가지 있습니다. 1. 프레임(Frame) 2. 그룹(Group) 3. 벡터 네트워크(vector network) 4. 불리언 그룹(Boolean Groups) 5. 마스크(Mask) * 어디까지나 공식적인 분류는 아니고, 개인적인 분류인 점 양해 부탁 드립니다. 이 들은 각각마다 채우기(fill), 획(stroke), 효과(effect)의 결과가 서로 다릅니다. 그래서 초반에 정리하지 않으면 헷갈리기 쉽기 때문에 챕터 2의 첫 장에서 먼저 다루어 보도록 하겠습니다. 그럼 시작하겠습니다. 1. 프레임(Frame) 단축키 : Ctrl + Alt + G 로 디자인을 담는 컨테이너 역할을 하는 레이어이다. 프레임은 통속적인 아트보드와 같은 역할을 하지만, 하위..
피그마의 핵심 기능, 프레임(Frame)에 대해서 준비했습니다. 저는 사실 피그마에서 그룹 사용은 조심해야 한다고 생각하는 주의이기 때문에.. 이번 편에서 그룹은 그렇게 중요하게 다루지 않고 있습니다. 다만 둘의 차이가 무엇인지 알고 구분해서 쓸 수 있도록 작성했습니다. 1. 프레임 도구 사용하기 프레임 레이어는 피그마에서 표현하고 싶은 디자인을 작성하는 가장 기본이 되는 요소이다. 포토샵, 일러스트레이터에서는 아트보드 또는 대지, 캔버스 기능으로 표현되어 왔으며, 피그마에서 가장 기본이 되는 요소이므로 기초 파트에서 반드시 꼭 숙지하고 넘어가야 한다. 보기에는 단축키 F로 나와있는데 단축키 A로도 사용이 가능하다. 도구를 선택하고 오른쪽 디자인 패널에서 원하는 디바이스 프리셋을 선택하면 그 크기에 맞는..
오늘은 피그마에서 효과 사용에 대해서 정리해봤습니다. 기초편 언능 끝내고 핵심이 되는 부분만 다루고 싶네요.. 효과편 시작하겠습니다. 1. 레이어 효과 : 그림자(Shadow)와 흐림(Blur) 효과 패널(Effect Panel)에서 적용할 수 있는 효과는 그림자(Shadow)와 흐림(Blur)이 있다. 일단 종류는 4가지이다 + 버튼으로 색상처럼 중첩이 가능하다. 안쪽 그림자 (Inner Shadow) : 레이어의 안쪽에 그림자를 드리움. 그림자 드리우기(Drop Shadow) : 레이어의 바깥에 그림자를 드리움. (기본 설정) 레이어 흐림 (Layer blur) : 레이어에 흐림 효과를 부여하여 외부 이미지와 맞닿는 경계선을 흐리게 만듦 배경 흐림 (Background Blur) : 레이어에 흐림 효..
이번에는 피그마에서 컬러를 쓰는 방법에 대해서 다루어 보겠습니다. 1. 채우기(Fill) & 선(Stroke) 패널의 사용 Fill Stroke 피그마에서 색상을 설정하는 영역은 크게 채우기(Fill) 와 선(Stroke)로 나뉜다. 아무 레이어 개체나 선택한 후, +버튼을 눌러서 색상을 추가할 수 있다. 컬러는 중첩이 가능하다. 여기에서 색상을 클릭하면 색상 패널을 확인할 수 있다. 2. 색상 패널 사용하기 색상 패널에서는 페인트 타입, 컬러 피커 도구, 컬러 맵, 슬라이더, 지역 색상 및 문서 색상 확인이 가능하다. 페인트 타입 (Paint type) : 그래픽을 표현하는 방법을 설정한다. 크게 보면 단색, 그라디언트(4종), 이미지로 설정 가능 컬러 피커 (Color Picker) : 단축키 i 로..
