EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.그래픽 디자인 툴, 피그마와 어도비 사이에서 무엇을 고를까design1포토샵 없이 PSD 파일을 열고 이어서 편집하는 법design2피그마·일러스트레이터·인디자인에서 넘어올 때 알아 둘 것design3벡터 그래픽 입문 — 도형과 펜, 패스파인더로 로고 만들기design4프레임·오토 레이아웃·컴포넌트로 앱 화면 시안 만들기design512345...4 벡터 그래픽 입문 — 도형과 펜, 패스파인더로 로고 만들기로고를 만들려고 그래픽 툴을 처음 열면, 가장 먼저 «벡터»라는 말을 만나게 됩니다. 사진과 무엇이 다른지, 왜 로고는 꼭 벡터로 만들라고 하는지 어렴풋이 알지만, 막상 빈 대지 앞에 서면 어디서부터 시작해야 할지 막막합니다. 펜 도구는 생각처럼 움직이지 않고, 곡선은 자꾸 삐뚤어집니다.그런데 복잡해 보이는 로고와 아이콘도 대부분은 아주 단순한 도형에서 출발합니다. 원과 사각형을 합치고, 겹친 부분을 빼고, 모서리를 둥글리고, 점 몇 개를 다듬으면 그럴듯한 모양이 나옵니다. 펜으로 처음부터 그리는 일은 생각보다 적습니다. 벡터 그래픽은 그리는 기술이라기보다 조립하는 기술에 가깝습니다.이 글에서는 벡터 그래픽이 무엇인지부터 시작해, 도형과 펜, 패스파인더를 이용해 로고 하나를 만드는 흐름을 따라가 봅니다.1.벡터와 픽셀이 어떻게 다른지, 왜 로고는 벡터로 만드는지 알아봅니다.2.도형 도구로 기본 모양을 빠르게 잡는 방법을 봅니다.3.패스파인더로 도형을 합치고 빼서 새 모양을 만드는 법을 봅니다.4.펜과 점 편집으로 곡선을 다듬는 법을 봅니다.5.색과 선, 내보내기까지 로고를 마무리하는 법을 봅니다.벡터는 모양을 «설명»으로 저장합니다사진 같은 픽셀 이미지는 작은 색 점들의 모자이크입니다. 정해진 개수의 점으로 그림을 기억하기 때문에, 크게 키우면 점이 드러나 흐릿하거나 계단처럼 보입니다. 반면 벡터 그래픽은 모양을 점의 위치와 그 점을 잇는 선, 안을 채우는 색으로 기억합니다. «여기서 시작해 이렇게 휘어진 선을 따라 저기까지»라는 설명을 저장하는 셈입니다. 그래서 명함만 한 크기로 쓰든 건물 외벽만 한 현수막에 쓰든, 다시 그려도 선명함이 그대로 유지됩니다.로고를 벡터로 만드는 이유가 여기에 있습니다. 로고는 앱 아이콘, 웹사이트 머리, 명함, 간판, 굿즈처럼 크기가 전혀 다른 곳에 두루 쓰입니다. 처음부터 벡터로 만들어 두면 어디에 쓰든 원본 하나로 충분합니다. 색을 바꾸거나 일부 모양을 고치는 일도 쉽습니다. 점과 선이 살아 있기 때문입니다.물론 벡터가 모든 그림에 맞는 것은 아닙니다. 사진처럼 색이 미세하게 번지는 그림은 픽셀이 더 잘 표현합니다. 그래서 좋은 그래픽 툴은 두 가지를 오갈 수 있어야 합니다. 옵클 에디터에서는 벡터 도형을 우클릭 변환 › 래스터화로 픽셀 그림으로 굳힐 수 있고, 반대로 사진을 벡터 트레이싱으로 도형으로 바꿀 수도 있습니다. 로고는 벡터로, 그 로고가 놓일 사진은 픽셀로 다루는 식으로 나누어 생각하면 됩니다.도형으로 뼈대를 먼저 세웁니다로고 작업은 대부분 도형 도구로 시작합니다. 옵클 에디터의 도형 칸을 누르면 사각형(R)과 타원(O)을 비롯해 삼각형, 다각형, 별, 뱃지, 원호, 도넛까지 열 가지 모양이 펼쳐집니다. 하나를 고르고 대지 위를 끌면 그려지며, 끄는 동안 ⇧를 누르면 정사각형·정원처럼 비율이 고정되고, ⌥를 누르면 처음 누른 자리를 가운데로 삼아 그려집니다. 다각형의 꼭짓점 수나 별의 깊이, 도넛의 안쪽 크기처럼 모양마다 다른 옵션은 도구를 고른 채 캔버스를 우클릭해 바꿀 수 있습니다.이 단계에서는 완성된 모양을 그리려 하기보다, 로고를 이루는 큰 덩어리를 도형으로 나눠 보는 것이 좋습니다. 예를 들어 말풍선 모양 로고라면 둥근 사각형 하나와 작은 삼각형 하나로, 열쇠 모양이라면 원 하나와 긴 사각형 몇 개로 나눌 수 있습니다. 모서리를 둥글게 하고 싶다면 모서리 굴림 도구로 원하는 모서리만 골라 끌면 되고, 모서리 스무딩을 쓰면 둥근 모서리가 직선과 더 부드럽게 이어져 앱 아이콘 같은 매끈한 모양이 나옵니다.정확한 균형도 이 단계에서 잡아 두는 것이 좋습니다. 여러 도형을 고르고 정렬 묶음으로 가운데를 맞추거나 간격을 똑같이 나누고, 오른쪽 변형 칸에 X·Y·W·H를 숫자로 입력해 크기를 맞춥니다. 로고는 작은 어긋남도 눈에 잘 띄기 때문에, 눈대중보다 숫자로 맞추는 습관이 결과를 단정하게 만듭니다.패스파인더로 합치고, 빼고, 겹친 부분만 남깁니다도형으로 뼈대를 세웠다면 이제 하나의 모양으로 엮을 차례입니다. 두 개 이상의 도형을 고르고 도구 막대의 패스파인더 묶음을 쓰면 새 모양을 만들 수 있습니다. 합치기는 고른 도형을 하나로 합치고, 빼기는 맨 위 도형의 모양으로 아래 도형을 파내며, 교차는 겹친 부분만 남깁니다. 원 두 개를 조금 어긋나게 겹쳐 빼기를 하면 초승달이 되고, 둥근 사각형과 삼각형을 합치면 말풍선이 됩니다.빼기는 위에 놓인 도형이 기준이 되므로, 결과가 예상과 다르다면 먼저 레이어 순서를 확인해 보십시오. 도넛처럼 구멍이 있는 하나의 모양이 필요할 때는 컴파운드 패스를 쓰면 되고, 빠른 실행(⌘/)에서 «컴파운드 패스 만들기»를 찾으면 됩니다.로고 둘레에 테두리를 한 겹 더 두르고 싶다면 오프셋을 써 보십시오. 일정한 거리만큼 바깥이나 안쪽으로 새 패스를 만들어 주기 때문에, 어느 곳에서나 정확히 같은 간격이 유지됩니다. 손으로 그리면 미묘하게 어긋나기 쉬운 작업이, 숫자 하나로 깔끔하게 끝납니다. 꽃잎이나 톱니처럼 같은 모양이 둘레를 따라 반복되는 로고라면 반복 기능의 방사형을 쓰면 됩니다. 조각 하나만 만들어 두면 개수와 간격을 정해 원을 따라 늘어놓아 줍니다.펜으로 곡선을 더하고, 점을 하나씩 다듬습니다도형만으로 만들 수 없는 곡선은 펜으로 그립니다. P를 눌러 패스 도구를 고르고 대지를 누르면 점이 찍히고, 누른 채 끌면 곡선이 만들어집니다. 첫 점을 다시 누르면 모양이 닫히고, 열린 선으로 끝내고 싶다면 Enter를 누르면 됩니다. 그리는 중에 ⌘Z를 누르면 방금 찍은 점 하나만 취소되므로, 처음부터 완벽하게 그리려 하지 말고 고쳐 가며 그리는 편이 마음이 편합니다.펜을 잘 쓰는 요령은 점을 적게 찍는 것입니다. 점이 많을수록 곡선이 울퉁불퉁해지고 고치기도 어려워집니다. 곡선이 꺾이는 자리에만 점을 두고, 점에서 뻗은 손잡이를 끌어 휘어짐을 다듬는 연습을 해 보십시오. 이미 그린 패스는 Enter를 누르거나 노드 선택 도구로 점을 하나씩 골라 옮길 수 있고, 점 더하기 · 점 빼기로 점을 늘리거나 줄일 수 있습니다. 들쭉날쭉한 부분은 매끄럽게 도구로 문지르면 고르게 펴집니다.한 가지 알아 둘 점이 있습니다. 사각형이나 별 같은 도형은 꼭짓점 수 같은 옵션을 가진 «살아 있는 도형»이라 바로 점을 고칠 수 없습니다. 우클릭 변환 › 패스 변환을 고르면 자유롭게 고칠 수 있는 패스가 되지만, 그 뒤에는 도형 옵션을 더 이상 쓸 수 없으니 필요하면 원본을 복제해 두고 바꾸는 것이 좋습니다.손그림과 글자도 로고의 재료가 됩니다. 종이에 그린 스케치나 손글씨는 사진으로 캔버스에 넣고 벡터 트레이싱을 쓰면 도형이 되고, 결과가 복잡하다면 단순화로 점 수를 정리하면 됩니다. 글자로 만든 로고는 우클릭 아웃라인으로 글자를 도형으로 바꾼 뒤 패스파인더로 다른 도형과 엮을 수 있습니다. 아웃라인으로 바꾼 뒤에는 글자로 고칠 수 없으므로, 원본 글자를 복제해 두는 습관을 들이면 좋습니다.색과 선을 정하고, 쓸 곳에 맞게 내보냅니다모양이 완성되면 색을 입힙니다. 오른쪽 칠 칸에서 단색을 고르거나 그라디언트로 바꿀 수 있고, 칠을 여러 겹 쌓아 표현을 더할 수도 있습니다. 다만 로고는 작은 크기와 한 가지 색으로 찍혀야 하는 경우가 많으니, 처음에는 단색으로 완성한 뒤 필요할 때 그라디언트 판을 따로 만드는 편이 안전합니다. 선을 쓴 로고라면 우클릭 변환 › 선 확장으로 선을 면으로 바꿔 두십시오. 크기를 바꿔도 선 두께가 비율대로 유지됩니다.완성한 로고는 쓸 곳에 맞는 형식으로 내보냅니다. 웹사이트나 앱에 쓸 로고는 SVG로 내보내면 어떤 화면에서도 선명하게 보이고, 투명한 배경의 PNG가 필요하다면 배율을 2배나 3배로 정해 내보내면 됩니다. 인쇄용이라면 PDF로 내보내는 편이 안전합니다. 레이어마다 형식과 배율을 미리 정해 두면, 로고를 고칠 때마다 다시 하나씩 내보낼 필요 없이 ⇧⌘E 한 번으로 정해 둔 것 전부를 내보낼 수 있습니다.처음 만드는 로고가 완벽할 필요는 없습니다. 도형으로 뼈대를 세우고, 패스파인더로 엮고, 펜으로 다듬는 순서를 몇 번 지나다 보면, 다른 사람의 로고를 볼 때도 어떤 도형들이 겹쳐 만들어졌는지 보이기 시작합니다. 그때부터 벡터 그래픽은 그리기가 아니라 설계가 됩니다.이 글의 핵심 벡터 그래픽은 모양을 점과 선의 설명으로 저장하기 때문에 어떤 크기에서도 선명하고, 사진은 픽셀로 다루면 됩니다. 로고는 펜으로 처음부터 그리기보다, 도형으로 큰 덩어리를 잡고 숫자로 균형을 맞춘 뒤 패스파인더로 엮는 편이 쉽습니다. 오프셋과 방사형 반복을 쓰면 손으로 맞추기 어려운 테두리와 반복 무늬를 정확하게 만들 수 있습니다. 펜은 꺾이는 자리에만 점을 두고 손잡이로 곡선을 다듬으며, 손그림은 벡터 트레이싱으로, 글자는 아웃라인으로 재료가 됩니다. 로고는 단색으로 먼저 완성하고, SVG·PNG·PDF처럼 쓸 곳에 맞는 형식으로 내보냅니다.이전글목록으로다음글저작권 고시Copyright Notice본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.저작권자: Abstract Cloud | 대표자: 배창규(uragen)
© Abstract Cloud. All Rights Reserved.HOMEFAQ이용 약관개인정보 이용방침help@opkle.app
010-2747-3403상호 :추상적 형상 디자인(Abstract cloud)  |  대표자 :배창규사업자등록번호 :249-74-00533통신판매업 신고번호 :2025-의정부송산-0634주소 :경기도 의정부시 부용로 49, 108동 402호웹의 모든 콘텐츠, 디자인, 소스 코드에 대한
저작권은 Opkle에게 있습니다.