[02주_2024_10_29] 랜딩페이지 & 버튼

2024년 10월 28일 ( Tuesday )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶디자인 카타 진행하기
🩶 강의듣기 및 과제
🩶 TIL 작성 및 제출하기
[팀플]
🩶 저녁 팀 스크럼(회고)
🩶 팀원들 TIL 댓글달기

---

랜딩페이지란?

첫 방문자의 서비스 이해도를 높이고 이탈이 아닌 전환을 발생시키기 위해 중요한 것이 랜딩페이지임.

• 랜딩페이지를 적절히 구성하여 방문자의 주의를 산만하게 하지 않고 핵심적인 메시지를 전달해 원하는 액션(Action)을 유도할 수 있어야 함
• 랜딩페이지 구성요소
  • 4~6개의 섹션으로 구성
  • 섹션마다 배경 색상을 교차해서 사용
  • 글이 많을 경우, 좌우로 번갈아가며 정렬 / 글이 많지 않을 경우, 중앙 정렬이 흔하게 볼 수 있음
  • 윗 부분 50%에 최선의 노력을 기울여, 방문자에게 꼭 전달하고 싶은 핵심적인 내용을 모두 담아낼 수 있어야 함
  • PC보다 모바일 우선
• 섹션에 들어가야 할 요소
  • 명확하고 강력한 헤드라인 (핵심 메시지를 담음)
  • 서비스의 핵심 가치를 설명하는 텍스트 ( CTA 메시지, 사용자가 얻을 수 있는 혜택을 관한 간단명료한 설명 등)
  • 이미지
  • 명확한 콜투액션 버튼(CTA)
• 랜딩페이지와 홈페이지의 차이점
  • 홈페이지는 여러 요소가 있는 반면 랜딩페이지는 단일 마케팅 혹은 상품 판매 목적으로 CTA를 유도하는데 더 적합
• 랜딩페이지 종류
  • 잠재 고객 발굴
    • 잠재 고객을 형성하기 위한 랜딩페이지로, 사용자에게 쿠폰, 뉴스레터 등을 보내 콜투액션을 이끌어 낼 수 있음
  • 참여
    • 내가 원하는 콜투액션에 사용자가 참여할 수 있게 유도하는 랜딩페이지로, 사용자가 클릭을 통해 구매하기, 둘러보기 등 내가 원하는 액션을 취할 수 있게 해야 함
  • 유지
    • 기존 사용자를 유지하기 위한 목적으로 고객을 유지하기 위한 랜딩페이지로, 기존에 뜸했던 사용자를 다시 불러들일 수 있음. 예를 들면 쇼핑물에서 신규회원뿐만아니라 기존회원도 포함하여 할인쿠폰을 증정하여 '다운로드' CTA(콜투액션) 메시지를 클릭하여 기존 회원을 유지할 수 있음

 

컴포넌트

 

1. 체크박스
   
   • 체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컨포넌트임
   • 일반적으로 라벨과 함께 쓰임
   • 기본적으로 2가지 의사 상태를 가지지만, 자세하게 설계하면 더 많은 상태를 가질 수도 있음
   • 체크박스 특징
     • 여러개 선택 가능
     • 아무것도 선택 하지 않아도 가능
     • 하위 항목이 있을 때, 일부만 선택할 수 있음 ➜ 상위 항목을 선택하면 하위가 모두 선택됨
       • 하위 항목 일부를 체크하거나 해제하면 상위 항목의 상태가 ‘결정되지 않은’ 이라는 뜻의 Indetermined 상태로 변함
2. 라디오
   • 옛날 라디오 버튼의 형태와 작동 방식에서 유래
   • 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트임
   • 일반적으로 라벨과 함께 쓰임
   • 체크박스와 마찬가지로 자세하게 설계하면 더  많은 상태를 가질 수 있음
   • 라디오의 특징
     • 라디오는 여러개를 동시에 선택할 수 없음
     • 라디오는 아무것도 선택하지 않는 게 불가능 (사용자가 많이 선택하는 항목을 기본값으로 설정하기)

 

 

 

---

🫠 오늘 진행하며 어려웠던 부분!

오늘 캠프를 진행하면서 어려웠던 부분은 랜딩페이지 개념과 버튼 만들기였습니다ㅠㅠ

팀원들과 이야기하면서 랜딩페이지에 대한 개념을 알게 되었다고 생각했는데 디자인카타 때 래퍼런스발표를 했었는데 제가 찾은건 웹페이지라고 하셨습니다. (랜딩페이지란 무엇이란 말인가......∑(;°Д°) UI/UX 너란 녀석 너무 어렵다...)

평소 이론과 실무는 완전 1다르다라는 생각을 가지고 실습 위주로 진행하는데 랜딩페이지 이후로 이론도 중요하다는 것을 알게 되었습니다.

오후에는 강의를 듣고 버튼을 만드는 과제가 있었는데 강의 들으면서 하면 잘 진행되었는데 아무 도움없이 처음부터 끝까지 하기 어렵다라고 생각이 들었습니다. 쉬우면 쉬운 과제였는데 아직 익숙하지 않은 툴페이스로 헤매는 부분이 많았던거 같습니다. 강의를 빨리 완주하여 이번주는 강의 없이 툴 사용할 수 있도록 하는 것이 목표입니다!

🤔궁금한 점!

 Q) 웹페이지라고 하신 말씀이 홈페이지를 뜻하시는건가? ➜ 검색해보니 그런거 같음

 Q) 홈페이지랑 웹페이지는 다른가? ➜ 개념은 다르지만 연관성은 있음

 

😆새로 알게 된 사실!

웹 사이트와 홈페이지, 웹 페이지는 모두 다른 개념이라는 사실!

• 웹 사이트(website): 여러 웹 페이지들의 모음 ➜ 웹페이지를 도메인으로 연결시킴
  • 일반적으로 웹 사이트는 여러 웹 페이지로 구성되어 있으며, 페이지마다 서로 다른 정보를 담고 있음
• 홈페이지(homepage): 웹 사이트에 도착한 방문자가 가장 먼저 보게 되는 페이지
  • 일반적으로 웹 사이트의 개요와 웹 사이트 내의 다른 페이지들에 대한 링크가 포함되어 있음
• 웹 페이지(web page): 단일페이지
  • 홈페이지는 웹페이지에 포함됨
  • 현재 페이지에서 홈페이지로 이동하게 되면 다른 웹페이지로 넘어가는 것이지만, 여전히 동일한 웹 사이트 내 있는 것
• UI/UX 디자인할 때 2배수, 4배수, 8배수 사용안하고 페선트로 활용해도 상관없음

 

---

💭내일 계획

 🤍 디자인 카타 진행하기

 🤍강의 복습하기

 🤍 TIL 작성 및 제출하기