왕초보 셀러를 위한 피그마 완벽 가이드 | 피그마 처음이면 이거 보세요

피그마, 상세 페이지 만들 때 꼭 알아야 할 기능들!

요즘 상세 페이지는 피그마로 만드는 게 대세래. 10년 넘게 포토샵만 쓰던 나도 피그마로 바꾸고 나니 작업 속도가 엄청 빨라졌어. 근데 처음 피그마 시작할 때 유튜브 보면서 따라 하려니까 전문가인 나도 어렵더라구. 게다가 인터페이스도 바뀌어서 옛날 영상 보면 더 스트레스받았어.

그래서 내가 진짜 완전 초보도 피그마 가입부터 상세 페이지 만들기 전에 꼭 알아야 할 필수 기능까지 다 알려주는 영상을 만들었어! 이 영상만 보면 끝이야. 바로 시작해 볼까?

1. 피그마 가입하고 시작하기

1. 구글 크롬에 들어가서 피그마를 검색하고 첫 번째 사이트를 클릭해.
2. 사이트가 열리면 "지금 무료로 시작하기" 버튼을 눌러 가입해.
3. 구글 계정으로 계속하기를 클릭하고 네 구글 계정으로 로그인해.
4. 이름 입력하라는 페이지가 뜨면 원하는 이름을 입력하고 "Continue"를 눌러.
5. 디자인 선택 페이지에서는 그냥 "Continue"를 눌러줘.
6. 회사 정보 입력하는 건 "Continue"를 눌러주고, 혼자 사용한다면 "Nobody"를 클릭하고 "Continue"를 눌러.
7. 그다음은 "Skip"을 눌러줘.
8. "Starting"을 클릭하고 "Continue"를 눌러줘.
9. "No, first time"을 누르고 "Continue"를 클릭해.
10. 이제 요금제 선택인데, 우리는 무료로 사용할 거니까 "Starter"를 클릭하고 "Continue"를 눌러줘.
11. 마지막으로 "Design with Figma"를 클릭하고 스크롤 내려서 "Finish"를 눌러주면 끝!

2. 피그마 앱 다운로드 & 글꼴 설치

피그마는 웹에서도 바로 쓸 수 있지만, 앱으로 다운로드 받는 걸 추천해. 렉도 덜 걸리고 오류도 훨씬 적거든.

• 앱 다운로드: 네 컴퓨터에 맞는 피그마 앱을 다운로드 받아 설치해 줘.
• 글꼴 설치: 컴퓨터에 다운로드 받은 외부 폰트를 피그마에서 쓰려면 글꼴 설치가 꼭 필요해.

앱을 설치했다면, 앱을 열고 "Login with Browser"를 클릭한 후 "Open the Desktop App"을 눌러서 피그마를 열어줘.

3. 피그마 인터페이스 살펴보기

새 파일을 만들어서 피그마 화면을 같이 보자.

• 파일 생성: 왼쪽 상단 "+" 버튼을 누르면 새 파일을 만들 수 있지만, 무료 버전은 파일 3개밖에 못 만들어. 그래서 홈으로 돌아가서 왼쪽 바의 "Drafts"를 눌러서 파일을 생성하는 게 좋아. 상품별로 무제한으로 만들 수 있거든!
• Drafts 클릭 후 "+" 버튼을 누르고 "Design file"을 클릭하면 새 파일이 열려.

피그마 인터페이스 구조:

• 왼쪽 패널: 페이지, 레이어, 파일명을 관리하는 곳이야. 상단 "Untitled"를 눌러 파일 이름을 바꿀 수 있어.
• 하단 도구: 다양한 디자인 도구들이 있어. 단축키도 직관적이라 눌러보면 금방 익힐 수 있을 거야.

4. 페이지, 프레임, 레이어 개념

피그마에서 이 세 가지 개념이 헷갈릴 수 있는데, 쉽게 설명해 줄게.

• 페이지: 하나의 디자인 파일 안에 여러 개의 페이지를 만들 수 있어. 예를 들어, 딸기, 오렌지, 토마토, 포도처럼 상품별로 페이지를 나누는 거지.
• 프레임: 각 페이지 안에서 디자인 영역을 나누는 거야. 딸기 페이지 안에서 스마트 스토어 상세 페이지, 쿠팡 상세 페이지, 인스타그램 배너 등을 프레임으로 만들어서 관리할 수 있어.
• 레이어: 페이지와 프레임 위에 올라가는 텍스트, 도형, 사진 같은 개별 요소들을 말해.

5. 주요 도구 살펴보기

• 무브 툴 (V): 오브젝트를 선택하고 이동할 때 사용해. 아래 화살표를 누르면 핸드 툴 (H)도 있는데, 이건 화면을 잡고 이동하는 기능이야.
• 프레임 (F): 페이지 안에 여러 개의 프레임을 만들 수 있어. 미리캔버스랑 다르게 프레임 크기를 다르게 만들 수 있다는 게 장점이야. 프레임을 복제할 때는 Ctrl+C, Ctrl+V 또는 Ctrl+D를 사용하고, 이름을 바꾸려면 Enter를 누르면 돼.
• 도형: 사각형, 라인, 원형 등 다양한 도형을 만들 수 있어.
  • 크기 조절: 도형을 선택하고 오른쪽 패널에서 W(가로), H(세로) 값을 직접 입력하거나, 모서리를 드래그해서 조절할 수 있어.
  • 모서리 둥글게: 도형 모서리에 있는 동그라미를 드래그하거나, 오른쪽 패널의 "Individual corners"에서 수치를 입력해서 원하는 모서리만 둥글게 만들 수도 있어.
  • 필 (Fill): 도형을 채우는 색상이나 이미지를 설정해.
    • 단색: 네모 모양을 눌러 색상을 선택하고, 투명도도 조절할 수 있어.
    • 그라디언트: 원하는 색상을 조합해서 그라디언트를 만들 수 있어.
    • 이미지: 컴퓨터에서 이미지를 불러와 도형 안에 채울 수 있어.
  • 스트로크 (Stroke): 도형 외곽선 두께와 색상을 설정할 수 있어.
  • 이펙트 (Effect): 그림자 효과를 줄 수 있어. 그림자의 가로/세로 위치, 흐림 정도, 퍼짐 정도, 색상까지 조절 가능해.
• 텍스트 툴 (T): 텍스트를 입력하고 편집할 수 있어.
  • 텍스트 박스 크기 조절: 무브 툴 상태에서 모서리를 드래그해서 조절해.
  • 글자 크기 조절: K 단축키를 누른 상태에서 모서리를 드래그하면 글자 크기가 자유롭게 변해.
  • 폰트 변경: 오른쪽 패널의 "Typography"에서 폰트명을 영문으로 검색해서 변경할 수 있어.
  • 줄 간격 (Line Height): 드래그로 조절 가능해.
  • 글자 간격 (Letter Spacing): 드래그로 조절 가능해.
  • 정렬 (Alignment): 왼쪽, 가운데, 오른쪽 정렬을 할 수 있어.
• 오토 레이아웃 (Auto Layout): 상세 페이지 만들 때 내용이 추가되거나 수정될 때 간격이 틀어지는 걸 방지해줘. 원하는 요소를 선택하고 오른쪽 패널에서 "Use Auto Layout"을 클릭하면 돼. 텍스트를 추가해도 간격이 그대로 유지돼서 편리해.
• 내보내기 (Export): 완성된 디자인은 "Export"에서 원하는 파일 형식(JPG 등)으로 내보낼 수 있어.

6. 미러링 기능 (모바일 실시간 확인)

상세 페이지 제작에 정말 꼭 필요한 기능이야! 모바일 화면에서 실시간으로 확인하며 작업할 수 있거든.

1. 피그마 앱을 다운로드 받아야 해.
2. 피그마 앱을 열고 "Login to Figma"를 누른 후 "Continue with mobile app"을 눌러.
3. 앱 화면에서 오른쪽 맨 아래 "Mirror"를 눌러줘.
4. PC에서 작업 중인 페이지를 띄우려면 PC 프레임을 클릭해.
5. "Begin Mirroring"을 누르면 모바일 화면에 작업 화면이 떠!
6. 이제 모바일 화면을 보면서 텍스트를 수정하거나 글자 크기를 조절하는 등 실시간으로 확인하며 작업할 수 있어.

오늘은 상세 페이지 제작 전에 꼭 알아야 할 피그마 기능들을 살펴봤어. 다음 영상에서는 피그마로 상세 페이지 만드는 과정을 직접 보여줄게! 다음 영상에서 보자!