“와 이런 부분도 챙겨주시는 구나”
“미쳤다. 이런 부분은 정말 생각하지도 못했는데 역시 다르긴 하다”
이 말의 주인공은 과연 누구일까요? 바로 국내1위 마케팅업체 이상한 마케팅의 대표 자청님입니다.
안녕하세요 홈페이지, 랜딩페이지 전문 제작업체 아몽소프트웨어 입니다.
이상한마케팅은 전문직 마케팅 부분에서는 이미 국내 1위를 달리는 만큼 홈페이지의 퀄리티 또한 뛰어나야 된다고 생각했습니다.
다음은 홈페이지 리뉴얼 이전의 이상한마케팅의 홈페이지와 이후의 홈페이지입니다.
리뉴얼 이전의 이상한 마케팅의 홈페이지는 윅스로 구현한 홈페이지였던 것만큼 아쉬운 부분이 분명 있었습니다.
과연 어떤 부분이 아쉬웠고 아몽 블로그에 단,7개의 글만 발행했는데 이상한 마케팅 대표 자청님이 왜 아몽을 선택했는지 함께 살펴보도록 하겠습니다.
홈페이지 제작이 고민이신분이라면 분명 도움이 될 것이라고 자부드립니다.
이상한마케팅 홈페이지 리뉴얼 Before & After 사진
1. 히어로페이지 (처음에 보이는 홈페이지)
처음 보는 홈페이지에서 사용자 약 95%의 이탈율이 생기는 만큼 가장 중요한 히어로 페이지에서 저희는 사용자를 묶어놔야 합니다.
이전에 이상한마케팅 히어로 페이지는 다음과 같았습니다.
|
❌ Before page |
이상한마케팅의 대표 카피라이팅이 눈에 띄지만 디자인적으로 심심한 부분이 있었습니다. 과연 저희 아몽팀에서 어떻게 디자인 했을까요?
|
✅ After page |
.gif?type=w580)
아몽팀에서 제안한 디자인 기획은 총 2가지입니다.
1. 로딩페이지 생성 (전문직 마케팅을 전국에서 가장 잘하는 이상한마케팅 카피)
2. 움직임을 가지는 카피라이팅
2가지 요소를 통해 심심한 히어로페이지를 사용자가 홈페이지에 조금 더 머무르도록 만들었습니다.
2. 대표 칼럼 섹션
|
❌ Before page |
이상한마케팅의 카피는 너무 훌륭하지만 계속되는 1단그리드 사용으로 사용자에게 지루함을 줄 수 있었습니다.
지루함을 탈피하기 위해서 아몽 팀은 2단 그리드를 사용했습니다.
(2단 그리드: 쉽게 말해 2개로 나눠서 배치한다고 생각하시면 됩니다.)
|
✅ After page |
기존에 훌륭한 카피라이팅을 살려 텍스트를 구성했으며, 이미지를 추가적으로 구성해 지루함을 탈피하도록 만들었습니다.
3. 후기 섹션
기존 이상한마케팅 홈페이지의 경우 실제 후기란이 없었기에 처음 홈페이지에 들어온 사용자에게 주는 신뢰성이 부족했습니다.
신뢰성을 주기 위해 아몽은 후기섹션을 따로 구성했습니다.
|
✅ After page |
이상한마케팅의 실제 후기인 카카오톡 내용을 2가지를 고려해 배치했습니다.
1. 클릭 전에는 6개의 후기를 횡적으로 배치해 스크롤을 늘리지 않았습니다.
2. 사용자가 원하는 사진을 눌렀을 때 확대되는 사용자의 UX까지 고려했습니다.
(UX : user experience로 홈페이지를 사용하는 경험)
4. 포트폴리오 섹션
|
❌ Before page |
3단으로 그리드를 구성해 웹페이지의 단조로움을 피한건 좋았지만 포트폴리오 박스안에 temple, yes윤선생과 같은 네모박스를 또 만들었습니다.
그로인해 불필요한 여백이 생겨 디자인 퀄리티가 떨어졌습니다. 과연 아몽은 어떻게 해결했을까요?
|
✅ After page |
.gif?type=w580)
2단그리드 구성으로 홈페이지의 통일감을 부여하고, 박스를 제거했습니다.
또한 사진 혹은 텍스트로 마우스를 올렸을 때 살짝 올라오는 효과를 줘 세세한 디자인 포인트를 챙겼습니다.
5. 유튜브 영상 섹션
|
❌ Before page |
기존 홈페이지 유튜브 영상의 경우 자동으로 재생이 되어 UX를 고려하지 않는 영상이었습니다.
UX를 고려했을 때 저희 아몽이 선택한 방법은 다음과 같습니다.
|
✅ After page |
사용자가 클릭할 경우 유튜브 영상으로 갈 수 있는 링크 형식을 선택했습니다. 또한 계단식으로 레이아웃을 구성해 디자인의 단조로움을 피했습니다.
6. 문의 섹션
|
❌ Before page |
불필요한 여백과 통일성이 없는 박스가 눈에 띄었습니다. 이 부분을 저희 아몽은 다음과 같이 바꾸었습니다.
|
✅ After page |
불필요한 여백을 이미지로 대채했으며 강조가 다소 부족했던 CTA버튼을 이상한마케팅의 브랜드컬러를 이용해 강조했습니다.
(CTA : call to action으로 홈페이지 기획자가 원하는 행동을 사용자가 할 수있도록 유도하는 행위)
(위의 예시로는 문의하기 버튼이 있습니다.)
여기서 중요한 것은 웹 뿐만 아니라 모바일에서도 같은 퀄리티로 구현한 점입니다.
각 사용자의 모바일 폰의 화면크기에 맞게 홈페이지를 구현했습니다.
📱 아이폰 11 pro 기준
이상한마케팅 대표 자청님이 반한 디테일
자청님께서 반했던 사소한 디테일은 정말 많았습니다. 그 중에서도 가장 놀랍게 해드렸던 디테일은 소개해드리도록 하겠습니다.
지금까지 읽으신 분들께서는 홈페이지를 만들기위해 사용한 비용을 홈페이지가 벌어다 줄 것을 장담할 수 있습니다.
1. OG 이미지 세팅
먼저 OG이미지에 간략하게 설명하자면 다음과 같습니다.
Open Graphic image로 여러분께서 웹사이트 링크를 남겼을 때, 웹사이트 링크 밑에 보이는 사진들을 OG 이미지라 합니다.
그렇다면 리뉴얼전의 이상한마케팅의 OG이미지는 어땠을까요? 함께 만나보도록 하겠습니다.
|
❌ Before OG image |
이상한마케팅의 브랜드 네임도 다 나오지 않을 뿐더러 브랜드 아이콘 마저 화질이 좋지 않은 이미지를 사용한 것 같습니다.
아몽팀은 다음과 같이 개선사항을 제시했습니다.
|
✅ After OG image |
이상한 마케팅의 브랜드 아이콘과 브랜드 컬러를 사용해 스큐어 모픽 + 플랫디자인 (뉴모피즘) 의 형태로 표현했습니다.
뉴모피즘의 형태로 표현해 누르고 싶게 만드는 효과까지 챙겼습니다.
2. SEO 세팅
일부 홈페이지 제작업체의 경우 상세페이지를 개발을 하는 것이 아니라 이미지로 만들어 윅스, 네이버 모두와 같은 홈페이지 제작 tool을 이용해 붙여넣기하는 양심이 없게 상세페이지를 제작합니다.
이와 같이 상세페이지가 제작 된다면 SEO가 잡히지 않아 대표님의 상세페이지가 네이버, 구글과 같은 매체사에서 검색해도 나오지않을 경우가 높습니다.
구글이 아무리 뛰어나도, 이미지속 글자를 뽑아와 검색결과에 반영하진 않습니다.
(포트폴리오와 같은 상세페이지는 귀찮은 작업이 많기에 이런 작업을 합니다.)
물론 좋은 홈페이지 업체 회사들도 많지만, 이런 홈페이지 업체들도 있다는 것을 염두하고 계셨으면 좋겠습니다.
이런 점들이 있었기에 자청님은 저희 홈페이지 전문 개발팀인 아몽을 선택해주었습니다.
아몽이 홈페이지를 제작 기획할 때 가장 중요하게 생각하는 것은 바로 대표님의 홈페이지를 사용할 고객 research (탐색) 입니다.
이상한마케팅의 경우 사용자는 대부분 전문직군이기에 화려한 디자인보다는 조금 더 차분하고 정돈된 이미지를 주는 홈페이지가 적합하다라는 의견이 나왔습니다.
하지만 차분하고 정돈된 이미지는 홈페이지가 단조로워질 수 있는 단점이 분명 존재했습니다.
그 부분을 보완하기위해 포트폴리오에서 마우스를 올렸을 때 움직이는 작은 효과를 넣어주어 단조로움을 피했습니다.
(이를 마이크로 인터렉션이라고 부르기도 합니다.)
그 이후로 홈페이지 섹션배치 및 그에 맞는 디자인 기획 까지 순조롭게 진행했고 자청님과 꾸준한 커뮤니케이션과 피드백을 적극 반영하고 논의했습니다.
이상한마케팅 홈페이지 리뉴얼 프로젝트는 성공적으로 마무리 했습니다.
지금까지도 꾸준한 커뮤니케이션을 나누며 프로젝트를 진행하고 있습니다.
글을 마치기전에, 홈페이지 개발이 고민이신 대표님들께서 한 말씀만 드리고 싶습니다.
홈페이지 개발이 완료되면 끝인 관계가 아닌 계속해서 사업의 방향을 고민하며 함께 동행하는 파트너가 됐으면 좋겠습니다.
긴 글 읽어주셔서 감사드립니다