회사 홈페이지에 들어가면 왼쪽 위에 있는 그림이나 글자가 기억나시나요? 아니면 스마트폰으로 앱을 켜면 잠깐 뜨고 사라지는 화면의 그림이나 글자는요? 구체적으로 어떻게 생겼는지 기억은 안 나도 어떤 것을 말하는지 알겁니다. 다양한 광고의 시작이나 끝에 삽입되는 모양과 글자, 여러 물리적인 제품에 프린팅 된 작은 모양과 글자도 기억날 것입니다.
이렇듯 다양한 회사가 자신이 어떤 사람인지 구분해서 전달하기 위해 주로 사용하는 그림과 글자를 로고라고 부릅니다. 누구나 이름과 얼굴이 있듯이, 어떤 회사든 이름과 로고가 있습니다. 무엇을 하던 여기저기에 로고가 쓰이죠. 이번 강의에서는 로고는 어떤 종류가 있는지 알아보고 피그마로 로고를 다루는 법을 배워보겠습니다. 미리 준비한 예제를 이용해 로고 세트를 만드는 법부터 배웁니다. 만약 자신만의 로고가 있다면 응용해서 자신만의 세트를 만들어도 좋습니다.
이번에 만들 것
- 예제 로고 키트*1개
- 나만의 로고 키트*1개
걸릴 시간
- 30분
이 수업이 끝나면
- 로고를 타입별로 만듭니다.
- 나만의 로고 키트를 하나 만들어 봅니다.
예제 파일
상단 Exercise Files 탭에서 예제 파일을 다운로드 받으세요.
- 심볼: example-symbol.svg
- 워드마크: example-wordmark.svg
- 콤비네이션 로고: example-combination-logo.svg
나만의 로고 만들기
나만의 로고 키트를 만들어 봅니다. 깊은 뜻이 담긴 로고를 만드는 것은 별도의 수업이 필요할만큼 어려운 일이기 때문에 최대한 가볍고 빠르게 만들 수 있는 방법으로 로고 키트를 만들 것입니다.
*이 과정은 필수가 아닙니다.만약 이미 로고가 있거나, 로고를 만드는 시간이 부족할 경우 예제 파일로 실무에서 쓰이는 로고 키트를 만드는 것에만 집중해도 좋습니다.
심볼 찾기
심볼은 주로 주로 아이콘 형태를 많이 사용합니다. 나 혹은 내가 속한 단체를 잘 표현하는 키워드를 몇가지 뽑아봅니다. 뽑은 키워드를 바탕으로 아래 사이트에서 아이콘을 검색하고 SVG를 다운로드 받습니다.
*아이콘은 라이센스가 있기 때문에 상업적으로 사용해서는 안됩니다.
서체 찾기
대표하는 서체는 읽히는 서체는 성격이 다릅니다. 이번에 우리에게는 대표하는 서체가 필요하며 개성을 최대한 드러낼 수 있는 서체를 찾아야 합니다. 한글이나 영문 중 원하는 형태를 골라 내 이름 혹은 단체의 이름을 표현할 서체를 골라보세요.
로고 키트 만들기
1.파일 준비하기
브랜드를 표현하는 기본 요소인 로고가 어떤 것인지에 대해 배웠습니다. 이제 언제 어디서나 쓸 수 있는 나만의 브랜드 키트를 만들어 봅시다. 크기를 조절해도 품질이 나빠지지 않는 SVG 소스 예제 파일을 이용해 만들어보겠습니다. 먼저 아래 예제를 다운로드해 피그마에서 사용할 파일을 준비합니다. 피그마를 켜고 예제 파일을 드래그 앤 드랍해 피그마 파일에 이미지를 삽입합니다. 이미지 소스를 이용해 피그마에서 파일을 직접 구성해 봅니다. example-symbol.svg, example-wordmark.svg, example-combination-logo.svg를 피그마 파일에 넣습니다.
이미지 소스 넣기
- 바탕화면에서 Drag&Drop 합니다.
- Shift + Command + K 를 누릅니다.
- 도형 삽입 목록 중에 insert image로 넣습니다.
2. 심볼 준비하기
먼저 가장 단순한 심볼 세트부터 만들어봅시다. 브랜드 요소에서 가장 중요한 것은 어떤 환경에서도 잘 보여야하는 것입니다. 배경이 밝든 어둡든, 크기가 작든 크든, 언제 어디서나 균일하게 잘 보여야 하는 것이 중요합니다. 형태가 단순한 심볼부터 파일을 함께 정리해봅시다.
심볼을 복사합니다.
- 프레임 선택: 왼쪽 상단 이름 클릭
- 프레임 복사: Command(Ctrl) + C
- 프레임 붙여넣기: Command(Ctrl) + V
- 복사+붙여넣기 반복하기: Command(Ctrl) + D (= 직전에 한 행동을 반복하는 기능)
크기별로 정리하고 이름을 써줍니다. 크기는 일반적으로 크기가 큰 1024를 원본으로 사용하고 원하는 사이즈로 줄여서 사용합니다. 이미지 사이즈를 조절하는 것도 추가 업무가 될 수 있기 때문에 크기별로 미리 나눠도 편합니다. 보통 1024, 512, 96, 64, 40, 24 정도의 크기면 왠만한 상황에서 사용할 수 있습니다. 크기가 다를 때는 이름에 끝에 -[크기]를 써주면 나중에 파일을 다루기 편합니다.
- 커맨드 r를 누르면 이름을 바꿀 수 있습니다.
이제 색이 다른 심볼을 만듭니다. 일반적으로 배경이 밝을 때 사용하는 검정 로고와 배경이 어두울 때 사용하는 흰색 로고로 나뉩니다. 오른쪽 아래에 있는 Selection Color를 이용해 쉽게 색을 바꿀 수 있습니다.
3. 워드마크 준비하기
다음으로 워드마크 세트를 만듭봅니다. 워드마크 역시 큰 화면에서도 어색하지 않고 작은 크기에도 읽을 수 있어야합니다. 여백 포함 개성을 위해 읽히지 않게 표현하기도 합니다.
이제 색이 다른 심볼을 만듭니다. 일반적으로 배경이 밝을 때 사용하는 검정 로고와 배경이 어두울 때 사용하는 흰색 로고로 나뉩니다. 오른쪽 아래에 있는 Selection Color를 이용해 쉽게 색을 바꿀 수 있습니다.
4. 콤비네이션 로고 준비하기
심볼과 워드마크를 합쳐봅시다. 어지간히 유명하지 않으면 심볼만 보고 어떤 브랜드인지 알기 어렵습니다. 워드마크만 있다면 읽을 수는 있지만 형상이 기억에 남기가 쉽지 않습니다. 이런 경우에 사용하는 것이 심볼과 워드마크를 합친 콤비네이션 로고입니다.세로로 결합하거나 가로로 결합할 수 있습니다.
5. 브랜드 키트 정리하기
심볼, 워드마크, 콤비네이션 마크가 있으면 거의 대부분의 상황에 대응이 가능합니다. 이제 이 피그마 파일을 두고두고 사용할 것이기 때문에 이번 기회에 깔끔하게 정리해두면 좋습니다. 정리하는 방식은 개인의 자유지만 가급적 특성에 알맞게 모아두는 것이 나중에 수정하기 편합니다.
저는 카테고리 > 색 > 크기 로 그룹을 지어 사용합니다. 이름 역시 이 분류에 맞게 카테고리-색-크기로 명명합니다. 파일만 보더라도 어떤 로고인지 바로 알 수 있게 이름도 상세하게 쓰는 편이 좋습니다.
이제 다 만든 파일을 내보내야합니다. SVG는 그래픽 툴이나 개발 툴에서 다루기 좋지만 일반적인 상황에 많이 쓰이지는 않습니다. 보통 배경이 투명한 적절한 크기의 PNG를 사용하는 경우가 많습니다. 이를 위해서 PNG로 내보낼 때 배경이 포함되지 않도록 체크 표시를 해제합니다.