지식재산권 침해,
당신은 아니라고요?
다음은 패튼위드의 랜딩페이지 카피라이팅입니다.
패튼위드는 의뢰분의 지식재산권을 책임지고 지켜주는 변리사 서비스를 제공하는 기업입니다.
패튼위드의 변리사와 같은 전문직분들도 변리사 홈페이지 제작을 위해 저희 아몽을 자주 찾아주시곤 합니다.
따로 아웃바운드 마케팅을 진행하지 않더라도 저희의 가치를 알아주시고 찾아주셔 매우 감사할 따름입니다. 다음은 패튼위드 대표님의 생생한 후기입니다.
패튼위드의 경우 윅스로 제작한 홈페이지가 있었지만 구매전환이 원활하게 이루어지지 않았습니다.
또한 인터넷상의 얼굴이라 부르는 홈페이지기에 리뉴얼을 통해 새롭게 단장하는 것을 원하셨습니다.
기존의 웹사이트와 리뉴얼된 웹사이트를 비교하면서 리뉴얼된 디자인은 이렇게 할 수밖에 없었던 이유와 얻을 수 있는 효과까지 상세하게 말씀드릴까 합니다.
다음과 같은 디자인을 하기에 저희 아몽을 인정해주시고 맡겨주시기에 홈페이지 리뉴얼에 관심이 있으신분은 끝까지 함께하면 좋을 것 같습니다.
패튼위드, 홈페이지 리뉴얼 사례 지금부터 시작하도록 하겠습니다.
패튼위드 Before & After
1. 히어로 페이지 (처음에 보이는 메인 화면)
메인 화면의 경우 홈페이지 사용자 90%는 3~5초만에 이탈하기에 그들의 이목을 집중시켜야하는 카피라이팅과 이미지가 있어야합니다.
기존 패튼위드 히어로 페이지는 다음과 같았습니다.
|
❌ Before page |
홈페이지 사용자는 절대로 홈페이지를 보는 것이 아닙니다. 훑는 것입니다.
너무 많은 텍스트가 사용자에게 거부감을 주기에 담고 싶은 내용을 하나도 읽지 않고 스크롤을 내릴 확률만 높였습니다.
아몽은 이를 어떻게 대처했을까요?
|
✅ After page |
한국 홈페이지 사용자의 시선은 왼쪽대각선에서 내려오는 식의 패턴을 가지고 있습니다.
또한 많은 텍스트가 아닌 짧은 문장안에 사람들의 공감을 불러일으킬만한 카피라이팅 + 강조 (하이라이팅)을 통해 사람들의 시선을 확 잡아두었습니다.
시선을 확 잡아두었다는 것은 바로 웹사이트 이용자의 이탈률을 잡았다는 소리와 일맥상통합니다.
2. 칼럼섹션
|
❌ Before page |
기존 칼럼 섹션의 경우 4단그리드를 사용했지만 설명 텍스트의 통일성이 맞지 않아 레이아웃의 안정성을 확보하기 어려웠습니다.
아몽은 텍스트를 다음과 같이 바꾸었습니다.
|
✅ After page |
픽토그램을 사용해 홈페이지 사용자의 가독성을 높였으며 하나의 페이지에 칼럼으로 바로 넘어갈 수 있는 섹션을 추가해 사용자의 경험(UX)을 편리하게 만들었습니다.
(픽토그램 : 모든 사람이 같은 그림을 보고 같은 의미를 생각하게 하는 아이콘)
3. 후기 섹션
구매를 불러일으키는 홈페이지의 경우 반드시 신뢰성을 제시하는 후기를 제시해야 합니다.
기존 패튼위드는 어떻게 후기를 제공했는지 보도록 하겠습니다.
|
❌ Before page |
이용후기 안에 내용은 충분히 신뢰성을 주고있지만 하나의 이미지로 한 페이지를 구성하고 있기에 디테일적인 디자인요소가 매우 부족하며 심심하기까지 했습니다.
또한 후기 사이에 있는 불필요한 여백으로 불필요한 스크롤 및 UI 디자인적으로 퀄리티가 많이 떨어졌습니다.
디자인 퀄리티가 부족하면 내용의 신뢰성이 감소될 가능성이 있기에 이를 보완했어야 합니다.
아몽은 부족한 디자인요소를 다음과 같이 채워 넣었습니다.
|
✅ After page |
칼럼섹션의 색상을 이어 받아 색감과 소제목의 중앙정렬을 통해 홈페이지 전체에 통일성을 부여했습니다.
통일성을 부여하므로 홈페이지 사용자는 안정감을 느끼게 됩니다.
통일성을 더해주는 2단그리드 사용으로 기존 후기 레이아웃보다 더 큰 안정감을 부여했습니다.
또한 불필요한 여백을 없애 UI 디자인 퀄리티를 상승시켰습니다.
4. 포트폴리오 섹션
|
❌ Before page |
아몽은 기존 포트폴리오와 비슷한 이용고객 페이지를 어떻게 하면 홈페이지를 이용하는 고객님들에게 더 와닿을 수 있을까 고민을 하였습니다.
그 결과 다음과 같은 섹션으로 바꾸기로 기획하였고 디자인 및 개발을 진행하였습니다.
|
✅ After page |
실제 사람들이 궁금해할 만한 상황을 가정하고 사람들의 심리를 자극하여 패튼위드의 칼럼을 읽게 만드는 페이지를 만들었습니다.
패튼위드의 칼럼을 읽게 만든다면 칼럼을 읽은 고객의 구매전환할 확률이 높아지기에 다음과 같은 페이지를 구성하였습니다.
이는 구매전략기획을 패튼위드와 아몽의 수많은 커뮤니케이션을 통해 만들었기에 가능했던 일입니다.
5. 문의 섹션
|
❌ Before page |
홈페이지 사용자가 처음 봤을 때 문의 페이지라고 보기 힘든 UI 디자인 및 불완전한 이미지 사용으로 인해 홈페이지에 안정감을 주기 어려웠습니다.
많은 홈페이지 이용자에게 혼란을 주었을 것 같은 문의페이지였습니다. 이런 문의 페이지는 아몽은 다음과 같이 바꾸었습니다.
|
✅ After page |
상담신청 위에 문의 신청 예시를 두어 사용자의 경험을 편리하게 만들었고 2단그리드 배치로 문의 신청서에 안정감을 부여했습니다.
또한 문의하기와 같은 CTA 버튼을 배치해 패튼위드의 문의버튼을 강조해 주었습니다.
(CTA : call to action으로 홈페이지 기획자가 원하는 행동을 사용자가 하도록 유도하는 행위)
다음은 아몽만이 제공할 수 있는 추가적인 디테일 사항입니다.
지금까지 읽으신 대표님께서는 분명 구매전환이 일어날 수밖에 없는 홈페이지를 가져가실 수 있다고 장담드리며 끝까지 함께해주시면 감사하겠습니다.
아몽이 제공하는 추가적인 Detail
1. SEO를 위한 OG image 세팅
구글 혹은 네이버와 같은 검색엔진에 잡히기 위해선 테크니컬 SEO부분도 확실히 잡아주어야 합니다.
OG image란 Open Grapic 이미지로 링크의 미리보기 썸네일, 제목, 추가설명(메타 디스크립션)을 책임지고 있습니다.
OG image와 같은 세세한 세팅은 저희 아몽이 제공하는 디테일 서비스 중 하나입니다.
과연 OG image를 어떻게 서비스를 제공하는지 함께 보도록 하겠습니다.
|
❌ Before OG image |
기존 OG image의 경우 타이틀 태그인 지식재산권 침해 내용증명 대응 | 패튼위드만 있으며 추가적인 설명인 메타디스크립션이 존재하지 않았습니다.
이는 테크니컬 SEO부분에 영향을 미칠 수 있기에 다음과 같이 추가해 주었습니다.
|
✅ After OG image |
아몽의 시그니처 서비스인 스큐어 모픽 + 플랫디자인의 형태인 뉴모피즘으로 표현해 누르고 싶게 만드는 효과까지 만들어드렸습니다.
2. 푸터 네비게이션 (Footer Navigation)
푸터 내비게이션이란 웹사이트 가장 하단에 위치해 있어 마치 발에서 제공하는 홈페이지의 약도라는 뜻입니다.
기존 패튼위드의 푸터 내비게이션은 다음과 같았습니다.
|
❌ Before Footer Navigation |
패튼위드의 정보가 어떤 것도 제공되어있지 않기 때문에 홈페이지 사용자에게 혼란을 줄 수 있었습니다.
또한 인스타그램 아이콘에 불안정한 배치는 사용자에게 역시 불편함만 주었습니다.
아몽은 푸터 내비게이션을 다음과 같이 바꾸었습니다.
|
✅ After Footer Navigation |
패튼위드의 정확한 사업자 정보를 푸터 내비게이션에 공지하였습니다.
또한 불안정한 배치에 있었던 인스타그램 아이콘을 홈페이지 전체 레이아웃 12단 그리드에서 패튼위드의 로고와 정반대되는 곳에 배치해 안정감을 부여하였습니다.
안정감을 부여한다는 의미는 홈페이지 사용자가 불편해하지 않는다는 것을 의미로 눈에 거슬리지 않게끔 만드는 것입니다.
지금까지 패튼위드의 홈페이지 리뉴얼사례를 함께 지켜보았습니다.
저렴한 가격에 홈페이지를 제작해주는 회사는 정말 많습니다. 하지만 대표님께 전하고 싶은 말씀이 있습니다.
웹사이트를 만들 때 홈페이지 제작비용 또한 아주 중요한 결정조건이라고 생각합니다.
하지만 홈페이지 제작비용만 기준을 두고 가장 우선순위에 두고 홈페이지 제작업체를 선정하지 않으셨으면 좋겠습니다.
앞으로 인터넷상의 대표님의 얼굴이 될 홈페이지는 다른 사람에게 별 볼일 없는 홈페이지가 되면 안 됩니다.
언제나 홈페이지 목적을 고려하시고 정말 내가 필요할 때 이유에 맞는 웹사이트 기획을 하시고 웹 에이전시에게 의뢰를 맡기셨으면 좋겠습니다.
저희와 가치관이 맞으시다면 언제든지 문의하시기 바랍니다.
긴 글 읽어주셔서 감사드리고 현명한 대표님의 문의 기다리도록 하겠습니다.
