피그마 상세페이지 제작 방법

디자인위브

안녕하세요, 디자인 부입니다 😊
오늘은 디자인을 처음 접하는 분들, 혹은 디자인 툴을 잘 다루지 못하지만 직접 상세 페이지를 제작해보고 싶은 분들을 위한 꿀팁을 공유드리려 합니다. 특히 제품 사진이 없는 상황에서도 생성형 AI를 활용해 고퀄리티 이미지를 만들고, 피그마(Figma)로 실전형 상세 페이지를 제작하는 방법까지 모두 다룰 거예요.

이번 영상은 실무 중심으로 당장 써먹을 수 있는 기능들만 콕콕 집어 소개하고, 초보자도 따라할 수 있도록 쉽고 자세하게 설명해 드렸습니다. 그리고 영상 속에서 소개한 템플릿도 무료로 공유해드리니, 복습하며 직접 피그마로 상세 페이지를 만들어보세요!

피그마 바로가기👆

1. 피그마에 대한 관심, 왜 이렇게 높아졌을까?

유튜브를 시작하며 피그마 콘텐츠 시장을 조사하던 중, 기획자, 1인 사업가, 콘텐츠 크리에이터 등 다양한 분야에서 피그마에 대한 관심이 급증하고 있다는 사실을 알게 되었습니다. 피그마는 디자이너뿐 아니라 디자인 비전공자도 쉽게 접근할 수 있는 도구로, 특히 실무에 필요한 기능만 골라 빠르게 적용할 수 있다는 점에서 큰 장점이 있어요.

저 역시도 실무 프로젝트, 특히 이커머스 상세 페이지 제작 프로젝트를 통해 피그마를 처음 접했고, 여유 있게 학습할 시간이 없었기 때문에 정말 필요한 기능만 뽑아서 집중적으로 익혔습니다. 그래서 오늘 알려드릴 방법 역시, 실용성을 중심으로 구성되었습니다.

2. 제품 사진 없이 고퀄리티 이미지 만드는 법

디자인위브

제품 사진이 없다고 상세 페이지를 포기할 수는 없겠죠? 요즘은 생성형 AI를 활용해 포토샵이나 촬영 장비 없이도 멋진 이미지를 만들어낼 수 있습니다. 챗GPT와 Adobe Firefly를 활용하는 방법은 다음과 같습니다.

• Step 1: 챗GPT에게 원하는 이미지 스타일을 설명하며 프롬프트를 생성합니다.
• Step 2: 만들어진 프롬프트를 Firefly 사이트에 붙여넣고 이미지 생성 버튼을 클릭합니다.
• Step 3: 참고 이미지를 추가해 보다 정확한 스타일링이 가능하게 합니다.
• Step 4: 생성된 이미지 중 마음에 드는 이미지를 선택해 다운로드합니다.

이 방법을 활용하면 제품이 없어도 브랜드에 어울리는 이미지, 분위기 있는 컨셉 컷을 손쉽게 만들 수 있어요.

3. 피그마로 상세 페이지 실전 제작 시작!

디자인위브

이미지를 준비했다면 이제 본격적으로 상세 페이지를 제작할 차례입니다. 피그마는 처음 보는 사람에게는 다소 낯설 수 있지만, 기본 프레임 설정부터 이미지 배치, 오토 레이아웃까지 순서대로 따라하면 금방 익숙해질 수 있어요.

① 프레임 설정

• 하단 툴바에서 프레임 툴(F)을 선택 후, 사이즈를 가로 860, 세로 1400으로 지정
• 단축키 Ctrl + D 혹은 Cmd + D로 프레임을 복사하여 여러 개 구성

② 텍스트 삽입 및 스타일 적용

• 폰트: 빛고을광주, 카페24, 프리텐다드 등
• 폰트 사이즈, 자간, 행간 설정으로 가독성 강화
• 가운데 정렬을 통해 텍스트 밸런스 조정

③ AI 이미지 삽입 및 배경 제거

• 이미지를 프레임에 삽입하고, 플러그인 ‘Remove BG’ 실행
• 배경 제거 후 드롭 섀도우 효과로 고급스럽게 마무리

4. 오토 레이아웃을 사용한 효율적인 디자인

오토 레이아웃 기능은 콘텐츠가 추가되거나 삭제될 때, 수동으로 위치를 조정할 필요 없이 자동 정렬이 되는 기능입니다. 실무에서는 반복되는 작업이 많기 때문에 오토 레이아웃을 활용하면 작업 시간을 크게 줄일 수 있어요.

• 텍스트 그룹 또는 이미지와 텍스트를 선택해 ‘오토 레이아웃’ 적용
• 간격, 패딩, 정렬 옵션을 활용해 균형 잡힌 구성 완성
• 프레임 전체를 오토 레이아웃으로 설정하여 가변 레이아웃 구성

특히 다양한 화면 사이즈에 맞춰 디자인을 유연하게 적용할 수 있어, 반응형 웹 또는 다양한 디바이스에 대응하는 상세 페이지 제작에도 매우 유용합니다.

5. 다양한 플러그인으로 시각적 완성도 UP

디자인위브

피그마는 다양한 플러그인을 통해 일러스트, 아이콘, 배경 제거, 이펙트 등 다양한 작업을 도와줍니다. 영상에서는 다음과 같은 플러그인을 사용했어요.

• Icon8 – 일러스트, 아이콘 검색 및 삽입
• Phosphor Icons – 체크박스, 강조 아이콘 등 추가
• Remove BG – 이미지 배경 제거

플러그인을 잘 활용하면, 피그마 하나로도 포토샵 못지않은 시각적 완성도를 가질 수 있습니다.

6. 무료 템플릿으로 복습하면서 실전 연습!

영상이 너무 길거나 따라하기 어려우신 분들을 위해 무료 템플릿을 제공해 드립니다. 고정 댓글에 링크가 있으니 꼭 확인해보세요!

템플릿에는 영상에서 소개한 오토 레이아웃, 프레임 설정, 폰트 스타일링, 이미지 배치 등이 모두 포함되어 있어 복습하거나 응용할 때 정말 유용합니다.

7. 마무리하며 – 피그마, 생각보다 쉽고 강력합니다

처음 피그마를 접하면 어려울 수 있지만, 이번 영상처럼 따라 하면서 자연스럽게 익히다 보면 어느새 상세 페이지 한두 개쯤은 뚝딱 만들 수 있을 거예요.

피그마는 단순한 디자인 툴이 아니라, 실무에 바로 써먹을 수 있는 ‘생산성 툴’입니다. 특히 1인 사업가나 마케터, 기획자에게는 없어서는 안 될 무기죠. AI 이미지 제작 도구와 결합해 사용한다면 시간은 줄이고 결과물의 퀄리티는 높일 수 있는 최고의 조합이기도 하고요.

앞으로도 제 채널에서는 피그마 기초부터 실전에서 바로 쓸 수 있는 꿀팁, 플러그인 추천, 작업 효율화 노하우까지 다양한 콘텐츠를 준비하고 있습니다. 구독과 좋아요는 큰 힘이 됩니다 😊

궁금한 점은 댓글로 남겨주세요. 가능한 한 빠르게 답변 드릴게요!

그럼 다음 영상에서 만나요. 감사합니다 🙏

피그마 바로가기👆