피그마+챗GPT로 초보자도 가능한 네이버 스마트스토어 로고 만들기

피그마+챗GPT로 초보자도 가능한 네이버 스마트스토어 로고 만들기
피그마+챗GPT로 초보자도 가능한 네이버 스마트스토어 로고 만들기

 

블로그에 올라온 글들을 보면 알겠지만, 나는 혼자서 이것저것 쫌쫌따리로 하고 있는 1인 프리랜서(?)다.

최근에는 스마트스토어 스토어 입점을 조금씩 준비 중인데, 가장 먼저 신경 쓰이는 부분이 스토어 로고였다.

 

물론 처음에는 상품 노출과 판매가 더 중요하겠지만, 나중에는 브랜딩 포인트 + 깔끔한 인상을 줄 수 있는 포인트라고 생각해서 이번에는 GPT의 이미지 생성 기능과 피그마를 활용해 직접 스토어 로고를 만들어보았다.


 

1. 네이버 스마트스토어 권장 사이즈

먼저, 네이버 스마트스토어에서 권장하는 스토어 로고 사이즈를 확인한다.

구분 사이즈 (px)
모바일 80~400 x 80~110
PC 30~400 x 20~90

 

네이버 스마트스토어 로고 권장 사이즈
네이버 스마트스토어 로고 권장 사이즈

 

사이즈가 굉장히 애매하게 나와있는데, 관리의 편의성을 위해서 모바일과 PC 모두 하나의 사이즈와 이미지로 통일해서 사용하기로 했다.

최종적으로 400 x 90 사이즈로 작업을 진행했다.

 

 

2. 챗GPT에서 로고용 이미지 만들기

스토어 배너에 사용할 로고 이미지는 챗GPT의 이미지 생성 기능을 이용해 만들기로 했다.

스토어 이름만 알려주고 로고를 만들어달라고 할 경우, 추상적인 결과물이 나올 수 있어서 스토어의 분위기와 판매할 품목을 구체적으로 입력해주는 것이 중요하다.

 

1) 내가 챗GPT에 입력한 조건

  • 주로 잡화 판매하는 스토어
  • 전체 분위기는 웜톤, 파스텔톤 계열로 따뜻하게
  • 로고는 텍스트 없이, 심플한 일러스트 느낌으로 요청
  • 참고용으로 사용할 색상코드(hex code)도 함께 요청
  • 배경 없는 png 파일로 생성 요청

만약 나처럼 이미지를 따로 만들어 조합할게 아니라면, 그냥 스토어명이 들어간 로고를 만들어달라고 요청해도 상관없다.

단, 한국어 텍스트 렌더링은 잘 깨지는 편이라 스토어명이 '영어'일 경우에만 추천한다.

 

직접 만들고 싶은데 이미지와 텍스트 배치가 어려울 것 같다면, 샘플 로고를 요청 후 피그마에서 리터치하는 방법도 있다.

이 때는 아이콘 수정이 필요할 수 있으니 svg 버전으로 생성 요청하면 좋다.

나는 챗GPT에 레퍼런스 이미지와 함께 요청했고, 결과물을 바탕으로 로고를 재구성했다.

 

2) 결과

예시 이미지이며 실제로 사용한 로고는 아님!예시 이미지이며 실제로 사용한 로고는 아님!
예시 이미지이며 실제로 사용한 로고는 아님! (스토어명은 일부 삭제)

  • GPT가 제안한 색상은 부드러운 베이지, 연한 핑크, 따뜻한 브라운 톤
  • 로고용 이미지도 너무 복잡하지 않고, 심플한 아이콘 스타일로 잘 나옴!
만약 추천받은 색상 코드가 마음에 들지 않는다면, Color Hunt 같은 사이트나 피그마 플러그인을 활용하여 직접 색 조합을 찾는 것도 괜찮은 방법이다.

 

 

3. 피그마에서 최종 편집하기

이미지를 준비한 뒤에는 내가 평소에 자주 쓰는 피그마를 활용해 편집했다. 포토샵이나 캔바 등 다른 툴로도 충분히 가능하니, 평소에 사용하는 UI툴을 활용하면 된다. 만약 UI툴에 익숙하지 않다면 캔바나 미리캔버스를 추천한다.

 

1) 작업 과정

피그마에서 스마트스토어 로고 작업 예시
피그마에서 스마트스토어 로고 작업 예시

  • 프레임 사이즈 설정 : 400x90px로 설정
  • 로고 및 텍스트 : 생각보다 크지 않기 때문에, 프레임에 꽉 차도록 만들어야함
  • 전체 색상 톤 맞추기 : 배경색과 텍스트 색을 GPT가 추천한 색상 코드에 맞춰 조정
  • 배경색 : 투명으로 작업(스마트 스토어에서 배경색 지정)
폰트는 '눈누'에서 찾으면 된다. 상업적 이용(로고 사용)이 가능한지 꼭 확인 후 사용할 것!

 

2) 업로드 및 확인

스마트스토어에 로고 업로드 예시
스마트스토어에 로고 업로드 예시

완성된 이미지를 스마트스토어에 업로드한 뒤, 모바일 버전과 PC 버전 모두 미리 보기로 확인했다.

스토어 이름 > 로고형 선택 후 모바일과 PC 버전 각각 업로드하면 된다.

 

 

4. 마무리 : 직접 만드는 것 어렵지 않다

GPT와 피그마를 활용하면 몇 분만에도 금방 수월하게 로고를 만들 수 있다.

특히 GPT에 스토어 분위기를 미리 알려주고 이미지를 생성하면 최종 결과물의 통일감을 높이는 데 큰 도움이 된다. 

 

확실히 느낀건 GPT 이미지 생성 기능이 업데이트되면서, 1인 제작자나 프리랜서들이 적은 시간을 투자해도 충분히 콘텐츠를 뽑아낼 수 있게 됐다. 업무 효율성을 생각한다면, GPT를 적극 활용해보시길!