[본캠프 2주차] 화요일 TIL

10/29 일일 목표📝

 

디자인 카타 '랜딩페이지'

피그마 3~6주차 강의듣기

 

---

 

 

📖 오늘 배운 내용

 

디자인 카타에서 랜딩페이지에 대해 발표하고, 튜터님의 설명을 듣게되었다.

다른 사람들이 찾아온 랜딩페이지들을 보니, 좋은 예시든 나쁜 예시이든 공부하기 좋은 것 같다.

 

랜딩페이지

• 어떠한 상품이나 서비스를 홍보하는 목적의 제작물
• 깔끔한 디자인을 유지하는 것이 사용자의 목적의 명확성을 높이는데 중요

랜딩페이지와 홈페이지

 

 

랜딩페이지 메인, 즉 히어로섹션에는 목적이 정확한 한가지를 유도하는 것들이 설명되어 있는 반면, 홈페이지 내에서는 홍보를 위한 여러가지 배너들을 붙여놓는 섹션을 메인에 늘어 놓은 것을 볼 수 있다.

 

 

 

랜딩페이지의 목적에 따라 왼쪽 사진처럼 버튼으로 사용자들을 신청, 구독을 유도할 수 있고 오른쪽 사진에 있는 예시들 처럼 제품이나 브랜드를 홍보하는 용도로 사용할 수 있다.

 

 

 

팝업(Pop up)이란?  현재 화면 위에 새로운 화면을 띄우는 것

 

팝업의 두가지 종류

• 윈도우 팝업 : 예시 오른쪽사진 처럼 윈도우 창을 띄우는 형식. 악성 프로그램 차단으로 요즘 잘 쓰지 않는 추세라고한다.
• 레이어 팝업 : 코드로 만든 팝업을 띄워주는 형식. 대부분 레이어팝업으로 사용

 

모달(Modal)이란? 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것

 

모달의 종류

• 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용

 

왼쪽)팝업예시 오른쪽)모달예시

 

 

 

모달 사용시 주의사항

• 사용자가 원래 사용하던 화면을 이용할 수 없게 묶어두고, 행동을 하기 전까지 숨겨진 화면을 조작할 수 없다.
• 사용자의 흐름을 방해하는 것이며, 모달이 많이 사용될수록 사용자가 불편해 할 수 있다.
• 반드시 필요한 상황에 모달을 사용해야 한다.

 

4주차 과제로 만들어본 로그인화면과 다이얼로그화면

 

 

 

---

 

 

👩‍🏫 오늘 진행하며 어려웠던 부분

 

디자인카타 첫 발표를 하기 전까지는 랜딩페이지와 홈페이지의 차이를 몰랐다. 그래서 내가 찾아간 것들이 랜딩페이지가 맞는지 헷갈렸다.

모달과 팝업의 차이도 처음에 들었을 때 아직 명확히 구분이 가기 힘들었다. 비슷한 개념인 것 같지만 사용하는 방법이 달라 내가 디자인을 할 때 어느때에 팝업을, 모달을 사용해야 하는지 아직은 잘 모르겠다.

 

 

 

 

---

 

👀 어려웠던 부분을 어떻게 해결했을까?

 

디자인카타시간에 각자 찾아온 랜딩페이지와 홈페이지를 비교해가면서 튜터님의 설명을 들으니 확실히 이해가 갔다. 피그마 강의를 들으며 과제로 혼자서 처음부터 다시 만들어가면서 복습해보니 이해가 잘 가는 것 같다.