AI로 상세페이지 디자인하는 방법 (2편)
지난 포스팅에 이어,
AI 활용해서 제품 상세페이지 만들기 시리즈 (2)
1. 제품 정하기 & 타겟/정보 수집하기 → 이전 글
2. 내용 기획하기 → 이전 글
3. 이미지 수정/생성하기 → 현재 글
4. 본격적인 상세 페이지 디자인
5. 썸네일 이미지, 제품명 정하기
※ 기획자가 따로 있다면 기획안 그대로 디자인만 하면 됨. 이 시리즈는 1인 제작자 기준 프로세스임.
지난 단계 내용 :
https://brunch.co.kr/@needesign/270
AI 부분 활용 + 나머지 수작업
기존의 상세 페이지 자동으로 만드는 각종 서비스를 사용하지 않고 이렇게 AI를 부분부분 사용하면서 수작업 하는 이유
1. 웹사이트 서비스 안 쓰고 수작업 하는 이유
이름 까먹었는데 이런 웹사이트 있었음. 제품 정보를 입력하면 그걸 바탕으로 상세페이지 완성본 뚝딱 만들어주는 웹사이트.
실제로 써서 완성본을 만들어보지는 못했음. 입력해야 할 것들이 너무 많아서 중간에 그냥 포기했음.
예상컨데 결과물도 100% 마음에 들지는 않았을 것 같음. 일부 내 마음에 들때까지 부분 수정을 하긴 했었어야 할 것 같음. 이 서비스도 어쨌거나 동일한 AI를 활용해서 내용 기획을 하는 것이기 때문에 아마도 그럴것이라고 예상함.
2. 템플릿 활용하지 않고 수작업 하는 이유
어쩌다 한번 상세페이지를 만드는 경우에야 이 방법도 나쁘지는 않겠지만 개인 쇼핑몰을 운영하고 있어서 올려야할 제품이 많다거나, 다른 상세 페이지와 너무 똑같아지는 것이 싫을 경우 이 방법 또한 적합한 방법은 아님.
1. 레이아웃 그리기
디자인 시작은 화면에 용소 배치하는 것 부터. 처음부터 예쁘게 만들 필요 없음.
섹션 나누기 - (예) 문제제기 섹션, 제품 이미지 나열 섹션, 타사 비교분석 센션, 리뷰 섹션 등
각 섹션에 이미지, 텍스트가 어디에 어떻게 들어갈지만 대략적으로 배치하기
정렬, 비율, 여백 감각만 잡기
2. 폰트 종류, 크기 정하기
이때도 디테일 욕심 X
준비된 글을 그대로 복사, 붙여넣기 하기
폰트 1~2개 정도 골라서 적용하기
글자 크기 구분하기 : 중요한 문구 → 크게 / 설명 → 작게
지금은 완성도보다 가독성이 우선.
3. 참고용 이미지·아이콘 넣기
사진 들어갈 부분에 참고용 이미지로 채워두기. 아직 AI 이미지 생성 안 해도 됨.
[이미지]
구글링 해서 참고용 이미지 찾아보기
모델 포즈 검색해보기. 참고할 만한 사진 있으면 피그마에 옮겨두기.
제품 각도 검색해보기. 이 때 제품 자체 뿐만 아니라 배경 포함한 사진의 전반적 분위기도 참고할 만한 사진이 있다면 그것도 피그마에 옮겨두기.
각 이미지 영역에 방금 찾은 사진들 중 “원하는 느낌”의 사진 배치하기
[아이콘]
무료 소스 웹사이트에서 찾아보기 - freepik
피그마 플러그인에서 찾아보기 - feather icon 등
4. AI로 실제 사용할 이미지 생성하기
본격적으로 이미지 생성 시작.
제미나이에게 특정 이미지 생성 요청할 때 아까 구글링해 둔 참고 이미지를 보여줘도 됨. 미드져니 등 다른 AI 툴 사용해도 됨.
5. 세부적 부분 꾸미기
필수 요소는 다 들어갔으니 이제 디테일 손보기. 이 단계에서 완성도가 갈림
(예)
세부적인 부분 색상 정하기 및 수정 - 폰트나 배경색 등
네모난 영역의 모서리 둥글게
텍스트의 특정 문구 강조 색 주기 / 굵기 두껍게 또는 얇게
그림자, 배경 색 추가하기
이 과정에서 사진, 폰트, 문두 등을 더 나은 방향으로 수정할 수 있음.
6. 마지막 점검하기
이 단계 건너뛰면 디자인은 반쪽짜리 완성임. 마지막에 꼭 체크하기
PC에서 잘 보이는가? 모바일에서도 글자 잘 보이는가? – (예) 이미지 깨지거나 어색한 곳 없는가? 오타는 없는가? 등.
전체 흐름 다시 한 번 읽어보기
중간중간 사진, 폰트, 문구 등 더 나은 방향으로 수정하고 싶어질 것임. 물론 수정해도 됨 (기획자가 따로 없다면). 수정했다고 해서 실수가 아니라 아주 자연스럽고 정상적인 디자인 흐름임.
쇼핑몰 상세페이지, 기획자 없이 혼자 다 만들어야 할 때 어디서부터 어떻게 해야 할지 막막했다면 이 시리즈 저장해두고 보시길.
주의사항
본 상세페이지 제작 방법을 모든 경우에 사용할 수 없음.
이 방법은 오픈 플랫폼에 올릴 제품 상세페이지 제작용으로 적합한 제작방법임.
오픈 플랫폼/쇼핑몰
쿠팡, 스마트 스토어와 같은 오픈 플랫폼의 경우, 이런식으로 제작해도 됨.
개인 쇼핑몰
다만, 개인 쇼핑몰의 경우에는 해당 쇼핑몰 내의 상품 상세페이지들이 전체적으로 특정 디자인 컨셉을 가지고 있는 경우 많음. 그럴 경우 그 디자인 컨셉, 브랜딩 철학과 방향을 맞추는 것이 좋음.
절대 안되는 것은 아니지만 다른 제품 상세페이지와 너무 다른 상세페이지가 생기면 해당 브랜딩 일관성을 해칠 수 있음.
다음편 예고:
이미지 생성 경우의 수, 프롬프트 예시
상세 페이지 하나 만드는데 평균 몇시간/몇일 걸릴까? 상세페이지 3개 만드는 시간 측정해보기
나머지 목차
