[내일배움캠프 본캠] 6/25 TIL

Framer 2일차

CTA = Call To Action

 

반응형 디자인

한 디자인이 다양한 화면 크기에 맞춰 자동 조정되도록 만드는 디자인 방식

 

큰 화면(pc)에서는 2~3열/큰 텍스트

작은 화면(모바일)에서는 1열/ 작은 텍스트

 

Breakpoint

화면 크기가 일정 너비를 넘거나 줄어들 때, 레이아웃을 바꾸는 기준점

 

framer에서 사용하는 브레이크포인트로 맞춰도 무상관

3벌정도만 디자인 관리 추천

 

데스크탑~1280에서 적용한건 타블렛1279~768/모바일767~에 적용되지만

타블렛/모바일에서 적용한건 데스크탑에 적용되지 않음

 

Wireframer 기능

컬러, 타이포그래피, 이미지 삽입 등은 모두 디자이너의 몫

 

반응형은 미리보기(preview)로 체크

!! 미리보기로 줄였다 늘렸다 해야함 (데스크탑조정X)

 

실습

Wireframer 프롬포트

스타트업 프로덕트 랜딩페이지를 만들거야. 배너가 있는 Hero section, 로고 4개가 있는 Partner Section, 사용자 Review Section, 1개의 배너가 있는 Feature sectoin, 2개의 카드가 있는 Feature section, 아코디언이 있는 FAQ section과 Form을 등록할 수 있는 CTA section을 만들어줘. 마지막에는 Footer를 넣어줘

 

Current는 New Tab의 경우 색상!

 

https://witty-size-747880.framer.app/#parther

 

 

'랜딩페이지란?' 참고

2025.06.04 - [내일배움캠프 본캠프/6월] - [내일배움캠프 본캠] 6/4 TIL

[내일배움캠프 본캠] 6/4 TIL

 

2일차 : Framer로 랜딩페이지 만들기

1. 2강 이해

• [ ✅ ] 페이지의 섹션(Section)에 대해 이해하고 사용할 수 있다.
• [ ✅ ] 반응형 디자인의 개념과 Breakpoint를 이해하고 사용할 수 있다.
• [ ✅ ] Framer의 Wireframer를 이해하고 사용할 수 있다.

1. 아래에서 학습을 완료한 항목을 체크해주세요.

• 개념
• [ ✅ ] Section - Header(Navigation)
• [ ✅ ] Section - Hero Section
• [ ] Section - About Section
• [ ] Section - Feature Section
• [ ] Section - Testimonial / Review Section
• [ ✅ ] Section - FAQ Section
• [ ✅ ] Section - Pricing Section
• [ ✅ ] Section - CTA Section
• [ ✅ ] Section - Contact Section
• [ ✅ ] Section - Footer
• Framer 실습
• [ ✅ ] Wireframer로 와이어프레임 구현
• [ ✅ ] Review section - Ticker 컴포넌트 활용
• [ ✅ ] Feature section - Slide 컴포넌트 활용
• [ ✅ ] FAQ section - Accordion 사용
• [ ✅ ] Footer 컴포넌트로 변경
• [ ✅ ] Navigation 컴포넌트 - Fixed 여부 변경
• [ ✅ ] Navigation 컴포넌트 - 로고 변경
• [ ✅ ] Navigation 컴포넌트 - 메뉴 텍스트 변경
• [ ✅ ] Navigation 컴포넌트 - 메뉴 링크 스타일 변경
• [ ✅ ] Navigation 컴포넌트 - 스크롤 인터랙션 추가
• [ ✅ ] Desktop 사이즈 디자인 구현
• [ ✅ ] Tablet 사이즈 디자인 구현
• [ ✅ ] Mobile 사이즈 디자인 구현
• [ ✅ ] 웹사이트 배포