상세페이지 제작할때 피그마 절대 쓰지마세요 | 온라인 셀러 상세페이지 디자인 transcript

상세 페이지 때문에 판매를 시작 못 할 정도로 고민이 많은데도 아직도 피그마를 모르신다고요 세상에 너무 깜짝 놀랐습니다 3년 동안 피그마로 상세 페이지를 만드셔야 한다고 계속 말씀드리고 있는데 많은 분들이 아직도 모른다는 말에 안 되겠다 다시 한번 제대로 알려 드려야겠다고 생각해서 이번 영상을 찍게 되었습니다 특히 이번 영상은 쿠팡 판매자 분들이라면 꼭 시청을 하셔야 되는데요 제가 알려드린이 방법으로 수강생 분들이 쿠팡으로 매출을 엄청 잘 내고 있거든요 대체 왜이 피그마로 상세 페이지를 만들어야 하는지 알려드리도록 하겠습니다 지금 보여 드린 건 정말 맛보기에 불가합니다 지금 보시는이 화면이 바로 피그마 오늘은 설치하는 방법 뭐 툴 사용법 이런 걸 알려 드리는게 아니라 왜 써야 하는지 보여 드릴 거거든요 아마 아실 겁니다 이런 이미지들을 제외하고는 거의 비슷하다는 걸요 먼저 설명드리려고 제가 요렇게 세 개를 가져왔는데요 왼쪽은 구조를 보여 드리고 싶어서 가져왔고요 가운데 있는 거는 제가 무료로 들었던 템플릿이고 오른쪽에 있는 건 실제 중국 과정 제가 강의에서 알려 드리는 컴포넌트까지 활용하셔도 요렇게 템플릿 활을 만들어 놓으신 걸 제가 가져왔습니다 왼쪽에 보시면 이렇게 프레임으로 하나씩 되어 있는 걸 확인하실 수 있는데요 여러분들 아직은이 프레임이라는 말도 생소하실테니까 제가 한 덩어리라고 얘기해 볼게요 이렇게 덩어리 덩어리로 만들어서 이미지 넣고 텍스트 넣고 이미지 넣고 텍스트 넣고 이게 끝이거든요 그럼 이걸 여러분들은 이제 이미지와 텍스트를 교체만 해서 사용하시면 되는 건데요 이걸 하나를 복사를 해서이 부분에 있는 이미지를 그냥 교체하시면 되는 거예요 그러면 기존에 만든 상세 페이지는 옆에 두고 또는 파일을 새로 만들고 그리고 이렇게 새로운 상세 페이지 작업을 하실 수 있는 거거든요 그럼 제가 지금 복사한이 화면을 가운데 있는요 내용으로 한번 교체를 해 보겠습니다 자 먼저이 상세 상단 부분은 저희가 지금 오른쪽에 보면 표지가 없죠 그래서 우선은 삭제를 하고이 부분부터 오른쪽에 있는요 내용으로 한번 바꿔 볼게요이 타이틀 부분이 보면 블러 세럼은 수분함량 80% 되어 있죠 자 이렇게 해놓고 가운데 있는 이미지도 지금 이제 필요가 없으니까요 모두 버리고 오른쪽에 있는 것처럼 이렇게 네모 박스로 해서 해야 되는데 아래에 있는이 프레임이라는 걸 선택해서 그냥 요렇게 그려 주시면 됩니다 그려서 여기에 이미지를 넣으시면 돼요 지금 제가 생만 우선 칠해 둘게요 자 그러면 다를 거 없이 여러분들은 어떤 상세 페이지에서는 이렇게 배경을 삭제한 이미지로 넣으실 수도 있고 또는 이렇게 배경이 있는 채로 그대로 넣으실 수도 있죠 그래서 이렇게 상세 페이지에 맞춰서 그냥 조금씩만 변형하면 바로 이렇게 사용을 할 수 있게 됩니다이 두 번째에 있는 화면을이 오른쪽에 있는 두 번째 이미지로 전 체로 한번 넣는 걸 한번 해 볼게요 자 먼저요 이미지 제가 복사해다가 여기에 넣겠습니다 그럼 이렇게 이미지가 컨트롤 CV 해도 요렇게 들어와요 그리고 필요 없는 부분 삭제하고 전체를 이렇게 했더니 이제 텍스트를 넣을 자리가 없죠 그래서 필요 없는 것들 좀 지워 줄게요 자 그리고 이제 텍스트를 좀 위로 올리겠습니다 그리고 영역만 저희는 이렇게 위치만 조금 변경해 주면 되겠죠 그리고 배경색은 이제이 그레이가 들어가야 되니까요이 프레임을 선택하고 가장 큰 덩어리입니다 선택한 다음에이 필리라 곳에서 색을 스포이드 툴로 요렇게 해 주시면 한 덩어리에 이제 이미지가 되죠 그러면 지금 보시면이 배경에 그라데이션이 들어가 있다 보니까 색이 지금 맞지가 않죠 사실 이런 그라데이션 만드는 부분도 제가 영상에 여러 번 올려 드리긴 했습니다 자 이렇게 채워져야 되는 부분에 박스를 하나 그려서 조금만 더 영역을 넓게 이렇게 그려 줍니다 그런 다음에 아까 필 영역에서 두 번째 있는요 아이콘이 그라디언트에 그래서 요걸 딱 선택하면 그라데이션을 넣을 수 있게 나옵니다 자 요렇게 한번 위치를 좀 변경하고 색을 찍어 볼게요 자 요런 식으로 찍고 여기도 찍겠습니다 자 벌써 느낌이 나오기 시작하죠 그럼 저희는 이렇게 왔다 갔다 하면서 맞는 부분에 대해서 이렇게 위치를 잡아 주시면 됩니다 자 끝에 부분이 끝부분이 조금 어둡고 여기도 조금 어둡고 가운데가 가장 밝죠 그래서 가운데 한번 찍고 가운데 한번 색을 넣어 주고요 다시 한번 끝에 있는 부분도요 끝에 맞춰서 그리고이 부분도 여기 있는 끝에 맞춰서 자 요런 식으로 변경을 하시면 자 요렇게 바뀌는 거 보이시죠 자 이렇게 경계를 없애실 수 있어요 지금 여러분들 어렵게 보이실 수 있지만 이거는 가장 기본적인 툴 사용법만 배우시면 하실 수 있는 부분입니다 자 이렇게 되면 벌써 오른쪽에 있던이 부분이 왼쪽처럼 바뀌었어요 그럼 여러분들 제품만 바꿔서 이렇게 활용하실 수 있겠죠 그래 요렇게 만든다면 실제이 상세 페이지는 첫 번째 있던 이거를 복사만 해서 바꿨기 때문에 엄청나게 빠르게 상세 페이지를 만들 수가 있겠죠 사실 가장 기본적인 틀만 만들어 놓으면 중간에 조금 더 상세하게 들어간 부분들은 한 두 개씩 추가해서 끼워 넣기만 하면 됩니다 자 여기까지만 하고요 그다음을 한번 해 볼게요이 부분은 제가 템플릿으로 드렸던 부분인데 물론 요거 하나만 드린 건 아닙니다 보시면 왼쪽에 # 모양이 있는 걸 프레임이라고 하고요 여기 위에 보시면 이렇게 선으로 그려져 있는게 오토 레이아웃이라 건데요 여러분들 아직 오토 레이아웃은 어렵겠지만 이게 어떤 기능 인지만 제가 보여 드릴게요 이거는 자동으로 정렬을 해 주고 위치를 변경하면 자동으로 위치에 맞춰서도 여백을 조절해 줍니다 예를 들어이 첫 번째 제가 작업을 했는데 순서가 바뀌어야 된다 하시면 그냥 요렇게 끌어다 가만 놓으면 이런 식으로 변경하실 수 있어요 요렇게 바로바로 변경이 되죠 그리고 만약에 나는이 하나가 필요 없다 하시면 삭제를 해도 되지만 눈만 끄면 자동으로 이렇게 아래 남을 수 있는 옆에까지 조절을 해 줍니다이 기능이 사실 피그마에서 어 가장 핵심 기능 중에 또 하나예요 이런 식으로 또 다시 프레임에 눈을 켜 주면 이렇게 늘어납니다 그럼 저희가 다른 프로그램에서도 마찬가지고 포토샵도 마찬가지예요 이렇게 하나씩 늘리고 줄이려면 일부러 내가 늘려서 거기에 껴 넣어야만 사실 가능한데이 피그마는 그렇지 않다는 거죠 여러분들 보세요 요렇게 상품 효과라는이 프레임 오토 레이아웃이 적용된 프레임을 선택하고 오른쪽을 보면 이렇게 여백이 나옵니다요 영역이 오토 레이아웃 영역이에요 가운데 있는 영역을 이렇게 왔다 갔다 수치를 바꾸면 자동으로 관련된 애들이 변경이 됩니다 그럼 여러분들 어 난 여기가 조금 더 줄었으면 좋겠다 그러면 각각이 세 개는 같은 콘텐츠이기 때문에 동일하게 줄어 둬야겠죠 그런데 보통은 여러분들 여기 줄이고 또 하나 줄이고 하다 보면 정렬도 안 맞고 당연히이 여백도 안 맞고 삐뚤삐뚤 하셨을 거예요 하지만 여기서는 이제 여기만 숫자만 수정을 해 주면 동일하게 다 수정이 됩니다 자 그래서이 오토 레이아웃 기능을 활용해서 상세 페이지를 만들어 두시 복사를 해서 사용을 할 때도이 부분은 이제 나는 이번에는 필요 없겠다 하시면 눈을 끄시고 삭제를 하시면 되는 거죠 자 그러면 제가 이렇게 간단하게 설명을 드렸지만 실제 수강생분께서 어떻게 활용하셨습니다 여기 보시면 왼쪽에 한번 볼게요 여기도 오토 레이아웃이 걸려 있죠 안쪽에도 보면 요렇게 세 개의 큰 덩어리로 만드셨어요 하나는 리뷰 하나는 이렇게 관심 사로잡기 쓰셨고 마지막에 있는이 부분은 포인트 1 2 3 4 나열하신 거거든요 근데 제가 이제 뒷부분도 삭제하고 우선 1번만 가져왔습니다 자 이렇게 보면요 두 개는 오토 레이아웃이 걸려 있고 마지막은 걸려 있지 않습니다 꼭 걸어야 되는 건 아니고 여러분들이 필요에 따라서 만들어 주시면 되는 거기 때문이에요 여기에 보시면 이제 이거를 알려 드리려고 하는 거예요 이게 바로 컴포넌트라고 여러분들이 컴포넌트라고 활용을 하시면 원본을 만들어서 복사본 저희는 이제 이거 표현을 할 때 원본은 부모 복사본은 자식이라고 얘기를 하거든요이 복사본을 가지고 계속해서 작업을 하실 수 있어요 지금도 보면 이거는 원본이지만 뒤에 있는요 녀석은 복사본 입니다 보시면 어떻게 알 수 있냐면 앞에 있는 아이콘을 가지고 알 수 있어요 앞에 있는 아이콘이 마름모가네 개가 모여 있는게 부모 그다음에 하나짜리 큰 덩어리로 되어 있고 가운데가 뚫려 있는게 자식입니다 그래서이 부분을 폰트의 색상을 모두 바꾸고 싶다 라던가 폰트를 전부 바꾸고 싶다 하실 때이 원본에서 수정을 하면 이제이 복사본들을 다 수정이 되는 거예요 한번 해 볼게요 자 이렇게 보시면 제가 지금 빨간색 으로 수정을 했더니 아래도 보시면 바뀌었죠 다시 한번 안에 있는 색을 바꿔 보도록 하겠습니다 자 선택을 해서 렇게 약간 갈색 빛으로 바꿔 보겠습니다 자 이렇게 바꿨더니 아래 있는 부분도 바뀌었죠 자 요런 식으로 여러분들이 하나의 원본을 만들어서 계속해서 복사를 해서 쓰게 되면 다른 상세 페이지에서 상품을 만들 때 여러분들은 요거를 통째로 다 복사를 해서 가져간 다음에 색을 한 번에 바실 있다는 거예요 당연히 아까도 말씀드린 것처럼 폰트 자체도 바꾸실 수 있습니다 지금은 지마켓 산수로 되어 있는데요 프리텐다드 바꿔 볼게요 자 프리텐다드 바꾸게 되면 보시면 바뀐게 보이시죠 여기도 바뀌었죠 하나만 제대로 만들어 놓으면 사용할 수 있다는 얘기입니다 그럼 이렇게 간단하게 제가 설명을 드렸으니까 현재 판매되고 있는 어떤 분의 상세 페이지를 제가 예시로 간단하게 한번 만들어 볼 거예요 저와는 아무 관련이 없고 누구신지 모르시 지만 예시로 사용할 수 있도록 해 주셔서 우선 감사드리겠습니다 먼저 제가 드린요 템플릿을 하나 가져오겠습니다 맨땅에서 하시면 힘드니까 제가 무료로 템플릿 드린 거 영상에도 있고요 그리고 제 강의에서는 모든 섹션을 다 제공하고 있습니다 그럼 해 보도록 할게요이 반복적인게 보이실 거예요 타이틀 이미지 그리고 타이틀 이미지 여기도 마찬가지죠 두 개는 거의 똑같죠 자 이렇게 반복되고 있는 부분이 보이는데 하나 만들고 그다음은 반복이 그래서 한번 시작해 보도록 하겠습니다이 표지 부분에 있는 중에 가장 중요한지이 자죠 먼저이 표지 부분은 프레임을 그려서 한번 해보도록 하겠습니다 자 프레임을 선택하고 이렇게 드래그를 한 다음에 오른쪽에 있는 레이아웃이라고 되어 있는 부분에 780이라고 그려 준 다음에 이미지를 우선 올리겠습니다 이미지는 우선요 보행으로 하진 않을 거고요 우선은 옆에 있는 이미지를 그대로 적용할 겁니다 자 요런 식으로 우선 넣고요 텍스트를 크게 먼저 써 주겠습니다 6을 선택하고 여기서 숫자로 해서 늘리셔도 되지만 이런 식으로 크게 작업이 필요할 때는 단축기 KL 눌러서 그냥 요렇게 키우셔도 됩니다 정말 쉽게 할 거니까 잘 보세요이 자를 선택하고요 컨트롤 D 눌러서 하나를 복사를 합니다 컨트롤 D 복사 붙여 넣기를 한 번에 할 수 있는 단축키입니다 자 렇게 하신 다음에요 색상을 우선 저는 여기는 이미지지만 우선 색으로 한번 해 볼 거예요 색으로 빨간색을 한번 요렇게 선택을 하고요 그리고 반을 가려 줄 거예요 방법이 여러 가지가 있는데 좀 쉽게 그냥 프레임으로 해 볼게요 오른쪽 마우스 눌러서 프레임을 선택한 다음에요이 레이아웃에 보시면 클릭 컨텐츠라는게 있습니다 요것만 딱 선택을 한 다음에는 이렇게 반으로 가릴 수가 있어요 절단이 됐죠 그러면 여기처럼 이미지를 그냥 넣기만 하면 끝납니다 자 요런 식으로 만드실 수 있어요 자 이거는 제가 지금 만드는 방법만 보여 드리려고 한 거니까요 우선 여기에 맞춰서 제가 색을 조금 변경을 하겠습니다 텍스트는 제가 드린이 템플릿에서 그냥 더블 클릭해서 가져오셔도 되고요 직접 쓰셔도 됩니다 그런데 굳이 직접 안 쓰셔도 가져와서 쓰시면 되겠죠 왜냐면 폰트 사이즈가 아직 감이 없으시기 때문에 되어 있는 걸 가져다 쓰시는게 가장 좋아요 그리고 고 색만 요렇게 변경하겠습니다 그리고 타이틀이 들어가야 되니까 여기도 마찬가지로 복사해서 가져와서 붙이겠습니다 자 이런 식으로 해서 색만 여기에서 잘 보일 수 있도록 변경을 해 주시면 되는데요 여기 보면 색도 이렇게 제가 쓸 수 있도록 템플릿을 해서 드렸는데 없으셔도 오른쪽에 있는이 필 영역에서 색은 넣어 주시면 됩니다 요런 식으로요 색을 넣을 때는 필에서 넣어 주시면 돼요 표지가 끝났 자 이미지 위치나 이런 것들은 지금 바꾸지 않을게요 바꾸는 방법도 또 알려 드려야 되는 거기 때문에 이런 부분들은 그냥 가겠습니다 자 이런 식으로 만드시면 됩니다 자 물론이 텍스트들이 잘 보이기 위해서 그라데이션 하나 넣어 주면 좋습니다 그런 것들도 제가 다 유튜브 영상에 올려 놨어요 자 그다음에 이제이 두 번째 부분을 해 볼 건데요 안쪽에 이렇게 둥근 박스가 들어 있죠 오른쪽에 있는 걸 복사해서 가져오겠습니다 가져온 다음에 밑에는 우선 다 버릴게요 다 버리면 요렇게 딱 하나만 남죠 자이 상태에서요 템플릿이 860이라는 스마트 스토어 사이즈 든요 그러면 전체를 7805 변경을 해서 진행을 해야겠죠 단축키 KL 눌러서 여기에서 780 눌러 주면 바로 렇게 사이즈는 조절이 됩니다 자이 상태에서 이제 오른쪽처럼 이렇게 가운데 들어가는 원형 박스를 하나 만들어 볼게요 프레임을 하나 선택을 하고 안쪽에다 이렇게 그리 습니다 그리니까 알아서 여백이 늘어나고 있죠 자이 상태로 색을 우선 하나 그레이를 줘 볼게요 저희는 배경이 흰색이 안 보여서 그레이를 준 거예요 오른쪽에 보시면이 부분 어피어런스 아고 부이는요 부분이에요 여기에서 사이즈만 주시면 요렇게 전체가 둥글려니다 좀 더 줘 볼까요 60 정도 줘 볼게요 자 그러면 요렇게 둥글려 있죠 지금 제가 하는게 아마 처음 보시는 분들 상당히 어려우실 수 있어요 근데요 기초 과정 이 부분에 대해서만 아시면 계속해서 반복이기 때문에 더 이상 배우실게 없습니다 미리 캔버스를 배우던 또는 캠버를 배우던 이런 기본적인 것들은 처음에 다 모르시고 시작하시나요 그거하고 동일하다고 보시면 됩니다 자 이렇게 하고 안쪽에 넣어야 되는데이 안쪽도 아직은 힘드실 수 있어요 그래서 지금 보시는 것처럼 제가 이미 템플릿에서 양쪽에 놓는 이런 사이즈들을 드립니다 템플릿에는 정말 그냥 가져다 쓸 수 있는 여러 가지 것들이 있어요 그래서 그런 것들 그냥 가져다가 요렇게 얹어서 쓰시면 됩니다 그래서 실제 제가 지금 여기 그렸지만 그리지 않고도 사용할 수 있다는 거 잠깐 말씀드리고요 자 요렇게 프레임을 선택한 상태에서 안에 넣어야 되니까요 다시 프레임을 선택해서 요렇게 그리겠습니다 그리고 색을 흰색으로 넣어 줄게요 그런 다음에 이제 텍스트가 들어가야 되죠 텍스트도 저희는 아직 모르니까 상단에 있는 요거를 선택해서 가져와서 이곳에 넣겠습니다 자 이렇게 넣고 사이즈가 지금 너무 크죠 그래서 사이즈만 30 정도로 줄여 줄게요 그리고 정렬이 왼쪽으로 되어야지 여기처럼 나오니까 왼쪽 정렬을 하겠습니다 자 요렇게 했다면 이제이 두 개가 정렬만 잘 되면 되겠죠 렇게 왔다 갔다 하시면 빨간색 라인 보이죠 이게 이제 정렬이 잘 됐다는 얘기입니다 이상 상태로 사실은 그냥 하셔도 되지만 아래 보시면 하나가 더 있잖아요이 하나를 더 만들려면 이게 한 덩어리로 되어 있으면 복사를 해서 쓰기가 훨씬 좋겠죠 안 그러면 하나 복사하고 또 복사를 해야 되니까요이 두 개를 선택하고 오른쪽에 있는이 아이콘이 오토 레이아웃 아이콘입니다 얘를 딱 눌러지면 알아서 가운데 정렬이 되면서 지금 요렇게 잘 맞춰졌어요 오른쪽에 보시면 오토 레이아웃이라게 활성화가 됐죠 자 여기서 이제 정리해 주시면 됩니다 자이 상태에서 이제는 요거를 컨트롤 D 또는 복사를 해서 이렇게 가져오시면 한 덩어리를 더 만들 수 있는 거예요 자 이렇게 만들었지만 예를 들어서 나는 지그재그로 하고 싶다라고 하시면 여기에서 안에 있는 텍스트든 면이든 그냥 끌어다가 위치만 바꾸면 지그재그가 가능합니다 이렇게 하나 만들어 두면 여러분 계속 그냥 복사 붙여 넣기 해서 이미지만 변경할 수 있어요 그리고 가장 장점은 또 이렇게 한 화면에 다 보인다는 거죠 가독성을 보려면 실제 모바일에서 어떻게 나오는지 확인을 해야 되는데 다른 것들은 그게 좀 힘들잖아요 피그마는 모바일에서 실제 화면을 보실 수가 있습니다 클릭을 해서 모바일에서 보면서 저희가 실시간으로 사이즈나 색상을 변경하실 수가 있어요 어떠셨나요 여러분 이렇게 하나 만들고 나면 다음부터는 되게 쉬워지거나 분들이 쿠팡에서 상세 페이지는 별로 중요하지 않다고 하지만 그중에서 도 잘 판매하시는 분들은 그냥 올리지 않습니다 한번 제대로 만들어 보는게 정말 중요해요 앞으로의 시간을 절약하고 여러분들의 매출을 올리기 위해 꼭 판매에 필요한 기능만 딱 익혀서 도움 받으셨으면 좋겠습니다 그럼 오늘도 구독 좋아요 잊지 마시고 다음 영상에서 또 찾아오도록 하겠습니다 감사합니다