[용산4기] 전Z전능 디지털마케터 과정 7주차 - 상세페이지 디자인

 

24.09.19.

- 상세페이지 디자인 툴 이해
- 상세페이지 디자인
- 프로젝트

---

피그마의 장점

1. 빠르고 가볍다

2. 작업의 자유로움

3. 협업의 용이함

- 같은 작업 공간에 접속해 실시간 동시 작업

- 코멘트 남기기와 실시간 채팅 기능

- 실시간 음성 대화 가능

- Ctrl+S가 필요 없는 툴

 

 

상세페이지 디자인에 꼭 고려해야 할 요소

1. 여백

- 위/아래 최소 100px 씩 주는 것을 권장.

2. 글씨의 강약조절 (860px 기준)

- 1순위 텍스트 : 60~100

- 2순위 텍스트 : 40~55

- 3순위 본문 : 28~36

- (봐도 안 봐도 상관없는) 서브 텍스트 : 20~24

* 폰트는 최소 10~2010~20 정도 차이 나야 함 : 위계의 차이를 둬야 시선이 멈춤

3. 블랙 계열로 위계 설정

- 1순위 텍스트 : #000000~#333333

- 2순위 텍스트 : #333333~#555555

- 3순위 본문 : #555555~#777777

- (크게 중요하지 않은) 텍스트 : #999999

+ 조금 더 효과적으로 표현하는 방법

1. 여백과 강약조절 넣기

2. 포인트 색 강조

3. 이해를 돕는 적절한 요소 추가 (아이콘, 일러스트 등)

 

* 레이아웃 예시

피그마 상세페이지 레이아웃

▲ 투명도 조절한 도형으로 텍스트 강조 (좌), 그러데이션 활용을 통한 텍스트 강조 (우)

 

* 상세페이지 실습 (삼분의일 이벤트 상세페이지 제작)

상세페이지 제작 예시

---

소감

 

1. 미감과 기획 그 사이, 마케터

분명 다들 콘텐츠에서 미감은 크게 중요하지 않다고 하는데 항상 보면 현업에 계신 분들의 미감이 상당하다. 디자이너와 협업을 해 보지 않아서 어느 수준까지 기획안을 만들어서 보여줘야 할진 모르겠다. 그리고 회사에서  "상세페이지 정도는 니가 만들 수 있잖아?"를 시전 하는 순간 나는... 나는... 개똥벌레에...

 

2. 멘토님 대박입니다

브릭스에잇에서 맡은 브랜드 상세페이지를 보면 진짜 미감이 뛰어나면서도 정보가 한눈에 들어오는 때가 많다. 그냥 단순히 그렇게 느끼는 게 아니라, 예전에 오픈마켓 모니터링을 하면서 봤던 타 브랜드의 상세페이지들과 비교가 되었다. 내가 봤을 때 오픈마켓에 올라간 상세페이지 중에서 잘 만든 건 극히 드물었다. 예쁨에 치중해서 필수적인 정보를 빼먹는다던가, 소구포인트를 살리지 못한 상세페이지를 달아놓는다던가 하는 그런 사례가 많았다. 그래서 참 그런 미감과 정보성의 밸런스를 맞추는 실력을 배우고 싶은데...