이 프로젝트에서는 Figma Design에서 마법 물약을 일러스트로 표현해 보겠습니다. 일러스트 제작은 재미있게 Figma 편집기와 도구에 익숙해지는 방법입니다. 일러스트 제작이 처음이라도 걱정하지 마세요. 기본 도형, 그룹, 색상, 프레임 사용법을 단계별로 살펴볼 겁니다. 또한 레이어 정리가 디자인에 어떤 영향을 미치는지도 알아보겠습니다.
단계별로 따라 하면 최종 일러스트 다음과 비슷하게 보일 것입니다.
다음과 같은 방법으로 마법 물약을 만듭니다.
병 만들기
타원 도구, 직사각형 도구, 그룹을 사용하여 병을 만듭니다.
도형 추가
도형 도구는 도구 모음에 위치해 있습니다. 다른 도형 옵션을 표시하려면 화살표를 클릭하세요.
타원 하나와 직사각형 두 개를 캔버스에 추가합니다.
- 타원 추가: 타원 도구를 선택하거나 [O]를 누른 후 캔버스 클릭
- 직사각형 추가: 직사각형 도구를 선택하거나 [R]을 누른 후 캔버스 클릭
팁: 캔버스를 클릭하고 커서를 드래그하여 도형을 추가할 수 있습니다. 도형의 크기를 조정할 때 해당 도형의 치수가 하단 가장자리 아래에 나타납니다. Shift 키를 누른 상태로 도형을 드래그하면 완벽한 정사각형과 원을 만들 수 있습니다.
도형 크기 조정
이제 구성 요소가 준비되었으니 크기를 조정할 시간입니다. 개체의 크기는 핸들을 선택하고 커서를 드래그하거나, 디자인 패널에서 너비 및 높이 필드에 원하는 치수를 입력하여 조정할 수 있습니다.
그중 하나를 사용하여 다음 치수로 도형의 크기를 조정합니다.
- 타원: 너비 200 x 높이 200
- 직사각형 1: 너비 100 x 높이 100
- 직사각형 2: 너비 120 x 높이 40
120 x 40 직사각형에서는 병의 입구가 너무 날카롭게 보이지 않도록 모서리를 둥글게 처리해야 합니다. 직사각형을 선택하고 디자인 탭의 모서리 반경 필드에 “10”을 입력하세요.
도형 정렬
이제 도형이 준비되었으니, 병처럼 보이게 정렬해야 합니다. 도형을 클릭하고 드래그하여 캔버스에서 이동시킵니다. 개체를 이동할 때, 빨간색 안내선이 나타나는 것을 볼 수 있습니다. 이것은 개체를 캔버스의 다른 개체와 정렬하는 데 도움을 줍니다.
팁: 도형을 배치한 후 모든 도형을 선택하고 디스플레이 탭의 가로 가운데 정렬 설정을 사용하여 모든 것이 중앙에 잘 위치하도록 합니다.
다음과 유사하게 보이도록 도형을 정렬하세요.
도형 그룹화
병이 멋져 보이네요. 계속하기 전에 정리해 봅시다. 왼쪽 사이드바의 레이어 패널을 보면 각 도형이 각각의 레이어에 있는 것을 확인할 수 있습니다.
이 레이어들을 함께 그룹화하여 간편하게 만들 수 있습니다. 그룹을 사용하면 레이어들을 결합하여 단일 개체처럼 취급할 수 있게 됩니다.
여러 레이어를 그룹화하려면 레이어를 선택하고 다음 바로가기를 사용하세요.
- macOS: Command + G
- Windows: Control + G
왼쪽 사이드바의 레이어 패널에는 이제 'Group 1'이라는 이름의 레이어 하나만 표시됩니다. Figma에서 정리된 상태를 유지하기 위해 레이어에 이름을 지정하는 것도 좋은 방법입니다. 레이어를 두 번 클릭하고 이름을 “Bottle”로 바꿉니다.
색상 추가
병에 색상을 넣어보겠습니다. 병을 선택하고 오른쪽 사이드바의 채우기 설정을 클릭하여 색상 선택기를 엽니다. 이 튜토리얼에서는 색상 코드 #DEDCF9를 사용하겠습니다. 채우기 필드에 코드를 입력하거나 색상 선택기를 사용하여 다른 색상을 선택할 수 있습니다.
채우기 색상을 변경했으면 이 레이어를 잠글 차례입니다. 레이어를 잠그면 개체가 잘못 이동되거나 수정되는 것을 방지할 수 있습니다. 이 레이어를 잠그려면, 병 도형을 선택하고 왼쪽 사이드바에서 잠금 아이콘을 클릭하세요. 레이어의 잠금을 해제하려면, 잠금 해제 아이콘을 클릭하세요.
병이 완성되었습니다. 이제 마법 물약으로 채울 시간입니다.
확인: 파일이 다음과 비슷해 보이나요?
마법 물약 만들기
타원 추가
타원 도구를 사용하여 캔버스에 타원을 추가하고 크기를 175 x 175로 조정합니다.
타원을 병 도형 위로 드래그하고 빨간색 안내선을 사용하여 정렬하세요. 지난 섹션에서 병 색상을 변경한 것처럼 타원의 채우기 색상을 변경하세요. 이 프로젝트에서는 색상 코드 #E99BF4를 사용할 것입니다. 이 코드를 채우기 필드에 입력하거나 색상 선택기를 사용하여 다른 색상을 선택할 수 있습니다.
타원 수정
개체 편집 설정을 사용하여 병 속의 물약이 출렁거리는 것처럼 만들어 보겠습니다.
타원을 선택하고 도구 모음에서 개체 편집을 클릭하여 벡터 편집 모드에 들어갑니다. 벡터 편집 모드를 사용하면 전체 도형을 변경하지 않고 개체의 개별 포인트를 조작할 수 있습니다.
벡터 편집 모드에서 타원의 상단 포인트를 클릭하고 아래와 옆쪽으로 드래그합니다. 문제가 생긴 경우, 아래의 GIF를 확인하세요.
물약의 모양이 만족스러워지면 도구 모음에서 완료를 클릭하여 벡터 편집 모드를 종료합니다. 다음으로 물방울을 몇 개 추가해 보겠습니다.
타원 도구를 사용하여 물방울 추가
이 프로젝트에서는 타원 도구를 자주 사용합니다. 이 도구를 사용해서 물약 병에 물방울을 추가해 보겠습니다.
타원 도구를 드래그하여 여러 개의 작은 물방울을 만듭니다. 모두 같은 크기일 필요는 없지만 병 안에 들어갈 만큼 충분히 작아야 합니다. 여기에서는 6 x 6과 12 x 12의 타원을 혼합하여 사용했습니다. 다음으로 진행하기 전에 타원의 채우기 색상을 좀 더 다채로운 것으로 변경하세요. 색상 코드는 #985DF6을 사용했습니다.
병 안에 물방울을 배치한 후 모든 물방울 타원과 더 큰 물약 타원 위로 커서를 드래그하고 바로가기를 사용하여 그룹화합니다.
- macOS: Command + G
- Windows: Control + G
좌측 사이드바의 모든 타원 레이어가 "Group 2"라는 이름의 하나의 레이어로 압축된 것을 알 수 있습니다. 레이어 이름을 "Potion"으로 변경하고 아이콘을 클릭하여 잠급니다.
확인: 파일이 다음과 비슷해 보이나요?
코르크 만들기
직사각형 도구를 사용하여 코르크를 만들겠습니다.
캔버스에 직사각형을 추가하고 크기를 75 x 75로 조정합니다. 디자인 탭에서 모서리 반경 설정을 사용하여 직사각형의 모서리를 25로 둥글게 만듭니다.
직사각형의 채우기 색상을 #CE856C로 변경하고 레이어의 이름을 "Cork"로 변경합니다. 병 입구 쪽으로 드래그합니다.
레이어 정리
코르크가 병 위에 있지 않게 하려면 왼쪽 사이드바의 레이어 순서를 재정렬해야 합니다. 레이어 순서는 캔버스에서 개체가 어떻게 표시되는지를 결정합니다.
"Cork" 레이어를 "Bottle" 레이어 아래로 이동하여 코르크의 윗부분만 보이도록 해보겠습니다. 이렇게 하면 병 속에 있는 것처럼 보일 것입니다. "Cork" 레이어를 선택하고 "Bottle" 레이어 아래로 드래그합니다. 레이어를 이동한 후에 아이콘을 클릭하여 잠급니다.
반사선 추가
물약이 거의 완성되었습니다. 돋보이도록 반사선을 몇 개 추가하기만 하면 됩니다.
캔버스에 두 개의 직사각형을 추가하고 하나는 20 x 10, 다른 하나는 40 x 10으로 크기를 조정합니다. 디자인 탭에서 모서리 반경 설정을 사용하여 두 직사각형의 모서리를 모두 20으로 둥글게 만듭니다.
두 직사각형의 채우기 색상을 #F2F2FF로 변경합니다. 직사각형을 병 입구 쪽으로 옮깁니다. 두 직사각형을 모두 선택한 후 바로가기를 사용하여 그룹화합니다.
- macOS: Command + G
- Windows: Control + G
레이어의 이름을 "Glare"로 변경하고 잠급니다.
확인: 파일이 다음과 비슷해 보이나요?
(선택 사항) 일러스트를 프레임에 추가하고 내보내기
Figma에서 일러스트를 내보내고 싶다면, 레이어를 프레임에 추가할 수 있습니다. 프레임은 Figma의 주요 구성 요소 중 하나입니다. 그룹과 마찬가지로 프레임을 사용하여 모든 디자인 요소를 한 곳에 구성할 수 있습니다.
도구 모음의 프레임 도구를 사용하여 새 프레임을 추가하고 그 안으로 콘텐츠를 드래그하여 넣거나, 기존 개체를 직접 선택하여 프레임으로 변환할 수 있습니다. 두 번째 옵션을 해보겠습니다.
레이어의 잠금을 해제하고 커서를 일러스트 위로 드래그하여 모든 항목을 선택합니다. 모든 항목이 선택되면, 마우스 오른쪽 버튼을 클릭하고 프레임 선택을 선택합니다. 네 개의 개별 레이어가 "Frame 1"이라는 이름의 하나의 레이어 아래에 중첩됩니다. 이름 옆의 화살표를 클릭하면, 이름이 지정된 레이어가 여전히 존재하며 개별적으로 선택하고 편집할 수 있음을 알 수 있습니다. 새 레이어의 이름을 "Magic Potion"으로 변경합니다.
일러스트를 내보내려면, "Magic Potion" 레이어를 선택하고 오른쪽 사이드바의 내보내기 설정을 사용하여 디자인을 내보냅니다.
다음 단계는 무엇인가요?
축하합니다! 몇 가지 기본 도형만으로 Figma에서 마법 물약을 그렸습니다. 다시 한번 도전해 보고 싶으시다면, 아래의 곰 일러스트를 재현해 보세요. 이 프로젝트에서 배운 것과 동일한 도구를 사용하여 만든 것입니다. 특히 자랑스러운 작품을 만들었다면, Figma 커뮤니티에 공유하세요.
다음에는 어떤 디자인일지 정말 기대되는군요!