스마트스토어 상세페이지 제작에 도움되는 무료 툴 TOP3

스마트스토어 상세페이지 제작에 도움되는 무료 툴 TOP3

스마트스토어를 운영하면서 느끼는 점은, 툴을 잘 활용하면 할수록 시간을 효율적으로 쓸 수 있다는 것이었다. 처음엔 이것저것 유료툴도 많이 결제해보기도 했지만, 무료로도 충분히 잘 쓸 수 있는 도구들이 많았다.

 

오늘은 내가 스마트스토어 상세페이지를 만들 떼 자주 사용하는 무료 툴 3가지를 정리해 보았다.


1. 피그마(Figma)

피그마 변수 지정하기
피그마 변수 지정하기

말해 뭐 해. UI 디자인 툴 중에서는 아직도 피그마만큼 최적화된 도구는 없는 것 같다.

기본적인 기능 대부분이 무료로 제공되기 때문에, 별다른 결제 부담 없이 사용이 가능하다.

 

가장 큰 장점은 '컴포넌트화'를 통해 반복적인 작업을 줄일 수 있다는 점이다.

나처럼 제품마다 상세페이지 구성을 다르게 하더라도, 공통적으로 사용하는 아이콘이나 폰트 스타일이 있다면 컴포넌트(or변수)로 만들어두는 게 작업 시간을 줄이는 데 큰 도움이 된다.

 

또한 커뮤니티 기반의 플러그인도 풍부해서, 필요한 기능이 있다면 대부분 검색만으로 해결할 수 있다.

피그마 플러그인 관련해서는 별도로 정리해 둔 글이 있으니 필요하면 참고해 보길! 👇🏻

 

개인 사업자/기획자에게 유용한 피그마 플러그인 & 위젯 추천

온라인 판매를 하다보면 필수적으로 마주하게 되는 작업이 바로 상세페이지 제작이다.나는 포토샵 대신 피그마를 주로 활용하고 있고, 상세페이지를 만들 때 무료 플러그인과 위젯을 사용해 작

ai-for-everybody.tistory.com

 

 

2. Adobe Express

1) 배경 제거 기능

Adobe Express 배경 지우기 기능 사용중Adobe Express 배경 지우기 기능 사용 후
Adobe Express 배경 지우기 기능

가장 자주 사용하는 기능은 '배경 지우기'다.

제품만 따로 누끼 따고 싶을 때, 포토샵이나 피그마로 일일이 펜툴 작업을 하려면 시간도 오래 걸리고 번거롭다. 이럴 땐 Adobe Express의 배경 제거 기능을 활용하면 훨씬 간편하다.

 

다만 이미지 용량이 크면 제거 하는데 시간이 조금 걸린다는 점과, 누끼 따고 싶은 오브제를 선택할 수 없다는 점.

단색 배경에서 촬영된 이미지일수록 깔끔하게 잘 지워지기 때문에, 처음부터 흰색이나 밝은 단색 배경에서 촬영해 두는 것이 좋다.

 

2) 영상 > gif 변환

Adobe Express에서 mp4 영상 gif로 변환하기 1Adobe Express에서 mp4 영상 gif로 변환 후 layout 선택
Adobe Express에서 mp4 영상 gif로 변환하기

상세페이지에서 움직이는 이미지가 필요할 때가 종종 있다.

예전에는 아이폰으로 촬영한 짧은 영상을 프리미어로 편집해서 gif로 만들곤 했는데, 너무 번거로웠다.

 

Adobe Express에서는 영상 파일(mp4)을 바로 gif로 변환할 수 있고, 화질 선택도 가능하다. 고품질/중간품질/저품질로 나뉘어 있어서 상황에 맞게 사용할 수 있고, layout도 선택 가능. 간단한 gif를 빠르게 만들어야 할 때 정말 유용하다.

 

 

3. 크롬 확장 프로그램 - 색상 스포이드 도구

크롬 확장 프로그램 - 색상 스포이드 도구 활용법1크롬 확장 프로그램 - 색상 스포이드 도구 활용법2
크롬 확장 프로그램 - 색상 스포이드 도구 활용

상세페이지 컬러셋을 정할 때, 색감이 쉽게 떠오르지 않는 경우가 많다. (gpt에게 추천을 받을 수도 있지만, 마음에 들지 않는 경우도 많다) 이럴 땐 레퍼런스 이미지에서 원하는 색상을 추출해 보는 게 가장 빠르다.

 

물론 개발자 도구를 이용해서 hex code를 직접 확인할 수도 있겠지만, 이미지 파일인 경우 혹은 그것마저 귀찮은 경우 크롬 확장 프로그램인 '색상 스포이드 도구'를 사용하면 마우스로 클릭만 해도 바로 색상을 추출할 수 있다. hex code를 바로 카피도 가능해서, 복사만 해서 피그마에서 그대로 사용할 수도 있다.

 

비슷한 계열 색상을 골라 응용할 수 있어서 컬러 선택에 자주 활용하고 있다.

 

 

색상 스포이드 도구 - Chrome 웹 스토어

스포이드로 페이지에서 색상을 가져옵니다.

chromewebstore.google.com

 

 

4. 마무리

혼자 일하다 보면 결국 시간을 얼마나 효율적으로 쓰느냐가 관건이 된다.

한 푼이 아쉬운 1인 자영업자라면, 먼저 시간을 절약해 주는 도구부터 써보는 게 가장 현실적인 선택이라고 생각한다.

 

나 역시 다양한 툴을 테스트하면서 지금도 계속 실험 중이다. 앞으로도 업무 하는데 도움이 되는 도구들이 있다면 꾸준히 블로그에 공유해 보도록 하겠다.