피그마 상세페이지, 상세뚝딱과 연동해서 빠르게 만드는 법
안녕하세요, 상세뚝딱팀입니다. 피그마로 상세페이지를 만들어 본 분들은 공통된 고민을 하나씩 갖고 계십니다. 레이아웃과 디테일을 마음대로 다듬을 수 있어서 좋지만, 처음부터 모든 섹션을 직접 그려야 해서 시간이 오래 걸린다는 점입니다. 반대로 템플릿 기반 도구는 빠르지만 세부 수정에서 아쉬움을 느끼기도 합니다. 그래서 두 도구의 장점을 이어서 쓰는 방법을 찾는 분들이 많습니다. 상세뚝딱 에디터에는 이 둘을 잇기 위한 "피그마로 편집" 버튼이 있습니다. 이 글에서는 어떤 상황에 어떤 도구가 어울리는지, 그리고 실제로 어떤 순서로 작업을 이어 가는지 화면과 함께 정리했습니다.
피그마와 상세뚝딱, 역할을 나누면 편해집니다
먼저 두 도구가 잘하는 일을 구분해 보면 작업 방향이 분명해집니다.
정리하면 큰 구조와 문구, 반복적인 수정은 상세뚝딱에서 하고, 간격과 정렬 같은 미세한 디자인과 브랜드 전용 요소는 피그마에서 다듬는 방식입니다. 처음부터 끝까지 한 도구로만 하려고 하면 어느 쪽이든 비효율이 생깁니다. 필요한 부분에서만 도구를 바꿔 쓰는 것이 핵심입니다.
피그마 상세페이지 작업, 이렇게 이어집니다
- 상세뚝딱에서 초안 제작: 템플릿으로 전체 구조와 문구를 빠르게 만듭니다.
- "피그마로 편집" 클릭: 에디터 상단의 버튼을 누르면 작업이 저장됩니다.
- 플러그인 작업 내역에서 불러오기: 저장이 완료되면 상세뚝딱 피그마 플러그인의 작업 내역에서 최신 수정본을 불러올 수 있습니다.
- 피그마에서 세부 수정: 간격, 이미지 배치, 브랜드 요소처럼 손이 많이 가는 부분을 다듬습니다.
1단계. 상세뚝딱에서 초안을 만든다
전체 구조를 처음부터 피그마에서 그릴 필요는 없습니다. 아래 화면처럼 에디터의 블럭 패널에서 섹션 템플릿을 골라 붙이고, 텍스트를 더블클릭해서 문구를 바꾸면 초안이 빠르게 완성됩니다. 화면 오른쪽 위에 "피그마로 편집" 버튼이 보입니다.
2단계. "피그마로 편집"을 누른다
버튼을 누르면 작업이 저장되고 안내 창이 열립니다. 창에는 "저장이 완료되면 상세뚝딱 플러그인의 작업 내역에서 최신 수정본을 불러올 수 있어요."라는 설명과 함께 튜토리얼 보기, 플러그인 바로가기 버튼이 있어서 처음 쓰는 분도 순서를 확인하며 따라갈 수 있습니다.
3단계. 플러그인에서 최신 수정본을 불러온다
피그마에서 상세뚝딱 플러그인을 열면 작업 내역이 나옵니다. 여기서 방금 저장한 최신 수정본을 불러오면 됩니다. 플러그인 설치와 사용 방법은 안내 창의 튜토리얼에서 확인할 수 있으니, 처음에는 한 페이지만 먼저 연동해 보고 흐름을 익히는 것을 추천합니다.
4단계. 피그마에서 세부 디자인을 다듬는다
간격, 정렬, 이미지 배치처럼 손이 많이 가는 부분을 피그마에서 다듬습니다. 팀에 디자이너가 있다면 이 단계를 디자이너에게 넘기고, 셀러는 구조와 카피에 집중하는 식으로 협업할 수도 있습니다.
단계별로 어떤 도구를 쓰면 좋을까
아래 표는 작업 단계별로 어울리는 도구를 정리한 것입니다. 정답이 있는 것은 아니지만, 처음 정할 때 기준으로 삼기에 좋습니다.
특히 5단계의 "업로드 후 자잘한 수정"은 상세뚝딱 에디터에서 하는 편이 빠릅니다. 이미 올린 상세페이지의 문구 한 줄을 고치려고 피그마 파일을 다시 열기보다, 에디터에서 텍스트를 더블클릭해 바로 바꾸고 다시 저장하는 편이 훨씬 가볍기 때문입니다.
연동 전 준비 체크리스트
준비 단계에서 가장 중요한 것은 "저장 먼저"입니다. "피그마로 편집"을 누르면 작업이 저장되고, 저장이 끝난 뒤에야 플러그인에서 최신 수정본을 불러올 수 있기 때문입니다. 안내 창의 설명대로 저장이 완료된 뒤에 플러그인 작업 내역에서 불러오세요.
이런 분께 맞습니다
- 피그마에 익숙하지만 상세페이지 전체를 직접 그리기는 부담스러운 분
- 템플릿으로 빠르게 초안을 만들고, 디테일만 피그마에서 다듬고 싶은 분
- 디자이너와 셀러가 같은 결과물을 놓고 협업하는 팀
반대로 피그마를 전혀 쓰지 않는 분이라면 굳이 연동하지 않아도 됩니다. 상세뚝딱 에디터만으로도 문구 수정, 페이지 추가, 컬러·폰트 일괄 변경, 마켓 규격 저장까지 가능하기 때문입니다.
작업할 때의 팁
- 큰 구조와 문구는 상세뚝딱에서, 미세한 디자인은 피그마에서 나누면 효율적입니다.
- 수정 후에는 마켓 규격에 맞는 너비로 저장하는 단계를 잊지 마세요. 마켓별 너비는 상세뚝딱 다운로드 화면에서 선택할 수 있습니다.
- 버전을 구분해서 작업하세요. 피그마와 에디터를 오가며 수정하면 어느 쪽이 최신인지 헷갈릴 수 있으니, 기준이 되는 작업본을 미리 정해 두는 것이 좋습니다.
- 한 번에 전부 옮기지 말고 한 페이지씩 연동해 흐름을 익히세요.
마치며
도구는 결국 목적을 위한 수단입니다. 피그마로 모든 것을 직접 만들 필요도, 템플릿만으로 모든 요구를 맞출 필요도 없습니다. 이렇게 질문해 보세요. 지금 시간이 가장 많이 드는 작업은 무엇일까? 그 작업은 구조와 문구일까요, 아니면 미세한 디자인일까요? 시간이 가장 많이 드는 부분을 더 잘하는 도구에게 맡기면 작업은 훨씬 가벼워집니다. 먼저 템플릿으로 초안부터 만들어 보세요.
