framer5 [내일배움캠프 본캠] 6/30 TIL 4/5일차 : Next Level Challenge더보기Next Level Challenge 이해[ ✅ ] Next Level Challenge의 예제 중 하나를 활용하여 사이트를 구성할 수 있다.아래에서 학습을 완료한 항목을 체크해주세요.개념[ ] CMS[ ✅ ] Lottie Framer 실습[ ✅ ] Top 버튼 구현[ ✅ ] 요소별 마우스 모양 변경[ ✅ ] 로티(Lottie) 애니메이션 사용[ ✅ ] 스플라인(Spline) 3D 요소 연결[ ✅ ] 스크롤 별 인터랙션 구현[ ✅ ] CMS 레이아웃 변경[ ✅ ] CMS 공유하기 MVP 프로젝트 발제더보기Time to Market Lean UX, MVP, Aglie 목표: 빠르게 유의미한 제품을 유저에게 전달하고 피드백받는 것 MVP▷ 목표가 명확하.. 2025. 6. 30. [내일배움캠프 본캠] 6/27 TIL Framer 4일차 1. Top Button 구현하기더보기Top Button이란?Top button(탑 버튼)은 주로 웹사이트에서 사용자가 페이지의 하단에 있거나 긴 페이지를 스크롤하여 내려갔을 때, 클릭하면 페이지의 최상단으로 빠르게 이동할 수 있도록 만들어 놓은 버튼.이런 점이 좋아요편의성 증대: 긴 페이지를 한 번에 최상단으로 이동하여 사용자에게 편의를 제공합니다.사용자 경험(UX) 향상: 사용자의 페이지 탐색 효율성을 높여줍니다.시간 절약: 긴 스크롤을 하지 않아도 되어 빠르게 원하는 지점으로 이동할 수 있습니다. 2. Mouse Cursor 만들기더보기Mouse Cursor란?**Mouse Cursor(마우스 커서)**는 화면 위에서 마우스의 위치를 시각적으로 나타내는 아이콘이나 포인터를 말합니.. 2025. 6. 27. [내일배움캠프 본캠] 6/26 TIL Framer 3일차더보기▷ 그안에 스택은 960px으로 고정! 안그러면 디바이스가 늘려질 때 너무 커짐1200px 이상으로 하면 안됨 ▷ 두번째 CMS 페이지를 만들었을때 자동으로 draft(미사용) 설정이 되는데요. 이걸 페이지 섹션에서 우클릭 누르고 꺼주셔야 해요. 이것 때문에 상세로 안 넘어갈 수도 있어요! 디자인 팁1▷ figma to framer. (플러그인 HTML)▷ html to framer 플러그인 [개사기] 실습더보기 3일차 : Framer로 랜딩페이지 만들기더보기3강 이해[ ✅ ] Framer의 방문자 지표 기능을 이해하고 사용할 수 있다.[ ✅ ] Framer로 웹사이트를 설정하고 사용할 수 있다.[ ✅ ] Framer의 Form 기능을 이해하고 사용할 수 있다.[ ] Frame.. 2025. 6. 26. [내일배움캠프 본캠] 6/25 TIL Framer 2일차더보기CTA = Call To Action 반응형 디자인한 디자인이 다양한 화면 크기에 맞춰 자동 조정되도록 만드는 디자인 방식 큰 화면(pc)에서는 2~3열/큰 텍스트작은 화면(모바일)에서는 1열/ 작은 텍스트 Breakpoint화면 크기가 일정 너비를 넘거나 줄어들 때, 레이아웃을 바꾸는 기준점 framer에서 사용하는 브레이크포인트로 맞춰도 무상관3벌정도만 디자인 관리 추천 데스크탑~1280에서 적용한건 타블렛1279~768/모바일767~에 적용되지만타블렛/모바일에서 적용한건 데스크탑에 적용되지 않음 Wireframer 기능컬러, 타이포그래피, 이미지 삽입 등은 모두 디자이너의 몫 반응형은 미리보기(preview)로 체크!! 미리보기로 줄였다 늘렸다 해야함 (데스크탑조정X) 실습더.. 2025. 6. 25. [내일배움캠프 본캠] 6/24 TIL Framer 1일차더보기토스리멤버등등 New project 인터페이스 > 메뉴 >인서트(많은 에셋) SizeFixed 300pxadd Stack300fixed> 패딩> 색상>Relative 80%부모박스 안에서의 80퍼센트만 채운다는 개념 패딩값이 들어가면 그거 제외하고 채워진다Fill텍스트같은거 fill로 해야 반응형으로 좋음Fit Position!캔버스 자체가 스택이 되어있어야 다 설정가능! Relative화면 흐름대로 쌓임디폴트의 고정값Sticky스크롤하다 특정 위치에 도달하면 고정 Top에서 조정!부모박스 오버플로우가 Visible이 되야함!넘치다는 뜻으로, CSS에서 요소의 크기를 넘어서는 범위를 어떻게 처리할 건지 말하는 거예요.Overflow: Visible 넘치는 걸 보여준다.Overflo.. 2025. 6. 24. 이전 1 다음
