💡 25-05-16 (금)
반응형 랜딩페이지
: 다양한 화면 크기 (PC, 태블릿, 모바일) 에 맞춰 UI가 자동으로 조정되는 디자인 방식
▶︎ 동일한 콘텐츠를 다른 디바이스에 최적화하여 일관된 사용자 경험을 제공한다
✅ 반응형 디자인 사이즈
💡 반응형 디자인을 위한 4가지 팁
https://codewithmeg.medium.com/responsive-design-media-queries-c349edd4532c
✔️ 스마트폰 (모바일) - 320px 이상 / 767px
✔️ 태블릿 - 768px 이상 / 1023px
✔️ PC - 1024px 이상
▶︎ 화면 크기가 특정 지점에 도달했을 때 레이아웃이 바뀌는 기준점인 브레이크포인트가 존재한다
반응형 디자인을 자동으로 적용하게 해주는 미디어 쿼리 방법
PC에서 모바일로 갈수록 콘텐츠들이 세로 일렬, 햄버거 모양으로 배치가 되며
버튼은 크게 / 텍스트 수와 크기는 작게 바뀐걸 볼 수 있다
✅ 렌딩페이지의 역할
: 검색이나 광고를 통해서 페이지에 도달했을때 처음 도착하는 웹 페이지
-> 쉽게 말해서 사용자 끌고와서 우리가 원하는 행동하게 만들고 회사에 성과내는 페이지
▶︎ 하나의 목적에 집중하여 사용자에게 특정 행동을 유도한다
▪️ 마케팅 목적을 위한 단일 페이지 설계
▪️ 사용자의 행동을 유도하는 Call To Action (CTA) 중심 구조
▪️ 제품 소개, 서비스 가입, 이벤트 참여 등에 활용됨
💡 성공적인 랜딩 페이지 사례와 이유
https://unbounce.com/landing-page-examples/best-landing-page-examples/
(랜딩페이지 설계할때 참고하기 좋을거 같음!)
✅ 반응형 렌딩페이지의 장점
▫️ 유지보수 용이성
하나의 디자인으로 모든 디바이스에 적용이 가능하다
▫️ SEO 최적화
검색 엔진 친화적 구조를 제공한다
▶️ SEO (Search Engine Optimization) : 검색엔진에서 내 웹사이트가 더 위에 노출되도록 만드는 모든 작업
▫️ 사용자 경험 개선
모든 디바이스에서 일관된 경험을 제공한다
반응형 레이아웃 설계 원칙
✅ 그리드 시스템 활용
: 콘텐츠를 정돈하게 배치하기 위함
▶︎ 화면 크기가 변해도 콘텐츠들이 비율을 유지하면서 깔끔하고 통일되며 바뀐다
☑️ 모바일은 4~6 칼럼
☑️ PC는 12 칼럼
☑️ 태블릿은 8~12 컬럼
▫️ Column : 레이아웃을 구성할 때 세로로 나눈 줄
▫️ Gutter : 컬럼과 컬럼 사이의 공간
▫️ Margin : 요소 바깥 여백
▫️ Padding : 콘텐츠 안쪽 여백
✅ 우선순위 조정
: 어떤걸 우선순위로 보여줄지에 대한 전략
▶︎ 모든 콘텐츠 다 보여주려고 하기 보다는 핵심 콘텐츠 먼저 노출시킨다
모바일은 디바이스 크기가 작기 때문에 핵심 콘텐츠만 노출하고 불필요한 요소는 제거한다
➡️ 거꾸로 생각해서 모바일에서부터 뻗어나가면 쉽다
작은 화면안에서 뭘 우선적으로 보여주고 싶은지 단번에 파악이 가능하다
반응형 랜딩페이지의 주요 구성 요소
✅ 헤더 (Header)
: 웹페이지, 앱, 문서 등에서 가장 위에 있는 영역
▶︎ 로고, 네비게이션, CTA 버튼
헤더는 웹사이트의 첫인상을 결정짓는 중요한 요소로 사용자는 페이지에 도착한 후 3초 이내에 신뢰할 수 있는지 판단한다
예시로 쿠팡 페이지에 들어가보니 페이지의 구조가 눈에 보이기 시작한다
💡 랜딩 페이지에 대한 개념과 활용 방법
https://ko.wix.com/blog/post/what-are-landing-pages-how-to-use-them-wisely
✅ 히어로 섹션 (Hero Section)
: 웹사이트나 랜딩페이지에서 가장 처음 보이는 메인 화면 영역
-> 사용자가 사이트에 들어왔을 때 스크롤하지 않고 바로 보는 상단 큰 배너 영역
▶︎ 강렬한 문장과 이미지를 사용하여 제품의 가치를 보여줘야 한다
첫 화면에서 사용자의 관심을 끄는 강렬한 메시지와 이미지를 사용해야 하며 CTA 버튼과 함께 주요 서비스 또는 제품을 소개한다
사용자는 히어로 섹션을 보며 3초안에 이미지를 결정한다
💡 히어로 섹션에 대한 설명
https://prismic.io/blog/website-hero-section
✅ 콘텐츠 섹션 (Content Section)
: 사용자에게 실제 정보나 기능을 제공하는 메인 본문 영역 (페이지의 핵심 내용)
▶︎ 특징, 사용자 리뷰, 가격 정보를 표시한다
히어로 섹션에서 사용자들을 확 끌어 모았다면 콘텐츠 섹션에서는 그 사용자들을 붙잡고 설득한다
✅ 푸터
: 보조 정보나 링크, 저작권, 연락처, 소셜 링크가 들어간 아래쪽 영역
▶︎ 마무리 역할의 느낌이며 사용자한테 신뢰도를 높여준다
➕ 사용자 흐름 (User flow)
: 사용자가 앱을 켜서 목표를 달성할때까지 가는 단계별 경로를 도식화한것
예시 > 습관 트래커 앱
👤 사용자 목표 > 새 습관 추가하기
분기가 나눠지기도 한다
▪️ 저장 성공 메시지 → 새 습관 카드 표시 → 완료
▫️ 저장 실패 → 오류 메시지 표시 → 재시도 or 취소
✏️ 베리어블 연습 (버튼 모드) 하기
▫️ 버튼/텍스트 색상 지정 - Color
▫️ 버튼 래디어스 지정 - Number
▫️ 버튼 텍스트 지정 - String
베리어블 지정을 다 했으면 이제 각각 적용시켜준다
버튼 색상은 Fill값에서 설정한다
텍스트 색상과 문구는 Text - 육각형 버튼에서 설정한다
베리어블 래디어스 값은 육각형 버튼을 누르면 된다
이렇게 Light 모드 기본값에 대해서 내가 설정해둔 기본 속성을 토대로 만들었다
그 다음 Appearnace에 들어가면 적용이 잘된것을 확인해볼 수 있다
⭐️ 겉에 프레임이나 섹션이 벨류의 이름과 같아야 한다 ⭐️
베리어블에 들어가면 Name란을 벨류라고 한다
섹션을 하나 만들어서 'Light'와 'Dark'로 이름 변경한 뒤에 Appearnace에 들어가서 각각 알맞게 적용시켜준다
-> 섹션에 적용할때 버튼이 없으면 적용을 못 시킨다 ‼️
➡️ 섹션은 Light,Dark로 바꾸고 버튼은 Auto로 바꿔주기
위에는 강사님과 같이 해본거고 밑에는 혼자 연습삼아 제작해보았다 !
✏️ 로빈후드 베리어블 및 프로토타입 적용해보기
프레임을 누르고 오른쪽 패널을 보면 제대로 연결된 색상과 안 된 색상을 볼 수 있다
(안 된 색상들은 바로 바꿔주면 됨)
☑️ 프로토타입 적용시켜보기 (맛보기)
오른쪽 패널 Prototype에 들어간 다음 'Dark'를 누르면 (+)가 생성된다
Dark를 눌렀을때 넘어가는 다음 화면을 지정해주면 된다
(Light도 마찬가지!)
https://youtu.be/a0au3U3MPPs?si=n2QO1tQ7o59G_1Wo
완서엉 ~...🥱
✏️ 컬리 컴포넌트 프로퍼티
