피그마 사용법, 상세페이지 만들 때 꼭 알아야 할 기본 5가지
안녕하세요, 상세뚝딱팀입니다. 상세페이지를 직접 만들어 보겠다고 마음먹고 피그마를 열었는데, 빈 화면 앞에서 무엇부터 해야 할지 막막했던 경험이 있으신가요? 피그마는 디자이너를 위한 도구로 알려져 있지만, 기본 개념 몇 가지만 알면 셀러도 상세페이지 한 장 정도는 충분히 만들 수 있습니다. 이 글에서는 피그마 사용법 중에서 상세페이지를 만들 때 꼭 필요한 기본 개념, 작업 순서, 흔한 실수를 정리하고, 처음부터 직접 그리는 방식이 부담스러울 때 상세뚝딱 템플릿과 이어서 쓰는 방법까지 소개합니다. (피그마의 화면 구성과 단축키는 업데이트에 따라 달라질 수 있어, 이 글의 설명은 일반적인 기본 기준입니다.)
1. 피그마를 처음 열면 알아야 할 것
피그마는 웹 브라우저나 데스크톱 앱에서 쓰는 디자인 도구입니다. 화면은 크게 왼쪽의 레이어 목록, 가운데 작업 영역(캔버스), 오른쪽의 속성 패널로 나뉩니다. 처음에는 모든 메뉴를 익히려 하지 말고 아래 다섯 가지 개념만 이해하면 충분합니다.
프레임
프레임은 작업을 담는 도화지입니다. 상세페이지에서는 마켓에 올릴 이미지의 가로 너비를 프레임에 정해 두고, 그 안에 내용을 채워 넣습니다. 일반적으로 도구 막대에서 프레임을 선택하거나 단축키 F를 누른 뒤 캔버스에서 드래그해서 만듭니다.
레이어
레이어는 프레임 안에 쌓이는 요소(텍스트, 이미지, 도형)의 목록입니다. 왼쪽 패널에서 순서와 이름을 관리합니다. 레이어 이름을 "첫 화면", "후기 영역"처럼 의미 있게 붙여 두면 나중에 수정할 때 훨씬 편합니다.
오토 레이아웃
오토 레이아웃은 내용에 맞춰 간격과 크기가 자동으로 조정되는 기능입니다. 문구가 길어져도 아래 요소가 자동으로 밀려나기 때문에 상세페이지처럼 세로로 길게 이어지는 작업에 특히 유용합니다. 보통 요소를 선택한 뒤 단축키 Shift+A로 적용합니다.
컴포넌트
컴포넌트는 한 번 만들어 재사용하는 부품입니다. 후기 카드나 버튼처럼 같은 모양이 반복되는 요소를 컴포넌트로 만들어 두면 하나를 고칠 때 복사본이 함께 바뀝니다.
내보내기
작업이 끝나면 오른쪽 패널의 내보내기(Export) 설정으로 이미지 파일을 저장합니다. 포맷과 배율을 선택할 수 있습니다. 마켓에 올릴 때는 해당 마켓의 이미지 안내(너비, 용량, 형식)를 먼저 확인하세요.
2. 상세페이지 한 장을 만드는 순서
처음 만들 때는 아래 흐름을 따라가면 헤매는 시간이 크게 줄어듭니다.
- 프레임 만들기: 올릴 마켓의 권장 너비로 프레임을 만듭니다. 상세뚝딱 다운로드 화면 기준으로 네이버 스마트스토어와 지마켓은 860px, 쿠팡은 780px, 11번가는 800px처럼 마켓마다 다릅니다. 마켓 정책은 바뀔 수 있으니 판매자센터의 최신 안내를 함께 확인하세요.
- 섹션을 프레임으로 나누기: 한 번에 길게 그리지 말고, 첫 화면, 사용 장면, 사양, 후기, 안내처럼 섹션마다 프레임을 만들어 세로로 쌓습니다.
- 텍스트와 이미지 채우기: 텍스트 도구(T)로 문구를 쓰고 이미지를 가져와 배치합니다.
- 오토 레이아웃으로 정리: 간격이 일정하도록 오토 레이아웃을 적용합니다.
- 내보내기: 섹션 단위 또는 전체로 이미지를 저장합니다.
시작 전 체크리스트
작업 전에 아래 항목을 확인해 두면 중간에 다시 만들 일이 줄어듭니다.
3. 처음 쓸 때 자주 하는 실수
- 프레임 없이 요소를 바로 배치: 내보낼 때 범위가 어긋날 수 있습니다. 항상 프레임 안에 만드세요.
- 글꼴과 크기를 매번 다르게 지정: 제목과 본문의 글꼴·크기를 정해 두고 반복해서 쓰면 통일감이 생깁니다.
- 모바일에서 읽히는 크기를 확인하지 않음: 상세페이지는 대부분 모바일에서 봅니다. 글자가 너무 작지 않은지 확인하세요.
- 이미지를 너무 크게 가져옴: 파일이 무거워지면 작업과 업로드가 느려집니다.
- 저장한 파일을 확대해서 확인하지 않음: 내보낸 뒤 글자가 흐릿하지 않은지 한 번 확인하세요.
4. 처음부터 그리는 게 부담스럽다면
피그마의 가장 큰 장점은 자유도이지만, 그만큼 모든 구조를 직접 만들어야 합니다. 상세페이지 한 장을 처음부터 그리려면 레이아웃, 간격, 문구 배치까지 모두 직접 정해야 해서 초보에게는 시간이 많이 듭니다. 아래 비교를 참고해서 상황에 맞는 방식을 고르세요.
그래서 많은 분들이 구조와 문구는 템플릿으로 빠르게 만들고, 세밀한 디자인만 피그마에서 다듬는 방식을 선택합니다. 상세뚝딱 에디터에서는 블럭 템플릿으로 초안을 만들고, 텍스트를 더블클릭해 문구를 바꾸고, "+ 페이지 추가"로 섹션을 늘릴 수 있습니다. 화면 오른쪽 위에는 피그마로 편집 버튼이 있습니다.
5. 상세뚝딱에서 피그마로 이어서 작업하기
"피그마로 편집"을 누르면 작업이 저장되고 안내 창이 열립니다. 창에는 "저장이 완료되면 상세뚝딱 플러그인의 작업 내역에서 최신 수정본을 불러올 수 있어요."라는 설명과 함께 튜토리얼 보기, 플러그인 바로가기 버튼이 있어서 처음 쓰는 분도 순서를 확인하며 따라갈 수 있습니다.
전체 흐름은 아래와 같습니다. 상세뚝딱에서 초안을 만들고, 피그마로 편집을 눌러 저장하고, 플러그인 작업 내역에서 최신 수정본을 불러와 피그마에서 세부 디자인을 다듬는 순서입니다.
플러그인 설치와 사용 방법은 안내 창의 튜토리얼에서 확인할 수 있습니다. 처음에는 한 페이지만 먼저 연동해 보고 흐름을 익히는 것을 추천합니다. 연동 방법과 단계별 도구 활용은 "피그마 상세페이지, 상세뚝딱과 연동해서 빠르게 만드는 법" 글에서 더 자세히 다루고 있으니 함께 참고하세요.
6. 오늘 바로 해볼 것
- 피그마에서 프레임 하나를 만들고 가로 너비를 정해 보기
- 섹션 프레임 세 개를 세로로 쌓고 레이어 이름 붙이기
- 텍스트 하나에 오토 레이아웃 적용해 보기
- 내보내기로 이미지를 저장하고 확대해서 확인하기
- 시간이 부담된다면 상세뚝딱 템플릿으로 초안을 만들고 "피그마로 편집"으로 이어가기
마치며
피그마는 처음에는 낯설지만 핵심 개념 다섯 가지만 익히면 상세페이지 한 장 정도는 충분히 만들 수 있습니다. 지금 만들려는 상세페이지를 떠올리며 이렇게 물어보세요. 내가 시간을 쓰고 싶은 부분은 구조와 문구일까, 아니면 세밀한 디자인일까? 처음부터 직접 그리는 방식이 지금 상황에 맞을까, 템플릿에서 시작하는 편이 나을까? 어느 쪽이든 처음에는 한 페이지만 완성해 보는 것이 가장 빠른 학습 방법입니다.
